:root { --bg:#f5f5f7; --card:#fff; --ink:#1d1d1f; --mut:#6e6e73; --line:#e3e3e6; --acc:#111; --soft:#eef6ee; --ok:#1a7f37; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
main { max-width:1000px; margin:0 auto; padding:calc(20px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); display:grid; gap:14px; }
header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
h1 { margin:0; font-size:1.3rem; } h1 small { color:var(--mut); font-weight:400; font-size:.8rem; margin-left:6px; }
.nav { display:flex; align-items:center; gap:8px; } .nav strong { min-width:140px; text-align:center; } .nav strong::first-letter, .detail h2::first-letter { text-transform:uppercase; }
button { font:inherit; border:1px solid var(--line); background:var(--card); border-radius:8px; padding:6px 12px; cursor:pointer; }
button:hover { background:#ececee; }
.sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.sum div { background:var(--card); border-radius:10px; padding:12px 14px; } .sum span { display:block; color:var(--mut); font-size:.8rem; } .sum b { font-size:1.3rem; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dow { text-align:center; color:var(--mut); font-size:.75rem; padding:4px 0; }
.day { background:var(--card); border:1px solid transparent; border-radius:8px; min-height:84px; padding:6px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; }
.day.out { background:transparent; cursor:default; } .day.out:hover { background:transparent; }
.day .n { color:var(--mut); font-size:.78rem; }
.day .amt { font-weight:650; font-size:.95rem; } .day .cnt { color:var(--mut); font-size:.72rem; }
.day.has { background:var(--soft); } .day.today { border-color:var(--acc); } .day.sel { outline:2px solid var(--acc); }
.detail, .note { background:var(--card); border-radius:10px; padding:14px; } .detail h2 { margin:0 0 8px; font-size:1rem; }
table { width:100%; border-collapse:collapse; } td { padding:7px 4px; border-top:1px solid var(--line); } td:last-child { text-align:right; white-space:nowrap; }
.tag { font-size:.7rem; background:#fff3cd; border-radius:4px; padding:1px 5px; margin-left:4px; }
.msg { background:#fdecea; color:#a12b1f; padding:10px 14px; border-radius:10px; }
.note { font-size:.85rem; color:var(--mut); } .foot { color:var(--mut); font-size:.78rem; }
@media (max-width:600px) { .day { min-height:62px; padding:4px; } .day .amt { font-size:.75rem; } .day .cnt { display:none; } }

.mut { color:var(--mut); }
button:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
#today { background:var(--acc); color:#fff; border-color:var(--acc); } #today:hover { background:#333; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } button { touch-action:manipulation; }