/* =========================================================================
   サプライチェーン分析ページ（モック）のページ固有CSS
   ★色・寸法は materia のトークン（--color-* / --text-* / --spacing-*）だけを使う。
     hex の直書きは禁止（tools/check_pages.py が見張る）。
   ★器（ヘッダー・見出し帯・サイドナビ）は prod/*.css と sidenav.css の担当。
     ここには「本番CSSに無くて器に要るもの」と、この画面の中身だけを書く。
   ========================================================================= */

/* ===== 器の補い ===== */

/* FixedHeader.vue の scoped スタイル。保存ページの data-v と噛み合わないため、
   本番と同じ指定をここに置く（値は FixedHeader.vue のまま）。 */
#app-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 保存ページに残っている「開いていないドロップダウン」がレイアウトを押し広げないように。
   本番では Vue が閉じた状態を制御している。 */
.dropdown__panel {
  display: none !important;
}

/* 本文。本番の企業ページと同じ .page-container-fluid（prod CSS）に、
   このモックの読み物としての最大幅と縦の間隔だけを足す。 */
.page-container-fluid > .sc-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ===== この画面の見出し ===== */
.sc-h2 {
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-150);
}

.sc-h3 {
  margin-bottom: 8px;
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-150);
}

.sc-note {
  color: var(--color-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-170);
}

.sc-empty {
  padding: 32px 0;
  color: var(--color-tertiary);
  font-size: var(--text-md);
  text-align: center;
}

/* ===== 共通の部品 ===== */

.sc-link {
  color: var(--color-default);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-gray-500);
}

.sc-link:hover {
  color: var(--color-primary-dark-default);
}

/* 重要度（A〜E）。A が濃く、E が薄い */
.sc-imp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-weight: 700;
  font-size: var(--text-xs);
  font-family: var(--font-family-number);
  border-radius: var(--radius-default);
}

.sc-imp--A { color: var(--color-inverse); background-color: var(--color-gold-400); }
.sc-imp--B { color: var(--color-default); background-color: var(--color-gold-100); }
.sc-imp--C { color: var(--color-secondary); background-color: var(--color-gray-300); }
.sc-imp--D { color: var(--color-tertiary); background-color: var(--color-gray-200); }
.sc-imp--E { color: var(--color-quaternary); background-color: var(--color-gray-200); }

/* レーティング（S+〜D-）。Sec06 の色分けと同じ考え方 */
.sc-rating {
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-family-number);
}

.sc-rating--good { color: var(--color-primary-dark-default); }
.sc-rating--mid { color: var(--color-tertiary); }
.sc-rating--bad { color: var(--color-negative-default); }
.sc-rating--none { color: var(--color-quaternary); }

/* 表 */
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.sc-table th {
  padding: 8px 12px;
  color: var(--color-secondary);
  font-weight: 700;
  font-size: var(--text-xs);
  text-align: left;
  white-space: nowrap;
  background-color: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-400);
}

.sc-table th.is-sortable {
  cursor: pointer;
  user-select: none;
}

.sc-table th.is-sortable:hover {
  color: var(--color-primary-dark-default);
}

.sc-table td {
  padding: 8px 12px;
  color: var(--color-default);
  vertical-align: top;
  border-bottom: 1px solid var(--color-gray-300);
}

.sc-table tbody tr:hover {
  background-color: var(--color-gray-100);
}

.sc-num {
  font-family: var(--font-family-number);
  text-align: right;
  white-space: nowrap;
}

/* 面（カード） */
.sc-card {
  padding: 16px;
  background-color: var(--color-white-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-default);
}

.sc-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ===== 4案に共通の入れ物 ===== */

.sc-pagehead {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

/* 案の名前。**凍結案（`a_ledger` / `b_scorecard` / `d_overlap`）専用**のモックの札
   （プロダクトUIではない。採用案の `c_map.html` からは 2026-09-27 に外した） */
.sc-proto {
  padding: 2px 8px;
  color: var(--color-tertiary);
  font-weight: 500;
  font-size: var(--text-xs);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-default);
}

/* ② H2 と操作パネルの間は **8px**（関さん指示 2026-09-27「本番と違う」）。
   写し元: 本番 `Finances.vue` の見出しの段 `flex items-center mb-2`（＝8px）→ `.form-box`。
   ⚠️ ページ全体は段の間を 32px（`.sc-page` の gap）で空けているので、
      見出しと操作パネルだけこの箱でくくって 8px にする。 */
.sc-pagetop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-summary {
  display: flex;
  gap: 40px;
  padding: 12px 16px;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-default);
}

.sc-summary__item {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.sc-summary__label {
  color: var(--color-tertiary);
  font-weight: 700;
  font-size: var(--text-xs);
}

.sc-summary__num {
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-xl);
  font-family: var(--font-family-number);
}

.sc-summary__sub {
  color: var(--color-tertiary);
  font-size: var(--text-sm);
}

.sc-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== タブ（仕入先 / 得意先） ===== */
.sc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-gray-400);
}

