button {
  cursor: pointer;
}

:root{
  --accent:#3b82f6;
  --muted:#f3f4f6;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--muted);
  color:#111;
  min-height:100vh;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
  position:sticky;
  top:0;
  z-index:10;
}
header h1{margin:0;font-size:1rem}
.header-right{display:flex;gap:8px;align-items:center}

#main{padding:10px;max-width:540px;margin:0 auto}
.dayRow{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px;
  background:var(--card);
  margin-bottom:8px;
  border-radius:8px;
}
.date{
  width:62px;
  font-size:0.9rem;
  color:#333;
}
.weekday{font-size:0.8rem;color:#666}
.inputWrap{flex:1;display:flex;gap:8px;align-items:center}
input[type=number]{width:100px;padding:6px;border-radius:6px;border:1px solid #ddd}
select{padding:6px;border-radius:6px;border:1px solid #ddd}

.summary{
  background:#fff6e6;
  padding:8px;
  border-radius:8px;
  margin-top:8px;
  font-weight:600;
}

#legend{
  position:fixed;
  right:10px;
  top:64px;
  background:#fff;
  padding:12px;
  width:320px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border-radius:10px;
}
.hidden{display:none}
#catList{list-style:none;padding:0;margin:0 0 8px 0}
#catList li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f0f0f0}
@media (max-width:420px){
  #legend{width:94% ; left:3%}
  .date{width:56px}
  input[type=number]{width:86px}
}
#legend {
  max-height: 80vh;
  overflow-y: auto;
}