:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#EDF1F6;
  --ink:#151B24; --ink-2:#3D4854; --muted:#667487; --line:#DCE3EB;
  --lapis:#17457F; --lapis-soft:#E4EDF9; --on-lapis:#FFFFFF;
  --kinaka:#B0405A; --kinaka-soft:#FBE9ED;
  --moss:#3F6B4E; --moss-soft:#E6F0E9;
  --shadow:0 1px 2px rgba(21,27,36,.05), 0 8px 24px -18px rgba(21,27,36,.3);
  /* お客様の端末がダークモードでも白のまま出す（2026-08-31 ユーザー決定）。
     入力欄・チェックボックス等のブラウザ部品も白側で描かせるため color-scheme も固定する。 */
  color-scheme: light;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:15px; line-height:1.85; -webkit-text-size-adjust:100%;
}
main{max-width:34rem; margin:0 auto; padding:28px 18px 72px; display:flex; flex-direction:column; gap:20px}
h1,h2{font-family:"Shippori Mincho",serif; font-weight:600; margin:0; line-height:1.5; text-wrap:balance}
h1{font-size:20px}
h2{font-size:16px}
p{margin:0}
.loading{color:var(--muted); text-align:center; padding:60px 0}
.mono{font-family:"Roboto Mono",monospace; font-variant-numeric:tabular-nums}
.sub{font-size:13px; color:var(--muted); line-height:1.8}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.card.hi{border-color:var(--lapis); background:var(--lapis-soft)}
.card.warn{border-color:var(--kinaka); background:var(--kinaka-soft)}
.kv{display:flex; justify-content:space-between; gap:12px; font-size:14px}
.kv .k{color:var(--muted); flex:0 0 auto}
.kv .v{text-align:right}
.total{border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; font-weight:700}
button{font:inherit; cursor:pointer}
.btn{display:block; width:100%; text-align:center; padding:14px; border-radius:9px; border:1px solid transparent;
     background:var(--lapis); color:var(--on-lapis); font-weight:500}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.ghost{background:transparent; border-color:var(--lapis); color:var(--lapis)}
.btn.quiet{background:transparent; border-color:var(--line); color:var(--ink-2)}
.btn.sm{padding:9px 14px; width:auto; font-size:13.5px}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
input[type=text]{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit}
.glassgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.gtile{border:1px solid var(--line); border-radius:9px; padding:7px; text-align:center; font-size:11px; line-height:1.5;
  background:var(--surface); color:var(--ink-2)}
.gtile[aria-pressed="true"]{border-color:var(--lapis); box-shadow:inset 0 0 0 1px var(--lapis); background:var(--lapis-soft); color:var(--ink)}
.gtile img,.gtile .ph{width:100%; aspect-ratio:3/4; border-radius:6px; display:block; margin-bottom:5px; object-fit:cover; background:var(--surface-2)}
.gtile .ph{display:grid; place-items:center; color:var(--muted); font-size:10px}
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px;
  font-family:"Roboto Mono",monospace; background:var(--surface-2); color:var(--muted)}
.chip.done{background:var(--moss-soft); color:var(--moss)}
.chip.todo{background:var(--kinaka-soft); color:var(--kinaka)}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.err{color:var(--kinaka); font-size:13.5px}
.note{background:var(--surface-2); border-radius:8px; padding:11px 13px; font-size:12.5px; color:var(--ink-2); line-height:1.75}
:focus-visible{outline:2px solid var(--lapis); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.preview{width:100%; max-width:220px; margin:0 auto; display:block; border-radius:9px; background:var(--surface-2)}
.naire{font-family:"Shippori Mincho",serif; font-size:17px}
.gtile .pending{color:var(--kinaka); font-size:10px}
.gcat{font-size:12px; color:var(--muted); margin:14px 0 6px}
.gcat:first-of-type{margin-top:0}
