/* portal-v2 · /answers/[slug]/ article — Long Document + sticky index
 * スコープ: .theme-portal-v2 のみ。design.md 準拠。
 * 読込順: tokens.css → answers.css → portal/base.css → このファイル
 * (このファイルは answers.css の記事テンプレート規則を上書きする最終レイヤー)
 * 対象記事: why-shopify-apps-keep-growing / add-app-vs-unify-platform /
 *           shopify-hidden-costs / platform-migration-guide
 */

/* ================= breadcrumb / header ================= */
.theme-portal-v2 .crumb {
  font-size: var(--text-xs);
  color: var(--portal-muted);
  margin-bottom: var(--space-lg);
}
.theme-portal-v2 .crumb a {
  color: var(--portal-muted);
}
.theme-portal-v2 .crumb a:hover {
  color: var(--portal-primary-deep);
}

/* ================= article shell ================= */
.theme-portal-v2 main.article {
  max-width: 43rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
  font-family: var(--portal-font-body);
  line-height: 1.75;
  counter-reset: sec; /* 本文h2のセクション番号(目次の01〜と連動) */
}

/* ================= 記事カード(紙面化) =================
   モバイル(<768px)はボーダー・角丸・左右余白を外した読み物UI。
   768px以上は白背景+1pxボーダー+8px角丸+内側余白約40pxのカードにする。 */
.theme-portal-v2 .article-main {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .theme-portal-v2 .article-main {
    background: var(--portal-surface);
    border: 1px solid var(--portal-rule);
    border-radius: var(--portal-radius-card);
    padding: var(--space-xl);
  }
}

/* 数字・単位は Space Grotesk に。和文グリフを持たないため、
   欧文・数字だけが自動でこのフォントに描画され(日本語はフォールバックで
   Noto Sans JP のまま)、本文を書き換えずに数値の書体だけを変えられる。 */
.theme-portal-v2 main.article p,
.theme-portal-v2 main.article li,
.theme-portal-v2 main.article dd,
.theme-portal-v2 main.article td,
.theme-portal-v2 main.article th,
.theme-portal-v2 main.article code {
  font-family: var(--portal-font-numeric), var(--portal-font-body);
}

@media (min-width: 1024px) {
  .theme-portal-v2 main.article {
    max-width: 68rem;
  }
  .theme-portal-v2 .article-grid {
    grid-template-columns: minmax(0, 43rem) 18rem;
    gap: var(--space-2xl);
    justify-content: center;
  }
}

/* ================= heading rhythm =================
   記事タイトル: SP 20/28px・PC 28/40px・weight 700(参考記事DNAの寸法を移植) */
.theme-portal-v2 main.article h1 {
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-style: normal;
  color: var(--portal-ink);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}
@media (min-width: 768px) {
  .theme-portal-v2 main.article h1 {
    font-size: 1.75rem;
    line-height: 1.4286;
  }
}

/* ================= アイキャッチ(16:9・白面contain) ================= */
.theme-portal-v2 .eyecatch {
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-lg);
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-portal-v2 .eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ================= メタ情報行(更新日・カテゴリタグ) ================= */
.theme-portal-v2 .meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}
.theme-portal-v2 .meta-date {
  font-family: var(--portal-font-body);
  font-size: 0.875rem;
  line-height: 1.4286;
  color: var(--portal-muted);
}
.theme-portal-v2 .tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3333;
  color: var(--portal-muted);
  background: none;
  border: 1px solid var(--portal-rule-strong);
  border-radius: var(--portal-radius-pill);
  padding: 0.25em 0.85em;
}

.theme-portal-v2 .byline {
  font-family: var(--portal-font-body);
  font-size: var(--text-sm);
  line-height: 1.4286;
  color: var(--portal-muted);
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--portal-rule);
}

/* h2: 太い色付き左罫線は使わず、細い罫線区切り＋文字の階層だけで見せる
   SP 20/32px・PC 24/36px */
