/* platform.shiftyasan.com 共通スタイル。
 *
 * LP (index.html) と docs/ 配下で共有する。元は index.html の <style> に
 * 埋め込んでいたが、ページが増えたので切り出した。
 * 変えると全ページに効く。ダッシュボードは別系統 (dashboard/index.html に内包)。
 */
:root {
--bg: #ffffff; --fg: #1a202c; --muted: #4a5568; --line: #e2e8f0;
--accent: #2b6cb0; --accent-bg: #ebf4ff; --code-bg: #f7fafc; --ok: #276749;
  }
  @media (prefers-color-scheme: dark) {
:root {
  --bg: #14181f; --fg: #e8edf3; --muted: #a8b3c1; --line: #2d3748;
  --accent: #63b3ed; --accent-bg: #1d2a3a; --code-bg: #1c2330; --ok: #68d391;
}
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg);
     font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
     line-height: 1.75; }
  main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
  h1 { font-size: 1.7rem; line-height: 1.4; margin: 1.2rem 0 0.4rem; }
  h2 { font-size: 1.25rem; margin-top: 2.8rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
  h3 { font-size: 1.02rem; margin-top: 1.6rem; }
  /* 従来の npm 方式は畳んでおく。主経路はリモート接続で、こちらは代替。
 既定の marker のままだと本文色に埋もれるのでリンク色を当てる。 */
  details { margin-top: 1.6rem; border: 1px solid var(--line); border-radius: 8px;
        padding: 0.6rem 1rem; }
  details summary { cursor: pointer; color: var(--accent); font-size: 0.92rem; }
  /* marker は summary の color を継承するのが標準の挙動だが、継承しないエンジンでも
 本文色に埋もれないよう明示する。対応外なら単に無視される。 */
  details summary::marker,
  details summary::-webkit-details-marker { color: var(--accent); }
  details[open] summary { margin-bottom: 0.6rem; }
  a { color: var(--accent); }
  .lead { color: var(--muted); font-size: 1.02rem; }
  .badge { display: inline-block; background: var(--accent-bg); color: var(--accent);
       border-radius: 999px; padding: 0.1rem 0.75rem; font-size: 0.82rem; font-weight: 600; }
  pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.55; }
  code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
  p > code, li > code, td > code { background: var(--code-bg); border: 1px solid var(--line);
    border-radius: 4px; padding: 0 0.3rem; font-size: 0.86em; }
  .tablewrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
  th, td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
  th { background: var(--code-bg); }
  .ok { color: var(--ok); font-weight: 600; }
  .note { background: var(--accent-bg); border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.92rem; }
  .cta { display: inline-block; background: var(--accent); color: #fff !important; text-decoration: none;
     border-radius: 8px; padding: 0.55rem 1.3rem; font-weight: 600; margin-top: 0.6rem; }
  footer { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 1rem;
       font-size: 0.85rem; color: var(--muted); }
  /* 言語トグル: デフォルトはブラウザ言語、切替時のみ localStorage に保存 */
  #lang-toggle { position: fixed; top: 0.9rem; right: 0.9rem; z-index: 10;
             background: var(--code-bg); color: var(--fg); border: 1px solid var(--line);
             border-radius: 999px; padding: 0.25rem 0.9rem; font-size: 0.85rem;
             cursor: pointer; font-family: inherit; }
  #lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
  /* JS 無効時は body[data-lang="ja"] 既定で日本語のみ表示 */
  body[data-lang="ja"] [data-lang="en"] { display: none; }
  body[data-lang="en"] [data-lang="ja"] { display: none; }

/* LP には無かったが docs/ で使う。ダッシュボード側と同じ見た目に揃える。 */
.muted { color: var(--muted); font-size: 0.9rem; }

/* ---- 手順ページ (docs/) ---- */

/* 前提条件。EdinetDB を参考に、満たさないと進めないものを冒頭で目立たせる。
   「設定に無い」で行き止まりになるのを防ぐのが目的なので、note より強い見た目にする。 */
.prereq { border: 1px solid var(--accent); background: var(--accent-bg);
          border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1.2rem 0; }
.prereq h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.prereq ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.prereq li { margin: 0.3rem 0; }

/* 番号付きの手順。各ステップに画像の枠を持てるようにする。 */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0; }
.steps > li { counter-increment: step; margin: 0 0 1.8rem; padding-left: 2.4rem; position: relative; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin: 0.1rem 0 0.4rem; font-size: 1.05rem; }

/* スクリーンショットの差し込み枠。画像が未配置でも手順が読めるようにする。 */
figure.shot { margin: 0.7rem 0 0; }
figure.shot img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
/* 縮小表示で細部が潰れる画像があるので、クリックで原寸を開けるようにしている。
   拡大できると分かるようカーソルだけ変える (リンクの下線は画像に効かない)。 */
figure.shot a { display: block; cursor: zoom-in; }
figure.shot figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }

/* 未配置のプレースホルダ。公開前に気づけるよう、意図的に目立たせる。 */
figure.shot.todo { border: 1px dashed var(--line); border-radius: 6px;
                   padding: 1.2rem; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ⚠️ 上のグローバル `details` は枠付きカードにしている。FAQ は箱を並べたくないので、
   border-top だけ残す前に border/radius/padding を打ち消す。
   打ち消さないと「上線だけの一覧」のつもりが全部カードのまま出る。 */
details.faq { border: none; border-radius: 0; margin-top: 0;
              border-top: 1px solid var(--line); padding: 0.7rem 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: 0.6rem 0 0; }

.crumb { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.8rem; }

/* ---- Legal pages (privacy/, terms/) ---- */

/* The originals are Japanese (shiftyasan.com/privacy and /terms); the pages here
   are translations, and the Japanese text prevails on any discrepancy. That has
   to be stated up front, so this banner is stronger than .note and distinct
   from .prereq. */
.legal-note { border-left: 3px solid var(--accent); background: var(--accent-bg);
              border-radius: 0 8px 8px 0; padding: 0.8rem 1rem; margin: 1.2rem 0 2rem;
              font-size: 0.9rem; }
.legal-note p { margin: 0.3rem 0; }

/* Clauses keep the article numbers of the original, so nothing is auto-numbered
   (the original has Article 11-2 and 17-2, which break a plain sequence). */
.legal h2 { font-size: 1.08rem; margin-top: 2.2rem; }
.legal h3 { font-size: 0.98rem; margin-top: 1.4rem; color: var(--muted); }
.legal p, .legal li { font-size: 0.95rem; }
.legal ol, .legal ul { padding-left: 1.4rem; }
.legal li { margin: 0.3rem 0; }
/* Item lists keep the original's (1)(2) labels, so drop the generated marker. */
.legal ol.plain { list-style: none; padding-left: 1.2rem; }
.legal ol.plain > li { text-indent: -1.2rem; }