/* =============================================================================
 * shinq デザイントークンの移植 + マニュアル向け読みやすさ調整
 *
 * 出典: frontend/src/index.css の :root / html[data-theme="dark"] / @theme
 *       (アプリ本体で実際に描画される値。theme-tokens.ts のダーク値は同期漏れが
 *        あるので参照しないこと)
 *
 * 方針: 色・角丸・影は shinq に揃える。ただしここは「長文を読む」サイトなので、
 *       本文サイズと行間、リンク色はアプリの値より読みやすさを優先して変えている。
 *       意図的に変えた箇所には【読みやすさ優先】と書いた。
 *
 * ⚠️ 本体の index.css を変えたら、この値も合わせて直すこと。自動連動はしない。
 * ========================================================================== */

/* --- shinq のトークンをそのまま持ち込む ------------------------------------ */
:root {
  /* ブランド (--color-brand が実体。--brand ではない) */
  --shinq-brand: #e30613;
  --shinq-brand-dark: #b8050f;
  --shinq-brand-light: #ff1a28;
  --shinq-gradient-brand: linear-gradient(135deg, #e30613, #b8050f);

  /* 角丸 */
  --shinq-radius-card: 20px;
  --shinq-radius-btn: 12px;
  --shinq-radius-md: 10px;
  --shinq-radius-sm: 8px;

  /* 影 */
  --shinq-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shinq-shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);

  /* 余白 (4px ベース) */
  --shinq-space-2: 8px;
  --shinq-space-4: 16px;
  --shinq-space-6: 24px;

  /* フォーカス・モーション */
  --shinq-focus-ring: 0 0 0 3px rgba(227, 6, 19, 0.35);
  --shinq-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shinq-dur-base: 200ms;

  /* 状態色 */
  --shinq-danger: #dc2626;
  --shinq-danger-bg: #fef2f2;
  --shinq-success: #16a34a;
  --shinq-success-bg: #f0fdf4;
  --shinq-warn: #b45309;
  --shinq-warn-bg: #fffbeb;
  --shinq-info: #2563eb;
  --shinq-info-bg: #eff6ff;
}

/* --- Material のカラー変数に割り当てる ------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--shinq-brand);
  --md-primary-fg-color--light: var(--shinq-brand-light);
  --md-primary-fg-color--dark: var(--shinq-brand-dark);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--shinq-brand);

  --md-default-fg-color: #111827; /* --fg */
  --md-default-fg-color--light: #374151; /* --fg-dim */
  --md-default-fg-color--lighter: #6b7280; /* --fg-muted */
  --md-default-fg-color--lightest: #9ca3af; /* --fg-faint */
  --md-default-bg-color: #ffffff; /* --surface */

  --md-code-bg-color: #f9fafb; /* --surface-dim */
  --md-code-fg-color: #374151;
  /* 【読みやすさ優先】リンクは赤ではなく青(--info)。本文中に赤が多いと
     警告と区別がつかなくなるため。赤はヘッダー・ナビ・強調に限定する */
  --md-typeset-a-color: #2563eb; /* --info */
  --md-footer-bg-color: #111827;
  --md-footer-bg-color--dark: #0b1220;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--shinq-brand-light);
  --md-primary-fg-color--light: #ff4d58;
  --md-primary-fg-color--dark: var(--shinq-brand-dark);
  --md-accent-fg-color: var(--shinq-brand-light);

  --md-default-fg-color: #f9fafb;
  --md-default-fg-color--light: #e5e7eb;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #6b7280;
  --md-default-bg-color: #111111; /* --page-bg (dark) */

  --md-code-bg-color: #2c2c2e; /* --surface-dim (dark) */
  --md-code-fg-color: #e5e7eb;
  --md-typeset-a-color: #60a5fa; /* --info (dark) 【読みやすさ優先】 */
  --md-footer-bg-color: #1c1c1e;

  /* ダーク時の影は濃くする (index.css の dark 値に準拠) */
  --shinq-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shinq-shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- タイポグラフィ (typography-tokens.ts の medium プリセット) ------------
 * shinq はルート 18px 基準。Material はルート 20px で、しかも画面幅により
 * 125%→150% と拡大する。shinq は viewport でスケールしないので、rem ではなく
 * px で固定する。
 * ------------------------------------------------------------------------- */

