/* =========================================
   2026 F1 점수 기준 가이드 (scoring.css)
   guide.css의 공통 레이아웃(.guide-page / .guide-back-btn / .guide-page-title)에 더해
   이 페이지 전용 스코어 카드·표·아코디언 스타일만 정의한다.
   팔레트는 사이트 공통값을 따른다: 배경 #0a0a0a / #111 / #1a1a1a, 보더 #2a2a2a, 액센트 #dc2626
   ========================================= */

/* =========================================
   Section 1: Hero
   ========================================= */

.scoring-hero {
  margin-bottom: 2.5rem;
}

.scoring-hero-lead {
  color: #ddd;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 46rem;
  margin: 0 0 1rem;
}

/* Hero 핵심 점수 요약 배지 (Section 2의 상위 3개 카드보다 작고 조밀하게 유지) */
.scoring-hero-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 26rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.scoring-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #dc2626;
  border-radius: 0.4rem;
}

.scoring-hero-stat--sprint {
  border-left-color: #6b7280;
}

.scoring-hero-stat-label {
  color: #999;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.scoring-hero-stat-value {
  color: #f5f5f5;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.2;
}

.scoring-hero-stat-value abbr {
  font-size: 0.65rem;
  font-weight: 600;
  color: #888;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.scoring-badge {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid #3a2020;
  border-radius: 999px;
  background-color: rgba(220, 38, 38, 0.12);
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* =========================================
   Section 2: 섹션 공통
   ========================================= */

.scoring-section {
  margin-bottom: 3rem;
}

.scoring-section-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #f5f5f5;
  margin: 0 0 0.5rem;
  padding-left: 0.6rem;
  border-left: 3px solid #dc2626;
  line-height: 1.4;
}

.scoring-section-desc {
  color: #999;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 46rem;
}

.scoring-note {
  color: #888;
  font-size: 0.825rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

/* =========================================
   Section 3: 상위 3개 점수 카드 (교육용 카드)
   ========================================= */

.scoring-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scoring-top-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 0.5rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-top: 3px solid #3a3a3a;
  border-radius: 0.5rem;
  text-align: center;
}

.scoring-top-card--p1 {
  border-top-color: #dc2626;
}

.scoring-top-card--p2 {
  border-top-color: #9ca3af;
}

.scoring-top-card--p3 {
  border-top-color: #92643a;
}

.scoring-top-pos {
  color: #999;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.scoring-top-pts {
  color: #f5f5f5;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
}

.scoring-top-pts abbr {
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* =========================================
   Section 4: 점수 표
   ========================================= */

.scoring-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 0.9rem;
}

.scoring-table caption {
  caption-side: top;
  text-align: left;
  color: #777;
  font-size: 0.8rem;
  padding: 0 0 0.5rem;
}

.scoring-table th,
.scoring-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid #222;
  text-align: left;
}

.scoring-table thead th {
  background-color: #1a1a1a;
  color: #aaa;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scoring-table tbody th {
  color: #ddd;
  font-weight: 600;
  white-space: nowrap;
}

.scoring-table tbody td {
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
}

.scoring-table tbody tr:last-child th,
.scoring-table tbody tr:last-child td {
  border-bottom: none;
}

.scoring-table--example {
  max-width: 30rem;
}

/* 열이 많은 감산 포인트 표만 가로 스크롤 허용 (페이지 전체는 밀리지 않는다) */
.scoring-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scoring-table--wide {
  min-width: 34rem;
}

.scoring-table--wide td {
  text-align: center;
  font-weight: 600;
}

/* =========================================
   Section 4-1: compact score list (레이스·스프린트 포인트)
   [순위 | PTS] 2열 표를 대체한다. 각 행이 "순위 → 점수 PTS" 한 덩어리로 읽히도록
   카드 폭을 제한해 행 중앙의 빈 공간을 줄이고, 행 높이도 표보다 조밀하게 유지한다.
   ========================================= */

/* 기존 <caption> 역할 (목록이 무엇을 나열하는지 설명) */
.scoring-score-caption {
  color: #777;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.scoring-score-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 순위와 점수가 화면 양 끝까지 벌어지지 않도록 카드 폭을 제한한다 */
  max-width: 21rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  overflow: hidden;
}

.scoring-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid #222;
}

.scoring-score-row:last-child {
  border-bottom: none;
}

.scoring-score-pos {
  color: #ddd;
  font-size: 0.9rem;
  font-weight: 600;
}

