/*
 * AIキャリア経験マップ D0 v4（類型中心再設計）— scoped styles.
 *
 * 出典: workspace/260817_AIgent_診断v4_類型中心再設計.md §7(デザイン言語)・§8(集中モード)。
 *
 * ★ セレクタ名は aigent-career-diag.js が実際に出力するクラス名に**揃えてある**
 *   ──────────────────────────────────────────────────────────────────────────
 *   初版のこのファイルは「CSS担当が設計時点で一貫させた名前」で書かれており、
 *   widget-js の実クラス名と1:1で一致していなかった。その結果、
 *   JSが出す137クラスのうち80がCSS未定義／CSSが定義する136クラスのうち79がdead
 *   という状態のまま実機まで到達し、集中モードが position:static のまま発動せず、
 *   マップの矢印が stroke:none で不可視、タイプカードが480px実寸の画像で
 *   1画面に収まらない、といった破綻を生んだ（Opus 5レビュー B1・2026-08-17）。
 *
 *   同じ事故を再発させないため、JSソースから抽出したクラス名の集合が
 *   このファイルの定義集合に含まれることを
 *   tests/test_aigent_career_diag_widget_css_parity.py が機械的に検査する。
 *   **JS側にクラスを足したら、このファイルにも定義を足すこと**（テストが落ちる）。
 *
 * ★ Shadow DOM前提（設計書§7.4）───────────────────────────────────────────
 *   v3は「宿主LPの生CSSが子孫要素を直接名指しして押し勝つ」事故（2026-08-14）への
 *   対策として、全セレクタの ID を二重にする力業（#root#root）を取っていた。
 *   v4はwidget-js側が Shadow DOM（shadowRoot）でマウントする前提のため、この
 *   セレクタ戦争は構造的に発生しない（Shadow DOM境界はルールマッチそのものを
 *   遮断する。specificityの問題ではない）。よって二重IDは全廃した。
 *
 *   ただし継承されるCSSプロパティ（color/font-family/font-size/line-height/
 *   text-align等）はShadow DOM境界を素通りして宿主から流れ込むため、:host に
 *   対する最低限の明示リセットは引き続き置く。
 *
 *   トークン（--acd-*）は `:host` と `.acd-widget` の両方に、ベースリセットは
 *   `.acd-widget <element>` の子孫セレクタに置く。widget-js は Shadow DOM経路
 *   （内側wrapper）でも非Shadow DOMフォールバック経路（host直描画）でも
 *   **必ず .acd-widget を付ける**（レビューm4。付け忘れると全トークンが
 *   未解決になりCSSが1行も効かない）。
 *
 * ★ クラスタカラーの受け渡し契約（設計書§7.1・§3.3の非漏出境界とは無関係）───────
 *   サーバは `type.cluster_color` に "creators"/"openers"/"readers"/"movers" の
 *   いずれかの**コード**だけを返す（実際の色値のSSOTはこのCSSファイル）。
 *   widget-js は結果表示の祖先要素（集中モードのroot・.acd-result・
 *   .acd-type-card）へ `data-acd-cluster="creators"` を立てるだけでよい。
 *   個々のコンポーネントは var(--acd-cluster-current) 系だけを参照するので、
 *   「どのタイプがどのクラスタか」の対応はサーバ専用データのまま、色の解決は
 *   CSS側で閉じる。
 *
 * アクセシビリティ（v3から継続）:
 *   - 44px以上のtap target、375px幅で横スクロールなし、prefers-reduced-motion尊重、
 *     色だけで選択・必須を表現しない（選択済みは背景色+チェックアイコン+枠を併用）。
 */

/* ============================================================================
 * 1. トークン（設計書§7.1 カラーシステム）
 * ============================================================================ */
:host,
.acd-widget {
  /* --- ベーストークン（v3から継続する「チーム共通chrome」の配色） --- */
  --acd-accent: #c9a227;
  --acd-accent-dark: #a9860f;
  --acd-navy: #16233f;
  --acd-navy-light: #2c3f66;
  --acd-ink: #1c2230;
  --acd-muted: #6b7280;
  --acd-border: #d8dbe2;
  --acd-bg: #ffffff;
  --acd-bg-soft: #f6f7f9;
  --acd-error: #c0392b;
  --acd-radius-sm: 8px;
  --acd-radius: 12px;
  --acd-radius-lg: 20px;
  --acd-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --acd-shadow-card: 0 2px 10px rgba(20, 25, 40, 0.07);
  --acd-shadow-overlay: 0 12px 40px rgba(20, 25, 40, 0.20);
  --acd-z-overlay: 2147483647; /* 「z-index最大値」（設計書§8） */
  --acd-focus-max-width: 480px;

  /* --- 4クラスタのカラー変数（設計書§7.1）-------------------------------------
   * つくる系(creators)=紫系／ひらく系(openers)=橙系／よむ系(readers)=青系／
   * うごかす系(movers)=緑系。各クラスタは5変数一組:
   *   base（アクセント本体・小面積の塗り/ボーダー用）
   *   dark（本体より濃い・白文字を乗せる面用）
   *   soft（背景ウォッシュ用の極薄トーン）
   *   base-rgb / dark-rgb（rgba()で不透明度を可変にするためのカンマ区切りRGB）
   * どのタイプがどのクラスタかはサーバ専用データが持つ。ここは色コード→色値の
   * 変換だけを行う（設計書§3.3の非漏出境界に抵触しない: 色の対応表はタイプの
   * 割当メカニズムではない）。 */
  --acd-c-creators: #7c3aed;
  --acd-c-creators-dark: #5b21b6;
  --acd-c-creators-soft: #f3ecfd;
  --acd-c-creators-rgb: 124, 58, 237;
  --acd-c-creators-dark-rgb: 91, 33, 182;

  --acd-c-openers: #ea580c;
  --acd-c-openers-dark: #9a3412;
  --acd-c-openers-soft: #fdf1e7;
  --acd-c-openers-rgb: 234, 88, 12;
  --acd-c-openers-dark-rgb: 154, 52, 18;

  --acd-c-readers: #2563eb;
  --acd-c-readers-dark: #1e3a8a;
  --acd-c-readers-soft: #eaf1fd;
  --acd-c-readers-rgb: 37, 99, 235;
  --acd-c-readers-dark-rgb: 30, 58, 138;

  --acd-c-movers: #16a34a;
  --acd-c-movers-dark: #14532d;
  --acd-c-movers-soft: #eaf7ee;
  --acd-c-movers-rgb: 22, 163, 74;
  --acd-c-movers-dark-rgb: 20, 83, 45;
}

/* 「現在のクラスタ」間接参照。data-acd-cluster を立てた要素の配下すべてで
 * var(--acd-cluster-current) 系が解決される。属性名が `data-acd-cluster` なのは
 * widget-js の実装に合わせたもの（宿主LPの data-cluster と衝突させないための
 * prefix。ここを `data-cluster` と書いていたのが未適用の一因だった）。
 * 属性が立っていない間（設問中など、まだタイプが分からない時間帯）は未定義の
 * ままにしておき、利用側は必ず var(--acd-cluster-current, var(--acd-accent))
 * のように中立トークンへフォールバックさせる。*/
[data-acd-cluster="creators"] {
  --acd-cluster-current: var(--acd-c-creators);
  --acd-cluster-current-dark: var(--acd-c-creators-dark);
  --acd-cluster-current-soft: var(--acd-c-creators-soft);
  --acd-cluster-current-rgb: var(--acd-c-creators-rgb);
  --acd-cluster-current-dark-rgb: var(--acd-c-creators-dark-rgb);
}
[data-acd-cluster="openers"] {
  --acd-cluster-current: var(--acd-c-openers);
  --acd-cluster-current-dark: var(--acd-c-openers-dark);
  --acd-cluster-current-soft: var(--acd-c-openers-soft);
  --acd-cluster-current-rgb: var(--acd-c-openers-rgb);
  --acd-cluster-current-dark-rgb: var(--acd-c-openers-dark-rgb);
}
[data-acd-cluster="readers"] {
  --acd-cluster-current: var(--acd-c-readers);
  --acd-cluster-current-dark: var(--acd-c-readers-dark);
  --acd-cluster-current-soft: var(--acd-c-readers-soft);
  --acd-cluster-current-rgb: var(--acd-c-readers-rgb);
  --acd-cluster-current-dark-rgb: var(--acd-c-readers-dark-rgb);
}
[data-acd-cluster="movers"] {
  --acd-cluster-current: var(--acd-c-movers);
  --acd-cluster-current-dark: var(--acd-c-movers-dark);
  --acd-cluster-current-soft: var(--acd-c-movers-soft);
  --acd-cluster-current-rgb: var(--acd-c-movers-rgb);
  --acd-cluster-current-dark-rgb: var(--acd-c-movers-dark-rgb);
}

/* ============================================================================
 * 2. ベースリセット
 * ============================================================================ */
:host,
.acd-widget {
  display: block;
  box-sizing: border-box;
  font-family: var(--acd-font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--acd-ink);
  text-align: left;
  width: 100%;
}
:host *,
:host *::before,
:host *::after,
.acd-widget *,
.acd-widget *::before,
.acd-widget *::after {
  box-sizing: inherit;
}
/* ★ 要素セレクタは必ず :where() で包む（specificity 0 にする）────────────────
 *   `.acd-widget h3 { font-size: 16px }` のように書くと specificity は (0,0,1,1)
 *   になり、後続の **コンポーネント側クラス** `.acd-type-name { font-size: 24px }`
 *   (0,0,1,0) を押し勝ってしまう。これは「タイプ名が主役に見えない」「選択前の
 *   チェックアイコンが消えない」「lead が中央寄せにならない」といった形で
 *   B1と同じ“書いたのに効かない”を再生産する。
 *   :where() は specificity に寄与しないので、セレクタ全体が `.acd-widget`
 *   (0,0,1,0) 相当になり、後ろに書いたコンポーネント規則が素直に勝つ。
 *
 *   （このリセットが宿主LPの `#contact .secInner p{color:#fff}` (0,1,1,1) に
 *    specificityで勝てないのは元から同じ。あの事故を止めているのは Shadow DOM
 *    境界であって specificity ではない＝ここを弱めても防御力は下がらない。） */
.acd-widget :where(h2, h3, h4, p, ul, ol, li, span, div, label, legend, button) {
  font-family: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: normal;
}
.acd-widget :where(h2, h3, h4) {
  font-weight: 700;
  outline: none;
  margin: 0 0 12px;
}
.acd-widget :where(h2) { font-size: 21px; }
.acd-widget :where(h3) { font-size: 16px; margin-top: 22px; }
.acd-widget :where(h4) { font-size: 14.5px; }
.acd-widget :where(p) { line-height: 1.75; margin: 0 0 12px; font-size: 14.5px; }
.acd-widget :where(ul) { margin: 0 0 12px; padding-left: 20px; line-height: 1.8; }

.acd-widget :where(button) {
  font-family: inherit;
  font-size: 15px;
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.acd-widget button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.acd-widget :where(button):hover:not(:disabled) {
  filter: brightness(1.05);
}
.acd-widget :where(button):active:not(:disabled) {
  transform: translateY(1px);
}
.acd-widget button:focus-visible,
.acd-widget a:focus-visible,
.acd-widget [tabindex]:focus-visible {
  outline: 3px solid var(--acd-cluster-current, var(--acd-navy-light));
  outline-offset: 2px;
}

/* ★ タップ操作要素の文字選択止め（伊澤氏フィードバック 2026-08-17・検証中に
 *   何度も文字選択が起きて操作が止まって見えた）───────────────────────────
 *   原因はこのCSSが user-select / -webkit-tap-highlight-color を一切
 *   指定していなかったこと（実装バグ。エミュレータの問題ではない）。
 *   「操作要素」だけに絞って当てる。.acd-widget 全体や body に当てると、
 *   結果画面の解説文・職種リストまで選択不可になり、候補者が結果をコピー
 *   したい場合に困るため厳禁（このルールを広げないこと）。 */
.acd-start,
.acd-next,
.acd-back,
.acd-vector-choice,
.acd-option-row,
.acd-cta-primary,
.acd-cta-retry,
.acd-save-image-btn,
.acd-cta-dock-btn,
.acd-focus-close {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* JSが動かない/データ未配布のときの最終フォールバック（widget-js が root へ付与） */
.acd-js-failed::before {
  content: "診断ウィジェットの読み込みに失敗しました。時間をおいて再度お試しください。";
  display: block;
  padding: 16px;
  color: var(--acd-error);
  font-family: var(--acd-font);
  font-size: 14px;
}

/* ============================================================================
 * 3. 開始画面（.acd-intro）— 集中モードに入る前の状態（設計書§8）
 * ============================================================================ */
.acd-intro {
  text-align: center;
  padding: 8px 4px;
}
.acd-intro h2 { text-align: center; }
.acd-lead {
  color: var(--acd-muted);
  font-size: 15px;
  text-align: center;
  white-space: pre-line;
}
.acd-notices {
  text-align: left;
  list-style: none;
  padding: 16px 16px 16px 34px;
  margin: 16px 0;
  background: var(--acd-bg-soft);
  border-radius: var(--acd-radius);
  font-size: 13.5px;
  color: var(--acd-muted);
}
.acd-notices li {
  position: relative;
  padding: 4px 0 4px 18px;
  list-style: none;
}
.acd-notices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acd-navy);
}
.acd-answer-style {
  font-size: 12.5px;
  color: var(--acd-muted);
  text-align: center;
  margin: 4px 0 12px;
}
.acd-start {
  width: 380px;
  max-width: 100%;
  margin: 24px 0;
  min-height: 58px;
  padding: 0 24px;
  font-size: 18px;
  background: #D29C08;
  /* ★文字色を #fff にしないこと。#D29C08 との比は 2.47:1 で、
     大きい文字の基準 3:1 すら下回る（制作チーム 2026-08-31 納品が実際にそうだった）。
     #201a04 は取り込み前から使っていた墨色で 7.02:1。金色の面は保ったまま通る。 */
  color: #201a04;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.acd-start:hover:not(:disabled) {
  filter: none;
  background: #fff;
  color: #201a04;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.12);
}
.acd-privacy {
  font-size: 12px;
  color: var(--acd-muted);
  text-align: center;
  margin: 12px 0 0;
}

