/* ステラオーブの紹介ページ(/stella, /stella/characters, /stella/howto, /stella/guide と /en/ 版)の見た目。
   tools/stella-pages/build.js が作る HTML が使う。サイト共通の site-theme.css の上に重ねる(アクセントは --c-stella のゴールド)。
   変えたら build.js の CSS_V を上げる。 */

body.site-v2 .sp-page.doc-page { max-width: 980px; }

/* ---- パンくず・言語リンク ---- */
.sp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; font-size: .82rem; }
.sp-crumb ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; color: var(--c-text-mute); }
.sp-crumb li + li::before { content: "›"; margin: 0 8px; color: var(--c-text-mute); }
.sp-crumb a, .sp-lang { color: var(--c-text-sub); text-underline-offset: 3px; }
body.site-v2 .sp-page .sp-lang { padding: 3px 12px; border: 1px solid var(--c-border-strong); border-radius: 999px; text-decoration: none; }
body.site-v2 .sp-page .sp-lang:hover { border-color: var(--c-stella); }

/* ---- 見出し・近日公開のバッジ・注意書き ---- */
.sp-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 14px;
  border: 1px solid rgba(255, 203, 107, .6); border-radius: 999px; background: rgba(255, 203, 107, .12);
  color: var(--c-stella); font-size: .8rem; font-weight: 700; letter-spacing: .06em; line-height: 1.7;
}
body.site-v2 .sp-page h2 { border-left-color: var(--c-stella); }
body.site-v2 .sp-page h3 { color: #ffe2a6; }
body.site-v2 .sp-page h4 { margin: 0 0 4px; font-size: 1.1rem; color: var(--c-text); line-height: 1.5; }
.sp-disclaimer {
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 203, 107, .5); border-radius: 12px;
  background: rgba(255, 203, 107, .08); color: #ffe2a6; font-size: .92rem; line-height: 1.75;
}
.sp-disclaimer strong { margin-right: .5em; color: var(--c-stella); }
.sp-note { padding: 8px 14px; border-left: 3px solid var(--c-stella); border-radius: 0 10px 10px 0; background: rgba(255, 203, 107, .06); }
.sp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- ページ間のナビ ---- */
.sp-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body.site-v2 .sp-page .sp-subnav a {
  padding: 6px 16px; border: 1px solid var(--c-border-strong); border-radius: 999px; background: var(--c-surface);
  color: var(--c-text-sub); font-size: .9rem; text-decoration: none;
}
body.site-v2 .sp-page .sp-subnav a:hover { border-color: var(--c-stella); color: var(--c-text); }
body.site-v2 .sp-page .sp-subnav a[aria-current="page"] { border-color: var(--c-stella); background: rgba(255, 203, 107, .14); color: #ffe2a6; font-weight: 700; }

/* ---- 属性のタグ ---- */
.sp-orb { vertical-align: -5px; margin-right: 4px; }
.sp-el { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 700; color: var(--c-text); }
.sp-el-fire { color: #ff9a85; } .sp-el-water { color: #7cc7ff; } .sp-el-grass { color: #8fe08a; } .sp-el-light { color: #ffe27a; } .sp-el-dark { color: #c9a6ff; }
.sp-up { color: #8fe08a; font-weight: 700; } .sp-down { color: #ff9a85; }

/* ---- キャラクターのカード ---- */
.sp-chars { display: grid; gap: 14px; margin: 10px 0 8px; }
.sp-char {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px;
  border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); scroll-margin-top: 72px;
}
.sp-art img { display: block; width: 100%; height: auto; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.sp-ph { position: relative; }
.sp-ph img { aspect-ratio: 1; object-fit: cover; opacity: .85; }
.sp-ph span {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 8px; background: rgba(9, 11, 24, .82);
  color: var(--c-text-sub); font-size: .76rem; text-align: center;
}
.sp-info { min-width: 0; }
.sp-ctitle { display: block; margin-top: 2px; font-size: .85rem; font-weight: 500; color: var(--c-text-mute); }
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 8px; font-size: .86rem; color: var(--c-text-sub); }
.sp-rar { color: var(--c-stella); font-weight: 700; }
.sp-info p { margin: 0 0 8px; }
.sp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: .88rem; }
.sp-dl dt { color: #ffe2a6; font-weight: 700; }
.sp-dl dd { margin: 0; color: var(--c-text-sub); }

/* ---- トップの写真の列・図・案内カード ---- */
body.site-v2 .sp-page .sp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 10px 0 18px; padding: 0; list-style: none; }
.sp-strip li { margin: 0; }
.sp-strip a { display: block; text-decoration: none; text-align: center; font-size: .85rem; }
.sp-strip img { display: block; width: 100%; height: auto; margin-bottom: 4px; border-radius: 10px; border: 1px solid var(--c-border); }
.sp-fig { max-width: 520px; margin: 14px 0; }
.sp-fig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--c-border); }
.sp-fig figcaption { margin-top: 6px; font-size: .82rem; color: var(--c-text-mute); }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
body.site-v2 .sp-page a.sp-card {
  display: block; padding: 16px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); text-decoration: none; color: var(--c-text-sub);
}
body.site-v2 .sp-page a.sp-card:hover { border-color: var(--c-stella); }
.sp-card strong { display: block; margin-bottom: 4px; color: #ffe2a6; font-size: 1.02rem; }
.sp-card span { font-size: .88rem; line-height: 1.7; }

/* ---- 遊び方・攻略データ ---- */
.sp-formula { padding: 12px 16px; border: 1px dashed var(--c-border-strong); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--c-text); font-weight: 500; }
.sp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.sp-matrix td, .sp-matrix th { text-align: center; }
body.site-v2 .sp-page .doc-table th[scope="row"] { white-space: normal; }
body.site-v2 .sp-page kbd { padding: 0 6px; border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; border-radius: 4px; background: rgba(255, 255, 255, .1); font-size: .85em; }
.formation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.formation { min-width: 0; margin: 0; padding: 16px 12px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); text-align: center; }
.formation-art { display: flex; align-items: center; justify-content: center; min-height: 117px; margin: 0 0 6px; }
.formation svg { display: block; max-width: 100%; height: auto; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.formation figcaption { font-size: .8rem; line-height: 1.6; color: var(--c-text-sub); }
.formation figcaption strong { display: block; font-size: .95rem; }
.sp-back { margin-top: 32px; }

@media (max-width: 640px) {
  .sp-char { grid-template-columns: minmax(0, 1fr); }
  .sp-art { max-width: 220px; margin: 0 auto; }
  .sp-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-dl dd { margin-bottom: 8px; }
  .sp-badge { margin: 6px 0 0; }
}

.sp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 16px; margin: 14px 0; }
.sp-shots .sp-fig { margin: 0; max-width: none; }

