/*
 * 公式記事（/news, /help）の共通スタイル。
 *
 * DESIGN_GUIDELINE.md の「極限のミニマル × 遊び心」に沿う。記事は読み物なので、
 * アプリ本体のガラス/ポップ表現は持ち込まず、余白と字組みで作る。
 * 本文幅 68ch: 日本語・英語どちらでも 1 行が長くなりすぎない実測値
 * （英語 ~90 文字 / 日本語 ~40 文字前後に収まる）。
 *
 * 3つのテンプレート（article.html / article-list.html）から共有する。
 * 記事本文の HTML は server/modules/articles/markdown.js が生成する要素だけを含む。
 */

:root {
  --red: #FF3B30;
  --red-light: rgba(255, 59, 48, 0.08);
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-400: #A3A3A3;
  --gray-600: #525252;
  --gray-900: #171717;
  --measure: 68ch;

  /* Safe area: Web は 0 のまま。ネイティブだけ html.native-app で env() に差し替える。
     CLAUDE.md「ネイティブ差分の書き方」③ — env(safe-area-inset-*) は iPhone Safari や
     PWA でも非ゼロになりうるので、**値ではなくセレクタで分ける**。ここで直接 env() を
     書くと Web の記事ページにも余白が入る。 */
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
}

/* MOBILE-ONLY: iOS アプリ（app.dreamcore.gg の WebView）でのみ有効化。
   class は article.html / article-list.html の head スクリプトが付ける。
   public/style.css の同名変数と同じ形に揃えてあるので、将来 style.css 側の
   共通化に寄せるときも読み替えずに済む。 */
html.native-app {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans',
    'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', sans-serif;
  background: #fff;
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ─── ヘッダー / フッター（games-index.html と同じ骨格に揃える） ───────── */

.site-header {
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.site-logo { font-size: 20px; font-weight: 700; color: var(--red); letter-spacing: -0.5px; }
.header-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.header-nav a { font-size: 14px; font-weight: 500; color: var(--gray-600); transition: color .15s; }
.header-nav a:hover { color: var(--red); }
.header-nav .header-cta {
  color: #fff;
  background: var(--red);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.header-nav .header-cta:hover { color: #fff; opacity: .9; }

.site-footer {
  border-top: 1px solid var(--gray-200);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  max-width: 1000px;
  margin: 48px auto 0;
}
.site-footer a { color: var(--red); }

/* ─── 言語切替 ──────────────────────────────────────────────────────── */

.lang-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.lang-pill {
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-600);
}
.lang-pill:hover { border-color: var(--red); color: var(--red); }
.lang-pill--active { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
.lang-pill--active:hover { color: #fff; border-color: var(--gray-900); }

/* ─── 一覧ページ ────────────────────────────────────────────────────── */

.main-content { max-width: 1000px; margin: 0 auto; padding: 40px 24px 64px; }
.page-title { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 8px; }
.page-description { font-size: 16px; color: var(--gray-600); max-width: var(--measure); }

.article-list { display: grid; gap: 16px; margin-top: 32px; }
.article-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  transition: border-color .15s, transform .15s;
}
.article-card:hover { border-color: var(--red); transform: translateY(-2px); }
.card-thumb { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; flex: none; }
.card-date { font-size: 12px; color: var(--gray-400); margin-bottom: 6px; }
.card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 6px; }
.card-desc { font-size: 14px; color: var(--gray-600); }

.help-section { margin-top: 40px; }
.help-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.help-item-list { list-style: none; border-top: 1px solid var(--gray-200); }
.help-item-list li { border-bottom: 1px solid var(--gray-200); }
.help-item-list a { display: block; padding: 16px 4px; transition: background .15s; }
.help-item-list a:hover { background: var(--gray-50); }
.help-item-title { display: block; font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.help-item-desc { display: block; font-size: 13px; color: var(--gray-600); }

.empty-state { margin-top: 32px; color: var(--gray-400); }

/* ─── 記事ページ ────────────────────────────────────────────────────── */

/* 記事カラムは誌面幅（920px）。中の散文だけを --measure（68ch）に制限して読みやすさを保つ。
   以前は本文カラム自体を 68ch にして :::steps だけをはみ出させていたが、
   タイトル/リード（68ch中央寄せ）と番号ブロック（920px中央寄せ）で基準が2つになり、
   左端が揃わない・2つの箱に見える、という誌面として致命的な崩れが出た（2026-08-03 指摘）。
   基準は1本にする。 */
.article-wrap { max-width: 920px; margin: 0 auto; padding: 32px 24px 64px; }

/* 散文（見出し・段落・リスト・引用・表・コールアウト）は 68ch を上限にして左揃え。
   :::steps と :::specs はカラム幅いっぱいを使う（2カラム/4カラムの設計物のため）。 */
.article-title,
.article-meta,
.article-body > p,
.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > ul,
.article-body > ol:not(.steps),
.article-body > blockquote,
.article-body > pre,
.article-body > .callout,
.article-body > .table-wrap,
.translation-notice,
.toc { max-width: var(--measure); }
.back-link { display: inline-block; font-size: 13px; color: var(--gray-600); margin-bottom: 24px; }
.back-link:hover { color: var(--red); }

/* タイトルは誌面の見出し相当。極太 + 行間を詰める + 字間を少し詰める、の 3 点で
   「雑誌の見出し」に見える。line-height 1.15 は 2〜3 行の見出しでも塊として読める値
   （1.25 だと行がばらけて、告知ページというより記事一覧の見出しに見える）。 */
.article-title { font-size: 40px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.15; }
.article-meta { font-size: 13px; color: var(--gray-400); margin-top: 12px; }
.article-hero { width: 100%; border-radius: 16px; margin-top: 24px; }

.translation-notice {
  margin-top: 20px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-200);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-600);
}

.toc {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--gray-50);
  border-radius: 12px;
}
.toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}
/* 見出し自体が「1.」のような番号を持つことが多いので、目次側では番号を振らない
   （振ると「1. 1. つくりかたを選ぶ」と二重になる） */
