/* よりそい暦 — ふたり〜家族の共有カレンダー
   モバイルファースト。外部ライブラリ・外部ウェブフォントなし（端末内蔵の書体だけを使う）。 */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#f5f3ed; --surface:#fff; --surface-2:#faf9f5;
  --ink:#24312d; --muted:#6b7772; --line:#e3e7df; --line-soft:#eef0ea;
  --green:#1f6954; --green-deep:#15503e; --green-soft:#eef4f0;
  --gold:#e8b967;
  --sun:#c2544d; --sat:#3f6fa8;
  --danger:#b42318;
  --radius:14px; --radius-lg:22px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Yu Gothic","Meiryo",system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Shippori Mincho","Noto Serif JP",serif;
  --shadow:0 10px 30px rgba(31,61,48,.10);
  --shadow-lg:0 20px 60px rgba(31,61,48,.18);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.7;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}

/* 🔴 hidden 属性を必ず効かせる。display を持つ規則に負けさせない（未ログインで nav が出た不具合の原因） */
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.4;margin:0}
p{margin:0}
a{color:var(--green)}

/* ---------- 共通の部品 ---------- */
button,.button,input,select,textarea{font:inherit;font-family:inherit}
button,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:44px;padding:.55rem 1rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s;
}
button:hover,.button:hover{background:var(--surface-2)}
button:active,.button:active{transform:translateY(1px)}
.primary{background:var(--green);color:#fff;border-color:var(--green);font-weight:600}
.primary:hover{background:var(--green-deep);border-color:var(--green-deep)}
.ghost{background:transparent;border-color:transparent}
.ghost:hover{background:#0000000a}
.danger{color:var(--danger);border-color:#e7cdc9;background:#fff}
.danger:hover{background:#fdf3f2}

:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}
/* 読み上げ専用（目には出さない） */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

label{display:grid;gap:6px;margin:0 0 14px;font-size:13px;font-weight:700;color:#3c4a45}
input,select,textarea{
  width:100%;min-height:44px;padding:11px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);
  font-size:16px; /* 16px 未満だと iOS が自動で拡大する */
}
textarea{min-height:84px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px #1f695424}
.error{color:var(--danger);font-size:13px;margin:8px 0 0;min-height:1.2em}
.hint{color:var(--muted);font-size:12px;font-weight:400;line-height:1.6}

/* ---------- ヘッダー ---------- */
header.site{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:8px max(14px,3.5vw);
  background:#fffffff2;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand h1{font-size:17px;letter-spacing:.02em;white-space:nowrap}
/* 社章を入れる枠。🔴 丸い地色は持たせない——社章が自分の地（角丸 23.44%＝当社の社章と同じ丸み）を
   持っているので、下に丸を敷くと二重の図形になる。 */
.mark{flex:none;display:block;width:34px;height:34px;line-height:0}
.mark .bm{display:block;width:100%;height:100%}
nav{display:flex;align-items:center;gap:8px}
.nav-move{display:flex;align-items:center;gap:2px}
.nav-move button{min-width:44px;padding:.5rem .6rem;border-color:transparent;background:transparent}
.nav-move button:hover{background:var(--green-soft)}
#today{font-size:13px;font-weight:600;padding:.5rem .8rem}
.seg{display:flex;gap:0;background:var(--green-soft);border-radius:999px;padding:3px}
.seg button{
  min-height:36px;padding:.3rem .9rem;border:0;background:transparent;
  font-size:13px;font-weight:600;color:#3c5a4f;border-radius:999px;
}
.seg button.active{background:var(--surface);color:var(--green-deep);box-shadow:0 1px 4px #1f39280f}
/* ヘッダー内のグループ名・メンバー（日付以外は全部ヘッダーへ） */
.group-name{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--green-deep);background:color-mix(in srgb,var(--gold) 28%,#fff);border:0;min-height:0;cursor:pointer;border-radius:999px;padding:4px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
#nav{display:flex;align-items:center;gap:10px}
#nav .members{margin:0}
/* 日付バー（‹ 2026年10月 › 今月）はカレンダー直上 */
.monthbar{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.monthbar #period{font-size:clamp(18px,4.6vw,24px);margin:0 2px;white-space:nowrap}
.monthbar .navbtn{min-width:40px;padding:.5rem .55rem;border-color:transparent;background:transparent}
.monthbar .navbtn:hover{background:var(--green-soft)}
.monthbar #today{font-size:13px;font-weight:600;padding:.45rem .8rem}
.monthbar #newEvent{margin-left:auto}
.todo-quick{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;padding:.45rem .8rem}
.todo-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green);color:#fff;font-size:11px;font-weight:700}

main{max-width:1180px;margin:0 auto;padding:22px max(14px,3.5vw) 56px}

/* ---------- ランディング ---------- */
#welcome{display:grid;gap:26px}
.hero-copy .eyebrow{color:var(--green);font-weight:700;font-size:13px;letter-spacing:.09em;margin-bottom:10px}
.hero-copy h2{font-size:clamp(27px,7.4vw,46px);line-height:1.45;letter-spacing:.01em}
.hero-copy .lead{margin-top:14px;color:#49564f;font-size:15px}

/* 製品のプレビュー（静的な模擬描画。JS が動く前から見える） */
.preview{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.pv-bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
}
.pv-dot{width:9px;height:9px;border-radius:50%;background:#d8ded6}
.pv-title{margin-left:4px;font-family:var(--serif);font-size:14px;font-weight:600;color:#44524c}
.pv-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.pv-wd{
  padding:7px 0;text-align:center;font-size:10px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
.pv-wd.sun{color:var(--sun)} .pv-wd.sat{color:var(--sat)}
.pv-cell{
  min-height:58px;padding:5px 4px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.pv-cell:nth-child(7n){border-right:0}
.pv-cell .d{display:block;font-size:10px;color:#7b857f;margin-bottom:3px;text-align:center}
.pv-cell.today .d{
  display:block;width:18px;height:18px;margin:0 auto 3px;line-height:18px;
  background:var(--green);color:#fff;border-radius:50%;font-weight:700;
}
.pv-chip{
  display:block;margin:2px 0;padding:2px 4px;border-radius:4px;
  font-size:9px;line-height:1.5;color:#2b3a34;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 13%,#fff);
}

/* 3つの価値 */
.values{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.values li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
}
.values .ico{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--green-soft);color:var(--green-deep);font-size:16px;
}
.values b{display:block;font-size:14px;margin-bottom:2px}
.values span{font-size:13px;color:var(--muted);line-height:1.65}

/* 入り口のカード */
.hero-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 18px;box-shadow:var(--shadow);
}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;margin-bottom:18px}
.tabs button{
  flex:1;min-height:40px;border:0;background:transparent;border-radius:999px;
  font-size:14px;font-weight:600;color:#55625c;
}
.tabs button.active{background:var(--surface);color:var(--green-deep);box-shadow:0 1px 5px #1f392811}
.hero-card form>.primary{width:100%;margin-top:6px}

/* 色えらび */
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.swatches input{position:absolute;opacity:0;width:1px;height:1px}
.swatches label{
  margin:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  cursor:pointer;border:2px solid transparent;background:var(--c);
  box-shadow:inset 0 0 0 2px #fff;
}
.swatches input:checked+label{border-color:var(--ink)}
.swatches input:focus-visible+label{outline:3px solid var(--green);outline-offset:2px}

/* ---------- カレンダー画面 ---------- */
.toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .eyebrow{color:var(--green);font-weight:700;font-size:12px;letter-spacing:.07em}
.toolbar h2{font-size:clamp(21px,5.2vw,30px);margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions button,.actions .button{font-size:13px}

.members{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.member{
  display:inline-flex;align-items:center;
  padding:4px 13px;border-radius:999px;
  background:var(--c);color:#fff;border:0;font-size:13px;font-weight:600;white-space:nowrap;
}
.avatar{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--c);color:#fff;font-size:11px;font-weight:700;
}
.you{
  margin-left:2px;padding:1px 7px;border-radius:999px;
  background:var(--green-soft);color:var(--green-deep);font-size:10px;font-weight:700;
}
/* メンバー一覧（控えめな入口から開く） */
.member-list{display:grid;gap:8px}
.member-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left;min-height:0}
.member-row:hover{background:var(--surface-2)}
.member-row .mr-name{flex:1;font-weight:700;font-size:14px}
.member-row .mr-go{font-size:12px;color:var(--muted)}
/* グループ名タップのメニュー（招待/メンバー/ICS） */
.menu-list{display:grid;gap:8px}
.menu-item{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;text-align:left}  /* ボタンと a（ICS 書き出し）で揃える（a だけ左寄せになっていた） */
.menu-item:hover{background:var(--surface-2)}
/* やること（TODO）— 既存のリスト（.day-item・.member-row）と .who-tag チップに合わせる */
.todo-add{display:flex;gap:8px;margin-bottom:10px}
.todo-add input{flex:1}
.todo-add .primary{flex:none;min-width:72px}
.todo-fields{display:flex;align-items:end;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.todo-fields label{flex:1;min-width:130px;margin:0;font-size:12px;font-weight:700;color:var(--muted)}
.todo-fields input,.todo-fields select{margin-top:2px}
.todo-fields button{flex:none;min-height:44px}
.todo-list{display:grid;gap:8px}
.todo-item{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:background .15s,border-color .15s}
.todo-item:hover{background:var(--surface-2)}
.todo-check{flex:none;width:22px;height:22px;min-height:0;padding:0;border:2px solid var(--line);border-radius:50%;background:var(--surface);position:relative;cursor:pointer;transition:background .15s,border-color .15s}
.todo-check:hover{border-color:var(--green)}
.todo-item.done .todo-check{background:var(--green);border-color:var(--green)}
.todo-item.done .todo-check::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px}
/* タイトルの上にメタ（期日・担当）を重ねる縦積み。.day-item の .di-body と同じ構成 */
.todo-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:0;border:0;background:transparent;color:var(--ink);font-size:15px;font-weight:600;line-height:1.5;word-break:break-word;text-align:left;white-space:normal}
.todo-item.done .todo-text{color:var(--muted);font-weight:400;text-decoration:line-through}
.todo-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;font-weight:400;color:var(--muted);text-decoration:none}
.todo-due{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
/* 担当は .who-tag（色ドット＋淡色）と同じ見た目にする */
.todo-who{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,#fff);color:#2b3a34;font-weight:700}
.todo-who::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.todo-item.overdue{border-color:#e7cdc9;background:#fdf3f2}
.todo-item.overdue:hover{background:#fbeceb}
.todo-item.overdue .todo-due{background:#fbe4e1;border-color:#f0cfca;color:var(--danger);font-weight:700}
.todo-completed{margin-top:6px}.todo-completed summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:8px}.todo-completed .todo-item{margin-top:8px}
.todo-del{flex:none;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;transition:background .15s,color .15s}
.todo-del:hover{background:var(--surface-2);color:var(--ink)}
/* 規約・プライバシー・AIが運営 は本当に右下へ（カレンダーの外・誰も見ない前提で最小） */
.corner-legal{position:fixed;right:7px;bottom:calc(2px + env(safe-area-inset-bottom));z-index:6;margin:0;display:flex;gap:7px;font-size:8.5px;color:#c2c9c2}
.corner-legal a{color:#c2c9c2;text-decoration:underline}
body:not(.signed-in) .corner-legal{display:none}
/* みんなの更新（通知ポップアップ） */
.updates-list{display:grid;gap:10px}
.update-row{display:flex;gap:10px;align-items:flex-start}
.update-row .dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--c)}
.update-row .u-body{font-size:14px;line-height:1.6}
.update-row .u-when{display:block;font-size:12px;color:var(--muted);margin-top:1px}

.calendar{
  width:100%;  /* flex親の中でコンテンツ幅に縮まず常に全幅（週/日/ナビ後が細くなる不具合の修正） */
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
}
/* 月: 週ごとの行＋複数日の連結バー */
.calendar.month{display:flex;flex-direction:column}
.calendar.month .wd-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:none}
.wkrow{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line-soft)}
.wkrow:last-child{border-bottom:0}
.wkrow .day{border-bottom:0}
.barspace{display:block}
/* 単日チップと同じ淡い色＋左の色線のまま、横に伸ばすだけ（派手な塗りはやめる・オーナー指摘） */
/* 単日チップと完全に同じ見た目（淡色14%・左の色線・角丸・同フォント）で、横に伸ばすだけ */
.mdbar{position:absolute;min-height:0;padding:1px 5px;border:0;background:color-mix(in srgb,var(--c) 14%,#fff);color:#263430;font-size:9.5px;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;z-index:3;cursor:pointer}
.mdbar.ls{border-left:3px solid var(--c);border-top-left-radius:4px;border-bottom-left-radius:4px}
.mdbar.rs{border-top-right-radius:4px;border-bottom-right-radius:4px}
.secondary-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}
.secondary-actions .button,.secondary-actions button{font-size:13px;color:var(--muted);min-height:40px}
.legal-link{align-self:center;font-size:10px;color:#9aa5a0;text-decoration:underline}
.legal-link.ai{text-decoration:none;margin-left:auto}  /* AIが運営は右下へ（オーナー指摘） */
.wd{
  padding:9px 0;text-align:center;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.wd.sun{color:var(--sun)} .wd.sat{color:var(--sat)}
.day{
  position:relative;min-height:70px;padding:5px 5px 7px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:none;border-radius:0;text-align:left;display:block;align-items:stretch;
  justify-content:flex-start;white-space:normal;
}
.day:nth-child(7n){border-right:0}
.day:hover{background:#1f69540a}
.day.out{background:var(--surface-2)}
.day.out .date{color:#b3bbb5}
.date{
  display:grid;place-items:center;width:19px;height:19px;margin:0 auto 3px;
  font-size:11px;font-weight:600;color:#7b857f;border-radius:50%;
}
.day.sun .date{color:var(--sun)} .day.sat .date{color:var(--sat)}
.day.holi .date{color:var(--sun)}  /* 祝日は日曜と同じ赤。土曜より後に置き、赤を優先。todayの緑丸はこの後の規則が勝つ */
.day.today .date{background:var(--green);color:#fff;font-weight:700}
.todo-day-count{position:absolute;right:5px;top:5px;display:grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--gold);color:#4a3a15;font-size:9px;font-weight:700}
/* タップ時の硬い緑枠はやめて、やさしい塗りに（オーナー指摘） */
.day:focus{outline:none}
.day:focus-visible{outline:none;background:#1f695414}
.chip{
  display:block;width:100%;min-height:0;margin:2px 0;padding:2px 5px;
  border:0;border-left:3px solid var(--c);border-radius:4px;
  background:color-mix(in srgb,var(--c) 14%,#fff);
  color:#263430;font-size:11px;line-height:1.55;text-align:left;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.chip .t{color:#5d6b65;margin-right:3px;font-variant-numeric:tabular-nums}
.chip.allday{border-left-width:0;background:var(--c);color:#fff}
.chip.allday .t{display:none}
.more{
  display:block;width:100%;min-height:0;margin:2px 0 0;padding:1px 5px;border:0;background:none;
  color:var(--muted);font-size:10px;text-align:left;border-radius:4px;
}
.empty{
  grid-column:1/-1;padding:46px 22px;text-align:center;color:var(--muted);
  display:grid;gap:10px;justify-items:center;
}
.empty .big{font-size:30px;opacity:.5}
.empty p{font-size:14px}

/* 週表示 */
#emptyState{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);margin-top:-1px}
/* 週は縦に7日ならべる（上から下へ・横スクロールはしない） */
.calendar.week{display:flex;flex-direction:column;overflow-y:auto}
.calendar.week .wd{display:none}
.wrow{display:flex;align-items:flex-start;gap:12px;min-height:50px;padding:9px 12px;border-right:0;border-bottom:1px solid var(--line-soft)}
.wrow:last-child{border-bottom:0}
.wrow:hover{background:#1f69540a}
.wrow-head{flex:none;display:flex;align-items:center;gap:7px;width:48px}
.wrow-head .wn{font-size:12px;font-weight:700;color:var(--muted)}
.wrow-head .wnum{font-size:16px;font-weight:700;color:#55625c}
.wrow.sun .wn,.wrow.sun .wnum{color:var(--sun)} .wrow.sat .wn,.wrow.sat .wnum{color:var(--sat)}
.wrow.today .wnum{display:grid;place-items:center;width:26px;height:26px;background:var(--green);color:#fff;border-radius:50%}
.wrow-events{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wrow-events .chip{width:100%}
.wempty{color:#aab2ac;font-size:12px;padding:2px 0}
/* 日ビュー: 実際のタイムスケジュール（時間軸＋自分/相手/全員の3列・現在時刻ライン） */
.calendar.day{display:flex;flex-direction:column;min-height:460px;overflow:hidden}
.dayview{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.dv-head,.dv-allday{display:flex;flex:none;border-bottom:1px solid var(--line)}
.dv-head{background:var(--surface-2)}  /* 左上の角（時刻の列の上）も見出しの帯と同じ色に */
.dv-corner{flex:none;width:44px}
.dv-hcol{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;font-size:12px;font-weight:700;color:#3c4a45;background:var(--surface-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-hcol .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.dv-allday{align-items:stretch;min-height:28px;background:var(--surface-2)}
.dv-allday .dv-corner{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted)}
.dv-acol{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:3px 4px;border-left:1px solid var(--line-soft)}
.dv-acol .chip{width:100%}
.dv-body{flex:1;min-height:0;overflow:hidden;display:flex;position:relative}
.dv-axis{flex:none;width:44px;position:relative}
.dv-hour{position:absolute;left:0;width:44px;padding-right:6px;text-align:right;font-size:9.5px;color:var(--muted);transform:translateY(-5px)}
.dv-tracks{flex:1;display:flex;position:relative}
.dv-gl{position:absolute;left:0;right:0;border-top:1px solid var(--line-soft)}
.dv-track{flex:1;min-width:0;position:relative;border-left:1px solid var(--line-soft)}
.tevent{position:absolute;left:2px;right:2px;min-height:12px;overflow:hidden;border:0;border-left:3px solid var(--c);border-radius:5px;background:color-mix(in srgb,var(--c) 15%,#fff);color:#263430;font-size:10px;line-height:1.2;text-align:left;padding:1px 4px;white-space:normal;display:block}
.tevent .te-t{font-weight:700;margin-right:3px;color:#5d6b65}
.dv-now{position:absolute;left:0;right:0;height:0;border-top:2px solid #e5484d;z-index:3}
.dv-now::before{content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;border-radius:50%;background:#e5484d}

/* 日本の祝日 — 日曜と同じ赤系(var(--sun))でそろえる。予定チップとは別物として控えめに示す */
/* 月: セル上部の小さな祝日ラベル（予定チップと区別・複数日バーと重なっても読めるよう前面へ） */
.holi-label{
  display:block;width:100%;min-height:0;margin:0 0 2px;padding:1px 5px;
  border-radius:4px;background:color-mix(in srgb,var(--sun) 10%,#fff);
  color:var(--sun);font-size:9.5px;font-weight:700;line-height:1.4;
  text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  position:relative;z-index:4;
}
/* 週: 日付ヘッダを赤に＋予定欄の先頭に祝日名のピル */
.wrow.holi .wn,.wrow.holi .wnum{color:var(--sun)}
.holi-tag{
  align-self:flex-start;display:inline-flex;align-items:center;max-width:100%;
  padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--sun) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--sun) 24%,#fff);
  color:var(--sun);font-size:11px;font-weight:700;line-height:1.5;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
/* 日: 時間軸の上に祝日名の帯 */
.dv-holi{
  flex:none;padding:7px 12px;text-align:center;
  background:color-mix(in srgb,var(--sun) 9%,#fff);
  border-bottom:1px solid var(--line);
  color:var(--sun);font-size:13px;font-weight:700;
}
/* 日別シート: タイトル横の祝日バッジ */
.day-holi{
  display:inline-block;margin-left:9px;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--sun) 12%,#fff);
  color:var(--sun);font-size:12px;font-weight:700;
  font-family:var(--sans);vertical-align:middle;
}

/* 追加ボタン（スマホ） */
.fab{
  position:fixed;right:16px;z-index:25;
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:auto;min-height:52px;padding:0 20px;border-radius:999px;
  background:var(--green);color:#fff;border-color:var(--green);
  font-weight:700;box-shadow:var(--shadow-lg);
}
.fab:hover{background:var(--green-deep)}

/* ---------- ダイアログ／ボトムシート ---------- */
dialog{
  border:0;padding:0;color:var(--ink);background:var(--surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:min(540px,calc(100% - 28px));max-height:88vh;
}
dialog::backdrop{background:#18221dab}
.sheet{display:flex;flex-direction:column;max-height:88vh}
.sheet-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;background:var(--surface);border-bottom:1px solid var(--line-soft);
}
.sheet-head h2{font-size:18px}
.sheet-head .close{min-width:40px;min-height:40px;padding:0;border-color:transparent;background:transparent;font-size:20px;color:var(--muted)}
.sheet-head .close:hover{background:var(--surface-2)}
.sheet-body{padding:16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{
  position:sticky;bottom:0;display:flex;align-items:center;gap:10px;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line-soft);
}
.sheet-foot .primary{margin-left:auto;min-width:112px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 日時フィールド＋自作ピッカー */
.when{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.when-field{flex:1;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.when-field:hover{background:var(--surface-2)}
.when-cap{font-size:11px;color:var(--muted);font-weight:700}
.when-val{font-size:15px;font-weight:700;color:var(--ink)}
.when-arrow{flex:none;color:var(--muted)}
.picker .sheet-head{align-items:stretch}
.pick-seg{flex:1}
.pick-seg button{flex:1;flex-direction:column;gap:1px;min-height:46px}
.pick-seg .pv{font-size:11px;font-weight:700;opacity:.8}
.pick-month{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:10px}
.pick-month #pickMonth{font-family:var(--serif);font-size:16px;font-weight:600;min-width:130px;text-align:center}
.pick-month button{min-width:40px;border-color:transparent;background:transparent}
.pick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pick-grid .pwd{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:3px 0}
.pick-grid .pwd.sun{color:var(--sun)} .pick-grid .pwd.sat{color:var(--sat)}
.pick-grid .pd{min-height:40px;border:0;background:transparent;border-radius:10px;font-size:14px;color:var(--ink);padding:0}
.pick-grid .pd:hover{background:var(--green-soft)}
.pick-grid .pd.out{color:#c2c9c2}
.pick-grid .pd.today:not(.sel){box-shadow:inset 0 0 0 2px var(--green-soft)}
.pick-grid .pd.sel{background:var(--green);color:#fff;font-weight:700}
.pick-time{display:flex;gap:12px;margin-top:16px}
.pick-time label{flex:1;margin:0}
/* だれの予定（自分/相手/全員） */
.who{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.who-opt{min-height:40px;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:#55625c}
.who-opt.active{background:var(--green);border-color:var(--green);color:#fff}

/* 終日トグル */
.toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:10px 14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;
}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.track{
  flex:none;position:relative;width:48px;height:28px;border-radius:999px;background:#cfd6cf;transition:background .18s;
}
.track::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s;
}
.toggle input:checked+.track{background:var(--green)}
.toggle input:checked+.track::after{transform:translateX(20px)}
.toggle input:focus-visible+.track{outline:3px solid var(--green);outline-offset:2px}

/* 招待 */
.invite-link{
  display:flex;gap:8px;align-items:center;margin-bottom:14px;
  padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  font-size:13px;word-break:break-all;line-height:1.6;color:#45524c;
}
.code{
  display:block;margin-top:4px;font-size:15px;font-weight:700;letter-spacing:.04em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--ink);
}

/* その日の一覧 */
.day-list{display:grid;gap:9px}
.day-item{
  display:flex;gap:11px;align-items:flex-start;width:100%;
  padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  text-align:left;white-space:normal;min-height:0;
}
.day-item:hover{background:var(--surface-2)}
.day-item .bar{flex:none;width:4px;align-self:stretch;min-height:34px;border-radius:999px;background:var(--c)}
.day-item .di-body{flex:1;min-width:0}
.day-item .ttl{display:block;font-weight:700;font-size:14px;line-height:1.5}
.day-item .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:3px}
.day-todos{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.day-todos h3{margin:0 0 9px;font-size:14px}
.who-tag{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,#fff);color:#2b3a34;font-weight:700;font-size:11px}
.who-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ---------- 自分のカレンダーを共有（設定ダイアログ） ---------- */
.share-lead{font-size:14px;line-height:1.75;color:#3c4a45;margin:0 0 18px;text-wrap:pretty;word-break:auto-phrase}  /* 語の途中（見/えません）で折らない。未対応の端末は従来どおり */
.share-sec{margin:0 0 22px}
.share-h{font-size:14px;margin:0 0 9px}
.mode-list{display:grid;gap:8px;margin-bottom:10px}
/* 見せ方: 既存の .day-item／.who-opt と同じ作法（線・角丸12px・選択中は緑） */
.mode-opt{display:flex;align-items:flex-start;gap:11px;margin:0;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:400;color:var(--ink);transition:background .15s,border-color .15s}
.mode-opt:hover{background:var(--surface-2)}
.mode-opt input{position:absolute;opacity:0;width:1px;height:1px}
.mo-radio{flex:none;position:relative;width:20px;height:20px;margin-top:2px;border:2px solid #cfd6cf;border-radius:50%;background:var(--surface);transition:border-color .15s}
.mode-opt input:checked+.mo-radio{border-color:var(--green)}
.mode-opt input:checked+.mo-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green)}
.mode-opt input:focus-visible+.mo-radio{outline:3px solid var(--green);outline-offset:2px}
.mode-opt:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.mo-body{display:block;min-width:0}
.mo-body b{display:block;font-size:14px;line-height:1.5}
.mo-desc{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:1px;text-wrap:pretty;word-break:auto-phrase}
.share-group{margin:0 0 6px;font-size:13px}
.share-gname{color:var(--green-deep)}
.share-preview{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--green);text-decoration:none;margin:-4px 0 0}
.share-preview::after{content:"↗";font-size:12px}
.share-preview:hover{text-decoration:underline}
.share-sub-lead{margin:0 0 10px;word-break:auto-phrase}
.share-actions{display:flex;gap:8px;flex-wrap:wrap}
.share-actions button,.share-actions .button{font-size:13px;font-weight:600;min-height:40px;padding:.45rem .95rem}
.share-howto{margin-top:12px;font-size:13px;color:#45524c}
.share-howto summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600}
.share-howto p{margin:8px 0 0;line-height:1.7}
.share-manage{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.share-manage .hint{margin-top:8px}
.share-off{padding:14px 15px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.share-off b{font-size:14px}
.share-off .hint{margin-top:2px}

/* ---------- 共有ページ（/shared・閲覧のみ） — 本体と同じ部品（ヘッダー・monthbar・カレンダー・シート）で描く ---------- */
.sv-titles{min-width:0;display:flex;align-items:center;gap:10px}
.sv-title{font-size:17px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sv-ro{font-size:.86em;color:var(--muted)}
.sv-sub{display:flex;align-items:center;gap:6px;min-width:0;margin:0}
.sv-sub:empty{display:none}
.sv-badge{display:none}
.sv-group{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--green-deep);background:color-mix(in srgb,var(--gold) 28%,#fff);border-radius:999px;padding:3px 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.sv-mode{display:none;margin-left:auto;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.sv-mode::before{content:"";width:8px;height:8px;border-radius:50%;background:#aab2ac}
body.mode-busy .sv-mode{display:inline-flex}
.monthbar .navbtn[aria-disabled=true]{opacity:.3;cursor:default}
.monthbar .navbtn[aria-disabled=true]:hover{background:transparent}
/* 表示できる期間の外の日（「予定なし」と誤って読ませない） */
.day.nodata:not(.wrow){background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,#f0efe8 6px 12px)}
.day.nodata .date{color:#b3bbb5}
.wrow.nodata{background:var(--surface-2)}
.dv-off{flex:none;padding:7px 12px;text-align:center;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700}
.sv-note{display:flex;gap:10px;align-items:flex-start;max-width:1180px;margin:0 auto;padding:4px max(14px,3.5vw) 0;font-size:12.5px;line-height:1.75;color:var(--muted);word-break:auto-phrase}
.sv-note a{margin-left:4px;color:var(--green);font-weight:600}
.sv-note-mark{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--gold);color:#4a3a15;font-size:8px;font-weight:700}
.sv-note-busy{display:none}
body.mode-busy .sv-note-busy{display:inline}
.sv-noscript{padding:40px 16px;text-align:center;color:var(--muted)}
/* 予定の詳細シート（見るだけ） */
.sv-detail{display:grid;gap:14px}
.sv-when{display:flex;gap:11px;align-items:stretch}
.sv-when .bar{flex:none;width:4px;border-radius:999px;background:var(--c)}
.sv-field{display:grid;gap:3px;min-width:0}
.sv-cap{font-size:11px;font-weight:700;color:var(--muted)}
.sv-val{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55}
.sv-memo{margin:0;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.sv-private{margin:0;padding:10px 12px;background:var(--surface-2);border-radius:12px;color:var(--muted);font-size:13px;line-height:1.7;word-break:auto-phrase}
.sv-foot-note{font-size:12px;color:var(--muted)}
#svDayTitle{display:flex;align-items:center;flex-wrap:wrap}
/* リンクが使えない・混みあっている時の案内（hero-card と同じ札） */
.sv-notice{max-width:460px;margin:6vh auto 0;padding:30px 24px 26px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.sv-notice-mark{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);font-size:20px;font-weight:700;font-family:var(--serif)}
.sv-notice h2{font-size:20px;margin-bottom:12px}
.sv-notice p{font-size:14px;color:#45524c;line-height:1.8;text-wrap:balance;word-break:auto-phrase}  /* 中央寄せの短文は行の長さをそろえ、語の途中で折らない（未対応の端末は従来どおり） */
.sv-notice .button{margin-top:20px}

/* 日ビューの外枠: #calendar 自身が class="calendar day" になるため、月セル用の .day（背景なし・角なし・余白）を受けていた。外枠は白い札に戻す */
.calendar.day{padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.calendar.day:hover,.calendar.day:focus-visible{background:var(--surface)}

/* ---------- トースト ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:60;
  transform:translateX(-50%) translateY(8px);
  width:max-content;max-width:min(92vw,420px);padding:12px 18px;  /* max-content: left:50% の札は幅が画面の半分に縮み、短い文でも折れていた */
  background:#24312d;color:#fff;border-radius:12px;font-size:14px;text-align:center;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 規約フッター（legal.py が差し込む。inline style を上書きする） ---------- */
#digit-legal{
  max-width:1180px;margin:8px auto 0!important;
  padding:22px max(14px,3.5vw) calc(34px + env(safe-area-inset-bottom))!important;
  border-top:1px solid var(--line)!important;color:var(--muted)!important;
  font-size:12.5px!important;line-height:1.75!important;
}
#digit-legal strong{color:#44524c}
#digit-legal a{color:var(--green)}
/* ログイン後は大きな規約フッターを隠し、小さな一行だけ残す（オーナー指摘・AI運営の明示はコンプラ必須なので最小限で保持） */
body.signed-in #digit-legal{display:none!important}
.app-legal{text-align:center;font-size:10.5px;color:#9aa5a0;margin:8px 0 0}
.app-legal a{color:#9aa5a0;text-decoration:underline}

/* 規約・PP 本文 */
.legal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px max(16px,3vw);box-shadow:var(--shadow);
}
.legal h1{font-size:24px;margin-bottom:14px}
.legal h2{font-size:18px;margin:26px 0 8px}
.legal h3{font-size:15px;margin:18px 0 6px}
.legal p,.legal li{font-size:14px}
.legal table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--surface-2)}
.legal blockquote{margin:12px 0;padding:12px 14px;background:var(--surface-2);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-size:13px}
.legal code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12px}

/* ---------- 画面幅 ---------- */
@media(max-width:560px){
  .pv-chip{font-size:0;height:6px;padding:0;border-left-width:0;background:var(--c);border-radius:3px}
  .pv-cell{min-height:50px}
}
@media(max-width:600px){
  /* narrow + ログイン済みのときだけ、丸い印だけ残して操作に幅を譲る（2行に折れるのを防ぐ） */
  body.signed-in .brand h1{display:none}
  body.signed-in #today{padding:.5rem .7rem;font-size:12px}
  body.signed-in .seg button{padding:.3rem .8rem;font-size:12px}
}
@media(max-width:720px){
  #toast{bottom:calc(20px + env(safe-area-inset-bottom))}
  .calendar{border-radius:var(--radius)}
  .day{min-height:58px;padding:4px 3px 6px}
  .chip{font-size:10.5px;padding:1px 4px}
  /* 1画面に収める（縦スクロールなし）。body を縦フレックスにして calendar が余白を埋める */
  body.signed-in{height:100svh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}  /* dvh=実際の表示域に合わせ、下の余白をなくす */
  body.signed-in header.site{flex:none}
  body.signed-in main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;width:100%;padding:6px 4px env(safe-area-inset-bottom)}  /* 画面幅いっぱいに。margin:0 で中央寄せ(auto)の縮みを打ち消す（オーナー指摘） */
  body.signed-in #calendarApp{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  body.signed-in .monthbar,body.signed-in .secondary-actions{flex:none}
  body.signed-in #digit-legal{flex:none;margin:0!important;padding:8px max(14px,3.5vw) calc(8px + env(safe-area-inset-bottom))!important;font-size:11px!important;line-height:1.5!important}
  /* 下のフッター（招待/メンバー/ICS＋小文字）をさらに半分に（オーナー指摘2回目） */
  /* 招待/メンバー/ICS と 規約/プライバシー/AI運営 を1行に（オーナー指摘） */
  .secondary-actions{margin:0;gap:2px 7px;padding:2px 0}
  .secondary-actions button,.secondary-actions .button{min-height:0;font-size:10.5px;padding:0 3px;line-height:1.4}
  .legal-link{font-size:9.5px}
  .calendar.month{flex:1 1 auto;min-height:0;grid-template-rows:auto repeat(6,1fr)}
  .calendar.month .wkrow{flex:1 1 0;min-height:0}
  .calendar.month .day{min-height:0;overflow:hidden}
  .mdbar{pointer-events:none}  /* スマホは日セルへタップを通す（その日の一覧を開く） */
  .calendar.month .date{font-size:10px;width:18px;height:18px;margin:0 auto 2px}
  .calendar.month .holi-label{font-size:9px;padding:0 3px;margin-bottom:1px}
  .calendar.month .chip{margin:1px 0;line-height:1.3;font-size:9.5px}
  .calendar.month .chip .t{margin-right:2px}
  .calendar.month .more{margin:1px 0 0;font-size:9.5px;padding:0 5px}
  .calendar.week,.calendar.day{flex:1 1 auto;min-height:0}
  .fab{display:none}  /* 1画面なので floating は使わず、monthbar の＋予定を使う */
  /* 上部: 日付以外はヘッダー。メンバー名は普通に表示（オーナー指摘） */
  header.site{min-height:54px;gap:8px}
  body.signed-in .brand h1{display:none}
  body.signed-in .mark{display:none}  /* 左上の「より」ロゴは出さない（オーナー指摘） */
  .group-name{max-width:40vw;font-size:14px}
  #nav{gap:8px;min-width:0}
  #nav .members{flex-wrap:nowrap;overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}
  #nav .member{font-size:12px;padding:3px 11px;flex:none}
  .monthbar{margin-bottom:8px}
  .monthbar #period{font-size:20px}
  /* 週は縦リスト（base で定義）。スマホでは calendar 内だけ縦スクロール */
  /* スマホではダイアログを下から出すシートにする */
  dialog{
    width:100%;max-width:none;margin:0;
    position:fixed;left:0;right:0;bottom:0;top:auto;
    border-radius:20px 20px 0 0;max-height:92vh;
    animation:sheet-up .22s ease-out;
  }
  .sheet,.sheet-body{max-height:none}
  .sheet{max-height:92vh}
}
/* 共有ページのスマホ: 1画面目はカレンダーで埋める（本体と同じ）。下へ送ると案内と規約フッター */
@media(max-width:720px){
  body.shared-view .sv-screen{height:100svh;height:100dvh;display:flex;flex-direction:column}
  body.shared-view header.site{flex:none;position:relative}
  body.shared-view main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;width:100%;padding:6px 4px 4px}
  body.shared-view #calendarApp{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  body.shared-view .monthbar{flex:none}
  body.shared-view .seg button{padding:.3rem .8rem;font-size:12px}
  body.shared-view #today{padding:.45rem .75rem;font-size:12px}
  .sv-titles{flex-direction:column;align-items:flex-start;gap:1px}
  .sv-title{font-size:15px;max-width:100%}
  .sv-ro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* 2行目のバッジで見せる（読み上げには残す） */
  .sv-sub{display:flex}
  .sv-badge{display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-size:10.5px;font-weight:700;line-height:1.7}
  .sv-group{font-size:11px;padding:0 9px;line-height:1.7;max-width:46vw}
  body.mode-busy .sv-mode{display:none}
  dialog #toast{bottom:calc(96px + env(safe-area-inset-bottom))}  /* 下から出るシートの中では、下端のボタンの上に出す */
  .calendar.day{border-radius:var(--radius)}
  .sv-note{padding:14px 16px 0}
  .sv-notice{margin-top:4vh}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(min-width:721px){
  .fab{display:none}
}
@media(min-width:900px){
  main{padding-top:34px}
  #welcome{
    grid-template-columns:1.22fr .88fr;
    grid-template-areas:"copy card" "preview card" "values values";
    gap:30px 42px;align-items:start;
  }
  .hero-copy{grid-area:copy;padding-top:14px}
  .preview{grid-area:preview}
  .hero-card{grid-area:card;padding:26px 24px}
  .values{grid-area:values;grid-template-columns:repeat(3,1fr);margin-top:4px}
  .pv-cell{min-height:70px}
  .pv-chip{font-size:10px}
  .day{min-height:84px}
}

/* ---------- 動きを減らす設定 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}