/* ============================================================
   about.html — CCAGIとは
   styles.css の :root トークンのみ使用。追加の色は定義しない。
   ============================================================ */

/* ---------- ヒーロー ---------- */

.about-hero { max-width: 760px; padding-top: 8px; }
.about-hero .hero-lede { display: block; max-width: 640px; margin-top: 20px; font-size: 16px; }
.about-hero-note {
  max-width: 640px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
}

/* ---------- 図版01 限界の6項目 ---------- */

/* 6項目ちょうどで埋まる列数のみ使う（空セルを作らない） */
.limit-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.limit-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--paper-2);
  padding: 14px 16px;
}
.limit-no {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--stamp);
  flex: none;
}
.limit-text { font-size: 14px; line-height: 1.7; }

/* ---------- 図版01 対比図 ---------- */

.diagram { margin-top: 40px; }

.diagram-caption {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.diagram-switch {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.diagram-btn {
  border: none;
  background: none;
  padding: 8px 18px 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.diagram-btn:hover { color: var(--ink); }
.diagram-btn.is-active { color: var(--ink); border-bottom-color: var(--stamp); }

.diagram-stage {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 12px;
}
.diagram-stage svg { display: block; width: 100%; height: auto; }

.diagram-stage .dg { display: none; }
.diagram-stage.is-legacy .dg-legacy { display: block; }
.diagram-stage.is-ccagi .dg-ccagi { display: block; }

.dg-box {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.dg-box-human { fill: var(--paper-deep); stroke: var(--stamp); stroke-width: 1.6; }
.dg-box-goal { fill: var(--room-ship); stroke: var(--room-ship); }
.dg-box-added { fill: var(--paper); stroke: var(--ink-2); stroke-dasharray: 4 3; }
.dg-frame { fill: none; stroke: var(--room-ship); stroke-width: 1; stroke-dasharray: 5 4; }

.dg-node circle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }

.dg-line line { stroke-width: 1.4; }
.dg-line-ink line { stroke: var(--ink-2); }
.dg-line-red line { stroke: var(--stamp); }
.dg-line-green line { stroke: var(--room-ship); }
.dg-line-dash line { stroke: var(--stamp); stroke-dasharray: 4 4; stroke-width: 1; }

.dg-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}
.dg-label-inv { fill: #FFFFFF; }
.dg-sub { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink-2); }
.dg-sub-inv { fill: rgba(255, 255, 255, 0.9); }
.dg-mini { font-family: var(--font-ui); font-size: 12px; fill: var(--ink); }
.dg-mini-t { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }
.dg-mark { font-family: var(--font-ui); font-size: 11px; fill: var(--stamp); font-weight: 600; }

.diagram-alt {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
}

/* ---------- 図版02 3カード ---------- */

.tri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.tri-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--tc, var(--ink));
  padding: 20px 22px 22px;
}
.tri-en {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tc, var(--ink-2));
}
.tri-ja {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 4px 0 12px;
}
.tri-list { list-style: none; border-top: 1px solid var(--hairline); }
.tri-list li {
  font-size: 13.5px;
  padding: 7px 0 7px 16px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.tri-list li:last-child { border-bottom: none; }
.tri-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--tc, var(--ink-2));
}

/* ---------- 図版03 5レイヤー ---------- */

.layer-stack { border-top: 1px solid var(--ink); }

.layer { border-bottom: 1px solid var(--hairline); }

.layer-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
}
.layer-head::-webkit-details-marker { display: none; }
.layer-head:hover { background: var(--paper-2); }

.layer-no {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--stamp);
  flex: none;
}
.layer-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.layer-title-ja {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
}
.layer-head::after {
  content: "＋";
  margin-left: auto;
  font-size: 15px;
  color: var(--ink-2);
  flex: none;
}
.layer[open] .layer-head::after { content: "－"; }

.layer-body {
  padding: 4px 4px 24px 56px;
  max-width: 720px;
}
.layer-body p { font-size: 14px; line-height: 1.9; margin-bottom: 10px; }
.layer-body p:last-child { margin-bottom: 0; }

.mini-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.mini-col {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 14px 16px;
}
.mini-col p { font-size: 13px; margin-bottom: 0; }
.mini-col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-bottom: 6px !important;
}
.mini-col-accent { border-left: 4px solid var(--room-ship); }

/* ---------- 図版04 DAG 本文 ---------- */

.prose-block { max-width: 720px; }
.prose-h {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  border-left: 3px solid var(--stamp);
  padding-left: 12px;
  margin-bottom: 14px;
}
.prose-block p { font-size: 14.5px; line-height: 1.95; margin-bottom: 14px; }
.prose-quote {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.9;
  margin-top: 24px;
}

/* ---------- 図版05 数字 ---------- */

.fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.fig-card {
  background: var(--paper-2);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fig-n {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.fig-unit { font-size: 0.55em; margin-left: 2px; }
.fig-t {
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}
.fig-d { font-size: 13px; line-height: 1.8; color: var(--ink-2); }

/* ---------- 図版06 比較表 ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cmp-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
}
.cmp-table th,
.cmp-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.cmp-table thead th {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
}
.cmp-table tbody th {
  font-weight: 600;
  color: var(--ink-2);
  width: 30%;
  white-space: nowrap;
}
.cmp-th-accent { color: var(--room-ship); }
.cmp-td-accent {
  font-weight: 600;
  background: var(--paper-2);
  border-left: 3px solid var(--room-ship);
}

.stance-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.stance {
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stance-who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.stance-say {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.stance-accent { border-color: var(--room-ship); border-left: 4px solid var(--room-ship); }
.stance-accent .stance-say { color: var(--room-ship); }

/* ---------- 図版07 締めと導線 ---------- */

.closing-line {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  border-left: 4px solid var(--stamp);
  padding-left: 18px;
  margin-bottom: 32px;
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.next-card {
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur) ease, background var(--dur) ease;
}
.next-card:hover { border-color: var(--ink); background: #F2EBDC; }
.next-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--stamp);
}
.next-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.next-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }

/* ---------- 出典 ---------- */

.source-line { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.source-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  word-break: break-all;
}
.source-link:hover { color: var(--stamp); border-bottom-color: var(--stamp); }

/* ---------- レスポンシブ ---------- */

@media (max-width: 760px) {
  .about-hero .hero-lede { display: block; }
  .limit-list { grid-template-columns: repeat(2, 1fr); }
  .layer-body { padding-left: 4px; }
  .layer-title { font-size: 16px; }
  .prose-quote { padding: 14px 16px; font-size: 15px; }
  .closing-line { padding-left: 12px; }
}

@media (max-width: 480px) {
  .limit-list { grid-template-columns: 1fr; }
  .diagram-btn { padding: 8px 10px 9px; font-size: 13px; }
  /* 図を縮めると文字が読めなくなるため、横スクロールに切り替える */
  .diagram-stage { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram-stage svg { min-width: 520px; }
  .fig-card { padding: 18px 18px 20px; }
  .cmp-table th, .cmp-table td { padding: 11px 12px; font-size: 13.5px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .next-card { transition: none; }
}