:root{
  --blue:#0c5abf;--blue-weak:#eaf2ff;
  --green:#15996b;--green-weak:#e9f7f1;
  --orange:#ffcc99;--orange-weak:#fff7ec;
  --bg:#f4f8fc;--text:#1f2937;--muted:#6b7280;
  --radius:16px;--shadow:0 3px 8px rgba(12,90,191,.2),0 -1px 4px rgba(12,90,191,.1);
  --bottom-nav-h:64px;--inner-inset:clamp(2px,1vw,8px);--card-gutter:16px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text);background:var(--bg);
  -webkit-tap-highlight-color:transparent;
}
.wrap{ max-width:1100px; margin:0 auto; padding:24px 24px 84px; }

/* header */
header.site{padding-top:10px; margin-bottom: 20px; text-align:left}
header.site h1{margin:0;font-size:1.6em;font-weight:600;color:#ff6600;line-height:1.1}
.update-info{margin-top:4px;font-size:.9em;color:var(--muted);line-height:1.2}

/* card 共通 */
.card-group{
  background:#fff;border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);margin-top:10px;
  width:calc(100% - var(--card-gutter)*2);margin-left:auto;margin-right:auto;
}
.card-group.pink{background:#ffe9ef;border-top:4px solid #d63b75;box-shadow:0 3px 8px rgba(214,59,117,.25)}
.card-group.pink h2{margin:0 0 8px;font-size:1.2rem;font-weight:600;color:#d63b75}
.card-group.blue{border-top:4px solid var(--blue)}
.card-group.blue h2{margin:0 0 10px;font-size:1.2rem;color:var(--blue)}
.card-group.green.inner{
  background:var(--green-weak);border:2px solid var(--green);border-radius:12px;padding:16px;margin-top:18px;
  width:calc(100% - var(--inner-inset)*2);margin-inline:auto;box-shadow:none;
}
.card-group.green.inner h3{
  margin:0 0 10px;font-size:1rem;font-weight:600;color:var(--green);
  border-left:4px solid var(--green);padding-left:8px;
}

/* sub-links 共通 */
.sub-links{display:grid;gap:8px 10px;margin-top:4px}
.sub-links a{
  display:inline-block;text-align:center;text-decoration:none;
  padding:12px 10px;border-radius:12px;font-size:.95rem;font-weight:500;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;
  word-break:keep-all;overflow-wrap:break-word;
}
.sub-links a:focus-visible{outline:2px solid rgba(0,0,0,.3);outline-offset:3px;border-radius:12px}
.sub-links a:hover{transform:translateY(-2px)}
.sub-links a:active{transform:translateY(0)}

/* 青リンク（常に2列） */
.card-group.blue .sub-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-group.blue .sub-links a{background:var(--blue-weak);color:var(--text)}
.card-group.blue .sub-links a:hover,.card-group.blue .sub-links a:focus-visible{
  background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(12,90,191,.15);
}

/* 緑リンク（内枠・常に2列） */
.card-group.green.inner .sub-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-group.green.inner .sub-links a{background:#fff;border:1px solid var(--green);color:var(--green)}
.card-group.green.inner .sub-links a:hover,.card-group.green.inner .sub-links a:focus-visible{
  background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(21,153,107,.15);
}

/* オレンジ（循環表・1列） */
.card-group.orange{background:var(--orange-weak);border-top:4px solid var(--orange);box-shadow:0 3px 8px rgba(255,156,66,.2);margin-top:12px}
.card-group.orange .sub-links{grid-template-columns:1fr;justify-items:center}
.card-group.orange .sub-links a{
  background:#fff;border:1px solid var(--orange);color:#9a5a00;
  width:calc(100% - var(--card-gutter)*2);max-width:520px;margin-inline:auto;
}
.card-group.orange .sub-links a:hover,.card-group.orange .sub-links a:focus-visible{
  background:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(255,156,66,.25);
}

/* ======= パープル（更新履歴・1列ボタン） ======= */
.card-group.purple{
  background: #f3f0ff;                 /* 薄い紫の背景 */
  border-top: 4px solid #7e5bef;       /* 紫ライン */
  box-shadow: 0 3px 8px rgba(126,91,239,.25);
  margin-top: 12px;
  /* 下に少し大きめの余白を足しておく（調整可） */
  margin-bottom: 24px;
}
.card-group.purple .sub-links{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.card-group.purple .sub-links a{
  background: #fff;
  border: 1px solid #7e5bef;
  color: #4b2bbf;
  text-decoration: none;
  display: block; text-align: center;
  width: calc(100% - var(--card-gutter)*2);
  max-width: 520px;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: .95rem; font-weight: 500;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.card-group.purple .sub-links a:hover,
.card-group.purple .sub-links a:focus-visible{
  background: #7e5bef;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(126,91,239,.28);
}

/* ======= 白地の緑枠（1列タイプ） ======= */
.card-group.green-outline{
  background:#fff;border:2px solid var(--green);
  border-radius:var(--radius);box-shadow:var(--shadow);
  margin-top:12px;padding:16px 20px;
}
.card-group.green-outline .sub-links{
  display:grid;grid-template-columns:1fr;justify-items:center;gap:10px;
}
.card-group.green-outline .sub-links a{
  background:#fff;border:1px solid var(--green);color:var(--green);
  text-decoration:none;display:block;text-align:center;
  width:calc(100% - var(--card-gutter)*2);max-width:520px;
  padding:12px 10px;border-radius:12px;font-size:.95rem;font-weight:500;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;
}
.card-group.green-outline .sub-links a:hover,
.card-group.green-outline .sub-links a:focus-visible{
  background:var(--green);color:#fff;transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(21,153,107,.15);
}

/* ======= 最新バージョンに更新（CTA） ======= */
.upgrade-wrap{ display:flex; justify-content:center; margin:16px 0 8px; }
.upgrade-cta{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:calc(100% - var(--card-gutter)*2); max-width:440px; padding:12px 16px;
  border:0; border-radius:999px; cursor:pointer; touch-action:manipulation;
  color:#fff; font-weight:800; letter-spacing:.02em; font-size:16px;
  background:linear-gradient(135deg,#ff6b6b,#ff3b3b 55%,#ff8a6b);
  box-shadow:inset 0 -2px 8px rgba(0,0,0,.1), 0 10px 28px rgba(255,59,59,.28);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.upgrade-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(255,59,59,.32); }
.upgrade-cta:active{ transform:translateY(0); }
.upgrade-cta .spinner{
  width:1em; height:1em; margin-right:.5em; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  display:none; animation:spin .8s linear infinite;
}
.upgrade-cta .glow{
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,59,59,.35); animation:pulse 2.2s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,59,59,.35) }
  50%{ box-shadow:0 0 0 12px rgba(255,59,59,0) }
}

/* 青カードの「更新履歴」を1列・オレンジ幅に揃える */
.card-group.blue .sub-links.one-col{ grid-template-columns:1fr; justify-items:center; }
.card-group.blue .sub-links.one-col a{
  background:#fff; border:1px solid var(--blue); color:var(--text);
  width:calc(100% - var(--card-gutter)*2); max-width:520px; margin-inline:auto;
}
.card-group.blue .sub-links.one-col a:hover,
.card-group.blue .sub-links.one-col a:focus-visible{
  background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(12,90,191,.15);
}

/* ====== オフライン準備 UI（進捗/トースト） ====== */
.cache-progress{
  position:fixed; left:50%;
  bottom:calc(var(--bottom-nav-h) + 10px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(10px);
  width:min(720px,calc(100% - 24px));
  background:rgba(31,41,55,.92); color:#fff; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.22);
  padding:8px 12px; opacity:0; transition:opacity .2s,transform .2s; z-index:9999; pointer-events:none;
}
.cache-progress.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.cache-progress .inner{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:6px 12px; align-items:center }
.cache-progress .label,.cache-progress .pct{ font-size:.85rem; opacity:.95 }
.cache-progress .track{ grid-column:1/3; height:6px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden }
.cache-progress .bar{ height:100%; width:0%; background:linear-gradient(90deg,#60a5fa,#34d399); border-radius:999px; transition:width .2s ease }
.cache-toast{
  position:fixed; left:50%;
  bottom:calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(16px);
  background:#1f2937; color:#fff; padding:10px 14px; border-radius:999px; font-size:.9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.2); opacity:0; transition:opacity .2s,transform .2s; z-index:10000; pointer-events:none;
  max-width:min(720px,calc(100% - 24px)); text-align:center;
}
.cache-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.cache-toast[data-err="1"]{ background:#b91c1c }

/* motion 配慮 */
@media (prefers-reduced-motion:reduce){
  *{ transition:none!important }
  .upgrade-cta .spinner{ animation:none }
  .upgrade-cta .glow{ animation:none }
}

/* mobile tweak */
@media (max-width:480px){
  :root{ --inner-inset:4px }
  .wrap{ padding:20px }
}

/* ▼▼▼ 修正点：ここから下を追加 ▼▼▼ */
/* フッターメニューの縦幅を微調整 */
.bottom-nav a {
  padding-top: 8px;
  padding-bottom: 8px;
}

#push-perm-btn{
  position: fixed;
  right: 16px;
  /* ボトムメニューと被らない＆iOSのセーフエリア対応 */
  bottom: calc(env(safe-area-inset-bottom) + 80px);
  z-index: 9999;
  padding: 10px 14px;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  background: #2563eb; /* お好みで */
  color: #fff;
  font-size: 14px;
}