.scoring-score-pts {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

/* 숫자는 강조, 단위(PTS)는 시각적으로 약하게 */
.scoring-score-value {
  color: #f5f5f5;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.scoring-score-unit {
  color: #888;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* 0점 행: 색상만으로 구분하지 않고 값(0 PTS)을 그대로 표기한다 */
.scoring-score-row--zero {
  background-color: #0e0e0e;
}

.scoring-score-row--zero .scoring-score-pos,
.scoring-score-row--zero .scoring-score-value {
  color: #777;
}

.scoring-score-row--zero .scoring-score-unit {
  color: #666;
}

/* 레이스·스프린트 포인트 2-column 배치 (기본은 1-column, 넓은 화면에서 나란히) */
.scoring-points-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: start;
  margin-bottom: 3rem;
}

.scoring-points-grid > .scoring-section {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  /*
    전체 폭을 카드 크기에 맞게 제한하고 가운데로 모아 컬럼 안 우측 빈 공간을 없앤다.
    트랙은 1fr(유연)이라 768px 경계에서도 가로로 넘치지 않는다(46rem = 컬럼 22rem × 2 + gap 2rem).
  */
  .scoring-points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 46rem;
    margin-inline: auto;
  }

  .scoring-points-grid .scoring-score-list {
    max-width: 100%;
  }

  /* 두 섹션의 설명 줄 수가 달라 목록 시작 높이가 어긋나는 것을 막기 위해 3줄 높이를 예약한다 */
  .scoring-points-grid .scoring-section-desc {
    min-height: 4.5rem;
  }
}

/* =========================================
   Section 5: 최대 점수 계산 카드
   ========================================= */

/* 기본(모바일)은 세로 흐름, 넓은 화면에서 가로 계산식 — .scoring-calc와 동일한 패턴 */
.scoring-formula {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.scoring-formula-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0.75rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  text-align: center;
}

.scoring-formula-card--total {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
}

.scoring-formula-label {
  color: #999;
  font-size: 0.75rem;
  font-weight: 600;
}

.scoring-formula-value {
  color: #f5f5f5;
  font-size: 1.25rem;
  font-weight: bold;
}

.scoring-formula-value abbr {
  font-size: 0.68rem;
  color: #888;
  text-decoration: none;
}

.scoring-formula-op {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
}

/* 데스크톱·태블릿: [카드] + [카드] = [카드] 가로 계산식 */
@media (min-width: 640px) {
  .scoring-formula {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.6rem;
  }
}

/* =========================================
   Section 6: 정보 카드 그리드
   ========================================= */

.scoring-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.scoring-card {
  padding: 1.1rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
}

.scoring-card--accent {
  border-left: 3px solid #dc2626;
}

.scoring-card-title {
  font-size: 1rem;
  font-weight: bold;
  color: #f5f5f5;
  margin: 0 0 0.4rem;
}

.scoring-card-verdict {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #3a3a3a;
  border-radius: 0.25rem;
  background-color: #1a1a1a;
  color: #bbb;
  font-size: 0.75rem;
  font-weight: 600;
}

.scoring-card--none .scoring-card-verdict {
  border-color: #3a2020;
  color: #f87171;
}

.scoring-card-desc {
  color: #bbb;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* =========================================
   Section 7: 가상 예시 블록 / 내부 링크
   ========================================= */

.scoring-example {
  padding: 1.1rem;
  background-color: #0e0e0e;
  border: 1px dashed #333;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.scoring-example-caption {
  color: #888;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.scoring-example .scoring-table {
  margin-bottom: 1rem;
}

/* 드라이버 점수 합산 계산식 시각화 (25 + 12 = 37) */
.scoring-calc {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.scoring-calc-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.75rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  text-align: center;
}

.scoring-calc-card--total {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
}

.scoring-calc-name {
  color: #ddd;
  font-size: 0.825rem;
  font-weight: 600;
}

.scoring-calc-pos {
  color: #999;
  font-size: 0.75rem;
}

.scoring-calc-pts {
  color: #f5f5f5;
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.2;
}

.scoring-calc-pts abbr {
  font-size: 0.68rem;
  font-weight: 600;
  color: #888;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.scoring-calc-op {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1;
}

/* 데스크톱: [카드] + [카드] = [카드] 가로 계산식 */
@media (min-width: 640px) {
  .scoring-calc {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.6rem;
  }
}

/* 가상 결과 표와 설명 카드를 넓은 화면에서 나란히 배치해 세로 길이를 줄인다 */
.scoring-example-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

.scoring-example-detail .scoring-table--example {
  max-width: 100%;
}

@media (min-width: 900px) {
  .scoring-example-detail {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
  }

  .scoring-example-detail .scoring-table {
    margin-bottom: 0;
  }

  .scoring-example-detail .scoring-card-grid {
    grid-template-columns: 1fr;
  }
}

.scoring-inline-link {
  display: inline-block;
  color: #f87171;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.2s;
}

.scoring-inline-link:hover,
.scoring-inline-link:focus-visible {
  color: #fca5a5;
  text-decoration: underline;
}

/* =========================================
   Section 8: CTA 카드
   ========================================= */

.scoring-cta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #dc2626;
  border-radius: 0.5rem;
}

