/* =========================================================
   engage.css — エンゲージメント強化用コンポーネント
   （ダークテーマ準拠）
   ========================================================= */

/* 1. 冒頭「この記事でわかること」ボックス */
.engage-summary {
  background: linear-gradient(180deg, #0e1a22 0%, #0c141a 100%);
  border: 1px solid #1f3a47;
  border-left: 4px solid var(--accent-color, #00d1ff);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.engage-summary-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-color, #00d1ff) !important;
}
.engage-summary-text {
  margin: 0;
  color: #d7d7d7 !important;
  line-height: 1.7;
  font-size: 0.98rem;
}
.engage-summary-list {
  margin: 0;
  padding-left: 1.3rem;
}
.engage-summary-list li {
  margin: 6px 0;
  color: #d7d7d7 !important;
  line-height: 1.6;
}

/* 2. 目次 */
.engage-toc {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 12px 18px;
  margin: 0 0 24px;
}
.engage-toc-title {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--accent-color, #00d1ff) !important;
  cursor: pointer;
  list-style: none;
  outline: none;
}
.engage-toc-title::-webkit-details-marker { display: none; }
.engage-toc-title::after {
  content: "▼";
  float: right;
  font-size: 0.8rem;
  opacity: 0.6;
  transition: transform 0.2s;
}
.engage-toc[open] .engage-toc-title::after { transform: rotate(180deg); }
.engage-toc-body { margin-top: 10px; }
.engage-toc-body #TableOfContents ul { margin: 0; padding-left: 1.2rem; }
.engage-toc-body #TableOfContents li { margin: 5px 0; }
.engage-toc-body #TableOfContents a {
  color: #cfcfcf !important;
  text-decoration: none;
  font-size: 0.95rem;
}
.engage-toc-body #TableOfContents a:hover { color: var(--accent-color, #00d1ff) !important; }

/* 3. 本文中インライン関連リンク「あわせて読みたい」 */
.inline-related {
  background: var(--bg-card, #111);
  border: 1px dashed #2c4a57;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 28px 0;
}
.inline-related-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent-color, #00d1ff) !important;
}
.inline-related ul { margin: 0; padding-left: 1.2rem; }
.inline-related li { margin: 6px 0; line-height: 1.5; }
.inline-related li a { color: #d7d7d7 !important; text-decoration: none; }
.inline-related li a:hover { color: var(--accent-color, #00d1ff) !important; text-decoration: underline; }

/* 4. 末尾「次に読む記事」（related.html）の見栄え微調整 */
.related h3 { color: var(--accent-color, #00d1ff) !important; }
.related li a:hover { color: var(--accent-color, #00d1ff) !important; }

/* 5. YouTubeファサード（サムネ→クリックでiframe読込：速度改善） */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center/cover no-repeat;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}
.yt-facade::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 68px; height: 48px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  transition: background 0.2s;
}
.yt-facade::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
}
.yt-facade:hover::after { background: #ff0000; }

/* 6. 読了プログレスバー */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-color, #00d1ff);
  z-index: 2000;
  transition: width 0.1s linear;
}