/* ============================================================================
 * 4. 集中モード（設計書§8・レビューR2/R4）
 * ============================================================================
 * widget-js は root 自身へ .acd-focus-mode を付け外しする（別途オーバーレイ用の
 * wrapper要素は作らない）。DOM契約:
 *
 *   <div class="acd-widget acd-focus-mode" data-acd-cluster="creators"?>
 *     <div class="acd-focus-header">
 *       <span class="acd-focus-header-spacer">（v4.1でロゴ廃止。close側と釣り合う場所取りのみ）</span>
 *       <div class="acd-progress">…13ドット…</div> | <div class="acd-progress-spacer">
 *       <button class="acd-focus-close">×</button> | <span class="acd-focus-close-spacer">
 *     </div>
 *     <div class="acd-exit-confirm">…（離脱確認が開いているときだけ）…</div>
 *     <div class="acd-question-slide">…</div> | .acd-reveal | .acd-result | …
 *   </div>
 *
 * ★ ここが position:fixed で全画面を占めることが、この画面設計の核心。
 *   宿主LPのヘッダー・浮遊CTAが選択肢に重なって誤タップを誘発していた
 *   （＝「選んだ記憶のない職種が結果に出た」R2の直接原因）のを、
 *   構造的に不可能にするためのもの。クラスが付くだけで position が
 *   static のままだと**何も解決していない**（Opus 5レビューB1-1）。
 * data-acd-cluster は結果が確定して初めて（リビール〜結果画面で）付与される。
 * 設問中は属性が無いため、メッシュ背景・進捗ドット等はすべて
 * var(--acd-cluster-current, var(--acd-accent)) の中立側に自然に倒れる。
 */
.acd-widget.acd-focus-mode {
  position: fixed;
  inset: 0;
  z-index: var(--acd-z-overlay);
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--acd-bg);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- メッシュグラデーション背景（純CSS・複数radial-gradient＋blur＋10秒ドリフト）----
 * 実装上の注意: filter:blur() を .acd-focus-mode 自身にかけると中身の文字まで
 * ぼける。そのため背景専用の擬似要素へ分離し、そこにだけ blur とドリフトを
 * かける。ぼかしの縁が透けないよう viewport より一回り大きく(inset:-10%)取る。
 * position:fixed なので、結果画面を下までスクロールしても背景は動かない。 */
.acd-widget.acd-focus-mode::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(48px);
  will-change: transform;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(var(--acd-cluster-current-rgb, 201, 162, 39), 0.30), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(var(--acd-cluster-current-dark-rgb, 22, 35, 63), 0.22), transparent 46%),
    radial-gradient(circle at 70% 78%, rgba(var(--acd-cluster-current-rgb, 201, 162, 39), 0.20), transparent 48%),
    radial-gradient(circle at 20% 82%, rgba(var(--acd-cluster-current-dark-rgb, 44, 63, 102), 0.16), transparent 50%);
  background-color: var(--acd-bg);
  animation: acd-mesh-drift 10s ease-in-out infinite;
}
@keyframes acd-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
  50%  { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
  75%  { transform: translate3d(-1%, -1.8%, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* 直下の各画面（ヘッダー・設問スライド・結果…）は480px幅で中央寄せ。
 * 背景擬似要素(z-index:0)より必ず上に置く。 */
.acd-widget.acd-focus-mode > * {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--acd-focus-max-width);
}
.acd-widget.acd-focus-mode > .acd-question-slide,
.acd-widget.acd-focus-mode > .acd-result,
.acd-widget.acd-focus-mode > .acd-reveal,
.acd-widget.acd-focus-mode > .acd-submitting,
.acd-widget.acd-focus-mode > .acd-error,
.acd-widget.acd-focus-mode > .acd-unavailable {
  padding: 8px 20px 40px;
}
/* 質問文（legend）の上の余白が下の余白（margin-bottom: 12px）より狭かったため、
 * 質問画面だけ上のパディングを揃える（他の画面のパディングは変えない）。 */
.acd-widget.acd-focus-mode > .acd-question-slide {
  padding-top: 12px;
}

/* ---- ヘッダー: 進捗＋×のみ（enclosed design・設計書§8）----
 * v4.1でロゴ("AIgent"テキスト)を廃止（伊澤指摘「ロゴでもないし不用」）。
 * 進捗ドットが左右非対称にならないよう、左側にも×ボタンと同じ44px幅の
 * 場所取り（.acd-focus-header-spacer）だけ残す。 */
.acd-focus-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.acd-focus-header-spacer {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: block;
}
.acd-focus-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--acd-bg-soft);
  color: var(--acd-muted);
  font-size: 20px;
  line-height: 1;
}
/* ×が無い画面（送信中・リビール）でもロゴと進捗の位置がずれないための場所取り。 */
.acd-focus-close-spacer {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: block;
}
/* 進捗を出さない画面での場所取り（ロゴを左端・×を右端に保つ）。 */
.acd-progress-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- 離脱確認（設問中の×のみ・1段確認・結果画面では出さない。設計書§8）---- */
.acd-widget.acd-focus-mode > .acd-exit-confirm {
  position: fixed;
  inset: 0;
  z-index: 10;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 34, 48, 0.42);
}
.acd-exit-confirm-dialog {
  width: 100%;
  max-width: 320px;
  background: var(--acd-bg);
  border-radius: var(--acd-radius-lg);
  box-shadow: var(--acd-shadow-overlay);
  padding: 22px 20px;
  text-align: center;
}
.acd-exit-confirm-dialog p {
  font-size: 14px;
  color: var(--acd-ink);
  margin: 0 0 16px;
  text-align: center;
}
.acd-exit-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acd-exit-cancel {
  width: 100%;
  min-height: 58px;
  font-size: 18px;
  background: #D29C08;
  /* ★文字色を #fff にしないこと。#D29C08 との比は 2.47:1 で、
     大きい文字の基準 3:1 すら下回る（制作チーム 2026-08-31 納品が実際にそうだった）。
     #201a04 は取り込み前から使っていた墨色で 7.02:1。金色の面は保ったまま通る。 */
  color: #201a04;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.acd-exit-cancel:hover:not(:disabled) {
  filter: none;
  background: #fff;
  color: #201a04;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.12);
}
.acd-exit-confirm-yes {
  width: 100%;
  background: var(--acd-bg-soft);
  color: var(--acd-ink);
  border: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.acd-exit-confirm-yes:hover:not(:disabled) {
  filter: none;
  border-color: var(--acd-border);
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
 * 5. 進捗（13ドットステッパー・設計書§7.3）
 * ============================================================================ */
.acd-progress {
  flex: 1 1 auto;
  min-width: 0;
}
.acd-progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 2px;
}
.acd-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acd-border);
  flex: 0 0 auto;
  display: block;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.acd-progress-dot-done {
  background: var(--acd-navy-light);
}
.acd-progress-dot-current {
  background: var(--acd-cluster-current, var(--acd-accent-dark));
  transform: scale(1.5);
}
.acd-progress-remaining {
  display: block;
  font-size: 11px;
  color: var(--acd-muted);
  text-align: center;
  margin: 0;
}

/* ============================================================================
 * 6. 設問共通（fieldset / option row・設計書§5.3）
 * ============================================================================ */
.acd-question-slide {
  transition: transform 250ms ease, opacity 250ms ease;
  transform: translateX(0);
  opacity: 1;
}
/* 次問がマウントされたとき（右から入る）。新規要素なので transition ではなく
 * animation で入れる（transitionは「変化」が要るので初期描画に効かない）。 */
.acd-question-slide.acd-slide-enter {
  animation: acd-slide-in 250ms ease both;
}
/* 現在の設問が抜けるとき（左へ）。既存要素へクラスを足すので transition が効く。 */
.acd-question-slide.acd-slide-exit {
  transform: translateX(-24px);
  opacity: 0;
}
@keyframes acd-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.acd-fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}
.acd-fieldset legend {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0;
  line-height: 1.6;
}
.acd-supplement {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--acd-muted);
  margin: 6px 0 14px;
}
.acd-case-intro {
  font-size: 13px;
  color: var(--acd-muted);
  background: var(--acd-bg-soft);
  border-radius: var(--acd-radius);
  padding: 12px 14px;
  margin: 0 0 16px;
}

/* ---- 選択行（Q1/Q2/Q3/Q13 共通・設計書§5.3のUI再設計そのもの） ----
 * ネイティブradioは視覚的に隠し、行そのものを大きなタップターゲットにする。
 * ただし「色だけで選択状態を表現しない」ため、選択済みは
 *   背景色の変化 ＋ 枠線の色/太さ ＋ 右端のチェックアイコン
 * の3点併用にする。フォーカスリングは :focus-within で行に出す
 * （:has() を使わないのは、対応の古い端末でフォーカスが見えなくなるのを
 *  避けるため。radio自身は消さずに opacity:0 で残してある）。 */
.acd-option-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.acd-option-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  min-height: 52px;
  border: 1.5px solid #07132D;
  border-radius: var(--acd-radius);
  cursor: pointer;
  background: var(--acd-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.acd-option-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.acd-option-row:focus-within {
  outline: 3px solid var(--acd-cluster-current, var(--acd-navy-light));
  outline-offset: 2px;
}
.acd-option-row:hover {
  border-color: #07132D;
  background: #07132D;
  color: #fff;
}
.acd-option-row-selected {
  background: #07132D;
  border-color: #07132D;
  color: #fff;
}
/* ★選択済み行でもフォーカスリングを消さないこと。
   紺色の塗りつぶしは「選択されている」ことの表示で、**フォーカスがどこにあるか**は
   表していない。実ラジオは 1px の透明要素なので、ここで outline を消すと
   選択済みの行へタブで戻ってきたときに画面が一切変化せず、キーボードだけで
   操作している人が現在位置を見失う（WCAG 2.4.7）。
   リングは outline-offset で行の**外側**に出るため、紺の塗りつぶしとは重ならない。 */
.acd-option-label {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.6;
}
.acd-option-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--acd-border);
  background: var(--acd-bg);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acd-option-row-selected .acd-option-check {
  background: #fff;
  border-color: #fff;
  color: #07132D;
}
.acd-option-check-icon {
  display: block;
  width: 14px;
  height: 14px;
}

/* ---- Q2 職種（v4.1・タブUI＋「この中にあてはまる職種がない」独立配置）----
 * ★ 伊澤指摘「スクロールが面倒・タブで工夫」「まとめ方が雑」への対応。
 *   タブの見た目はクラスタカラーを使わない（結果が出る前の設問画面なので
 *   var(--acd-cluster-current) は中立側にしか倒れないが、タブ切替という
 *   ナビゲーション要素にタイプの色を先取りさせない意図でも意図的に中立配色に
 *   している）。アクティブ表示は下線＋文字色の変化のみ。 */
.acd-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 14px;
  border-bottom: 1.5px solid var(--acd-border);
}
.acd-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 9px 4px;
  border-radius: 0;
  background: transparent;
  color: var(--acd-muted);
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.acd-tab-btn:hover:not(:disabled) {
  filter: none;
  color: var(--acd-ink);
}
.acd-tab-btn-active {
  color: var(--acd-ink);
  border-bottom-color: var(--acd-navy);
}
.acd-tab-panel {
  margin: 0 0 4px;
}
/* 「この中にあてはまる職種がない」（fallback_option）はタブの外・下に独立配置。
 * 上に区切り線＋余白を空け、どのタブにも属さないことをはっきり示す（v3 R2指摘
 * の「誤タップ構造の除去」思想の継承）。 */
.acd-option-group {
  margin: 0 0 18px;
}
.acd-option-group-open {
  margin-top: 4px;
  padding-top: 18px;
}

/* ---- ナビゲーション ---- */
.acd-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.acd-next {
  width: 340px;
  max-width: 100%;
  align-self: center;
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
  background: #D29C08;
  /* ★文字色を #fff にしないこと。#D29C08 との比は 2.47:1 で、
     大きい文字の基準 3:1 すら下回る（制作チーム 2026-08-31 納品が実際にそうだった）。
     #201a04 は取り込み前から使っていた墨色で 7.02:1。金色の面は保ったまま通る。 */
  color: #201a04;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.acd-next:hover:not(:disabled) {
  filter: none;
  background: #fff;
  color: #201a04;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.12);
}
.acd-back {
  width: 340px;
  max-width: 100%;
  align-self: center;
  min-height: 50px;
  font-size: 16px;
  background: var(--acd-bg-soft);
  color: var(--acd-ink);
}


/* ============================================================================
 * 7. ベクトル設問（Q4-Q12・二者択一・自動遷移。設計書§5.2/§7.3）
 * ============================================================================
 * A/Bの極性はどこにも表示しない（設問文＋2つの選択肢テキストのみ）。
 * タップで即座にバウンス（180ms）→ 250ms横スライドで次の設問へ。
 * この数値は widget-js の BOUNCE_MS / SLIDE_MS と一致させること（ズレると
 * 「250msスライドのつもりが400ms後に次が来る」手触りの悪さが出る）。
 */
