/* CSS変数で一元管理するバッジスタイル */
:root {
  /* 通常バッジの基本サイズ設定 */
  --badge-font-size: 13px;
  --badge-padding-x: 7px;
  --badge-padding-y: 2px;
  --badge-margin: 1px;
  --badge-inline-gap: 0.4em;
  --badge-border-radius: 10px;
  --badge-line-height: 1.4;
  --badge-border-width: 1px;
  
  /* サイズバリエーション用の設定 */
  --badge-sm-font-size: 11px;
  --badge-sm-padding-x: 5px;
  --badge-sm-padding-y: 0px;
  --badge-sm-margin: 1px;
  
  --badge-lg-font-size: 16px;
  --badge-lg-padding-x: 8px;
  --badge-lg-padding-y: 1px;
  
  --badge-xl-font-size: 18px;
  --badge-xl-padding-x: 10px;
  --badge-xl-padding-y: 2px;
  
  /* テーブル内のバッジ設定 */
  --badge-table-margin: 3px 2px;
  --badge-table-consecutive-margin-left: 4px;
  
  /* 通常バッジのカラーパレット */
  --pink-bg: #ffe7ef;
  --pink-text: #d61a5e;
  --pink-border: #ffb8cf;
  
  --orange-bg: #fff2e5;
  --orange-text: #e55e00;
  --orange-border: #ffc8a1;
  
  --blue-bg: #e7f4ff;
  --blue-text: #0077cc;
  --blue-border: #b8dfff;
  
  --green-bg: #d9f5e3;
  --green-text: #008c42;
  --green-border: #9fedbe;
  
  --purple-bg: #f2e7ff;
  --purple-text: #7b00d6;
  --purple-border: #d9b8ff;
  
  --red-bg: #fee2e2;
  --red-text: #dc2626;
  --red-border: #fca5a5;
  
  --yellow-bg: #fefce8;
  --yellow-text: #ca8a04;
  --yellow-border: #facc15;
  
  --cyan-bg: #e0f7fa;
  --cyan-text: #00838f;
  --cyan-border: #80deea;
  
  --indigo-bg: #e8eaf6;
  --indigo-text: #3949ab;
  --indigo-border: #9fa8da;
  
  --brown-bg: #efebe9;
  --brown-text: #5d4037;
  --brown-border: #bcaaa4;
  
  --gray-bg: #f5f5f5;
  --gray-text: #424242;
  --gray-border: #e0e0e0;
  
  /* Zephyra チップ専用カラーパレット */
  --zephyra-red-bg: #fee2e2;
  --zephyra-red-text: #7f1d1d;
  --zephyra-red-border: #fca5a5;
  --zephyra-red-shadow: rgba(254, 226, 226, 0.3);
  
  --zephyra-green-bg: #d1fae5;
  --zephyra-green-text: #14532d;
  --zephyra-green-border: #6ee7b7;
  --zephyra-green-shadow: rgba(209, 250, 229, 0.3);
  
  --zephyra-yellow-bg: #fef3c7;
  --zephyra-yellow-text: #78350f;
  --zephyra-yellow-border: #fde047;
  --zephyra-yellow-shadow: rgba(254, 243, 199, 0.3);
  
  --zephyra-purple-bg: #ede9fe;
  --zephyra-purple-text: #4c1d95;
  --zephyra-purple-border: #c4b5fd;
  --zephyra-purple-shadow: rgba(237, 233, 254, 0.3);
  
  --zephyra-orange-bg: #fed7aa;
  --zephyra-orange-text: #9a3412;
  --zephyra-orange-border: #fdba74;
  --zephyra-orange-shadow: rgba(254, 215, 170, 0.3);
  
  --zephyra-gray-bg: #f3f4f6;
  --zephyra-gray-text: #1f2937;
  --zephyra-gray-border: #d1d5db;
  --zephyra-gray-shadow: rgba(243, 244, 246, 0.3);
  
  --zephyra-blue-bg: #dbeafe;
  --zephyra-blue-text: #1e3a8a;
  --zephyra-blue-border: #93c5fd;
  --zephyra-blue-shadow: rgba(219, 234, 254, 0.3);
  
  --zephyra-nullex-bg: #e5e7eb;
  --zephyra-nullex-text: #2a2b2d;
  --zephyra-nullex-border: #e5e7eb;
  --zephyra-nullex-shadow: none;

  /* ダークバッジの基本サイズ設定 */
  --dark-font-size: 11px;
  --dark-padding-x: 7px;
  --dark-padding-y: 2px;
  --dark-margin: 1px;
  --dark-border-radius: 4px;
  --dark-line-height: 1.4;
  --dark-border-width: 1px;
  
  /* ダークバッジのサイズバリエーション用の設定 */
  --dark-sm-font-size: 12px;
  --dark-sm-padding-x: 5px;
  --dark-sm-padding-y: 0px;
  
  --dark-lg-font-size: 16px;
  --dark-lg-padding-x: 8px;
  --dark-lg-padding-y: 1px;
  
  --dark-xl-font-size: 18px;
  --dark-xl-padding-x: 10px;
  --dark-xl-padding-y: 2px;
  
  /* ダークバッジのテーブル内設定 */
  --dark-table-margin: 3px 2px;
  --dark-table-consecutive-margin-left: 4px;
  
  /* ダークバッジのカラーパレット - 白背景用占いサイト向け神秘的トーン */
  --dark-pink-bg: #a5627d;
  --dark-pink-text: #ffffff;
  --dark-pink-border: #b87490;
  
  --dark-orange-bg: #b8865e;
  --dark-orange-text: #ffffff;
  --dark-orange-border: #c99671;
  
  --dark-blue-bg: #5e7da5;
  --dark-blue-text: #ffffff;
  --dark-blue-border: #718eb8;
  
  --dark-green-bg: #6b8f72;
  --dark-green-text: #ffffff;
  --dark-green-border: #7ea085;
  
  --dark-purple-bg: #7d5ea5;
  --dark-purple-text: #ffffff;
  --dark-purple-border: #9071b8;
  
  --dark-red-bg: #a55e5e;
  --dark-red-text: #ffffff;
  --dark-red-border: #b87171;
  
  --dark-yellow-bg: #a5965e;
  --dark-yellow-text: #ffffff;
  --dark-yellow-border: #b8a771;
  
  --dark-cyan-bg: #5ea595;
  --dark-cyan-text: #ffffff;
  --dark-cyan-border: #71b8a8;
  
  --dark-indigo-bg: #6e5ea5;
  --dark-indigo-text: #ffffff;
  --dark-indigo-border: #8171b8;
  
  --dark-brown-bg: #8f7e5e;
  --dark-brown-text: #ffffff;
  --dark-brown-border: #a28f71;
  
  --dark-gray-bg: #7a7a7a;
  --dark-gray-text: #ffffff;
  --dark-gray-border: #8d8d8d;

  /* Pleiades専用のカラー設定 */
  --pleiades-gradient-start: #40cef0;
  --pleiades-gradient-end: #4ee8eb;
  --pleiades-text: #ffffff;
  --pleiades-shadow: 0 0px 8px rgba(64, 206, 240, 0.3), 0 2px 6px rgba(78, 232, 235, 0.2);
  
  /* Pleiades基本設定 */
  --pleiades-font-size: 13px;
  --pleiades-padding-x: 7px;
  --pleiades-padding-y: 2px;
  --pleiades-margin: 1px;
  --pleiades-border-radius: 10px;
  --pleiades-line-height: 1.4;
  
  /* Pleiadesサイズバリエーション */
  --pleiades-sm-font-size: 11px;
  --pleiades-sm-padding-x: 5px;
  --pleiades-sm-padding-y: 0px;
  --pleiades-sm-margin: 1px;
  
  --pleiades-lg-font-size: 16px;
  --pleiades-lg-padding-x: 8px;
  --pleiades-lg-padding-y: 1px;
  
  --pleiades-xl-font-size: 18px;
  --pleiades-xl-padding-x: 10px;
  --pleiades-xl-padding-y: 2px;
  
  /* Pleiades Ruby - 情熱的な赤 */
  --pleiades-ruby-gradient-start: #ff4757;
  --pleiades-ruby-gradient-end: #ff6b7a;
  --pleiades-ruby-text: #ffffff;
  --pleiades-ruby-shadow: 0 0px 8px rgba(255, 71, 87, 0.3), 0 2px 6px rgba(255, 107, 122, 0.2);
  
  /* Pleiades Emerald - 高貴な緑 */
  --pleiades-emerald-gradient-start: #2ed573;
  --pleiades-emerald-gradient-end: #7bed9f;
  --pleiades-emerald-text: #ffffff;
  --pleiades-emerald-shadow: 0 0px 8px rgba(46, 213, 115, 0.3), 0 2px 6px rgba(123, 237, 159, 0.2);
  
  /* Pleiades Amethyst - 神秘的な紫 */
  --pleiades-amethyst-gradient-start: #a55eea;
  --pleiades-amethyst-gradient-end: #c44569;
  --pleiades-amethyst-text: #ffffff;
  --pleiades-amethyst-shadow: 0 0px 8px rgba(165, 94, 234, 0.3), 0 2px 6px rgba(196, 69, 105, 0.2);
  
  /* Pleiades Topaz - 輝く金 */
  --pleiades-topaz-gradient-start: #ffa726;
  --pleiades-topaz-gradient-end: #ffcc02;
  --pleiades-topaz-text: #2c2c2c;
  --pleiades-topaz-shadow: 0 0px 8px rgba(255, 167, 38, 0.3), 0 2px 6px rgba(255, 204, 2, 0.2);
  
  /* Pleiades Sapphire - 深い青 */
  --pleiades-sapphire-gradient-start: #3742fa;
  --pleiades-sapphire-gradient-end: #5352ed;
  --pleiades-sapphire-text: #ffffff;
  --pleiades-sapphire-shadow: 0 0px 8px rgba(55, 66, 250, 0.3), 0 2px 6px rgba(83, 82, 237, 0.2);
  
  /* Pleiades Obsidian - エレガントな黒 */
  --pleiades-obsidian-gradient-start: #2c2c54;
  --pleiades-obsidian-gradient-end: #57606f;
  --pleiades-obsidian-text: #ffffff;
  --pleiades-obsidian-shadow: 0 0px 8px rgba(44, 44, 84, 0.4), 0 2px 6px rgba(87, 96, 111, 0.3);
  
  /* Pleiades Rose - 優美なピンク */
  --pleiades-rose-gradient-start: #ff3838;
  --pleiades-rose-gradient-end: #ff6b81;
  --pleiades-rose-text: #ffffff;
  --pleiades-rose-shadow: 0 0px 8px rgba(255, 56, 56, 0.3), 0 2px 6px rgba(255, 107, 129, 0.2);
  
  /* Pleiades Jade - 清涼なティール */
  --pleiades-jade-gradient-start: #00d2d3;
  --pleiades-jade-gradient-end: #01a3a4;
  --pleiades-jade-text: #ffffff;
  --pleiades-jade-shadow: 0 0px 8px rgba(0, 210, 211, 0.3), 0 2px 6px rgba(1, 163, 164, 0.2);

  /* Balloon（吹き出し）基本設定 */
  --balloon-font-size: 10px;
  --balloon-padding-x: 9px;
  --balloon-padding-y: 5px;
  --balloon-margin: 2px 4px 2px 4px;
  --balloon-border-radius: 15px;
  --balloon-line-height: 1.4;
  --balloon-border-width: 1px;
  
  /* Balloonサイズバリエーション */
  --balloon-sm-font-size: 8px;
  --balloon-sm-padding-x: 6px;
  --balloon-sm-padding-y: 3px;
  --balloon-sm-margin: 1px 3px 1px 3px;
  
  --balloon-lg-font-size: 12px;
  --balloon-lg-padding-x: 12px;
  --balloon-lg-padding-y: 7px;
  
  --balloon-xl-font-size: 14px;
  --balloon-xl-padding-x: 15px;
  --balloon-xl-padding-y: 9px;
  
  /* Balloonカラーパレット */
  --balloon-default-bg: #ffffff;
  --balloon-default-text: #374151;
  --balloon-default-border: #d1d5db;
  --balloon-default-shadow: rgba(0, 0, 0, 0.1);
  
  --balloon-success-bg: #ecfdf5;
  --balloon-success-text: #047857;
  --balloon-success-border: #10b981;
  
  --balloon-warning-bg: #fffbeb;
  --balloon-warning-text: #92400e;
  --balloon-warning-border: #f59e0b;
  
  --balloon-danger-bg: #fef2f2;
  --balloon-danger-text: #dc2626;
  --balloon-danger-border: #ef4444;
  
  --balloon-info-bg: #eff6ff;
  --balloon-info-text: #1d4ed8;
  --balloon-info-border: #3b82f6;
  
  /* Slash（スラッシュ）基本設定 */
  --slash-font-size: 10px;
  --slash-padding-x: 0px;
  --slash-padding-y: 0px;
  --slash-margin: 5px 4px -5px 4px;
  --slash-line-height: 1.4;
  --slash-text-color: #dc2626;
  --slash-text-shadow: 1px 1px 2px rgba(220, 38, 38, 0.3);

  /* Slashサイズバリエーション */
  --slash-sm-font-size: 8px;
  --slash-sm-margin: 3px 3px -3px 3px;

  --slash-lg-font-size: 12px;
  --slash-lg-margin: 7px 5px -7px 5px;

  --slash-xl-font-size: 14px;
  --slash-xl-margin: 9px 6px -9px 6px;

  /* Label（ラベル）基本設定 */
  --label-font-size: 13px;
  --label-padding-x: 14px;
  --label-padding-y: 6px;
  --label-margin: 2px;
  --label-inline-gap: 0.4em;
  --label-border-radius: 4px;
  --label-line-height: 1.4;
  --label-border-width: 2px;

  /* Labelサイズバリエーション */
  --label-sm-font-size: 11px;
  --label-sm-padding-x: 10px;
  --label-sm-padding-y: 4px;

  --label-lg-font-size: 15px;
  --label-lg-padding-x: 18px;
  --label-lg-padding-y: 8px;

  --label-xl-font-size: 17px;
  --label-xl-padding-x: 22px;
  --label-xl-padding-y: 10px;

  /* Labelカラーパレット */
  --label-new-bg: #ff4757;
  --label-new-text: #ffffff;
  --label-new-border: #ff4757;

  --label-hot-bg: #ffa502;
  --label-hot-text: #ffffff;
  --label-hot-border: #ffa502;

  --label-sale-bg: #2ed573;
  --label-sale-text: #ffffff;
  --label-sale-border: #2ed573;

  --label-recommend-bg: #1e90ff;
  --label-recommend-text: #ffffff;
  --label-recommend-border: #1e90ff;

  --label-limited-bg: #a55eea;
  --label-limited-text: #ffffff;
  --label-limited-border: #a55eea;

  --label-popular-bg: #ff6348;
  --label-popular-text: #ffffff;
  --label-popular-border: #ff6348;

  --label-premium-bg: #ffd700;
  --label-premium-text: #333333;
  --label-premium-border: #ffd700;

  --label-exclusive-bg: #2c3e50;
  --label-exclusive-text: #ffffff;
  --label-exclusive-border: #2c3e50;
}

