/* ===== フォント（#pdca-app内だけ） ===== */
#pdca-app{
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,sans-serif;
  color:#0f172a;
}
#pdca-app #monthLabel,
#pdca-app .dnum,
#pdca-app .pct{
  font-family:"Inter",system-ui,sans-serif;
  letter-spacing:-0.02em;
}
#pdca-app .week,
#pdca-app .info,
#pdca-app .add input,
#pdca-app #todoList{
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
}

/* ===== カード ===== */
#pdca-app .pdca-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:14px;
  margin:12px 0;
  background:#fff;
}

/* ===== ヘッダー（月切替のみ） ===== */
#pdca-app .pdca-header{
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;

  display:flex;
  justify-content:flex-start;
  align-items:center;
}
#pdca-app .nav{display:flex;gap:8px;align-items:center}
#pdca-app .nav button{
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  padding:6px 10px;
  cursor:pointer;
}
#pdca-app #monthLabel{font-weight:800}

/* ===== 曜日（背景なし） ===== */
#pdca-app .week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:8px;
}
#pdca-app .week span{
  text-align:center;
  font-size:12px;
  opacity:.6;
  font-weight:600;
}

/* ===== カレンダー ===== */
#pdca-app .calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
#pdca-app .day{
  border:1px solid #e5e7eb;
  border-radius:18px;
  position:relative;
  cursor:pointer;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  overflow:hidden;
  aspect-ratio:1/1;
  min-height:56px;
}
#pdca-app .day.muted{opacity:.4}
#pdca-app .day.selected{
  box-shadow:
    0 6px 14px rgba(0,0,0,.06),
    inset 0 0 0 2px #111;
}
#pdca-app .dnum{
  position:absolute;
  top:10px;left:12px;
  font-size:clamp(10px,2.6vw,12px);
  font-weight:700;
  opacity:.6;
}
#pdca-app .pct{
  position:absolute;
  inset:0;
  margin:auto;
  width:fit-content;
  height:fit-content;
  font-size:clamp(16px,4.8vw,28px);
  font-weight:900;
  white-space:nowrap;
  transform: translateY(-50%);
}
#pdca-app .day.r{background:#fee2e2}
#pdca-app .day.y{background:#fef3c7}
#pdca-app .day.g{background:#dbeafe}

/* ===== 凡例（カレンダー下） ===== */
#pdca-app .calendar-legend{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:14px 0 2px;
  flex-wrap:wrap;
}
#pdca-app .calendar-legend .tag{
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
#pdca-app .calendar-legend .tag.g{ background:#dbeafe; }
#pdca-app .calendar-legend .tag.y{ background:#fef3c7; }
#pdca-app .calendar-legend .tag.r{ background:#fee2e2; }

/* ===== 下部（ToDo） ===== */
#pdca-app .info{
  display:flex;
  gap:24px;
  align-items:flex-end;
  justify-content:flex-start;
  border-bottom:1px dashed #e5e7eb;
  padding-bottom:10px;
}
#pdca-app .info small{opacity:.7;font-weight:600}
#pdca-app #selectedDate,
#pdca-app #score{font-weight:800}

#pdca-app .add{display:flex;gap:8px;margin-top:10px}
#pdca-app .add input{
  flex:1;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:8px;
}
#pdca-app .add button{
  border-radius:12px;
  padding:8px 12px;
  border:1px solid #e5e7eb;
  background:#111;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

#pdca-app ul{list-style:none;padding:0;margin-top:10px}
#pdca-app li{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  gap:10px;
}

/* 左側（番号＋タイトル） */
#pdca-app li .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
#pdca-app li .idx{
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:12px;
  flex:0 0 auto;
}
#pdca-app li .title{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}

/* 右側（進捗＋削除） */
#pdca-app li .right{display:flex;align-items:center;gap:10px}

#pdca-app .seg{display:flex;gap:6px}
#pdca-app .seg button{
  border:none;
  background:#f3f4f6;
  padding:6px 10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}
#pdca-app .seg .on{background:#111;color:#fff}

#pdca-app .del{
  border:1px solid #fecaca;
  background:#fff;
  color:#b91c1c;
  border-radius:10px;
  padding:6px 10px;
  font-weight:800;
  cursor:pointer;
}
#pdca-app .del:hover{background:#fee2e2}

@media (max-width: 520px){
  #pdca-app .calendar{gap:6px}
  #pdca-app .day{border-radius:16px}
  #pdca-app .dnum{top:8px;left:10px}
  #pdca-app .calendar-legend{gap:10px}
}

@media (max-width: 520px){
  #pdca-app .add{
    flex-direction: column;
  }

  #pdca-app .add button{
    width: 100%;
  }

  #pdca-app .pct{
    font-size: 14px;   /* ← 数字＋％ 両方に効く */
    font-weight: 800;
    line-height: 1;    /* 縦のはみ出し防止 */
  }
}

@media (max-width: 520px){
  /* ToDo 1行を縦並びに */
  #pdca-app li{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* ボタン行を下段にまとめる */
  #pdca-app li .seg{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* 削除ボタンも下段に */
  #pdca-app li .del{
    align-self: flex-end;
  }
}

@media (max-width: 520px){
  /* ★凡例を絶対に1行にする（強制上書き） */
  #pdca-app .calendar-legend{
    flex-wrap: nowrap !important;     /* 折り返し禁止 */
    gap: 6px !important;
    justify-content: space-between !important;
    overflow-x: auto;                 /* どうしても入らない端末用：横スクロールで1行維持 */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  /* スクロールバーを目立たせない（対応ブラウザのみ） */
  #pdca-app .calendar-legend::-webkit-scrollbar{
    height: 4px;
  }

  #pdca-app .calendar-legend .tag{
    flex: 0 0 auto;                   /* 縮ませず、1行のまま並べる */
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}