/* ==========================================================================
   ai-check.css — AI活用 かんたんセルフ診断（ai-check.html 専用）
   - styles.css のトークン（:root）と detail-* 名前空間を前提に、追加分だけを定義する
   - 新規クラスはすべて `aic-` 接頭辞。styles.css は改変しない
   - 動きは transform / opacity のみ。prefers-reduced-motion で遷移を止める
   - 誌面の文法: 左に「診断書」（回答で組み上がる成果物）、右に「取材項目」（設問）
   ========================================================================== */

/* --- 0. ヒーロー差分 ------------------------------------------------------- */
.detail-hero--aic { padding-bottom: clamp(40px, 6vw, 64px); }
.aic-hero-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.aic-hero-facts li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aic-hero-facts li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--color-gold-timeline);
}

/* --- 1. 診断セクションの器（920px より広い 2 段組） ------------------------- */
.aic {
  background: var(--bg-paper);
  counter-reset: none;
}
.aic__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.aic__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .aic__grid { grid-template-columns: 400px minmax(0, 1fr); gap: 56px; }
  .aic-sheet { position: sticky; top: 84px; }
}

/* --- 2. 診断書（左）: 回答が組版される成果物 ------------------------------- */
.aic-sheet {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.aic-sheet__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: #7E621F;
}
.aic-sheet__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  color: var(--color-ink);
  margin: 0 0 6px;
}
.aic-sheet__meta {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-depth);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.aic-sheet__meta .is-live { color: #7E621F; }

/* 総合欄: 段階名（明朝）と Cormorant の数字 */
.aic-sheet__stage {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: end;
}
.aic-sheet__label {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-depth);
}
.aic-sheet__stage-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--color-slate);
  transition: color var(--transition-base);
}
.aic-sheet__stage-name.is-set { color: var(--color-ink); }
.aic-sheet__score {
  margin: 0;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 0.9;
  color: var(--color-teal);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aic-sheet__score small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-depth);
  margin-left: 4px;
}

/* 図版: レーダー（FIG. 01） */
.aic-sheet__fig { margin: 16px 0 6px; }
.aic-radar {
  display: block;
  width: 100%;
  height: auto;
  max-width: 340px;
  margin: 0 auto;
  overflow: visible;
}
.aic-radar__grid { fill: none; stroke: var(--color-line); stroke-width: 1; }
.aic-radar__spoke { stroke: var(--color-line); stroke-width: 1; }
.aic-radar__area {
  fill: rgba(39, 106, 117, 0.16);
  stroke: var(--color-teal);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.aic-radar__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-ink);
}
.aic-radar__dot { fill: var(--color-teal); }
.aic-sheet__cap {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-depth);
  text-align: center;
}

/* 軸の欄: 名前 / バー / 数字（罫線の行。回答で点灯する） */
.aic-sheet__axes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.aic-axis {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-slate);
  transition: color var(--transition-base);
}
.aic-axis.is-lit { color: var(--color-ink); }
.aic-axis__name { font-size: 0.875rem; font-weight: 700; }
.aic-axis__bar {
  position: relative;
  height: 6px;
  background: var(--bg-paper);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  overflow: hidden;
}
.aic-axis__bar i {
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  transform: scaleX(var(--r, 0));
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aic-axis__num {
  font-family: var(--font-num);
  font-size: 1.15rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aic-axis__num small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-depth);
  letter-spacing: 0.06em;
}

/* 最初の一手（13問目で入る欄） */
.aic-sheet__first {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-card);
  color: var(--color-slate);
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.aic-sheet__first.is-set {
  border-style: solid;
  border-color: var(--color-navy);
  color: var(--color-ink);
}
.aic-sheet__first .aic-grade {
  display: inline-block;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 8px;
  color: var(--color-teal);
  vertical-align: -2px;
}
.aic-sheet__first-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-depth);
  margin-bottom: 4px;
}

/* 印（完成時） */
.aic-sheet__seal {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 74px;
  height: 74px;
  border: 2px solid #7E621F;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #7E621F;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
  color: #7E621F;
  opacity: 0;
  transform: rotate(-10deg) scale(1.4);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.aic-sheet.is-done .aic-sheet__seal { opacity: 1; transform: rotate(-10deg) scale(1); }

/* 診断書の末尾リンク（完成後） */
.aic-sheet__to-result {
  display: none;
  margin: 16px 0 0;
}
.aic-sheet.is-done .aic-sheet__to-result { display: block; }

/* --- 3. 設問（右）: 取材項目 --------------------------------------------- */
.aic-form__intro {
  margin: 0 0 22px;
  color: var(--color-depth);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.aic-q-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aic-q {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: 18px 20px 16px;
  transition: border-color var(--transition-base);
}
.aic-q.is-answered { border-color: rgba(12, 22, 38, 0.5); }
.aic-q__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7E621F;
}
.aic-q__kicker .k-label { color: #4E5D70; }
.aic-q__text {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
}
.aic-q--task { border-left: 3px solid var(--color-navy); }
.aic-q--task .aic-q__text { font-size: 1.125rem; }
.aic-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 599px) { .aic-opts { grid-template-columns: minmax(0, 1fr); } }
.aic-opt { position: relative; }
.aic-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.aic-opt span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--bg-paper);
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.aic-opt span::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-slate);
  background: #fff;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.aic-opt span:hover { border-color: var(--color-indigo); background: #fff; }
.aic-opt input:checked + span {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.aic-opt input:checked + span::before {
  background: var(--color-gold-timeline);
  border-color: var(--color-gold-timeline);
  box-shadow: inset 0 0 0 3px var(--color-navy);
}
.aic-opt input:focus-visible + span {
  outline: 3px solid var(--color-indigo);
  outline-offset: 2px;
}
.aic-form__foot {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.aic-form__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-depth);
}
.aic-noscript {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-left: 3px solid #7E621F;
  background: var(--color-paper);
  font-size: 0.9375rem;
  color: var(--color-ink);
}