/* 通常バッジの共通スタイル */
.badge {
  display: inline-block;
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  margin: var(--badge-margin);
  font-weight: bold;
  font-size: var(--badge-font-size);
  line-height: var(--badge-line-height);
  white-space: nowrap;
  vertical-align: middle;
  border-width: var(--badge-border-width);
  border-style: solid;
}

/* 連続配置時でもバッジ・ラベル同士が結合しないように余白を付与 */
.badge + .badge,
.badge + .label {
  margin-left: var(--badge-inline-gap) !important;
}

.label + .label,
.label + .badge {
  margin-left: var(--label-inline-gap) !important;
}

/* 通常バッジのサイズバリエーション */
.badge-sm {
  font-size: var(--badge-sm-font-size);
  padding: var(--badge-sm-padding-y) var(--badge-sm-padding-x);
  margin: var(--badge-sm-margin) !important;
}

.badge-lg {
  font-size: var(--badge-lg-font-size);
  padding: var(--badge-lg-padding-y) var(--badge-lg-padding-x);
}

.badge-xl {
  font-size: var(--badge-xl-font-size);
  padding: var(--badge-xl-padding-y) var(--badge-xl-padding-x);
}

/* 通常バッジの色バリエーション */
.badge-pink {
  background-color: var(--pink-bg);
  color: var(--pink-text);
  border-color: var(--pink-border);
}

