:root{
  --bg:#e5e7ea;
  --paper:#F7FAFB;
  --ink:#2f3f45;
  --muted:#6b848c;
  --line:rgba(80,100,110,.35);
  --shadow:0 10px 40px rgba(60,80,90,.12);
  --radius:18px;
  --brand:#AEBFC4;
  --month-title:#5f7b84;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;
  color:var(--ink);
}

.wrap{
  width:min(780px,92vw);
  margin:28px auto 40px;
}

/* header */
.header{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 20px;
}

.header h1{
  margin:0 0 6px;
  font-size:22px;
  font-weight:900;
  color:var(--month-title);
}

.header p{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

/* panel */
.panel{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* cards */
.card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
}

.card:hover{
  background:#eef5f7;
}

.title{
  font-weight:800;
  font-size:16px;
}

.desc{
  font-size:12.8px;
  color:var(--muted);
  margin-top:3px;
}

.card span{
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--month-title);
}

/* footer */
.footer{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:var(--brand);
  letter-spacing:.1em;
}