/* --- 4. モバイルの進捗帯（下部固定・PC では非表示） -------------------------- */
.aic-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(12, 22, 38, 0.96);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 10px var(--container-px);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.aic-bar.is-visible { transform: translateY(0); }
.aic-bar__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}
.aic-bar__stage {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aic-bar__link {
  flex: none;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  padding: 6px 12px;
}
@media (max-width: 1023px) {
  .aic-bar { display: flex; }
  body.aic-has-bar { padding-bottom: 64px; }
}

/* --- 5. 結果の詳細（完成後に表示） ------------------------------------------- */
.aic-result { background: var(--color-fog); }
.aic-result__stage {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: 20px 22px;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: center;
}
.aic-result__stage-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}
.aic-result__stage-summary { grid-column: 1 / -1; margin: 0; color: var(--color-depth); line-height: 1.8; }
.aic-result__score {
  margin: 0;
  font-family: var(--font-num);
  font-size: 2.2rem;
  line-height: 0.9;
  color: var(--color-teal);
  white-space: nowrap;
}
.aic-result__score small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-depth);
  margin-left: 4px;
}
.aic-h3 {
  margin: 28px 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.aic-h3::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: #7E621F;
}
.aic-advice {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.aic-advice li {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink);
}
.aic-advice b { font-weight: 700; }
.aic-advice b small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-depth);
  font-weight: 500;
}
@media (max-width: 599px) { .aic-advice li { grid-template-columns: minmax(0, 1fr); } }
.aic-first {
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  align-items: start;
}
.aic-first__grade {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 3rem;
  line-height: 0.9;
  color: var(--color-teal);
  grid-row: span 3;
}
.aic-first__label { margin: 0; font-weight: 700; color: var(--color-ink); font-size: 1.0625rem; }
.aic-first__task { margin: 0; color: var(--color-depth); font-size: 0.9375rem; line-height: 1.7; }
.aic-first__step { margin: 0; color: var(--color-ink); font-size: 0.9375rem; line-height: 1.7; }
.aic-first__step b { font-weight: 700; }
.aic-notes, .aic-steps { margin: 0; padding-left: 1.4em; color: var(--color-ink); line-height: 1.8; font-size: 0.9375rem; }
.aic-notes li + li, .aic-steps li + li { margin-top: 6px; }
.aic-disclaimer {
  margin: 24px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-depth);
}

/* 共有・保存 */
.aic-share {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.aic-share .button { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.aic-share__msg {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #7E621F;
  min-height: 1.2em;
}

/* AI ハンドオフ（結果セクションの外の静的な節・1 箇所。一次 CTA より控えめ） */
.aic-handoff { background: var(--bg-paper); }
.aic-handoff[data-ai-mode="none"] { display: none; }
.aic-handoff__lead {
  margin: 0 0 14px;
  color: var(--color-depth);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.aic-handoff__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aic-handoff__row .button {
  min-height: 42px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.aic-handoff__row .button:hover { background: #fff; border-color: var(--color-indigo); }
.aic-handoff[data-ai-mode="copy-only"] .aic-handoff__link { display: none; }
.aic-handoff__details { margin: 12px 0 0; }
.aic-handoff__details summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-indigo);
}
.aic-handoff__prompt {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow: auto;
}
.aic-handoff__note {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-depth);
}

/* --- 6. 動きの縮退・印刷 ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aic-axis__bar i,
  .aic-sheet__seal,
  .aic-bar,
  .aic-q,
  .aic-opt span,
  .aic-opt span::before,
  .aic-sheet__stage-name,
  .aic-axis,
  .aic-sheet__first { transition: none; }
}
@media print {
  .detail-header, .detail-cta, .detail-footer, .aic-form, .aic-bar, .aic-share, .aic-handoff, .skip-link { display: none !important; }
  .aic__grid { display: block; }
  .aic-sheet { position: static; border-color: #999; }
  .aic-result { display: block !important; background: #fff; }
  .aic-result[hidden] { display: none !important; }
  .detail-hero { background: #fff; color: #000; }
  .detail-hero__title, .detail-hero__lead { color: #000; }
  .aic-hero-facts li { color: #333; }
}

/* --- 7. 補足文（結果画面の説明行） ------------------------------------------ */
.aic-note {
  margin: -4px 0 14px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-depth);
}
.aic-result__caution {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #7E621F;
  background: var(--bg-paper);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-ink);
}
.aic-result__text {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-ink);
  resize: vertical;
}

/* --- 8. fieldset/legend のブラウザ既定スタイルを打ち消す（設問カードの枠と重ならないように） ---- */
.aic-q__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.aic-q__fs > legend.aic-q__text { float: left; width: 100%; padding: 0; }
.aic-q__fs > .aic-opts { clear: both; }

/* --- 9. モバイル進捗帯: 非表示時は hidden（display:none）で Tab 順からも外す --- */
.aic-bar[hidden] { display: none !important; }

/* --- 10. ヘッダーの戻りリンク（本ページはラベルが長い） ------------------------
   共通の .detail-back-pill は 379px 以下でしか縮まないため、「AI活用の相談へ戻る」を
   置く本ページでは 390px 級で 16px ほど横に溢れる（本番実測）。styles.css は共有資産なので
   触らず、本ページだけに読み込まれる本ファイルで 420px 以下の縮小を上乗せする。 */
@media (max-width: 420px) {
  .detail-header__inner { gap: 8px; padding: 0 16px; }
  .detail-back-pill { font-size: 0.8125rem; padding: 6px 12px; min-height: 36px; }
}