/* Professional Tech Lab design-system · general.css · tokens applied · no inline hex/font */
/* ===================================================================
 * Professional Tech Lab Design System — 汎用部品（general）
 *
 * 正本トークン: ./tokens.css（var() のみ参照。独自 :root 宣言なし）
 * 素HTML要素の基礎スタイル: ./base.css（本ファイルは .ds-* クラスのみ定義）
 * 規律: ./bengo4-corporate-evidence.md
 *   - 値はトークンのみ（インライン hex / 生 font-family / 独自 :root 禁止）
 *   - 要素分離は「余白＋背景色＋タイポ階層」。border は 0 起点、
 *     hairline が要る箇所だけ 1px solid var(--color-gray) を全周
 *   - side-stripe（border-left/top/right/bottom 2-6px solid）禁止
 *   - 影は原則なし（浮遊面のみ var(--shadow-sm/md)）
 *   - 角丸は標準 0、強調のみ var(--radius-soft)、ピルはバッジ/チップだけ
 *   - 赤は1画面1-2要素まで。緑/橙/info は社内UI状態専用（公開面では使わない）
 *   - 全インタラクティブ要素に :hover / :focus-visible / :disabled
 *   - 左揃え基調、数値カラムのみ右揃え
 *
 * 収録部品:
 *   1. ds-btn          ボタン（primary/secondary/tertiary/danger・sm/md/lg・loading）
 *   2. ds-btn-group    横連結ボタン群
 *   3. ds-icon-btn     正方アイコンボタン
 *   4. ds-link         部品としてのリンク（単独/外部/muted）
 *   5. ds-tag          タグ（ピル・状態色・removable）
 *   6. ds-chip         チップ（選択可・removable）
 *   7. ds-badge        ステータスバッジ（ready/pending/alert/neutral・count）
 *   8. ds-avatar       アバター（円/角丸・sm/md/lg・イニシャル/画像・group）
 *   9. ds-divider      区切り（横/縦の hairline）
 * =================================================================== */

/* ===================================================================
 * 1. ds-btn — ボタン
 * 用途: 主操作/副操作/弱操作/破壊的操作。
 * 主要クラス: .ds-btn + --primary/--secondary/--tertiary/--danger + --sm/--md/--lg
 * 正しい使い方:
 *   --primary   = 墨黒背景・白文字（hover で反転）
 *   --secondary = 透明背景・1px solid 墨黒（hover で塗り）
 *   --tertiary  = 文字のみ（hover で下線・薄背景）
 *   --danger    = 注意操作。赤は1画面1-2要素まで
 * 状態: :hover / :focus-visible / :disabled / .is-loading（スピナー内包）
 * =================================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  position: relative;
  font-family: var(--font-noto);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sharp);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
  transition:
    background-color var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out),
    opacity var(--duration-base) var(--ease-in-out);
}
.ds-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-btn:disabled,
.ds-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- variants --- */
.ds-btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.ds-btn--primary:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}
/* base.css の a:visited / a:active（詳細度 0,1,1）が .ds-btn--primary（詳細度 0,1,0）に勝ち、
   訪問済み・押下中に黒地へ黒文字寄りの色を引き戻して不可視になる実バグを、同詳細度2で是正する
   （Amazon送客ボタン=収益動線）。 */
.ds-btn--primary,
.ds-btn--primary:visited,
.ds-btn--primary:active {
  color: var(--color-white);
}

.ds-btn--secondary {
  background-color: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.ds-btn--secondary:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.ds-btn--tertiary {
  background-color: transparent;
  color: var(--color-black);
  border-color: transparent;
  padding-left: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 2);
}
.ds-btn--tertiary:hover {
  background-color: var(--color-gray-100);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ds-btn--danger {
  background-color: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}
.ds-btn--danger:hover {
  background-color: var(--color-white);
  color: var(--color-error);
}

/* --- sizes --- */
.ds-btn--sm {
  font-size: var(--text-small);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
}
.ds-btn--md {
  font-size: var(--text-body);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
}
.ds-btn--lg {
  font-size: var(--text-h5);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
}

/* --- loading（スピナー内包） --- */
.ds-btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.ds-btn.is-loading .ds-btn__label {
  visibility: hidden;
}
.ds-btn__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  opacity: 0.85;
  animation: ds-btn-spin var(--duration-slow) linear infinite;
}
/* スピナー色は variant の文字色を currentColor で受け取る */
.ds-btn--primary.is-loading .ds-btn__spinner { color: var(--color-black); }
.ds-btn--danger.is-loading .ds-btn__spinner  { color: var(--color-error); }
@keyframes ds-btn-spin {
  to { transform: rotate(360deg); }
}

