/* ================================
   NovelMap Article Base
   ================================ */

.article-prose {
  color: #475569;
  line-height: 1.8;
  font-size: 1rem;
}

/* ================================
   段落
   ================================ */

.article-prose p {
  margin-bottom: 1.5rem;
}

/* ================================
   見出し
   ================================ */

.article-prose h3 {
  margin-top: 2rem;        /* mt-8 相当 */
  margin-bottom: 1rem;     /* mb-4 相当 */
  font-weight: 700;        /* font-bold */
  font-size: 1.25rem;      /* text-xl */
  line-height: 1.6;
  color: #0f172a;          /* slate-800 */
}

/* ================================
   強調（意味表現）
   ================================ */

.article-prose strong {
  font-weight: 600;
  color: #0f172a;
}

.article-prose em {
  color: #334155;
}

/* ================================
   通常リスト
   ================================ */

.article-prose ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: disc;
  list-style-position: outside;
}

.article-prose ul li::marker {
  color: #6366f1; /* indigo-500 */
}

.article-prose li {
  margin-bottom: 0.5rem;
}

/* ================================
   チェックリスト（確認項目）
   ================================ */

.article-prose ul.nm-checklist {
  list-style: none;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background-color: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.article-prose ul.nm-checklist > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.article-prose ul.nm-checklist > li:last-child {
  margin-bottom: 0;
}

.article-prose .nm-checklist-item::before {
  content: "✔";
  color: #6366f1;
  font-weight: 700;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* ================================
   意味ブロック
   ================================ */

/* [point] / highlight */
.article-prose .nm-block-highlight {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background-color: rgba(254, 252, 232, 0.6);
  border-left: 4px solid #fde68a;
  border-radius: 0.5rem;
  color: #0f172a;
}

.article-prose .nm-block-highlight strong {
  background-color: rgba(253, 230, 138, 0.6);
  padding: 0 0.25em;
  border-radius: 0.125rem;
}

/* [warning] */
.article-prose .nm-block-warning {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background-color: #fef2f2;
  border-left: 4px solid #f87171;
  border-radius: 0.5rem;
  color: #7f1d1d;
}

/* [note] */
.article-prose .nm-block-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background-color: #f8fafc;
  border-left: 4px solid #cbd5f5;
  border-radius: 0.5rem;
  color: #334155;
}

/* [summary] */
.article-prose .nm-block-summary {
  margin: 2rem 0;
  padding: 1.25rem;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-weight: 600;
  color: #0f172a;
}

/* [assert] 強い断定・主張（枠なし） */
.article-prose p.text-indigo-900 {
  font-weight: 700;
  color: #312e81; /* indigo-900 */
}

/* block 内 最終段落の余白調整 */
.article-prose .nm-block-highlight p:last-child,
.article-prose .nm-block-note p:last-child,
.article-prose .nm-block-warning p:last-child,
.article-prose .nm-block-summary p:last-child {
  margin-bottom: 0;
}

/* ================================
   構造分解ブロック（[structure]）
   ================================ */

.article-prose .nm-block-structure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
}

@media (min-width: 768px) {
  .article-prose .nm-block-structure {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.article-prose .nm-block-structure > div {
  background-color: #eef2ff; /* indigo-50 */
  padding: 0.75rem;
  border-radius: 0.5rem;
}

/* ================================
   判断視点ブロック（[insight]）
   ================================ */

.article-prose .nm-block-insight {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background-color: #eef2ff;      /* indigo-50 */
  border-left: 4px solid #6366f1; /* indigo-500 */
  border-radius: 0.75rem;
}

.article-prose .nm-block-insight ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.article-prose .nm-block-insight li {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #312e81; /* indigo-900 */
}

/* ================================
   区切り線（Markdown hr）
   ================================ */

.article-prose hr {
  border: none;
  border-top: 1px solid #e2e8f0; /* slate-200 */
  margin: 2rem 0;               /* my-8 相当 */
}

/* ================================
   画像
   ================================ */

.article-prose img {
  margin: 2rem 0;
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* =========================
  TOC専用スクロールバー
  ========================= */

/* Firefox */
.toc-scroll {
  padding-right: 0.75rem;   /* 12px：中身の余白 */
  margin-right: -0.75rem;   /* scrollbar だけ外へ */
  scrollbar-width: thin;
  scrollbar-color: rgb(203 213 225) transparent; /* slate-300 */
}

/* Chromium / Safari */
.toc-scroll::-webkit-scrollbar {
  width: 6px;
}

.toc-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.toc-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(203 213 225); /* slate-300 */
  border-radius: 9999px;
}

.toc-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgb(165 180 252); /* indigo-300 */
}

/* =========================
  ARTICLE HERO TEXT OUTLINE
  ========================= */

.hero-title {
  -webkit-text-stroke: 2px rgba(255,255,255,0.95);
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.hero-subtitle {
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.8),
    0 0 2px rgba(255, 255, 255, 0.6);
}

.hero-text-wrap::before {
  content: "";
  position: absolute;
  inset: -0.6rem -1.5rem;
  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.7),
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.7)
  );

  border-radius: 1.25rem;
}