.acd-vector-fieldset legend {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.6;
}
.acd-vector-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acd-vector-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 84px;
  padding: 18px 20px;
  border: 1.5px solid #07132D;
  border-radius: var(--acd-radius-lg);
  background: var(--acd-bg);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.6;
  color: var(--acd-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.18s ease;
}
.acd-vector-choice:hover:not(:disabled) {
  border-color: #07132D;
  background: #07132D;
  color: #fff;
  filter: none;
}
.acd-vector-choice-bounce {
  background: var(--acd-bg-soft);
  border-color: var(--acd-navy);
  box-shadow: var(--acd-shadow-card);
  animation: acd-choice-bounce 180ms ease;
}
.acd-vector-choice-fade {
  opacity: 0.3;
}
@keyframes acd-choice-bounce {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 600px以上（デスクトップでの集中モード）では横2列比較。
 * モバイルは常に縦積みが基本方針（設計書§7.4・375px基準）。 */
@media (min-width: 600px) {
  .acd-vector-choices {
    flex-direction: row;
    align-items: stretch;
  }
  .acd-vector-choice { flex: 1 1 0; }
}

/* ============================================================================
 * 8. リビール演出（設計書§7.3）
 * ============================================================================
 * タイムライン: 「分析中…」2.5秒パルス → 0.3秒フェード →
 * タイプ名+キャラが scale(0.85→1.05→1) 0.6秒スプリング＋紙吹雪1回。
 * リング2枚は擬似要素で描く（widget-js は空の .acd-reveal-spinner を出すだけ）。
 */
.acd-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.acd-reveal-spinner {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 0 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--acd-cluster-current, var(--acd-accent)) 0 26%, transparent 27%);
}
.acd-reveal-spinner::before,
.acd-reveal-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--acd-cluster-current, var(--acd-accent));
  animation: acd-pulse-ring 2.5s ease-in-out infinite;
}
.acd-reveal-spinner::after { animation-delay: 0.6s; }
@keyframes acd-pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.85; }
  50%  { transform: scale(1.2); opacity: 0.25; }
  100% { transform: scale(0.85); opacity: 0.85; }
}
.acd-reveal-text {
  font-size: 14px;
  color: var(--acd-muted);
  margin: 0;
  text-align: center;
}
.acd-reveal-fadeout {
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ---- 紙吹雪（外部ライブラリ不使用・簡易パーティクル）----
 * widget-js が .acd-confetti-layer 内に .acd-confetti-piece(.is-a/.is-b) を
 * 16個 append し、各要素へ left(%) と --acd-confetti-x（横方向の着地距離）・
 * --acd-confetti-rot（回転角）・--acd-confetti-delay（開始遅延）を渡す。
 * 色はクラスタの2色（base/dark）を交互に（設計書§7.3「クラスタ2色」）。 */
.acd-confetti-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.acd-confetti-piece {
  position: absolute;
  top: 10%;
  width: 7px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: acd-confetti-fall 900ms ease-in forwards;
  animation-delay: var(--acd-confetti-delay, 0ms);
}
.acd-confetti-piece.is-a { background: rgba(255, 255, 255, 0.95); }
.acd-confetti-piece.is-b { background: rgba(255, 255, 255, 0.55); }
@keyframes acd-confetti-fall {
  0%   { transform: translate3d(0, -8px, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(var(--acd-confetti-x, 0), 150px, 0) rotate(var(--acd-confetti-rot, 360deg)); opacity: 0; }
}

/* ============================================================================
 * 9. submitting / error
 * ============================================================================ */
.acd-submitting,
.acd-error,
.acd-unavailable {
  text-align: center;
  padding: 40px 12px;
  color: var(--acd-muted);
}
.acd-error p,
.acd-unavailable p {
  text-align: center;
  color: var(--acd-error);
  margin-bottom: 20px;
}
.acd-retry {
  width: 100%;
  max-width: 280px;
  background: var(--acd-bg-soft);
  color: var(--acd-ink);
}

/* ============================================================================
 * 10. 結果 ブロック1: タイプカード（.acd-type-card・設計書§6.1）
 * ============================================================================
 * 主役・1画面スクショ完結（375px幅で約660px以内）。クラスタカラーの
 * グラデーション背景を敷く。
 *
 * ★ キャラクター画像は必ず表示サイズを固定すること。素の <img> は
 *   480x480 の実寸で描かれ、カードが782pxまで伸びて「1画面完結」が壊れる
 *   （Opus 5レビューB1-4）。
 * ★「画像として保存」ボタンはカード外（.acd-type-card-actions）。
 */
.acd-result {
  background: linear-gradient(180deg, var(--acd-cluster-current-soft, var(--acd-bg-soft)) 0%, transparent 340px);
}
/* v4.2 IA設計書§1.1/§1.4: 前置きの説明文（result_intro/positioning_notice/hero）を
 * 全廃し、見出しは「カードの前置きラベル」であることが分かる eyebrow 表記へ
 * 縮小した。視覚的な主見出しはカード内のタイプ名（.acd-type-name）が担う。 */
.acd-result-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--acd-muted);
  text-align: center;
  margin: 8px 0 14px;
}
/* v4.2新設: 注意書きボックス（IA設計書§1.2）。散っていた result_intro /
 * positioning_notice / hero / equal_footing_note の役割をここへ集約する。
 * 見出しは付けず、脚注として分かるサイズ差だけで十分という設計判断。 */
.acd-result-notes {
  font-size: 12px;
  line-height: 1.7;
  color: var(--acd-muted);
  background: var(--acd-bg-soft);
  border-radius: var(--acd-radius);
  padding: 12px 14px;
  margin: 0 0 20px;
}
.acd-result-notes p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--acd-muted);
}
.acd-result-notes p:last-child { margin-bottom: 0; }

.acd-type-card {
  position: relative;
  text-align: center;
  padding: 20px 18px 22px;
  margin: 0 0 10px;
  border-radius: var(--acd-radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--acd-cluster-current, var(--acd-accent)) 0%, var(--acd-cluster-current-dark, var(--acd-accent-dark)) 100%);
  color: #fff;
  box-shadow: var(--acd-shadow-card);
}
.acd-type-card p,
.acd-type-card h3 { text-align: center; }
.acd-type-card-enter {
  animation: acd-reveal-spring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes acd-reveal-spring {
  0%   { transform: scale(0.85); opacity: 0; }
  55%  { transform: scale(1.05); opacity: 1; }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.acd-type-cluster-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 12px;
  line-height: 1.6;
}
.acd-type-visual {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.acd-type-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* キャラ画像欠損時のフォールバック（設計書§7.2）: タイプ名の頭文字。
 * 既定は非表示で、widget-js が <img> の onerror で -visible を付ける。
 * レイアウト（104px円形）は崩れない。 */
.acd-type-fallback-icon {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
.acd-type-fallback-icon-visible { display: flex; }
/* v4.2 IA設計書§4: 「× 生成AI領域」の記号表示（☓に見える誤読）をやめ、
 * タイプ名の直上へ連体修飾のキッカーとして置く（小さく「生成AI領域の」→
 * 大きく「スペシャリスト型」）。強いサイズコントラストで修飾関係を示す。 */
.acd-type-domain-kicker {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2px;
  line-height: 1.4;
}
.acd-type-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.35;
}
.acd-type-tag {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px;
}
/* v4.2新設: keywordsチップが何の語か分からない指摘への対応キャプション
 * （IA設計書§5）。 */
.acd-type-keywords-caption {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 6px;
}
.acd-type-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.acd-type-keyword {
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 3px 12px;
  line-height: 1.6;
  list-style: none;
}
/* v4.2: キッカー〜keywords を包むラッパー。画面ではブロック要素として
 * 何も変えない（見た目の責任は個々のクラスが持つ）。min-width:0 は、
 * PDF用シートで横並びの flex 子要素になったときにCJKテキストが
 * min-content（1文字幅）まで潰れるのを防ぐため（9タイプ一覧カードで
 * 実機で踏んだのと同じ罠・.acd-type-directory-text のコメント参照）。 */
.acd-type-card-text {
  min-width: 0;
}
.acd-type-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.acd-save-image-btn,
.acd-save-pdf-btn {
  width: auto;
  min-width: 148px;
  background: var(--acd-bg);
  border: 1.5px solid var(--acd-border);
  color: var(--acd-navy);
  font-size: 13.5px;
  font-weight: 700;
}
/* 「PDFで保存」は保存系の主導線なので枠をクラスタ色にして1段だけ強める
 * （塗りにはしない —— 登録CTAより目立ってはいけない）。 */
.acd-save-pdf-btn {
  border-color: var(--acd-cluster-current, var(--acd-accent));
}
/* 用紙サイズ。ラベルは aria-label で持たせているので画面には出さない
 * （選択肢が A4 / A3 の2つだけで、隣が「PDFで保存」なので自明）。
 * 高さは他のタップ要素と同じ 44px 以上を確保する。 */
.acd-print-paper-select {
  font-family: inherit;
  font-size: 13.5px;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--acd-border);
  border-radius: 999px;
  background: var(--acd-bg);
  color: var(--acd-navy);
  cursor: pointer;
}

/* ============================================================================
 * 11. 結果 ブロック2: タイプ解説＋スペクトラムバー（設計書§6.2）
 * ============================================================================ */
.acd-type-detail {
  margin: 0 0 20px;
}
.acd-type-description {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--acd-ink);
  margin: 0 0 12px;
}
/* strengths/watch_out/org_note は「持ち味/気をつけたいこと/会社の規模で変わる役割」
 * という直上のキャプション（.acd-detail-caption）だけで意味を区別させる。本文自体の
 * サイズ・行間・余白・文字色は3つとも完全に同一にする（伊澤FB「サイズや書式が若干
 * 異なり見づらい」への直接対応。以前は watch_out だけ muted 色にしていたが、
 * キャプションが役割を明示する以上、本文側の色分けは不要かつ不揃いの原因だった）。 */
.acd-type-strengths,
.acd-type-orgnote,
.acd-type-watchout {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--acd-ink);
  margin: 0 0 10px;
}
/* v4.2新設: 持ち味/気をつけたいこと/会社の規模で変わる役割 のキャプション
 * （IA設計書§1.3）。キャプション→本文の2階層を9タイプ共通で機械的に成立させる。 */
.acd-detail-caption {
  font-size: 12px;
  font-weight: 700;
  color: var(--acd-cluster-current, var(--acd-accent));
  letter-spacing: 0.05em;
  margin: 20px 0 6px;
}
.acd-occupations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.acd-occupations-list li {
  font-size: 12.5px;
  color: var(--acd-ink);
  background: var(--acd-bg-soft);
  border: 1px solid var(--acd-border);
  border-radius: 999px;
  padding: 5px 12px;
  list-style: none;
}

/* v4.2新設: スペクトラムが何を表す目盛りかの1行説明（IA設計書§1.3）。 */
.acd-spectrum-note {
  font-size: 12px;
  color: var(--acd-muted);
  margin: 0 0 12px;
}
/* ---- スペクトラムバー: 両極ラベル＋位置マーカーのみ。数値は一切表示しない
 *      （設計書§6.2・§9.2 J3準拠）。マーカーの横位置は widget-js が
 *      style="left: NN%" でインライン指定するので、ここで left を定義しない。 ---- */
.acd-spectrum {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 4px;
}
.acd-spectrum-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.acd-spectrum-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--acd-border);
}
.acd-spectrum-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--acd-cluster-current, var(--acd-accent-dark));
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--acd-border);
  transform: translate(-50%, -50%);
}
.acd-spectrum-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--acd-muted);
  line-height: 1.4;
}
.acd-spectrum-labels span:last-child { text-align: right; }

/* ============================================================================
 * 12. 結果 ブロック3: タイプマップ（v4.1・9タイプ全部を名前付きで描く）
 * ============================================================================
 * 2軸平面（横: 技術⇄事業／縦: 作り込む⇄決める）。widget-js が
 * viewBox="0 0 375 315" のインラインSVGを1枚描く。
 *
 * ★ viewBoxは 300x220 → 375x275 → 375x315 へ段階的に拡張した（衝突回避のため
 *   名前ラベル分・v4.2で軸端＋四隅エリアラベル分の余白を増やす・伊澤指示）が、
 *   .acd-map-svg の表示幅は引き続き max-width:300px のまま **変えていない**
 *   （tests/test_aigent_career_diag_widget_css_parity.py::TestMapShapesAreVisible::
 *   test_map_section_is_not_squeezed_into_the_300px_dot_frame が固定値で検査する）。
 *   つまり実際の表示は 300/375=0.8倍に縮小される。widget-js側はドット半径・
 *   矢印の線幅・フォントサイズ等をすべて 1.25倍（0.8の逆数）にして、縮小後の
 *   見た目のサイズが旧実装（300x220時代）と揃うように補正してある
 *   （aigent-career-diag.js の MAP_* 定数コメント参照）。ここのCSS側の数値も
 *   同じ1.25倍で揃えてある。
 * ★ 300px正方の描画枠は **SVGだけ** に掛ける。section（見出し＋SVG＋
 *   凡例＋免責の縦積み）へ掛けると中身が300px角へ潰れる
 *   （Opus 5レビューB1-3の実測 300x557px）。
 * ★ SVG図形は fill/stroke をクラスで必ず指定する。未定義だと ドットは
 *   初期値 fill:#000 の黒丸、線は stroke:none で不可視になり、凡例だけが
 *   「実線矢印＝…／破線＝…」と説明する状態になる（同 B1-2 ＝ R3の再生産）。
 */
.acd-type-map-section {
  margin: 0 0 20px;
  padding: 16px 14px;
  background: var(--acd-bg-soft);
  border-radius: var(--acd-radius-lg);
}
.acd-type-map-section h3 { margin-top: 0; }
.acd-map-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* ---- v4.2 IA設計書§3.1: 4象限のクラスタカラーティントは廃止 ----
 * 実座標検証でreaders(t4/t6)・openers(t2/t5)が象限をまたいで分布しており
 * 「4クラスタ=4象限」は成立しないため（widget-js typeMapSvgMarkup側コメント
 * 参照）。クラスタは下の凡例クラスタ行（.acd-map-cluster-legend）でのみ表現する。
 * 象限の目安は下の軸端ラベル・四隅エリアラベルに置き換えた。 */
.acd-map-axis-line {
  stroke: var(--acd-border);
  stroke-width: 1;
}
.acd-map-axis-arrowhead {
  fill: var(--acd-border);
  stroke: none;
}
.acd-map-axis-end {
  font-family: var(--acd-font);
  font-size: 10.5px;
  fill: var(--acd-muted);
  stroke-width: 3.5px;
}
.acd-map-quadrant-label {
  font-family: var(--acd-font);
  font-size: 10px;
  fill: var(--acd-muted);
  opacity: 0.55;
  stroke-width: 3px;
}

/* ---- SVG図形 ----
 * ★ .acd-map-tile-connected と .acd-map-tile-other は v4.1のwidget-jsからは
 *   もう出力されない（9タイプ全部を .acd-map-dot-* で統一表示するようになった
 *   ため）が、上記テストが選択肢として固定で存在を要求するので削除しない。 */
