/* ============================================================
   compare.css — 과목 비교 뷰 스타일 (과목 비교 담당 소유)
   tokens.css 변수만 사용한다. 새 색상/폰트/radius 추가 금지.
   모바일 우선(mobile-first) — 카드 그리드는 모바일에서 세로 스택, 태블릿 이상에서 나란히.
   클래스는 전부 .cmp- 프리픽스로 다른 뷰(detail-*, path-*, uni- 등)와 충돌하지 않게 한다.
   .chip/.chip-row/.badge/.btn/.state-card/.skeleton-row/.empty-state/.page-title/.page-desc는
   app.css가 정의한 전역 유틸리티를 그대로 재사용한다(detail.js/search.js/pathways.js와 동일 관례).
   ============================================================ */

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

.cmp-head { margin-bottom: var(--sp-5); }

/* ===== 학교급 탭 ===== */
.cmp-level-section { margin-bottom: var(--sp-5); }
.cmp-level-chips { flex-wrap: wrap; overflow-x: visible; }

/* ===== 과목 검색 + 선택 리스트 ===== */
.cmp-subject-section { margin-bottom: var(--sp-4); }

.cmp-search-input {
  width: 100%; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-strong); font-size: 15px; padding: 0 var(--sp-4);
  margin-bottom: var(--sp-3);
}
.cmp-search-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 58, 107, .15);
}

.cmp-subject-list-wrap { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cmp-subject-list { display: grid; gap: 1px; background: var(--border); }

.cmp-subject-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-4); border: none; background: var(--bg);
  color: var(--text-strong); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.cmp-subject-row:hover:not(:disabled) { background: var(--brand-tint); }
.cmp-subject-row[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.cmp-subject-row:disabled { color: var(--text-muted); cursor: not-allowed; opacity: .55; }
.cmp-subject-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-subject-row-count { flex-shrink: 0; background: var(--surface-2); color: var(--text-muted); }

.cmp-more-btn { height: 36px; padding: 0 var(--sp-4); font-size: 13px; margin: var(--sp-3) 0 0; }
.cmp-empty-inline { color: var(--text-muted); font-size: 13px; margin: var(--sp-3) var(--sp-4); }

/* ===== 선택된 과목 바 ===== */
.cmp-selected-bar { margin: var(--sp-4) 0 var(--sp-6); }
.cmp-selected-hint { color: var(--text-muted); font-size: 13px; margin: 0 0 var(--sp-2); }
.cmp-selected-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cmp-selected-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--brand); color: #fff;
}
.cmp-remove-btn {
  background: transparent; border: none; color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; opacity: .85;
}
.cmp-remove-btn:hover, .cmp-remove-btn:focus-visible { opacity: 1; background: rgba(255, 255, 255, .2); }

/* ===== 비교 결과 영역 ===== */
.cmp-result { margin-top: var(--sp-2); }

/* ===== 카드 그리드 — 모바일: 세로 스택 1열, 태블릿 이상: 나란히(3과목 비교 포함) =====
   모바일 1열은 minmax(0,1fr) 트랙 + 카드 자체 min-width:0(아래 .cmp-card)로 내용이 아무리
   길어도 카드 폭 안에서 줄바꿈되게 한다. 641px 이상은 auto-fit이라 2~3과목 비교 시 자동으로
   나란히 배치되고, 카드 하나당 최소 260px을 못 채우면 자동으로 다음 줄로 접혀 세로 스택된다. */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-8); }
@media (min-width: 641px) { .cmp-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

.cmp-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5); min-width: 0;
}
.cmp-card-error { color: var(--danger); background: var(--danger-tint); border: none; }
.cmp-card-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); min-height: 24px; }
.cmp-card-title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-4); overflow-wrap: anywhere; }

/* ===== 카드 내부 지표(영역 수 · 배움 목표 수 · 세부 주제 수) =====
   grid-template-columns를 맨 1fr로 두면 그리드 아이템의 기본 min-width:auto(내용 기준
   최소폭) 때문에 라벨 텍스트가 길어지는 경우(예: 값이 없어 폴백 텍스트가 그대로 노출되는
   극단 케이스) 카드 폭을 넘어 가로 스크롤이 생긴다(모바일 390px 실측 재현: scrollWidth 485px).
   minmax(0,1fr) + 아이템 min-width:0으로 트랙이 카드 폭 안에서 줄어들 수 있게 한다. */
.cmp-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.cmp-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-stat-value {
  /* ONAE 색 사용 3원칙: 코럴은 "핵심 숫자 하나"에만. 이 카드 안에서 3개 지표(영역/배움 목표/
     세부 주제 수)를 나란히 보여줄 때는 전부 코럴로 켜면 '눈이 가야 할 단 하나' 원칙이 무너지므로
     (2~3개 과목 비교 시 코럴 숫자가 6~9개로 늘어남) 중립 텍스트 색을 쓴다. */
  font-size: 22px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cmp-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; overflow-wrap: anywhere; }

/* ===== 카드 내부 섹션(영역 칩 / 주제 유형 분포) ===== */
.cmp-card-section + .cmp-card-section { margin-top: var(--sp-5); }
.cmp-card-section-title { font-size: 13px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-3); }

.cmp-chip-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cmp-topic-chip {
  height: 30px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-strong);
  font-size: 12.5px; font-weight: 600; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cmp-topic-chip:hover, .cmp-topic-chip:focus-visible { border-color: var(--brand-link); color: var(--brand-link); }

/* ===== 주제 유형 분포 막대 ===== */
.cmp-type-dist { display: grid; gap: var(--sp-2); }
.cmp-type-row { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: var(--sp-2); }
.cmp-type-label { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-type-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.cmp-type-bar-fill { display: block; height: 100%; background: var(--brand-600); border-radius: var(--radius-pill); }
.cmp-type-count { font-size: 12px; color: var(--text-strong); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 공통/차이 주제 섹션 ===== */
.cmp-compare-section { margin-bottom: var(--sp-8); }
.cmp-section-title { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-4); }

.cmp-common-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.cmp-common-item { background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); min-width: 0; }
.cmp-common-label { font-size: 14px; font-weight: 600; color: var(--text-strong); margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }

.cmp-diff-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 641px) { .cmp-diff-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.cmp-diff-col { background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); min-width: 0; }
.cmp-diff-col-title { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-3); overflow-wrap: anywhere; }