/* =================================================================
 * c-flow — フロー図（縦）
 *   Figma: スタイルガイド パーツセット 5371:88803（項目49 フロー図（縦））
 *
 *   複数の「列（視点）」を横並びにし、同じ工程を 1 行に揃えて見せる
 *   比較フロー表。CSS Grid の共有行で列をまたいだ高さが自動で揃う。
 *   ・列ヘッダー = 角丸ピル（既定色 1=Key / 2=Orange01 / 3=Gold、上書き可）
 *   ・列間 = 縦の点線区切り（Neutral04）
 *   ・セル = Light_Orange02 地。href 付きは Key 色＋↗アイコン
 *   ・note 行 = 全幅の区切りバンド（無料相談ライン等）
 * =================================================================*/

.c-flow {
  --c-flow-divider-w: 17rem;   /* 列間（点線を中央に置く） */
  --c-flow-cell-min:  48rem;   /* セルの最小高（Figma 48px） */
  --c-flow-gold:      #FFB13D;/* 提出物ピル用ゴールド（tokens 外・本コンポ専用） */
  width: 100%;
}

.c-flow__grid {
  display: grid;
  /* grid-template-columns はインライン（列数に応じて Blade が生成） */
  column-gap: 0;
  row-gap: var(--space-1);    /* 4px（Figma の 52px ピッチ − 48px セル） */
  align-items: stretch;
}

/* ---- 列間の点線区切り（全行貫通） ---------------------------------- */
.c-flow__divider {
  width: 0;
  justify-self: center;
  align-self: stretch;
  border-left: 1px dashed var(--color-border); /* Neutral04 #D9D9D9 */
}

/* ---- 列ヘッダー --------------------------------------------------- */
.c-flow__col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);        /* 8px */
  text-align: center;
}

.c-flow__col-head--1 { --c-flow-head-bg: var(--color-key); }        /* 生産フロー */
.c-flow__col-head--2 { --c-flow-head-bg: var(--color-orange-01); }  /* 業務フロー */
.c-flow__col-head--3 { --c-flow-head-bg: var(--c-flow-gold); }      /* 提出物 */

.c-flow__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56rem; /* Figma: ヘッダーピルは 56px（本文セルの 48px とは別） */
  padding: var(--space-2) var(--space-3);
  background: var(--c-flow-head-bg, var(--color-key));
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-size: var(--fs-body);          /* 16px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-spacing-body);
}

.c-flow__col-desc {
  color: var(--color-text-default);
  font-size: var(--fs-body-xs);        /* 12px */
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-small);
}

/* ---- セル -------------------------------------------------------- */
.c-flow__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--c-flow-cell-min);
  padding: var(--space-2) var(--space-3);
  background: var(--color-light-orange-02); /* #FCE9DD */
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  font-size: var(--fs-body-sm);        /* 14px */
  line-height: var(--lh-tight);        /* Figma セルは ~18px 行（14px×1.25）。snug(1.5) だと2行セルが 48→58 に膨らむ */
  letter-spacing: var(--letter-spacing-small);
  text-align: center;
}

/* 空欄セル：地を出さず行の高さだけ確保 */
.c-flow__cell--blank {
  background: transparent;
  padding: 0;
}

/* リンクセル：Key 色文字＋↗アイコン */
.c-flow__cell--link {
  color: var(--color-key);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.c-flow__cell--link:hover {
  opacity: 0.75;
}

.c-flow__cell--link:focus-visible {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
}

.c-flow__cell-arrow {
  flex-shrink: 0;
  width: 12rem;
  height: 12rem;
  background-color: currentColor;
  -webkit-mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
}

/* ---- note 行（全幅の区切りバンド） -------------------------------- */
.c-flow__note {
  position: relative;          /* 点線区切りより前面に */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56rem; /* Figma: note バンドは 56px */
  margin: var(--space-1) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-key);
  border-radius: var(--radius-md);
  color: var(--color-key);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-small);
  text-align: center;
}