/* ---- タイトルロゴ ---- */
.sp-logo-h1 { margin: 0 0 14px; text-align: center; }
.sp-logo { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.sp-logo-h1 .sp-badge { margin: 0; }

/* ---- 見出しはゲーム(/stella-orbs)と同じ明朝系(英数字 Cinzel・日本語 しっぽり明朝)。本文は禅角ゴシックのまま。2026-10-12 オーナー決定。フォントは build.js の <link> で読み込む ---- */
body.site-v2 .sp-page :is(h1, h2, h3, h4) { font-family: 'Cinzel', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }

/* 用語集(/stella/glossary): 用語ごとのカード + 詳細・活かし方・対策を色分けしたラベル(2026-10-15 オーナー: 区切りがあいまいで同じ色だと見づらい) */
.gl-h2 { margin-top: 44px; padding: 6px 0 8px 12px; border-left: 4px solid var(--c-stella); border-bottom: 1px solid var(--c-border-strong); }
.gl-intro { color: var(--c-text-sub); }
.gl-term { margin: 14px 0; padding: 14px 16px 16px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 12px; scroll-margin-top: 72px; }
body.site-v2 .gl-term h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); font-size: 1.08rem; color: var(--c-text); scroll-margin-top: 72px; }
.gl-dl { display: grid; gap: 10px; margin: 0; }
.gl-dl > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: start; }
.gl-dl dt { margin-top: 2px; padding: 2px 0; border-radius: 999px; border: 1px solid; font-size: .76rem; font-weight: 700; line-height: 1.6; text-align: center; white-space: nowrap; }
.gl-dl dd { margin: 0; color: var(--c-text-sub); font-size: .92rem; line-height: 1.8; }
.gl-mean dt { color: #9fd8ff; background: rgba(143, 211, 255, .12); border-color: rgba(143, 211, 255, .4); }
.gl-use dt { color: #8ee8b0; background: rgba(110, 220, 150, .12); border-color: rgba(110, 220, 150, .4); }
.gl-counter dt { color: #ffab9a; background: rgba(255, 140, 120, .12); border-color: rgba(255, 140, 120, .4); }
@media (max-width: 560px) {
  .gl-term { padding: 12px 13px 14px; }
  .gl-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gl-dl dt { justify-self: start; padding: 1px 12px; }
}