/* ============================================================
   pathways.css — 경로 안내(진로·이수) 뷰 스타일 (경로 안내 담당 소유)
   tokens.css 변수만 사용한다. 새 색상/폰트/radius 추가 금지.
   모바일 우선(mobile-first). 클래스는 전부 .path- 프리픽스로 다른 뷰(detail-*, uni-* 등)와
   충돌하지 않게 한다. .chip/.chip-row/.badge/.btn/.state-card/.skeleton-row/.empty-state/
   .page-title/.page-desc는 app.css가 정의한 전역 유틸리티를 그대로 재사용한다
   (detail.js/search.js도 동일하게 app.css 클래스를 재사용하는 기존 관례).
   ============================================================ */

.path-view { padding: var(--sp-8) 0 var(--sp-10); }

.path-head { margin-bottom: var(--sp-5); }
.path-eyebrow {
  display: inline-block; color: var(--brand-link); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; margin: 0 0 var(--sp-2);
}

/* ===== "공식 필수 요건 아님" 배너 (신뢰 신호 컴포넌트, warning 톤) ===== */
.path-banner {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--warning-tint); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
}
.path-banner strong { color: var(--warning); font-size: 15px; font-weight: 700; }
.path-banner span { color: var(--text); font-size: 13px; line-height: 1.6; }

/* ===== 이수 기준(credit-rules) 카드 =====
   h2(.path-section-title)가 20px 고정이라 h3(.path-card-title 18px)와 2px 차이밖에 나지 않아
   "계열·트랙 선택"/"추천 이수 경로" 섹션 제목의 위계가 눈으로 잘 구분되지 않았다(IMPROVE-v2
   리뷰 지적 — JS는 이미 h2 태그를 두었지만 시각적 크기 차이가 부족했음). ONAE 타입 스케일
   (H2 22→28px)에 맞춰 기본 22px + 데스크톱 28px로 올려 h1(34px)·h2·h3(18px) 3단 위계를
   또렷하게 만든다. */
.path-section-title { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-4); line-height: 1.3; }
@media (min-width: 1025px) { .path-section-title { font-size: 28px; } }
.path-subsection-title { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-3); }

.path-credit-section { margin-bottom: var(--sp-8); }
.path-credit-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
}
@media (min-width: 641px) { .path-credit-grid { grid-template-columns: repeat(3, 1fr); } }

.path-credit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5); text-align: left;
}
.path-credit-value {
  /* ONAE 색 사용 3원칙: 코럴은 "핵심 숫자 하나"에만 켠다. 3개 카드(총 이수/교과군 이수/
     창체 이수) 지표를 나란히 보여줄 때 전부 코럴이면 원칙이 무너지므로 기본은 중립색을 쓰고,
     헤드라인 1개(졸업 총 이수 학점)에만 .path-credit-card-headline 수정자로 코럴을 켠다. */
  display: inline; font-size: 32px; font-weight: 800; color: var(--text-strong);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.path-credit-card-headline .path-credit-value { color: var(--accent-strong); }
.path-credit-unit { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.path-credit-label { margin: var(--sp-2) 0 0; color: var(--text); font-size: 14px; }
.path-credit-badge { margin-top: var(--sp-3); background: var(--success-tint); color: var(--success); }

/* ===== 계열/트랙 선택 =====
   계열·트랙이 33개라 줄바꿈(wrap)을 허용하면 본문 진입 전 세로 공간을 과도하게 차지한다
   (데스크톱 ~4행, 모바일 ~13행 — IMPROVE-v2 리뷰 지적). app.css .chip-row 기본값(가로 스크롤,
   nowrap)을 그대로 따르도록 wrap 오버라이드를 제거한다(ONAE 칩 규칙: 가로 스크롤 허용). */
.path-track-section { margin-bottom: var(--sp-5); }

.path-group-body { margin-top: var(--sp-2); }

/* ===== 추천 이수 경로 카드 ===== */
.path-pathway-section { margin-bottom: var(--sp-8); }
.path-card-list { display: grid; gap: var(--sp-5); }

.path-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.path-card-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.path-card-title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 0; }
.path-status-badge { background: var(--warning-tint); color: var(--warning); }

/* ===== 타임라인(steps, order 순서 = 학년/단계 순) ===== */
.path-timeline { display: grid; gap: var(--sp-5); position: relative; }
.path-step { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-4); position: relative; }
.path-step + .path-step { padding-top: var(--sp-5); }
.path-step + .path-step::before {
  content: ''; position: absolute; left: 15px; top: calc(-1 * var(--sp-4)); width: 2px; height: var(--sp-4);
  background: var(--border);
}
.path-step-marker {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: 14px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.path-step-foundation .path-step-marker { background: var(--brand); color: #fff; }
.path-step-body { min-width: 0; }
.path-step-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin: 0 0 4px; }
.path-step-reason { color: var(--text-muted); font-size: 13px; margin: 0 0 var(--sp-3); }

/* ===== 선택과목 세트(choice-set) ===== */
.path-choiceset {
  background: var(--surface); border-radius: var(--radius); padding: var(--sp-4);
  margin-top: var(--sp-2);
}
.path-choiceset-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 4px; }
.path-choiceset-title { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0; }
.path-choiceset-meta { color: var(--text-muted); font-size: 12px; margin: 0 0 var(--sp-3); }

/* ===== 과목 칩(클릭 시 상세로 이동) ===== */
.path-course-chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.path-course-chip {
  height: 32px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  background: var(--bg); border: 1px solid var(--border); color: var(--text-strong);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.path-course-chip:hover, .path-course-chip:focus-visible { border-color: var(--brand-link); color: var(--brand-link); }
.path-more-btn { height: 32px; padding: 0 var(--sp-4); font-size: 13px; margin-top: var(--sp-3); }

.path-empty { color: var(--text-muted); font-size: 13px; margin: 0; }

/* ===== 과목 연계 안내(course-relations) ===== */
.path-relation-section { margin-top: var(--sp-8); }
.path-relation-list { display: grid; gap: var(--sp-3); }
.path-relation-item {
  background: var(--surface); border-radius: var(--radius); padding: var(--sp-4);
}
.path-relation-chain { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.path-relation-arrow { color: var(--text-muted); font-weight: 700; }
.path-relation-kind { background: var(--info-tint); color: var(--info); flex-shrink: 0; }
.path-relation-reason { color: var(--text-muted); font-size: 13px; margin: var(--sp-2) 0 0; }

@media (min-width: 1025px) {
  .path-timeline { grid-template-columns: 1fr; }
}