/* 約束帳。パレットは「海と珊瑚」(docs/DESIGN.md 2-2)。1件=1枚の証文(半券と切り取り線)、済んだら判。地は帳面の罫。角は 4px、影なし */
:root{--bg:#f5f6f2;--men:#e8ede8;--ji:#1c2a2e;--hai:#4f5f63;--kei:#d8dfda;--kei2:#8d8b85;--shu:#0f5f6b;--fuku:#f08a6c;--chui:#b23a3a;--w:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ji);font-size:16px;line-height:1.7;min-height:100vh;
  background:var(--bg) repeating-linear-gradient(to bottom,transparent 0 31px,#e3e8e3 31px 32px)}
#app,.top{max-width:560px;margin:0 auto}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-family:Inter,"Noto Sans JP",sans-serif;font-variant-numeric:tabular-nums}
.top{padding:14px 16px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.top b{font-size:20px;font-weight:900;letter-spacing:.08em}
.top span{font-size:14px;color:var(--hai);display:flex;align-items:center;gap:8px}
.top img{width:28px;height:28px;border-radius:4px}
.tabs{display:flex;margin:0 16px;border:2px solid var(--ji);border-radius:4px;overflow:hidden;background:var(--w);position:sticky;top:8px;z-index:3}
.tabs button{flex:1;background:none;border:0;padding:10px 0;font-size:16px;font-weight:700;color:var(--ji);cursor:pointer}
.tabs button+button{border-left:2px solid var(--ji)}
.tabs button[aria-selected=true]{background:var(--ji);color:#fff}
.hero{padding:28px 16px 8px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
.hero .kick{grid-column:1/-1;font-size:13px;color:var(--hai);letter-spacing:.08em}
.hero h1{font-size:48px;font-weight:900;line-height:1.05;letter-spacing:-.02em}
.hero .count{display:flex;gap:16px;text-align:right}
.hero .count b{display:block;font-size:40px;font-weight:700;line-height:1;color:var(--shu)}
.hero .count small{display:block;font-size:12px;color:var(--hai);margin-top:4px;white-space:nowrap}
.pad{padding:16px}
.btn{display:block;width:100%;background:var(--shu);color:#fff;border:0;border-radius:4px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none}
.btn.sub{background:var(--w);color:var(--shu);border:1px solid var(--shu)}
.btn:disabled{opacity:.5}
.seg{display:flex;border:1px solid var(--kei2);border-radius:4px;overflow:hidden;background:var(--w)}
.seg button{flex:1;background:none;border:0;font-size:14px;padding:8px 4px;color:var(--hai);cursor:pointer}
.seg button+button{border-left:1px solid var(--kei)}
.seg button[aria-pressed=true]{background:var(--ji);color:#fff;font-weight:700}
.filter{margin:16px 0}
.slips{display:flex;flex-direction:column;gap:12px}
.slip{position:relative;display:flex;background:var(--w);border:1px solid var(--kei2);border-radius:4px;overflow:hidden}
.slip.hidden{background:#fdf3ef;border-style:dashed}
.stub{flex:0 0 64px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:12px 4px;background:var(--men);border-right:2px dashed var(--kei2)}
.stub .no{font-size:12px;font-weight:700;writing-mode:vertical-rl;letter-spacing:.06em}
.stub .dt{font-size:12px;color:var(--hai)}
.face{flex:1;min-width:0;padding:12px 14px 14px}
.pair{font-size:14px;color:var(--hai);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pair b{color:var(--ji)}
.if{font-size:12px;color:var(--shu);font-weight:700;margin-top:6px;letter-spacing:.08em}
.what{font-size:20px;font-weight:700;line-height:1.5;margin-top:4px;word-break:break-word}
.slip.done .what{padding-right:64px}
.tag{display:inline-block;font-size:12px;padding:1px 6px;border-radius:4px;margin-left:4px}
.tag.me{background:var(--fuku);color:var(--ji)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acts button{background:var(--w);border:1px solid var(--kei2);border-radius:4px;padding:6px 10px;font-size:14px;cursor:pointer}
.acts button.go{background:var(--shu);border-color:var(--shu);color:#fff;font-weight:700}
.acts button.del{color:var(--chui);border-color:var(--kei)}
.seal{position:absolute;top:10px;right:10px;width:72px;height:72px;border:3px solid var(--shu);border-radius:50%;color:var(--shu);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-14deg);background:rgba(255,255,255,.7);pointer-events:none}
.seal span{font-size:12px;font-weight:900;line-height:1.1;border-bottom:1px solid var(--shu);padding-bottom:2px}
.seal small{font-size:11px;font-weight:700;margin-top:2px}
.slip.done .what{color:var(--hai)}
.form{background:var(--w);border:2px solid var(--ji);border-radius:4px;padding:16px}
.form h2{font-size:20px;font-weight:900}
.form label{display:block;font-size:14px;color:var(--hai);margin:14px 0 4px;font-weight:700}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--kei2);border-radius:4px;padding:10px;font-size:16px;background:var(--w)}
.form textarea{min-height:76px;resize:vertical}
.form .row{display:flex;gap:8px;margin-top:16px}
.form .row .btn{flex:1}
.note{font-size:13px;color:var(--hai);margin-top:16px;border-left:3px solid var(--fuku);padding-left:8px;line-height:1.6;background:var(--bg)}
.form .note{margin-top:8px;border-color:var(--shu)}
.err{color:var(--chui);font-size:14px;margin-top:8px}
.msg{padding:32px 16px;color:var(--hai)}
.empty{padding:32px 0;color:var(--hai);text-align:center;font-size:14px;background:var(--bg)}
.gate{padding:32px 16px 40px}
.gate h1{font-size:40px;font-weight:900;line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.gate p{color:var(--hai);margin-bottom:24px;background:var(--bg)}
.gate .slip{margin-bottom:12px}
.gate .slips{margin-bottom:28px}
.line{background:#06c755}
.foot{max-width:560px;margin:24px auto 0;padding:24px 16px 40px;font-size:13px;color:var(--hai);border-top:1px solid var(--kei)}
.foot button{background:none;border:0;color:var(--hai);text-decoration:underline;cursor:pointer;font-size:13px}
@media (max-width:360px){.hero h1{font-size:40px}.hero .count b{font-size:32px}}