.toc ul { list-style: none; }
.toc li { font-size: 14px; margin: 4px 0; }
.toc a { color: var(--gray-600); }
.toc a:hover { color: var(--red); text-decoration: underline; }

/* 本文: ここから下は markdown.js が生成する要素のスタイル */

.article-body { margin-top: 32px; font-size: 16px; line-height: 1.85; }
.article-body > * + * { margin-top: 1.2em; }
.article-body h2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-top: 2.2em;
  padding-top: .2em;
  /* scroll-margin: 目次アンカーで飛んだとき、見出しが画面上端に貼り付かないように */
  scroll-margin-top: 24px;
}
.article-body h3 { font-size: 18px; font-weight: 700; margin-top: 1.8em; scroll-margin-top: 24px; }
.article-body h4 { font-size: 16px; font-weight: 700; margin-top: 1.6em; scroll-margin-top: 24px; }
.article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { font-weight: 700; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin: .4em 0; }
.article-body li > ul, .article-body li > ol { margin-top: .4em; }
/* 記事内の画像はスマホ画面のスクリーンショット（780px 幅 = 390pt の 2x）。
   本文カラム幅いっぱいに引き伸ばすと、実寸の 2 倍近くまで拡大されて
   ぼやけるうえ、記事の中でスマホ画面だけが巨大に見える。
   論理サイズ（390px）を上限にして中央寄せし、Retina では 2x で表示させる。 */
.article-body img {
  max-width: min(100%, 390px);
  height: auto;
  border-radius: 12px;
  display: block;
  margin-inline: auto;
  border: 1px solid var(--gray-200);
}
.article-body hr { border: none; border-top: 1px solid var(--gray-200); margin: 2.4em 0; }
.article-body blockquote {
  border-left: 3px solid var(--gray-200);
  padding-left: 16px;
  color: var(--gray-600);
}
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: var(--gray-100);
  padding: .15em .4em;
  border-radius: 4px;
}
.article-body pre {
  background: var(--gray-900);
  color: #f5f5f5;
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
}
.article-body pre code { background: none; padding: 0; color: inherit; font-size: 13px; }

