/* =========================================
   Styled Content Template - Auto Typography
   Scope (front-end): #douyu-wrapper .ui-prose  （子孫: ラッパ div）
   Scope (editor):    #douyu-wrapper.ui-prose   （同一要素: iframe body）
   投稿者がビジュアルエディタで入力した「素の要素」を ui-framework
   ルックに自動マッピングする。ui- クラスを持つ要素（ドロップダウンで
   明示適用済み）は対象外とし、上書きしない。
   実値は ui-framework.css の該当クラスから踏襲（新規デザインは作らない）。
   各セレクタは子孫形（フロント）と複合形（エディタ body）を併記する。
   ========================================= */

/* -----------------------------------------
   Headings (h2 > h3 > h4 > h5/h6)
   ----------------------------------------- */
#douyu-wrapper .ui-prose h2:not([class*="ui-"]),
#douyu-wrapper.ui-prose h2:not([class*="ui-"]) {
  font-family: var(--ui-font-family-secondary);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 14px 26px;
  border-left: 6px solid var(--ui-primary);
  background-color: var(--ui-bg-light);
  margin: var(--ui-spacing-xl) 0 var(--ui-spacing-lg) 0;
}

#douyu-wrapper .ui-prose h3:not([class*="ui-"]),
#douyu-wrapper.ui-prose h3:not([class*="ui-"]) {
  font-family: var(--ui-font-family-secondary);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  padding: var(--ui-spacing-sm) 0;
  border-bottom: 2px solid var(--ui-legacy-primary);
  margin: var(--ui-spacing-xl) 0 var(--ui-spacing-md) 0;
}

#douyu-wrapper .ui-prose h4:not([class*="ui-"]),
#douyu-wrapper.ui-prose h4:not([class*="ui-"]) {
  font-family: var(--ui-font-family-secondary);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
  margin: var(--ui-spacing-lg) 0 var(--ui-spacing-sm) 0;
}

#douyu-wrapper .ui-prose h5:not([class*="ui-"]),
#douyu-wrapper .ui-prose h6:not([class*="ui-"]),
#douyu-wrapper.ui-prose h5:not([class*="ui-"]),
#douyu-wrapper.ui-prose h6:not([class*="ui-"]) {
  font-family: var(--ui-font-family-secondary);
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.4;
  margin: var(--ui-spacing-md) 0 var(--ui-spacing-sm) 0;
}

/* -----------------------------------------
   Paragraph — ui-card__body 相当の本文タイポグラフィ
   ----------------------------------------- */
#douyu-wrapper .ui-prose p,
#douyu-wrapper.ui-prose p {
  color: var(--ui-text);
  line-height: 1.8;
  margin-bottom: var(--ui-spacing-lg);
}

#douyu-wrapper .ui-prose p:last-child,
#douyu-wrapper.ui-prose p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------
   Unordered list — ui-list--diamond 相当（◆ マーカー）
   ----------------------------------------- */
#douyu-wrapper .ui-prose ul:not([class*="ui-"]),
#douyu-wrapper.ui-prose ul:not([class*="ui-"]) {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--ui-spacing-lg);
}

#douyu-wrapper .ui-prose ul:not([class*="ui-"]) > li,
#douyu-wrapper.ui-prose ul:not([class*="ui-"]) > li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

#douyu-wrapper .ui-prose ul:not([class*="ui-"]) > li::before,
#douyu-wrapper.ui-prose ul:not([class*="ui-"]) > li::before {
  content: "\25C6"; /* ◆ */
  color: var(--ui-primary);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.8em;
  line-height: 1.6;
}

/* -----------------------------------------
   Ordered list — 整形（連番）
   ----------------------------------------- */
#douyu-wrapper .ui-prose ol:not([class*="ui-"]),
#douyu-wrapper.ui-prose ol:not([class*="ui-"]) {
  padding-left: 1.5rem;
  margin-bottom: var(--ui-spacing-lg);
  line-height: 1.8;
}

#douyu-wrapper .ui-prose ol:not([class*="ui-"]) > li,
#douyu-wrapper.ui-prose ol:not([class*="ui-"]) > li {
  margin-bottom: 0.5em;
}

/* -----------------------------------------
   Blockquote — 淡い強調（ui-card--highlight 系）
   ----------------------------------------- */
#douyu-wrapper .ui-prose blockquote:not([class*="ui-"]),
#douyu-wrapper.ui-prose blockquote:not([class*="ui-"]) {
  background-color: #e6f0f5;
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-spacing-md) var(--ui-spacing-lg);
  margin: var(--ui-spacing-lg) 0;
  color: var(--ui-text);
  line-height: 1.8;
}

/* -----------------------------------------
   Horizontal rule — ui-divider 相当
   ----------------------------------------- */
#douyu-wrapper .ui-prose hr:not([class*="ui-"]),
#douyu-wrapper.ui-prose hr:not([class*="ui-"]) {
  margin: var(--ui-spacing-xl) 0;
  border: none;
  border-top: 1px solid #ccc;
  clear: both;
}

/* -----------------------------------------
   Table — ui-table-wrap 相当の見た目を素の table に付与
   ----------------------------------------- */
#douyu-wrapper .ui-prose table:not([class*="ui-"]),
#douyu-wrapper.ui-prose table:not([class*="ui-"]) {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.8;
  margin: var(--ui-spacing-lg) 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

#douyu-wrapper .ui-prose table:not([class*="ui-"]) th,
#douyu-wrapper .ui-prose table:not([class*="ui-"]) td,
#douyu-wrapper.ui-prose table:not([class*="ui-"]) th,
#douyu-wrapper.ui-prose table:not([class*="ui-"]) td {
  padding: 12px var(--ui-spacing-md);
  border-bottom: 1px solid var(--ui-border-light);
  vertical-align: middle;
  text-align: left;
  line-height: 1.6;
}

#douyu-wrapper .ui-prose table:not([class*="ui-"]) th,
#douyu-wrapper.ui-prose table:not([class*="ui-"]) th {
  background-color: var(--ui-light);
  font-weight: bold;
  border-bottom: 2px solid var(--ui-border);
}

/* -----------------------------------------
   Inline elements
   ----------------------------------------- */
#douyu-wrapper .ui-prose a:not([class*="ui-"]),
#douyu-wrapper.ui-prose a:not([class*="ui-"]) {
  color: var(--ui-primary);
  text-decoration: underline;
}

#douyu-wrapper .ui-prose a:not([class*="ui-"]):hover,
#douyu-wrapper.ui-prose a:not([class*="ui-"]):hover {
  color: var(--ui-primary-dark);
}

#douyu-wrapper .ui-prose strong,
#douyu-wrapper.ui-prose strong {
  font-weight: bold;
}

#douyu-wrapper .ui-prose img,
#douyu-wrapper.ui-prose img {
  max-width: 100%;
  height: auto;
}