/* M2 안동↔서울가락 비교 — 전용 보강 스타일.
 * app.css(admin 판 소유)의 토큰·클래스를 재사용한다 — .card·.price·.btn-ghost·.muted·
 * .empty-state·.search-notice 는 여기서 다시 정의하지 않는다. compare.php 가 top.php
 * 다음에 이 파일을 <link> 한다(m1.css 와 같은 방식, brief-T2-9d).
 * 본문 18px(app.css :root font-size) 상속 · 대비 7:1(--color-text·--color-text-sub 그대로 재사용).
 */

.compare-dates { margin: 4px 0 8px; }
/* 날짜 조각("2026-09-09 확정")이 하이픈에서 줄바꿈되지 않게 한 덩어리로(brief-T2-9d-compare-c #2,
 * trend 화면 `.trend-nowrap` 과 같은 문제 — 같은 이름은 아니고 여기서 새로 정의). */
.compare-nowrap { white-space: nowrap; }
.compare-date-mismatch {
  margin: 0 0 4px;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  /* 🔴 빨강(--tone-up)을 쓰지 않는다 — MASTER §1.4 에서 빨강은 등락 전용이 됐다.
     경고를 빨강으로 칠하면 "값이 올랐다"로 읽힌다. 주황은 채움 전용(§1.3)이라
     글자색은 --color-text 뿐이다. */
  color: var(--color-text, #111);
  background: var(--accent-soft, #FFE0B2);
}

.compare-trade { margin: 0 0 8px; overflow-wrap: anywhere; }
.compare-unit-notice { margin: 0 0 16px; }

/* 등급 칩 11개를 접어 한 줄로 — 400px 캡처에서 첫 카드가 774px 까지 밀렸다
 * (brief-T2-9d-compare-b). JS 없이 <details> 로만 접고 편다.
 * 🔴 compare-b 는 summary 를 display:flex 로만 둬서 브라우저 기본 ▸ 마커가 사라지고 굵은
 * 글자만 남아 "눌리는 것처럼" 안 보였다(메인 400px 재검, compare-c #1). trend 화면의
 * `.trend-grade summary`(테두리 칩 + 끝 ▾/▴)와 같은 모양을 자기 규칙으로 다시 만든다
 * (trend.css 는 고치지 않는다 — 읽기만).
 * 🔴 ▾ 는 순수 장식이다 — 대체 텍스트 없이 `content:" ▾"` 만 쓰면 스크린리더가 "아래쪽
 * 삼각형"을 그대로 읽는다(브리프 틀린 설계 a). CSS Content L3 의 `content: 값 / 대체텍스트`
 * 로 빈 대체 텍스트를 주고, 이 구문을 모르는 브라우저는 그 선언 자체가 무효라 앞의 일반
 * `content:" ▾"` 선언이 그대로 남는다(trend 와 같은 이중 선언 순서). */
.compare-grade-details { margin-bottom: 8px; }
.compare-grade-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min, 48px);
  padding: 0 14px;
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-chip, 10px);
  background: var(--color-card-bg, #fff);
  font-weight: 700;
  cursor: pointer;
}
.compare-grade-details[open] > summary { margin-bottom: 8px; }
.compare-grade-details > summary::after { content: " ▾"; content: " ▾" / ""; margin-left: 4px; }
.compare-grade-details[open] > summary::after { content: " ▴"; content: " ▴" / ""; }

.compare-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-min, 8px);
  margin-bottom: 8px;
}
.compare-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min, 48px);
  min-width: var(--touch-min, 48px);
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
}
.compare-filter-chip[aria-current="true"] {
  border-color: var(--brand-ink, #0F5132);
  color: var(--brand-ink, #0F5132);
  background: var(--brand-soft, #E8F3E9); /* 칩 위 초록 글자 8.215:1 */
  font-weight: 700;
}

/* "품종 전체로 보기"·"품목 상세로 이동" — 캡처 실측 143×28(§7.2 48px 미달), .btn-ghost 만으로는
 * 인라인 <a> 라 min-height 가 안 먹는다. app.css .item-entry-links 를 복사하지 않고 자기 규칙으로. */
.compare-nav-links { display: flex; flex-wrap: wrap; gap: var(--gap-min, 8px); margin: 0 0 16px; }
.compare-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min, 48px);
  padding: 0 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.compare-variety-name { margin: 20px 0 8px; font-size: 1.05rem; }
.compare-variety-name:first-of-type { margin-top: 8px; }

.compare-card-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.compare-card {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-card, 14px);
  padding: 12px 14px;
}
.compare-grade { margin: 0 0 8px; font-weight: 700; }

/* 🔴 문턱은 px 이 아니라 rem 이다 — px 로 두면 루트가 커져도 칸 수가 그대로여서
   칸만 좁아지고 숫자가 자릿수 중간에서 갈린다. 실측(400px): `크게`·`아주 크게` ×
   크게 보기 2개 조합에서 `3,331원/k` / `g`. rem 이면 같은 폭에서 한 칸으로 쌓인다
   (m1.css `.m1-value-grid` 와 같은 장치). 되돌리지 마라. */
.compare-markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 12px;
}
.compare-market-cell { min-width: 0; }
.compare-market-name { display: block; font-weight: 600; color: var(--color-text-sub, #4a4a4a); font-size: 0.9rem; }
/* 🔴 `overflow-wrap: anywhere`(body 상속)를 숫자에서 끊는다 — 이게 없으면 좁은 칸에서
   `3,331원/k` / `g` 로 단위가 쪼개진다(실측, m1.css:139 와 같은 처방). */
.compare-price {
  margin: 2px 0;
  white-space: nowrap;
  overflow-wrap: normal;
}
.compare-qty { margin: 0; font-size: 0.85rem; }
.compare-market-cell-empty .compare-price { font-size: 1rem; }

/* word-break: keep-all — overflow-wrap: anywhere 만 있으면 음절 중간에서 끊긴다
 * ("낮아\n요", 400px 캡처 실측, brief-T2-9d-compare-b). 그래도 overflow-wrap 은 남겨
 * 아주 좁은 화면에서 넘치는 것 자체는 계속 막는다. */
.compare-diff { margin: 10px 0 0; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.compare-ratio { margin: 2px 0 0; font-size: 0.9rem; word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 390px) {
  .compare-markets { gap: 8px; }
  .compare-filter-chip { padding: 0 10px; }
}