.theme-portal-v2 main.article h2 {
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-style: normal;
  color: var(--portal-ink);
  font-size: 1.25rem;
  line-height: 1.6;
  margin: var(--space-2xl) 0 var(--space-lg);
  padding: var(--space-lg) 0 0; /* legacyの帯ブロックpaddingを全辺リセット */
  border-top: 1px solid var(--portal-rule);
  border-radius: 0;
  background: none;
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  .theme-portal-v2 main.article h2 {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
.theme-portal-v2 main.article h2::before {
  content: none;
}

/* セクション番号: TOCと同じ採番対象(id="sec-N"のh2)にだけ、
   目次の 01〜 と一致する小さな緑のキッカー数字を重ねる。
   CTAバンドや装飾h2はidを持たないため対象外。 */
.theme-portal-v2 main.article h2[id^="sec-"] {
  counter-increment: sec;
}
.theme-portal-v2 main.article h2[id^="sec-"]::before {
  content: counter(sec, decimal-leading-zero);
  /* legacyの左バー用プロパティ(absolute/6px幅/緑背景)を明示的に無効化 */
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: block;
  font-family: var(--portal-font-numeric), var(--portal-font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--portal-primary);
  margin-bottom: 0.65em;
}

.theme-portal-v2 main.article h3 {
  display: block;
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-style: normal;
  color: var(--portal-ink);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: var(--space-xl) 0 var(--space-sm);
  scroll-margin-top: 5rem;
}
/* h3: 短い太バーのプレフィックス(参考記事DNA)。
   リスク見出し・FAQ・ステップ見出しは専用バッジを優先 */
.theme-portal-v2 main.article h3:not(.h3-risk):not(:has(.step-num))::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 0.28em;
  border-radius: 3px;
  background: var(--portal-primary);
  margin: 0 0.5em 0 0; /* legacyバー見出しのmargin-topをリセット */
  vertical-align: 0.26em;
}

.theme-portal-v2 main.article p {
  margin: 0 0 var(--space-md);
}
.theme-portal-v2 main.article ul,
.theme-portal-v2 main.article ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}
.theme-portal-v2 main.article li {
  margin: 0.4em 0;
}
/* リストマーカー: 箇条書きは緑ドット */
.theme-portal-v2 main.article ul li::marker {
  color: var(--portal-primary);
}

/* ================= 番号付きリスト: 丸数字バッジ+区切り線 =================
   参考記事DNA(2026-07-24): 各項目に塗り円の番号バッジ、項目間はヘアライン。
   目次(.toc)の ol は独自採番のため対象外。 */
.theme-portal-v2 main.article ol:not(.toc ol) {
  list-style: none;
  padding-left: 0;
  counter-reset: olist;
}
.theme-portal-v2 main.article ol:not(.toc ol) > li {
  counter-increment: olist;
  position: relative;
  padding: 0.75em 0 0.75em 2.3em;
  margin: 0;
}
.theme-portal-v2 main.article ol:not(.toc ol) > li + li {
  border-top: 1px solid var(--portal-rule);
}
.theme-portal-v2 main.article ol:not(.toc ol) > li::before {
  content: counter(olist);
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 1.55em;
  height: 1.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--portal-primary);
  color: var(--portal-surface);
  font-family: var(--portal-font-numeric), var(--portal-font-body);
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1;
}