.badge-orange {
  background-color: var(--orange-bg);
  color: var(--orange-text);
  border-color: var(--orange-border);
}

.badge-blue {
  background-color: var(--blue-bg);
  color: var(--blue-text);
  border-color: var(--blue-border);
}

.badge-green {
  background-color: var(--green-bg);
  color: var(--green-text);
  border-color: var(--green-border);
}

.badge-purple {
  background-color: var(--purple-bg);
  color: var(--purple-text);
  border-color: var(--purple-border);
}

.badge-red {
  background-color: var(--red-bg);
  color: var(--red-text);
  border-color: var(--red-border);
}

.badge-yellow {
  background-color: var(--yellow-bg);
  color: var(--yellow-text);
  border-color: var(--yellow-border);
}

.badge-cyan {
  background-color: var(--cyan-bg);
  color: var(--cyan-text);
  border-color: var(--cyan-border);
}

.badge-indigo {
  background-color: var(--indigo-bg);
  color: var(--indigo-text);
  border-color: var(--indigo-border);
}

.badge-brown {
  background-color: var(--brown-bg);
  color: var(--brown-text);
  border-color: var(--brown-border);
}

.badge-gray {
  background-color: var(--gray-bg);
  color: var(--gray-text);
  border-color: var(--gray-border);
}

