/* ============================================================
   AIプレイブック 編集デザインコンポーネント
   ─ 静かな紙面・余白多め・装飾を加えない方針 ─
   全プレイ共通で読み込まれるため、独立したユニーククラス名で運用
   ============================================================ */

:root{
  --ed-cream:    #faf7f0;
  --ed-cream-2:  #fbf8f1;
  --ed-cream-bd: #ece4d0;
  --ed-cream-bd2:#e8dec5;
  --ed-cream-ru: #eadfbe;
  --ed-red-bg:   #fdf7f5;
  --ed-red-bd:   #eedad4;
  --ed-result-bd:#eadfb0;
  --ed-result-bg:#fcfcfc;
  --ed-paper:    #fbfaf6;
  --ed-fig-bd:   #e8e8ec;
  --ed-memo-rule:#c9a96e;
  --ed-memo-label:#8a6d3b;
  --ed-status-dot:#3a9c4f;
  --ed-status-txt:#2a7d3c;
  --ed-warn-dot: #c9a04c;
  --ed-warn-txt: #9c7a3a;
}

/* === 章冒頭 1行要約帯 === */
.chapter-lede{
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 8px 0 44px;
  padding: 14px 22px;
  border-left: 2px solid #1d1d1f;
  background: linear-gradient(90deg, var(--ed-cream) 0%, transparent 78%);
  font-size: 15.5px;
  line-height: 1.78;
  color: #515154;
}
.chapter-lede .lede-label{
  flex: 0 0 auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #86868b;
  font-weight: 700;
  padding-top: 2px;
}
.chapter-lede .lede-text{
  flex: 1;
  color: #1d1d1f;
  font-weight: 500;
}