.sc-tab {
  padding: 8px 20px;
  color: var(--color-tertiary);
  font-weight: 500;
  font-size: var(--text-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.sc-tab:hover {
  color: var(--color-default);
}

.sc-tab.is-active {
  color: var(--color-default);
  font-weight: 700;
  border-bottom-color: var(--color-primary-dark-default);
}

/* ===== 絞り込み（案①②④で使う。案③は下の「絞り込みパネル」） =====
   ⚠️ 案③を本番のパネルに作り替えたときに一度消してしまい、①④の絞り込みが
      素の並びに崩れた（2026-09-17）。**凍結した案のCSSも消さない。** */
.sc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}

.sc-filter__group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sc-filter__right {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

.sc-filter__label {
  color: var(--color-tertiary);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* ===== 絞り込みパネル =====
   ★器は本番「業績予測」ページと同じ `.form-box` / `.form-block`。
     ⚠️ **その CSS はここに書かない。** 本番のものが `prod/vue_board.css` に
        `[data-v-802d13a8]` 付きで入っているので、要素に同じ属性を付けて当てる
        （`c_map.html` の `fin()`）。ここに書くのは、本番に無い足し分だけ。 */

/* ③ 操作パネルの文字は**すべて medium（500）**（関さん指示 2026-09-27）。
   本番の見出し（`.form-block__label` 700）・3択ボタン（`.select-btn` 700）・
   チェック／ラジオの字（400）がまちまちだったのをそろえる。
   ⚠️ アイコン（Material Icons の字形）は除く。字形が太ると形が崩れる。
   ⚠️ 本番CSSは `.select-btn.is-active[data-v-…]`（詳細度 0,3,0）なので、それより強くする。 */
.sc-formbox.sc-formbox.sc-formbox,
.sc-formbox.sc-formbox.sc-formbox *:not(.material-icons) {
  font-weight: 500;
}

/* ⚠️⚠️ **`align-items` はクラス2つで書く。** 本番の `.form-box[data-v-802d13a8]` は
      `align-items: center` を持っていて**詳細度が (0,2,0)**。`.sc-formbox` だけ
      （(0,1,0)）では負けて、段が**内容幅で中央寄せ**になる。そうなると段ごとに
      幅が変わり、**行の先頭（「取引先」と「Tier」）の左端がずれる**（関さん指摘「開始位置は固定して」）。 */
.sc-formbox.sc-formbox {
  align-items: stretch;
  position: relative;        /* ④ 「すべて解除」を右上に置くため */
}

/* ④ 「すべて解除」（関さん指示 2026-09-25「すべて解除 右上におく」）。
   本番の「選択していないボタン」と同じく、字だけの控えめなリンクにする */
.sc-reset {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-tertiary);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.sc-reset:hover {
  color: var(--color-primary-dark-default);
}

/* 段をまたいで**文字の開始位置もそろえる**（関さん指示 2026-09-21）。
   ⚠️ materia は Checkbox の字間が 8px、Radio が 4px と**別の値**を持っている。
      そのままだと「仕入先」と「Tier1」の文字の左端が 4px ずれる（実測）。
      パネルの中だけ 8px にそろえる。
   ⚠️ 凍結した案①②④の `.mat-radio` は触らない（パネルの中に限る）。 */
.sc-formbox .mat-radio {
  grid-gap: 8px;
  gap: 8px;
}

/* ⑧ 段を縦に積む（関さん指示 2026-09-21「操作パネルは財務諸表ページのと
   同じくらい行間を持たせること」）。
   ★正本は財務諸表ページ（`ui_design/financial_statement/page.css`）の `.filterbar`:
     `flex-direction: column` ／ 段の間 `gap: 12px` ／ 余白 16px 24px。 */
.sc-formbox {
  flex-direction: column;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

/* 段。財務諸表ページの `.fb-row` と同じ
   （折り返しあり・行間 12px・高さの下限は materia の Control sm）。 */
.sc-fbrow {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  align-items: center;
  min-height: var(--height-control-sm);
}

/* ⑤ 上限（`AUTO_LIMIT`）を超えているときの断り書き（関さん指示 2026-09-21
   「ラジオの表示社数が上限を超える場合は、パネルに赤で注釈を出す」）。 */
.sc-warn {
  color: var(--color-negative-default);
  font-size: var(--text-xs);
  line-height: var(--leading-170);
}
/* ★Tier の段では**ラジオの下の行に、選択肢と同じ左端から**出す（関さん指示 2026-09-24
   「チェックやラジオの開始位置はそろえる」）。
   ⚠️ 見出しの幅（66px）ぶんだけ下げる。`.sc-formbox .form-block__label` の幅と
      同じ値にしておかないと、見出しの列に食い込んで左にはみ出して見える。 */
.sc-formbox .sc-fbrow > .sc-warn {
  flex: 0 0 calc(100% - 66px);
  margin-left: 66px;
}

/* 本番の `.period-type-selection` は下に 4px の余白が付くが、
   こちらは1行に複数の塊を並べるので打ち消す。
   ⚠️⚠️ **`.sc-optrow` だけでは打ち消せない。** 本番側は
      `.period-type-selection[data-v-802d13a8]` で**指定の強さが上**なので、
      クラス1つでは負けて 4px が残る。残ると、その4px のぶん中身が上に寄り
      「見出しだけ下に取り残されて見える」（関さん指摘 2026-09-18・実測2px）。
      → **親クラスを添えて強さをそろえる**（同じ強さなら後から読む方が勝つ）。 */
.form-box .sc-optrow {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

/* ⚠️ 1つの段に「かたまり」を2つ並べない（2026-09-24）。取引先と Tier を同じ段に
      並べていたが、折り返して見出しの位置が他の段とずれた（関さん指摘）。
      **どの段も「見出し 66px ＋ 選択肢」の1かたまり**にして、左端をそろえる。 */

/* ⚠️ **Tier の行も折り返す。** 社数を「仕入先 549社、得意先 295社」と
      両方書くようになった（関さん指示 2026-09-22・⑤）ので、5つ並べると
      1行に入らず**ページ全体に横スクロールが出る**（実測）。 */
.form-box .sc-tierblock .sc-optrow {
  flex-wrap: wrap;
  row-gap: 8px;
}
.sc-tierblock.sc-tierblock {
  align-items: flex-start;
}
.sc-tierblock .form-block__label {
  padding-top: 3.5px;
}

/* ★業種グループのチェック（関さん指示 2026-09-22）。
   ⚠️ **必ず折り返す。** 「自動車部品メーカー（82社）」のような長い名前が
      最大8個並ぶので、折り返さないと**ページ全体に横スクロールが出る**
      （2026-09-22 実測。検査 R5 が拾った）。 */
.form-box .sc-grpblock .sc-optrow {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* 見出しの幅。**全部の段でそろえる**（関さん指示 2026-09-22・③
   「仕入先業種 得意先業種 とする」）。
   ⚠️ 本番の `.form-block__label` は 50px だが、それは「取引先・重要度・Tier」の
      ような短い語しか無い画面の値。5文字の「仕入先業種」は入らない。
   ⚠️⚠️ **グループの段だけ広げてはいけない。** 段ごとにチェックの左端がずれる
      （2026-09-22 実測で 346px と 380px に割れた）。→ 全段を同じ幅にする。
   ⚠️ 本番側は `[data-v-802d13a8]` 付きで指定の強さが同じなので、
      **クラス2つ**にして後から読む側（この page.css）を勝たせる。 */
.sc-formbox .form-block__label {
  width: 66px;
}

/* ★取引先の3択ボタン（関さん指示 2026-09-22・①）。
   ⚠️ **見た目は本番の `.select-btn` が持っている**（`prod/vue_board.css` の
      `data-v-9116f732`）。ここには本番に無い足し分だけを書く。
   ・素の `<button>` なので、枠と余白を消してリンクのように見せる */
.sc-formbox .select-btn {
  margin-right: 8px;
  border: 0;
  cursor: pointer;
}
.sc-formbox .select-btn:last-child {
  margin-right: 0;
}

/* ★社数（関さん指示 2026-09-22・②「カッコをなくす。社数は小さく薄く」）。
   ⚠️ チェックの名前より**一段小さく・薄く**する（字の大きさと色で。太さはパネルの文字と同じ 500）。
      同じ濃さだと、16個並んだときに名前と数字が団子になって読めない。 */
.sc-count {
  margin-left: 6px;
  color: var(--color-tertiary);
  font-size: var(--text-xs);
}

/* ★見出しを押して絞った道（関さん指示 2026-09-23「> 以下は小さく薄いグレーで」）。
   社数（`.sc-count`）と同じ小ささ・薄さにそろえる。 */
.sc-crumb {
  margin-left: 6px;
  color: var(--color-tertiary);
  font-size: var(--text-xs);
}

/* 折り返す段（業種グループ・Tier）は、見出しを**1行目のチェックと高さをそろえる**。
   そのままだと見出しが段の縦中央へ行き、2行になった瞬間に 16px ずれる。 */
/* ⚠️ **クラス2つで書く。** 本番の `.form-block[data-v-802d13a8]` が
      `align-items: center` を (0,2,0) で持っているので、1つでは負ける
      （`.sc-formbox.sc-formbox` と同じ手口）。 */
.sc-grpblock.sc-grpblock {
  align-items: flex-start;
}
.sc-grpblock .form-block__label {
  /* 1行目のチェックと**中心をそろえる**ための微調整（実測で決めた値）。
     見出しは 10px/170%＝17px、チェックの字形は 20px。 */
  padding-top: 3.5px;
}

.sc-chip {
  min-width: 28px;
  padding: 3px 8px;
  color: var(--color-tertiary);
  font-weight: 700;
  font-size: var(--text-xs);
  font-family: var(--font-family-number);
  background: transparent;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-default);
  cursor: pointer;
}

.sc-chip.is-on {
  color: var(--color-default);
  background-color: var(--color-gold-100);
  border-color: var(--color-gold-300);
}

.sc-select,
.sc-input {
  height: 32px;
  padding: 0 8px;
  color: var(--color-default);
  font-size: var(--text-sm);
  background-color: var(--color-white-100);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-default);
}

.sc-input {
  width: 220px;
}

.sc-btn {
  height: 32px;
  padding: 0 16px;
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-sm);
  background-color: var(--color-white-100);
  border: 1px solid var(--color-gray-500);
  border-radius: var(--radius-default);
  cursor: pointer;
}

.sc-btn:disabled {
  color: var(--color-quaternary);
  border-color: var(--color-gray-300);
  cursor: not-allowed;
}

/* ===== 表の中身 ===== */
.sc-col-imp { width: 64px; text-align: center; }
.sc-col-ind { width: 120px; }
.sc-col-num { width: 110px; }

.sc-name {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

/* 取引表の社名が企業マスタと一致しない行の印。
   素性（業種・売上・5年予測）を出していないことを明示する。 */
.sc-unverified {
  flex-shrink: 0;
  padding: 0 4px;
  color: var(--color-quaternary);
  font-size: 10px;
  border: 1px solid var(--color-gray-400);
  border-radius: 2px;
}

.sc-growth {
  display: block;
  color: var(--color-quaternary);
  font-size: var(--text-xs);
  font-family: var(--font-family-number);
}

.sc-more {
  margin-top: 2px;
  padding: 0;
  color: var(--color-tertiary);
  font-size: var(--text-xs);
  background: none;
  border: none;
  cursor: pointer;
}

.sc-more:hover {
  color: var(--color-primary-dark-default);
}

.sc-row-desc td {
  padding-top: 0;
  background-color: var(--color-gray-100);
}

.sc-desc {
  padding: 8px 12px;
  color: var(--color-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-170);
}

/* ===== ② 評価型 ===== */

.sc-row--2 > * { flex: 1 1 0; min-width: 0; }
.sc-row--3 > * { flex: 1 1 0; min-width: 0; }

.sc-score__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-gray-300);
}

.sc-score__title {
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* 評価そのもの。文字数が多い区分（「極めて高リスク」）でも折り返さない大きさにする */
.sc-score__rating {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-100);
  white-space: nowrap;
}

.sc-score__rating--good { color: var(--color-primary-dark-default); }
.sc-score__rating--mid { color: var(--color-tertiary); }
.sc-score__rating--bad { color: var(--color-negative-default); }
.sc-score__rating--none { color: var(--color-quaternary); }

.sc-kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.sc-kv__row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.sc-kv__k { color: var(--color-tertiary); }

.sc-kv__v {
  color: var(--color-default);
  font-weight: 600;
  font-family: var(--font-family-number);
  text-align: right;
  white-space: nowrap;
}

.sc-kv__v.is-warn { color: var(--color-negative-default); }

/* 横棒。SVG を使わず div の幅（%）で描く */
.sc-dist { display: flex; flex-direction: column; gap: 6px; }

.sc-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
}

.sc-bar__label {
  flex: 0 0 116px;
  overflow: hidden;
  color: var(--color-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-bar__track {
  flex: 1 1 auto;
  height: 10px;
  background-color: var(--color-gray-200);
  border-radius: 2px;
}

.sc-bar__fill {
  height: 100%;
  background-color: var(--color-gold-300);
  border-radius: 2px;
}

.sc-bar__num {
  flex: 0 0 96px;
  color: var(--color-tertiary);
  font-size: var(--text-xs);
  font-family: var(--font-family-number);
  text-align: right;
  white-space: nowrap;
}

/* ===== ③ 相関図型（ECharts の tree） ===== */

.sc-maprow {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sc-maprow__map {
  flex: 1 1 auto;
  min-width: 0;        /* ECharts は親の幅を測るので、ここが縮めるようにしておく */
  overflow-x: auto;    /* 狭い画面では図の中だけ横に流す（ページ全体は流さない） */
}

/* 図に要る最小の幅。これより狭いと列の間隔が詰まり、社名どうしが重なる
   （1000px 幅の画面で1列 30px まで潰れて重なった。2026-09-16 実測）。
   ★拡大したときは JS が min-width を広げる（1040 × 倍率）。 */
.sc-mapinner {
  min-width: 1040px;
}

/* ===== 図の大きさのプルダウン（下線型）=====
   ★**役員情報モックの組織図と同じ**（関さん指示 2026-09-27）。写し元の値は xeno-materia の実物:
     トリガー＝materia Select（underline × sm）: 高さ 36 / 左右 12 / 下線 gray-1300・hover と開いたときはゴールド /
              ラベル 12px・行間 1.5・折り返さない / ▼ 16px
     一覧＝materia DropdownMenu（sm）: 最小幅 160・中身に合わせる / 上下 4 / 影 shadow-md / 項目 左右16・上下8・12px
     開き方＝xeno_delivery Dropdown.vue: 下・左ぞろえ・**4px 離す** / 高さの上限 240（SingleSelect）
     選択中の塗り＝本番CSS（`.single-select__menu[data-v-20fd6610]`。ここでは書かない）
   ⚠️ 一覧の幅をトリガーに合わせない（幅が足りず「100%」が2行に折れる） */
.usel { position: relative; display: inline-flex; }
.usel__trigger {
  display: inline-flex;
  align-items: center;
  min-width: fit-content;
  height: 36px;
  padding: 0 12px;
  background: var(--color-white-100);
  border: 0;
  border-bottom: 1px solid var(--color-gray-1300);
  border-radius: var(--radius-default) var(--radius-default) 0 0;
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-default);
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.usel__trigger:hover,
.usel.is-open .usel__trigger { border-bottom-color: var(--color-gold-300); }
.usel__label { flex: 1; text-align: left; white-space: nowrap; }
.usel__trigger .material-icons { font-size: 16px; line-height: 1; }
.usel__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  width: max-content;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--color-white-100);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);      /* materia shadow-md の実値 */
}
.usel__menu[hidden] { display: none; }
.usel__opt {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  border: 0;
  background: none;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-default);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.usel__opt:hover { background: var(--color-gray-100); }

/* 図の器。高さは葉の数から JS が入れる */
.sc-chart {
  width: 100%;
  min-height: 420px;
}

/* 左右がどちら向きかを示す帯。
   ⚠️ 一度 position:sticky にしたが、図の1行目に重なって社名が隠れたのでやめた
      （2026-09-16 実測）。縦に長い図で見出しを残したいなら、図の外に置くこと。 */
.sc-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  color: var(--color-tertiary);
  font-weight: 700;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--color-gray-300);
}