/* 表は本文をはみ出させず、表だけ横スクロールさせる */
.article-body .table-wrap { overflow-x: auto; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid var(--gray-200); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--gray-50); font-weight: 600; }

.article-body .callout {
  padding: 14px 18px;
  border-radius: 12px;
  border-left: 3px solid var(--gray-200);
  background: var(--gray-50);
}
.article-body .callout > * + * { margin-top: .8em; }
.article-body .callout--tip { border-left-color: #34C759; background: rgba(52, 199, 89, .07); }
.article-body .callout--warn { border-left-color: var(--red); background: var(--red-light); }
.article-body .callout--note { border-left-color: var(--gray-400); }

/* ─── 誌面レイアウト（markdown.js の :::lead / :::steps / :::specs / ==語==） ───
 *
 * 参考にしたのは「プロが作った機能告知ページ」の誌面。再現している要素は 4 つ:
 *   1. 極太の見出し + 一部の語だけ蛍光ペン（==語==）
 *   2. 見出し直下のグレーのリード文（本文より少し大きい）
 *   3. 番号 + 小見出し + 本文 / 右に画面写真 の 2 カラム（モバイルは縦積み）
 *   4. 記事末尾の 4 カラムのスペック帯（太字の値 + 小さいグレーの説明）
 *
 * 読み物としての本文は 68ch の 1 カラムのまま。誌面ブロックだけがその外へ広がる。
 */

/* マーカー: 背景のベタ塗りではなく「文字の下半分だけ」に色を敷く。
   蛍光ペンで線を引いた紙面の見え方。文字色は変えない（可読性を落とさないため）。
   55% = 欧文の大文字下端あたり。50% にすると文字の中心を切ってうるさく見える。
   透明度 .22 は、白背景でピンクに見えて、かつ本文の黒を濁らせない上限。 */
.article-title mark,
.article-body mark {
  background: linear-gradient(transparent 55%, rgba(255, 59, 48, .22) 55%);
  color: inherit;
  padding: 0 .06em;
}

/* リード文: 本文（16px）より 2px 大きく、色はグレー。
   「タイトルの続き」であって本文ではない、という位置づけを字の大きさと色で示す。 */
.article-body .lead {
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.2px;
  color: var(--gray-600);
}

/* :::steps と :::specs は記事カラム幅いっぱいを使う。
   カラム自体が 920px なので、はみ出し配置（margin-left:50% + translateX）は不要。
   基準を1本にすることで、タイトル・リード・番号ブロックの左端が揃う。 */
.article-body .steps,
.article-body .specs {
  width: 100%;
}

.article-body .steps {
  list-style: none;
  padding-left: 0;
  margin-top: 2.6em;
  display: grid;
  gap: 64px; /* ステップ間はたっぷり空ける。誌面の余白がそのまま高級感になる */
}
.article-body .steps .step {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  /* start 揃え: 画面写真が縦に長いとき、center だと本文が写真の真ん中に
     ぶら下がって上に大きな空白ができる（参考誌面は本文が上端で揃っている）。 */
  align-items: start;
  margin: 0; /* .article-body li の上下マージンを打ち消す */
}
/* 番号: 小さく・太く・字間を広げた赤。見出しより先に目に入るが、
   面積は小さいままにする（大きくすると番号が主役になってしまう）。 */
.article-body .step-num {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 10px;
}
.article-body .step-body h3 {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-top: 0;
}
.article-body .step-body > * + * { margin-top: .7em; }
.article-body .step-body p { color: var(--gray-600); }
/* 図版は本文中の画像（390px 上限・枠線あり・中央寄せ）とは別扱い。
   カラム幅いっぱいに置き、枠線ではなく影で浮かせる = 誌面の「はめ込み画面写真」。 */
.article-body .step-figure img {
  width: 100%;
  max-width: none;
  /* スマホ全画面のスクリーンショットは縦に長い。上限を切らないと1ステップが
     画面1枚ぶんの高さを占め、番号ブロックのリズムが崩れる。 */
  max-height: 460px;
  object-fit: contain;
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

/* スペック帯: 記事の最後に「仕様を一目で」置く。
   上の細い区切り線が、本文とスペックの境目を作る。 */
.article-body .specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 3em;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}
.article-body .spec strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.4px;
}
.article-body .spec span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-600);
}