/* === 失敗ログ用 === */
.failure-box{
  margin: 44px 0;
  padding: 24px 30px 22px;
  background: var(--ed-red-bg);
  border: 1px solid var(--ed-red-bd);
  border-top: 3px solid #ff4d3d;
  border-radius: 2px;
  color: #515154;
  font-size: 16px;
  line-height: 1.85;
}
.failure-box .box-label{
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff4d3d;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 3px 8px;
  background: rgba(255,77,61,.08);
  border-radius: 2px;
}
.failure-box h4{
  font-size: 17px !important;
  font-weight: 700;
  margin: 0 0 12px !important;
  color: #1d1d1f;
  letter-spacing: -.01em;
  line-height: 1.5;
}
.failure-box p{ margin: 0 0 12px; color: #515154; }
.failure-box p:last-child{ margin-bottom: 0; }
.failure-box ul{ margin: 8px 0 0; padding-left: 22px; }
.failure-box li{ font-size: 15px; margin: 0 0 6px; color: #515154; }
.failure-box code{ font-size: 13.5px; }

/* === コード/設定 === */
.code-box{
  margin: 36px 0;
}
.code-box .box-caption{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #86868b;
  margin: 0 0 8px;
  padding: 0 6px;
}
.code-box .box-caption .file{ color: #515154; font-weight: 600; }
.code-box .box-caption .sub{ color: #86868b; font-weight: 500; letter-spacing: .08em; }
.code-box pre{
  margin: 0;
  border-radius: 4px;
}

/* === 学び/原則化 === */
.memo-box{
  margin: 44px 0;
  padding: 24px 30px;
  background: var(--ed-cream-2);
  border: 1px solid var(--ed-cream-bd);
  position: relative;
  font-size: 16px;
  line-height: 1.85;
  color: #1d1d1f;
}
.memo-box::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ed-memo-rule);
}
.memo-box .box-label{
  font-family: "Instrument Serif", "Noto Serif JP", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ed-memo-label);
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: .02em;
}
.memo-box .box-label::after{
  content: " ──";
  color: var(--ed-memo-rule);
  font-style: normal;
}
.memo-box p{ margin: 0 0 12px; color: #1d1d1f; }
.memo-box p:last-child{ margin-bottom: 0; }
.memo-box strong{
  background: rgba(201,169,110,.22);
  font-weight: 700;
  padding: 0 2px;
  color: #1d1d1f;
}
.memo-box ul{ margin: 8px 0 0; padding-left: 22px; }
.memo-box li{ margin: 0 0 6px; color: #1d1d1f; }
.memo-box code{ font-size: 13.5px; }

/* === 実行結果 === */
.result-box{
  margin: 40px 0;
  border: 1px solid var(--ed-fig-bd);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ed-result-bg);
}
.result-box .box-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  background: #f5f5f7;
  border-bottom: 1px solid var(--ed-fig-bd);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #86868b;
}
.result-box .box-head .title{ color: #515154; font-weight: 700; }
.result-box .box-head .status{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ed-status-txt);
  font-weight: 700;
}
.result-box .box-head .status::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--ed-status-dot);
  border-radius: 50%;
}
.result-box .box-head .status.warn{ color: var(--ed-warn-txt); }
.result-box .box-head .status.warn::before{ background: var(--ed-warn-dot); }
.result-box .box-body{
  padding: 22px 28px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.85;
  color: #1d1d1f;
}
.result-box .box-body p{
  margin: 0 0 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #1d1d1f;
  font-size: 13.5px !important;
}
.result-box .box-body p:last-child{ margin-bottom: 0; }
.result-box .box-body ul{
  margin: 0;
  padding-left: 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
}
.result-box .box-body li{ margin: 0 0 6px; color: #1d1d1f; font-size: 13.5px; }
.result-box .box-body strong{
  background: transparent;
  color: #1d1d1f;
  font-weight: 700;
  padding: 0;
}

/* === 構造図・フロー図 === */
figure.diagram{
  margin: 52px 0;
  padding: 0;
}
figure.diagram .fig-frame{
  border: 1px solid var(--ed-fig-bd);
  border-radius: 4px;
  padding: 32px 28px;
  background: var(--ed-paper);
}
figure.diagram svg{
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}
figure.diagram figcaption{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #86868b;
  text-align: center;
  margin-top: 16px;
  padding: 0 8px;
  line-height: 1.7;
}
figure.diagram figcaption .fig-num{
  color: #515154;
  font-weight: 700;
  margin-right: 10px;
  letter-spacing: .14em;
}
figure.diagram figcaption .fig-cap{
  text-transform: none;
  letter-spacing: .02em;
  color: #515154;
  font-size: 12.5px;
  font-family: "Inter", "Noto Sans JP", -apple-system, system-ui, sans-serif;
}

/* SVG共通の編集体感（直線・グレー基調・装飾なし） */
figure.diagram svg text{
  font-family: "Inter", "Noto Sans JP", -apple-system, system-ui, sans-serif;
  fill: #1d1d1f;
}
figure.diagram svg .label-mono{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: #86868b;
}
figure.diagram svg .stroke-line{ stroke: #1d1d1f; stroke-width: 1.2; fill: none; }
figure.diagram svg .stroke-thin{ stroke: #515154; stroke-width: 1; fill: none; }
figure.diagram svg .stroke-dash{ stroke: #86868b; stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
figure.diagram svg .fill-soft{ fill: #f5f5f7; }
figure.diagram svg .fill-cream{ fill: #f3ecdb; }
figure.diagram svg .fill-paper{ fill: #fff; }
figure.diagram svg .fill-red{ fill: #ff4d3d; }
figure.diagram svg .fill-ink{ fill: #1d1d1f; }

/* === 末尾サマリーカード（今回変わったこと） === */
.play-summary{
  margin: 80px 0 0;
  padding: 32px 36px 30px;
  background: var(--ed-cream);
  border: 1px solid var(--ed-cream-bd2);
  border-radius: 4px;
}
.play-summary .sum-label{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #86868b;
  font-weight: 700;
  margin: 0 0 10px;
}
.play-summary h3{
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -.014em;
  margin: 0 0 22px !important;
  color: #1d1d1f;
  line-height: 1.4;
}
.play-summary ol{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sum;
}
.play-summary li{
  counter-increment: sum;
  padding: 14px 0 14px 40px;
  position: relative;
  font-size: 16px !important;
  line-height: 1.75;
  border-top: 1px solid var(--ed-cream-ru);
  color: #1d1d1f;
  font-family: "Inter", "Noto Sans JP", -apple-system, system-ui, sans-serif;
}
.play-summary li:first-child{ border-top: 0; padding-top: 4px; }
.play-summary li:last-child{ padding-bottom: 2px; }
.play-summary li::before{
  content: counter(sum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #ff4d3d;
  letter-spacing: .04em;
}
.play-summary li:first-child::before{ top: 6px; }
.play-summary li strong{
  background: transparent !important;
  color: #1d1d1f;
  font-weight: 700;
  padding: 0;
}

@media (max-width: 768px){
  .chapter-lede{
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    margin-bottom: 36px;
  }
  .chapter-lede .lede-label{ padding-top: 0; font-size: 10px; }
  .failure-box, .memo-box{ padding: 20px 20px; }
  .result-box .box-body{ padding: 18px 20px; font-size: 12.5px; }
  .result-box .box-body p, .result-box .box-body ul, .result-box .box-body li{ font-size: 12.5px !important; }
  figure.diagram{ margin: 40px 0; }
  figure.diagram .fig-frame{ padding: 20px 14px; }
  .play-summary{ padding: 24px 22px; }
  .play-summary h3{ font-size: 19px !important; }
  .play-summary li{ font-size: 15px !important; padding-left: 32px; }
}