.sc-axis__side { flex: 1 1 0; }
.sc-axis__side.is-right { text-align: right; }

.sc-axis__center {
  flex: 0 0 auto;
  max-width: 320px;
  padding: 0 12px;
  overflow: hidden;
  color: var(--color-default);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 凡例 */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--color-gray-300);
}

.sc-legend__item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--color-secondary);
  font-size: var(--text-xs);
}

.sc-legend__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ===== チェックボックス／ラジオボタン =====
   ★本番と同じ xeno-materia の部品をそのまま写す（関さん指示 2026-09-17）。
     写し元: xeno-materia `origin/v2-major`
       src/components/ui/Checkbox.vue … size='md' / color='black'
       src/components/ui/Radio.vue    … size='md' / hasDescription=false

     ★大きさは **md**（本番「業績予測」ページの Radio と同じ。関さん指示 2026-09-17
       「ラジオなどのボタンの大きさも合わせること」）。Finances.vue は size を
       指定しておらず、Radio.vue の既定が **md** なので 24px になる。
       チェックボックスも同じ列に並ぶので md（24px）にそろえる。
     どちらも Tailwind のユーティリティを cva で組み立てているので、
     そこで使われている値をそのまま CSS に置き換えてある。対応は下表。

     | materia の指定           | ここでの値                       |
     |--------------------------|----------------------------------|
     | inline-flex / items-*    | display:inline-flex / align-items |
     | gap-2 / gap-1            | 8px / 4px（Tailwind の目盛り）    |
     | !text-[24px]  (size md)  | font-size:24px                   |
     | text-md       (size md)  | var(--text-md)                   |
     | text-tertiary            | var(--color-tertiary)            |
     | text-primary-dark-default| var(--color-primary-dark-default)|
     | text-gold-300            | var(--color-gold-300)            |
     | text-default             | var(--color-default)             |
     | text-sm / leading-170    | var(--text-sm) / var(--leading-170) |
     | transition-colors        | transition:color .15s            |

   ⚠️ **ブラウザ既定の input（`accent-color`）で似せない。** 本番はチェックも
      ラジオも **Material Icons の字形**で描いており、形がまったく違う。
   ⚠️ 素の input は消さずに **sr-only で隠すだけ**（キーボード操作と
      読み上げのために残す。materia もそうしている）。 */