.badge-null {
  background-color: var(--zephyra-nullex-bg);
  color: var(--zephyra-nullex-text);
  border: none;
  opacity: 0.8;
}

/* ホワイトバッジの共通スタイル */
.white {
  display: inline-block;
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  margin: var(--badge-margin);
  font-weight: bold;
  font-size: var(--badge-font-size);
  line-height: var(--badge-line-height);
  white-space: nowrap;
  vertical-align: middle;
  border-width: var(--badge-border-width);
  border-style: solid;
  background-color: #ffffff;
}

/* ホワイトバッジのサイズバリエーション */
.white-sm {
  font-size: var(--badge-sm-font-size);
  padding: var(--badge-sm-padding-y) var(--badge-sm-padding-x);
  margin: var(--badge-sm-margin) !important;
}

.white-lg {
  font-size: var(--badge-lg-font-size);
  padding: var(--badge-lg-padding-y) var(--badge-lg-padding-x);
}

.white-xl {
  font-size: var(--badge-xl-font-size);
  padding: var(--badge-xl-padding-y) var(--badge-xl-padding-x);
}

/* ホワイトバッジの色バリエーション */
.white-pink {
  color: var(--pink-text);
  border-color: var(--pink-border);
}

.white-orange {
  color: var(--orange-text);
  border-color: var(--orange-border);
}

