/* css/how-it-works.css */

.howit-hero .howit-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(20,24,34,0.06);
  background: rgba(255,255,255,0.7);
  box-shadow: var(--shadow-soft-sm);
  font-size: 12px;
  font-weight: 800;
  color:#111827;
}

/* 共通カード（styles.cssのトーンに合わせたニューモーフ） */
.card-like{
  border: 1px solid rgba(20,24,34,0.06);
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f6fa 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.howit-section{
  margin: 14px 4px 18px;
}

.howit-section-head{
  margin: 6px 2px 10px;
}

.howit-section-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.howit-note{
  margin-top: 12px;
  padding: 14px 14px 12px;
}

.howit-note-title{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 13px;
  color: #111827;
}

.howit-note-body{
  margin: 0;
  color: #2b3342;
  font-size: 13px;
  line-height: 1.75;
}

/* ========= 3 cards (why AI) ========= */
.howit-cards3{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

@media (min-width: 820px){
  .howit-cards3{ grid-template-columns: 1fr 1fr 1fr; }
}

.howit-info-card{
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.howit-info-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(250,82,82,0.12);
  color:#fa5252;
  border: 1px solid rgba(250,82,82,0.20);
  flex: 0 0 auto;
}

.howit-info-title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 900;
  color:#111827;
}

.howit-info-text{
  margin: 0;
  color:#2b3342;
  font-size: 13px;
  line-height: 1.75;
}

.howit-neutral{
  margin-top: 12px;
  padding: 14px;
}

.howit-neutral-title{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 6px;
}

.howit-bullets{
  margin: 0;
  padding-left: 18px;
  color: #263041;
  font-size: 13px;
  line-height: 1.75;
}

/* ========= Step Flow (4 steps list) ========= */
.howit-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.howit-step{
  padding: 14px;
}

.howit-step-top{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.howit-step-num{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(250,82,82,0.12);
  color: #fa5252;
  border: 1px solid rgba(250,82,82,0.25);
}

.howit-step-title{
  font-size: 14px;
  font-weight: 900;
  color:#111827;
  line-height: 1.3;
}

.howit-step-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}

.howit-chiprow{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.howit-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,24,34,0.06);
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-soft-sm);
  color: #394255;
  font-size: 12px;
  font-weight: 700;
}

/* ========= PolicyAI mechanism STEP1-3 ========= */
.howit-stepflow{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.howit-stepbox{
  padding: 14px;
  position: relative;
}

.howit-stepbadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  border: 1px solid rgba(20,24,34,0.08);
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-soft-sm);
  margin-bottom: 10px;
}

.howit-stepbox-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color:#111827;
}

.howit-minirows{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}

.howit-minirow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.howit-miniicon{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,125,246,0.10);
  border: 1px solid rgba(47,125,246,0.18);
  color:#2f7df6;
  font-weight: 900;
  flex:0 0 auto;
}

.howit-minihead{
  font-weight: 900;
  color:#111827;
  margin-bottom: 2px;
  font-size: 13px;
}

.howit-minitext{
  color:#2b3342;
  font-size: 13px;
  line-height: 1.7;
}

.howit-arrow{
  text-align:center;
  color: #9aa3b2;
  font-weight: 900;
}

/* ========= Metrics (3 cols always) ========= */
.howit-metrics{
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* スマホでも3列を保つ（見切れ防止） */
@media (max-width: 420px){
  .howit-metrics{
    gap: 8px;
  }
  .howit-metric{
    padding: 10px;
  }
  .howit-metric-num{
    font-size: 24px;
  }
  .howit-metric-label{
    font-size: 11px;
  }
}

.howit-metric{
  border: 1px solid rgba(20,24,34,0.06);
  background: rgba(255,255,255,0.65);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-soft-sm);
}

.howit-metric-num{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  color:#111827; /* デフォルト */
}