body {
  /* shinq --font-body: system-ui, -apple-system, sans-serif */
  font-family: system-ui, -apple-system, sans-serif;
}

.md-typeset {
  /* 【読みやすさ優先】アプリの本文は 15.75px だが、それは UI 部品の文字。
     マニュアルは長文を読ませるので 16px / 1.7 に上げる */
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0; /* --tracking-body */
  -webkit-font-smoothing: antialiased;
}

.md-typeset h1 {
  font-size: 36px; /* --text-h1 2rem × 18px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em; /* --tracking-heading */
  color: var(--md-default-fg-color);
}
.md-typeset h2 {
  font-size: 27px; /* --text-h2 1.5rem × 18px */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2.4em;
  /* 【読みやすさ優先】節の切れ目が流し読みで分かるように下線を敷く */
  padding-bottom: 0.3em;
  border-bottom: 1px solid #e5e7eb; /* --edge */
}
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: #3a3a3c; /* --edge (dark) */
}
.md-typeset h3 {
  font-size: 22.5px; /* --text-h3 1.25rem × 18px */
  font-weight: 600;
  line-height: 1.4;
}
.md-typeset h4 {
  font-size: 20.25px; /* --text-h4 1.125rem × 18px */
  font-weight: 600;
  line-height: 1.4;
}
.md-typeset small {
  font-size: 13.5px; /* --text-small 0.75rem × 18px */
  line-height: 1.5;
}

/* --- 角丸と影 --------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--shinq-radius-card);
  box-shadow: var(--shinq-shadow-card);
  border-width: 1px;
}

.md-typeset code {
  border-radius: var(--shinq-radius-sm);
  padding: 0.15em 0.4em;
}

.md-typeset pre > code {
  border-radius: var(--shinq-radius-md);
}

/* スクショ。タップで拡大するので指が乗る余白と、押せる感を出す影 */
.md-typeset img {
  border-radius: var(--shinq-radius-md);
  box-shadow: var(--shinq-shadow-card);
  transition: box-shadow var(--shinq-dur-base) var(--shinq-ease-out);
}
.md-typeset img:hover {
  box-shadow: var(--shinq-shadow-lift);
}

.md-typeset table:not([class]) {
  border-radius: var(--shinq-radius-md);
  overflow: hidden;
  box-shadow: var(--shinq-shadow-card);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-weight: 600;
}
/* 【読みやすさ優先】行の縞。表(手順・つまずき一覧)を目で追いやすくする */
.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: #f9fafb; /* --surface-dim */
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: #2c2c2e; /* --surface-dim (dark) */
}

/* サイドバーの現在地はブランド赤で示す(リンク青と役割を分ける) */
.md-nav__link--active,
.md-nav__link--active .md-ellipsis {
  color: var(--shinq-brand);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active .md-ellipsis {
  color: var(--shinq-brand-light);
}

/* --- 注意ブロックの色を shinq の状態色に寄せる ----------------------------- */
.md-typeset .admonition.warning,
.md-typeset .admonition.attention {
  border-color: var(--shinq-warn);
}
.md-typeset .warning > .admonition-title {
  background-color: var(--shinq-warn-bg);
}
.md-typeset .admonition.danger,
.md-typeset .admonition.error {
  border-color: var(--shinq-danger);
}
.md-typeset .admonition.tip,
.md-typeset .admonition.success {
  border-color: var(--shinq-success);
}
.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-color: var(--shinq-info);
}

/* --- ヘッダーはブランドのグラデーション ------------------------------------ */
.md-header {
  background: var(--shinq-gradient-brand);
  box-shadow: var(--shinq-shadow-card);
}
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #ff1a28, #b8050f);
}

/* --- フォーカス。キーボード操作とタブレットの両方で見えるように ------------- */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible {
  outline: 2px solid rgba(227, 6, 19, 0.55); /* --focus-outline */
  outline-offset: 2px; /* --focus-offset */
  border-radius: var(--shinq-radius-sm);
}

/* --- トップページの節ラベル(h2を控えめなラベル調に) ------------------------ */
.md-typeset h2.home-h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  border-bottom: none;
  padding-bottom: 0;
  margin: 2.6em 0 0.9em;
  font-feature-settings: "palt";
}
.md-typeset h2.home-h2 .headerlink { display: none; }

