/* ==========================================================================
   pages-curriculum.css — 커리큘럼 허브 + 트랙 4페이지 전용 보조 레이아웃
   대상: curriculum.html / track-explore.html / track-mystery.html /
        track-request.html / track-research.html
   원칙(PAGE_SHELL.md §0):
     1) 컴포넌트는 Seed 레시피 먼저 (action-button / action-chip / badge /
        callout / list-item / link-content). 레시피가 없는 레이아웃만 아래 클래스.
     2) 색은 전부 --seed-color-* 또는 v3.css 별칭(--fg-*, --bg-*, --stroke) 경유.
        하드코딩 색상값 없음.
     3) 간격·라운드·타이포·모션도 Seed 토큰 별칭(--s*, --r*, --t*, --d*) 사용.
   v3.css / v3.js / 다른 페이지 CSS는 건드리지 않음.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 히어로 보조
   -------------------------------------------------------------------------- */

/* 히어로 리드 아래 이어지는 산문 리드 */
.cur-lead { margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   2. 트랙 이동 줄 (허브로 돌아가기 + 형제 트랙 칩)
   -------------------------------------------------------------------------- */

.cur-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  padding-bottom: var(--s10);
}

/* 허브로 돌아가는 링크 — Seed link-content 위 색만 지정 */
.cur-back {
  --seed-box-color: var(--fg-muted);
  gap: var(--s1);
  transition: color var(--d3) var(--ease);
}
.cur-back:hover { --seed-box-color: var(--fg-default); }
/* 스프라이트에 왼쪽 셰브런이 없어 오른쪽 셰브런을 좌우 반전해 사용 */
.cur-back .seed-icon { font-size: 14px; transform: scaleX(-1); }

.cur-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cur-chip { text-decoration: none; transition: background-color var(--d3) var(--ease), color var(--d3) var(--ease); }
.cur-chip:hover { background: var(--seed-color-bg-neutral-weak-pressed); }
.cur-chip[aria-current="page"] {
  background: var(--bg-brand-weak);
  color: var(--fg-brand);
  font-weight: 700;
}
.cur-chip[aria-current="page"]:hover { background: var(--seed-color-bg-brand-weak-pressed); }

@media (max-width: 767px) {
  .cur-nav { padding-bottom: var(--s8); gap: var(--s3); }
}

/* --------------------------------------------------------------------------
   3. 수업 흐름 목록 — Seed list-item 행을 카드 한 장 안에 쌓음
   -------------------------------------------------------------------------- */

.cur-steps {
  --seed-dimension-spacing-x-global-gutter: var(--s6);
  list-style: none;
  margin: 0;
  padding: var(--s2) 0;
  counter-reset: curstep;
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: var(--r5);
}
.cur-steps > li { counter-increment: curstep; }
.cur-steps > li + li { border-top: 1px solid var(--stroke); }
.cur-steps .seed-list-item__root { align-items: flex-start; padding-block: var(--s4); }
.cur-steps .seed-list-item__prefix { padding-top: 2px; }
.cur-steps .seed-list-item__title { white-space: normal; font-size: var(--t5); line-height: 1.65; }

/* 번호 원 — 색은 브랜드 토큰 경유 */
.cur-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--bg-brand-weak);
  color: var(--fg-brand);
  font-family: var(--anton);
  font-size: 15px;
  line-height: 1;
}
.cur-step-n::before { content: counter(curstep); }

@media (max-width: 767px) {
  .cur-steps { --seed-dimension-spacing-x-global-gutter: var(--s5); }
  .cur-steps .seed-list-item__root { padding-block: var(--s3); }
  .cur-step-n { width: 24px; height: 24px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   4. 트랙 카드 4장 (허브)
   -------------------------------------------------------------------------- */

.cur-tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.cur-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s7);
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: var(--r5);
  transition: border-color var(--d3) var(--ease), transform var(--d3) var(--ease);
}
.cur-track:hover { border-color: var(--seed-color-stroke-brand-weak); transform: translateY(-2px); }
.cur-track:active { transform: scale(var(--press-scale)); transition-duration: var(--d-press); }
/* 배지 기본 max-width(108px)가 한글 라벨을 자르지 않도록 해제 */
.cur-track .seed-badge__root { max-width: none; }
.cur-track-t {
  font-size: var(--t8);
  line-height: var(--t8-lh);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-default);
}
.cur-track-d { font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted); }
.cur-track-go {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--s4);
  font-size: 16px;
  color: var(--fg-brand);
  transition: transform var(--d3) var(--ease);
}
.cur-track:hover .cur-track-go { transform: translateX(3px); }

@media (max-width: 767px) {
  .cur-tracks { grid-template-columns: 1fr; }
  .cur-track { padding: var(--s5); }
  .cur-track-t { font-size: var(--t7); line-height: var(--t7-lh); }
}

/* --------------------------------------------------------------------------
   5. 강조 블록 (Seed callout 배치 보정)
   -------------------------------------------------------------------------- */

