/* portal-v2 · /how-it-works/ — Workbench + Narrative Workflow
 * スコープ: .theme-portal-v2 のみ。このファイルは /how-it-works/ にだけ読み込まれる。
 * 規約: /design.md。色・フォント・角丸はすべて --portal-* トークン経由。
 * 図解内部限定パレット(--portal-art-*)は本ファイル内では pv-cycle-diagram の中でのみ使用する。
 */

/* ============ page hero ============ */
.theme-portal-v2 .page-hero {
  background: var(--portal-paper);
  border-bottom: 1px solid var(--portal-rule);
}

.theme-portal-v2 .page-hero h1 {
  font-size: var(--portal-text-page-title);
}

.theme-portal-v2 .crumbs a:hover {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .sec-eyebrow {
  color: var(--portal-primary-deep);
}

/* ============ 運用の構造転換 (shift-grid) ============ */
.theme-portal-v2 .shift-col {
  box-shadow: none;
  border-radius: var(--portal-radius-card);
}

.theme-portal-v2 .shift-col.before {
  background: var(--portal-paper);
  border: 1px solid var(--portal-rule);
}

.theme-portal-v2 .shift-col.after {
  background: var(--portal-surface);
  border: 1px solid var(--portal-primary);
  box-shadow: none;
}

.theme-portal-v2 .shift-col.after h3 {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .shift-col.after h3::before {
  background: var(--portal-primary);
  border-radius: 2px;
}

.theme-portal-v2 .shift-col.after li::before {
  color: var(--portal-primary);
}

/* ============ 運用ループ図解 ============ */
.theme-portal-v2 .pv-cycle-fig {
  margin: var(--space-2xl) auto 0;
  max-width: 62rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  padding: var(--space-lg);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.theme-portal-v2 .pv-cycle-diagram {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.theme-portal-v2 .pv-cycle-diagram--narrow {
  display: none;
}

@media (max-width: 40rem) {
  .theme-portal-v2 .pv-cycle-diagram--wide {
    display: none;
  }
  .theme-portal-v2 .pv-cycle-diagram--narrow {
    display: block;
  }
}

.theme-portal-v2 .pv-cycle-glow {
  fill: var(--portal-art-glow);
  opacity: 0.16;
  filter: blur(48px);
}

.theme-portal-v2 .pv-cycle-node--a {
  fill: var(--portal-art-indigo);
}
.theme-portal-v2 .pv-cycle-node--b {
  fill: var(--portal-primary-deep);
}
.theme-portal-v2 .pv-cycle-node--c {
  fill: var(--portal-primary);
}
.theme-portal-v2 .pv-cycle-node--d {
  fill: var(--portal-art-indigo);
}

.theme-portal-v2 .pv-cycle-arrow {
  fill: var(--portal-muted);
}

.theme-portal-v2 .pv-cycle-icon {
  color: var(--portal-surface);
}

.theme-portal-v2 .pv-cycle-label {
  font-family: var(--portal-font-heading);
  font-weight: 700;
  font-size: 24px;
  fill: var(--portal-surface);
}

.theme-portal-v2 .pv-cycle-sub {
  font-family: var(--portal-font-body);
  font-weight: 400;
  font-size: 14.5px;
  fill: var(--portal-surface);
  opacity: 0.88;
}

.theme-portal-v2 .pv-cycle-step {
  font-family: var(--portal-font-numeric);
  font-weight: 700;
  font-size: 12px;
  fill: var(--portal-surface);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

/* ============ cycle text grid (既存の重複テキスト) ============ */
.theme-portal-v2 .cyc {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-control);
}

.theme-portal-v2 .cyc::before {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .cycle-loop {
  color: var(--portal-primary-deep);
}

/* ============ assets table ============ */
.theme-portal-v2 .assets {
  background: var(--portal-surface);
  border-radius: var(--portal-radius-card);
  border: 1px solid var(--portal-rule);
  box-shadow: none;
}

.theme-portal-v2 .assets th {
  color: var(--portal-primary-deep);
}

/* ============ AIと人の役割分担 (hitl-table) ============ */
.theme-portal-v2 .hitl-table {
  background: var(--portal-surface);
  border-radius: var(--portal-radius-card);
  border: 1px solid var(--portal-rule);
  box-shadow: none;
}

.theme-portal-v2 .hitl-table th.ai {
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .hitl-table th.hu {
  background: var(--portal-paper);
  color: var(--portal-ink);
}

.theme-portal-v2 .pv-th-icon {
  width: 15px;
  height: 15px;
  margin-right: var(--space-2xs);
  vertical-align: -0.15em;
}

/* ============ AI提案サンプル ============ */
.theme-portal-v2 .aia-card {
  background: var(--portal-surface);
  box-shadow: none;
  border-radius: var(--portal-radius-card);
}

.theme-portal-v2 .aia-card.feat {
  box-shadow: none;
  border-color: var(--portal-primary);
}

.theme-portal-v2 .ai-badge {
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .mock-btn {
  border-radius: var(--portal-radius-pill);
  border-color: var(--portal-rule-strong);
}

.theme-portal-v2 .mock-btn.ok {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: var(--portal-surface);
}

/* ============ 主な機能 (feat-grid) ============ */
.theme-portal-v2 .feat-card {
  background: var(--portal-surface);
  box-shadow: none;
  border-radius: var(--portal-radius-card);
}

.theme-portal-v2 .pv-pictogram {
  display: block;
  width: 20px;
  height: 20px;
  margin: var(--space-md) 0 var(--space-2xs) var(--space-lg);
}

.theme-portal-v2 .feat-lead .pv-pictogram {
  margin-top: 0;
  margin-left: 0;
}

.theme-portal-v2 .feat-card h3 {
  padding-top: var(--space-2xs);
}

/* ============ 標準シナリオ ============ */
.theme-portal-v2 .scn-group h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.theme-portal-v2 .scn-group h3 .pv-pictogram {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
}

.theme-portal-v2 .scn-group h3::after {
  background: var(--portal-primary);
}

.theme-portal-v2 .scn-item {
  border-color: var(--portal-rule);
}

/* ============ 導入の流れ ============ */
.theme-portal-v2 .step {
  border-color: var(--portal-rule);
}

.theme-portal-v2 .step-num {
  color: var(--portal-primary);
}

.theme-portal-v2 .step-out {
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
  border-radius: var(--portal-radius-control);
}

/* ============ FAQ ============ */
.theme-portal-v2 .faq-item {
  border-color: var(--portal-rule);
}

.theme-portal-v2 .faq-item summary::before {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .faq-item summary:focus-visible {
  outline-color: var(--portal-focus);
}

/* ============ CTA band ============ */
.theme-portal-v2 .cta-band {
  background: var(--portal-primary);
  border-radius: var(--portal-radius-card);
  box-shadow: none;
}

.theme-portal-v2 .cta-band::before,
.theme-portal-v2 .cta-band::after {
  content: none;
}

.theme-portal-v2 .cta-band h2,
.theme-portal-v2 .cta-band p {
  color: var(--portal-surface);
}

.theme-portal-v2 .cta-band .btn-utility .ph {
  width: 1em;
  height: 1em;
}

.theme-portal-v2 .cta-band .btn:focus-visible {
  outline-color: var(--portal-surface);
}

@media (prefers-reduced-motion: reduce) {
  .theme-portal-v2 .pv-cycle-glow {
    filter: none;
  }
}