:root{
  --ink:#1c1b19;--muted:#5d5a55;--line:#ddd8cf;--bg:#f6f4ef;--card:#fff;--bar:#1c1b19;
  --keep:#2f7a45;--drop:#b3261e;--accent:#2f4fa8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.6;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
button{font:inherit;cursor:pointer}

.bar{position:sticky;top:0;z-index:10;background:var(--bar);color:#fff;padding:10px 16px 8px}
.bar__row{display:flex;align-items:center;gap:8px}
.bar__title{font-size:18px;margin:0;flex:1}
.bar__save{font-size:13px;color:#c9d6c0;white-space:nowrap}
.prog{display:flex;align-items:center;gap:10px;margin:8px 0}
.prog__track{flex:1;height:8px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden}
.prog__fill{height:100%;width:0;background:#7fc28f;transition:width .2s}
.prog__text{font-size:14px;white-space:nowrap;font-weight:700}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tabs button{min-height:40px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;padding:0 4px}
.tabs button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}

main{max-width:760px;margin:0 auto;padding:12px 16px}
.intro{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:15px}
.intro p{margin:0 0 8px}
.intro p:last-child{margin:0}
.legend{font-size:13px;color:var(--muted);line-height:2}

.sec{margin:18px 0 8px;font-size:17px;font-weight:700;padding-left:10px;border-left:5px solid var(--ink)}
.sec small{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.card.is-keep{border-color:var(--keep);box-shadow:inset 4px 0 0 var(--keep)}
.card.is-drop{border-color:var(--drop);box-shadow:inset 4px 0 0 var(--drop);background:#fdf6f5}
.card__head{display:flex;gap:8px;align-items:baseline}
.card__no{color:var(--muted);font-size:13px;min-width:2.4em}
.card__label{font-weight:700;font-size:17px;flex:1}
.card.is-drop .card__label{text-decoration:line-through;text-decoration-color:var(--drop)}
.card__meta{margin:4px 0 10px 2.9em;font-size:13px;color:var(--muted)}
.card__meta .c{margin-left:4px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice button{min-height:48px;border-radius:10px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:16px;color:var(--ink)}
.choice button[data-d="keep"][aria-pressed="true"]{background:var(--keep);border-color:var(--keep);color:#fff}
.choice button[data-d="drop"][aria-pressed="true"]{background:var(--drop);border-color:var(--drop);color:#fff}
.rename{margin-top:8px}
.rename__toggle{background:none;border:none;color:var(--accent);font-weight:700;font-size:15px;padding:6px 0;min-height:40px}
.rename input{width:100%;min-height:46px;border:2px solid var(--line);border-radius:10px;padding:8px 10px;font-size:16px}
.rename input:focus{outline:none;border-color:var(--accent)}

.c{display:inline-block;color:#fff;border-radius:4px;padding:0 6px;font-size:12px;line-height:1.8;margin-right:2px;vertical-align:middle}
.c.all{background:#5d5a55}.c.green{background:#2f7a45}.c.orange{background:#b4561a}.c.brown{background:#7a5129}.c.blue{background:#2f4fa8}
.c.old{background:#fff;color:#8a2020;border:1px solid #8a2020}

.empty{text-align:center;color:var(--muted);padding:24px 0}
.foot{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:2fr 1fr;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(246,244,239,.97);border-top:1px solid var(--line)}
.btn{min-height:50px;border-radius:12px;border:2px solid var(--ink);background:#fff;font-weight:700;font-size:16px;color:var(--ink)}
.btn--line{background:#06833a;border-color:#06833a;color:#fff}
.err{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));background:var(--drop);color:#fff;border-radius:10px;padding:10px 14px;font-size:15px}
@media (min-width:768px){.bar{padding:12px 24px 10px}.tabs{max-width:520px}.foot{max-width:760px;margin:0 auto}}