/* リード句の蛍光マーカー強調(リスト項目内のstrongのみ。段落内は緑文字を維持) */
.theme-portal-v2 main.article li strong {
  color: var(--portal-ink);
  background: var(--portal-marker);
  padding: 0.08em 0.25em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.theme-portal-v2 main.article strong {
  font-weight: 700;
  color: var(--portal-ink);
}
.theme-portal-v2 main.article p strong {
  background: none;
  padding: 0;
  color: var(--portal-primary-deep);
}
.theme-portal-v2 main.article code {
  background: var(--portal-primary-wash);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-size: 0.9em;
}
.theme-portal-v2 :where(main.article) a {
  color: var(--portal-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.theme-portal-v2 :where(main.article) a:hover {
  color: var(--portal-primary);
}

/* ================= 目次(TOC) =================
   デフォルト(インライン目次): 薄グレー背景+1pxボーダー、横32px/縦24px余白。
   サイドバー目次(.toc--side)は下の方で白面の浮遊カードに上書きする。 */
.theme-portal-v2 .toc {
  background: var(--portal-paper);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  padding: 1.5rem 2rem;
  margin: var(--space-xl) 0;
}
/* 目次が長い記事のみ(.toc-scrollがある場合): 約300pxで畳み下部フェード+展開 */
.theme-portal-v2 .toc--inline .toc-scroll {
  position: relative;
  max-height: 18.75rem;
  overflow: hidden;
}
.theme-portal-v2 .toc--inline .toc-scroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--portal-paper));
  pointer-events: none;
}
.theme-portal-v2 .toc--inline.is-expanded .toc-scroll {
  max-height: none;
  overflow: visible;
}
.theme-portal-v2 .toc--inline.is-expanded .toc-scroll::after {
  content: none;
}
.theme-portal-v2 .toc-expand-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 0.5em 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--portal-rule);
  color: var(--portal-primary-deep);
  font-family: var(--portal-font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
}
.theme-portal-v2 .toc-expand-btn:hover {
  color: var(--portal-primary);
}
.theme-portal-v2 .toc-expand-btn:focus-visible {
  outline: 2px solid var(--portal-focus);
  outline-offset: 2px;
}
.theme-portal-v2 .toc-label {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 var(--space-sm);
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--portal-ink);
}
.theme-portal-v2 .toc-label::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: 3px;
  background: var(--portal-primary);
  flex: none;
}
.theme-portal-v2 .toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.theme-portal-v2 .toc li {
  counter-increment: toc;
  margin: 0;
  border-bottom: 1px solid var(--portal-rule);
}
.theme-portal-v2 .toc li:last-child {
  border-bottom: 0;
}
.theme-portal-v2 .toc li a {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  padding: 0.55em 0.2em;
  color: var(--portal-ink);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.6;
  border-radius: 4px;
}
.theme-portal-v2 .toc li a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--portal-font-numeric), var(--portal-font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--portal-primary-deep);
}
.theme-portal-v2 .toc li a:hover {
  color: var(--portal-primary-deep);
  background: var(--portal-primary-wash);
}

/* 現在位置(JSで aria-current を付与するスクロールスパイ用) */
.theme-portal-v2 .toc--side li a[aria-current="true"],
.theme-portal-v2 .toc--side li a.is-current {
  color: var(--portal-primary-deep);
  background: var(--portal-primary-wash);
  font-weight: 700;
}
.theme-portal-v2 .toc--side li a[aria-current="true"]::before,
.theme-portal-v2 .toc--side li a.is-current::before {
  color: var(--portal-primary);
}

.theme-portal-v2 .toc.toc--side {
  background: var(--portal-surface);
  margin: 0;
  padding: var(--space-md);
}
.theme-portal-v2 .toc.toc--side li a {
  font-size: var(--text-xs);
  padding: 0.5em 0.3em;
}

/* ================= サイドバー(sticky: 目次 + CTA) ================= */
.theme-portal-v2 .aside-sticky {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
}
/* sticky要素(浮遊UI)だけ float shadow を許可 */
.theme-portal-v2 .toc--side,
.theme-portal-v2 .side-cta {
  box-shadow: var(--portal-shadow-float);
}

