/* ============================================
   s-tab-09 - 標準ブロック タブUI
   wp:group + data-label でタブ切替
   ============================================ */

.s-tab-09 {
  container-type: inline-size;
  width: 100%;
  
  padding: var(--space-lg);
}

/* --- タブナビ（JSで自動生成） --- */
.s-tab-09__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-xs);
  margin-bottom: var(--space-3-xl);
  border-bottom: 1px solid var(--color-border);
}

.s-tab-09__nav-btn {
  padding: var(--space-sm) var(--space-2-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  color: var(--color-text-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}

.s-tab-09__nav-btn:hover {
  color: var(--color-primary);
}

.s-tab-09__nav-btn.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* --- パネル表示制御 --- */
.s-tab-09__panel {
  display: none;
}

.s-tab-09__panel.is-active {
  display: block;
}

/* --- エディタ内では全パネル表示 --- */
.editor-styles-wrapper .s-tab-09__panel {
  display: block;
  border-left: 3px solid var(--color-border, #ddd);
  padding-left: var(--space-xl);
  margin-bottom: var(--space-2-xl);
}

.editor-styles-wrapper .s-tab-09__panel::before {
  content: attr(data-label);
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
}

@container (max-width: 599px) {
  .s-tab-09__nav {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s-tab-09__nav::-webkit-scrollbar {
    display: none;
  }
  .s-tab-09__nav-btn {
    font-size: var(--font-size-3-xs);
    padding: var(--space-xs) var(--space-lg);
  }
}

/* ============================================
   3-Level Tab Hierarchy
   Level 1: Top tabs (一般皮膚科/診療日/院長紹介)
   Level 2: Sub tabs (代表的な皮膚疾患/対応している処置/etc)
   Level 3: Disease tabs (湿疹/虫刺され/etc) — pill style
   ============================================ */

/* --- Level 1: top-level tabs --- */
.s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-md) var(--space-3-xl);
}

/* --- Level 2: sub tabs --- */
.s-tab-09 .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-2-xl);
}

/* --- Level 3: disease pill tabs --- */
.s-tab-09 .s-tab-09 .s-tab-09 > .s-tab-09__nav {
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: none;
  margin-bottom: var(--space-2-xl);
}

.s-tab-09 .s-tab-09 .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.s-tab-09 .s-tab-09 .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

@container (max-width: 599px) {
  .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-xl);
  }
  .s-tab-09 .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
    font-size: var(--font-size-3-xs);
    padding: var(--space-xs) var(--space-lg);
  }
  .s-tab-09 .s-tab-09 .s-tab-09 > .s-tab-09__nav {
    gap: var(--space-3-xs);
  }
  .s-tab-09 .s-tab-09 .s-tab-09 > .s-tab-09__nav .s-tab-09__nav-btn {
    font-size: var(--font-size-3-xs);
    padding: var(--space-3-xs) var(--space-md);
  }
}

/* --- タブラベル見出し（エディタで編集可能、フロントではJSで非表示） --- */
.s-tab-09__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

/* エディタ内では表示して編集可能に */
.editor-styles-wrapper .s-tab-09__label {
  display: block !important;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-sm);
  font-size: var(--font-size-sm);
}