/* =============================================================================
   disciplines.css — 종목안내 페이지 전용 (앵커 네비 · 종목 상세)
   역할: disciplines/index.html 레이아웃.
   의존: tokens/base/components 이후 로드.
   주의: 앵커 이동 시 고정 네비에 제목이 가리지 않도록 scroll-margin을 쓴다.
   ========================================================================== */

/* ===== 앵커 네비 — 헤더(80px) 아래 sticky ===== */
.anchor-nav {
  position: sticky;
  top: 80px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}
.anchor-nav .container { display: flex; gap: var(--sp-2); overflow-x: auto; }
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 56px; /* 터치 영역 44px 이상 + 여유 */
  padding-inline: var(--sp-2);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.anchor-nav a:hover { color: var(--wine); border-bottom-color: var(--wine); }

/* 앵커 착지점 — 헤더 80px + 네비 56px + 여유 */
.discipline-detail { scroll-margin-top: 152px; }

/* ===== 종목 상세 ===== */
.detail-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--sp-8);
  align-items: center;
}
.detail-grid--flip figure { order: 2; } /* 좌우 교차 */
.detail-grid figure { aspect-ratio: 3 / 2; position: relative; }
.detail-grid figure::after { content: ''; position: absolute; inset: 0; background: var(--duotone); opacity: 0.5; }
.detail-mark { display: block; font-size: var(--fs-4); margin-bottom: var(--sp-1); }
.detail-grid h2 { font-size: var(--fs-5); }
.detail-grid .hairline { margin-inline: 0; max-width: 160px; }
.detail-grid p { color: var(--ink-soft); margin-bottom: var(--sp-3); }

/* 팩트 리스트 — 라벨(골드) + 값 2열 */
.fact-list li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2);
}
.fact-list li:last-child { border-bottom: 1px solid var(--line); }
.fact-list strong {
  color: var(--gold);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-top: 5px; /* 본문 첫 줄과 시각적 베이스라인 맞춤 */
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .anchor-nav { top: 64px; } /* 모바일 헤더 높이 */
  .discipline-detail { scroll-margin-top: 128px; }
  .detail-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .detail-grid--flip figure { order: 0; }
}