.related { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--gray-200); }
.related-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px; }
.related ul { list-style: none; }
.related li { margin: 8px 0; }
.related a { font-size: 15px; font-weight: 500; }
.related a:hover { color: var(--red); }

/* ─── モバイル ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; }
  .header-nav { gap: 12px; }
  .main-content { padding: 24px 16px 48px; }
  .article-wrap { padding: 20px 16px 48px; }
  .page-title { font-size: 26px; }
  .article-title { font-size: 30px; letter-spacing: -0.9px; }
  .article-body { font-size: 15px; }
  .article-body h2 { font-size: 21px; }
  .article-card { flex-direction: column; gap: 12px; }
  .card-thumb { width: 100%; }

  /* 誌面ブロックのモバイル版。
     はみ出し（margin-left:50% + translateX）は解除する。狭い画面では
     本文カラム = 画面幅なので、広げる余地がそもそも無い。 */
  .article-body .steps,
  .article-body .specs {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .article-body .lead { font-size: 16.5px; }
  .article-body .steps { gap: 44px; }
  /* 縦積み: テキスト → 画面写真 の順。読んでから見る、という誌面の順番を保つ */
  .article-body .steps .step { grid-template-columns: 1fr; gap: 20px; }
  .article-body .step-body h3 { font-size: 20px; }
  /* 4 カラムは 1 項目 80px 程度になり値が折り返すので 2 カラムにする */
  .article-body .specs { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
}

/* ─── ネイティブアプリ（iOS WebView）差分 ─────────────────────────────
 *
 * MOBILE-ONLY: すべて html.native-app 配下。Web の記事ページには一切影響しない。
 *
 * WHY 必要か:
 *   /help・/news は navigation.js のドロワーから開かれ、その navigation.js は
 *   mobile ブランチと共有なので **アプリの中でもこのページが開く**。
 *   app-shell の ROUTES に /help が無いためフルナビゲーションで着地し、
 *   WebView はステータスバー（ノッチ／ダイナミックアイランド）の下まで描画する。
 *   何もしないとロゴとナビがノッチに潜る。
 *
 * WHY 上書きで書くか（共通セレクタに直書きしない）:
 *   CLAUDE.md「ネイティブ差分の書き方」①②。まずベース（Web）を決め、
 *   native は後から足すだけにする。こう書いておけば、記事の見た目を調整する人が
 *   ベース側だけ触ってもアプリが壊れない。
 *
 * WHY ファイル末尾か:
 *   上の `@media (max-width: 640px)` がヘッダーの padding を 12px に上書きするため。
 *   同じ詳細度なら後勝ちなので、末尾に置くことで両ブレークポイントに効く。
 *   （メディアクエリ内にもう1組コピーする手もあるが、値が2箇所に散って腐る）
 *
 * 左右の inset は横向き（ノッチが横に来る）用。縦持ちでは 0 なので実害なく、
 * 入れておかないと横向きでロゴが丸みに食われる。
 */
html.native-app .site-header {
  padding-top: calc(16px + var(--safe-top));
  padding-left: calc(24px + var(--safe-left));
  padding-right: calc(24px + var(--safe-right));
}
html.native-app .main-content,
html.native-app .article-wrap {
  padding-left: calc(24px + var(--safe-left));
  padding-right: calc(24px + var(--safe-right));
}
/* フッターは最下部まで届くので、ホームインジケータぶんだけ底上げする */
html.native-app .site-footer {
  padding-bottom: calc(24px + var(--safe-bottom));
}

@media (max-width: 640px) {
  /* 狭い画面ではベース側の padding が 16px / 12px に下がるので、加算元も合わせる */
  html.native-app .site-header {
    padding-top: calc(12px + var(--safe-top));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
  html.native-app .main-content,
  html.native-app .article-wrap {
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
}