/* --- 質問ボックス(トップページ) --------------------------------------------- */
.qa-box {
  margin: 0 0 var(--shinq-space-6);
  padding: var(--shinq-space-4);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--shinq-radius-card);
  background: var(--md-code-bg-color);
  box-shadow: var(--shinq-shadow-card);
}
.qa-box-row {
  display: flex;
  gap: var(--shinq-space-2);
}
.qa-box input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 10px 16px;
  font-size: 16px; /* 16px未満だとiOSがズームする */
  font-family: inherit;
  border: 1.5px solid var(--md-default-fg-color--lightest);
  border-radius: var(--shinq-radius-btn);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  transition: border-color var(--shinq-dur-base) var(--shinq-ease-out);
}
.qa-box input[type="search"]::placeholder {
  color: var(--md-default-fg-color--lighter);
}
.qa-box input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--shinq-brand);
  box-shadow: var(--shinq-focus-ring);
}
.qa-box button {
  min-height: 52px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: #fff;
  background: var(--shinq-gradient-brand);
  border: none;
  border-radius: var(--shinq-radius-btn);
  box-shadow: var(--shinq-shadow-btn, 0 1px 2px rgba(0, 0, 0, 0.06));
  cursor: pointer;
  transition: box-shadow var(--shinq-dur-base) var(--shinq-ease-out);
}
.qa-box button:hover { box-shadow: var(--shinq-shadow-lift); }
.qa-answer {
  margin-top: var(--shinq-space-4);
  padding: var(--shinq-space-4);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--shinq-radius-md);
}
.qa-answer-q { font-weight: 700; font-size: 15px; margin-bottom: 8px; font-feature-settings: "palt"; }
.qa-answer-a { font-size: 15px; line-height: 1.9; }
.md-typeset .qa-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1.5px solid var(--shinq-brand);
  border-radius: var(--shinq-radius-btn);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.md-typeset .qa-link.qa-escalate { border-color: var(--shinq-info, #2563eb); }
.qa-maybe { margin-top: 12px; font-size: 13.5px; line-height: 2; }
.qa-note { margin-top: 10px; font-size: 12px; color: var(--md-default-fg-color--lighter); }
.qa-miss { border-left: 4px solid var(--shinq-warn, #b45309); }

/* --- 「やりたいことから探す」ボタン(トップページ) ---------------------------
 * 注意: .task-grid の子は <a> 直下であること(index.md 側で改行を入れると
 * Markdown 処理で <p> に包まれてグリッドが崩れ、PCでも1列になる)。 */
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 10px;
  margin: 0 0 var(--shinq-space-6);
}
.md-typeset .task-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--shinq-radius-btn);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  font-feature-settings: "palt";
  text-decoration: none;
  transition: border-color var(--shinq-dur-base) var(--shinq-ease-out),
    box-shadow var(--shinq-dur-base) var(--shinq-ease-out);
}
.md-typeset .task-grid a::after {
  content: "→";
  flex: none;
  font-weight: 400;
  color: var(--shinq-brand);
  opacity: 0.45;
  transition: opacity var(--shinq-dur-base) var(--shinq-ease-out),
    transform var(--shinq-dur-base) var(--shinq-ease-out);
}
.md-typeset .task-grid a:hover,
.md-typeset .task-grid a:focus-visible {
  border-color: var(--shinq-brand);
  box-shadow: var(--shinq-shadow-card);
  color: var(--md-default-fg-color);
}
.md-typeset .task-grid a:hover::after,
.md-typeset .task-grid a:focus-visible::after {
  opacity: 1;
  transform: translateX(2px);
}

/* 手順スクショ(steps/)は原寸で大きく出しすぎない */
.md-typeset img[src*="/steps/"] {
  max-width: min(420px, 100%);
  display: block;
}

/* --- タブレット・スマホ操作。--tap-min: 44px を守る ------------------------- */
.md-nav__link,
.md-typeset .md-button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 76.1875em) {
  /* サイドバーがドロワーになる幅。指で押せる高さを確保する */
  .md-nav--primary .md-nav__link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* --- 操作動画(ループwebm)。カードと同じ角丸・影で本文になじませる ------------ */
.md-typeset video.manual-video {
  display: block;
  max-width: min(560px, 100%);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  box-shadow: var(--shinq-shadow-card);
  margin: 0.6em 0 1em;
}