/* ===================================================================
 * 2. ds-btn-group — 横連結ボタン群
 * 用途: 関連操作を1まとまりに連結（ツールバー・セグメント操作）。
 * 主要クラス: .ds-btn-group（中の .ds-btn を隣接させ重複罫線を畳む）
 * 正しい使い方: 隣り合う境界を1本に。選択状態は子に .is-active を付与。
 * =================================================================== */
.ds-btn-group {
  display: inline-flex;
  align-items: stretch;
}
.ds-btn-group .ds-btn {
  border-radius: var(--radius-sharp);
}
.ds-btn-group .ds-btn + .ds-btn {
  margin-left: -1px;
}
.ds-btn-group .ds-btn:hover,
.ds-btn-group .ds-btn:focus-visible,
.ds-btn-group .ds-btn.is-active {
  z-index: 1;
}
.ds-btn-group .ds-btn.is-active {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ===================================================================
 * 3. ds-icon-btn — 正方アイコンボタン
 * 用途: アイコン1個の単機能操作（閉じる・メニュー・更新など）。
 * 主要クラス: .ds-icon-btn + --sm/--md/--lg、ラベルは .sr-only で必須
 * 状態: :hover / :focus-visible / :disabled
 * =================================================================== */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  padding: 0;
  font-family: var(--font-noto);
  font-size: var(--text-h5);
  line-height: 1;
  color: var(--color-subtle-strong);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-soft);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out);
}
.ds-icon-btn:hover {
  background-color: var(--color-gray-100);
  color: var(--color-black);
}
.ds-icon-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-icon-btn:disabled,
.ds-icon-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ds-icon-btn--sm { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); font-size: var(--text-small); }
.ds-icon-btn--md { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); font-size: var(--text-h5); }
.ds-icon-btn--lg { width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); font-size: var(--text-h4); }

/* ===================================================================
 * 4. ds-link — 部品としてのリンク
 * 用途: 本文内・カード内の遷移リンク。
 * 主要クラス: .ds-link + --external（矢印付き）/ --muted（補助色）
 * 正しい使い方: 既定は墨黒＋下線。hover で赤に。a11y のため下線を保つ。
 * 状態: :hover / :focus-visible / :visited は色を変えない（純度維持）
 * =================================================================== */
.ds-link {
  font-family: var(--font-noto);
  font-size: inherit;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-in-out);
}
.ds-link:hover {
  color: var(--color-red);
}
.ds-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-link--muted {
  color: var(--color-subtle);
}
.ds-link--muted:hover {
  color: var(--color-black);
}
.ds-link--external::after {
  content: "\2197"; /* ↗ 外部遷移サイン（テキスト記号・画像なし） */
  display: inline-block;
  margin-left: calc(var(--spacing) * 0.5);
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: baseline;
}

/* ===================================================================
 * 5. ds-tag — タグ（ピル形）
 * 用途: 属性・カテゴリの分類ラベル（非操作の表示主体）。
 * 主要クラス: .ds-tag + 状態色 --info/--success/--warning/--error / --removable
 * 正しい使い方: ピルは tag/chip のみ許容。状態色は社内UI専用（緑/橙/info）。
 *   --removable は末尾に × ボタン（.ds-tag__remove）を内包。
 * =================================================================== */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-subtle-strong);
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-pill);
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 2.5);
  white-space: nowrap;
}
/* 状態色バリアント（社内UI専用・公開面では使わない） */
.ds-tag--info    { color: var(--color-info);    background-color: var(--color-info-bg);    border-color: var(--color-info-bg); }
.ds-tag--success { color: var(--color-success); background-color: var(--color-success-bg); border-color: var(--color-success-bg); }
.ds-tag--warning { color: var(--color-warning); background-color: var(--color-warning-bg); border-color: var(--color-warning-bg); }
.ds-tag--error   { color: var(--color-error);   background-color: var(--color-error-bg);   border-color: var(--color-error-bg); }
/* removable の × ボタン */
.ds-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  margin-right: calc(var(--spacing) * -1);
  font-size: var(--text-small);
  line-height: 1;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
}
.ds-tag__remove:hover { opacity: 1; background-color: var(--color-gray); }
.ds-tag__remove:focus-visible { outline: var(--focus-ring); outline-offset: 1px; opacity: 1; }
.ds-tag__remove:disabled,
.ds-tag__remove.is-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ===================================================================
 * 6. ds-chip — チップ（選択可能・操作主体のピル）
 * 用途: フィルタ選択・入力トークン。クリックで選択トグル。
 * 主要クラス: .ds-chip + .is-active（選択中）/ --removable
 * 状態: :hover / :focus-visible / .is-active / :disabled
 * =================================================================== */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-pill);
  padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out);
}
.ds-chip:hover {
  border-color: var(--color-black);
}
.ds-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-chip.is-active {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.ds-chip:disabled,
.ds-chip.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ds-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  margin-right: calc(var(--spacing) * -1.5);
  font-size: var(--text-small);
  line-height: 1;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}