/* サイドCTA: 無料診断はオレンジ(ユーティリティ)限定運用に合わせる */
.theme-portal-v2 .side-cta {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  padding: var(--space-lg);
  text-align: left;
}
.theme-portal-v2 .side-cta-title {
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--portal-ink);
  margin: 0 0 var(--space-xs);
}
.theme-portal-v2 .side-cta-text {
  font-size: var(--text-xs);
  color: var(--portal-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
  text-align: left;
}
.theme-portal-v2 .side-cta .cta-btn {
  display: block;
  text-align: center;
  font-size: var(--text-sm);
  padding: 0.7rem 1rem;
}

/* ================= CTA(共通: cta-band / side-cta) ================= */
.theme-portal-v2 .cta-btn {
  display: inline-block;
  background: var(--portal-utility);
  color: var(--portal-surface);
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: var(--portal-radius-control);
  border: 1px solid transparent;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.theme-portal-v2 .cta-btn:hover {
  background: oklch(52% 0.15 50);
}
.theme-portal-v2 .cta-btn:active {
  transform: translateY(1px);
}

.theme-portal-v2 .cta-band {
  background: var(--portal-paper);
  border: 1px solid var(--portal-rule-strong);
  border-radius: var(--portal-radius-card);
  padding: var(--space-xl);
  margin: var(--space-2xl) 0;
  text-align: center;
  color: var(--portal-ink);
  box-shadow: none;
}
.theme-portal-v2 main.article .cta-band h2,
.theme-portal-v2 .cta-band h2 {
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-style: normal;
  color: var(--portal-ink);
  font-size: 1.25rem;
  line-height: 1.5;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-xs);
}
.theme-portal-v2 main.article .cta-band h2::before {
  content: none;
}
.theme-portal-v2 .cta-band p {
  color: var(--portal-muted);
  margin: 0 0 var(--space-lg);
}

/* ================= callouts =================
   本文カードが白面化するPCでは、内側の入れ子要素は薄グレー(paper)にして
   白の連続(カード内カード)を避ける。 */
.theme-portal-v2 .callout {
  border-radius: var(--portal-radius-card);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  border: 1px solid var(--portal-rule);
  background: var(--portal-paper);
  box-shadow: none;
}
.theme-portal-v2 .callout p:last-child,
.theme-portal-v2 .callout ul:last-child {
  margin-bottom: 0;
}
.theme-portal-v2 .callout .label {
  display: inline-block;
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}
.theme-portal-v2 .callout-summary {
  background: var(--portal-primary-wash);
  border-color: var(--portal-primary);
}
.theme-portal-v2 .callout-summary .label {
  background: var(--portal-primary-deep);
  color: var(--portal-surface);
  padding: 0.3em 0.9em;
  border-radius: var(--portal-radius-pill);
}
/* ================= タブ付きラベルボックス =================
   参考記事DNA(2026-07-24): ラベルを枠上端に密着したタブにする。
   callout-point = 塗りタブ(重要)、callout-note = 淡色タブ(試算・仮定)。 */
.theme-portal-v2 .callout-point {
  position: relative;
  background: var(--portal-surface); /* 参考DNA: 白面+色罫線(枠が区切るため白の連続にはならない) */
  border: 1px solid var(--portal-primary);
  border-left-width: 1px;
  border-radius: 0 var(--portal-radius-card) var(--portal-radius-card)
    var(--portal-radius-card);
  margin-top: calc(var(--space-xl) + 1.8em);
}
.theme-portal-v2 .callout-point .label {
  position: absolute;
  bottom: 100%;
  left: -1px;
  margin: 0;
  max-width: calc(100% + 2px);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--portal-primary);
  color: var(--portal-surface);
  padding: 0.45em 1.1em;
  border-radius: 8px 8px 0 0;
}
.theme-portal-v2 .callout-point .label::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l7 5V4L7 9H3z"/><path d="M16 8.5a5 5 0 0 1 0 7" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>')
    center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l7 5V4L7 9H3z"/><path d="M16 8.5a5 5 0 0 1 0 7" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>')
    center / contain no-repeat;
}
/* callout-note: 試算・仮定・注釈は破線で本文と混同させない見た目にする */
.theme-portal-v2 .callout-note {
  position: relative;
  background: var(--portal-paper);
  border-style: dashed;
  border-color: var(--portal-rule-strong);
  border-radius: 0 var(--portal-radius-card) var(--portal-radius-card)
    var(--portal-radius-card);
  margin-top: calc(var(--space-xl) + 1.7em);
}
.theme-portal-v2 .callout-note .label {
  position: absolute;
  bottom: 100%;
  left: -1px;
  margin: 0;
  max-width: calc(100% + 2px);
  box-sizing: border-box;
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
  border: 1px dashed var(--portal-rule-strong);
  border-bottom: 0;
  padding: 0.4em 1em;
  border-radius: 8px 8px 0 0;
}
.theme-portal-v2 .callout small {
  display: block;
  color: var(--portal-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-sm);
  font-family: var(--portal-font-body);
  line-height: 1.6;
}
/* callout自体がpaperになったため、内側のcodeは白でコントラストを保つ */
.theme-portal-v2 .callout code {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
}

