/* ==============================================================
   EC Career Lab / キャリア現在地診断 スタイル
   仕様: diagnosis/wordpress-implementation-spec.md v1.1 §3-3 / §15 / §16
   根拠: DEC-005

   方針:
     - すべてのセレクタを #ecd-root 配下にスコープする
     - 色は SWELL の CSS変数のみを使う（独自の色値を定義しない）
     - 文字サイズは var(--swl-fz--content) 基準（px固定しない）
     - SWELLのボタンクラスは使わず .ecd-btn を独自定義する
     - 既存 ecl-* / wp-custom-css には一切追記しない
   ============================================================== */

#ecd-root {
  --ecd-gap: 0.75rem;
  --ecd-radius: 8px;
  --ecd-tap: 48px;
  margin: 2rem 0;
  font-size: var(--swl-fz--content, 16px);
  line-height: 1.7;
  color: var(--color_text, #333);
}

#ecd-root *,
#ecd-root *::before,
#ecd-root *::after { box-sizing: border-box; }

#ecd-root .ecd-app {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- ボタン ------------------------------------------------ */
#ecd-root .ecd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ecd-tap);
  padding: 0.75em 1.25em;
  border-radius: var(--ecd-radius);
  border: 2px solid var(--color_main, #04384c);
  background: var(--color_main, #04384c);
  color: #fff;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
}

#ecd-root .ecd-btn--ghost {
  background: transparent;
  color: var(--color_main, #04384c);
}

#ecd-root .ecd-btn[disabled],
#ecd-root .ecd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

#ecd-root .ecd-btn--cta { width: 100%; }

/* ---- フォーカス（色だけに依存しない） ---------------------- */
#ecd-root a:focus-visible,
#ecd-root button:focus-visible,
#ecd-root .ecd-choice:focus-visible,
#ecd-root [tabindex]:focus-visible {
  outline: 3px solid var(--color_link, #1176d4);
  outline-offset: 2px;
}

/* ---- 開始画面 ---------------------------------------------- */
#ecd-root .ecd-start__lead { margin: 0 0 0.5em; font-weight: 700; }
#ecd-root .ecd-start__note { margin: 0 0 1.25em; font-size: 0.875em; opacity: 0.8; }

/* ---- 進捗 --------------------------------------------------- */
#ecd-root .ecd-progress { margin: 0 0 1.25rem; }
#ecd-root .ecd-progress__label { margin: 0 0 0.4em; font-size: 0.875em; font-weight: 700; }
#ecd-root .ecd-progress__bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color_main_thin, rgba(5, 70, 95, 0.05));
  border: 1px solid var(--color_border, #ddd);
  overflow: hidden;
}
#ecd-root .ecd-progress__fill {
  display: block;
  height: 100%;
  background: var(--color_main, #04384c);
}

/* ---- 設問 --------------------------------------------------- */
#ecd-root .ecd-question {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
#ecd-root .ecd-question__title {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 0.75em;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color_htag, #04384c);
}
#ecd-root .ecd-question__note {
  margin: -0.4em 0 0.9em;
  padding: 0.6em 0.8em;
  font-size: 0.875em;
  border-left: 4px solid var(--color_border, #ddd);
  background: var(--color_main_thin, rgba(5, 70, 95, 0.05));
}

/* ---- 選択肢 ------------------------------------------------- */
#ecd-root .ecd-choices { display: flex; flex-direction: column; gap: var(--ecd-gap); }

#ecd-root .ecd-choice {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: var(--ecd-tap);
  padding: 0.7em 0.9em;
  border: 2px dashed var(--color_border, #ddd);
  border-radius: var(--ecd-radius);
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

/* 選択状態は「枠線の実線化 + 太さ + チェック記号 + 背景」で示す。
   色だけに依存させない（グレースケールでも判別できる）。 */
#ecd-root .ecd-choice.is-selected {
  border-style: solid;
  border-width: 3px;
  border-color: var(--color_main, #04384c);
  background: var(--color_main_thin, rgba(5, 70, 95, 0.05));
  font-weight: 700;
}

#ecd-root .ecd-choice__mark {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}
#ecd-root .ecd-choice.is-selected .ecd-choice__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55em;
  height: 0.3em;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(-50%, -65%) rotate(-45deg);
}
#ecd-root .ecd-choice__label { flex: 1 1 auto; min-width: 0; }

/* ---- ナビゲーション ---------------------------------------- */
#ecd-root .ecd-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecd-gap);
  margin-top: 1.25rem;
}
#ecd-root .ecd-nav .ecd-btn { flex: 1 1 auto; }

#ecd-root .ecd-error {
  margin: 0.75em 0 0;
  padding: 0.6em 0.8em;
  border: 2px solid var(--color_deep01, #e44141);
  border-radius: var(--ecd-radius);
  font-weight: 700;
}