.cur-callout.seed-callout__root { border-radius: var(--r4); }
.cur-callout .seed-callout__description { display: block; max-width: 48em; line-height: 1.75; }

/* --------------------------------------------------------------------------
   6. 계열 배지 줄 (고등 연구)
   -------------------------------------------------------------------------- */

.cur-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0; }
.cur-badges .seed-badge__root { max-width: none; }

/* --------------------------------------------------------------------------
   7. 본문 안 링크 · 하단 조건 스트립
   -------------------------------------------------------------------------- */

.cur-inline-cta { margin-top: var(--s8); color: var(--fg-muted); font-size: var(--t6); line-height: var(--t6-lh); }
.cur-inline-cta .seed-link-content { --seed-box-color: var(--fg-brand); gap: var(--s1); }
.cur-inline-cta .seed-link-content:hover { --seed-box-color: var(--seed-color-fg-brand-contrast); }
.cur-inline-cta .seed-icon { font-size: 14px; }

.cur-facts { margin-top: var(--s7); }

/* 산문 문단 사이 간격 (page-body 연속과 동일 리듬) */
.cur-prose + .cur-prose { margin-top: var(--s5); }

/* ==================== 실제 수업 사례 6개 ==================== */
.cs-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cs-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1280px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }
.cs-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6);
  border: 1px solid var(--seed-color-stroke-neutral-muted, rgba(255,255,255,.10));
  border-radius: var(--r5, 16px);
  background: var(--seed-color-bg-layer-default, rgba(255,255,255,.02));
}
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cs-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; line-height: 1.4; letter-spacing: .01em;
  color: var(--fg-muted); text-align: right;
}
.cs-unit { font-size: var(--t3); line-height: var(--t3-lh); color: var(--fg-muted); }
.cs-title {
  font-size: var(--t6, 20px); line-height: 1.32; font-weight: 800;
  color: var(--fg-default); margin-top: 2px;
}
.cs-rows { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s3); }
.cs-rows > div { display: grid; gap: 4px; }
.cs-rows dt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--fg-brand, #FB5A1A); text-transform: none;
}
.cs-rows dd { margin: 0; margin-inline-start: 0; font-size: var(--t3); line-height: 1.62;
              color: var(--fg-subtle, var(--fg-muted)); }
.cs-code--ko { font-family: inherit; font-size: var(--t2, 12px); font-weight: 600; letter-spacing: 0; }

/* ==================== 카테고리 핀 크로스페이드 ====================
   큰 트랙 이름이 화면 중앙에 고정된 채, 카드가 그 뒤로 흘러가요.
   진행도에 따라 네 단어가 겹쳐서 교차 페이드돼요. */
.cat { position: relative; }
.cat-pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
  pointer-events: none; z-index: 0;
  margin-bottom: -100svh;   /* 핀이 흐름 높이를 먹지 않게 — 활주로는 .cat-flow 가 만듦 */
}
.cat-word { position: relative; display: grid; place-items: center; width: 100%; }
.cw {
  grid-area: 1 / 1;
  font-family: Anton, Impact, "Arial Narrow", Arial, sans-serif;
  font-weight: 400; letter-spacing: 0.01em; line-height: 1;
  font-size: clamp(56px, 15vw, 190px);
  color: var(--fg-default);
  opacity: 0.07;
  white-space: nowrap;
  will-change: opacity, transform;
}
.cat-flow { position: relative; z-index: 1; }
/* 카드 사이에 스크롤 활주로 — 단어가 바뀔 시간을 벌어요 */
.cat .cur-tracks { gap: var(--s7); }
@media (min-width: 1024px) {
  /* 1열로 세우고 카드 사이를 벌려서 단어가 바뀔 스크롤 거리를 확보해요 */
  .cat .cur-tracks { grid-template-columns: 1fr; gap: 52vh; padding: 18vh 0 26vh; }
  .cat .cur-track { max-width: 560px; }
  .cat .cur-track:nth-child(even) { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cat .cur-tracks { grid-template-columns: 1fr; gap: 40vh; padding: 14vh 0 20vh; }
  .cat .cur-track { max-width: 520px; }
  .cat .cur-track:nth-child(even) { margin-left: auto; }
}
@media (max-width: 767px) {
  .cat .cur-tracks { grid-template-columns: 1fr; gap: 34vh; padding: 12vh 0 18vh; }
}
/* 모션을 끈 사용자: 핀·페이드 없이 정적으로 */
@media (prefers-reduced-motion: reduce) {
  .cat-pin { display: none; }
}
.cat.static .cat-pin { display: none; }
.cat .cur-track { transition: opacity var(--d5, 420ms) var(--ease), transform var(--d5, 420ms) var(--ease); }
@media (min-width: 1024px) {
  .cat .cur-track:not(.is-cur) { opacity: 0.42; }
  .cat .cur-track.is-cur { opacity: 1; }
}