/* ================= tables ================= */
.theme-portal-v2 .tbl-wrap {
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  background: var(--portal-paper);
}
.theme-portal-v2 table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: var(--text-sm);
  line-height: 1.7;
}
.theme-portal-v2 th,
.theme-portal-v2 td {
  border: 0;
  border-bottom: 1px solid var(--portal-rule);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.theme-portal-v2 th + th,
.theme-portal-v2 th + td,
.theme-portal-v2 td + td {
  border-left: 1px solid var(--portal-rule);
}
.theme-portal-v2 thead th {
  background: var(--portal-primary-wash);
  font-family: var(--portal-font-heading);
  font-weight: 700;
  color: var(--portal-ink);
  border-bottom: 1px solid var(--portal-rule-strong);
}
.theme-portal-v2 tbody th {
  /* tbl-wrap自体がpaperになったため、行見出しは白でコントラストを保つ */
  background: var(--portal-surface);
  font-weight: 700;
  font-family: var(--portal-font-heading);
}
.theme-portal-v2 tbody tr:last-child th,
.theme-portal-v2 tbody tr:last-child td {
  border-bottom: 0;
}

/* 比較表の定性値バッジ(◎/△/✕): 色だけに依存しない優劣表現。
   ✕ はあえて中立トーン(オレンジ/危険色を使わない)にして、記号そのものに
   意味を持たせる。[slug].astro が既知の固定文言にのみ挿入する。 */
.theme-portal-v2 .qual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85em;
  margin-inline-end: 0.4em;
  flex: none;
  vertical-align: -0.2em;
}
.theme-portal-v2 .qual-good {
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
}
.theme-portal-v2 .qual-mid {
  background: var(--portal-cat-amber-wash);
  color: var(--portal-cat-amber);
}
.theme-portal-v2 .qual-bad {
  background: var(--portal-rule);
  color: var(--portal-ink);
}

/* ================= checklist ================= */
.theme-portal-v2 .checklist {
  list-style: none;
  padding-left: 0;
}
.theme-portal-v2 .checklist li {
  position: relative;
  padding-left: 1.9em;
  margin: 0.5em 0;
}
.theme-portal-v2 .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--portal-rule-strong);
  border-radius: 5px;
  background: var(--portal-surface);
}

/* ================= FAQ ================= */
.theme-portal-v2 .faq h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--text-base);
  margin: var(--space-lg) 0 var(--space-xs);
}
.theme-portal-v2 main.article .faq h3::before {
  content: "Q";
  margin-inline-end: 0;
  vertical-align: baseline;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  margin-top: 0.05em;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--portal-primary-deep);
  color: var(--portal-surface);
  font-size: 0.85em;
  font-weight: 700;
}
.theme-portal-v2 .faq p {
  color: var(--portal-ink);
}

