/* お仕事クリア — 触れるプロト。決めは docs/work-clear/design.md: 白地・余白、黒の太線（7 割）、紙は薄い黄 #FDF8E1（色はこれ 1 つ） */
:root { --paper:#FFFFFF; --note:#FDF8E1; --ink:#1A1A1A; --sub:#8A8783; --faint:#B5B2AC; --line:rgba(26,26,26,.72); --soft:#E9E7E2; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--paper); color:var(--ink); font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
body { min-height:100dvh; }
#app { max-width:480px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom)); min-height:100dvh; position:relative; }
a, button { color:inherit; font:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; text-decoration:none; }
.brand-hero { font-size:40px; font-weight:800; letter-spacing:.02em; margin:26vh 0 26px; line-height:1.2; }
.brand { font-size:15px; font-weight:700; margin:6px 0 24px; display:block; }
.empty { font-size:16px; color:var(--sub); margin:0 0 28px; line-height:1.9; }
.add { font-size:16px; display:block; margin-top:22px; padding:10px 0; }
.add.fixed { position:fixed; left:0; right:0; bottom:0; padding:16px 22px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--paper) 30%); max-width:480px; margin:0 auto; }
.h { font-size:12px; letter-spacing:.14em; color:var(--sub); margin:18px 0 4px; }
.h.first { margin-top:0; }
.item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; transition:opacity .25s, transform .25s; }
.item.week .t, .item.week .box { opacity:.6; }
.box { width:24px; height:24px; border:1.5px solid var(--ink); border-radius:5px; flex:0 0 24px; margin-top:2px; background:none; }
.txt { flex:1; min-width:0; text-align:left; }
.t { font-size:17px; line-height:1.4; position:relative; display:inline-block; }
.p { font-size:12px; color:var(--sub); margin-top:2px; display:block; }
.side { font-size:12px; color:var(--sub); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; margin-top:5px; padding:2px 0 2px 8px; }
/* 済: 黒の太線、文字は透ける。線 → 0.5 秒留まる → 畳まれる */
.item.done .t::after { content:""; position:absolute; left:-2px; right:-2px; top:38%; height:.42em; background:var(--line); border-radius:2px; transform-origin:left; animation:draw .2s ease-out both; }
.item.done .box { background:var(--ink); }
@keyframes draw { from { transform:scaleX(0);} to { transform:scaleX(1);} }
.item.fold { animation:fold .3s ease-in both; }
@keyframes fold { to { height:0; padding-top:0; padding-bottom:0; opacity:0; margin:0; overflow:hidden; } }
.snack { position:fixed; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); max-width:448px; margin:0 auto; background:var(--ink); color:#fff; font-size:14px; padding:13px 16px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; z-index:5; animation:up .2s ease-out; }
.snack button { color:#fff; text-decoration:underline; text-underline-offset:3px; }
@keyframes up { from { transform:translateY(12px); opacity:0; } }
.back { font-size:14px; color:var(--sub); display:block; margin:6px 0 20px; }
.q { font-size:21px; font-weight:700; margin:0 0 20px; }
.choice { display:block; width:100%; padding:16px 0; border-top:1px solid var(--soft); }
.choice:last-of-type { border-bottom:1px solid var(--soft); }
.choice .n { font-size:18px; }
.choice .d { font-size:12px; color:var(--sub); margin-top:2px; }
.field { width:100%; font-size:22px; padding:10px 0; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; background:none; margin:6px 0 10px; color:var(--ink); outline:none; }
.field::placeholder { color:var(--faint); }
.hint { font-size:13px; color:var(--sub); margin:0 0 26px; }
.go { font-size:17px; font-weight:700; display:block; margin-top:34px; padding:10px 0; }
.title { font-size:21px; font-weight:700; margin:0; }
.due { font-size:14px; color:var(--sub); margin:2px 0 16px; }
/* 1 回＝1 枚の紙 */
.note { background:var(--note); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.07); padding:22px 20px 26px; margin:4px -8px 0; position:relative; transition:transform .6s ease-in, opacity .6s ease-in, box-shadow .3s; }
.note.peel { transform:rotate(-5deg) translate(30px,-90px); opacity:0; box-shadow:0 24px 40px rgba(0,0,0,.18); }
.note.peel::after { content:""; position:absolute; right:0; bottom:0; border-style:solid; border-width:0 0 70px 70px; border-color:transparent transparent var(--paper) transparent; filter:drop-shadow(-1px -1px 1px rgba(0,0,0,.08)); }
.links { margin-top:22px; font-size:14px; display:flex; gap:18px; flex-wrap:wrap; }
.links button { color:var(--sub); text-decoration:underline; text-underline-offset:3px; }
.edit { margin-top:16px; border-top:1px solid var(--soft); padding-top:14px; }
.edit .row { display:flex; gap:10px; align-items:center; padding:8px 0; font-size:15px; }
.edit .row button { color:var(--sub); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.edit input[type=text] { flex:1; font-size:16px; border:0; border-bottom:1px solid var(--soft); padding:8px 0; outline:none; background:none; color:var(--ink); }
.edit input[type=date] { font-size:16px; border:0; border-bottom:1px solid var(--soft); padding:6px 0; background:none; color:var(--ink); font-family:inherit; }
.edit label { font-size:12px; color:var(--sub); display:block; margin-top:12px; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:var(--paper); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.14); padding:22px 22px calc(26px + env(safe-area-inset-bottom)); font-size:16px; line-height:1.8; z-index:6; animation:up .2s ease-out; }
.sheet .b { display:flex; gap:24px; margin-top:12px; font-weight:700; font-size:16px; }
.sheet .b .quiet { color:var(--sub); font-weight:400; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.18); z-index:5; }
.ask { position:fixed; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); max-width:448px; margin:0 auto; background:var(--paper); border:1px solid var(--soft); box-shadow:0 12px 30px rgba(0,0,0,.10); padding:16px 18px; border-radius:12px; font-size:15px; line-height:1.7; z-index:5; }
.ask .b { display:flex; gap:22px; margin-top:8px; font-weight:700; }
.ask .b .quiet { color:var(--sub); font-weight:400; }
.end { font-size:28px; font-weight:800; margin:26vh 0 6px; }
.end-sub { font-size:14px; color:var(--sub); margin:0 0 40px; }
.end-l { font-size:17px; display:block; margin:0 0 6px; padding:8px 0; }
.blank { min-height:60vh; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(90px + env(safe-area-inset-bottom)); background:var(--ink); color:#fff; font-size:13px; padding:8px 14px; border-radius:20px; z-index:7; }
@media (prefers-reduced-motion: reduce) { .item.done .t::after, .item.fold, .note { animation:none; transition:none; } }