:root{
  --bg: #fffaf6;
  --surface: #ffffff;
  --text: #333033;
  --subtext: #6b5b6e;
  --accent: #ff7aa2;
  --accent-2: #7ad3ff;
  --gap: 16px;
  --max-width: 980px;
  --container-padding: 20px;
  --font-sans: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-md: 10px;
  --shadow-soft: 0 6px 18px rgba(16,16,20,0.06);
  --shadow-btn: 0 4px 10px rgba(16,16,20,0.08);
  --heading-colors: #ff7aa2, #7ad3ff, #ffd27a, #9bff7a, #b47aff;
}
h2:nth-of-type(5n+1) { color: #ff7aa2; }
h2:nth-of-type(5n+2) { color: #7ad3ff; }
h2:nth-of-type(5n+3) { color: #ffd27a; }
h2:nth-of-type(5n+4) { color: #9bff7a; }
h2:nth-of-type(5n+5) { color: #b47aff; }

h3:nth-of-type(4n+1) { color: #7ad3ff; }
h3:nth-of-type(4n+2) { color: #ff7aa2; }
h3:nth-of-type(4n+3) { color: #ffd27a; }
h3:nth-of-type(4n+4) { color: #9bff7a; }

/* ベース */
* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  background: linear-gradient(180deg,#fffaf6 0%,#fff7f0 40%,#fff 100%);
  color:var(--text);
  padding:32px 16px;
  line-height:1.55;
}

/* コンテナ */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  border-radius: calc(var(--radius-md) + 6px);
  box-shadow: var(--shadow-soft);
  padding: var(--container-padding);
}

/* ヘッダー */
.header{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.site-title{ font-size:1.7rem; margin:0; color:var(--accent); background: rgba(255,111,155,0.06); padding:8px 12px; border-radius:10px; }
.site-desc{ margin:6px 0 0 0; color:var(--subtext); font-size:0.98rem; max-width:68%; }

/* シェアボタン群 */
.share-row{ display:flex; align-items:center; gap:8px; margin:6px 0 12px; flex-wrap:wrap; }
.share-btn{
  appearance:none; border:0; cursor:pointer; padding:8px 10px; border-radius:10px; font-weight:700; color:#fff; font-size:0.9rem;
  box-shadow: var(--shadow-btn);
}
.share-x{ background: linear-gradient(180deg,#7ad3ff,#42b0ff); }
.share-fb{ background: linear-gradient(180deg,#3b5998,#2d4373); }
.share-line{ background: linear-gradient(180deg,#00c300,#00a138); }
.share-mail{ background: linear-gradient(180deg,#cda2ff,#8f5bff); color:#fff; }

/* 完了バッジ */
.complete-badge{
  margin-left:auto; font-weight:800; font-size:1.2rem; color:#ff4d94;
  padding:8px 12px; border-radius:12px; display:inline-block; min-width:160px; text-align:left;
  background: linear-gradient(90deg, rgba(255,111,155,0.06), rgba(122,211,255,0.04));
}
.complete-badge.hidden{ display:none; }

/* チェックリスト */
.task-list{ display:block; margin:16px 0; padding:8px; list-style:none; }
.task-item{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius-md);
  margin-bottom:12px; background:var(--surface); box-shadow:0 2px 6px rgba(10,10,14,0.03);
  border:1px solid rgba(16,16,20,0.03);
}

/* 背景交互 */
.task-list .task-item:nth-child(6n+1){ background-color: rgba(255,122,162,0.06); }
.task-list .task-item:nth-child(6n+2){ background-color: rgba(122,211,255,0.07); }
.task-list .task-item:nth-child(6n+3){ background-color: rgba(255,213,122,0.06); }
.task-list .task-item:nth-child(6n+4){ background-color: rgba(198,247,155,0.06); }
.task-list .task-item:nth-child(6n+5){ background-color: rgba(215,183,255,0.06); }
.task-list .task-item:nth-child(6n+6){ background-color: rgba(255,245,240,0.06); }

/* トグルボタン（表示テキストは .state-text） */
.toggle-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:120px; min-width:92px; height:44px; padding:8px 10px; border-radius:12px;
  background: linear-gradient(180deg,#fff,#fffaf0); border:1px solid rgba(16,16,20,0.06);
  box-shadow: var(--shadow-btn); color:inherit; font-weight:700; cursor:pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  flex-shrink:0; position:relative; text-align:center;
}

/* ボタン内部の表示テキスト */
.toggle-btn .state-text{
  pointer-events:none;
  white-space:nowrap; font-size:0.95rem; font-weight:800; color: #ff6f9b;
}

/* スクリーンリーダー用（可視位置は無効化する） */
.toggle-btn .visually-hidden{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* active */
.toggle-btn.active{
  background: linear-gradient(180deg, rgba(255,122,162,0.12), rgba(255,122,162,0.06));
  border-color: rgba(255,122,162,0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,122,162,0.08);
}
.toggle-btn.active .state-text{ color:#7a2b4b; }

/* all-complete 表示（全て済みのときボタンが祝☆完了を示す） */
.toggle-btn.all-complete{
  background: linear-gradient(180deg, rgba(122,211,255,0.12), rgba(255,122,162,0.04));
  border-color: rgba(122,211,255,0.18);
  transform: none;
  box-shadow: 0 6px 16px rgba(122,211,255,0.06);
}
.toggle-btn.all-complete .state-text{ color:#265a6b; font-weight:900; }

/* hover / focus */
.toggle-btn:focus{ outline:3px solid rgba(122,211,255,0.22); outline-offset:3px; }
.toggle-btn:hover{ transform: translateY(-2px); }

/* タスク名 / 状態ラベル（右の state-label は非表示にする） */
.task-name{ font-size:1.02rem; font-weight:600; color:#3b2b3a; margin-left:6px; }
.state-label{ display:none; }

/* スマホ調整 */
@media (max-width:720px){
  .toggle-btn{ width:96px; min-width:78px; height:42px; }
  .site-desc{ max-width:100%; }
  .complete-badge{ min-width:unset; padding:6px 10px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}