.scoring-cta-text {
  color: #ddd;
  font-size: 0.925rem;
  line-height: 1.7;
  margin: 0;
}

.scoring-cta-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  background-color: #dc2626;
  border-radius: 0.4rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s;
}

.scoring-cta-btn:hover,
.scoring-cta-btn:focus-visible {
  background-color: #b91c1c;
}

/* =========================================
   Section 9: details/summary 아코디언 (네이티브)
   ========================================= */

.scoring-details {
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.scoring-details > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.85rem 1rem;
  color: #f5f5f5;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.scoring-details > summary::-webkit-details-marker {
  display: none;
}

.scoring-details > summary::after {
  content: '+';
  margin-left: auto;
  color: #dc2626;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
}

.scoring-details[open] > summary::after {
  content: '−';
}

.scoring-details[open] > summary {
  border-bottom: 1px solid #222;
}

.scoring-details > summary:hover {
  background-color: #161616;
}

.scoring-details > summary:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: -2px;
}

.scoring-details-body {
  padding: 1rem;
}

.scoring-details-body p {
  color: #bbb;
  font-size: 0.875rem;
  line-height: 1.75;
  margin: 0 0 0.85rem;
}

.scoring-details-body p:last-child {
  margin-bottom: 0;
}

.scoring-details-subtitle {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ddd;
  margin: 1.25rem 0 0.5rem;
}

/* =========================================
   Section 10: 관련 용어 칩
   ========================================= */

.scoring-term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scoring-term-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  color: #ddd;
  font-size: 0.825rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.scoring-term-chip:hover,
.scoring-term-chip:focus-visible {
  border-color: #dc2626;
  color: #fff;
}

/* =========================================
   Section 11: 출처 영역
   ========================================= */

.scoring-source {
  padding-top: 1.5rem;
  border-top: 1px solid #222;
}

.scoring-source-title {
  font-size: 0.925rem;
  font-weight: bold;
  color: #aaa;
  margin: 0 0 0.6rem;
}

.scoring-source p {
  color: #888;
  font-size: 0.825rem;
  line-height: 1.7;
  margin: 0 0 0.6rem;
  max-width: 46rem;
}

.scoring-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.scoring-source-meta a {
  color: #999;
  text-decoration: underline;
}

.scoring-source-meta a:hover,
.scoring-source-meta a:focus-visible {
  color: #f5f5f5;
}

/* =========================================
   Section 12: 모바일 대응 (최소 360px 보장)
   ========================================= */

@media (max-width: 520px) {
  /*
    scoring 페이지 전용 좌우 여백 보정: 공통 .container(1rem)에 소량만 더해 약 20px를 확보한다.
    이 스타일시트는 /guide/scoring 에서만 로드되므로 다른 페이지 레이아웃에는 영향이 없다.
  */
  .guide-page {
    padding-inline: 0.25rem;
  }

  .scoring-hero-lead {
    font-size: 0.925rem;
  }

  /* 360px에서도 2열 유지가 가능하도록 패딩·값 폰트만 축소 */
  .scoring-hero-summary {
    gap: 0.4rem;
  }

  .scoring-hero-stat {
    padding: 0.55rem 0.6rem;
  }

  .scoring-hero-stat-value {
    font-size: 1rem;
  }

  .scoring-calc-pts {
    font-size: 1.2rem;
  }

  .scoring-section {
    margin-bottom: 2.25rem;
  }

  .scoring-section-title {
    font-size: 1.1rem;
  }

  .scoring-top-pts {
    font-size: 1.25rem;
  }

  .scoring-top-card {
    padding: 1rem 0.35rem;
  }

  .scoring-table--example {
    max-width: 100%;
  }

  .scoring-table {
    font-size: 0.85rem;
  }

  .scoring-table th,
  .scoring-table td {
    padding: 0.55rem 0.6rem;
  }

  /* score list: 정보 표시 목록이므로 행 높이를 조금 더 조밀하게 유지 */
  .scoring-score-row {
    padding: 0.6rem 0.8rem;
    line-height: 1.25;
  }

  .scoring-score-pos {
    font-size: 0.875rem;
  }

  .scoring-score-value {
    font-size: 1.05rem;
  }

  .scoring-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 과도한 애니메이션 없음 (transition만 사용) — 모션 최소화 환경에서도 정지 */
@media (prefers-reduced-motion: reduce) {
  .scoring-inline-link,
  .scoring-cta-btn,
  .scoring-term-chip {
    transition: none;
  }
}