/* ================================================================
   MainPage — Tab bar (AI 채팅 / WEHAGO) + iframe embed
   ================================================================ */

/* ── Tab bar ────────────────────────────────────── */
.main-page__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  background: var(--color-bg-secondary, #f7f8fa);
  border-bottom: 1px solid var(--color-border, #e4e8ec);
  flex-shrink: 0;
}

.main-page__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #888);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.main-page__tab:hover {
  background: var(--color-bg-card, #fff);
  color: var(--color-text, #444);
}

.main-page__tab--active {
  background: var(--color-bg-card, #fff);
  color: var(--color-primary, #2C5CA3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-weight: 600;
}

.main-page__tab svg {
  flex-shrink: 0;
}

.main-page__tab-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(44, 92, 163, 0.08);
  color: var(--color-primary, #2C5CA3);
  letter-spacing: 0.02em;
}

/* ── WEHAGO iframe ──────────────────────────────── */
.main-page__wehago {
  position: relative;
  overflow: hidden;
}

.main-page__wehago-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Dark mode ──────────────────────────────────── */
[data-theme="dark"] .main-page__tabs {
  background: #1a1a1a;
  border-bottom-color: #333;
}

[data-theme="dark"] .main-page__tab {
  color: #777;
}

[data-theme="dark"] .main-page__tab:hover {
  background: #252525;
  color: #ccc;
}

[data-theme="dark"] .main-page__tab--active {
  background: #252525;
  color: #5b9bd5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .main-page__tab-badge {
  background: rgba(91, 155, 213, 0.15);
  color: #5b9bd5;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .main-page__tabs {
    padding: 4px 12px;
  }

  .main-page__tab {
    padding: 6px 10px;
    font-size: 12.5px;
  }
}