/* 作業9（出力画面の整形）で本格的に手を入れるまでの、最低限の可読性確保用 */

body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.7;
  color: #222;
  background: #f7f7f7;
  margin: 0;
  padding: 2rem 1rem;
}

main {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
}

.lead {
  font-size: 1.05rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 480px;
  margin-bottom: 2rem;
}

.about h2 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.about ul {
  margin-top: 0;
}

.note {
  font-size: 0.9rem;
  color: #555;
}

footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  font-size: 0.85rem;
}

.inquiry-cta {
  background: #f5f8ff;
  border: 1px solid #d6e0f5;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
}

.inquiry-cta p {
  margin: 0.3rem 0;
}

input[type="url"] {
  padding: 0.6rem;
  font-size: 1rem;
}

button {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

.error {
  color: #c0392b;
  font-weight: bold;
}

/* 「判定できなかった項目」がなぜ並んでいるのかを、リストの前にまとめて1行で伝える */
.error-reason {
  background: #fdf6e3;
  border-left: 4px solid #e0a800;
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem;
}

pre {
  overflow-x: auto;
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 4px;
}

/* 【解説】【対応】の本文。表は本物の<table>に組み直し、それ以外の行は
   改行や箇条書きの見た目をそのまま保つ（white-space: pre-wrap） */
.criteria-body {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 4px;
}

.criteria-text {
  white-space: pre-wrap;
}

.criteria-body .criteria-text + .table-scroll,
.criteria-body .table-scroll + .criteria-text {
  margin-top: 0.8rem;
}

.table-scroll {
  overflow-x: auto;
}

.criteria-body table {
  background: #fff;
  margin: 0;
}

code {
  background: #e4e4e4;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.9em;
}

.criteria-body code {
  background: #e0e0e0;
}

.check-result {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.check-result.pass {
  border-color: #cdeedd;
  background: #fbfffc;
}

.check-title {
  font-weight: bold;
}

.glossary {
  font-size: 0.9rem;
  color: #555;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  margin: 0.4rem 0;
}

.congratulations {
  background: #eafaf1;
  border: 1px solid #cdeedd;
  border-radius: 4px;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #1e7e42;
  text-align: center;
}

/* 指摘は無いが判定できなかった項目が残っているとき。
   祝う場面ではないので、緑にも赤にもしない */
.no-issues {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.4rem 0.8rem;
  text-align: left;
}

.evidence {
  border-radius: 4px;
  padding: 0.5rem;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 360px;
  overflow-y: auto;
  background: #fafafa;
  border: 1px solid #e3e3e3;
}

/* 【現在の状態】は1ブロックにまとめ、行ごとに良し悪しの色を付ける */
.evidence-line {
  display: block;
  padding: 0.3rem 0.6rem;
  margin: 0.15rem 0;
  border-left: 4px solid transparent;
  border-radius: 3px;
}

.evidence-line-note {
  display: block;
  margin: 0 0 0.3rem 1.2rem;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 0.85rem;
  white-space: normal;
  color: #6b5a1f;
}

.evidence-omitted {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 0.8rem;
  color: #777;
}

.evidence-hidden {
  color: #666;
  font-size: 0.85rem;
}

.evidence-good {
  background: #eafaf1;
  border-left-color: #2ecc71;
  color: #1e7e42;
}

.evidence-warn {
  background: #fff8e1;
  border-left-color: #f1c40f;
  color: #8a6d1a;
}

.evidence-bad {
  background: #fdecea;
  border-left-color: #e74c3c;
  color: #a83226;
}

/* 良いとも悪いとも言えない判断材料（例: 電話番号・住所の記載が無い）。灰色で中立に見せる */
.evidence-info {
  background: #f2f2f2;
  border-left-color: #b5b5b5;
  color: #555;
}

.fatal-banner {
  background: #c0392b;
  color: #fff;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  margin-bottom: 0.6rem;
}

.severity,
.evidence-level {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: bold;
  vertical-align: middle;
}

.severity {
  color: #fff;
}

.severity-critical {
  background: #e74c3c;
}

.severity-recommended {
  background: #e67e22;
}

.severity-check {
  background: #3498db;
}

.severity-info {
  background: #95a5a6;
}

.evidence-level {
  border: 1px solid #999;
  color: #555;
}

/* 指摘の見出しに添える基準の更新日。重要度・根拠レベルより一段控えめにする
   （読む順番を邪魔しないため） */
.criteria-updated {
  display: inline-block;
  font-size: 0.75rem;
  color: #777;
  vertical-align: middle;
}

/* 診断全体がいつ時点の基準によるものかを示す。月次見直しを前提にしているため、
   ここが無いと「いつの基準か分からない診断」になってしまう（docs/SPEC.md 4章） */
.criteria-updated-note {
  margin-top: 2rem;
  padding-top: 0.8rem;
  border-top: 1px solid #ddd;
  font-size: 0.85rem;
  color: #555;
}

.code-example {
  position: relative;
}

.copy-button {
  margin-top: -0.4rem;
}

/* 構造化データの入力フォーム（docs/SPEC.md ⑪）。対応する指摘のカードの中に、枠で囲んで出す */
.sd-form-box {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
}

.sd-form-box-title {
  margin: 0 0 0.5rem;
  font-weight: bold;
}

.sd-notice {
  padding: 0.6rem 0.8rem;
  background: #eef5ff;
  border-radius: 4px;
  font-size: 0.9rem;
}

.sd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.sd-toolbar select {
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
}

.sd-clear {
  margin-left: auto;
  background: #fff;
  color: #555;
  border: 1px solid #bbb;
}

.sd-field {
  margin-bottom: 1.1rem;
}

.sd-field label,
.sd-field legend {
  display: block;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.sd-field input[type="text"],
.sd-field input[type="url"],
.sd-field input[type="tel"],
.sd-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.4rem;
}

.sd-badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: normal;
  border-radius: 3px;
  background: #eee;
  color: #555;
}

.sd-badge-required {
  background: #fde2e2;
  color: #b00020;
}

.sd-badge-page {
  background: #e3f4e8;
  color: #1b6b35;
}

.sd-help,
.sd-example {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #666;
}

.sd-warning,
.sd-missing {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: #8a5a00;
}

/* 下のルールで display を指定している要素にも、hidden 属性を効かせる */
.sd-warning[hidden],
.sd-missing[hidden],
.sd-badge[hidden] {
  display: none;
}

.sd-hours {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
}

.sd-hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ddd;
}