.white-blue {
  color: var(--blue-text);
  border-color: var(--blue-border);
}

.white-green {
  color: var(--green-text);
  border-color: var(--green-border);
}

.white-purple {
  color: var(--purple-text);
  border-color: var(--purple-border);
}

.white-red {
  color: var(--red-text);
  border-color: var(--red-border);
}

.white-yellow {
  color: var(--yellow-text);
  border-color: var(--yellow-border);
}

.white-cyan {
  color: var(--cyan-text);
  border-color: var(--cyan-border);
}

.white-indigo {
  color: var(--indigo-text);
  border-color: var(--indigo-border);
}

.white-brown {
  color: var(--brown-text);
  border-color: var(--brown-border);
}

.white-gray {
  color: var(--gray-text);
  border-color: var(--gray-border);
}

.white-null {
  color: var(--gray-text);
  border: none;
  opacity: 0.8;
}

/* Zephyra チップベーススタイル */
.zephyra-chip {
  display: inline-block;
  padding: 3px 5px;
  height: 22px;
  line-height: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: var(--badge-border-radius);
  border: 1px solid;
  margin: 2px 2px;
  vertical-align: middle;
  cursor: default;
}

/* Zephyra チップサイズバリエーション */
.zephyra-sm {
  padding: 2px 4px;
  height: 18px;
  line-height: 14px;
  font-size: 10px;
}

.zephyra-lg {
  padding: 4px 6px;
  height: 26px;
  line-height: 18px;
  font-size: 14px;
}

.zephyra-xl {
  padding: 5px 8px;
  height: 30px;
  line-height: 20px;
  font-size: 16px;
}

/* Zephyra チップ色バリエーション */
.zephyra-red {
  background-color: var(--zephyra-red-bg);
  color: var(--zephyra-red-text);
  border-color: var(--zephyra-red-border);
  box-shadow: 0 1px 3px var(--zephyra-red-shadow);
}

.zephyra-green {
  background-color: var(--zephyra-green-bg);
  color: var(--zephyra-green-text);
  border-color: var(--zephyra-green-border);
  box-shadow: 0 1px 3px var(--zephyra-green-shadow);
}

.zephyra-yellow {
  background-color: var(--zephyra-yellow-bg);
  color: var(--zephyra-yellow-text);
  border-color: var(--zephyra-yellow-border);
  box-shadow: 0 1px 3px var(--zephyra-yellow-shadow);
}

.zephyra-purple {
  background-color: var(--zephyra-purple-bg);
  color: var(--zephyra-purple-text);
  border-color: var(--zephyra-purple-border);
  box-shadow: 0 1px 3px var(--zephyra-purple-shadow);
}

.zephyra-orange {
  background-color: var(--zephyra-orange-bg);
  color: var(--zephyra-orange-text);
  border-color: var(--zephyra-orange-border);
  box-shadow: 0 1px 3px var(--zephyra-orange-shadow);
}

.zephyra-gray {
  background-color: var(--zephyra-gray-bg);
  color: var(--zephyra-gray-text);
  border-color: var(--zephyra-gray-border);
  box-shadow: 0 1px 3px var(--zephyra-gray-shadow);
}

.zephyra-blue {
  background-color: var(--zephyra-blue-bg);
  color: var(--zephyra-blue-text);
  border-color: var(--zephyra-blue-border);
  box-shadow: 0 1px 3px var(--zephyra-blue-shadow);
}

.zephyra-nullex {
  background-color: var(--zephyra-nullex-bg);
  color: var(--zephyra-nullex-text);
  border-color: var(--zephyra-nullex-border);
  box-shadow: var(--zephyra-nullex-shadow);
  opacity: 0.8;
  border: none;
}

/* ダークバッジの共通スタイル */
.dark {
  display: inline-block;
  border-radius: var(--dark-border-radius);
  padding: var(--dark-padding-y) var(--dark-padding-x);
  margin: var(--dark-margin);
  font-weight: bold;
  font-size: var(--dark-font-size);
  line-height: var(--dark-line-height);
  white-space: nowrap;
  vertical-align: middle;
  border-width: var(--dark-border-width);
  border-style: solid;
}

/* ダークバッジのサイズバリエーション */
.dark-sm {
  font-size: var(--dark-sm-font-size);
  padding: var(--dark-sm-padding-y) var(--dark-sm-padding-x);
}

