/* =============================================
   用語メモ（単発解説ページ）専用スタイル
   article.css の上に重ねて使う。連載記事側には影響させない
   ============================================= */

/* --- 冒頭: 2概念の対比カード --- */
.concept-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.concept-card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top-width: 3px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.concept-card.is-harness { border-top-color: #0d9488; }
.concept-card.is-loop { border-top-color: #7c3aed; }

.concept-kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.concept-card.is-harness .concept-kicker { color: #0f766e; }
.concept-card.is-loop .concept-kicker { color: #6d28d9; }

.concept-headline {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.65;
  margin-bottom: 10px;
}

.concept-desc {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin: 0;
}

/* --- 見分け方の2択 --- */
.criterion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 30px;
}

.criterion-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--color-surface);
}

.criterion-row + .criterion-row { border-top: 1px solid var(--color-border); }

.criterion-q {
  font-size: .95rem;
  line-height: 1.7;
}

.criterion-tag {
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.criterion-tag.is-harness { background: #ccfbf1; color: #0f766e; }
.criterion-tag.is-loop { background: #ede9fe; color: #6d28d9; }

/* --- ハーネスの5段階（階段） --- */
.ladder { margin: 0 0 12px; }

.ladder-step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid #cbd5e1;
  border-radius: var(--radius-sm);
}

.ladder-step.is-mid { border-left-color: #60a5fa; }
.ladder-step.is-strong { border-left-color: #0d9488; }
.ladder-step.is-current { background: var(--color-tag-bg); }

.ladder-no {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-top: 2px;
}

.ladder-title {
  font-weight: 700;
  font-size: .98rem;
  margin-bottom: 6px;
  line-height: 1.6;
}

.ladder-desc {
  font-size: .88rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
}

/* 段1と段2のあいだの断層を強調する帯 */
.ladder-gap {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

/* --- ループの3要素 --- */
.loop-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.loop-part {
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.loop-part-no {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6d28d9;
  margin-bottom: 8px;
}

.loop-part-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
}

.loop-part-desc {
  font-size: .86rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
}

/* --- 補足・自己申告の箱 --- */
.note-box {
  padding: 18px 20px;
  margin-bottom: 28px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.note-box-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 8px;
  color: #92400e;
}

.note-box p {
  font-size: .9rem;
  line-height: 1.85;
  margin: 0;
  color: #78350f;
}

/* 末尾の導線カード（a.article-next）のスタイルは article.css 側に集約済み */

@media (max-width: 640px) {
  .concept-pair { grid-template-columns: 1fr; }
  .loop-parts { grid-template-columns: 1fr; }
  .ladder-step { grid-template-columns: 46px 1fr; gap: 12px; padding: 14px 15px; }
  .criterion-row { grid-template-columns: 1fr; gap: 10px; }
  .criterion-tag { justify-self: start; }
}