.howit-metric-num.is-orange{ color:#ff7a00; }
.howit-metric-num.is-blue{ color:#2f7df6; }
.howit-metric-num.is-green{ color:#22b573; }

.howit-metric-label{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* ========= Flow grid ========= */
.howit-flowgrid{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 820px){
  .howit-flowgrid{ grid-template-columns: 1fr 1fr 1fr; }
}

.howit-flowcard{
  padding: 14px;
}

.howit-flow-top{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.howit-flow-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(250,82,82,0.10);
  border: 1px solid rgba(250,82,82,0.18);
  color:#fa5252;
  flex: 0 0 auto;
}

.howit-flow-title{
  font-weight: 900;
  color:#111827;
  font-size: 14px;
}

.howit-flow-sub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.howit-tagrow{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.howit-tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(20,24,34,0.06);
  box-shadow: var(--shadow-soft-sm);
  font-size: 12px;
  font-weight: 800;
  color:#394255;
}

/* ========= Roles (accordion cards) ========= */
.howit-roles{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}

.howit-role{
  padding: 0;
  overflow: hidden;
}

.howit-role-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.howit-role-head::-webkit-details-marker{ display:none; }

.howit-role-badge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#fff;
  background: #2f7df6;
  box-shadow: var(--shadow-soft-sm);
}

.howit-role-title{
  font-weight: 900;
  color:#111827;
}

.howit-role-caret{
  margin-left:auto;
  font-weight: 900;
  color:#9aa3b2;
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.howit-role[open] .howit-role-caret{
  transform: rotate(-90deg);
}

.howit-role-body{
  padding: 0 14px 14px;
  color:#2b3342;
}

.howit-role-desc{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.75;
}

.howit-checks{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.75;
}

.howit-warn{
  margin-top: 12px;
  padding: 14px;
  border-left: 4px solid rgba(250,82,82,0.6);
}

.howit-warn-title{
  font-weight: 900;
  margin-bottom: 6px;
  color:#111827;
  font-size: 13px;
}

.howit-warn-text{
  color:#2b3342;
  font-size: 13px;
  line-height: 1.75;
}

/* ========= Prompts ========= */
.howit-prompts{
  padding: 10px 12px;
  display:grid;
  gap: 10px;
}

.howit-prompt{
  border: 1px solid rgba(20,24,34,0.06);
  background: rgba(255,255,255,0.65);
  border-radius: 16px;
  box-shadow: var(--shadow-soft-sm);
  overflow: hidden;
}

.howit-prompt-head{
  cursor: pointer;
  padding: 12px 12px;
  font-weight: 900;
  color:#111827;
  list-style: none;
}
.howit-prompt-head::-webkit-details-marker{ display:none; }

.howit-code{
  margin: 0;
  padding: 12px;
  overflow:auto;
  background: rgba(15,18,30,0.04);
  border-top: 1px solid rgba(20,24,34,0.06);
  font-size: 12px;
  line-height: 1.7;
  color:#1b2230;
}

/* ========= CTA ========= */
.howit-cta{
  padding: 14px;
}

.howit-cta-title{
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 6px;
}

.howit-cta-sub{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.howit-cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.howit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(20,24,34,0.10);
  background: #fa5252;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: var(--shadow-soft-sm);
  cursor: pointer;
}

.howit-btn.ghost{
  background: rgba(255,255,255,0.75);
  color: #111827;
}

/* ========= FAQ ========= */
.howit-faq{
  padding: 10px 12px;
}

.howit-faq-item{
  border-bottom: 1px solid rgba(20,24,34,0.06);
  padding: 8px 0;
}

.howit-faq-item:last-child{
  border-bottom: none;
}

.howit-faq-q{
  list-style: none;
  cursor: pointer;
  font-weight: 900;
  color:#111827;
  padding: 10px 6px;
  border-radius: 12px;
}

.howit-faq-q::-webkit-details-marker{
  display:none;
}

.howit-faq-item[open] .howit-faq-q{
  background: rgba(250,82,82,0.06);
  border: 1px solid rgba(250,82,82,0.14);
}

.howit-faq-a{
  padding: 0 6px 10px;
  color:#2b3342;
  font-size: 13px;
  line-height: 1.75;
}

.howit-footer-note{
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* =========================
   Mobile
========================= */
@media (max-width: 480px) {
  .howit-info-card{ padding: 12px; }
  .howit-step{ padding: 12px; }
  .howit-stepbox{ padding: 12px; }
  .howit-flowcard{ padding: 12px; }
}