/* =============================================================================
   Table（テーブル行コンポーネント）
   Figma: node-id=60:2610
   - PC: ラベル（200px）＋ コンテンツ（flex-1）を横並び
   - SP（640px 以下）: ラベルを上、コンテンツを下に縦積み
   ============================================================================= */

.table-item {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-table-border);
}

/* 隣接する行の上下ボーダーを重ねて二重線を防ぐ */
.table-item + .table-item {
  margin-top: -1px;
}

/* =============================================================================
   ラベルセル
   ============================================================================= */

.table-item__label {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  border-right: 1px solid var(--color-table-border);
  padding: var(--margin-8) var(--margin-16);
  font-size: var(--font-size-18);
  font-family: var(--font-family-base);
  font-weight: normal;
  color: var(--color-black);
  text-align: center;
}

/* =============================================================================
   コンテンツセル
   ============================================================================= */

.table-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--margin-16);
  gap: var(--margin-4);
}

/* =============================================================================
   主要工事履歴バリアント（type="history" / type="history-header"）
   Figma: PC02 バリアント
   - ラベル: 100px（年）、ベージュなし
   - ヘッダー行: 両セルベージュ
   - SP でも 2 列を維持（縦積みしない）
   ============================================================================= */

.table-item--history .table-item__label {
  width: 100px;
  background-color: transparent;
}

/* ヘッダー行：ラベル・コンテンツともにベージュ */
.table-item--history-header .table-item__label {
  background-color: var(--color-bg);
}

.table-item--history-header .table-item__content {
  background-color: var(--color-bg);
}

/* =============================================================================
   SP レイアウト（640px 以下）
   history バリアントは縦積みしない
   ============================================================================= */

@media (max-width: 640px) {
  .table-item:not(.table-item--history) {
    flex-direction: column;
  }

  .table-item:not(.table-item--history) .table-item__label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-table-border);
  }
}