/* === 3階層タブデザイン（jj-block/tab-group ネスティング） === */

/* --- 全レベル共通: アクティブ色をプライマリに統一 --- */
.jj-tab-group {
  --jj-tab-active-color: var(--color-primary);
}

/* --- タブごとのアクセント色（既定=プライマリ） ---
   モニター料金/期間限定価格はバッジと同じ指定カラー。
   モディファイアは jj-block/tab-group の view.js がラベル連動で付与する。 */
button.jj-tab-group__tab {
  --tab-accent: var(--color-primary);
  --tab-accent-light: var(--color-primary-light);
  --tab-accent-dark: var(--color-primary-dark, var(--color-primary));
}

button.jj-tab-group__tab.jj-tab-group__tab--monitor {
  --tab-accent: var(--color-badge-monitor);
  --tab-accent-light: color-mix(in srgb, var(--color-badge-monitor) 55%, var(--color-white));
  --tab-accent-dark: var(--color-badge-monitor);
  --tab-inactive: var(--color-badge-monitor);
}

button.jj-tab-group__tab.jj-tab-group__tab--limited {
  --tab-accent: var(--color-badge-limited);
  --tab-accent-light: color-mix(in srgb, var(--color-badge-limited) 55%, var(--color-white));
  --tab-accent-dark: var(--color-badge-limited);
  --tab-inactive: var(--color-badge-limited);
}

button.jj-tab-group__tab.jj-tab-group__tab--initial {
  --tab-accent: var(--color-badge-initial);
  --tab-accent-light: color-mix(in srgb, var(--color-badge-initial) 55%, var(--color-white));
  --tab-accent-dark: var(--color-badge-initial);
  --tab-inactive: var(--color-badge-initial);
}

/* === Level 1: メインカテゴリ === */
.jj-tab-group > .jj-tab-group__nav {
  gap: var(--space-3-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3-xl);
}

.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-2-xl);
  color: var(--tab-inactive, var(--color-text-light));
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
  transition: all var(--transition-base);
}

/* Level 1 アクティブ: 背景ピンク、文字白、1pxピンク枠、矢印なし */
.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active {
  background: var(--tab-accent, var(--color-primary));
  color: var(--color-white);
  border: 1px solid var(--tab-accent, var(--color-primary));
  border-bottom-color: var(--tab-accent, var(--color-primary));
  font-weight: var(--font-weight-semibold);
}

/* Level 1 アクティブの矢印（::after）を非表示 */
.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active::after,
.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active::before {
  display: none !important;
}

.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab:hover {
  border-color: var(--tab-accent-light, var(--color-primary-light));
}

/* === Level 2: サブカテゴリ（下線スタイル） === */
.jj-tab-group .jj-tab-group > .jj-tab-group__nav {
  gap: var(--space-3-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2-xl);
  /* 折り返さず横スライド（全タブをスライドに統一） */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jj-tab-group .jj-tab-group > .jj-tab-group__nav::-webkit-scrollbar {
  display: none;
}

.jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-2-xs);
  padding-bottom: var(--space-sm);
  color: var(--tab-inactive, var(--color-text-light));
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}

.jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active {
  color: var(--tab-accent, var(--color-primary));
  background: transparent;
  border-bottom-color: var(--tab-accent, var(--color-primary));
  font-weight: var(--font-weight-bold);
}

/* Level 2 矢印もプライマリに */
.jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab::after,
.jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab::before {
  border-top-color: var(--tab-accent, var(--color-primary)) !important;
}

.jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab:hover {
  color: var(--tab-accent, var(--color-primary));
}

/* === Level 3: 疾患タブ（ピルボタン） === */
.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav {
  gap: var(--space-xs);
  border-bottom: none;
  margin-bottom: var(--space-3-xl);
  /* 折り返さず横スライド（全タブをスライドに統一） */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav::-webkit-scrollbar {
  display: none;
}

.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  padding: var(--space-xs) var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
  color: var(--tab-inactive, var(--color-text-light));
  background: transparent;
  transition: all var(--transition-base);
}

.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab:hover {
  border-color: var(--tab-accent, var(--color-primary));
  color: var(--tab-accent, var(--color-primary));
}

.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active {
  background: var(--tab-accent, var(--color-primary));
  color: var(--color-white);
  border-color: var(--tab-accent, var(--color-primary));
  border-bottom-color: var(--tab-accent, var(--color-primary));
  font-weight: var(--font-weight-medium);
}

/* Level 3 矢印非表示 */
.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab::after,
.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab::before {
  display: none !important;
}

.jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__panel {
  padding-top: var(--space-xl);
}

/* --- SP レスポンシブ --- */
@container (max-width: 599px) {
  .jj-tab-group > .jj-tab-group__nav {
    gap: var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .jj-tab-group > .jj-tab-group__nav::-webkit-scrollbar { display: none; }
  .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-lg);
  }

  .jj-tab-group .jj-tab-group > .jj-tab-group__nav {
    gap: var(--space-xl);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .jj-tab-group .jj-tab-group > .jj-tab-group__nav::-webkit-scrollbar { display: none; }
  .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
    font-size: var(--font-size-3-xs);
  }

  .jj-tab-group .jj-tab-group .jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab {
    font-size: var(--font-size-3-xs);
    padding: var(--space-2-xs) var(--space-md);
  }
}

/* Fix: Level 1 アクティブタブのホバーで文字が消えないように */
.jj-tab-group > .jj-tab-group__nav button.jj-tab-group__tab.jj-tab-group__tab--active:hover {
  color: var(--color-white);
  background: var(--tab-accent-dark, var(--color-primary-dark, var(--color-primary)));
  border-color: var(--tab-accent-dark, var(--color-primary-dark, var(--color-primary)));
}

/* === スライド可能インジケーター ===
   タブが横スクロール可能なとき、右端にシェブロン＋フェードを出して
   「横にスライドできる」ことを示す。JS(tab-scroll-affordance.js)が
   .jj-tab-group--scrollable / --at-start / --at-end と --jj-nav-h を付与する。 */

/* 右端: まだ右に続きがあるとき表示 */
.jj-tab-group--scrollable::after {
  content: "\276F"; /* ❯ */
  position: absolute;
  top: 0;
  right: 0;
  height: var(--jj-nav-h, 3rem);
  width: var(--space-9-xl);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-2-xs);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  background: linear-gradient(to right, transparent, var(--color-white) 55%);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--transition-base);
}
.jj-tab-group--at-end::after {
  opacity: 0;
}

/* 左端: 右にスクロール済みで左に戻れるとき、左フェードを表示 */
.jj-tab-group--scrollable::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--jj-nav-h, 3rem);
  width: var(--space-7-xl);
  background: linear-gradient(to left, transparent, var(--color-white) 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--transition-base);
}
.jj-tab-group--at-start::before {
  opacity: 0;
}