.acd-map-tile-self {
  fill: var(--acd-cluster-current, var(--acd-accent-dark));
  stroke: #fff;
  stroke-width: 3.1;
}
.acd-map-tile-connected {
  fill: var(--acd-bg);
  stroke: var(--acd-cluster-current, var(--acd-navy-light));
  stroke-width: 2;
}
.acd-map-tile-other {
  fill: #c8ccd4;
  stroke: none;
}
/* v4.1: 自分以外の8タイプはクラスタカラーの薄いドット（設計書指示）。
 * fillはクラスタごとの静的な色（このドットのクラスタは閲覧者自身のクラスタとは
 * 限らないため var(--acd-cluster-current) は使えない。閲覧者自身のクラスタは
 * .acd-map-tile-self 側のみが使う）。 */
.acd-map-dot-other {
  stroke: none;
  fill-opacity: 0.55;
}
.acd-map-dot-creators { fill: var(--acd-c-creators); }
.acd-map-dot-openers { fill: var(--acd-c-openers); }
.acd-map-dot-readers { fill: var(--acd-c-readers); }
.acd-map-dot-movers { fill: var(--acd-c-movers); }
.acd-map-arrow-solid {
  stroke: var(--acd-cluster-current, var(--acd-navy-light));
  stroke-width: 2;
  fill: none;
}
.acd-map-arrowhead-solid {
  fill: var(--acd-cluster-current, var(--acd-navy-light));
  stroke: none;
}
.acd-map-arrow-dashed {
  stroke: var(--acd-muted);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  fill: none;
}
.acd-map-arrowhead-dashed {
  fill: var(--acd-muted);
  stroke: none;
}
/* ---- 文字の白フチ（ハロー）----
 * ラベルは矢印・軸線より後ろに書かれる＝最前面なので、フチを地の色で描いてから
 * 文字を塗ると、下を通った線がフチのぶんだけ隠れて文字が潰れない。
 *
 * なぜ必要か: 矢印の迂回（mapLineMarkup の制御点グリッド探索）は二次ベジェ1本
 * ぶんの自由度しかなく、9タイプが密集するこの図では「どのラベルとも交差しない
 * 制御点」が存在しない組み合わせが残る（自分9通りで実測11件・うち t3→t5、
 * t5→t3、t8→t7 など）。加えて軸の十字線は図の中央を必ず通るので、中央付近の
 * ラベル（t1・t4・t6 など）とは原理的に必ず重なる。線を退かす方向では解けない
 * ため、地図製図の定石どおり文字側にフチを持たせて可読性を担保する。
 * ★ paint-order は「stroke → fill」の順に描く指定。逆（既定）だとフチが文字の
 *   上に乗って文字が細る。 */
.acd-map-tile-label,
.acd-map-tile-self-label,
.acd-map-axis-end,
.acd-map-quadrant-label {
  paint-order: stroke fill;
  stroke: var(--acd-bg-soft);
  stroke-linejoin: round;
}
.acd-map-tile-label {
  font-family: var(--acd-font);
  font-size: 11.9px;
  fill: var(--acd-muted);
  stroke-width: 3.5px;
}
.acd-map-tile-self-label {
  font-family: var(--acd-font);
  font-size: 13.8px;
  font-weight: 700;
  fill: var(--acd-ink);
  stroke-width: 4px;
}

/* ---- v4.2 IA設計書§3.2-3: 軸の説明はSVG内の十字線＋端ラベルへ移したため、
 * 「⇄」で連結する前置き行（旧 .acd-map-axis-labels）は廃止した。代わりに
 * クラスタの色チップ＋名前を並べる凡例行を置く（クラスタは象限と一致しないため、
 * ドットの色の意味はここでだけ定義する＝§3.1）。 ---- */
.acd-map-cluster-legend {
  margin: 10px 0 0;
}
.acd-map-cluster-legend-caption {
  font-size: 11px;
  color: var(--acd-muted);
  margin: 0 0 6px;
}
.acd-map-cluster-legend-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.acd-map-cluster-legend-item {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--acd-muted);
}
.acd-map-cluster-legend-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.acd-map-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--acd-muted);
  margin: 10px 0 0;
  padding: 0;
}
.acd-map-legend li { list-style: none; }
.acd-map-disclaimer {
  font-size: 11.5px;
  color: var(--acd-muted);
  margin: 8px 0 0;
}

/* ============================================================================
 * 12.5 結果: 9タイプ一覧（v4.2 IA設計書§2.3で再設計。pathsの後ろへ移動）
 * ============================================================================
 * type_directory は事前配布可のデータ（伊澤裁定）。旧v4.1は「名前＋タグだけの
 * 縦リスト」で、伊澤FB「羅列だけあって意味があまりない」の対象そのものだった。
 * v4.2はキャラクター画像を必須にし、モバイルは1枚ずつしっかり読める横スクロール
 * カルーセル、PCはメインコンテンツではないと分かるトーンダウン3列グリッドにする。
 * ブレークポイントは既存の @media (min-width: 600px)（本ファイル8節・
 * デスクトップ集中モードの2列比較と同じ値）を流用し、新しい値を作らない。
 *
 * 1文要約（.acd-type-directory-summary）は2026-08-18のv1で追加した。文言は事前配布
 * バンドルではなくsubmit応答（type_directory_summaries）から来るため、応答に無い
 * ときは行ごと現れない（widget-js側 fail-closed）。26字以内をcopy lintで強制して
 * いるので -webkit-line-clamp は使わない —— 拡大表示やユーザースタイルシートで
 * 文が「…」で切れる事故を、切り詰めの必要そのものを消して防ぐ（設計書
 * workspace/260818_AIgent_診断v1_タイプ一覧要約とLLM解析耐性_設計.md §2.1・§5）。
 */
.acd-type-directory {
  margin: 0 0 20px;
}
.acd-type-directory h3 { margin-top: 0; }
/* 見出し直下の免責再掲（equal_footing_note）。一覧セクション単体を切り取っても
 * 「優劣はない」が読める状態を保つ（設計書§3.3-3）。 */
.acd-type-directory-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--acd-muted);
  margin: 0 0 10px;
}

/* ---- モバイル既定: 横スクロールカルーセル（scroll-snap） ---- */
.acd-type-directory-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.acd-type-directory-item {
  list-style: none;
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 14px 12px;
  border-radius: var(--acd-radius);
  border: 1px solid var(--acd-border);
  background: var(--acd-bg);
}
.acd-type-directory-item-self {
  border-color: var(--acd-cluster-current, var(--acd-navy));
  background: var(--acd-cluster-current-soft, var(--acd-bg-soft));
}
.acd-type-directory-self-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--acd-cluster-current-dark, var(--acd-navy));
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.5;
}
.acd-type-directory-visual {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 0 8px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--acd-bg-soft);
}
.acd-type-directory-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像欠損時のフォールバック（タイプカードの .acd-type-fallback-icon と同型・
 * widget-js の onerror で -visible を付ける）。 */
.acd-dir-fallback-icon {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--acd-muted);
}
.acd-dir-fallback-icon-visible { display: flex; }
/* cluster/name/tagをまとめる1個のラッパー（詳細はPC行レイアウトのコメント参照）。
 * min-width:0 は横並び時にflexアイテムがテキストの内容幅で突っ張らないための
 * 定石で、モバイルの縦積み（column方向）でも無害。 */
.acd-type-directory-text {
  min-width: 0;
}
.acd-type-directory-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--acd-muted);
  margin: 0 0 4px;
}
.acd-type-directory-mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.acd-type-directory-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--acd-ink);
  margin: 0 0 2px;
}
.acd-type-directory-item-self .acd-type-directory-name {
  color: var(--acd-cluster-current-dark, var(--acd-ink));
}
.acd-type-directory-tag {
  font-size: 12px;
  line-height: 1.5;
  color: var(--acd-muted);
  margin: 0;
}
/* 1文要約（モバイル12px。文字欄216px＝約18字/行なので26字上限で2行以内）。 */
.acd-type-directory-summary {
  font-size: 12px;
  line-height: 1.6;
  color: var(--acd-muted);
  margin: 4px 0 0;
}
.acd-cluster-swatch-creators { background: var(--acd-c-creators); }
.acd-cluster-swatch-openers { background: var(--acd-c-openers); }
.acd-cluster-swatch-readers { background: var(--acd-c-readers); }
.acd-cluster-swatch-movers { background: var(--acd-c-movers); }

/* ---- PC（min-width:600px）: メインコンテンツではないのでグリッドで
 * トーンダウンする（伊澤FB「PCはコンパクトに」）。カードは横並びレイアウトへ
 * 変え、枠線・影を落として --acd-bg-soft の薄い面だけにする。 ---- */
/* ★ 列数は 3 ではなく 2。結果カラムの実幅は viewport が広くても約440pxで頭打ち
 * なので、3列にすると1枚141px→画像40pxを引いた文字欄が73pxしか残らず、
 * 13pxの和文が1行5文字で折り返して「フィールド／エンジニア／型」のように
 * 型だけが行に取り残される（9枚中5枚で発生・実測）。2列なら文字欄148pxで
 * 7枚が1行に収まり、タグライン（〜14文字）も1行で読める。 */
@media (min-width: 600px) {
  .acd-type-directory h3 { font-size: 15px; }
  .acd-type-directory-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .acd-type-directory-item {
    flex: initial;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: var(--acd-bg-soft);
  }
  .acd-type-directory-item-self {
    background: var(--acd-cluster-current-soft, var(--acd-bg-soft));
    box-shadow: inset 0 0 0 1.5px var(--acd-cluster-current, var(--acd-navy));
  }
  .acd-type-directory-self-badge {
    top: 4px;
    right: 6px;
  }
  .acd-type-directory-visual {
    width: 40px;
    height: 40px;
    margin: 0;
    flex: 0 0 auto;
  }
  .acd-dir-fallback-icon { font-size: 15px; }
  /* ★ cluster/name/tagの3pをここで初めて個別のflex子要素にしてはいけない
   * （実機確認で発見: flex-shrinkの既定挙動でCJKテキストがmin-content=1文字幅
   * まで潰れ、1文字ずつ改行される＝縦書きに見える事故になる）。
   * ラッパー1個をflexアイテムにし、flex:1 1 auto/min-width:0で残り幅を
   * まとめて渡すことで、中の3pは通常のブロック幅として折り返す。 */
  .acd-type-directory-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .acd-type-directory-cluster {
    justify-content: flex-start;
    margin: 0 0 2px;
  }
  .acd-type-directory-name { font-size: 13px; }
  .acd-type-directory-tag { font-size: 11px; }
  /* PCは文字欄148px・11pxで約13字/行。26字上限なので2行に収まる（カード高は
   * 2行ぶん伸びるが、枠線なし・--acd-bg-soft のトーンダウン面は維持する）。 */
  .acd-type-directory-summary { font-size: 11px; margin-top: 2px; }
}

/* ============================================================================
 * 13. 結果 ブロック4: 深める・広げる・対岸（設計書§6.4）
 * ============================================================================ */
.acd-paths {
  margin: 0 0 20px;
}
.acd-deepen-heading-note,
.acd-expand-heading-note,
.acd-crossing-heading-note {
  font-size: 12px;
  color: var(--acd-muted);
  margin: -8px 0 10px;
}
.acd-deepen-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--acd-ink);
  background: var(--acd-bg-soft);
  border-radius: var(--acd-radius);
  padding: 14px 16px;
  margin: 0 0 8px;
}
.acd-newcomer-note {
  font-size: 12.5px;
  color: var(--acd-muted);
  margin: 0;
}
.acd-expand-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* .acd-expand-card（広げる・2枚）と .acd-crossing-card（対岸・1枚）は同じ骨格で
 * アクセントの色・線種だけを変える。対岸は「珍しいが実在する道」の位置づけなので
 * 彩度を落として控えめに扱う（設計書§2.4）。 */
.acd-expand-card,
.acd-crossing-card {
  padding: 14px 16px;
  border-radius: var(--acd-radius);
  border: 1px solid var(--acd-border);
  border-left-width: 4px;
}
.acd-expand-card {
  background: var(--acd-bg);
  border-left-color: var(--acd-cluster-current, var(--acd-navy-light));
}
.acd-crossing-card {
  border-left-color: var(--acd-muted);
  border-left-style: dashed;
  background: var(--acd-bg-soft);
}
.acd-expand-target,
.acd-crossing-target {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--acd-ink);
  margin: 0 0 4px;
}
.acd-expand-note,
.acd-crossing-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--acd-muted);
  margin: 0;
}

/* ============================================================================
 * 14. 求人票の傾向（.acd-snapshot・R8）
 * ============================================================================ */
.acd-snapshot {
  background: var(--acd-navy);
  color: #fff;
  border-radius: var(--acd-radius);
  padding: 20px;
  margin: 0 0 20px;
}
.acd-snapshot h3 { color: #fff; margin-top: 0; }
.acd-snapshot p { color: #fff; }
.acd-snapshot-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.acd-snapshot-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--acd-radius);
  padding: 14px;
}
.acd-snapshot-label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.acd-snapshot-pct {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0;
}
.acd-snapshot-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  margin: 2px 0 8px;
}
.acd-snapshot-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fff;
}
.acd-snapshot-scope {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.acd-snapshot-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 8px 0 0;
}

/* ============================================================================
 * 15. 結果 ブロック5: 状況判断ケース解説（アコーディオン廃止・常時表示・設計書§6.5）
 * ============================================================================
 * v3は <details>/<summary> で「実務での落とし穴」を折りたたんでいた
 * （R5指摘: クリッカブルと気づけない）。v4は完全に常時表示のセクションカードへ
 * 転換し、見出しと本文をボーダー/背景色で明確に区切る。
 */
.acd-case-result { margin: 0 0 20px; }
.acd-case-result-subheading {
  font-size: 12px;
  color: var(--acd-muted);
  margin: -8px 0 12px;
}
.acd-case-result-item {
  background: var(--acd-bg);
  border: 1px solid var(--acd-border);
  border-radius: var(--acd-radius);
  overflow: hidden;
  margin: 0 0 14px;
  padding: 0 16px 14px;
}
.acd-case-result-choice {
  margin: 0 -16px 14px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--acd-navy);
}
.acd-case-result-item h4 {
  font-size: 11.5px;
  color: var(--acd-muted);
  padding-top: 12px;
  margin: 12px 0 6px;
  border-top: 1px solid var(--acd-border);
}
.acd-case-result-item .acd-fb-orientation {
  font-size: 13.5px;
  color: var(--acd-ink);
  line-height: 1.75;
  margin: 0;
}
.acd-case-result-item .acd-fb-pitfall {
  font-size: 13px;
  line-height: 1.75;
  color: var(--acd-ink);
  margin: 0;
}
.acd-fb-relations {
  font-size: 12.5px;
  color: var(--acd-muted);
  line-height: 1.8;
  padding-left: 18px;
  margin: 0;
}
.acd-fb-bridge {
  font-size: 13px;
  line-height: 1.75;
  color: var(--acd-muted);
  margin: 12px 0 0;
}