/* ================= ステップ番号バッジ(platform-migration-guide) ================= */
.theme-portal-v2 .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-inline-end: 0.5em;
  border-radius: 999px;
  background: var(--portal-primary);
  color: var(--portal-surface);
  font-weight: 700;
  font-size: 0.85em;
  vertical-align: middle;
  flex: none;
}

/* ================= リスク見出し(platform-migration-guide) =================
   警告は色だけでなく記号(!)でも示す。オレンジは無料診断・相談限定のため、
   警告バッジは中立トーンにして記号そのもので意味を持たせる。 */
.theme-portal-v2 .h3-risk {
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.theme-portal-v2 .h3-risk::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  flex: none;
  border-radius: 999px;
  background: var(--portal-rule-strong);
  color: var(--portal-ink);
  font-family: var(--portal-font-numeric), var(--portal-font-body);
  font-weight: 700;
  font-size: 0.85em;
}

/* ================= related / owner / notice ================= */
.theme-portal-v2 .related {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  overflow: hidden;
}
.theme-portal-v2 .related li {
  margin: 0;
  padding: 0.8em 1em 0.8em 2.4em;
  position: relative;
}
.theme-portal-v2 .related li + li {
  border-top: 1px solid var(--portal-rule);
}
.theme-portal-v2 .related li::before {
  content: "→";
  position: absolute;
  left: 1em;
  color: var(--portal-primary-deep);
  font-weight: 700;
}
/* platform-migration-guide の styleVariant=plain-related は罫線なし表示を維持 */
.theme-portal-v2 .article--plain-related .related {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.theme-portal-v2 .article--plain-related .related li {
  margin: 0.6em 0;
  padding: 0;
  position: static;
}
.theme-portal-v2 .article--plain-related .related li + li {
  border-top: 0;
}
.theme-portal-v2 .article--plain-related .related li::before {
  content: none;
}

/* 運営情報: 行ごとにヘアラインで区切ったスペック表(参考記事DNAのTabular spec) */
.theme-portal-v2 .owner {
  background: var(--portal-paper);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  padding: 0.35em 1.4em;
  margin: var(--space-xl) 0;
  font-size: var(--text-sm);
}
.theme-portal-v2 .owner dl {
  margin: 0;
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 0;
  align-items: baseline;
}
.theme-portal-v2 .owner dt,
.theme-portal-v2 .owner dd {
  margin: 0;
  padding: 0.75em 0;
  border-top: 1px solid var(--portal-rule);
}
.theme-portal-v2 .owner dt:first-of-type,
.theme-portal-v2 .owner dt:first-of-type + dd {
  border-top: 0;
}
.theme-portal-v2 .owner dt {
  color: var(--portal-muted);
}
.theme-portal-v2 .owner dd {
  color: var(--portal-ink);
}
@media (max-width: 480px) {
  .theme-portal-v2 .owner dl {
    grid-template-columns: 1fr;
  }
  .theme-portal-v2 .owner dt {
    padding-bottom: 0.1em;
  }
  .theme-portal-v2 .owner dt:first-of-type + dd,
  .theme-portal-v2 .owner dd {
    border-top: 0;
    padding-top: 0.1em;
  }
  .theme-portal-v2 .owner dt:first-of-type {
    border-top: 0;
  }
}
.theme-portal-v2 .notice {
  font-size: var(--text-xs);
  color: var(--portal-muted);
  margin-top: var(--space-xl);
}

/* ================= mobile =================
   h1/h2の寸法はSP 20px基準ですでに定義済み(768px未満は共通)のため、
   ここでは640px以下固有の余白調整のみ行う。 */
@media (max-width: 640px) {
  .theme-portal-v2 main.article {
    padding-top: var(--space-lg);
  }
  .theme-portal-v2 .cta-band {
    padding: var(--space-lg);
  }
}