/* ==========================================================================

   skin-3.css · 教程·指南

   适用：信息型聚合页

   强调色：--color-info

   配图风格：步骤图示

   列表布局：单列+目录

   生成者：Crystal Yifei Liu · 2026-09-25

   ========================================================================== */



.skin-3 {

  --skin-accent: var(--color-info);

  --skin-accent-light: hsl(210, 70%, 96%);

  --skin-accent-dark: hsl(210, 70%, 30%);

}



/* ==========================================================================

   教程页头部

   ========================================================================== */



.skin-3 .tutorial-header {

  padding: var(--rhythm-loose) 0;

  border-bottom: 2px solid var(--skin-accent-light);

  margin-bottom: var(--rhythm-loose);

}



.skin-3 .tutorial-header h1 {

  font-size: var(--text-4xl);

  margin-bottom: var(--rhythm-normal);

}



.skin-3 .tutorial-header .page-alive {

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   信任条

   ========================================================================== */



.skin-3 .trust-bar {

  display: flex;

  align-items: center;

  gap: var(--space-5);

  padding: var(--space-3) var(--space-4);

  margin-bottom: var(--rhythm-normal);

  background-color: var(--skin-accent-light);

  border-radius: var(--radius-md);

  font-size: var(--text-xs);

  flex-wrap: wrap;

}



/* ==========================================================================

   教程导语

   ========================================================================== */



.skin-3 .tutorial-intro {

  padding: var(--space-5);

  margin-bottom: var(--rhythm-loose);

  background: linear-gradient(135deg,

    var(--color-info-alpha-10, hsl(210, 70%, 96%)),

    var(--color-primary-alpha-10));

  border-left: 4px solid var(--skin-accent);

  border-radius: var(--radius-md);

  font-size: var(--text-lg);

  line-height: var(--leading-relaxed);

}



.skin-3 .tutorial-intro::before {

  content: '📚 ';

  font-size: var(--text-2xl);

}



/* ==========================================================================

   判断框架

   ========================================================================== */



.skin-3 .judgment-framework {

  margin-bottom: var(--rhythm-loose);

}



/* ==========================================================================

   学习路径图

   ========================================================================== */



.skin-3 .learning-path {

  margin: var(--rhythm-loose) 0;

  padding: var(--rhythm-normal);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

}



.skin-3 .learning-path h2 {

  font-size: var(--text-xl);

  margin-bottom: var(--rhythm-normal);

}



.skin-3 .path-steps {

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

}



.skin-3 .path-step {

  display: flex;

  align-items: flex-start;

  gap: var(--space-3);

  padding: var(--space-3) 0;

  position: relative;

}



.skin-3 .path-step:not(:last-child)::after {

  content: '';

  position: absolute;

  left: 15px;

  top: 48px;

  bottom: -12px;

  width: 2px;

  background-color: var(--skin-accent-light);

}



.skin-3 .path-step-number {

  flex-shrink: 0;

  width: 32px;

  height: 32px;

  background-color: var(--skin-accent);

  color: hsl(0, 0%, 100%);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: var(--font-bold);

  font-size: var(--text-sm);

  z-index: 1;

}



.skin-3 .path-step-content {

  flex: 1;

  padding-top: var(--space-1);

}



.skin-3 .path-step-title {

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  color: var(--color-text-primary);

  margin-bottom: var(--space-1);

}



.skin-3 .path-step-desc {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-snug);

}



/* ==========================================================================

   文章列表（单列+目录）

   ========================================================================== */



.skin-3 .tutorial-list {

  margin: var(--rhythm-loose) 0;

}



.skin-3 .tutorial-list h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--rhythm-normal);

}



.skin-3 .tutorial-item {

  display: flex;

  align-items: flex-start;

  gap: var(--space-4);

  padding: var(--space-5) 0;

  border-bottom: 1px solid var(--color-border);

}



.skin-3 .tutorial-item:last-child {

  border-bottom: none;

}



.skin-3 .tutorial-item-number {

  flex-shrink: 0;

  font-size: var(--text-2xl);

  font-weight: var(--font-bold);

  color: var(--skin-accent);

  font-family: var(--font-display);

  line-height: 1;

  padding-top: var(--space-1);

}



.skin-3 .tutorial-item-content {

  flex: 1;

  min-width: 0;

}



.skin-3 .tutorial-item-title {

  font-size: var(--text-lg);

  font-weight: var(--font-semibold);

  color: var(--color-text-primary);

  margin-bottom: var(--space-2);

  text-decoration: none;

}



.skin-3 .tutorial-item-title:hover {

  color: var(--skin-accent-dark);

  text-decoration: underline;

}



.skin-3 .tutorial-item-summary {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



/* ==========================================================================

   L3深度探索入口

   ========================================================================== */



.skin-3 .exploration-hook {

  margin: var(--rhythm-loose) 0;

}



/* ==========================================================================

   FAQ 区

   ========================================================================== */



.skin-3 .faq-section {

  margin-top: var(--rhythm-loose);

}



@media (max-width: 768px) {

  .skin-3 .tutorial-header h1 { font-size: var(--text-3xl); }

  .skin-3 .tutorial-intro { font-size: var(--text-base); }

  .skin-3 .path-step:not(:last-child)::after { left: 11px; top: 42px; }

  .skin-3 .path-step-number { width: 24px; height: 24px; font-size: var(--text-xs); }

  .skin-3 .tutorial-item-number { font-size: var(--text-xl); }

}