/* ============================================================================
 * 16. 結果 ブロック6: 登録CTA（設計書§6.6）
 * ============================================================================ */
.acd-cta {
  margin: 0 0 22px;
  padding: 18px 16px;
  border-radius: var(--acd-radius-lg);
  background: var(--acd-cluster-current-soft, var(--acd-bg-soft));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acd-cta-lead {
  font-size: 13px;
  color: var(--acd-ink);
  margin: 0;
}
.acd-cta-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--acd-ink);
  margin: 0;
}
.acd-cta-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acd-cta-items li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--acd-ink);
  list-style: none;
}
.acd-cta-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acd-cluster-current, var(--acd-accent));
}
.acd-cta-primary {
  width: 100%;
  background: linear-gradient(180deg, var(--acd-cluster-current, var(--acd-accent)), var(--acd-cluster-current-dark, var(--acd-accent-dark)));
  color: #fff;
  font-weight: 700;
}
/* v4.2 IA設計書§6: 副CTA（LINE・cfg.lineUrl設定時のみ描画）。主CTAと同幅の
 * アウトラインボタンで、視覚的に主CTAより一段控えめにする。 */
.acd-cta-secondary {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--acd-cluster-current, var(--acd-accent));
  color: var(--acd-cluster-current, var(--acd-accent));
  font-weight: 700;
  text-align: center;
}
.acd-cta-secondary-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--acd-muted);
  margin: -2px 0 0;
  text-align: center;
}
/* テキストリンク（結果を引き継がずに登録する）。ボタン装飾を持たせず下線リンク
 * 風にし、主/副CTAより明らかに軽い扱いだと分かるようにする。 */
.acd-cta-plain-link {
  width: auto;
  min-height: 40px;
  padding: 4px 0;
  margin: 2px auto 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--acd-muted);
  background: none;
  border: none;
  text-decoration: underline;
}

/* ============================================================================
 * 16.5 登録ドック（結果画面の下端に吸着するボタン帯・伊澤氏依頼「登録導線を
 *      分かりやすく」・第1段。設計は Fable 案の推奨案・伊澤氏承認済み）
 * ============================================================================
 * position:fixed を選ぶ理由: 非表示中にレイアウト上の場所を取らない（sticky
 * だと末尾に空の帯が残る）。root自身が position:fixed; inset:0 の全画面
 * オーバーレイなので、fixed の基準はオーバーレイと同じ矩形になり、宿主LPには
 * 一切CSSを足さない。可視・不可視は widget-js（wireCtaDock）が
 * .acd-cta-dock-visible の付け外しと aria-hidden の切替で行う。 */
.acd-widget.acd-focus-mode > .acd-cta-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--acd-border);
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  /* ★ visibility は 0.2秒の退出アニメーションのあとに効く（下の transition の
   *   transition-delay）。その間も帯は position:fixed の最前面に居座るので、
   *   pointer-events を切らないと「見えていないのに押せる」時間ができる。
   *   スクロールで隠れた直後に背後の主CTAや「回答をやり直す」を押すと、
   *   登録画面へ誤遷移する（R2 の誤タップ事故と同じ形）。
   *   pointer-events は transition の対象にならないので即座に効く。
   *   キーボード操作の抑止は widget-js が dock ボタンの tabindex で行う
   *   （visibility が効くまでは focus も通ってしまうため）。 */
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
/* ★ セレクタは基底ルール（直上・.acd-widget.acd-focus-mode > .acd-cta-dock、
 *   クラス3個 = 詳細度 0,3,0）以上の詳細度にすること。`.acd-cta-dock.acd-cta-dock-visible`
 *   （クラス2個 = 0,2,0）だと同一シート内で基底ルールに負け、class/aria-hidden は
 *   付いても visibility:hidden のまま解除されない（実測。track()は飛ぶのに画面には
 *   一度も出ない、という嘘のファネルになった）。!important では直さない
 *   （このファイルは詳細度で素直に勝つ方針。20節の用紙サイズで同じ罠を踏んだ
 *   顛末を参照）。 */
.acd-widget.acd-focus-mode > .acd-cta-dock.acd-cta-dock-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
.acd-cta-dock-inner {
  max-width: var(--acd-focus-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.acd-cta-dock-lead {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--acd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acd-cta-dock-btn {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--acd-cluster-current, var(--acd-accent)), var(--acd-cluster-current-dark, var(--acd-accent-dark)));
}
/* ドックが出ている間、結果末尾（フッターの「回答をやり直す」）がドックの帯に
 * 隠れないよう .acd-result の下パディングを底上げする。IntersectionObserver
 * 非対応環境のフォールバック（常時表示）は逃げのスクロールが無いため、ここで
 * 余白を確保しないと最大スクロール位置でもボタンが押せない（実測：
 * ボタン中央の elementFromPoint がドックを返す）。可視化はJS（wireCtaDock）が
 * root へ `.acd-cta-dock-open` を付け外しして伝える（フォールバック表示でも
 * 通常表示でも同じクラスで効く）。
 * 130px の内訳: 基準の40px（4節の共通padding-bottom）+ ドック実測高69px
 * （320px幅・375px幅どちらも同じ実測値）+ 安全マージン約20px。実測値は
 * 現行の文言（1行）が前提で、文言が2行になる等でドック高が伸びると再度
 * 実測して見直すこと（固定値でしか当てられないため、根拠のない値を減らす
 * より余裕を残す側に倒している）。 */
.acd-widget.acd-focus-mode.acd-cta-dock-open > .acd-result {
  padding-bottom: 130px;
}

/* ============================================================================
 * 16.6 登録ティーザー（タイプ解説直後の1行・第1段）
 * ============================================================================
 * 色面は付けない（.acd-cta の帯と紛らわしくなるため）。印刷シート
 * （.acd-print-*）にはそもそも要素が出ない（widget-js側でrenderResult()が
 * 連結する側にしか置いていないため。printSheetDocument は typeDetailSectionHtml
 * を単独で再利用するのでティーザーは混入しない）。 */
.acd-cta-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 12px 0;
  border-top: 1px solid var(--acd-border);
  border-bottom: 1px solid var(--acd-border);
}
.acd-cta-teaser-text {
  font-size: 13.5px;
  color: var(--acd-ink);
  margin: 0;
}
.acd-cta-teaser-btn {
  background: transparent;
  border: 1.5px solid var(--acd-cluster-current, var(--acd-accent));
  color: var(--acd-cluster-current-dark, var(--acd-accent-dark));
  min-height: 44px;
  padding: 0 16px;
  width: auto;
  white-space: nowrap;
}

/* ============================================================================
 * 17. フッター（免責＋やり直し）
 * ============================================================================ */
.acd-footer {
  display: block;
}
.acd-disclaimer {
  font-size: 12px;
  line-height: 1.8;
  color: var(--acd-muted);
  border-top: 1px solid var(--acd-border);
  padding-top: 16px;
  margin: 0 0 14px;
}
.acd-cta-retry {
  width: auto;
  min-height: 44px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--acd-navy);
  background: none;
  border: none;
  text-decoration: underline;
}

/* ============================================================================
 * 18. prefers-reduced-motion（設計書§7.3「全モーションに必須」）
 * ============================================================================
 * widget-js側もJS判定（prefersReducedMotion）で演出の分岐（紙吹雪生成の
 * スキップ等）を行うが、CSS側でも二重に無効化する。transitionだけでなく
 * animationも明示的に止める。 */
@media (prefers-reduced-motion: reduce) {
  :host *,
  .acd-widget * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .acd-widget.acd-focus-mode::before { animation: none !important; }
  .acd-reveal-spinner::before,
  .acd-reveal-spinner::after,
  .acd-confetti-piece,
  .acd-vector-choice-bounce,
  .acd-type-card-enter,
  .acd-question-slide.acd-slide-enter {
    animation: none !important;
  }
  .acd-question-slide {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================================
 * 19. レスポンシブ（375px基準・設計書§7.4）
 * ============================================================================ */
@media (max-width: 480px) {
  .acd-snapshot-cards { grid-template-columns: 1fr 1fr; }
  .acd-type-name { font-size: 22px; }
}
@media (max-width: 359px) {
  .acd-type-visual { width: 88px; height: 88px; }
  .acd-type-name { font-size: 20px; }
}

/* ============================================================================
 * 20. PDF用シート（.acd-print-*）— A4/A3 1枚に組み直した印刷レイアウト
 * ============================================================================
 * 伊澤氏依頼 2026-09-09「診断結果をA4/A3 一枚でいい感じにレイアウトしてPDF出力」。
 *
 * ★ この節が効くのは widget-js が作る**別ドキュメント**（画面外の iframe）の
 *   中だけ。shadow root 側には .acd-print-* を持つ要素が存在しないので、
 *   画面表示へは一切影響しない。
 *
 * ★ その別ドキュメントは同じ aigent-career-diag.css を <link> し、ルート要素へ
 *   `class="acd-widget acd-print-sheet …"` を付ける。したがって
 *     - トークン（--acd-*）とベースリセットは `.acd-widget` 経由でそのまま効く
 *     - 結果画面の section（.acd-type-card / .acd-type-detail /
 *       .acd-type-map-section / .acd-paths / .acd-case-result / .acd-snapshot）の
 *       スタイルもそのまま再利用される
 *   この節が書くのは「1枚に収めるための箱組みと詰め」だけである。印刷用に
 *   文言や配色を書き直さない（copy.yaml と上の1節がSSOTのまま）。
 *
 * ★ 縮尺は widget-js の fitPrintSheet() が .acd-print-scale の
 *   transform: scale() で決める（9タイプで本文量が違うので固定倍率にできない）。
 *   この節で font-size をいじって詰めないこと —— 行送り・段組みとの比率が崩れ、
 *   縮尺探索が「収まったのに読めない」方向へ倒れる。
 *
 * ★ セレクタは必ず `.acd-print-sheet` 配下（0,2,0 以上）にする。上の各節と
 *   同じ specificity では、この節がファイル末尾にあることに依存した勝ち方に
 *   なり、節を移動した瞬間に静かに効かなくなる。
 */
.acd-widget.acd-print-sheet {
  --acd-print-w: 210mm;
  --acd-print-h: 297mm;
  box-sizing: border-box;
  width: var(--acd-print-w);
  /* 用紙と同寸にすると丸め誤差で空の2枚目が出ることがあるため 0.2mm 削る。 */
  height: calc(var(--acd-print-h) - 0.2mm);
  padding: 10mm 11mm 8mm;
  overflow: hidden;
  background: var(--acd-bg);
  /* 背景色・クラスタ色を印刷にも出す（既定では省略され、タイプカードが
   * 白抜き文字だけの白い箱になる）。 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* ★ 用紙クラスも `.acd-widget.` を付けて (0,2,0) にする。`.acd-print-sheet-a3`
 *   単独 (0,1,0) では上の `.acd-widget.acd-print-sheet` (0,2,0) の A4 既定値に
 *   負け、A3を選んでも A4 の紙面へ3段組みが載る（実測。マップが段幅の狭い
 *   ぶん小さくなり、A3なのにA4より読みにくいという形で表面化した）。 */
.acd-widget.acd-print-sheet-a4 {
  --acd-print-w: 210mm;
  --acd-print-h: 297mm;
}
.acd-widget.acd-print-sheet-a3 {
  --acd-print-w: 297mm;
  --acd-print-h: 420mm;
}
/* 使える面（padding の内側）。.acd-print-scale の縮尺計算はこの要素の
 * clientWidth/clientHeight を基準にする。 */
.acd-print-viewport {
  width: 100%;
  height: 100%;
}
.acd-print-scale {
  transform-origin: top left;
  display: flex;
  flex-direction: column;
}
/* 下限の縮尺でも収まらなかったときの退避。切り落とさず2枚へ流す。 */
.acd-widget.acd-print-sheet-overflow {
  height: auto;
  overflow: visible;
}
.acd-print-sheet-overflow .acd-print-viewport { height: auto; }
.acd-print-sheet-overflow .acd-print-cols {
  height: auto;
  overflow: visible;
  column-fill: balance;
}

/* ---- マストヘッド（発行元の1行＋タイプカードの横組み） ---- */
.acd-print-head {
  flex: 0 0 auto;
  margin: 0 0 12px;
}
.acd-print-brandline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 6px;
  margin: 0 0 10px;
  border-bottom: 2px solid var(--acd-cluster-current, var(--acd-accent));
}
.acd-print-brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--acd-navy);
}
.acd-print-brand-title {
  font-size: 13px;
  color: var(--acd-muted);
}
.acd-print-date {
  margin-left: auto;
  font-size: 13px;
  color: var(--acd-muted);
}
/* 画面では縦積み中央寄せのカードを、1枚では「バッジ／画像＋テキスト」の
 * 横組みへ組み替える（縦の占有をおよそ半分にして段組みへ面積を回す）。
 * バッジは画像より前にあるので .acd-type-card-text には入れられず、
 * flex の 100% 幅で1行取らせている。 */
.acd-print-sheet .acd-type-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  text-align: left;
  padding: 14px 18px;
  margin: 0;
  border-radius: var(--acd-radius);
  box-shadow: none;
}
.acd-print-sheet .acd-type-card p,
.acd-print-sheet .acd-type-card h3 { text-align: left; }
.acd-print-sheet .acd-type-cluster-label {
  flex: 0 0 100%;
  margin: 0;
}
.acd-print-sheet .acd-type-visual {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin: 0;
}
.acd-print-sheet .acd-type-card-text { flex: 1 1 0; }
.acd-print-sheet .acd-type-domain-kicker { margin: 0; }
.acd-print-sheet .acd-type-name { margin: 0 0 2px; }
.acd-print-sheet .acd-type-tag { margin: 0 0 7px; }
.acd-print-sheet .acd-type-keywords-caption { margin: 0 0 4px; }
.acd-print-sheet .acd-type-keywords { justify-content: flex-start; }

