/* 脆弱性アラート（sorabun.com/security/alerts/）。legal.css の上に重ねる。
   ページは tools/build_alerts.py が作る。クラス名を変えるときは、あちらの出力も合わせること。 */

.alerts-page { max-width: 880px; word-break: auto-phrase; }
.alerts-page h2, .alerts-page h2:first-of-type { margin-top: 40px; scroll-margin-top: 84px; }
.alerts-page p.lead { font-size: 15px; margin-bottom: 22px; }
.alerts-page p.small { font-size: 12.5px; color: var(--muted); }

/* 件数の帯 */
.alerts-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0 0 10px; }
.alerts-page .stat { background: var(--bg-soft); border: 1px solid #DCE8FB; border-radius: 12px; padding: 14px 10px; text-align: center; }
.alerts-page .stat b { display: block; font-size: 26px; line-height: 1.25; font-weight: 900; color: var(--navy); }
.alerts-page .stat span { font-size: 12.5px; color: var(--muted); }
.alerts-page .stat.crit b { color: #C62828; }
.alerts-page .stat.high b { color: #B45309; }
.alerts-page .stat.nofix b { color: #6A1B9A; }

/* 1件ずつのカード */
.alerts-page ul.alerts { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 14px; }
.alerts-page li.alert {
	--sev: #B45309;
	margin: 0;
	background: #fff; border: 1px solid #E3ECFB; border-left: 6px solid var(--sev);
	border-radius: 12px; padding: 16px 18px;
}
.alerts-page li.alert.crit { --sev: #C62828; }
.alerts-page li.alert.mid { --sev: #8A6D00; }
.alerts-page li.alert.low { --sev: #546E7A; }
.alerts-page .alert-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.alerts-page .badge {
	display: inline-block; background: var(--sev); color: #fff;
	font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 2px 11px;
}
.alerts-page .alert h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 8px 0 2px; overflow-wrap: anywhere; }
.alerts-page p.alert-ja { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.alerts-page p.alert-en { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 10px; overflow-wrap: anywhere; }
.alerts-page .alert-meta { margin: 0 0 8px; font-size: 13.5px; display: grid; gap: 4px; }
.alerts-page .alert-meta div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.alerts-page .alert-meta dt { color: var(--muted); min-width: 5.5em; }
.alerts-page .alert-meta dd { margin: 0; overflow-wrap: anywhere; }
.alerts-page .alert .fix { color: #1a7f37; font-weight: 700; }
.alerts-page .alert .nofix { color: #C62828; font-weight: 700; }
.alerts-page p.alert-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; }
.alerts-page .alert-links a { color: var(--blue); padding: 6px 0; font-size: 13px; }
.alerts-page .alert-links .cve { color: var(--muted); font-weight: 700; }

/* 製品への案内。.doc a の青が、ボタンの白い文字を上書きしてしまうので、ここで戻す */
.alerts-page .btn-primary { color: #fff; }

.alerts-page .cta-box {
	background: var(--bg-soft); border: 2px solid #DCE8FB; border-radius: var(--radius);
	padding: 20px 22px; margin: 4px 0 16px;
}
.alerts-page .cta-box p { margin-bottom: 12px; }
.alerts-page .cta-box .btn-primary { margin: 2px 8px 6px 0; }
.alerts-page .cta-box .sub { color: var(--blue); font-size: 14px; font-weight: 700; }

/* 出典と著作権表示（Wordfence Intelligence の利用条件で、出した記録ぶんを保つ） */
.alerts-page ul.notices { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.alerts-page .notices li { margin: 0; padding: 12px 14px; border: 1px solid #E3ECFB; border-radius: 10px; background: #fff; }
.alerts-page .notices p { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.alerts-page .notices p.n { color: var(--text); font-weight: 700; }
.alerts-page .notices a { color: var(--blue); }

@media (max-width: 480px) {
	.alerts-page p.lead { font-size: 14px; }
	.alerts-page li.alert { padding: 14px 14px; }
	.alerts-page .alert h3 { font-size: 16px; }
	.alerts-page .stat b { font-size: 22px; }
	.alerts-page .cta-box { padding: 16px 16px; }
}

/* 解説（一覧が無い日も、このページが役に立つように）と、内訳 */
.alerts-page .toc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.alerts-page .toc-chips a {
	display: inline-block; padding: 6px 14px; border: 1px solid #DCE8FB; border-radius: 999px;
	background: #fff; color: var(--navy); font-size: 13px; font-weight: 700; text-decoration: none;
}
.alerts-page .toc-chips a:hover { border-color: var(--blue); color: var(--blue); }

.alerts-page dl.glossary { margin: 0 0 22px; border: 1px solid #E3ECFB; border-radius: 12px; background: #fff; overflow: hidden; }
.alerts-page dl.glossary dt { padding: 12px 18px 0; font-weight: 800; color: var(--navy); font-size: 14.5px; }
.alerts-page dl.glossary dd { margin: 0; padding: 2px 18px 12px; font-size: 14px; border-bottom: 1px solid #EEF2F7; }
.alerts-page dl.glossary dd:last-child { border-bottom: 0; }

.alerts-page details.faq { border: 1px solid #E3ECFB; border-radius: 12px; background: #fff; padding: 2px 18px; margin: 0 0 10px; }
.alerts-page details.faq summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--navy); font-size: 14.5px; }
.alerts-page details.faq p { margin: 0 0 14px; font-size: 14px; }

.alerts-page ul.bars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.alerts-page ul.bars li { display: grid; grid-template-columns: minmax(7em, 14em) 1fr 2.5em; gap: 10px; align-items: center; margin: 0; font-size: 13.5px; }
.alerts-page ul.bars .lb { overflow-wrap: anywhere; line-height: 1.5; }
.alerts-page ul.bars .bar { display: block; height: 10px; border-radius: 999px; background: #E9EFFA; overflow: hidden; }
.alerts-page ul.bars .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); border-radius: 999px; }
.alerts-page ul.bars b { text-align: right; color: var(--navy); }

.alerts-page .verdict.info { background: var(--bg-soft); border-color: #DCE8FB; border-radius: var(--radius); padding: 16px 20px; margin: 0 0 26px; border-width: 2px; border-style: solid; }
.alerts-page .verdict.info h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 17px; color: var(--navy); }
.alerts-page .verdict.info p { margin: 0; font-size: 14px; }

@media (max-width: 480px) {
	.alerts-page ul.bars li { grid-template-columns: 1fr 2.5em; }
	.alerts-page ul.bars .bar { grid-column: 1 / -1; grid-row: 2; }
	.alerts-page ul.bars b { grid-row: 1; grid-column: 2; }
	.alerts-page dl.glossary dt, .alerts-page dl.glossary dd { padding-left: 14px; padding-right: 14px; }
	.alerts-page details.faq { padding: 2px 14px; }
}