.mat-checkbox,
.mat-radio {
  cursor: pointer;
}

.mat-checkbox {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.mat-radio {
  display: inline-flex;
  gap: 4px;
  /* ⚠️ materia の Radio は `items-start`（複数行のラベルを想定）だが、
     ここは1行しか出さないので **中央ぞろえ**にする。
     そろえないとチェックと並べたときに高さがずれる（関さん指摘 2026-09-18）。 */
  align-items: center;
}

/* 素の input は隠す（Tailwind の sr-only と同じ） */
.mat-sronly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
  clip: rect(0, 0, 0, 0);
}

.mat-checkbox__icon,
.mat-radio__icon {
  flex-shrink: 0;
  color: var(--color-tertiary);
  font-size: 24px;
  transition: color 0.15s;
  /* 字形の箱を 24px ちょうどにする（Material Icons 側の CSS も同じ値だが、
     そちらの読み込みに頼らないよう明示しておく） */
  line-height: 1;
}

.mat-checkbox__label,
.mat-radio__label {
  color: var(--color-default);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-170);
  white-space: nowrap;
}

/* 選んでいる状態（materia の checked バリアント） */
.mat-checkbox:has(input:checked) .mat-checkbox__icon {
  color: var(--color-primary-dark-default);
}

.mat-radio:has(input:checked) .mat-radio__icon {
  color: var(--color-gold-300);
}

