:root{
  --bg:#0b0f1a; --card:#121a2b; --text:#e8eefc; --muted:#a8b3d6; --accent:#7aa2ff;
  --border: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)
    position: relative;
    background: #05070f;
    }
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("./background.png") center / cover no-repeat;
  z-index: -1;
}
.wrap{max-width:980px;margin:0 auto;padding:20px}
h1{margin:8px 0 6px}
.muted{color:var(--muted);margin:0 0 14px}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.tab{
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.tab.is-active{background:rgba(122,162,255,.18); border-color:rgba(122,162,255,.35)}

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}

/* スマホだけ1列に落とす */
@media (max-width: 700px){
  .grid{ grid-template-columns: 1fr; }
}
.card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--card);
  border:1px solid var(--border); border-radius:14px; padding:14px;
  background: rgba(18, 26, 43, 0.72); /* 既存色をrgba化 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
}
.card h2{
  padding-right: 90px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #e8eefc;
}
.card p{margin:0 0 10px;color:#e6e6e6;line-height:1.5}
.links{
  margin-top: auto;
  min-height: 38px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.links a{
  color:var(--accent); text-decoration:none; border:1px solid rgba(122,162,255,.35);
  padding:6px 10px; border-radius:999px;
}
.links a:hover{background:rgba(122,162,255,.12)}
.catch{
  margin: 4px 0 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 1px 1px 0px rgba(235, 235, 235, 0.6);
}

.desc{
  margin: 0 0 10px;
  color: #e6e6e6;
  line-height: 1.55;
}
.card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px 14px;
}

.status-badge{
  position: absolute;
  top: 14px;      /* 12→14 ちょい余白 */
  right: 14px;    /* 12→14 */
  padding: 8px 16px;   /* 4x10 → 8x16 ほぼ2倍感 */
  border-radius: 999px;
  font-size: 16px;     /* 12 → 16（読みやすい） */
  font-weight: 800;    /* 700→800 ちょい強め */
  color: #f3f3f3;
  letter-spacing: .06em;
  line-height: 1;      /* 縦ズレ防止 */
  box-shadow: 0 6px 18px rgba(255,255,255,.1);
  text-shadow:
    0 1px 1px rgba(255,255,255,.35), /* 上ハイライト */
    0 2px 4px rgba(0,0,0,.45);       /* 下シャドウ */
}