.sd-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
}

.sd-field .sd-day,
.sd-field .sd-time {
  display: inline;
  font-weight: normal;
}

.sd-hours-row .sd-warning {
  flex-basis: 100%;
}

.sd-hours-add,
.sd-hours-remove {
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  font-size: 0.85rem;
}

.sd-hours-add {
  margin-top: 0.5rem;
}

/* パンくずの入力（1行＝番号・名前・URL・削除） */
.sd-crumb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed #ddd;
}

.sd-crumb-row input {
  flex: 1 1 12rem;
  font-size: 1rem;
  padding: 0.4rem;
  box-sizing: border-box;
}

.sd-crumb-number {
  min-width: 1.5rem;
  font-weight: bold;
  color: #555;
}

.sd-crumb-current {
  flex: 1 1 12rem;
  font-size: 0.85rem;
  color: #666;
}

.sd-crumb-row .sd-warning {
  flex-basis: 100%;
}

/* 質問と回答の入力（1組＝質問・回答・削除） */
.sd-faq {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
}

.sd-faq-row {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ddd;
}

.sd-field .sd-faq-label {
  font-weight: normal;
  margin-bottom: 0.4rem;
}

.sd-faq-label input,
.sd-faq-label textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.4rem;
}

/* 「できていること」は件数と項目名だけを見せ、詳細は折りたたむ（本題の改善点を埋もれさせないため） */
.pass-summary {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #ddd;
}

.pass-names {
  margin: 0.3rem 0;
  color: #333;
}

.pass-details summary {
  cursor: pointer;
  color: #0b57a4;
  margin: 0.5rem 0;
}

/* 「確認しておくとよいこと」（参考の情報がある合格項目）。最初から開いて見せる */
.notice-section {
  margin: 1.5rem 0;
}

.notice-lead {
  font-size: 0.9rem;
  color: #666;
}

.check-result.notice {
  border-color: #f5e3a3;
  background: #fffdf5;
}

.fatal-section {
  margin-bottom: 1.5rem;
}