/* キーボードで辿れることが分かるように（input を隠しているので自前で出す） */
.mat-checkbox:has(input:focus-visible),
.mat-radio:has(input:focus-visible) {
  outline: 2px solid var(--color-gold-300);
  outline-offset: 2px;
}

/* ===== ④ 接点さがし型 ===== */

.sc-ov {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.sc-ov__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  background-color: var(--color-white-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-default);
}

/* 3列の役割を色で分ける。「両方」を強調する（いちばん示唆がある列） */
.sc-ov__col--both {
  background-color: var(--color-gray-100);
  border-color: var(--color-gold-300);
}

.sc-ov__colhead {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-gray-300);
}

.sc-ov__coltitle {
  overflow: hidden;
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-ov__colnum {
  flex-shrink: 0;
  color: var(--color-tertiary);
  font-weight: 700;
  font-size: var(--text-md);
  font-family: var(--font-family-number);
}

.sc-ov__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sc-ov__item {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.sc-ov__head {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--text-sm);
}

.sc-ov__sub {
  padding-left: 26px;
  overflow: hidden;
  color: var(--color-tertiary);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-ov__sub.is-rival { color: var(--color-primary-dark-default); }

/* ===== モック専用の会社切替（プロダクトUIではない） ===== */
.mock-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-index-dropdown);
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  background-color: var(--color-gray-1300);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-md);
}

