/* ============================================
   研修ページ - ライトテーマ上書き
   training.css の上書き用
   ============================================ */

/* ---------- Tutorial Card ---------- */
:root[data-theme="light"] .tutorial-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .tutorial-card:hover {
  border-color: rgba(91, 95, 199, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .step-title {
  color: var(--text-primary);
}

:root[data-theme="light"] .step-text {
  color: var(--text-secondary);
}

/* ---------- Breadcrumb ---------- */
:root[data-theme="light"] .breadcrumb {
  color: var(--text-muted);
}

:root[data-theme="light"] .breadcrumb a {
  color: var(--accent-2);
}

/* ---------- Tutorial Page Title ---------- */
:root[data-theme="light"] .tutorial-page-title {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .tutorial-page-description {
  color: var(--text-secondary);
}

/* ---------- Screenshot ---------- */
:root[data-theme="light"] .step-screenshot-wrap {
  border-color: rgba(0, 0, 0, 0.08);
  background: #f0eeec;
}

:root[data-theme="light"] .step-screenshot-wrap:hover {
  border-color: rgba(91, 95, 199, 0.2);
  box-shadow: 0 8px 20px rgba(91, 95, 199, 0.08);
}

:root[data-theme="light"] .screenshot-zoom-hint {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

:root[data-theme="light"] .step-screenshot-placeholder {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}

/* ---------- Tip Box ---------- */
:root[data-theme="light"] .tip-box {
  background: rgba(91, 95, 199, 0.06);
  border-color: rgba(91, 95, 199, 0.18);
}

:root[data-theme="light"] .tip-box-title {
  color: var(--accent-2);
}

:root[data-theme="light"] .tip-box-text {
  color: var(--text-secondary);
}

/* ---------- Warning Box ---------- */
:root[data-theme="light"] .warning-box {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

:root[data-theme="light"] .warning-title {
  color: #dc2626;
}

:root[data-theme="light"] .warning-item-title {
  color: var(--text-primary);
}

:root[data-theme="light"] .warning-item-desc {
  color: var(--text-secondary);
}

/* ---------- Notes Section ---------- */
:root[data-theme="light"] .notes-section {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .notes-section-title {
  color: #dc2626;
}

:root[data-theme="light"] .note-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .note-item-header {
  color: var(--text-primary);
}

:root[data-theme="light"] .note-item-body {
  color: var(--text-secondary);
}

/* ---------- Links Section ---------- */
:root[data-theme="light"] .links-section {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .links-section-title {
  color: var(--accent-2);
}

:root[data-theme="light"] .link-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .link-external {
  color: var(--accent-2);
  background: rgba(91, 95, 199, 0.05);
  border-color: rgba(91, 95, 199, 0.2);
}

:root[data-theme="light"] .link-external:hover {
  color: #fff;
}

/* ---------- Tutorial Lightbox ---------- */
:root[data-theme="light"] .tutorial-lightbox {
  background: rgba(245, 243, 240, 0.96);
}

:root[data-theme="light"] .tutorial-lightbox-close {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

:root[data-theme="light"] .tutorial-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .tutorial-lightbox-img {
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .tutorial-lightbox-caption {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
}

/* ---------- Progress Indicator ---------- */
:root[data-theme="light"] .tutorial-progress {
  background: rgba(245, 243, 240, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .progress-dot {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .progress-dot:hover {
  background: rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .progress-dot.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 0 8px var(--accent-glow);
}

:root[data-theme="light"] .progress-label {
  color: var(--text-muted);
}