.ds-chip__remove:hover { opacity: 1; }
.ds-chip__remove:focus-visible { outline: var(--focus-ring); outline-offset: 1px; opacity: 1; }

/* ===================================================================
 * 7. ds-badge — ステータスバッジ
 * 用途: 状態の小ラベル（準備完了/保留/警告/中立）と数値バッジ。
 * 主要クラス: .ds-badge + --ready/--pending/--alert/--neutral / --count
 * 正しい使い方: 枠線なしの淡背景＋文字色。--alert のみ赤系（赤総量に数える）。
 *   --count は通知件数の丸/角丸バッジ（数値は .num/.en で）。
 * =================================================================== */
.ds-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 2);
  border-radius: var(--radius-soft);
  white-space: nowrap;
}
.ds-badge--ready {
  background-color: var(--color-black);
  color: var(--color-white);
}
.ds-badge--pending {
  background-color: var(--color-gray-100);
  color: var(--color-subtle-strong);
}
.ds-badge--alert {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.ds-badge--neutral {
  background-color: var(--color-gray-100);
  color: var(--color-subtle);
}
/* 数値バッジ（件数） */
.ds-badge--count {
  justify-content: center;
  min-width: calc(var(--spacing) * 4.5);
  height: calc(var(--spacing) * 4.5);
  padding: 0 calc(var(--spacing) * 1.25);
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  background-color: var(--color-error);
  color: var(--color-white);
  border-radius: var(--radius-pill);
}

/* ===================================================================
 * 8. ds-avatar — アバター
 * 用途: ユーザー/組織の表象。イニシャル or 画像。
 * 主要クラス: .ds-avatar + --sm/--md/--lg / --square（角丸）、.ds-avatar-group（重なり）
 * 正しい使い方: 既定は円形・墨黒地白文字のイニシャル。画像は .ds-avatar__img。
 *   group は負マージンで重ね、白枠で境界を作る。
 * =================================================================== */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  overflow: hidden;
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: var(--radius-pill);
  user-select: none;
}
.ds-avatar--square { border-radius: var(--radius-soft); }
.ds-avatar--sm { width: calc(var(--spacing) * 6);  height: calc(var(--spacing) * 6);  font-size: var(--text-small); }
.ds-avatar--md { width: calc(var(--spacing) * 9);  height: calc(var(--spacing) * 9);  font-size: var(--text-body); }
.ds-avatar--lg { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); font-size: var(--text-h4); }
.ds-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* group（重なり） */
.ds-avatar-group {
  display: inline-flex;
  align-items: center;
}
.ds-avatar-group .ds-avatar {
  border: 2px solid var(--color-white);
}
.ds-avatar-group .ds-avatar + .ds-avatar {
  margin-left: calc(var(--spacing) * -2);
}
.ds-avatar-group__more {
  color: var(--color-subtle-strong);
  background-color: var(--color-gray-200);
}

/* ===================================================================
 * 9. ds-divider — 区切り（hairline）
 * 用途: セクション/項目間の区切り。
 * 主要クラス: .ds-divider（横）/ .ds-divider--vertical（縦）
 * 正しい使い方: hairline 1本のみ。side-stripe にしない（太罫禁止）。
 * =================================================================== */
.ds-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: var(--gap-section) 0;
  background-color: var(--color-gray);
  border: 0;
}
.ds-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 var(--gap-card);
  vertical-align: middle;
}