.dark-lg {
  font-size: var(--dark-lg-font-size);
  padding: var(--dark-lg-padding-y) var(--dark-lg-padding-x);
}

.dark-xl {
  font-size: var(--dark-xl-font-size);
  padding: var(--dark-xl-padding-y) var(--dark-xl-padding-x);
}

/* ダークバッジの色バリエーション */
.dark-pink {
  background-color: var(--dark-pink-bg);
  color: var(--dark-pink-text);
  border-color: var(--dark-pink-border);
}

.dark-orange {
  background-color: var(--dark-orange-bg);
  color: var(--dark-orange-text);
  border-color: var(--dark-orange-border);
}

.dark-blue {
  background-color: var(--dark-blue-bg);
  color: var(--dark-blue-text);
  border-color: var(--dark-blue-border);
}

.dark-green {
  background-color: var(--dark-green-bg);
  color: var(--dark-green-text);
  border-color: var(--dark-green-border);
}

.dark-purple {
  background-color: var(--dark-purple-bg);
  color: var(--dark-purple-text);
  border-color: var(--dark-purple-border);
}

.dark-red {
  background-color: var(--dark-red-bg);
  color: var(--dark-red-text);
  border-color: var(--dark-red-border);
}

.dark-yellow {
  background-color: var(--dark-yellow-bg);
  color: var(--dark-yellow-text);
  border-color: var(--dark-yellow-border);
}

.dark-cyan {
  background-color: var(--dark-cyan-bg);
  color: var(--dark-cyan-text);
  border-color: var(--dark-cyan-border);
}

.dark-indigo {
  background-color: var(--dark-indigo-bg);
  color: var(--dark-indigo-text);
  border-color: var(--dark-indigo-border);
}

.dark-brown {
  background-color: var(--dark-brown-bg);
  color: var(--dark-brown-text);
  border-color: var(--dark-brown-border);
}

.dark-gray {
  background-color: var(--dark-gray-bg);
  color: var(--dark-gray-text);
  border-color: var(--dark-gray-border);
}

/* Pleiades 独立バッジシステム */
.pleiades {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-gradient-start), var(--pleiades-gradient-end));
  color: var(--pleiades-text);
  border: none;
  box-shadow: var(--pleiades-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Pleiadesサイズバリエーション */
.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Ruby - 情熱的な赤 */
.pleiades-ruby {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-ruby-gradient-start), var(--pleiades-ruby-gradient-end));
  color: var(--pleiades-ruby-text);
  border: none;
  box-shadow: var(--pleiades-ruby-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-ruby.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-ruby.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-ruby.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Emerald - 高貴な緑 */
.pleiades-emerald {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-emerald-gradient-start), var(--pleiades-emerald-gradient-end));
  color: var(--pleiades-emerald-text);
  border: none;
  box-shadow: var(--pleiades-emerald-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-emerald.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-emerald.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-emerald.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Amethyst - 神秘的な紫 */
.pleiades-amethyst {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-amethyst-gradient-start), var(--pleiades-amethyst-gradient-end));
  color: var(--pleiades-amethyst-text);
  border: none;
  box-shadow: var(--pleiades-amethyst-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-amethyst.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-amethyst.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-amethyst.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Topaz - 輝く金 */
.pleiades-topaz {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-topaz-gradient-start), var(--pleiades-topaz-gradient-end));
  color: var(--pleiades-topaz-text);
  border: none;
  box-shadow: var(--pleiades-topaz-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pleiades-topaz.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-topaz.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-topaz.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Sapphire - 深い青 */
.pleiades-sapphire {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-sapphire-gradient-start), var(--pleiades-sapphire-gradient-end));
  color: var(--pleiades-sapphire-text);
  border: none;
  box-shadow: var(--pleiades-sapphire-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-sapphire.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-sapphire.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-sapphire.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Obsidian - エレガントな黒 */
.pleiades-obsidian {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-obsidian-gradient-start), var(--pleiades-obsidian-gradient-end));
  color: var(--pleiades-obsidian-text);
  border: none;
  box-shadow: var(--pleiades-obsidian-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pleiades-obsidian.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-obsidian.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-obsidian.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Rose - 優美なピンク */
.pleiades-rose {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-rose-gradient-start), var(--pleiades-rose-gradient-end));
  color: var(--pleiades-rose-text);
  border: none;
  box-shadow: var(--pleiades-rose-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-rose.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-rose.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-rose.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Pleiades Jade - 清涼なティール */
.pleiades-jade {
  display: inline-block;
  border-radius: var(--pleiades-border-radius);
  padding: var(--pleiades-padding-y) var(--pleiades-padding-x);
  margin: var(--pleiades-margin);
  font-weight: bold;
  font-size: var(--pleiades-font-size);
  line-height: var(--pleiades-line-height);
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(to bottom, var(--pleiades-jade-gradient-start), var(--pleiades-jade-gradient-end));
  color: var(--pleiades-jade-text);
  border: none;
  box-shadow: var(--pleiades-jade-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pleiades-jade.pleiades-sm {
  font-size: var(--pleiades-sm-font-size);
  padding: var(--pleiades-sm-padding-y) var(--pleiades-sm-padding-x);
  margin: var(--pleiades-sm-margin) !important;
}

.pleiades-jade.pleiades-lg {
  font-size: var(--pleiades-lg-font-size);
  padding: var(--pleiades-lg-padding-y) var(--pleiades-lg-padding-x);
}

.pleiades-jade.pleiades-xl {
  font-size: var(--pleiades-xl-font-size);
  padding: var(--pleiades-xl-padding-y) var(--pleiades-xl-padding-x);
}

/* Balloon（吹き出し）マイクロコピー */
.balloon {
  display: inline-block;
  position: relative;
  padding: var(--balloon-padding-y) var(--balloon-padding-x);
  margin: var(--balloon-margin);
  font-weight: 500;
  font-size: var(--balloon-font-size);
  line-height: var(--balloon-line-height);
  white-space: nowrap;
  vertical-align: top;
  border-radius: var(--balloon-border-radius);
  border: var(--balloon-border-width) solid var(--balloon-default-border);
  background-color: var(--balloon-default-bg);
  color: var(--balloon-default-text);
  box-shadow: 0 2px 8px var(--balloon-default-shadow);
  animation: balloonFloat 3s ease-in-out infinite;
  z-index: 10;
}

/* 下向きの矢印（ボタンの上に配置するため） */
.balloon::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--balloon-default-bg);
  z-index: 12;
}

.balloon::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--balloon-default-border);
  z-index: 11;
}

