/* モバイルECサイト無料診断 — 375/390/430/768/1024/1440px対応・CLS抑制・print対応
   v0.2.0: テーマ(mobilistica-theme v2.0.1)のトークンをvar()フォールバックで継承。
   埋め込み先(WP)ではテーマ値に自動追従し、スタンドアロンweb-app単体実行時はブランド生値にフォールバックする。
   詳細: ~/mobilistica-design-v2-mock/tools-audit-lp-v1/DESIGN-SPEC.md */
:root {
  --fg: var(--color-ink, #0F172A);
  --bg: var(--color-bg, #ffffff);
  --surface: var(--color-white, #ffffff);
  --surface-alt: var(--color-bg-alt, #f1f5f9);
  --accent: var(--color-primary, #2563EB);
  --accent-on: var(--color-on-primary, #ffffff);
  --border: var(--color-rule, #d6d6d6);
  --ok: var(--color-score-good, #16A34A);
  --warn: var(--color-score-mid, #EA580C);
  --warn-ink: var(--color-score-mid-ink, #0F172A);
  --bad: var(--color-score-poor, #DC2626);
  --p0: #7F1D1D;
  --muted: var(--color-text-light, #6b7280);
  --font: var(--font-sans, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif);
  --font-mono: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
  --radius: var(--radius, 8px);
  --radius-sm: var(--radius-sm, 4px);
  --ease-out: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --ease-in-out: var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: var(--color-ink, #e8e8e8);
    --bg: var(--color-bg, #0B1220);
    --surface: var(--color-white, #101A2C);
    --surface-alt: var(--color-bg-alt, #131C2E);
    --border: var(--color-rule, #3a3d42);
    --muted: var(--color-text-light, #9ca3af);
    --p0: #B91C1C;
  }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
* { box-sizing: border-box; }
.mma-embed { font-family: var(--font); color: var(--fg); line-height: 1.75; overflow-wrap: break-word; }
.mma-embed img, .mma-embed svg, .mma-embed pre { max-width: 100%; }
.mma-embed h1 { font-size: 1.5rem; margin: 0 0 8px; }
.mma-embed .lead { color: var(--muted); margin-bottom: 24px; }

/* ---- 埋め込みコンテナ(WP側は外側のブレイクアウトラッパーが幅を確保する) ---- */
.audit-container {
  max-width: 720px; margin: 0 auto; padding: 28px; overflow-x: clip;
  background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5);
}

/* ---- form ---- */
.field-row { margin-bottom: 16px; }
.mma-embed label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--fg); font-size: 0.9375rem; }
.mma-embed input[type="url"], .mma-embed select {
  width: 100%; min-height: 44px; padding: 10px 14px; font-size: 1rem; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg);
}
.mma-embed .help-text { font-size: 0.8125rem; color: var(--muted); }
.mma-embed button {
  min-height: 48px; padding: 12px 22px; font-size: 1rem; font-weight: 700; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; background: var(--accent); color: var(--accent-on);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms var(--ease-out), opacity 130ms ease;
}
.mma-embed button:active:not(:disabled) { transform: scale(0.97); }
.mma-embed button.secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .mma-embed button.secondary:hover { color: var(--fg); border-color: var(--muted); }
}
.mma-embed button:disabled { opacity: 0.5; cursor: wait; }
.mma-embed :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#submit-btn { width: 100%; }
@media (min-width: 640px) { #submit-btn { width: auto; } }
.mma-embed .error { color: var(--bad); font-weight: 600; font-size: 0.875rem; }

/* ---- loading: 結果領域と同じ高さのスケルトンでCLSを抑える ---- */
.loading { margin-top: 24px; min-height: 260px; text-align: center; }
.skeleton {
  height: 160px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
}
/* 一定速の掃引動作なのでlinear固定(既定easeだと不均一な速度になる) */
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: mma-shimmer 1.4s linear infinite; } }
@keyframes mma-shimmer { to { background-position: -200% 0; } }
#loading-text { margin: 16px 0 12px; color: var(--muted); }

/* ---- loading/result/error-panelの排他表示切替を滑らかに(JS側でenterクラスを一瞬付与)
   hidden属性そのものはdisplay:noneを維持。表示直後の1フレームだけopacity:0/translateYから始め、
   removeでフェードイン。終了(loading→次パネル)は短く速いほうが待機後の体感遅延を増やさない。 ---- */
.loading, .result, .error-panel {
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.loading.mma-enter, .result.mma-enter, .error-panel.mma-enter {
  opacity: 0;
  transform: translateY(6px);
}

/* ---- 結果カードの登場を軽くstagger(診断は稀な操作なので装飾を許容。30〜80msの目安) ---- */
@media (prefers-reduced-motion: no-preference) {
  .issues li {
    opacity: 0;
    animation: mma-issue-in 320ms var(--ease-out) forwards;
  }
  .issues li:nth-child(1) { animation-delay: 60ms; }
  .issues li:nth-child(2) { animation-delay: 110ms; }
  .issues li:nth-child(3) { animation-delay: 160ms; }
  .issues li:nth-child(4) { animation-delay: 210ms; }
  .issues li:nth-child(5) { animation-delay: 260ms; }
  @keyframes mma-issue-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---- スコア数値のカウントアップ演出(app.mjsから駆動) ---- */
.score-num.mma-counting { font-variant-numeric: tabular-nums; }

/* ---- result ---- */
.result { margin-top: 8px; }
.result h2 { font-size: 1.25rem; margin-bottom: 6px; }
.target-url { font-size: 0.8125rem; color: var(--muted); word-break: break-all; margin-bottom: 16px; }
.target-url code { font-family: var(--font-mono); }
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 20px; }
.score-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; background: var(--surface-alt); }
.score-num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2.25rem; font-weight: 800; color: var(--fg); }
.score-num.is-good { color: var(--ok); }
.score-num.is-mid { color: var(--warn); }
.score-num.is-poor { color: var(--bad); }
/* bg-alt(score-card背景)上のmutedはライトモードで4.34:1とAA未達のため--fgを使用(9.45:1) */
.score-label { color: var(--fg); font-size: 0.8125rem; opacity: 0.72; }
.cwv-table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 4px 0 24px; table-layout: fixed; word-break: break-word; font-variant-numeric: tabular-nums; }
.cwv-table caption { text-align: left; font-weight: 700; margin-bottom: 8px; font-size: 0.9375rem; }
.cwv-table th, .cwv-table td { border: 1px solid var(--border); padding: 10px; text-align: center; }
.cwv-table th { background: var(--surface-alt); font-weight: 700; }
.cwv-table td { font-family: var(--font-mono); }
.result h3 { font-size: 1.0625rem; margin-bottom: 12px; }

/* ---- issues: サンプル表示(.sample-row/.sample-pri)と視覚言語を統一 ---- */
.issues { list-style: none; display: grid; gap: 12px; margin-bottom: 20px; padding: 0; }
.issues li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface-alt); border-radius: var(--radius); }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: #fff;
  border-radius: var(--radius-sm); padding: 3px 9px; flex-shrink: 0; margin-top: 0.15em;
}
.badge-p0 { background: var(--p0); }
.badge-p1 { background: var(--bad); }
/* score-mid背景は白文字だと両テーマでAA未達(実測3.56:1/ダーク2.26:1)のため常時暗色に上書き */
.badge-p2 { background: var(--warn); color: var(--warn-ink); }
.badge-p3 { background: var(--accent); }
.badge-p4 { background: var(--muted); }
.issues strong { display: block; margin-bottom: 4px; font-size: 0.9375rem; color: var(--fg); }
.impact { margin: 4px 0; font-size: 0.875rem; color: var(--fg); }
.fix { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.limitations { font-size: 0.875rem; margin: 16px 0; color: var(--muted); }
.limitations summary { cursor: pointer; font-weight: 600; color: var(--fg); }

/* ---- actions: 「HTML保存」のみ強調、残り3つは同格のゴーストボタンに整理 ---- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.actions button { min-height: 40px; padding: 9px 16px; font-size: 0.875rem; font-weight: 600; }
#dl-html { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  #dl-html:hover { background: var(--surface-alt); }
}
.actions .secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }

.next-steps, .audit-footer nav { font-size: 0.9375rem; color: var(--muted); }
.audit-footer { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 16px; }
.audit-footer nav { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.disclaimer { font-size: 0.8rem; color: var(--muted); }
.error-panel { border: 1px solid var(--bad); border-radius: var(--radius); padding: 20px; margin-top: 24px; background: var(--surface-alt); }
.error-panel h2 { font-size: 1.0625rem; margin-bottom: 8px; }

/* ============================================================
   ページ本文コンポーネント(.mma-embed の外側・LP記事セクション用)
   ヒーロー/gauge-card/tool/policy/case-row/oss-band/front-section/
   section-title はテーマ(mobilistica-theme)側に既存のためここでは追加しない。
   ここは本当に新規なコンポーネントのみ。
   ============================================================ */
.section-lead { color: var(--color-text-light, var(--muted)); font-size: 0.9375rem; max-width: 62ch; margin: -8px 0 24px; }

/* 白背景+上下罫線の帯セクション(4箇所で同一インラインstyleが重複していたため切り出し) */
.mca-band { background: var(--color-white, var(--surface)); border-top: 1px solid var(--color-rule, var(--border)); border-bottom: 1px solid var(--color-rule, var(--border)); }

/* 診断ツールパネル: フルブリード外枠(バグ#2根治の起点) */
.mca-tool-panel { background: var(--color-bg-alt, var(--surface-alt)); border-top: 1px solid var(--color-rule, var(--border)); border-bottom: 1px solid var(--color-rule, var(--border)); }
.mca-tool-panel .container { padding-top: 56px; padding-bottom: 56px; }
.mma-embed-wrap { max-width: 720px; margin: 24px auto 0; }
@media (min-width: 768px) { .mma-embed-wrap { max-width: 860px; } }
@media (min-width: 1024px) { .mma-embed-wrap { max-width: 960px; } }

/* gauge-card内のサンプル注記(ヒーロー側のみ・実測値と誤認防止) */
.gauge-sample-tag { grid-column: 1 / -1; display: inline-flex; align-self: start; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--color-panel-ink-text, #E2E8F0); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 3px 10px; margin-bottom: 4px; }

/* 比較表 */
.mca-compare-wrap { overflow-x: auto; border: 1px solid var(--color-rule, var(--border)); border-radius: var(--radius); }
.mca-compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.mca-compare th, .mca-compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-rule, var(--border)); }
.mca-compare tr:last-child th, .mca-compare tr:last-child td { border-bottom: none; }
.mca-compare thead th { font-weight: 700; background: var(--color-bg-alt, var(--surface-alt)); }
.mca-compare thead th:last-child { color: var(--color-primary, var(--accent)); }
.mca-compare tbody td:last-child { font-weight: 600; color: var(--color-ink, var(--fg)); }

/* ECサイト特有チェック項目: アイコン付き2列 */
.mca-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.mca-check-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--color-rule, var(--border)); }
.mca-check-item .mca-icon { width: 22px; height: 22px; color: var(--color-primary, var(--accent)); margin-top: 2px; flex-shrink: 0; }
.mca-check-item p { font-size: 0.9375rem; margin: 0; }
.mca-check-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--color-text-light, var(--muted)); margin-top: 12px; }

/* 使い方(3ステップ・水平) */
.mca-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mca-step { text-align: left; border-top: 2px solid var(--color-primary, var(--accent)); padding-top: 16px; }
.mca-step h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.mca-step p { font-size: 0.9375rem; color: var(--color-text-light, var(--muted)); margin: 0; }

/* 汎用パネル(bg-altの縦積みリスト用。トラスト/プライバシー等) */
.mca-panel { background: var(--color-bg-alt, var(--surface-alt)); border: 1px solid var(--color-rule, var(--border)); border-radius: var(--radius); padding: 32px; }
.mca-panel ul { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.mca-panel li { display: flex; gap: 12px; font-size: 0.9375rem; }
.mca-panel .mca-icon { width: 20px; height: 20px; color: var(--color-score-good, var(--ok)); margin-top: 2px; flex-shrink: 0; }

/* FAQアコーディオン(ネイティブdetails/summary) */
.mca-faq details { border-top: 1px solid var(--color-rule, var(--border)); }
.mca-faq details:last-child { border-bottom: 1px solid var(--color-rule, var(--border)); }
/* 高さはJS(motion.js)がWAAPIでdetails要素自体をアニメーション。ここは開閉中のoverflow制御のみ */
.mca-faq details { overflow: hidden; }
.mca-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; cursor: pointer; font-weight: 700; color: var(--color-ink, var(--fg)); font-size: 1rem; list-style: none; }
.mca-faq summary::-webkit-details-marker { display: none; }
.mca-faq summary .mca-icon { width: 18px; height: 18px; color: var(--color-text-light, var(--muted)); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .mca-faq summary .mca-icon { transition: transform 200ms var(--ease-out); } }
.mca-faq details[open] summary .mca-icon { transform: rotate(180deg); }
.mca-faq .mca-faq-a { padding: 0 4px 20px; color: var(--color-text-light, var(--muted)); font-size: 0.9375rem; max-width: 68ch; margin: 0; }

/* ソフトCTA(相談導線・主CTAと競合させない) */
.mca-soft-cta { background: var(--color-bg-alt, var(--surface-alt)); border-radius: var(--radius); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mca-soft-cta p { font-size: 0.9375rem; color: var(--color-text-light, var(--muted)); max-width: 52ch; margin: 0; }
.mca-soft-cta strong { color: var(--color-ink, var(--fg)); }
.mca-soft-cta .btn-text { color: var(--color-text-light, var(--muted)); font-weight: 600; font-size: 0.875rem; transition: color 130ms ease; }
@media (hover: hover) and (pointer: fine) {
  .mca-soft-cta .btn-text:hover { color: var(--color-primary, var(--accent)); }
}

/* 更新履歴 */
.mca-changelog { list-style: none; font-size: 0.875rem; color: var(--color-text-light, var(--muted)); display: grid; gap: 8px; margin: 0; padding: 0; }
.mca-changelog time { font-family: var(--font-mono); color: var(--color-text, var(--fg)); margin-right: 10px; }

@media (max-width: 900px) {
  .mca-steps { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .mca-checklist { grid-template-columns: 1fr; }
  .mca-soft-cta { padding: 24px; }
}

/* ---- breakpoints ---- */
@media (min-width: 768px) {
  .audit-container { padding: 40px; max-width: 860px; }
  .mma-embed h1 { font-size: 1.9rem; }
  .audit-footer nav { flex-direction: row; gap: 16px; flex-wrap: wrap; }
}
@media (min-width: 1024px) { .audit-container { max-width: 960px; } }
@media (max-width: 640px) {
  .score-row { grid-template-columns: 1fr; }
  .audit-container { padding: 20px; }
}

/* ---- print ---- */
@media print {
  form, .loading, .actions, .audit-footer nav, #cancel-btn, .error-panel { display: none !important; }
  .mma-embed { color: #000; background: #fff; }
  .score-card, .cwv-table th, .cwv-table td { border-color: #000; }
}