.mock-switch__label {
  padding: 0 8px;
  color: var(--color-quaternary);
  font-size: var(--text-xs);
}

.mock-switch button {
  padding: 4px 12px;
  color: var(--color-gray-400);
  font-weight: 500;
  font-size: var(--text-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  cursor: pointer;
}

.mock-switch button:hover {
  color: var(--color-inverse);
  background-color: var(--color-white-20);
}

.mock-switch button.is-active {
  color: var(--color-default);
  font-weight: 700;
  background-color: var(--color-gold-100);
}

/* 入口ページで「採用した案」に付ける印（モック専用） */
.idx__tag {
  padding: 2px 8px;
  color: var(--color-default);
  font-weight: 700;
  font-size: var(--text-xs);
  background-color: var(--color-gold-100);
  border: 1px solid var(--color-gold-300);
  border-radius: var(--radius-default);
}

/* ===== 図の大きさを変える部品 =====
   ★**要注意度の行の少し右**に置く（関さん指示 2026-09-17）。
     はじめ図の右上に浮かせたが、浮かせるのはやめて行に並べる形にした。
     部品は materia の IconButton（`zoom_proto.html` の案A）。 */
.sc-zoom {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ===== ⑧ 総合評価（操作パネルと図の間）===== */
.sc-scorerow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

/* materia IconButton（outline / neutral / sm）の写し。
   写し元: xeno-materia origin/v2-major src/components/ui/IconButton.vue
     outline+neutral: border-gray-600 / hover:bg-gray-400
     size sm: p-1 ／ アイコン 14px（text-icon-xs）／ 色 text-secondary */
.mt-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-gray-600);
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: all 0.15s;
}

.mt-iconbtn:hover { background-color: var(--color-gray-400); }

.mt-iconbtn--sm { padding: 4px; }

.mt-iconbtn .material-icons {
  color: var(--color-secondary);
  font-size: var(--text-icon-xs);
  line-height: 1;
}

/* ===== 拡縮の行（図のときだけ・面にしない）=====
   ★**パネル（薄グレーの面）にしない。背景にそのまま置く**（関さん指示 2026-09-17）。
     ここは図の見せ方だけなので、面で囲わない。表示の切り替えは操作パネルの一番下（2026-09-27）。 */
.sc-viewrow {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 24px;      /* パネルと左端をそろえる */
}

/* ① 片側だけ出しているときは、総合評価も1枚だけ（2列の枠に1枚だと間が抜ける） */
.sc-scorerow.is-single {
  grid-template-columns: 1fr;
}

/* 一覧表（「表示：一覧表」）。図と同じ場所に出す。
   ⚠️ 高さは決めない。**縦に長くてよい**（上限は500件・1ページ100件）。

   ★★★ 体裁は**本番の企業検索（企業一覧）をそのまま**使う。
      関さん指示 2026-09-19「既存のデザインを使ってください！フォント、ヘッダーの色、
      その他全部創作すな。企業検索の部品をそのまま使うこと」。
      正本は `prod/vue_board.css` の `.default-table[data-v-096a90e4]`
      （実物は `xeno_delivery/app/javascript/components/table/DefaultTable.vue`）。
      → 見出しは白抜き太字11px・中央・背景は gray-1000／本文12px／全セルに格子線。
      **ここで色・字の大きさ・行の高さを書かない。** 以下は列ごとの寄せと幅だけ。

   ⚠️⚠️ 2026-09-19、**別の画面の表（`.company-list-table`＝国内上場企業決算一覧）**を
      「企業検索の部品」と取り違えた。CSS を読んだだけで実物の `.vue` を見なかったのが原因。
      **どの画面の部品かは `.vue` の実物で確かめる。** */
/* ★横に送るのは**表だけ**（関さん指示 2026-09-22「横スクロールしても
   ページングは移動しない。企業検索参照」）。件数・ページ送り・ダウンロードは
   この箱の**外**に置く。写し元は本番の `.xeno-companies-list-container`。 */
.sc-tablebox {
  overflow-x: auto;
}

/* 表のまわり（スクロールしない外枠） */
.sc-tablewrap {
  display: flex;
  flex-direction: column;
}

/* 帯の右側：ページ送り ＋ ダウンロード（本番と同じ並び） */
.sc-tabletools {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  align-items: center;
}

/* 本番の `AsyncDownloadButton.vue` が Tailwind で当てているぶんだけ補う。
   ⚠️ 見た目の値（黒地・12px・角丸2px・押せないときの灰色）は
      `prod/vue_board.css` の `.download-btn[data-v-6bce1752]` が持っている。 */
.sc-tabletools .download-btn__content { display: inline-flex; align-items: center; }
.sc-tabletools .download-btn__content img { margin-right: 8px; }
.sc-tabletools .download-btn__icon { font-size: var(--text-icon-sm); }

