/* web/tokens.css */
/* 共通部品が使う色と形の決まり。アプリ側で値を上書きして、そのアプリの色にする。
   ui.css はここの名前だけを参照する。値は、アプリごとに変えてよい。 */
:root{
  --ink:#1d1d1f;      /* 文字・主ボタンの色(Apple の近黒) */
  --sub:#6e6e73;      /* 補助の文字 */
  --card:#ffffff;     /* 面の色(副ボタンの背景) */
  --line:#d2d2d7;     /* 線の色 */
  --warn:#d70015;     /* 削除の赤(HIG の赤・コントラスト強化) */
  --b:#34c759;        /* スイッチのオンの色(HIG の緑) */
  --glass:rgba(255,255,255,.30); /* ガラスの丸ボタンの背景 */
  --bar-main:#4A7CE0;     /* 横棒グラフ: 値(取得済み) */
  --bar-supplied:#5BB5E8; /* 横棒グラフ: 補った分 */
  --bar-planned:#4BA56A;  /* 横棒グラフ: 予定 */
  --bar-warn:var(--warn); /* 横棒グラフ: 警告のときの、値の色 */
  --r-ctl:1.375rem;   /* ボタンの角丸(高さの半分) */
  --btn:var(--ink);   /* 主ボタンの面(既定は文字と同じ色)。ダークでは、文字は明るく、面は暗いままだと沈むので、別に持つ */
  --on-btn:#fff;      /* 主ボタンの上の文字 */
  --on-warn:#fff;     /* 削除ボタン(--warn の面)の上の文字 */
}
/* ダーク: 同じ色に見えるよう、値を変える(明るく、少し淡く)。面と文字は逆になるので、面の上の文字(--on-*)も変える。アプリが自分の値を上書きしたら、そちらが優先 */
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]){--ink:#f5f5f7;--sub:#a1a1a6;--card:#1c1c1e;--line:#636366;--warn:#ff4245;--b:#30d158;--glass:rgba(255,255,255,.16);--bar-main:#6F9BFF;--bar-supplied:#6FC6F2;--bar-planned:#5FC081;--btn:#636366;--on-btn:#fff;--on-warn:#fff}}
[data-tone="dark"]{--ink:#f5f5f7;--sub:#a1a1a6;--card:#1c1c1e;--line:#636366;--warn:#ff4245;--b:#30d158;--glass:rgba(255,255,255,.16);--bar-main:#6F9BFF;--bar-supplied:#6FC6F2;--bar-planned:#5FC081;--btn:#636366;--on-btn:#fff;--on-warn:#fff}
[data-tone="light"]{--ink:#1d1d1f;--sub:#6e6e73;--card:#ffffff;--line:#d2d2d7;--warn:#d70015;--b:#34c759;--glass:rgba(255,255,255,.30);--bar-main:#4A7CE0;--bar-supplied:#5BB5E8;--bar-planned:#4BA56A;--btn:var(--ink);--on-btn:#fff;--on-warn:#fff}


/* web/ui.css */
/* 共通の部品の見た目(ui.js とセット)。ボタンやスイッチの見た目は、ここだけで決める。
   画面ごとのCSS(style.css)には、ボタンの色・形・大きさを書かない(位置や余白の調整だけにする)。
   種類を直せば、使っている全部の画面が変わる。 */
:root{--u-blue:#4A7CE0;--on-blue:#fff}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]){--u-blue:#5B8CF0;--on-blue:#fff}}
[data-tone="dark"]{--u-blue:#5B8CF0;--on-blue:#fff}
[data-tone="light"]{--u-blue:#4A7CE0;--on-blue:#fff}
button.u{font:inherit;font-weight:600;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:.625rem 2rem;border-radius:var(--r-ctl);background:var(--ink);color:#fff;white-space:nowrap;line-height:1.25;transition:opacity .15s,transform .15s}
button.u:active,button.u[data-press]{opacity:.6;transform:scale(.98)} /* data-press: 押した状態を、見本で出すため(カタログ) */
button.u .ic{width:1.15rem;height:1.15rem;margin:0}
@media (prefers-reduced-motion:reduce){button.u{transition:none}}
button.u.u-fill{width:100%}
button.u.u-grow{flex:1}

/* 状態つきボタン(保存など。UI.btn の opts.state: true)。押した瞬間に縮み、処理中は文字が消えて丸い回転、終わると、ボタンがチェックの大きさの完全な丸になり、✓が弾んで出て、しばらくして元の形に戻る。
   状態は data-state(idle / busy / done)。UI.run(ボタン, 処理) が切り替える。動きを減らす設定では、回転と弾みを止める(状態の見た目は変わる) */
button.u[data-state]{position:relative;overflow:hidden;transition:transform .1s,background-color .25s,opacity .15s,width .32s cubic-bezier(.2,.9,.3,1),padding .32s cubic-bezier(.2,.9,.3,1)}
button.u[data-state]:active{transform:scale(.95);opacity:1}
button.u[data-state] .u-l{display:inline-flex;align-items:center;gap:.5rem;transition:opacity .15s,transform .2s}
button.u[data-state=busy],button.u[data-state=done]{pointer-events:none}
button.u[data-state=busy] .u-l,button.u[data-state=done] .u-l{opacity:0;transform:scale(.85)}
button.u .u-spin,button.u .u-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
button.u[data-state=busy] .u-spin{opacity:1}
button.u .u-spin::before{content:"";width:1.15rem;height:1.15rem;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:u-spin .7s linear infinite}
button.u .u-ok .u-ck{width:1.25rem;height:1.25rem} /* チェックは SF Symbols の checkmark */
button.u[data-state=busy],button.u[data-state=done]{padding-left:0;padding-right:0} /* 処理中から、幅が高さと同じ(UI.run が決める)になり、完全な丸になる */
button.u[data-state=done]{background:var(--b)}
button.u[data-state=done] .u-ok{opacity:1;animation:u-pop .4s cubic-bezier(.16,1,.3,1)}
@keyframes u-spin{to{transform:rotate(360deg)}}
@keyframes u-pop{from{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){button.u[data-state],button.u[data-state] .u-l{transition:none}button.u .u-spin::before,button.u[data-state=done] .u-ok{animation:none}}

/* 中身に合わせて伸び縮みする(UI.morph): 文字やアイコンを変えると、背景のボタンが、新しい中身の大きさまで、なめらかに動く。動いている間だけ付ける */
button.u.u-morph{transition:transform .1s,opacity .15s,width .32s cubic-bezier(.2,.9,.3,1),padding .32s cubic-bezier(.2,.9,.3,1);overflow:hidden}
@media (prefers-reduced-motion:reduce){button.u.u-morph{transition:none}}

/* 主: 濃い塗りのピル */
button.u.u-primary{background:var(--btn);color:var(--on-btn)}
/* 副: 枠線のピル(キャンセルなど) */
button.u.u-secondary{background:var(--card);color:var(--ink);border:1.5px solid var(--line);padding:.625rem 1rem}
/* 削除・解除: 赤いピル */
button.u.u-danger{background:var(--warn);color:var(--on-warn)}
/* 明るい塗りのピル */
button.u.u-light{background:#fff;color:#1d1d1f;font-weight:700;min-height:48px;padding:.5rem 1.5rem;border-radius:999px}
/* 小さい枠線のピル */
button.u.u-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:.35rem 1rem;font-size:.9375rem}

/* ガラスの丸いアイコンボタン(設定、閉じる、履歴の開閉)。完了(confirm)は、同じ形の青 */
button.u.u-glass,button.u.u-confirm{width:44px;height:44px;padding:0;border-radius:50%;background:var(--glass);color:var(--ink);border:.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.04);backdrop-filter:blur(20px) saturate(190%) brightness(1.04);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(40,32,24,.10),inset 1px 1px 0 rgba(255,255,255,.75),inset -1px -1px 0 rgba(255,255,255,.35);font-size:1.4rem;line-height:1;font-weight:500}
button.u.u-glass:active,button.u.u-confirm:active{transform:none;opacity:.7}
button.u.u-glass .ic,button.u.u-confirm .ic{width:1.15rem;height:1.15rem}
button.u.u-glass.u-big .ic{width:1.3rem;height:1.3rem}
button.u.u-confirm{background:var(--u-blue);color:var(--on-blue);box-shadow:0 4px 14px rgba(74,124,224,.38),inset 1px 1px 0 rgba(255,255,255,.45)}

/* 背景なし(文字やアイコンだけ)。u-mute は、うすいグレーのアイコン */
button.u.u-plain{background:transparent;color:var(--ink);font-weight:500;font-size:1rem;padding:0 .6rem;border-radius:.75rem;gap:.4rem}
button.u.u-plain:active{transform:none;opacity:.7}
button.u.u-plain.u-mute{color:var(--sub)}
button.u.u-plain .ic{width:1.25rem;height:1.25rem}
button.u.u-plain.u-icon{padding:0}
button.u.u-plain.u-big .ic{width:1.5rem;height:1.5rem}
button.u.u-plain .ic.sm{width:1rem;height:1rem}

/* 小さい選択ピル(カテゴリの凡例) */
button.u.u-chip{background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:0 .85rem;min-height:2.75rem;font-size:.8125rem;font-weight:500;gap:.4rem}
button.u.u-chip[aria-pressed=true]{border-color:var(--ink);font-weight:700}

/* 色つきの選択ボタン(支払った人など)。--pc その人の色、--pb 選んだときの背景、--pt 選んだときの文字
   選んだほうは、ボタン全体がその人の色になる。選んでいないほうは、枠線だけの控えめな形(人の色は、アイコンだけに残る) */
button.u.u-choice{background:transparent;color:var(--sub);border:1.5px solid var(--line);padding:.625rem 1rem;font-weight:500}
button.u.u-choice .ic{vertical-align:-.3em;margin-right:.25rem;color:var(--pc)}
button.u.u-choice[aria-pressed=true]{background:var(--pb);color:var(--pt);border-color:var(--pb);font-weight:700;box-shadow:0 2px 8px color-mix(in srgb,var(--pb) 45%,transparent)}
button.u.u-choice[aria-pressed=true] .ic{color:currentColor}

/* スイッチ(オン・オフ) */
button.u.u-switch{width:3.5rem;min-width:3.5rem;height:44px;background:none;padding:0;position:relative;flex:none;border-radius:0}
button.u.u-switch:active{transform:none;opacity:1}
button.u.u-switch::before{content:"";position:absolute;left:0;top:50%;width:51px;height:31px;margin-top:-15.5px;border-radius:16px;background:#c7c7cc;transition:background .2s}
button.u.u-switch::after{content:"";position:absolute;left:2px;top:50%;width:27px;height:27px;margin-top:-13.5px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0004;transition:transform .2s}
button.u.u-switch[aria-checked=true]::before{background:var(--b)}
button.u.u-switch[aria-checked=true]::after{transform:translateX(20px)}
/* 横棒グラフ(積み上げ。仕様は docs/横棒グラフ.md)。高さ10px、受け皿もフィルも両端が完全な丸み。区間は、すき間なしの直線でつなぐ */
.u-bar{display:flex;height:10px;width:100%;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 40%,transparent)}
.u-bar-fill{display:flex;height:100%;overflow:hidden;border-radius:999px;transform-origin:left;animation:u-bar-grow 600ms var(--ease,cubic-bezier(.4,.1,.2,1));transition:width 450ms var(--ease,cubic-bezier(.4,.1,.2,1))}
.u-bar-seg{height:100%;transition:width 500ms cubic-bezier(.2,.9,.25,1)}
.u-bar-seg.main{background:var(--bar-main)}.u-bar-seg.warn{background:var(--bar-warn)}.u-bar-seg.supplied{background:var(--bar-supplied)}.u-bar-seg.planned{background:var(--bar-planned)}
@keyframes u-bar-grow{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.u-bar-fill,.u-bar-seg{animation:none;transition:none}}

/* アイコンだけのボタンに、名前を付ける(UI.btn(種類, 属性, アイコン, {label: '閉じる'}))。マウスを乗せる・キーボードで選ぶと、名前が出て、ボタンが、中身に合わせて伸びる(UI.morph)。
   動きがなめらかになる作り: ①アイコンは、左から固定の位置(幅が変わっても、動かない。真ん中揃えにすると、名前が出る瞬間に、アイコンが左へ飛ぶ)②名前は、いつも並べておき(display を切り替えない)、はみ出した分は、ボタンの外で隠れる(overflow:hidden)。透明度だけが変わる ③閉じるときも、動きが終わるまで、名前を消さない */
button.u.u-hover-label{--u-ic:1.15rem;gap:0;justify-content:flex-start;overflow:hidden;border-radius:999px; /* 丸(50%)のままだと、広がったとき、楕円になる */padding-left:calc((44px - var(--u-ic)) / 2);padding-right:calc((44px - var(--u-ic)) / 2)}
button.u.u-hover-label:not(.open){width:44px}
button.u .u-hl{margin-left:.5rem;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .2s}
button.u.u-hover-label.open{width:auto;padding-right:1.125rem;gap:0}
button.u.u-hover-label.open .u-hl{opacity:1;transition-delay:.08s}
/* 並びの中で、名前つきのボタンを使うとき(.u-slot で囲む): 閉じているときの場所(44×44)だけを確保し、広がった分は、隣に重なって広がる(隣が動かない) */
.u-slot{position:relative;display:inline-block;width:44px;height:44px;flex:none}
.u-slot>button.u-hover-label{position:absolute;left:0;top:0}
.u-slot>button.u-hover-label.open{z-index:2}

/* web/chart.css */
/* 積み上げ棒グラフと円グラフの見た目(chart.js とセット)。
   使う変数: --ink 文字と0の線、--sub 補助の文字、--line 線、--b 棒の既定の色。色は変数で変える。
   アニメーションの引き金: 祖先に .ch-anim(棒は下から伸び、円は描かれる)、.ch-anim-pie(円だけ)、.ch-flip(棒⇔円の入れ替えで、ふわっと出る)を付けて描き直す。 */
.chartbox{display:flex;margin-top:.7rem}
.yaxis{position:relative;width:2.6rem;flex:none}
.yaxis span{position:absolute;right:.35rem;transform:translateY(-50%);font-size:.6875rem;color:var(--sub,#666);white-space:nowrap}
.yaxis .bud{font-weight:700;color:var(--ink,#000)}
.chartscroll{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.2rem}
.chartscroll::-webkit-scrollbar{display:none}
.plot{position:relative;min-width:100%}
.plot .gl{position:absolute;left:0;right:0;border-top:1px solid var(--line,#ddd)}.plot .gl.zero{border-top:2px solid var(--ink,#000)}
.plot .bline{position:absolute;left:0;right:0;border-top:2px dashed var(--ink,#000);pointer-events:none}
/* 棒: カテゴリが、下から積み上がる。選んだカテゴリ以外は、うすくなる */
.plot .bar{position:absolute;bottom:0;z-index:3;display:flex;flex-direction:column-reverse;overflow:hidden;background:none;border-radius:6px 6px 0 0;min-height:2px;margin:0}
.plot .bseg{display:block;flex:none;box-shadow:inset 0 1px 0 rgba(255,253,247,.85);transition:opacity .25s;cursor:pointer}
.plot.has-sel .bseg:not(.sel){opacity:.28}
/* 列を押す場所(棒の上の、すき間も含む)と、下の名前の行 */
button.mcol{position:absolute;top:0;height:calc(100% + 3.2rem);z-index:2;background:none;border:0;border-radius:.75rem;padding:0;min-width:0;min-height:0;color:inherit;cursor:pointer;font:inherit}
.lblrow{display:flex;margin-top:.25rem}
.lc{flex:none;text-align:center;font-size:.6875rem;color:var(--sub,#666);line-height:1.3;pointer-events:none;min-height:2.8rem;cursor:pointer}
.lc.sel{color:var(--ink,#000);font-weight:700}
/* 凡例(カテゴリの選択ピル。形は ui.css の chip) */
.legend{display:flex;flex-wrap:wrap;gap:.25rem .4rem;margin-top:.9rem}
button.lgd i{width:.65rem;height:.65rem;border-radius:50%;background:var(--c);flex:none}

/* 円グラフ(横長の描画領域。項目の名前は、扇から線で伸ばして外に書く)。選んだ扇は、少し外へ伸びる */
.pie{position:relative;width:100%;max-width:26rem;aspect-ratio:110/56;margin:.5rem auto}
.pie svg{width:100%;height:100%;display:block;overflow:visible}
.pie .pt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;pointer-events:none;font-weight:700;font-size:.8125rem;text-align:center}
.pie .pt .pn,.pie .pt .pp{font-size:.6875rem;font-weight:600;color:var(--sub,#6e6e73);max-width:3.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc{cursor:pointer;transition:stroke-width .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s}
.arc.sel{transform:translate(var(--dx),var(--dy))} /* 選んだ扇は、外へ少し出る(扇の形は、すきまが平行のまま) */
.pie.has-sel .arc:not(.sel){opacity:.35}
.plab{cursor:pointer;transition:opacity .25s}.plab text{font-size:3.7px;fill:var(--ink,#000);font-weight:500}.plab.sel text{font-weight:700}
.pie.has-sel .plab:not(.sel){opacity:.4}

/* アニメーション */
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sweep{from{stroke-dasharray:0 100}to{stroke-dasharray:100 100}}
@keyframes lab-in{from{opacity:0}to{opacity:1}}
@keyframes ch-flip{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.ch-anim .plot .bar{transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms)} /* 下から、1本ずつ(35msずつずらして)伸びる */
.ch-flip .chartbox,.ch-flip .pie{animation:ch-flip .28s cubic-bezier(.2,.8,.2,1)} /* 棒⇔円の入れ替え */
.ch-anim .sweep,.ch-anim-pie .sweep{animation:sweep .9s cubic-bezier(.4,0,.2,1)} /* 円は、時計回りに描かれる */
.ch-anim .plab,.ch-anim-pie .plab{animation:lab-in .35s ease-out .6s backwards} /* 名前の札は、あとから出る */
@media (prefers-reduced-motion:reduce){.arc,.plot .bseg,.plab{transition:none}.ch-anim .plot .bar,.ch-flip .chartbox,.ch-flip .pie,.ch-anim .sweep,.ch-anim .plab,.ch-anim-pie .sweep,.ch-anim-pie .plab{animation:none}}

/* web/swipe.css */
/* スワイプの行(swipe.js とセット)。色は変数で変える:
   --swp-edit 編集(青)、--swp-del 削除(赤)、--swp-bg 行の背景、--swp-line 区切り線、--swp-bleed 行を左右に広げる幅(親の余白と同じにする) */
:root{--swp-edit:#4A7CE0;--swp-del:#E5484D;--swp-bg:var(--card,#fff);--swp-line:var(--line,#ddd);--swp-bleed:1rem}
.swp{position:relative;overflow:hidden;margin:0 calc(var(--swp-bleed) * -1)}
.swp>.swp-in{position:relative;padding-left:var(--swp-bleed);padding-right:var(--swp-bleed);border:0;background:var(--swp-bg);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate}
.swp-act{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;padding:0 .75rem 0 .5rem;box-sizing:border-box}
.swp-b{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:transparent;border:0;border-radius:0;padding:0;min-width:3.25rem;min-height:0;color:var(--sub,#666);font:inherit;font-size:inherit;font-weight:500;cursor:pointer;opacity:var(--p,0);transform:scale(calc(.55 + .45 * var(--p,0)))}
.swp-act.anim .swp-b{transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1)}
.swp-c{width:3.25rem;height:3.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff}
.swp-b.edit .swp-c{background:var(--swp-edit)}.swp-b.del .swp-c{background:var(--swp-del)}
.swp-c .ic,.swp-c svg{width:1.4rem;height:1.4rem;color:#fff}
.swp-b small{font-size:.6875rem}
/* 大きくスワイプしたとき、削除が横長の丸(ピル)に広がり、編集は、150px かけて、徐々に薄れる */
.swp-b.full .swp-c{width:calc(3.25rem + var(--e,0) * 1px);border-radius:999px}
.swp-b.edit{opacity:calc(var(--p,0) * (1 - min(var(--e,0) / 150, 1)))}
/* 行の区切り線: 行といっしょに動かさず、固定する */
.swp::after{content:'';position:absolute;left:var(--swp-bleed);right:var(--swp-bleed);bottom:0;height:1px;background:var(--swp-line);pointer-events:none;z-index:2}
.swp:last-child::after{display:none}
/* スワイプ中、行が丸いカードのようにハイライトされる。中身との間は、上下左右でそろえる */
.swp>.swp-in::before{content:'';position:absolute;z-index:-1;left:-2rem;right:.25rem;top:.2rem;bottom:.2rem;border-radius:1rem;background:color-mix(in srgb,var(--ink,#000) 9%,var(--swp-bg));opacity:0;transition:opacity .18s ease}
.swp>.swp-in.on::before{opacity:1}
@media (prefers-reduced-motion:reduce){.swp-act.anim .swp-b,.swp>.swp-in::before{transition:none}}

/* web/motion.css */
/* 動きの決まり(iOSらしい、押してすぐ反応する動き)。tokens.css とあわせて使う。
   元: 大学生活サポート(unilife)の app/globals.css。ボタンの反応が「ワンテンポ遅い」と感じる原因は、押し込みがゆっくり始まる動き方だった。
   決まり: 出る動き・押した動きは「始まりが速く、あとで減速する」曲線(--ease-out)。押した瞬間は60ms、離したあとは、ゆっくり戻る。 */
:root {
  --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms; --dur-2: 450ms; --dur-3: 1200ms;
}
/* 押せるもの。高さ44pt以上(HIG)。押すと少し縮み、ポインターを乗せると少し明るくなる */
.pressable { min-height: 44px; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.pressable:active:not(:disabled), .pressable[data-press] { opacity: 0.85; transform: scale(0.97); transition-duration: 60ms; transition-timing-function: ease-out; }
@media (hover: hover) { .pressable:hover:not(:disabled) { filter: brightness(1.08); } }
/* 下から出るシート: 出るときはゆっくり、閉じるときは速く */
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }
.sheet-panel { animation: sheet-in var(--dur-2) var(--ease-out); }
.sheet-panel.leaving { animation: sheet-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; }
/* 動きを減らす設定がオンのときは、動きを止める(必須) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* web/gesture.css */
/* 操作の見せ方(gesture.js とセット)。PC は「マウスポインタ」、スマホは「タッチの丸」(Apple の使い方の動画のように、グレーの半透明の丸が押す・動く)。
   丸の動き: タップ=触れた瞬間に少し縮み、離すと消える / 長押し=丸のまわりのリングが一周する / スワイプ・ドラッグ=丸が指の動きどおりに動く。
   使う変数: --ink(.gx-target の文字)、--line(.gx-target の枠)。色は変数で変える。 */
.gx-host{position:relative;isolation:isolate} /* 丸やポインタの重なり順を、この面の中に閉じ込める(上の帯などにはみ出さない) */
.gx{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform,opacity}
.gx.on{opacity:1}
.gx-body{position:relative;transition:transform .12s ease-out,background-color .12s ease-out}

/* マウスポインタ(先端が位置の基準) */
.gx-pc .gx-body{margin:-2px 0 0 -2px;width:22px;height:26px;transform-origin:2px 2px}
.gx-pc svg.gx-cur{display:block;width:22px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.gx-pc.down .gx-body{transform:scale(.9)}
.gx-pulse{position:absolute;left:-6px;top:-6px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(60,60,67,.55);opacity:0;pointer-events:none}
.gx-pc.click .gx-pulse{animation:gx-pulse .45s ease-out}
@keyframes gx-pulse{from{transform:scale(.4);opacity:.8}to{transform:scale(2.2);opacity:0}}

/* タッチの丸(中心が位置の基準) */
.gx-touch .gx-body{margin:-22px 0 0 -22px;width:44px;height:44px;border-radius:50%;background:rgba(112,112,122,.42);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.gx-touch.down .gx-body{transform:scale(.8);background:rgba(88,88,98,.62)}
/* 長押しのリング */
.gx-ring{position:absolute;left:-10px;top:-10px;width:60px;height:60px;transform:rotate(-90deg);opacity:0;pointer-events:none}
.gx-ring circle{fill:none;stroke:rgba(255,255,255,.95);stroke-width:3;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176}
.gx.hold .gx-ring{opacity:1}
.gx.hold .gx-ring circle{animation:gx-ring var(--gx-hold,.9s) linear forwards}
@keyframes gx-ring{to{stroke-dashoffset:0}}
/* 丸だけを静止で見せるとき(アセットとして並べる) */
.gx-static{position:static;opacity:1;display:inline-block;width:44px;height:44px}
.gx-static.gx-pc{width:22px;height:26px}
.gx-static .gx-body{display:block;position:relative;margin:0;width:100%;height:100%} /* 静止の見本(カタログ): 丸の大きさが、中身に縮まないように、囲み(44×44)いっぱいにする */
.gx-static.gx-pc .gx-body{width:22px;height:26px}
.gx-static.gx-touch{margin:0 .5rem}
.gx-static .gx-ring{opacity:0}
.gx-static.hold .gx-ring{opacity:1}
.gx-static.hold .gx-ring circle{animation:none;stroke-dashoffset:44}

/* 操作の見本の相手(押す・動かす対象)。gesture の見本で使う */
.gx-target{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:44px;padding:.6rem 1.5rem;border-radius:1.25rem;background:#fff;color:var(--ink,#1d1d1f);border:1.5px solid var(--line,#d2d2d7);font-weight:600;transition:transform .18s ease-out,opacity .18s ease-out,background-color .18s ease-out;user-select:none}
.gx-target[data-press]{transform:scale(.96);opacity:.78}
.gx-target[data-held]{background:color-mix(in srgb,var(--ink,#1d1d1f) 10%,#fff);transform:scale(1.04);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.gx-target.gx-pop{animation:gx-pop .38s cubic-bezier(.16,1,.3,1)}
@keyframes gx-pop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gx,.gx-body,.gx-target{transition:none}.gx-pc.click .gx-pulse,.gx-target.gx-pop,.gx.hold .gx-ring circle{animation:none}.gx.hold .gx-ring circle{stroke-dashoffset:0}}

/* web/glass.css */
/* Liquid Glass(iOS 26 のタブバーと同じ作り)。すりガラスの選択ボタン(つまみをドラッグできる)と、同じ素材の独立した丸い追加ボタン。
   背景が透けて見えるので、写真・色のある面の上に置く。色は --gl-* で変える(ダークは自動) */
.gl-dock{--gl-glass:rgba(255,255,255,.30);--gl-edge:rgba(255,255,255,.55);--gl-hi:rgba(255,255,255,.75);--gl-lo:rgba(255,255,255,.35);--gl-shadow:rgba(40,32,24,.14);
  --gl-text:rgba(60,60,67,.62);--gl-lens:rgba(60,60,67,.12);--gl-lens-drag:rgba(255,255,255,.55);--gl-tint:#3B6FD4;
  display:flex;align-items:center;gap:.65rem;width:100%;max-width:430px;margin:0 auto}
@media (prefers-color-scheme:dark){.gl-dock{--gl-glass:rgba(60,60,67,.38);--gl-edge:rgba(255,255,255,.22);--gl-hi:rgba(255,255,255,.28);--gl-lo:rgba(255,255,255,.08);--gl-shadow:rgba(0,0,0,.4);
  --gl-text:rgba(235,235,245,.62);--gl-lens:rgba(255,255,255,.14);--gl-lens-drag:rgba(255,255,255,.26);--gl-tint:#7DA6FF}}
/* 画面の下に固定するとき(アプリ側): <div class="gl-fixed"> でくるむ */
.gl-fixed{position:fixed;left:0;right:0;bottom:0;padding:0 max(1rem,env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));z-index:5;pointer-events:none}
.gl-fixed>.gl-dock{pointer-events:none}.gl-fixed .gl-seg,.gl-fixed .gl-add{pointer-events:auto}

.gl-seg,.gl-add{background:var(--gl-glass);-webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.04);backdrop-filter:blur(20px) saturate(190%) brightness(1.04);
  border:.5px solid var(--gl-edge);box-shadow:0 8px 28px var(--gl-shadow),0 1px 3px var(--gl-shadow),inset 1px 1px 0 var(--gl-hi),inset -1px -1px 0 var(--gl-lo)}
.gl-seg{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));height:64px;padding:4px;border-radius:var(--radius-pill,999px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.gl-seg.dragging{cursor:grabbing}
/* つまみ(レンズ)。幅は、項目1つ分。位置は、項目の番号 × 自分の幅 */
.gl-lens{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));border-radius:inherit;pointer-events:none;
  background:var(--gl-lens);border:.5px solid var(--gl-edge);box-shadow:inset 1px 1px 0 var(--gl-hi),inset -1px -1px 0 var(--gl-lo);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .45s cubic-bezier(.3,1.3,.4,1)}
.gl-seg.dragging .gl-lens{transition:none;background:var(--gl-lens-drag);box-shadow:0 6px 18px var(--gl-shadow),inset 1px 1px 0 var(--gl-hi)}
.gl-seg>button{position:relative;z-index:1;min-width:0;min-height:54px;margin:0;padding:.3rem 0;border:0;border-radius:inherit;background:none;color:var(--gl-text);font:500 .75rem/1.2 var(--font-text,inherit);cursor:inherit;touch-action:none;transition:color .25s}
.gl-seg>button .ic{display:block;margin:0 auto .1rem;width:1.4rem;height:1.4rem}
.gl-seg>button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-seg>button[aria-selected=true],.gl-seg>button[data-hover]{color:var(--gl-tint);font-weight:600}
.gl-seg.dragging>button[aria-selected=true]:not([data-hover]){color:var(--gl-text);font-weight:500}
.gl-add{flex:none;width:64px;height:64px;margin:0;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gl-tint);cursor:pointer}
.gl-add .ic{width:1.6rem;height:1.6rem}
.gl-seg>button:focus-visible,.gl-add:focus-visible{outline:2px solid var(--gl-tint);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.gl-lens,.gl-seg>button{transition:none}}

/* web/strike.css */
/* 完了の取り消し線(Strike)。完了にすると、ペンで斜線を引くように、行ごとに、左から右へ線が引かれる(web/strike.js)。
   文字は、補助の色(--sub)に変わる。線は水平(斜めにしない)。行ごとに JS が置く(文字の行の長さに合わせるため)。線の色は --strike-color(既定は文字の色 --ink) */
.strike-text{position:relative;display:inline-block;max-width:100%;transition:color .3s}
.strike-text.is-done{color:var(--sub,#6e6e73)}
.strike-line{position:absolute;height:3px;border-radius:3px;background:var(--strike-color,var(--ink,#1d1d1f));pointer-events:none}

/* web/apple.css */
/* Apple デザインシステム(web/apple.css)。Claude Design の「Appleデザインシステム」(Apple.com風の言語 + iOS/HIG部品)を、ブラウザ用のクラスにしたもの。
   言語: 白・#f5f5f7・近黒のタイルを全幅で交互に。アクセントは Action Blue(#0066cc)だけ。影は製品画像だけ、グラデーションなし。ぼかしは、固定のナビだけ(saturate(180%) blur(20px))。
   形: 角丸は 0(タイル)/5/8(小)/11(パール)/18(カード)/ピル(ボタン・検索・チップ)。余白は8px基準。押すと scale(.95)(ホバーの定義なし)。フォーカスは2px #0071e3。
   文字: SF Pro(Display ≥20px・600・字間を詰める / Text 17px・行間1.47)。ウェイトは 300/400/600/700(500は使わない)。フォントのファイルは入れず、システムのフォントに任せる(SF Pro は配布できない)。
   iOS: システムカラー(#007aff、緑のトグル)、Dynamic Type の文字スタイル、44pt、インセットのリスト、ガラス風のバー。
   元の仕様からの違い(HIG・コントラストのため): ①補助の文字は #6e6e73(元の #7a7a7a は4.5対1に足りない)②操作部品は高さ44pt以上(元の小さいボタンやセグメントも)③ダークは、元の仕様にない(アクセントの on-dark だけ)ので、Apple.com の暗い配色に合わせて足した(システムの設定に従う)
   ④10pxの文字(micro)は使わない(最小11pt)。motion.css の .pressable とは別(このファイルの .btn などは、自分で押し込みを持つ)。 */
:root,[data-tone="light"]{
  color-scheme:light dark;
  --color-primary:#0066cc;--color-primary-focus:#0071e3;--color-link:#0066cc;--color-primary-on-dark:#2997ff;
  --color-canvas:#fff;--color-parchment:#f5f5f7;--color-pearl:#fafafc;
  --color-tile-1:#272729;--color-tile-2:#2a2a2c;--color-tile-3:#252527;--color-black:#000;
  --color-chip:rgba(210,210,215,.64);--color-ink:#1d1d1f;--color-ink-80:#333;--color-ink-48:#7a7a7a;--color-ink-muted:#6e6e73;
  --color-divider-soft:#f0f0f0;--color-hairline:#e0e0e0;--color-search-line:rgba(0,0,0,.08);
  --shadow-product:rgba(0,0,0,.22) 3px 5px 30px 0;
  /* 余白(8px基準)・角丸・ぼかし */
  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:17px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:80px;
  --radius-none:0;--radius-xs:5px;--radius-sm:8px;--radius-md:11px;--radius-lg:18px;--radius-pill:9999px;
  --blur-frosted:saturate(180%) blur(20px);
  /* iOS(HIG) */
  --sys-bg:#fff;--sys-bg-grouped:#f2f2f7;--sys-label-2:rgba(60,60,67,.72);--sys-label-3:rgba(60,60,67,.3);--sys-separator:rgba(60,60,67,.29);--sys-fill:rgba(120,120,128,.12);
  /* 角丸の決まり(1つのサービスで揃える)。元の式: 操作ボタンの高さは44pt = 半径22。ボタンが面の角に、同心円で収まる(丸いボタンの外に、均等な余白)ように、面の角丸を決める。
     ①操作部品(ボタン・チップ・検索欄・セグメント・トグル・入力欄)は、ピルだけ(半径 = 高さの半分 --r-control)
     ②面(カード・シート・ダイアログ)の外側は、1つの値 --r-surface = --r-control + --space-nest(22 + 8 = 30)。シートも、カードも、同じ
     ③面の中の面は、同心円: 内側 = 外側 − 余白。入れ子の余白は --space-nest(8)にそろえるので、内側は --r-nested(30 − 8 = 22 = ボタンの半径)
     ④カードの中の見本の面は、カードの余白 --space-card(22)で、内側 --r-card-inner(30 − 22 = 8)
     ⑤画面のCSSに、角丸の数字を直接書かない。新しいサービスは、最初にこのトークンを決める */
  --r-control:22px;--space-nest:8px;--r-surface:calc(var(--r-control) + var(--space-nest));--r-nested:calc(var(--r-surface) - var(--space-nest));
  --space-card:22px;--r-card-inner:calc(var(--r-surface) - var(--space-card));
  /* ウィンドウ(シート・ダイアログ)の角丸は、余白の大きさで決めるパターン: 角丸 = --r-control(22) + 窓の余白。ボタンは、どの大きさでも、角に同心円で収まる。
     S=余白8→30(既定。--r-surface と同じ) / M=余白14→36 / L=余白22→44。1つのサービスでは、基本は1つの大きさに揃える。中の面は、どれも --r-nested(22) */
  --space-win-s:8px;--space-win-m:14px;--space-win-l:22px;
  --r-win-s:calc(var(--r-control) + var(--space-win-s));--r-win-m:calc(var(--r-control) + var(--space-win-m));--r-win-l:calc(var(--r-control) + var(--space-win-l));
  --glass-bg:rgba(249,249,249,.78);--radius-inset-group:10px;--sheet-radius:var(--r-surface);--hit-target:44px;
  --font-display:"SF Pro Display","SF Pro JP",-apple-system,BlinkMacSystemFont,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
  --font-text:"SF Pro Text","SF Pro JP",-apple-system,BlinkMacSystemFont,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tone="light"]){
    --color-link:#2997ff;--color-primary:#0071e3;--color-primary-focus:#2997ff;
    --color-canvas:#000;--color-parchment:#1d1d1f;--color-pearl:#161617;
    --color-chip:rgba(66,66,69,.64);--color-ink:#f5f5f7;--color-ink-80:#d2d2d7;--color-ink-muted:#a1a1a6;
    --color-divider-soft:#2c2c2e;--color-hairline:#424245;--color-search-line:rgba(255,255,255,.16);
    --sys-bg:#000;--sys-bg-grouped:#000;--sys-label-2:rgba(235,235,245,.6);--sys-label-3:rgba(235,235,245,.3);--sys-separator:rgba(84,84,88,.6);--sys-fill:rgba(120,120,128,.36);
    --glass-bg:rgba(30,30,30,.72);
  }
}
[data-tone="dark"]{color-scheme:dark;
  --color-link:#2997ff;--color-primary:#0071e3;--color-primary-focus:#2997ff;--color-canvas:#000;--color-parchment:#1d1d1f;--color-pearl:#161617;--color-chip:rgba(66,66,69,.64);--color-ink:#f5f5f7;--color-ink-80:#d2d2d7;--color-ink-muted:#a1a1a6;--color-divider-soft:#2c2c2e;--color-hairline:#424245;--color-search-line:rgba(255,255,255,.16);--sys-bg:#000;--sys-bg-grouped:#000;--sys-label-2:rgba(235,235,245,.6);--sys-label-3:rgba(235,235,245,.3);--sys-separator:rgba(84,84,88,.6);--sys-fill:rgba(120,120,128,.36);--glass-bg:rgba(30,30,30,.72)}
[data-tone="light"]{color-scheme:light}
@media (prefers-contrast:more){:root{--color-hairline:#6e6e73;--color-ink-muted:#424245;--color-search-line:rgba(0,0,0,.4)}}

/* 17pt 基準。ブラウザの文字サイズの設定を尊重するため、割合で指定する */
html{font-size:106.25%;-webkit-text-size-adjust:100%}
.apple{margin:0;background:var(--color-canvas);color:var(--color-ink);font:400 1rem/1.47 var(--font-text);letter-spacing:-.022em}
.apple :focus-visible{outline:2px solid var(--color-primary-focus);outline-offset:2px}

/* 文字(Apple.com 風)。見出しは Display・600・字間を詰める */
.t-hero{font:600 3.294rem/1.07 var(--font-display);letter-spacing:-.005em}
.t-display-lg{font:600 2.353rem/1.1 var(--font-display)}
.t-display-md{font:600 2rem/1.25 var(--font-text);letter-spacing:-.022em}
.t-lead{font:400 1.647rem/1.14 var(--font-display);letter-spacing:.007em}
.t-lead-airy{font:300 1.412rem/1.5 var(--font-display)}
.t-tagline{font:600 1.235rem/1.19 var(--font-display);letter-spacing:.011em}
.t-body-strong{font:600 1rem/1.24 var(--font-text);letter-spacing:-.022em}
.t-body{font:400 1rem/1.47 var(--font-text);letter-spacing:-.022em}
.t-caption{font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em}
.t-caption-strong{font:600 .8235rem/1.29 var(--font-text);letter-spacing:-.016em}
.t-fine{font:400 .706rem/1.2 var(--font-text);letter-spacing:-.01em}
/* iOS の標準の文字スタイル(Dynamic Type) */
.dt-large-title{font:700 2rem/1.2 var(--font-display);letter-spacing:.011em}
.dt-title2{font:400 1.294rem/1.27 var(--font-display)}
.dt-headline{font:600 1rem/1.3 var(--font-text);letter-spacing:-.024em}
.dt-body{font:400 1rem/1.3 var(--font-text);letter-spacing:-.024em}
.dt-subhead{font:400 .882rem/1.33 var(--font-text);letter-spacing:-.016em}
.dt-footnote{font:400 .765rem/1.38 var(--font-text);letter-spacing:-.006em}
.muted{color:var(--color-ink-muted)}

/* ボタン(ピル形。押すと scale(.95)。高さ44pt以上) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;margin:0;border:1px solid transparent;font:400 1rem/1 var(--font-text);letter-spacing:-.022em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .1s}
.btn:active:not(:disabled){transform:scale(.95)}
.btn:disabled{opacity:.4;cursor:default}
.btn .ic{width:1.05em;height:1.05em;flex:none}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);border-radius:var(--radius-pill);padding:11px 22px}
.btn-secondary{background:transparent;color:var(--color-link);border-color:var(--color-link);border-radius:var(--radius-pill);padding:11px 22px}
.btn-dark{background:var(--color-ink);color:var(--color-canvas);border-color:var(--color-ink);border-radius:var(--radius-sm);padding:8px 15px;font-size:.8235rem;line-height:1.29;letter-spacing:-.016em}
.btn-pearl{background:var(--color-pearl);color:var(--color-ink-80);border:3px solid var(--color-divider-soft);border-radius:var(--radius-md);padding:8px 14px;font-size:.8235rem;line-height:1.43;letter-spacing:-.016em}
.btn-hero{background:var(--color-primary);color:#fff;border-color:var(--color-primary);border-radius:var(--radius-pill);padding:14px 28px;font-weight:300;font-size:1.06rem}
/* リンク(青い文字。矢印つき) */
.link{display:inline-flex;align-items:center;gap:.25em;min-height:44px;padding:0 .5rem;border:0;background:none;color:var(--color-link);font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em;cursor:pointer;text-decoration:none;border-radius:var(--radius-sm);transition:transform .1s}
.link:active{transform:scale(.95)}
.link .ic{width:1rem;height:1rem;flex:none}
.link[data-done]{color:var(--color-ink)}

/* チップ(絞り込み)。選んだものは、青い2pxの枠と、太い文字(色だけに頼らない) */
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:12px 16px;background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em;white-space:nowrap;cursor:pointer;transition:transform .1s}
.chip:active:not(:disabled){transform:scale(.95)}
.chip[aria-pressed="true"]{padding:11px 15px;border:2px solid var(--color-primary-focus);font-weight:600}
.chip:disabled{opacity:.4;cursor:default}
.chip small{font-size:.706rem;color:var(--color-ink-muted);font-variant-numeric:tabular-nums}
.chip .ic{width:1rem;height:1rem;flex:none}
.tag{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:var(--radius-pill);background:var(--color-chip);color:var(--color-ink-80);font:400 .706rem/1.4 var(--font-text);letter-spacing:-.01em;white-space:nowrap}
.tag-accent{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:color-mix(in srgb,var(--color-link) 70%,var(--color-ink));font-weight:600}

/* 検索欄(ピル形・44pt)。虫眼鏡、入力、入力した文字をクリアする×(グレーの小さな丸に、白い×。丸は虫眼鏡より小さく、押せる範囲は44pt)。枠は、フォーカスしても青くしない(カーソルで分かる) */
.ac-wrap{position:relative;width:100%}
/* オートコンプリートの候補: 入力欄の直下。面の中の面なので、角丸は --r-nested、余白 6px の内側の項目は、同心(22 − 6 = 16) */
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--r-nested);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ac[hidden]{display:none}
.ac-item{display:flex;align-items:center;min-height:var(--hit-target);padding:0 14px;border-radius:calc(var(--r-nested) - 6px);font:400 .941rem/1.3 var(--font-text);color:var(--color-ink);cursor:pointer}
.ac-item b{font-weight:700}
.ac-item[aria-selected="true"],.ac-item:hover{background:var(--color-chip)}
.search{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:100%;min-height:46px;box-sizing:border-box;padding:0 20px;background:var(--color-canvas);border:1px solid var(--color-search-line);border-radius:var(--radius-pill);color:var(--color-ink-muted)}
.search>.ic{width:.9rem;height:.9rem;flex:none}
.search input{flex:1;min-width:0;width:100%;min-height:44px;border:0;outline:0;background:transparent;color:var(--color-ink);font:400 1rem var(--font-text);letter-spacing:-.022em;-webkit-appearance:none;appearance:none;padding:0 1.6rem 0 0}
.search input:focus,.search input:focus-visible{outline:none;box-shadow:none}
.search input::placeholder{color:var(--color-ink-muted);opacity:1}
.search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .clear{position:absolute;right:0;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.search .clear[hidden]{display:none}
.search .clear .x{display:grid;place-items:center;width:.85rem;height:.85rem;border-radius:50%;background:var(--sys-gray);color:var(--color-canvas)}
.search .clear .x svg{width:.45rem;height:.45rem}

/* 丸いアイコンボタン(閉じる・完了) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--sys-fill);color:var(--color-ink);cursor:pointer;padding:0;transition:transform .1s}
.icon-btn:active{transform:scale(.95)}
.icon-btn.primary{background:var(--color-primary);color:#fff}
.icon-btn .ic{width:1.1rem;height:1.1rem}

/* iOS のトグル(緑)。つまみがすべる */
.toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0;border:0;background:none;color:var(--color-ink);font:400 .8235rem/1.2 var(--font-text);letter-spacing:-.016em;cursor:pointer}
.toggle .track{position:relative;flex:none;width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);transition:background-color .25s}
.toggle .thumb{position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s}
.toggle[aria-checked="true"] .track{background:var(--sys-green)}
.toggle[aria-checked="true"] .thumb{transform:translateX(20px)}
.toggle:disabled{opacity:.4;cursor:default}

/* セグメント(ピル型・ドラッグできる)。項目は同じ幅。つまみは指に1:1で追従し、端は12pxのゴム、離すとバネで吸着する(apple.js の Apple.seg と組み合わせる)。React版 Segmented と同じ仕様 */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:4px;border-radius:var(--radius-pill);background:var(--sys-fill);user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.seg.dragging{cursor:grabbing}
.seg>button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;min-width:0;padding:0 1.1rem;border:0;border-radius:var(--radius-pill);background:none;color:var(--color-ink-muted);font:400 .882rem/1.2 var(--font-text);letter-spacing:-.016em;white-space:nowrap;cursor:inherit;transition:color .2s}
.seg>button[data-on]{color:var(--color-ink);font-weight:600}
.seg>button .ic{width:1rem;height:1rem;flex:none}
.seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:0;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:0 3px 8px rgba(0,0,0,.12);will-change:transform}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .seg-thumb{background:#636366}}
:root[data-tone="dark"] .seg-thumb{background:#636366}
/* iOS の、角丸の四角いセグメント(Apple.seg の {ios: true}): 余白2px、角丸9 / つまみ7。動きは同じ */
.seg-sm{padding:3px} /* 小さい版(カードの切り替えなど)。見た目の高さは小さく、タップできる範囲(::after)は44pt */
.seg-sm>button{min-height:30px;padding:0 .9rem;font-size:.8125rem}
.seg-sm>button::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
.seg-sm .seg-thumb{top:3px;bottom:3px;left:3px}
.seg-ios{padding:2px;border-radius:9px}
.seg-ios>button{border-radius:7px}
.seg-ios .seg-thumb{top:2px;bottom:2px;left:2px;border-radius:7px}
.seg.on:not(.dragging) .seg-thumb{transition:transform .38s cubic-bezier(.2,.9,.3,1)}

/* カード(ストア風): 白、1pxの細い線、角丸18、余白24。影なし。画像の面は角丸8 */
.store-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--r-surface);padding:var(--space-card)}
/* タイル(全幅。上下に交互): 明るい白 / パーチメント / 近黒。角丸なし */
.tile-light{background:var(--color-canvas);color:var(--color-ink)}
.tile-parchment{background:var(--color-parchment);color:var(--color-ink)}
.tile-dark{background:var(--color-tile-1);color:#fff;--color-link:#2997ff;--color-ink-muted:#a1a1a6;--color-ink-80:#d2d2d7;--color-hairline:#424245;--color-canvas:#1d1d1f;--color-ink:#f5f5f7;--color-parchment:#2a2a2c}

/* グローバルナビ(黒の44pt帯)と、固定のサブナビ(ぼかし。ぼかしは、固定のナビだけ) */
.global-nav{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;background:#000;color:#fff;font:400 .706rem/1 var(--font-text);letter-spacing:-.01em;overflow-x:auto;scrollbar-width:none}
.global-nav::-webkit-scrollbar{display:none}
.global-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;color:inherit;text-decoration:none;opacity:.85;white-space:nowrap}
.global-nav a{flex:none}
.global-nav a:first-child{margin-left:auto}
.global-nav a:last-child{margin-right:auto}
.global-nav a:hover{opacity:1}
.sub-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--color-parchment) 82%,transparent);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);border-bottom:1px solid var(--color-hairline)}
@media (prefers-reduced-transparency:reduce){.sub-nav{background:var(--color-parchment);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* iOS のリスト(インセットのグループ): 角丸10、行は44pt以上、区切りは0.5px */
.list-group{background:var(--sys-bg);border-radius:var(--radius-inset-group);overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .list-group{background:#1c1c1e}}
:root[data-tone="dark"] .list-group{background:#1c1c1e}
.list-row{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;font:400 1rem/1.3 var(--font-text);letter-spacing:-.024em;color:var(--color-ink)}
.list-row+.list-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sys-separator)}
.list-row .glyph{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:7px;background:var(--sys-blue);color:#fff}
.list-row .glyph .ic{width:1.05rem;height:1.05rem}
.list-row .ttl{flex:1}
.list-row .detail{color:var(--sys-label-2)}
.list-row .chev{width:.8rem;height:.8rem;color:var(--sys-label-3)}

/* シート(下から。広い画面では中央): 背景はガラス風。グラバー、閉じる(左)、タイトル、完了(右) */
.sheet-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.32);animation:ap-fade .3s}
.sheet-scrim.leaving{animation:ap-dim .2s ease-in forwards}
.sheet{--space-win:var(--space-win-s);--r-win:var(--r-win-s);position:relative;width:min(100%,38rem);max-height:min(86vh,46rem);display:flex;flex-direction:column;border-radius:var(--r-win) var(--r-win) 0 0;padding:var(--space-win) var(--space-win) calc(var(--space-win) + env(safe-area-inset-bottom));background:var(--glass-bg);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);color:var(--color-ink)}
@media (min-width:840px){.sheet-scrim{align-items:center}.sheet{border-radius:var(--r-win);padding-bottom:var(--space-win)}}
.sheet.win-m{--space-win:var(--space-win-m);--r-win:var(--r-win-m)}
.sheet.win-l{--space-win:var(--space-win-l);--r-win:var(--r-win-l)}
.sheet.float{border-radius:var(--r-win);padding-bottom:var(--space-win)} /* 下に付かない、浮いたウィンドウ(4つの角が丸い) */
@media (prefers-reduced-transparency:reduce){.sheet{background:var(--color-parchment);-webkit-backdrop-filter:none;backdrop-filter:none}}
.sheet-grabber{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:2.5rem;height:.375rem;border-radius:var(--radius-pill);background:var(--sys-gray);opacity:.6;cursor:grab;touch-action:none}
.sheet-grabber:active{cursor:grabbing}
.sheet-head{position:sticky;top:0;z-index:2;flex-shrink:0;--head-side:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 0 var(--space-win);touch-action:none;-webkit-user-select:none;user-select:none} /* ボタンは、面の端から --space-nest(余白)のところ: 角に同心円で収まる。スクロールしても上に固定 */
/* 区切り線つき(line): 窓の端から端まで、細い線 */
.sheet-head.line{margin:0 calc(var(--space-win) * -1);padding:0 var(--space-win) var(--space-win);border-bottom:1px solid var(--color-hairline)}
/* ぼかしのグラデーション(fade): 帯の下 1.5rem が、背景色のグラデーション + ぼかし。本文は、その下に潜って、見出し・ボタンに重ならずに消える */
/* 本文は、帯の真下から始まる(帯の後ろには、本文が来ない)。ぼかしの細い帯(::after)が、本文の上端に、重なる */
/* 帯の本体(見出し・ボタン)は、ぼかさない。ぼかしは、帯の下の細い帯(::after)だけ。そこに、本文が潜って、ぼけて消える */
.sheet-head.fade::after{content:"";position:absolute;z-index:-1;left:calc(var(--space-win) * -1);right:calc(var(--space-win) * -1);top:100%;height:1.5rem;pointer-events:none;background:linear-gradient(to bottom,var(--glass-bg),transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
.sheet-head.fade+.sheet-body{padding-top:1.5rem}
/* 見出しは、左右のボタンの幅に関係なく、帯の真ん中(絶対中央)。左右は、ボタンのために --head-side ずつ空ける(アイコンのボタン 3.5rem、文字のボタン 7rem)。幅が足りない狭い窓では、見出しを3rem以上に保つ */
/* ※ 見出しは、ボタンの横に並べず、絶対配置にする。ボタンの幅が左右で違っても、ずれない */
.sheet-head:has(.cancel-btn){--head-side:7rem}
.sheet-head h2{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - var(--space-win) / 2));max-width:max(3rem,calc(100% - 2 * var(--head-side)));pointer-events:none;margin:0;font:600 1rem/1.3 var(--font-text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-head .cancel-btn{white-space:nowrap;font:400 .941rem/1.3 var(--font-text);color:var(--color-primary);background:none;border:none;min-height:var(--hit-target);min-width:var(--hit-target);padding:0 var(--space-xs);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill)}
.sheet-head .cancel-btn:hover{opacity:.8}
.sheet-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:0}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@keyframes ap-dim{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.btn,.link,.chip,.icon-btn,.toggle .track,.toggle .thumb,.seg.on:not(.dragging) .seg-thumb,.sheet-scrim{transition:none;animation:none}}

/* ウィンドウと中身の余白のパターン(S・M・L)。窓の余白(--space-win)は、角丸と一組(角丸 = 22 + 余白)。中身のブロックの間(--space-gap)と、ブロックの内側(--space-pad)も、同じ大きさの組で決める。
   S=窓8・間8・内側12 / M=窓14・間12・内側16 / L=窓22・間16・内側20。1つのサービスでは、基本は1つに揃える。中のブロックの角丸は、どれも --r-nested(22) */
:root{--space-gap-s:8px;--space-gap-m:12px;--space-gap-l:16px;--space-pad-s:12px;--space-pad-m:16px;--space-pad-l:20px}
.sheet{--space-gap:var(--space-gap-s);--space-pad:var(--space-pad-s)}
.sheet.win-m{--space-gap:var(--space-gap-m);--space-pad:var(--space-pad-m)}
.sheet.win-l{--space-gap:var(--space-gap-l);--space-pad:var(--space-pad-l)}
.win-stack{display:flex;flex-direction:column;gap:var(--space-gap)}
.win-block{border-radius:var(--r-nested);padding:var(--space-pad);background:var(--sys-fill)}

/* サイドバー(広い画面。左に浮かぶすりガラス)。ふだんはアイコンだけ(3.75rem)。マウスを乗せる・キーボードで選ぶ(focus-visible)・長押しすると、幅が広がり(12rem)、文字が出て、ボタンが大きくなる。
   文字は、閉じるときは、すぐ消え、開くときは、幅が広がり始めてから(0.1秒遅れて)出る。角丸は同心: 外側 = 項目(ピル。高さ2.75remの半分)+ 余白0.5rem = 1.875rem */
.sbar{position:relative;width:3.75rem;padding:.5rem;border-radius:calc(1.375rem + .5rem);overflow:hidden;background:var(--glass-bg);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);border:1px solid var(--color-hairline);box-shadow:0 8px 28px rgba(0,0,0,.12);transition:width .3s ease-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none}
.sbar:hover,.sbar:has(:focus-visible),.sbar[data-open="true"]{width:12rem}
.sbar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.sbar-item{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:0 .625rem;border-radius:var(--radius-pill);color:var(--color-ink-muted);font:400 1rem/1 var(--font-text);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.sbar-item .ic{width:1.5rem;height:1.5rem;flex:none}
.sbar-item:hover,.sbar-item[data-hl]{background:var(--color-chip);color:var(--color-ink)}
.sbar-item[aria-current="page"]{background:var(--color-chip);color:var(--color-link);font-weight:700}
.sbar-label{opacity:0;transform:translateX(-.5rem);transition:opacity .1s,transform .1s}
.sbar:hover .sbar-label,.sbar:has(:focus-visible) .sbar-label,.sbar[data-open="true"] .sbar-label{opacity:1;transform:none;transition:opacity .3s .1s,transform .3s .1s}
@media (prefers-reduced-motion:reduce){.sbar,.sbar-label,.sbar:hover .sbar-label,.sbar[data-open="true"] .sbar-label{transition:none}}

/* 端のセルの角丸(同心円コーナー。時間割・カレンダー・料金表・キーパッドなど、角丸のカードの中のグリッドで使える): セルは、自分がカードの角に接している(端)かどうかで、角の丸みを変える。ふだんのセルは --radius-inset-group(10)。
   端のセル(最終列の見出しの右上 .eg-tr、最下行の左下 .eg-bl と右下 .eg-br)は、その角に、ほかの内容が続かないとき(data-ctx に top / bottom が無いとき)だけ、カードの角と同心(--r-nested = 外側 − 余白)。
   data-ctx は、カードの上(top)・下(bottom)に、ほかの内容が続くか(空白区切り。例: "top bottom")。続くと、その側の端のセルは、端でなくなる(ふだんの丸み)。切り替わるとき、角丸はなめらかに変わる */
.eg{--eg-r:var(--radius-inset-group);--eg-gap:4px;display:grid;grid-template-columns:2.4rem repeat(var(--cols,3),1fr);gap:var(--eg-gap);padding:var(--space-nest);background:var(--color-canvas);box-sizing:border-box;width:100%}
.eg>*{display:flex;align-items:center;justify-content:center;min-height:2.6rem;border-radius:var(--eg-r);background:var(--sys-fill);color:var(--color-ink);font:600 .8125rem/1.2 var(--font-text);transition:border-radius .3s}
.eg>.eg-void{background:none}
.eg>.eg-cell{background:var(--color-chip);font-weight:400;color:var(--color-ink-muted)}
.eg-wrap{width:100%;display:flex;flex-direction:column;border-radius:var(--r-surface);background:var(--color-canvas);overflow:hidden}
.eg-wrap:not([data-ctx~="top"]) .eg>.eg-tr{border-top-right-radius:var(--r-nested)}
.eg-wrap:not([data-ctx~="bottom"]) .eg>.eg-bl{border-bottom-left-radius:var(--r-nested)}
.eg-wrap:not([data-ctx~="bottom"]) .eg>.eg-br{border-bottom-right-radius:var(--r-nested)}
.eg-extra{display:none;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-nest);font-size:.8125rem;color:var(--color-ink-muted)}
.eg-wrap[data-ctx~="top"] .eg-extra.top,.eg-wrap[data-ctx~="bottom"] .eg-extra.bottom{display:flex}
.eg-extra .chip{min-height:2.25rem}
@media (prefers-reduced-motion:reduce){.eg>*{transition:none}}
/* 色つきのボタン(--tint / --on-tint)。色の名前は .tint-red など。ライト・ダーク・コントラスト強化で、色が自動で変わる(上の system-colors) */
.btn-tint{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit-target);padding:0 1.25rem;border:0;border-radius:var(--radius-pill);background:var(--tint,var(--sys-blue));color:var(--on-tint,var(--sys-on-blue));font:700 .941rem/1 var(--font-text);cursor:pointer} /* 太字(700)。HIG: 太字の文字は、コントラスト 3:1 以上で足りる。文字の色(白・黒)は、--sys-on-* が決める */
.btn-tint:active{opacity:.85}
/* system-colors:begin(tools/make_system_colors.py が書く。直接編集しない) */
:root,[data-tone="light"]{--sys-red:#ff383c;--sys-on-red:#ffffff;--sys-orange:#ff8d28;--sys-on-orange:#000000;--sys-yellow:#ffcc00;--sys-on-yellow:#000000;--sys-green:#34c759;--sys-on-green:#000000;--sys-mint:#00c8b3;--sys-on-mint:#000000;--sys-teal:#00c3d0;--sys-on-teal:#000000;--sys-cyan:#00c0e8;--sys-on-cyan:#000000;--sys-blue:#0088ff;--sys-on-blue:#ffffff;--sys-indigo:#6155f5;--sys-on-indigo:#ffffff;--sys-purple:#cb30e0;--sys-on-purple:#ffffff;--sys-pink:#ff2d55;--sys-on-pink:#ffffff;--sys-brown:#ac7f5e;--sys-on-brown:#ffffff;--sys-gray:#8e8e93;--sys-on-gray:#ffffff;}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]){--sys-red:#ff4245;--sys-on-red:#ffffff;--sys-orange:#ff9230;--sys-on-orange:#000000;--sys-yellow:#ffd600;--sys-on-yellow:#000000;--sys-green:#30d158;--sys-on-green:#000000;--sys-mint:#00dac3;--sys-on-mint:#000000;--sys-teal:#00d2e0;--sys-on-teal:#000000;--sys-cyan:#3cd3fe;--sys-on-cyan:#000000;--sys-blue:#0091ff;--sys-on-blue:#ffffff;--sys-indigo:#6d7cff;--sys-on-indigo:#ffffff;--sys-purple:#db34f2;--sys-on-purple:#ffffff;--sys-pink:#ff375f;--sys-on-pink:#ffffff;--sys-brown:#b78a66;--sys-on-brown:#ffffff;--sys-gray:#8e8e93;--sys-on-gray:#ffffff;}}
[data-tone="dark"]{--sys-red:#ff4245;--sys-on-red:#ffffff;--sys-orange:#ff9230;--sys-on-orange:#000000;--sys-yellow:#ffd600;--sys-on-yellow:#000000;--sys-green:#30d158;--sys-on-green:#000000;--sys-mint:#00dac3;--sys-on-mint:#000000;--sys-teal:#00d2e0;--sys-on-teal:#000000;--sys-cyan:#3cd3fe;--sys-on-cyan:#000000;--sys-blue:#0091ff;--sys-on-blue:#ffffff;--sys-indigo:#6d7cff;--sys-on-indigo:#ffffff;--sys-purple:#db34f2;--sys-on-purple:#ffffff;--sys-pink:#ff375f;--sys-on-pink:#ffffff;--sys-brown:#b78a66;--sys-on-brown:#ffffff;--sys-gray:#8e8e93;--sys-on-gray:#ffffff;}
@media (prefers-contrast:more){:root,[data-tone="light"]{--sys-red:#e9152d;--sys-on-red:#ffffff;--sys-orange:#c55300;--sys-on-orange:#ffffff;--sys-yellow:#a16a00;--sys-on-yellow:#ffffff;--sys-green:#008932;--sys-on-green:#ffffff;--sys-mint:#008575;--sys-on-mint:#ffffff;--sys-teal:#008198;--sys-on-teal:#ffffff;--sys-cyan:#007eae;--sys-on-cyan:#ffffff;--sys-blue:#1e6ef4;--sys-on-blue:#ffffff;--sys-indigo:#564ade;--sys-on-indigo:#ffffff;--sys-purple:#b02fc2;--sys-on-purple:#ffffff;--sys-pink:#e7124d;--sys-on-pink:#ffffff;--sys-brown:#956d51;--sys-on-brown:#ffffff;--sys-gray:#6c6c70;--sys-on-gray:#ffffff;}[data-tone="dark"]{--sys-red:#ff6165;--sys-on-red:#000000;--sys-orange:#ffa056;--sys-on-orange:#000000;--sys-yellow:#fedf43;--sys-on-yellow:#000000;--sys-green:#4ad968;--sys-on-green:#000000;--sys-mint:#54dfcb;--sys-on-mint:#000000;--sys-teal:#3bddec;--sys-on-teal:#000000;--sys-cyan:#6dd9ff;--sys-on-cyan:#000000;--sys-blue:#5cb8ff;--sys-on-blue:#000000;--sys-indigo:#a7aaff;--sys-on-indigo:#000000;--sys-purple:#ea8dff;--sys-on-purple:#000000;--sys-pink:#ff8ac4;--sys-on-pink:#000000;--sys-brown:#dba679;--sys-on-brown:#000000;--sys-gray:#aeaeb2;--sys-on-gray:#000000;}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root:not([data-tone="light"]){--sys-red:#ff6165;--sys-on-red:#000000;--sys-orange:#ffa056;--sys-on-orange:#000000;--sys-yellow:#fedf43;--sys-on-yellow:#000000;--sys-green:#4ad968;--sys-on-green:#000000;--sys-mint:#54dfcb;--sys-on-mint:#000000;--sys-teal:#3bddec;--sys-on-teal:#000000;--sys-cyan:#6dd9ff;--sys-on-cyan:#000000;--sys-blue:#5cb8ff;--sys-on-blue:#000000;--sys-indigo:#a7aaff;--sys-on-indigo:#000000;--sys-purple:#ea8dff;--sys-on-purple:#000000;--sys-pink:#ff8ac4;--sys-on-pink:#000000;--sys-brown:#dba679;--sys-on-brown:#000000;--sys-gray:#aeaeb2;--sys-on-gray:#000000;}}
.tint-red{--tint:var(--sys-red);--on-tint:var(--sys-on-red)}.tint-orange{--tint:var(--sys-orange);--on-tint:var(--sys-on-orange)}.tint-yellow{--tint:var(--sys-yellow);--on-tint:var(--sys-on-yellow)}.tint-green{--tint:var(--sys-green);--on-tint:var(--sys-on-green)}.tint-mint{--tint:var(--sys-mint);--on-tint:var(--sys-on-mint)}.tint-teal{--tint:var(--sys-teal);--on-tint:var(--sys-on-teal)}.tint-cyan{--tint:var(--sys-cyan);--on-tint:var(--sys-on-cyan)}.tint-blue{--tint:var(--sys-blue);--on-tint:var(--sys-on-blue)}.tint-indigo{--tint:var(--sys-indigo);--on-tint:var(--sys-on-indigo)}.tint-purple{--tint:var(--sys-purple);--on-tint:var(--sys-on-purple)}.tint-pink{--tint:var(--sys-pink);--on-tint:var(--sys-on-pink)}.tint-brown{--tint:var(--sys-brown);--on-tint:var(--sys-on-brown)}.tint-gray{--tint:var(--sys-gray);--on-tint:var(--sys-on-gray)}
/* system-colors:end */

/* catalog/demos.css */
/* カタログ専用の見本(catalog/demos.js)。色は Apple の名前(--color-*)。角丸は --r-nested(中の面 = 22) */
.demo-row{padding:0 var(--space-md);height:44px;display:flex;align-items:center;border-bottom:1px solid var(--color-hairline);font-size:.875rem;color:var(--color-ink)}
.demo-wheel,.demo-edge,.demo-screen,.demo-rubber{position:relative;width:min(100%,13rem);height:8.25rem;border-radius:var(--r-nested);overflow:hidden;background:var(--color-canvas)}
/* ホイール */
.demo-wheel-list{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;padding:44px 0;box-sizing:border-box;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);outline:none}
.demo-wheel-list::-webkit-scrollbar{display:none}
.demo-wheel-row{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:1rem;color:var(--color-ink);cursor:pointer;transition:opacity .15s}
.demo-wheel-band{position:absolute;left:8px;right:8px;top:50%;height:44px;margin-top:-22px;border-radius:var(--radius-pill);background:var(--sys-fill);pointer-events:none;z-index:-1}
.demo-wheel{isolation:isolate}
/* 端のぼかし */
.demo-edge-scroll{height:100%;overflow-y:auto;scrollbar-width:none}
.demo-edge-scroll::-webkit-scrollbar{display:none}
.demo-edge::before,.demo-edge::after{content:"";position:absolute;left:0;right:0;height:38px;z-index:1;pointer-events:none;background:linear-gradient(var(--color-canvas),transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.demo-edge::before{top:0}
.demo-edge::after{bottom:0;transform:scaleY(-1)}
/* 画面の端: 多層のぼかし(外側ほど強く) */
.demo-screen{box-shadow:0 0 0 1px var(--color-hairline)}
.demo-screen .eb{position:absolute;left:0;right:0;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.demo-screen .t1,.demo-screen .t2,.demo-screen .t3{top:0}
.demo-screen .b1,.demo-screen .b2,.demo-screen .b3{bottom:0;transform:scaleY(-1)}
.demo-screen .t1,.demo-screen .b1{height:46px;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.demo-screen .t2,.demo-screen .b2{height:34px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.demo-screen .t3,.demo-screen .b3{height:22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.demo-screen .t1,.demo-screen .t2,.demo-screen .t3,.demo-screen .b1,.demo-screen .b2,.demo-screen .b3{background:linear-gradient(var(--color-canvas),transparent)}
.demo-clock{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);font:600 .75rem/1 var(--font-text);color:var(--color-ink);pointer-events:none}
.demo-home{position:absolute;z-index:2;bottom:6px;left:50%;transform:translateX(-50%);width:36%;height:4px;border-radius:var(--radius-pill);background:var(--color-ink);opacity:.75;pointer-events:none}
/* ゴムの弾力 */
.demo-rubber{background:var(--sys-fill);touch-action:none;cursor:grab}
.demo-rubber-hint{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:.8125rem;color:var(--color-ink-muted)}
.demo-rubber-list{position:absolute;inset:0;background:var(--color-canvas);will-change:transform}

/* 絞り込み(大学サポートアプリ) */
.demo-filter{width:100%;min-height:15.75rem;display:flex;flex-direction:column;gap:var(--space-xs)} /* 開閉で、見本の面の高さが変わらないように、開いたときの高さを確保する */
.demo-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.demo-pills::-webkit-scrollbar{display:none}
.demo-pill{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:44px;padding:0 14px;border:1px solid var(--color-hairline);border-radius:var(--radius-pill);background:var(--color-canvas);color:var(--color-ink);font:400 .8125rem/1 var(--font-text);white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.demo-pill .chev{display:inline-flex;transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.demo-pill[aria-expanded="true"] .chev{transform:rotate(180deg)}
.demo-pill.sel,.demo-pill[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-chip);color:var(--color-link);font-weight:600}
.demo-fpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.demo-fpanel.open{grid-template-rows:1fr}
.demo-fclip{min-height:0;overflow:hidden}
.demo-fcard{display:flex;flex-direction:column;max-height:9.5rem;border-radius:var(--r-nested);background:var(--color-canvas);overflow:hidden}
.demo-fbody{flex:1;overflow-y:auto;padding:var(--space-xs) var(--space-md) 0;scrollbar-width:none}
.demo-fbody::-webkit-scrollbar{display:none}
.demo-fbody h3{margin:var(--space-xxs) 0;font:600 .875rem/1.3 var(--font-text);color:var(--color-ink)}
.demo-crow{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--color-ink);font:400 .875rem/1 var(--font-text);text-align:left;cursor:pointer}
.demo-crow .box{width:22px;height:22px;flex:none;border:2px solid var(--sys-gray);border-radius:var(--radius-xs);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.demo-crow[aria-checked="true"] .box{background:var(--color-primary);border-color:var(--color-primary)}
.demo-crow[aria-checked="true"] .box::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.demo-ffoot{display:flex;gap:var(--space-xs);justify-content:space-between;padding:var(--space-xs) var(--space-sm);border-top:1px solid var(--color-hairline)}
.demo-ffoot button{flex:1;min-height:44px;border-radius:var(--radius-pill);font:600 .8125rem/1 var(--font-text);cursor:pointer;border:1px solid var(--color-hairline);background:var(--color-canvas);color:var(--color-ink)}
.demo-ffoot .demo-fshow{border:0;background:var(--color-chip);color:var(--color-link)}
.demo-ffoot button:disabled{opacity:.4;cursor:default}
.demo-fcount{margin:0;font-size:.8125rem;color:var(--color-ink-muted)}
@media (prefers-reduced-motion:reduce){.demo-fpanel,.demo-pill,.demo-pill .chev{transition:none}}
/* 選び方の決まり: 複数選べる = 角丸の四角、1つしか選べない = 完全な丸 */
.demo-crow[role="radio"] .box{border-radius:50%}
.demo-crow[role="radio"][aria-checked="true"] .box::after{width:8px;height:8px;margin:0;border:0;border-radius:50%;background:#fff;transform:none}

/* タスク(完了の取り消し線) */
.demo-task{display:flex;align-items:flex-start;gap:12px;width:100%;box-sizing:border-box;padding:var(--space-sm) var(--space-md);border-radius:var(--r-nested);background:var(--color-canvas)}
.demo-task[hidden]{display:none}
.demo-tcheck{position:relative;flex:none;width:28px;height:28px;padding:0;border:2px solid var(--sys-gray);border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.demo-tcheck::after{content:"";position:absolute;inset:-8px} /* タップできる範囲は44pt */
.demo-tcheck .ic{width:.9rem;height:.9rem;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.demo-tcheck[aria-checked="true"]{background:var(--sys-green);border-color:var(--sys-green);color:var(--sys-on-green)}
.demo-tcheck[aria-checked="true"] .ic{opacity:1;transform:none}
.demo-ttext{flex:1;min-width:0;padding-top:2px;font:400 .9375rem/1.45 var(--font-text);color:var(--color-ink)}
.demo-ttext .strike-text{--sub:var(--color-ink-muted);--ink:var(--color-ink)}

/* catalog/catalog.css */
/* ui-kit カタログの画面。Apple デザインシステム(../web/apple.css、Claude Design の「Appleデザインシステム」)で作る:
   黒のグローバルナビ、近黒のヒーロー、白とパーチメントのタイルを全幅で交互に、ストア風のカード、固定のサブナビ(ぼかし)、iOS のセグメントとトグルとシート。
   ここには、カタログ自身の並べ方だけを書く。見本の面(.stage)の中は、ui-kit の部品の色(tokens.css)で描く(部品を、アプリの色で見る場所)。 */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top-h,8rem) + 1rem)}
body{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.15rem;height:1.15rem;flex:none}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* 固定のサブナビ */
.sub-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);max-width:80rem;margin:0 auto;padding:var(--space-xs) max(var(--space-lg),env(safe-area-inset-left))}
.sub-in .searchbox{flex:1 1 14rem;max-width:24rem}
.brk{flex-basis:100%;height:0}
@media (min-width:1180px){.brk{display:none}}
#motion .toggle{padding-left:.25rem}

/* 件数と、選んでいるタグ */
#tagarea{max-width:80rem;margin:0 auto;padding:var(--space-md) var(--space-lg) 0}
.count{color:var(--color-ink-muted);font:400 .8235rem/1.43 var(--font-text);font-variant-numeric:tabular-nums}
.tgsel{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin:var(--space-xs) 0 0}

/* 部品のまとまり(全幅のタイル。白とパーチメントを交互に) */
main{outline:none}
.part{padding:var(--space-xxl) max(var(--space-lg),env(safe-area-inset-left)) var(--space-xxl);scroll-margin-top:calc(var(--top-h,8rem) + 1rem)}
.part-in{max-width:80rem;margin:0 auto}
/* 再生ボタン(カードの右上、見本の面の角) */
.play-btn{position:absolute;top:calc(var(--space-card) + 2px);right:calc(var(--space-card) + 2px);z-index:5;background:none;border:0;color:var(--color-ink-80)} /* 背景の丸なし。アイコンは小さく、押せる範囲は44ptのまま */
.play-btn .ic{width:.9rem;height:.9rem}
.play-btn:hover .ic{opacity:.7}
.part-head{text-align:center;max-width:46rem;margin:0 auto var(--space-xl)}
.part-head h2{margin:0}
.part-head .sum{margin:var(--space-xs) 0 0;color:var(--color-ink-muted)}
.part-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);justify-content:center;margin-top:var(--space-sm)}
.impls{max-width:46rem;margin:var(--space-sm) auto 0;text-align:left}
.impls summary{display:flex;justify-content:center;list-style:none;cursor:pointer}
.impls summary::-webkit-details-marker,.code summary::-webkit-details-marker{display:none}
.impl{display:grid;gap:var(--space-xxs);margin:var(--space-xs) 0 0;padding:var(--space-sm) var(--space-md);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-md);font:400 .8235rem/1.43 var(--font-text)}
.tile-light .impl{background:var(--color-parchment)}
.impl code{word-break:break-word}
.impl .files{color:var(--color-ink-80)}
.impl .files code{background:var(--color-chip);border-radius:var(--radius-xs);padding:.1rem .35rem;margin:0 .25rem .15rem 0;display:inline-block}
.impl p{margin:0;color:var(--color-ink-muted)}

/* 1つのバリエーション(ストア風のカード) */
/* 列は、幅に合わせて増えるが、4列まで(広い画面でも5列にしない): 1列の最小幅 = 15rem と、全体の4分の1 の大きいほう */
.cards{grid-auto-flow:dense;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(15rem,calc((100% - 3 * var(--space-md)) / 4)),1fr));gap:var(--space-md)}
/* iPad mini の横(1133px)など、1180px 以下は、横3つまで(広い画面は4つまで) */
@media (max-width:1180px){.cards{grid-template-columns:repeat(auto-fill,minmax(max(15rem,calc((100% - 2 * var(--space-md)) / 3)),1fr))}}
.vcard{position:relative;display:flex;flex-direction:column;min-width:0;scroll-margin-top:calc(var(--top-h,8rem) + 1rem)}
.vcard.wide{grid-column:span 2} /* グラフは、2列分(全幅にしない)。狭いときだけ、全幅 */
@media (max-width:36rem){.vcard.wide{grid-column:1/-1}}
.vcard.hl{outline:2px solid var(--color-primary-focus);outline-offset:3px}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-sm);min-height:8rem;padding:var(--space-lg) var(--space-md);border-radius:var(--r-card-inner);overflow:hidden;min-width:0;margin-bottom:var(--space-md)}
.stage:not(.apple){background:var(--stage-bg);color:var(--ink)}
.stage.apple{background:var(--stage-bg);color:var(--color-ink)}
.stage.rx{background:var(--stage-bg);color:#181e27}
.stage.rx .rxhost{width:100%}
.implsw{margin:var(--space-xs) 0 var(--space-sm);display:flex} /* カードごとの、実装の切り替え(Web ⇄ React) */
.rxmsg{margin:0;color:var(--color-ink-muted);text-align:center;font-size:.8125rem} /* 見本の幅は、面いっぱい(w-full が、中身の幅に縮まない) */
.stage.dark{background:var(--stage-inv)}
.stage.scene{background:linear-gradient(135deg,#8FC5E3 0%,#F6D9A9 55%,#EFA3A0 100%)}
.stage.swipe{display:block;padding:var(--space-xs) var(--space-md);--swp-bleed:1rem}
.stage.bleed{display:block;padding:0;min-height:9.5rem}
.stage.wide{display:block;padding:var(--space-md) var(--space-lg) var(--space-lg)}
.stage.none{flex-direction:column;gap:var(--space-xxs);text-align:center;background-color:var(--stage-bg);background-image:repeating-linear-gradient(135deg,transparent 0 12px,var(--stage-hatch) 12px 24px);color:var(--color-ink-muted);font:400 .882rem/1.4 var(--font-text)}
.stage.none .nolabel{font-size:.706rem;font-weight:600;border:1px solid var(--color-hairline);border-radius:var(--radius-pill);padding:.15rem .6rem;background:var(--stage-bg)}
.stage.err{color:#c4161c;font-size:.765rem;font-family:ui-monospace,Menlo,monospace}
.vname{margin:0}
.ven{margin:0;color:var(--color-ink-muted)} /* 標準の英語名。AI への指示は、この名前でも通る */
.pen{margin:var(--space-xxs) 0 0;color:var(--color-ink-muted);text-align:center}
.vid{display:flex;align-items:center;gap:.4rem;margin-top:2px;color:var(--color-ink-muted)}
.loop{display:inline-flex}
.loop .ic{width:.8rem;height:.8rem}
.vacts{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-xs) 0 0 -.5rem}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-xxs);margin:var(--space-xs) 0 0;padding:0;list-style:none}
.code{margin:var(--space-xs) 0 0 -.5rem}
.code summary{display:inline-flex;list-style:none;cursor:pointer}
.code pre{margin:var(--space-xs) 0 var(--space-xs) .5rem;padding:var(--space-sm) var(--space-md);background:var(--color-tile-1);color:#f5f5f7;border-radius:var(--radius-sm);font-size:.706rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.code .cl{margin:var(--space-xs) 0 0 .5rem;color:var(--color-ink-muted)}
.code p{margin:0 0 var(--space-xs) .5rem;font:400 .765rem/1.43 var(--font-text);color:var(--color-ink-muted)}

/* タグのシート */
.sheet-body .tg{margin:0 0 var(--space-sm)}
.sheet-body h3{margin:0 0 var(--space-xxs);padding:0 var(--space-md);font:400 .765rem/1.38 var(--font-text);color:var(--sys-label-2)}
.tgrow{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--sys-bg);border-radius:var(--r-nested)}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .tgrow{background:#1c1c1e}}
.sheet-head h2 .count{margin-left:.35rem}

.empty{padding:var(--space-xxl) var(--space-lg);text-align:center;color:var(--color-ink-muted)}
.card-in{animation:ap-rise .45s cubic-bezier(.16,1,.3,1)}
@keyframes ap-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card-in{animation:none}}
@media (max-width:840px){
  .part{padding:var(--space-xl) var(--space-md)}
  .sub-in{padding:var(--space-xs) var(--space-md)}
  #plat,#mode{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #plat::-webkit-scrollbar,#mode::-webkit-scrollbar{display:none}
  html{scroll-padding-top:1rem}
}

/* ダーク: 見本の面も、外観に追従させる。部品(ui.css など)は色の名前だけを参照するので、名前の値を暗い側にする。
   面の色が決まっている見本(.dark 反転・.scene 背景・.apple)は、そのまま */
@media (prefers-color-scheme:dark){
  .stage:not(.apple):not(.rx):not(.dark):not(.scene){--swp-bg:var(--card);--swp-line:var(--line)}
  /* 色の名前(tokens.css)は、ダークで暗い側になる。面の色が決まっている見本(反転・絵のある面)だけ、ライトの値のまま */
  .stage.dark,.stage.scene{--ink:#1d1d1f;--sub:#6e6e73;--card:#ffffff;--line:#d2d2d7;--warn:#d70015;--b:#34c759;--glass:rgba(255,255,255,.30);--btn:#1d1d1f;--on-btn:#fff;--on-warn:#fff;--u-blue:#4A7CE0;--on-blue:#fff}
  .stage.rx{color:#e6ecf2}
  .stage:not(.dark) button.u.u-light,.stage .gx-target{background:#2c2c2e;color:var(--ink)}
  .stage .gx-target[data-held]{background:color-mix(in srgb,var(--ink) 14%,#2c2c2e)}
}

/* 見本の面は狭い(カード1枚の幅)。はみ出す部品は、面の幅に収める */
.stage .seg{max-width:100%}
.stage .seg>button{min-width:0;padding-inline:.5rem}
.stage .global-nav{overflow:visible;flex-wrap:wrap;justify-content:center;gap:0 var(--space-xxs);width:100%}
.stage .global-nav a:first-child{margin-left:0}

/* 見本の面の色: 全部の見本で、Apple のグレーに揃える。サイトの背景(白・黒)にも、カード(白・黒)にも、埋没しない濃さ。
   反転の見本(.dark)だけ、暗い面。絵のある面(.scene)は、そのまま */
:root{--stage-bg:#ececf1;--stage-inv:#1d1d1f;--stage-hatch:rgb(60 60 67 / .08)}
@media (prefers-color-scheme:dark){:root{--stage-bg:#2c2c2e;--stage-inv:#1d1d1f;--stage-hatch:rgb(255 255 255 / .06)}}