/* /public/css/update.css */

.update-head{
  /* LATEST がヘッダーから離れすぎないように */
  margin: 12px 0 6px;
}

.update-title{
  margin: 0;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.update-sub{
  margin: 8px 0 0;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.7;
}

.update-sub code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border-soft);
  padding: 0.05em 0.4em;
  border-radius: 10px;
}

:root[data-theme="dark"] .update-sub code{
  background: rgba(255,255,255,.06);
}

.update-meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.update-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
}

:root[data-theme="dark"] .update-pill{
  background: rgba(255,255,255,.06);
}

.update-pill i{ font-size: 16px; }

.update-latest{
  /* update-head と近づける */
  margin-top: 0;
  padding: 22px;
}

.update-attr-row{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.update-latest-title{
  font-size: 16px;
  font-weight: 950;
  margin-top: 8px;
}

.update-latest-date{
  font-weight: 800;
  color: var(--text-sub);
  margin-left: 6px;
  font-size: 13px;
}

.update-latest-desc{
  margin: 10px 0 0;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.7;
}

.update-bullets{
  margin: 12px 0 0;
  padding-left: 1.15em;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.7;
}

.update-bullets li{ margin: 6px 0; }

.update-debug{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text-sub);
}

.update-debug summary{
  cursor: pointer;
  font-weight: 900;
}

/* ▼ ここが「LATEST と下の2カードの間をもっと開ける」 */
.update-grid{
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px){
  .update-grid{ grid-template-columns: 1fr; }
}

.update-panel{ padding: 20px; }

.update-empty{
  padding: 10px 2px;
  color: var(--text-sub);
  font-size: 13px;
}

.update-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.update-item{
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.6);
  border-radius: 14px;
  padding: 12px 14px;
}

:root[data-theme="dark"] .update-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.update-item-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.update-item-left{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.update-item-ver{
  font-weight: 950;
  letter-spacing: 0.01em;
}

.update-item-date{
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.update-item-title{
  margin-top: 8px;
  font-weight: 900;
  font-size: 13px;
}

/* badges */
.update-badge{
  font-size: 11px;
  font-weight: 950;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.7);
  color: var(--text-main);
}

:root[data-theme="dark"] .update-badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

.update-badge.is-release{ border-color: rgba(37,99,235,.22); background: rgba(239,246,255,.9); color: #1d4ed8; }
.update-badge.is-bugfix{ border-color: rgba(220,38,38,.22); background: rgba(254,242,242,.95); color: #b91c1c; }
.update-badge.is-fix{ border-color: rgba(245,158,11,.28); background: rgba(255,251,235,.95); color: #b45309; }
.update-badge.is-improve{ border-color: rgba(34,197,94,.25); background: rgba(240,253,244,.95); color: #15803d; }
.update-badge.is-other{ border-color: rgba(148,163,184,.35); background: rgba(248,250,252,.95); color: var(--text-main); }

:root[data-theme="dark"] .update-badge.is-release{ background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-badge.is-bugfix{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-badge.is-fix{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-badge.is-improve{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); color: rgba(255,255,255,.92); }

/* priority */
.update-priority{
  font-size: 11px;
  font-weight: 950;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.7);
}

:root[data-theme="dark"] .update-priority{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.update-priority.is-p1{ border-color: rgba(220,38,38,.25); background: rgba(254,242,242,.95); color: #b91c1c; }
.update-priority.is-p2{ border-color: rgba(245,158,11,.28); background: rgba(255,251,235,.95); color: #b45309; }
.update-priority.is-p3{ border-color: rgba(37,99,235,.22); background: rgba(239,246,255,.9); color: #1d4ed8; }
.update-priority.is-p4,
.update-priority.is-p5,
.update-priority.is-p6,
.update-priority.is-p7,
.update-priority.is-p8,
.update-priority.is-p9{ color: var(--text-main); }

:root[data-theme="dark"] .update-priority.is-p1{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-priority.is-p2{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-priority.is-p3{ background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.22); color: rgba(255,255,255,.92); }

/* categories */
.update-chips{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.update-chip{
  font-size: 11px;
  font-weight: 850;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(248,250,252,.95);
  color: var(--text-main);
}

:root[data-theme="dark"] .update-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

/* Roadmap */
.update-plan-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.update-plan-right{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.update-plan-title{
  font-weight: 950;
  font-size: 13px;
}

.update-plan-meta{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 800;
}

.update-status{
  font-size: 11px;
  font-weight: 950;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.7);
}

:root[data-theme="dark"] .update-status{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.update-status.is-planned{ border-color: rgba(37,99,235,.22); background: rgba(239,246,255,.9); color: #1d4ed8; }
.update-status.is-wip{ border-color: rgba(245,158,11,.35); background: rgba(255,251,235,.95); color: #b45309; }
.update-status.is-done{ border-color: rgba(34,197,94,.30); background: rgba(240,253,244,.95); color: #15803d; }
.update-status.is-idea{ border-color: rgba(124,58,237,.24); background: rgba(245,243,255,.95); color: #6d28d9; }
.update-status.is-considering{ border-color: rgba(148,163,184,.35); background: rgba(248,250,252,.95); color: var(--text-main); }

:root[data-theme="dark"] .update-status.is-planned{ background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-status.is-wip{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-status.is-done{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); color: rgba(255,255,255,.92); }
:root[data-theme="dark"] .update-status.is-idea{ background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.22); color: rgba(255,255,255,.92); }

@media (max-width: 520px){
  .update-title{ font-size: 22px; }
  .update-latest{ padding: 18px 14px; }
  .update-panel{ padding: 16px 12px; }
}