/* 表の上下の帯（左に件数、右にページ送り）。本番も上下の両方に置いている。 */
.sc-tablehead {
  display: flex;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sc-tablefoot {
  display: flex;
  justify-content: flex-end;
  margin-top: -24px;       /* 本番の表は下に 40px 空くので、その中に置く */
}

/* 件数（全 N件）。本番の企業検索と同じく `flex items-center`。字はページのものを受け継ぐ */
.sc-tablecount {
  display: flex;
  align-items: center;
}

/* 本番の断り書きは `ml-4`（16px）。このモックの prod CSS には Tailwind の `ml-4` が無いので書く */
.sc-tablecount__limit {
  margin-left: 16px;
}

/* ★★列の幅・寄せ・字の大きさは**本番CSS**が当たる
     （`prod/vue_board.css` の `td[data-title=…][data-v-b23eaf3c]`）。
     企業名 238px/14px ／ xeno業種 238px ／ 直近通期売上高 135px・右寄せ ／
     レーティング 中央 ／ 営業利益予測成長率 右寄せ。**ここで書き直さない。**
   ⚠️ 当たるのは `data-title` が**本番と同じ文字列**のときだけ。
      見出しに出す文字（短い呼び名）とは別物。`c_map.html` の `TABLE_COLS` 参照。

   以下は**本番に無い列だけ**（取引先・重要度・Tier・要注意度・納入品目・取引内容）。 */
.sc-tablebox .default-table td[data-title='取引先'],
.sc-tablebox .default-table td[data-title='Tier'],
.sc-tablebox .default-table td[data-title='重要度'],
.sc-tablebox .default-table td[data-title='要注意度'] {
  text-align: center;
  white-space: nowrap;
}

/* ④ 要注意＝赤／良好＝青（関さん指示 2026-09-20）。
   ★クラス名は本番の表と同じ `is-negative` / `is-positive`。
     **色の値も本番と同一**（本番が使っている赤と青は、materia の
     `--color-red-500` / `--color-blue-500` そのもの。2026-09-20 実測で一致）。
   ⚠️⚠️ **本番CSSをそのまま当てる手は使わない。** 本番の規則は
      `[data-v-3c092c4a] .default-table .is-negative` で、当てるには表の外の箱に
      `data-v-3c092c4a` を付ける必要があり、**同じ属性が連れてくる
      `th{font-size:12px}` に見出しが負けて 11px → 12px に変わってしまう**
      （2026-09-20 実測。詳細度が同点で、後に書かれた方が勝つ）。
      → 色だけをトークンで当てる。見出しは本番の 11px のまま保たれる。 */
.sc-tablebox .default-table .is-negative {
  color: var(--color-negative-default);
}

.sc-tablebox .default-table .is-positive {
  color: var(--color-positive-default);
}

/* 納入品目・取引内容は本番の「特色」と同じ幅。
   3行で切るのは本番の `.clamp`（`-webkit-line-clamp: 3`）がやる。 */
.sc-tablebox .default-table td[data-title='納入品目'],
.sc-tablebox .default-table td[data-title='取引内容'] {
  min-width: 400px;
}

/* 社名のセル。国旗を頭に、親会社があれば上の段に出し、実際の取引先を下（括弧）に。
   旗が社名の上の行に落ちないよう横並びにする
   （⚠️ 本番CSSが svg を block にするため）。 */
.sc-tablebox .sc-namecell__main {
  display: flex;
  align-items: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* 国旗は絵（SVG）。⚠️ 絵文字にしない — Windows は国旗の絵文字を持っておらず
   「JP」という文字になる（2026-09-19 実機で確認）。 */
.sc-tablebox .sc-flag {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* 親子を2段で並べるときの行間（関さん指示 2026-09-20「もっと空けて」）。
   ⚠️ 本番の表はセルの余白が 6px しかないので、2段だと字が詰まって見える。 */
.sc-tablebox .default-table td[data-title='企業名'] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.sc-tablebox .sc-namecell__sub {
  margin-top: 6px;
  padding-left: 22px;      /* 旗のぶん下げて、上の段と頭をそろえる */
  color: var(--color-tertiary);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
}

/* ---- ① ページ送り（関さん指示 2026-09-20「企業検索と同じ件数でページング」）----
   ★本番の materia `Pagination.vue` を**値ごと写した**もの。
     元は Tailwind のクラス（`size-8` `gap-2` `border-gray-500` `rounded-default`
     `text-secondary` `bg-gray-400` `opacity-disabled` `text-md` `font-medium`）。
     このモックは Tailwind を読んでいないので、**同じトークンで書き直してある**。
   ⚠️ 見た目の値を勝手に変えない。変えるときは materia の実物に合わせる。 */
.mat-page {
  display: flex;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

.mat-page__nav,
.mat-page__num,
.mat-page__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
}

.mat-page__nav {
  padding: 8px;
  border-color: var(--color-gray-500);
}

.mat-page__num {
  padding: 8px 0;
  font-weight: 500;
  font-size: var(--text-md);
}

.mat-page__ellipsis {
  padding: 8px 0;
  cursor: default;
}

.mat-page__icon {
  font-size: var(--text-icon-sm);
  line-height: 1;
}

.mat-page__nav:hover,
.mat-page__num:hover {
  border-color: var(--color-primary-dark-default);
}

/* いま見ているページ。本番は `bg-gray-400`（枠は付けない） */
.mat-page__num.is-active,
.mat-page__num.is-active:hover {
  background: var(--color-gray-400);
  border-color: transparent;
}

.mat-page__nav.is-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- ⑨ 総合評価（本番「業績予測」の評価結果ボックスを写したもの）----
   ★関さん指示 2026-09-22「総合評価のデザインを変えます。既存の財務等の評価結果を
     踏襲します」。写し元＝本番 業績予測ページの「評価結果」
     （`.finance-summary-box` ＋ `.finance-summary`）。

   ⚠️⚠️ **見た目の値はここに書かない。** 枠線・余白・字の大きさ・色は
      `prod/vue_board.css` の `[data-v-802d13a8]` / `[data-v-2a43249b]` /
      `h3[data-v-090931c0]` が持っている（要素に同じ属性を付けて当てている）。
      ここに書くのは、**本番が Tailwind のユーティリティで当てていて
      手元の CSS に入っていないぶんだけ**（flex・余白 8px・アイコン 32px・縦線）。 */
.sc-eval { display: flex; align-items: stretch; }

/* 本番の `class="flex items-center"` と `text-[32px]` の代わり */
.sc-eval .finance-summary__header { display: flex; gap: 4px; align-items: center; }
.sc-eval .finance-summary__header .material-icons { font-size: 32px; }
/* 本番の `mb-2`（= 8px） */
.sc-eval .finance-summary-box__heading { margin-bottom: 8px; }
/* スコアの下の余白は本番 24px だが、カードの底なので詰める */
.sc-eval .finance-summary__value { margin-bottom: 0; }

/* 評価名（「やや懸念」など）にも色を付ける（関さん指示 2026-09-22「黒は安定のみ」）。
   ⚠️ 本番の `__heading` は黒固定なので、そこだけ一段強く指定して継承に戻す。
      **色の値はここに書かない**（親の行に付いた本番の色をそのまま継ぐ）。 */
.sc-eval .finance-summary__header.is-positive .finance-summary__heading,
.sc-eval .finance-summary__header.is-negative .finance-summary__heading {
  color: inherit;
}

/* 「安定」は**中間なので本番に色が無い**（本番は増収/減収の2値だけ）。
   何も指定しないと materia の body 色 rgba(0,0,0,.87) が出て、見出しの
   rgb(64,60,56) より黒くなるので、既定の文字色にそろえる。
   ⚠️ `is-positive` / `is-negative` が付いているときは**本番の色を邪魔しない**
      （`:not()` で外している。ここを単純な指定にすると赤や青が消える）。 */
.sc-eval .finance-summary__value:not(.is-positive):not(.is-negative),
.sc-eval .finance-summary__header .material-icons:not(.is-positive):not(.is-negative) {
  color: var(--color-default);
}

/* 絞り込み条件は**スコアの下にグレー**で置く（関さん指示 2026-09-22・4回目）。
   ⚠️ 本番の `__label` は `rgb(64,60,56)` なので、ここだけ薄くする。
      スコアの下に少し余白を空けて、数字と条件がくっつかないようにする。 */
.sc-eval .finance-summary__label.sc-eval__cond {
  margin-top: 8px;
  color: var(--color-tertiary);
}

/* ★左＝評価。**左寄せ**（関さん指示 2026-09-22）。
   本番の `__summary` は 38% 固定だが、右がグラフではなくチェック2つなので、
   ここは残りいっぱいに伸ばす（条件の1行が折り返さないように）。 */
.sc-eval__summary { flex: 1 1 auto; min-width: 0; padding: 0 16px; }

/* ★右＝図に出す会社の絞り込み。**そのカードの側だけに効く** */
.sc-eval__filter {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  /* ⚠️ 右端の余白は**箱の padding（16px）が持っている**ので付けない。
     ここを広く取ると左が足りなくなり、条件の行が折り返す
     （1280px で実際に折り返した。2026-09-22 実測）。 */
  padding: 0 0 0 8px;
}
.sc-eval__row { display: flex; gap: 6px; align-items: center; }
/* 社数。**要注意は赤・良好は青**（関さん指示 2026-09-22「18社は赤」）。
   ⚠️ 一覧表の色付けと同じトークンを使う。ここだけ別の赤にしない。 */
.sc-eval__count {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: right;
  font-weight: 700;
  /* ★社数は**ひと回り大きく**（関さん指示 2026-09-22）。
     ⚠️ 幅は em 指定なので、字を大きくすると列も広がる。
        条件の行が折り返さないよう min-width を少し詰めて相殺する。 */
  font-size: var(--text-md);
  font-family: var(--font-family-number);
}
.sc-eval__count.is-negative { color: var(--color-negative-default); }
.sc-eval__count.is-positive { color: var(--color-positive-default); }
/* 「要注意」「良好」の頭をそろえる（□の位置が縦にそろわないと読みにくい） */
.sc-eval__name {
  flex: 0 0 auto;
  width: 3.2em;
  color: var(--color-tertiary);
  font-weight: 500;
  font-size: var(--text-xs);
}
/* 0社の区分は押せない。押すとその側の図が空になるため */
.sc-eval__filter .mat-checkbox.is-empty { cursor: default; opacity: .45; }

/* 本番の `hr.divider--vertical` は手元の CSS に無いので、ここで縦線を作る。
   ⚠️⚠️ **線は `border-left` で描く。`background` では出ない**（本番の
      `.divider--vertical` は `width: 0; max-width: 0` なので、塗っても幅0のまま）。
   ⚠️ 色は本番の `.finance-summary-box__divider` と同じ薄さにそろえる。 */
.sc-eval .finance-summary-box__divider {
  align-self: stretch;
  width: 0;
  min-height: 0;
  height: auto;
  margin: 0 6px;
  border: 0;
  border-left: 1px solid var(--color-gray-200);
}