/* ===== コンポーネント（ボタン・カード・ツールチップ） ===== */
/* Opus戦略指示書 4-3, 4-4 準拠 */

/* ────────────────────────────────────────
   ボタン共通ベース
──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  min-height: 48px;
  padding: 0 var(--space-4);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.97); }

.btn:disabled {
  background: var(--color-disabled-bg) !important;
  color: var(--color-disabled-fg) !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}

/* プライマリ（最重要アクション：次の日 など） */
.btn-primary {
  background: var(--color-brand);
  color: #1F2937;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--color-brand-hover); }

/* 買い専用（緑） */
.btn-buy {
  background: var(--color-bull);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-buy:hover:not(:disabled) { background: #15803d; }

/* 売り専用（赤） */
.btn-sell {
  background: var(--color-bear);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-sell:hover:not(:disabled) { background: #b91c1c; }

/* セカンダリ（補助：前の日・自動再生・やり直す など） */
.btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-subtle); }

/* ピル型（トグル：MA5・MA25・速度切替 など） */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-sub);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-pill:active { transform: scale(0.95); }

/* ピルON状態：からし色（MA5） */
.btn-pill.active {
  background: var(--color-ma5);
  color: #fff;
  border-color: var(--color-ma5);
  font-weight: var(--fw-bold);
}

/* ピルOFF状態（MAが非表示時） */
.btn-pill.btn-pill-off {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  opacity: 0.6;
}

/* ピルON状態：青（MA25） */
.btn-pill.active-blue {
  background: var(--color-ma25);
  color: #fff;
  border-color: var(--color-ma25);
  font-weight: var(--fw-bold);
}

/* ────────────────────────────────────────
   カード
──────────────────────────────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.card-accent {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}

/* ────────────────────────────────────────
   今日の学習カード（レッスンカード）
──────────────────────────────────────── */
.lesson-card {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-light);
  border-top: 2px solid var(--color-brand);
  /* border-bottom は controls-area の border-top が担当 */
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lesson-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-sub);
  letter-spacing: 0.04em;
  flex: 1;
}

.day-badge {
  background: var(--color-brand);
  color: #1F2937;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}

.lesson-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.lesson-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lesson-actions .btn {
  min-height: 40px;
  font-size: var(--fs-sm);
}

.lesson-actions .btn-primary {
  flex: 1;
}

.lesson-actions .btn-secondary {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  border-color: var(--color-border);
  padding: 0 var(--space-3);
  white-space: nowrap;
}

/* ────────────────────────────────────────
   ヘルプアイコン（?ボタン）
──────────────────────────────────────── */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}

.help-icon:active {
  background: var(--color-border);
}

/* ────────────────────────────────────────
   ヘルプツールチップ
──────────────────────────────────────── */
.help-tooltip {
  position: fixed;
  z-index: 8000;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  width: 260px;
  max-width: calc(100vw - 24px);
}

.help-tooltip-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-bg-subtle);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--color-text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-tooltip-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  padding-right: 28px; /* 閉じるボタン分 */
}

.help-tooltip-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.help-tooltip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand);
  color: #1F2937;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.help-tooltip-link:active {
  background: var(--color-brand-hover);
}

/* ────────────────────────────────────────
   アイコン付きボタン（描画・消去 など）
──────────────────────────────────────── */
.btn-icon {
  flex-direction: row;
  gap: 4px;
  padding: 0 var(--space-3);
  min-height: 40px;
  white-space: nowrap;        /* 折り返し禁止 */
  font-size: var(--fs-sm);
}

.btn-icon-glyph {
  font-size: 16px;
  line-height: 1;
}

.btn-icon-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ────────────────────────────────────────
   「📖 指標を調べる」ボタン
──────────────────────────────────────── */
.indicator-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-3);
  height: 36px;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-brand-hover);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin-left: auto; /* 右端に寄せる */
}

.indicator-help-btn:hover {
  background: var(--color-brand-light);
}

.indicator-help-btn:active {
  opacity: 0.8;
}

/* ─────────────────────────────────────────
   アフィリ導線 CTA カード（統一デザイン）
───────────────────────────────────────── */

/* 共通カード本体 */
.cta-card {
  background: var(--color-brand-light);
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  position: relative;
}

/* 閉じる × ボタン */
.cta-card-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* 小さいリード文（達成メッセージなど） */
.cta-card-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #92660A;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

/* メインコピー */
.cta-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  padding-right: 24px;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* サブコピー */
.cta-card-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-bottom: 10px;
  line-height: 1.5;
}

/* CTAボタン */
.cta-card-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--color-brand);
  color: var(--color-text);
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .12s;
}
.cta-card-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* PR注記 */
.cta-card-pr-note {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 5px;
}

/* ─────────────────────────────────────────
   空状態（Empty State）
───────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 40px;
  text-align: center;
}

.empty-state-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.55;
}

.empty-state-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 280px;
}

/* ─────────────────────────────────────────
   エラー状態（Error State）
───────────────────────────────────────── */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 40px;
  text-align: center;
}

.error-state-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 14px;
}

.error-state-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 6px;
}

.error-state-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 280px;
}

.error-state-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.error-state-retry:active { background: var(--color-border); }

/* fixed スライドイン型ラッパー（初勝利CTA用） */
.cta-slide-up {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
}

/* ─────────────────────────────────────────
   オンボーディング（初回3スライド）
───────────────────────────────────────── */

#onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
  transition: opacity 0.3s;
}

.ob-modal {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  max-width: 360px;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ob-slides-wrap { overflow: hidden; }

.ob-slides {
  display: flex;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.ob-slide {
  min-width: 100%;
  padding: 32px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ob-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
}

.ob-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.ob-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.6;
  margin-bottom: 18px;
}

/* スライド1: 機能リスト */
.ob-features {
  list-style: none;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  text-align: left;
}
.ob-features li {
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding: 5px 0;
  line-height: 1.4;
}
.ob-features li + li { border-top: 1px solid var(--color-border); }

/* スライド2: ステップリスト */
.ob-steps {
  list-style: none;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ob-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ob-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}
.ob-steps strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  display: block;
  margin-bottom: 2px;
}
.ob-steps p {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.4;
  margin: 0;
}

/* スライド3: 免責 */
.ob-disclaimer {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.7;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: left;
  margin-bottom: 10px;
  width: 100%;
}
.ob-pr-note {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ドットインジケーター */
.ob-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 0 8px;
}
.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.ob-dot.active {
  width: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* ナビゲーション */
.ob-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 20px;
  gap: 10px;
}
.ob-btn-back {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-width: 56px;
  -webkit-tap-highlight-color: transparent;
}
.ob-btn-next {
  flex: 1;
  min-height: 46px;
}

/* ===== 更新通知バナー（update-notifier.js） ===== */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-brand);
  color: var(--color-text);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: slide-down .3s ease;
}

.update-banner button {
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}

@keyframes slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}