/* Balloonサイズバリエーション */
.balloon-sm {
  font-size: var(--balloon-sm-font-size);
  padding: var(--balloon-sm-padding-y) var(--balloon-sm-padding-x);
  margin: var(--balloon-sm-margin) !important;
}

.balloon-lg {
  font-size: var(--balloon-lg-font-size);
  padding: var(--balloon-lg-padding-y) var(--balloon-lg-padding-x);
}

.balloon-xl {
  font-size: var(--balloon-xl-font-size);
  padding: var(--balloon-xl-padding-y) var(--balloon-xl-padding-x);
}

/* Balloonカラーバリエーション */
.balloon-success {
  background-color: var(--balloon-success-bg);
  color: var(--balloon-success-text);
  border-color: var(--balloon-success-border);
}

.balloon-success::after {
  border-top-color: var(--balloon-success-bg);
}

.balloon-success::before {
  border-top-color: var(--balloon-success-border);
}

.balloon-warning {
  background-color: var(--balloon-warning-bg);
  color: var(--balloon-warning-text);
  border-color: var(--balloon-warning-border);
}

.balloon-warning::after {
  border-top-color: var(--balloon-warning-bg);
}

.balloon-warning::before {
  border-top-color: var(--balloon-warning-border);
}

.balloon-danger {
  background-color: var(--balloon-danger-bg);
  color: var(--balloon-danger-text);
  border-color: var(--balloon-danger-border);
}

.balloon-danger::after {
  border-top-color: var(--balloon-danger-bg);
}

.balloon-danger::before {
  border-top-color: var(--balloon-danger-border);
}

.balloon-info {
  background-color: var(--balloon-info-bg);
  color: var(--balloon-info-text);
  border-color: var(--balloon-info-border);
}

.balloon-info::after {
  border-top-color: var(--balloon-info-bg);
}

.balloon-info::before {
  border-top-color: var(--balloon-info-border);
}

/* Slash（スラッシュ）マイクロコピー */
.slash {
  display: inline-block;
  position: relative;
  padding: var(--slash-padding-y) var(--slash-padding-x);
  margin: var(--slash-margin);
  font-size: var(--slash-font-size);
  font-weight: bold;
  line-height: var(--slash-line-height);
  color: var(--slash-text-color);
  text-shadow: var(--slash-text-shadow);
  vertical-align: top;
  white-space: nowrap;
  animation: balloonFloat 3s ease-in-out infinite;
  z-index: 10;
}

/* Slashサイズバリエーション */
.slash-sm {
  font-size: var(--slash-sm-font-size);
  margin: var(--slash-sm-margin) !important;
}

.slash-lg {
  font-size: var(--slash-lg-font-size);
  margin: var(--slash-lg-margin) !important;
}

.slash-xl {
  font-size: var(--slash-xl-font-size);
  margin: var(--slash-xl-margin) !important;
}

/* フローティングアニメーション */
@keyframes balloonFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Label（ラベル）共通スタイル */
.label {
  display: inline-block;
  padding: var(--label-padding-y) var(--label-padding-x);
  margin: var(--label-margin);
  font-size: var(--label-font-size);
  font-weight: bold;
  line-height: var(--label-line-height);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--label-border-radius);
}