/* ---- 本文（段組み） ----
 * column-fill: auto ＝ 1段目を高さいっぱいまで埋めてから次の段へ。高さが
 * 足りないと**横へ段が増える**ので、fitPrintSheet() は横のあふれ
 * （scrollWidth > clientWidth）で「1枚に収まらない」を判定できる。
 * balance にすると全段が均等に伸びてこの判定が成立しない。 */
.acd-print-cols {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  column-gap: 30px;
  column-fill: auto;
  column-rule: 1px solid var(--acd-border);
}
.acd-print-cols-2 { column-count: 2; }
.acd-print-cols-3 { column-count: 3; }
/* fitPrintSheet() が「1枚に収まる」と確認したあとだけ付ける（上のコメント参照）。 */
.acd-print-cols-balanced { column-fill: balance; }
/* 見出しだけが段末に取り残される・図が段の境目で割れるのを防ぐ。
 * section 全体に break-inside:avoid を掛けないのは、本文の長い
 * .acd-type-detail / .acd-paths が段をまたげなくなって段組みが破綻するため。 */
.acd-print-sheet .acd-print-cols :where(h3, h4) {
  break-after: avoid;
  -webkit-column-break-after: avoid;
}
.acd-print-sheet .acd-print-cols :where(p, li) {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.acd-print-sheet .acd-type-map-section,
.acd-print-sheet .acd-occupations-list,
.acd-print-sheet .acd-spectrum,
.acd-print-sheet .acd-expand-card,
.acd-print-sheet .acd-crossing-card,
.acd-print-sheet .acd-case-result-item,
.acd-print-sheet .acd-snapshot-cards {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
/* 画面の余白は1枚に持ち込むと段を1本ぶん食う。詰めるのは余白と見出しだけで、
 * 本文の font-size / line-height は画面と同じまま（縮尺が別に効くため）。 */
.acd-print-sheet .acd-type-detail,
.acd-print-sheet .acd-type-map-section,
.acd-print-sheet .acd-paths,
.acd-print-sheet .acd-case-result,
.acd-print-sheet .acd-snapshot {
  margin: 0 0 14px;
}
.acd-print-sheet .acd-print-cols :where(h3) {
  font-size: 15px;
  margin: 14px 0 5px;
}
.acd-print-sheet .acd-print-cols > :first-child :where(h3) { margin-top: 0; }
.acd-print-sheet .acd-print-cols :where(h4) { margin: 10px 0 3px; }
/* 行送りは印刷向けに詰める。画面（1.75）はモバイルの可読性優先の値で、紙では
 * 1.65 でも読みやすさは落ちず、1枚に載る本文が約6%増える（＝縮尺を上げられる）。 */
.acd-print-sheet .acd-print-cols :where(p),
.acd-print-sheet .acd-print-cols :where(ul) { line-height: 1.65; }
.acd-print-sheet .acd-print-cols :where(p) { margin: 0 0 6px; }
.acd-print-sheet .acd-print-cols :where(ul) { margin: 0 0 8px; }
.acd-print-sheet .acd-type-map-section { padding: 10px 12px; }
/* 画面の 300px 上限を外して段幅いっぱいに描く。縮尺（約0.65）が掛かった後の
 * 実寸で効くので、300px のままだとマップ内のタイプ名が 4.6pt 相当になり
 * 印刷では読めない（実測）。マップを段組みの先頭に置いてあるので、大きく
 * しても段の空きを増やさない（widget-js の blocks の並び順コメント参照）。 */
.acd-print-sheet .acd-map-svg { max-width: 100%; }
.acd-print-sheet .acd-detail-caption { margin: 10px 0 3px; }
.acd-print-sheet .acd-spectrum-row { margin: 0 0 6px; }
.acd-print-sheet .acd-expand-cards { gap: 6px; }
.acd-print-sheet .acd-expand-card,
.acd-print-sheet .acd-crossing-card { padding: 8px 10px; }
.acd-print-sheet .acd-case-result-item { padding: 8px 10px; margin: 0 0 8px; }

/* ---- 小さな文字の下限 ----
 * 画面で 10〜12.5px の補助テキスト（免責・凡例・キャプション・注記）は、
 * 縮尺（実測 0.68 前後）が掛かると 5pt 台になって印刷では読めない。1枚に
 * 載せた意味が無くなるので 13.5px を下限に持ち上げる。
 * ★ SVG内の文字（.acd-map-tile-label / .acd-map-axis-end /
 *   .acd-map-quadrant-label）はここに入れない —— マップは段幅いっぱいまで
 *   拡大される（viewBox 375 → 実測 482px）ので、縮尺後もそのままで
 *   7pt 前後を保つ。持ち上げると衝突回避の計算（viewBox座標で解いている）と
 *   食い違ってラベルが重なる。
 * ★ 本文（.acd-widget :where(p) の 14.5px）は持ち上げない。全体を上げても
 *   縮尺が同じだけ下がって面積は増えないため（1枚に載る量は面積で決まる）。 */
.acd-print-sheet .acd-result-notes,
.acd-print-sheet .acd-result-notes p,
.acd-print-sheet .acd-disclaimer,
.acd-print-sheet .acd-type-cluster-label,
.acd-print-sheet .acd-type-keywords-caption,
.acd-print-sheet .acd-type-keyword,
.acd-print-sheet .acd-detail-caption,
.acd-print-sheet .acd-occupations-list li,
.acd-print-sheet .acd-spectrum-note,
.acd-print-sheet .acd-spectrum-labels,
.acd-print-sheet .acd-map-cluster-legend-caption,
.acd-print-sheet .acd-map-cluster-legend-item,
.acd-print-sheet .acd-map-legend,
.acd-print-sheet .acd-map-legend li,
.acd-print-sheet .acd-map-disclaimer,
.acd-print-sheet .acd-deepen-heading-note,
.acd-print-sheet .acd-expand-heading-note,
.acd-print-sheet .acd-crossing-heading-note,
.acd-print-sheet .acd-newcomer-note,
.acd-print-sheet .acd-expand-note,
.acd-print-sheet .acd-crossing-note,
.acd-print-sheet .acd-snapshot-scope,
.acd-print-sheet .acd-snapshot-note,
.acd-print-sheet .acd-case-result-subheading,
.acd-print-sheet .acd-case-result-choice,
.acd-print-sheet .acd-case-result-item h4,
.acd-print-sheet .acd-fb-relations,
.acd-print-source {
  font-size: 13.5px;
}

/* ---- 脚注（注意書き＋免責＋出所URL） ---- */
/* 脚注は本文の段組みの外にあるので、その高さは「段数ぶん」容量を食う
 * （2段なら 1px 高くなるごとに本文が 2px 分入らなくなる）。免責が3行あると
 * 本文340px相当を失うため、脚注自体も2段に流して高さを半分にする。 */
.acd-print-foot {
  flex: 0 0 auto;
  margin: 9px 0 0;
  padding: 7px 0 0;
  border-top: 1px solid var(--acd-border);
  column-count: 2;
  column-gap: 30px;
}
.acd-print-sheet .acd-result-notes {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 4px;
}
.acd-print-sheet .acd-result-notes p { margin: 0 0 2px; }
.acd-print-sheet .acd-disclaimer {
  line-height: 1.6;
  border-top: 0;
  padding-top: 0;
  margin: 0;
}
.acd-print-source {
  color: var(--acd-muted);
  margin: 4px 0 0;
}

/* ============================================================================
 * 21. 見た目の上書き層（Figma「AIgent診断ツール_Design」初稿 Aパターン・2026-10）
 * ============================================================================
 * 伊澤氏 2026-10-06「見た目だけFigmaで」。この節は**色・余白・形だけ**を上書きし、
 * 文言・DOM・JSには触れない（表示文言は承認済みのまま）。
 *
 * ★ セレクタは必ず `.acd-widget.acd-focus-mode` 配下にする。
 *   - 印刷シート（20節・.acd-print-sheet）は同じ部品を再利用しているので、
 *     素の `.acd-type-card` などを上書きすると PDF の組版まで崩れる。
 *   - 集中モードに入る前の intro カードは、診断LPでは見えない位置に置いてある
 *     （lp.css）。ここでは触らない。
 *
 * Figma の値（トークン名はFigma側の変数名）:
 *   blue100 #2670d2 / blue80 #599af2 / blue20 #ebf4ff / blue10 #f5f9ff
 *   gold-80 #d29c09 / glay100 #07132d / glay90 #193162 / glay60 #767e90（muted は #5f6779 に濃くした） / glay50 #b1b9cb
 *   結果の帯（ひらく系）: #ff9266 → #fd4900。他の3系統はFigmaに無いので、
 *   既存のクラスタ色から同じ明るさの組を作った（--acd-band-*）。
 */
.acd-widget.acd-focus-mode {
  --acd-f-blue: #2670d2;
  --acd-f-blue-80: #599af2;
  --acd-f-blue-20: #ebf4ff;
  --acd-f-blue-10: #f5f9ff;
  --acd-f-gold: #d29c09;
  --acd-f-gold-soft: #fdf5dc;
  --acd-f-ink: #07132d;
  --acd-f-ink-2: #193162;
  --acd-f-muted: #5f6779;   /* Figma は #767e90。白で4.07:1・淡い青で3.67:1しかないので濃くした */
  --acd-f-line: #b1b9cb;
  --acd-f-yellow-top: #fff45a;
  --acd-f-yellow-bottom: #ffe31a;
  --acd-band-from: #6f8fc4;
  --acd-band-to: #2c3f66;
  background: var(--acd-f-blue-20);
  color: var(--acd-f-ink);
}
.acd-widget.acd-focus-mode[data-acd-cluster] { background: #fff; }
.acd-widget.acd-focus-mode[data-acd-cluster="creators"] { --acd-band-from: #a98bf5; --acd-band-to: #6d28d9; }
.acd-widget.acd-focus-mode[data-acd-cluster="openers"]  { --acd-band-from: #ff9266; --acd-band-to: #fd4900; }
.acd-widget.acd-focus-mode[data-acd-cluster="readers"]  { --acd-band-from: #6fa8ff; --acd-band-to: #1f5fd6; }
.acd-widget.acd-focus-mode[data-acd-cluster="movers"]   { --acd-band-from: #5ccf88; --acd-band-to: #13803c; }
/* メッシュ背景はFigmaに無い（平らな面）。 */
.acd-widget.acd-focus-mode::before { content: none; }

/* ---- ヘッダー: 白い帯にロゴ・右端に×、その下に進捗 ----
 * ロゴは診断LPと同じ assets/logo_aigent.svg を data URI で埋め込んでいる。
 * 相対パスで参照すると、Nexus の widget デモ（/widget-assets/ の許可リスト配信）では
 * 404 になってロゴの場所が空白になるため（置き場所に依存させない）。
 * ★ロゴの原本を差し替えたら、ここも作り直すこと。 */
.acd-widget.acd-focus-mode > .acd-focus-header {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo close"
    "progress progress";
  align-items: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, #fff 0, #fff 56px, transparent 56px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.acd-widget.acd-focus-mode[data-acd-cluster] > .acd-focus-header { background: #fff; }
.acd-widget.acd-focus-mode .acd-focus-header-spacer {
  grid-area: logo;
  width: auto;
  height: 56px;
  margin-left: 16px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0MzguNjYgNDkuODMiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180IiB4MT0iMzUwLjIxIiB5MT0iMy4xOSIgeDI9IjM1MC4yMSIgeTI9IjQxLjA0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTNjMTNjIi8+PHN0b3Agb2Zmc2V0PSIuMTIiIHN0b3AtY29sb3I9IiNlMGJiMzQiLz48c3RvcCBvZmZzZXQ9Ii42OSIgc3RvcC1jb2xvcj0iI2Q1YTQxNCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2QyOWMwOCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQtMiIgeDE9IjMzMC4xOSIgeTE9IjMuMTkiIHgyPSIzMzAuMTkiIHkyPSI0MS4wNCIgeGxpbms6aHJlZj0iI1/lkI3np7DmnKroqK3lrprjgrDjg6njg4fjg7zjgrfjg6fjg7NfNCIvPjxsaW5lYXJHcmFkaWVudCBpZD0iX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180LTMiIHgxPSIzMDUuNjEiIHkxPSIzLjE5IiB4Mj0iMzA1LjYxIiB5Mj0iNDEuMDQiIHhsaW5rOmhyZWY9IiNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQiLz48bGluZWFyR3JhZGllbnQgaWQ9Il/lkI3np7DmnKroqK3lrprjgrDjg6njg4fjg7zjgrfjg6fjg7NfNC00IiB4MT0iNDMwLjEzIiB5MT0iMy4xOSIgeDI9IjQzMC4xMyIgeTI9IjQxLjA0IiB4bGluazpocmVmPSIjX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180Ii8+PGxpbmVhckdyYWRpZW50IGlkPSJf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQtNSIgeDE9IjQwOC4zMiIgeTE9IjMuMTkiIHgyPSI0MDguMzIiIHkyPSI0MS4wNCIgeGxpbms6aHJlZj0iI1/lkI3np7DmnKroqK3lrprjgrDjg6njg4fjg7zjgrfjg6fjg7NfNCIvPjxsaW5lYXJHcmFkaWVudCBpZD0iX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180LTYiIHgxPSIzNzkuODIiIHkxPSIzLjE5IiB4Mj0iMzc5LjgyIiB5Mj0iNDEuMDQiIHhsaW5rOmhyZWY9IiNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQiLz48L2RlZnM+PGcgaWQ9Il/jg6zjgqTjg6Tjg7xfMS0yIj48cG9seWdvbiBwb2ludHM9IjEyMy4yOCAxNi4xOSAxMzguMjQgMTYuMTkgMTM4LjI0IDEwLjUzIDEyMi45NyAxMC41MyAxMjIuNTUgMy4xIDExNi44OCAzLjEgMTE3LjI5IDEwLjUzIDEwMy40MiAxMC41MyAxMDMuNDIgMTYuMTkgMTE3LjYxIDE2LjE5IDExOC4wNSAyNC4wMyAxMDEuNDYgMjQuMDMgMTAxLjQ2IDI5LjcgMTE4LjM2IDI5LjcgMTE4Ljk5IDQxLjAzIDEyNC42NyA0MS4wMyAxMjQuMDQgMjkuNyAxNDAuMTkgMjkuNyAxNDAuMTkgMjQuMDMgMTIzLjcyIDI0LjAzIDEyMy4yOCAxNi4xOSIvPjxwYXRoIGQ9Im04Ni4zNywyMy40OGMxLjI4LTEuOSwyLjQyLTMuOSwzLjQtNiwyLjgzLTUuNzMsMy4zLTExLjcsMy4zLTExLjdoLTI5LjE5djUuNjZoMjIuMjJjLTMuOTQsMTEuMzMtMTIuOTQsMjAuMTgtMjQuMzgsMjMuOTF2NS45MWM4LjIzLTIuMzEsMTUuNDMtNi45LDIwLjk0LTEzLjA1LjQ0LjYzLjk3LDEuMzMsMS42LDIuMDcsMy4zOSw0LDguMTYsNy42OCwxNC4xNSwxMC45NXYtNi41NGMtNy45My00Ljg3LTExLjA1LTkuNDMtMTIuMDQtMTEuMjNaIi8+PHBvbHlnb24gcG9pbnRzPSIyMjYuODQgMTguNjUgMjIxLjQxIDE4LjY1IDIyMi41NCAyNi4yNyAyMjcuOTcgMjYuMjcgMjI2Ljg0IDE4LjY1Ii8+PHBvbHlnb24gcG9pbnRzPSIyMzUuNiAyNi4yNyAyMzQuNDcgMTguNjUgMjI5LjA0IDE4LjY1IDIzMC4xNyAyNi4yNyAyMzUuNiAyNi4yNyIvPjxwYXRoIGQ9Im0yMjcuMDksMzUuNTZ2NS40NWMxMC45OS0xLjc3LDE5LjUxLTExLjAzLDIwLjExLTIyLjM2aC01LjM4Yy0uNTgsOC4zNy02LjcxLDE1LjIzLTE0LjczLDE2LjkxWiIvPjxwYXRoIGQ9Im0xNDkuNDMsNS43OGMwLDMuNzksMCwxMi4zNi0uMSwxNy43OS0uMDYsMy4xOC0yLjA3LDguMjMtNS43NiwxMS4xdjYuNTdjNy43Mi0zLjM4LDExLjMyLTEyLjMsMTEuNDItMTcuNTYuMS01LjQ3LjExLTE0LjA4LjEtMTcuOWgtNS42NloiLz48cGF0aCBkPSJtMTY1LjIsMzQuODJWNS43OGgtNS42NnYzNS4yaDIuODRjLjIsMCw1LjA1LS4wNiw5Ljk3LTMuMjksMy44OC0yLjU0LDguNDktNy41Myw5Ljk3LTE3LjE4aC01Ljc1Yy0xLjg1LDEwLjA0LTcuNzgsMTMuMjctMTEuMzcsMTQuM1oiLz48cG9seWxpbmUgcG9pbnRzPSIxNjUuMiAzNC44MiAxNjUuMiA1Ljc4IDE1OS41MyA1Ljc4IDE1OS41MyA0MC45OSIvPjxwYXRoIGQ9Im0yNzkuNjksMi45Yy0yLjIyLDAtNC4xNywxLjE1LTUuMjksMi44OWgtMjguODZ2NS42NmgyNi45NmMwLC4xMSwwLC4yMywwLC4zNCwwLDEyLjk3LTEwLjE1LDIzLjUyLTIyLjYyLDIzLjUydjUuNjZjMTQuNDYsMCwyNi40MS0xMS4yNSwyOC4wOC0yNS43MS41NS4xNiwxLjEzLjI1LDEuNzMuMjUsMy40OCwwLDYuMzEtMi44Myw2LjMxLTYuMzFzLTIuODMtNi4zMS02LjMxLTYuMzFabTAsOC4yNmMtMS4wOCwwLTEuOTUtLjg4LTEuOTUtMS45NXMuODgtMS45NSwxLjk1LTEuOTUsMS45NS44OCwxLjk1LDEuOTUtLjg4LDEuOTUtMS45NSwxLjk1WiIvPjxwYXRoIGQ9Im0xODMuMTIsNS43OHY1LjY2aDI5LjMzYy0xLjAyLDYuODMtNC40NywxMC40My0xMS4wMiwxMS42LjQ0LTIuNjMuNTItNS4xMS4zNy03LjFoLTUuMzRsLS4zNC4wM3MuMzksNC40My0uOTcsOS4xM2MtMS40NCw0Ljk4LTQuMjYsOC4zOS04LjM3LDEwLjE3djYuMDJjNi45Ni0yLjEzLDEwLjkyLTcuMDcsMTMuMDItMTIuMzQsMTAuMjMtLjk3LDE2LjEtNi4xLDE4LjA5LTE1LjI5LDEuMDEtNC42NC42OC03LjkuNjgtNy45aC0zNS40NVoiLz48cGF0aCBkPSJtMzU3LjMyLDEzLjN2Mi4zOWMtMi4wNy0xLjQ3LTQuNi0yLjM0LTcuMzMtMi4zNC03LjAxLDAtMTIuNzIsNS43MS0xMi43MiwxMi43MnM1LjcxLDEyLjcyLDEyLjcyLDEyLjcyYzIuNzMsMCw1LjI1LS44Nyw3LjMzLTIuMzR2LjU2YzAsMy44Ni0zLjE0LDcuMDEtNy4wMSw3LjAxLTIuOTMsMC01LjQ0LTEuOC02LjQ4LTQuMzZsLTUuMDcsMi44N2MyLjA3LDQuMzEsNi40Niw3LjMsMTEuNTUsNy4zLDcuMDcsMCwxMi44Mi01Ljc1LDEyLjgyLTEyLjgyVjEzLjNoLTUuODFabS03LjMzLDE5LjY4Yy0zLjgxLDAtNi45MS0zLjEtNi45MS02LjkxczMuMS02LjkxLDYuOTEtNi45MSw2LjkxLDMuMSw2LjkxLDYuOTEtMy4xLDYuOTEtNi45MSw2LjkxWiIgc3R5bGU9ImZpbGw6dXJsKCNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQpOyIvPjxyZWN0IHg9IjMyNi45IiB5PSIyLjQ4IiB3aWR0aD0iNi41OSIgaGVpZ2h0PSIzOC41NSIgc3R5bGU9ImZpbGw6dXJsKCNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQtMik7Ii8+PHBhdGggZD0ibTMwNC43NiwxLjY3bC0xOC43MSwzOS4zNmg3LjE4bDIuODUtNS45OWgxOS4wN2wyLjc1LDUuNzkuMDkuMmg3LjE4TDMwNi40NiwxLjY3aC0xLjdabS01Ljg1LDI3LjQxbDYuNy0xNC4wOSw2LjcsMTQuMDloLTEzLjM5WiIgc3R5bGU9ImZpbGw6dXJsKCNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQtMyk7Ii8+PHBhdGggZD0ibTQzOC42NiwyMC44di01LjgxaC03LjYxdi03LjM4aC01LjgxdjcuMzhoLTMuNjN2NS44MWgzLjYzdjExLjgxYzAsNC42NCwzLjc4LDguNDIsOC40Miw4LjQyaDEuOTlsMi43My01LjgxaC00LjcyYy0xLjQ0LDAtMi42MS0xLjE3LTIuNjEtMi42MXYtMTEuODFoNy42MVoiIHN0eWxlPSJmaWxsOnVybCgjX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180LTQpOyIvPjxwYXRoIGQ9Im00MDguNTYsMTMuMThoLS40OGMtMi4xOCwwLTQuMjEuNjUtNS45MSwxLjc2di0xLjY0aC00LjkzdjI3LjczaDUuODF2LTE3LjAxYzAtMi43NywyLjI2LTUuMDMsNS4wMy01LjAzaC40OGMyLjc3LDAsNS4wMywyLjI2LDUuMDMsNS4wM3YxNy4wMWg1Ljgxdi0xNy4wMWMwLTUuOTgtNC44Ni0xMC44NC0xMC44NC0xMC44NFoiIHN0eWxlPSJmaWxsOnVybCgjX+WQjeensOacquioreWumuOCsOODqeODh+ODvOOCt+ODp+ODs180LTUpOyIvPjxwYXRoIGQ9Im0zOTMuNzQsMjcuMmMwLTguMDktNS44My0xMy45Ni0xMy44Ny0xMy45NnMtMTMuOTcsNS44Ny0xMy45NywxMy45Niw1Ljg4LDEzLjk2LDEzLjk3LDEzLjk2YzUuOTQsMCwxMC43MS0zLjA0LDEyLjc3LTguMTRsLjE5LS40N2gtNi44Yy0xLjMxLDEuODUtMy4yNywyLjcyLTYuMTcsMi43Mi0zLjg0LDAtNi41Ny0yLjA3LTcuNDMtNS41OWgyMS4zdi0yLjQ5Wm0tMjEuMDctMy4yNWMxLjA3LTMuMDgsMy42NS00LjgyLDcuMi00LjgyczYuMTksMS43OCw3LjI1LDQuODJoLTE0LjQ1WiIgc3R5bGU9ImZpbGw6dXJsKCNf5ZCN56ew5pyq6Kit5a6a44Kw44Op44OH44O844K344On44OzXzQtNik7Ii8+PGNpcmNsZSBjeD0iMjAuOTUiIGN5PSI1LjkxIiByPSI1LjkxIiBzdHlsZT0iZmlsbDojZDI5YzA4OyIvPjxjaXJjbGUgY3g9IjQwLjI3IiBjeT0iNS45MSIgcj0iNS45MSIgc3R5bGU9ImZpbGw6IzkxOTE5MTsiLz48cGF0aCBkPSJtMzIuNDksMjkuNDZjLTEuNjQtMS43Ni01LjE4LTYuMzgtNS45NS05LjEtLjE1LS41NC0uNDctMS4zNi0uNDctMS4zNi0uOC0yLjA0LTIuNzYtMy40Ny01LjA1LTMuNDdzLTQuMjcsMS40Ni01LjA2LDMuNTJjMCwwLS4zNC45OC0uNDgsMS42Ny0uNTEsMi42LTIuNiw2LjI4LTQuMyw4LjQyLTEuNywyLjE1LTQuODIsNS4wMi03LjIzLDYuMTEtMS40My42NC0yLjA0LDEuMS0yLjg0LDIuMTQtMS43NSwyLjI3LTEuMzgsNS41NC44NCw3LjMsMi4yMiwxLjc2LDUuNDksMS4zOCw3LjMtLjg0LjgzLTEuMDIsMS4xNC0xLjcyLDEuNDQtMy4yNS41MS0yLjYsMi42LTYuMjgsNC4zMS04LjQyLDEuNDItMS43OSwzLjgxLTQuMDYsNS45Ni01LjQsMi42NiwxLjM0LDYuMzIsNC42MSw3LjgsNi4xOSwxLjIzLDEuMzIsMy41MSw0LjIzLDQuOTEsNi43Ni4xNi0uNjcuNDQtMS4zNC44OC0yLjE5LjgxLTEuNTgsMS4zOC0zLDEuNTktNC43My0xLjUtMS4yMy0yLjg2LTIuNTEtMy42My0zLjMzWiIgc3R5bGU9ImZpbGw6I2QyOWMwODsiLz48cGF0aCBkPSJtNDAuMjcsMTUuNTFjLTIuOSwwLTUuMjksMi4zOS01LjMyLDUuMzItLjAyLDEuMzMuMTgsMi4wOS45MSwzLjUsMS4xMSwyLjE2LDEuODUsNC4xNiwxLjg1LDYuOTRzLS43NCw0Ljc4LTEuODUsNi45NGMtLjczLDEuNDEtLjkyLDIuMTctLjkxLDMuNS4wMywyLjkzLDIuNDIsNS4zMiw1LjMyLDUuMzJzNS4yOC0yLjM5LDUuMzItNS4zMmMuMDItMS4zMy0uMTgtMi4wOS0uOTEtMy41LTEuMTEtMi4xNi0xLjg1LTQuMTYtMS44NS02Ljk0cy43NC00Ljc4LDEuODUtNi45NGMuNzMtMS40MS45Mi0yLjE3LjkxLTMuNS0uMDQtMi45My0yLjQyLTUuMzItNS4zMi01LjMyWiIgc3R5bGU9ImZpbGw6IzkxOTE5MTsiLz48L2c+PC9zdmc+") left center / auto 20px no-repeat;
}
/* ロゴの右に診断名（d0_shell.title）。ロゴは高さ20pxで幅約177px。 */
.acd-focus-header-brand {
  min-width: 0;
  padding-left: 187px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 56px;
  color: #193162;
}
.acd-widget.acd-focus-mode .acd-focus-close,
.acd-widget.acd-focus-mode .acd-focus-close-spacer {
  grid-area: close;
  margin-right: 6px;
}
.acd-widget.acd-focus-mode .acd-focus-close {
  background: transparent;
  color: var(--acd-f-muted);
  font-size: 24px;
}
.acd-widget.acd-focus-mode .acd-progress,
.acd-widget.acd-focus-mode .acd-progress-spacer { grid-area: progress; }
.acd-widget.acd-focus-mode .acd-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px 0;
}
.acd-widget.acd-focus-mode .acd-progress-dots { gap: 4px; margin: 0; }
.acd-widget.acd-focus-mode .acd-progress-dot {
  width: 14px;
  height: 4px;
  border-radius: 4px;
  background: #fff;
}
.acd-widget.acd-focus-mode .acd-progress-dot-done,
.acd-widget.acd-focus-mode .acd-progress-dot-current {
  background: var(--acd-f-blue-80);
  transform: none;
}
.acd-widget.acd-focus-mode .acd-progress-remaining {
  display: inline;
  font-size: 12px;
  font-weight: 700;
  color: var(--acd-f-muted);
  white-space: nowrap;
}

/* ---- 設問 ---- */
.acd-widget.acd-focus-mode > .acd-question-slide {
  max-width: 480px;
  padding-top: 40px;
}
.acd-widget.acd-focus-mode .acd-fieldset legend,
.acd-widget.acd-focus-mode .acd-vector-fieldset legend {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--acd-f-ink);
  text-align: left;
  margin: 0 0 25px;
}
.acd-widget.acd-focus-mode .acd-supplement,
.acd-widget.acd-focus-mode .acd-case-intro { color: var(--acd-f-muted); }
.acd-widget.acd-focus-mode .acd-case-intro { background: var(--acd-f-blue-10); }

/* 分類ラベル（アイコン＋「仕事の価値観」）。legend の中で設問文の上に置く。 */
.acd-question-category {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #2670d2;
}
.acd-question-category-icon { flex: 0 0 auto; display: block; }
.acd-question-prompt { display: block; }

/* 選択肢は2択も一覧も同じカード（白地・金の枠・角丸10px）。 */
.acd-widget.acd-focus-mode .acd-vector-choices { flex-direction: column; gap: 10px; }
.acd-widget.acd-focus-mode .acd-vector-choice,
.acd-widget.acd-focus-mode .acd-option-row {
  min-height: 66px;
  padding: 20px;
  border: 1.5px solid var(--acd-f-gold);
  border-radius: 10px;
  background: #fff;
  color: var(--acd-f-ink);
  box-shadow: 0 1px 2px var(--acd-f-line);
}
.acd-widget.acd-focus-mode .acd-vector-choice {
  justify-content: flex-start;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.acd-widget.acd-focus-mode .acd-option-row { padding: 14px 16px; min-height: 56px; }
.acd-widget.acd-focus-mode .acd-option-label { font-size: 15px; font-weight: 700; line-height: 1.6; }
.acd-widget.acd-focus-mode .acd-vector-choice:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-option-row:hover {
  background: var(--acd-f-gold-soft);
  border-color: var(--acd-f-gold);
  color: var(--acd-f-ink);
}
/* 選んだ状態は「塗り＋太い枠＋チェック」の3つで示す（色だけに頼らない）。 */
.acd-widget.acd-focus-mode .acd-option-row-selected,
.acd-widget.acd-focus-mode .acd-vector-choice-bounce {
  background: var(--acd-f-gold-soft);
  border-color: var(--acd-f-gold);
  box-shadow: 0 0 0 1.5px var(--acd-f-gold);
  color: var(--acd-f-ink);
}
.acd-widget.acd-focus-mode .acd-option-check { border-color: var(--acd-f-line); }
.acd-widget.acd-focus-mode .acd-option-row-selected .acd-option-check {
  background: var(--acd-f-gold);
  border-color: var(--acd-f-gold);
  color: #fff;
}
.acd-widget.acd-focus-mode .acd-option-row:focus-within { outline-color: var(--acd-f-blue); }
.acd-widget.acd-focus-mode .acd-tabs { border-bottom-color: var(--acd-f-line); }
.acd-widget.acd-focus-mode .acd-tab-btn { color: var(--acd-f-muted); font-size: 13px; }
.acd-widget.acd-focus-mode .acd-tab-btn-active {
  color: var(--acd-f-blue);
  border-bottom-color: var(--acd-f-blue);
}

/* 「次へ」と結果画面の登録ボタンは、LPの「診断をはじめる」と同じ黄色のボタン。
 * ★hover で文字を白にしないこと。Figma のホバー版は金地に白文字だが、
 *   #d29c09 と白は 2.47:1 で読めない（lp.css .lp-cta の注記と同じ理由）。 */
.acd-widget.acd-focus-mode .acd-next,
.acd-widget.acd-focus-mode .acd-cta-primary,
.acd-widget.acd-focus-mode .acd-cta-teaser-btn,
.acd-widget.acd-focus-mode .acd-cta-dock-btn,
.acd-widget.acd-focus-mode .acd-retry,
.acd-widget.acd-focus-mode .acd-exit-cancel {
  background: linear-gradient(180deg, var(--acd-f-yellow-top) 0%, var(--acd-f-yellow-bottom) 100%);
  border: 1px solid var(--acd-f-ink-2);
  box-shadow: 0 3px 0 rgba(7, 19, 45, 0.55);
  color: var(--acd-f-ink-2);
  font-weight: 700;
}
.acd-widget.acd-focus-mode .acd-next:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-cta-primary:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-cta-teaser-btn:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-cta-dock-btn:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-retry:hover:not(:disabled),
.acd-widget.acd-focus-mode .acd-exit-cancel:hover:not(:disabled) {
  background: var(--acd-f-gold);
  color: var(--acd-f-ink);
  box-shadow: 0 3px 0 rgba(7, 19, 45, 0.55);
  filter: none;
}
.acd-widget.acd-focus-mode .acd-next { border-radius: 8px; min-height: 56px; font-size: 17px; }
.acd-widget.acd-focus-mode .acd-next:disabled {
  background: #e7ebf2;
  border-color: var(--acd-f-line);
  box-shadow: none;
  color: var(--acd-f-muted);
  opacity: 1;
}

/* 「戻る」は丸い枠＋くの字の小さなボタン（左寄せ）。 */
.acd-widget.acd-focus-mode .acd-nav { margin-top: 25px; }
.acd-widget.acd-focus-mode .acd-back {
  position: relative;
  width: auto;
  min-height: 44px;
  align-self: flex-start;
  padding: 0 4px 0 40px;
  background: transparent;
  color: var(--acd-f-muted);
  font-size: 14px;
  font-weight: 400;
}
.acd-widget.acd-focus-mode .acd-back::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 31px;
  height: 31px;
  margin-top: -15.5px;
  border: 1px solid var(--acd-f-line);
  border-radius: 50%;
  background: #fff;
}
.acd-widget.acd-focus-mode .acd-back::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-left: 1.5px solid var(--acd-f-muted);
  border-bottom: 1.5px solid var(--acd-f-muted);
  transform: rotate(45deg);
}
.acd-widget.acd-focus-mode .acd-back:hover:not(:disabled) { filter: none; color: var(--acd-f-ink); }

/* ---- 結果画面 ----
 * 見出し「あなたのAIキャリアタイプ」とタイプカードの上半分を、画面幅いっぱいの
 * 帯にする。帯は見出しとカードの2要素にまたがるので、継ぎ目が出ないよう
 * グラデーションは横方向（90deg）にしてある。 */
.acd-widget.acd-focus-mode > .acd-result {
  max-width: 480px;
  padding-top: 0;
  background: none;
}
.acd-widget.acd-focus-mode .acd-result-title {
  margin: 0 calc(50% - 50vw);
  padding: 22px 16px 14px;
  background: linear-gradient(90deg, var(--acd-band-from), var(--acd-band-to));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(7, 19, 45, 0.35);
}
.acd-widget.acd-focus-mode .acd-type-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  column-gap: 17px;
  align-items: start;
  padding: 0 0 4px;
  margin: 0 0 16px;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  color: var(--acd-f-ink);
  text-align: left;
}
/* 帯の本体。カードの1〜5行目（バッジ〜キャッチ）の背後に敷き、左右は画面端まで伸ばす。 */
.acd-widget.acd-focus-mode .acd-type-card::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / 6;
  align-self: stretch;
  margin: 0 calc(50% - 50vw);
  background: linear-gradient(90deg, var(--acd-band-from), var(--acd-band-to));
  z-index: -1;
}
.acd-widget.acd-focus-mode .acd-type-card > * { position: relative; z-index: 0; }
.acd-widget.acd-focus-mode .acd-type-card-text { display: contents; }
.acd-widget.acd-focus-mode .acd-type-visual {
  grid-column: 1;
  grid-row: 1 / 6;
  align-self: center;
  width: 130px;
  height: 130px;
  margin: 0 0 22px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
}
.acd-widget.acd-focus-mode .acd-type-image { object-fit: contain; }
.acd-widget.acd-focus-mode .acd-type-fallback-icon { color: var(--acd-f-ink-2); }
.acd-widget.acd-focus-mode .acd-type-cluster-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin: 8px 0 10px;
  padding: 1px 12px;
  border-radius: 0;
  background: #fff;
  color: var(--acd-f-ink);
  font-size: 12px;
  line-height: 20px;
}
.acd-widget.acd-focus-mode .acd-type-domain-kicker { grid-column: 2; grid-row: 2; color: rgba(255, 255, 255, 0.92); text-align: left; }
.acd-widget.acd-focus-mode .acd-type-name {
  grid-column: 2;
  grid-row: 3;
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
  line-height: 30px;
  text-align: left;
  text-shadow: 0 1px 2px rgba(7, 19, 45, 0.25);
}
.acd-widget.acd-focus-mode .acd-type-tag {
  grid-column: 2;
  grid-row: 4;
  margin: 0 0 22px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
}
.acd-widget.acd-focus-mode .acd-type-keywords-caption {
  grid-column: 1 / -1;
  grid-row: 6;
  margin: 28px 0 6px;
  color: var(--acd-f-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
}
.acd-widget.acd-focus-mode .acd-type-keywords {
  grid-column: 1 / -1;
  grid-row: 7;
  justify-content: flex-start;
}
.acd-widget.acd-focus-mode .acd-type-keyword {
  min-width: 77px;
  padding: 4px 18px;
  border: 1px solid var(--acd-f-line);
  border-radius: 15px;
  background: var(--acd-f-blue-10);
  color: var(--acd-f-ink-2);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.acd-widget.acd-focus-mode .acd-type-card-actions { justify-content: flex-start; }
.acd-widget.acd-focus-mode .acd-save-image-btn,
.acd-widget.acd-focus-mode .acd-save-pdf-btn,
.acd-widget.acd-focus-mode .acd-print-paper-select {
  border-color: var(--acd-f-line);
  color: var(--acd-f-ink-2);
  font-size: 13px;
}
.acd-widget.acd-focus-mode .acd-result-notes,
.acd-widget.acd-focus-mode .acd-result-notes p {
  background: var(--acd-f-blue-10);
  color: var(--acd-f-muted);
}

/* 本文と小見出し。小見出しはFigmaの「4つの価値観のバランス」と同じ
 * 左の青い棒＋青字。 */
.acd-widget.acd-focus-mode .acd-type-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--acd-f-ink);
}
.acd-widget.acd-focus-mode .acd-type-detail > h3,
.acd-widget.acd-focus-mode .acd-type-map-section > h3,
.acd-widget.acd-focus-mode .acd-type-directory > h3,
.acd-widget.acd-focus-mode .acd-paths > h3,
.acd-widget.acd-focus-mode .acd-case-result > h3 {
  margin: 32px 0 12px;
  padding-left: 13px;
  border-left: 3px solid var(--acd-f-blue);
  color: var(--acd-f-blue);
  font-size: 16px;
  line-height: 24px;
}
.acd-widget.acd-focus-mode .acd-detail-caption {
  margin: 24px 0 6px;
  color: var(--acd-f-blue);
  font-size: 14px;
  letter-spacing: 0;
}
/* 「4つの価値観のバランス」だけは Figma で大見出しの扱い（青い棒付き）。
 * 直後に注記（.acd-spectrum-note）が来る小見出しがそれに当たる。 */
.acd-widget.acd-focus-mode .acd-detail-caption:has(+ .acd-spectrum-note) {
  margin-top: 32px;
  padding-left: 13px;
  border-left: 3px solid var(--acd-f-blue);
  font-size: 16px;
  line-height: 24px;
}
.acd-widget.acd-focus-mode .acd-spectrum-note { color: var(--acd-f-muted); }
.acd-widget.acd-focus-mode .acd-spectrum { gap: 15px; }
.acd-widget.acd-focus-mode .acd-spectrum-track {
  height: 4px;
  background: #dfe5ef;
}
.acd-widget.acd-focus-mode .acd-spectrum-marker {
  width: 12px;
  height: 12px;
  border: 0;
  box-shadow: none;
  background: var(--acd-band-to);
}
.acd-widget.acd-focus-mode .acd-spectrum-labels {
  font-size: 12px;
  line-height: 20px;
  color: var(--acd-f-ink-2);
}
.acd-widget.acd-focus-mode .acd-occupations-list li {
  background: var(--acd-f-blue-10);
  border-color: var(--acd-f-line);
  color: var(--acd-f-ink-2);
}

/* 登録の案内は画面幅いっぱいの薄い青の帯（Figma の相談ボタンの帯）。 */
.acd-widget.acd-focus-mode .acd-cta {
  margin: 28px calc(50% - 50vw) 22px;
  padding: 22px max(16px, calc(50vw - 220px)) 18px;
  border-radius: 0;
  background: var(--acd-f-blue-20);
  align-items: stretch;
}
.acd-widget.acd-focus-mode .acd-cta-items li::before { background: var(--acd-f-gold); }
.acd-widget.acd-focus-mode .acd-cta-primary {
  min-height: 60px;
  border-radius: 999px;
  font-size: 18px;
}
/* 主CTAの中の「無料」バッジ（赤地に白）と、ボタン直下の注記。 */
.acd-cta-free-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 0 8px;
  background: #e8341c;
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  vertical-align: 0.1em;
}
.acd-cta-primary-note {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: #5f6779;
  text-align: center;
}
.acd-widget.acd-focus-mode .acd-cta-teaser { border-color: #dfe5ef; }
.acd-widget.acd-focus-mode .acd-cta-teaser-btn { border-radius: 999px; }
.acd-widget.acd-focus-mode .acd-cta-dock-btn { border-radius: 999px; }
.acd-widget.acd-focus-mode .acd-cta-secondary {
  border-color: var(--acd-f-blue);
  color: var(--acd-f-blue);
}
.acd-widget.acd-focus-mode .acd-disclaimer { color: var(--acd-f-muted); }

@media (max-width: 480px) {
  .acd-widget.acd-focus-mode .acd-focus-header-spacer { background-size: auto 17px; }
  .acd-focus-header-brand { padding-left: 158px; font-size: 11px; }
  .acd-widget.acd-focus-mode .acd-type-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
  .acd-widget.acd-focus-mode .acd-type-visual { width: 112px; height: 112px; }
  .acd-widget.acd-focus-mode .acd-type-name { font-size: 20px; line-height: 28px; }
}