/* ---- 結果：2軸マトリクス ------------------------------------ */
#ecd-root .ecd-matrix { margin: 0 0 1.5rem; }
#ecd-root .ecd-matrix__axis-b { margin: 0 0 0.6em; font-size: 0.875em; opacity: 0.85; }

#ecd-root .ecd-matrix__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ecd-gap);
}
#ecd-root .ecd-matrix__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
  padding: 0.7em 0.8em;
  border: 2px dashed var(--color_border, #ddd);
  border-radius: var(--ecd-radius);
  font-size: 0.875em;
}
#ecd-root .ecd-matrix__cell.is-current {
  border-style: solid;
  border-width: 3px;
  border-color: var(--color_main, #04384c);
  background: var(--color_main_thin, rgba(5, 70, 95, 0.05));
}
#ecd-root .ecd-matrix__name { font-weight: 700; }
#ecd-root .ecd-matrix__pos { font-size: 0.9em; opacity: 0.8; }
#ecd-root .ecd-matrix__badge {
  align-self: flex-start;
  margin-top: 0.2em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--color_main, #04384c);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}

/* 狭幅では4象限グリッドを縦積みに切り替える（破綻させない） */
@media (max-width: 480px) {
  #ecd-root .ecd-matrix__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 結果：本文 --------------------------------------------- */
#ecd-root .ecd-result__name {
  margin: 0 0 0.3em;
  font-size: 1.35em;
  line-height: 1.4;
  color: var(--color_htag, #04384c);
}
#ecd-root .ecd-result__lead { margin: 0 0 0.6em; font-weight: 700; }
#ecd-root .ecd-result__phase {
  margin: 0 0 1.5em;
  padding: 0.5em 0.8em;
  font-size: 0.9em;
  border: 1px solid var(--color_border, #ddd);
  border-radius: var(--ecd-radius);
}

#ecd-root .ecd-block { margin: 0 0 1.25rem; }
#ecd-root .ecd-block__title {
  margin: 0 0 0.4em;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color_htag, #04384c);
  border-bottom: 2px solid var(--color_main_thin, rgba(5, 70, 95, 0.05));
  padding-bottom: 0.2em;
}
#ecd-root .ecd-block__body { margin: 0; }
#ecd-root .ecd-block__list { margin: 0; padding-left: 1.3em; }
#ecd-root .ecd-block__list li { margin: 0 0 0.3em; }
#ecd-root .ecd-block__note { margin: 0.5em 0 0; font-size: 0.9em; }

/* 「現職で取れる行動」は折りたたまない（TC-31 / TC-77） */
#ecd-root .ecd-block--action { display: block; max-height: none; overflow: visible; }

#ecd-root .ecd-note--b5 {
  margin: 0 0 1.25rem;
  padding: 0.6em 0.8em;
  font-size: 0.9em;
  border-left: 4px solid var(--color_border, #ddd);
  background: var(--color_main_thin, rgba(5, 70, 95, 0.05));
}

/* ---- 結果：記事リンク --------------------------------------- */
#ecd-root .ecd-articles { margin: 0 0 1.5rem; }
#ecd-root .ecd-articles__title {
  margin: 0 0 0.6em;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color_htag, #04384c);
}
#ecd-root .ecd-article {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-height: 44px;
  padding: 0.7em 0.9em;
  margin: 0 0 var(--ecd-gap);
  border: 1px solid var(--color_border, #ddd);
  border-radius: var(--ecd-radius);
  color: inherit;
  text-decoration: none;
}
#ecd-root .ecd-article__role {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--color_main, #04384c);
}
#ecd-root .ecd-article__title { text-decoration: underline; }

/* ---- 結果：相談CTA ------------------------------------------ */
#ecd-root .ecd-cta { margin: 0 0 1.5rem; }
#ecd-root .ecd-cta__lead { margin: 0 0 0.5em; font-weight: 700; }
#ecd-root .ecd-cta--weak { font-size: 0.9em; }
#ecd-root .ecd-cta__link { color: var(--color_link, #1176d4); }

/* ---- 再回答 ------------------------------------------------- */
#ecd-root .ecd-retry { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color_border, #ddd); }
#ecd-root .ecd-retry__note { margin: 0.5em 0 0; font-size: 0.85em; opacity: 0.8; }

/* ---- モバイル（320px でも横スクロールを出さない） ----------- */
@media (max-width: 480px) {
  #ecd-root { --ecd-gap: 0.6rem; }
  #ecd-root .ecd-nav { flex-direction: column-reverse; }
  #ecd-root .ecd-nav .ecd-btn { width: 100%; }
  #ecd-root .ecd-question__title { font-size: 1.05em; }
}

/* ---- 動きの抑制 --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #ecd-root *,
  #ecd-root *::before,
  #ecd-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}