/* Labelサイズバリエーション */
.label-sm {
  font-size: var(--label-sm-font-size);
  padding: var(--label-sm-padding-y) var(--label-sm-padding-x);
}

.label-lg {
  font-size: var(--label-lg-font-size);
  padding: var(--label-lg-padding-y) var(--label-lg-padding-x);
}

.label-xl {
  font-size: var(--label-xl-font-size);
  padding: var(--label-xl-padding-y) var(--label-xl-padding-x);
}

/* Labelカラーバリエーション - 基本スタイル */
.label-new {
  background-color: var(--label-new-bg);
  color: var(--label-new-text);
}

.label-hot {
  background-color: var(--label-hot-bg);
  color: var(--label-hot-text);
}

.label-sale {
  background-color: var(--label-sale-bg);
  color: var(--label-sale-text);
}

.label-recommend {
  background-color: var(--label-recommend-bg);
  color: var(--label-recommend-text);
}

.label-limited {
  background-color: var(--label-limited-bg);
  color: var(--label-limited-text);
}

.label-popular {
  background-color: var(--label-popular-bg);
  color: var(--label-popular-text);
}

.label-premium {
  background-color: var(--label-premium-bg);
  color: var(--label-premium-text);
}

.label-exclusive {
  background-color: var(--label-exclusive-bg);
  color: var(--label-exclusive-text);
}

/* Labelアウトラインスタイル */
.label-outline {
  background: transparent;
  border-width: var(--label-border-width);
  border-style: solid;
}

.label-outline.label-new {
  border-color: var(--label-new-border);
  color: var(--label-new-border);
}

.label-outline.label-hot {
  border-color: var(--label-hot-border);
  color: var(--label-hot-border);
}

.label-outline.label-sale {
  border-color: var(--label-sale-border);
  color: var(--label-sale-border);
}

.label-outline.label-recommend {
  border-color: var(--label-recommend-border);
  color: var(--label-recommend-border);
}

.label-outline.label-limited {
  border-color: var(--label-limited-border);
  color: var(--label-limited-border);
}

.label-outline.label-popular {
  border-color: var(--label-popular-border);
  color: var(--label-popular-border);
}

.label-outline.label-premium {
  border-color: var(--label-premium-border);
  color: var(--label-premium-border);
}

.label-outline.label-exclusive {
  border-color: var(--label-exclusive-border);
  color: var(--label-exclusive-border);
}

/* Labelシャドウスタイル */
.label-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Labelコンパクトパディング（バッジと同じ） */
.label-compact {
  padding: var(--badge-padding-y) var(--badge-padding-x);
}

.label-compact.label-sm {
  padding: var(--badge-sm-padding-y) var(--badge-sm-padding-x);
}

.label-compact.label-lg {
  padding: var(--badge-lg-padding-y) var(--badge-lg-padding-x);
}

.label-compact.label-xl {
  padding: var(--badge-xl-padding-y) var(--badge-xl-padding-x);
}

/* テーブル内のバッジ・チップ・マイクロコピー専用スタイル */
table .badge, table .white, table .zephyra-chip, table .dark, table .pleiades,
table .pleiades-ruby, table .pleiades-emerald, table .pleiades-amethyst,
table .pleiades-topaz, table .pleiades-sapphire, table .pleiades-obsidian,
table .pleiades-rose, table .pleiades-jade, table .balloon, table .slash, table .label {
  display: inline-block;
  margin: var(--badge-table-margin);
}

/* td要素内に複数のバッジ・チップがある場合 - 横並び用 */
td .badge + .badge,
td .white + .white,
td .badge + .white,
td .white + .badge,
td .zephyra-chip + .zephyra-chip,
td .badge + .zephyra-chip,
td .zephyra-chip + .badge,
td .white + .zephyra-chip,
td .zephyra-chip + .white,
td .dark + .dark,
td .badge + .dark,
td .dark + .badge,
td .white + .dark,
td .dark + .white,
td .zephyra-chip + .dark,
td .dark + .zephyra-chip,
td .pleiades + .pleiades,
td .pleiades-ruby + .pleiades-ruby,
td .pleiades-emerald + .pleiades-emerald,
td .pleiades-amethyst + .pleiades-amethyst,
td .pleiades-topaz + .pleiades-topaz,
td .pleiades-sapphire + .pleiades-sapphire,
td .pleiades-obsidian + .pleiades-obsidian,
td .pleiades-rose + .pleiades-rose,
td .pleiades-jade + .pleiades-jade,
td .balloon + .balloon,
td .slash + .slash,
td .label + .label {
  margin-left: var(--badge-table-consecutive-margin-left);
}