/* M4 시세 추이 · M12 경매일 기준 등락 — trend.php 전용 보강 스타일(brief-T2-9d-trend, -b).
 * app.css(admin 판 소유)의 토큰(--color-text·--brand-ink·--touch-min 등)을 재사용하고 여기서 다시 정의하지 않는다.
 * trend.php 가 top.php 다음에 <link> 한다(M1 index.php:83 선례). 규칙 존재는 tests/php/View/Trend/TrendCssTest.php 가 검사한다
 * — 실제 폭(scrollWidth)은 phpunit 이 못 잰다. 메인 캡처가 최종 판정이다.
 *
 * 대비(§7.2 — 본문 7:1, 보조 4.5:1 · MASTER.md §1.2 실측표):
 *   --color-text #111 on 카드 18.883:1 / 바닥 17.474:1 · --color-text-sub #4a4a4a on 카드 8.862:1 / 바닥 8.201:1
 *   --brand-ink #0F5132 on 카드 9.361:1 / 바닥 8.663:1 · 칩 채움 --brand-soft 위 --brand-ink 8.215:1
 *   🔴 색을 직접 쓰지 않는다 — 전부 app.css 토큰이다(MASTER.md §1.1).
 * 🔴 overflow-x:hidden 을 쓰지 않는다(app.css 머리말) — 넘침은 레이아웃으로 없앤다.
 */

/* 한국어 문장 — 음절 중간("경/매")에서 끊지 않되, 긴 덩어리는 넘치지 않게 anywhere 와 짝(brief-T2-9d-trend-b #4).
   URL·코드가 들어가는 요소(링크 href 등)에는 걸지 않는다. */
.trend-title, .trend-sub, .trend-scope, .trend-summary-change, .trend-summary-state,
.trend-axis-note, .trend-legend, .trend-note, .trend-closures, .trend-message, .trend-chart-none {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.trend-nowrap { white-space: nowrap; }

.trend-header { margin-bottom: 12px; }
.trend-title { margin: 0 0 4px; font-size: 1.35rem; color: var(--color-text, #111); }
.trend-sub, .trend-scope { margin: 2px 0; color: var(--color-text-sub, #4a4a4a); }
/* 🔴 기간을 제 줄로(사용자 지시 2026-09-12) — "안동 · 확정 시세" 다음 줄에 날짜가 온다.
   한 문장이던 때는 좁은 폭에서 시장명과 날짜가 뒤섞여 끊겼다. */
.trend-sub-range { display: block; }
.trend-scope { font-weight: 700; }

/* 🔴 밑줄을 쓰지 않는다(사용자 지시 2026-09-12) — 모양은 `app.css` 의 `.nav-text-link,
   .trend-link` 한 곳에서 정한다. 비교 화면의 "품목 상세로 이동"과 **같은 모양**이어야 한다
   ("가격 추이에서는 텍스트, 여기서는 버튼 일괄성이 없음"). 여기서는 여백만 조정한다. */
.trend-link { padding: 0 2px; }
.trend-back { margin: 16px 0 0; }

/* 보기 전환 — GET 링크 칩. 48px 터치, 인접 8px. 차트 아래에 온다(첫 화면은 요약·차트가 먼저) */
.trend-filters { margin: 20px 0 16px; }
/* 🔴 묶음 사이 여백을 칩 사이보다 넓게(사용자 지시 2026-09-12: "일/주/월/년과 안동/서울가락에
   여백 추가 — 다른 항목이므로"). 칩 사이 8px, 묶음 사이 20px 로 2배 이상 벌려
   "같은 줄에 있지만 다른 질문"임이 보이게 한다. */
.trend-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-min, 8px);
  margin-bottom: 20px;
}
.trend-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: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-card-bg, #fff);
  color: var(--color-text, #111);
  font-weight: 700;
  text-decoration: none;
}
/* 현재 보기 — app.css `.item-corp-tabs a[aria-current]` 와 같은 장치(칩 채움) */
.trend-chip[aria-current="page"] {
  border: 2px solid var(--brand-ink, #0F5132);
  color: var(--brand-ink, #0F5132);
  background: var(--brand-soft, #E8F3E9); /* 칩 위 초록 글자 8.215:1 */
}
.trend-note { margin: 0 0 12px; }
.trend-wide { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: var(--gap-min, 8px); }

/* 등급 칩 11개는 접는다 — summary 한 줄(48px)에 현재 등급("등급: 특")이 보인다. JS 없음 */
.trend-grade { margin-bottom: 8px; }
.trend-grade > summary,
.trend-big > 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;
}
.trend-grade[open] > summary { margin-bottom: 8px; }
/* inline-flex 로 바꾸면 브라우저 기본 ▸ 표시가 사라진다 — 열리는 칩이라는 시각 단서를 되살린다(대체 텍스트 "" 로 스크린리더 중복 낭독 방지, 미지원 브라우저는 앞 선언) */
.trend-grade > summary::after, .trend-big > summary::after { content: " ▾"; content: " ▾" / ""; margin-left: 4px; }
.trend-grade[open] > summary::after, .trend-big[open] > summary::after { content: " ▴"; content: " ▴" / ""; }

/* M12 요약 카드 */
.trend-summary-date { margin: 0 0 4px; font-size: 1rem; color: var(--color-text-sub, #4a4a4a); }
/* 🔴 숫자는 `overflow-wrap: anywhere`(body 상속)를 끊고 등폭으로 — 자릿수가 흔들리거나
   단위가 쪼개지면 비교가 안 된다(compare.css 에서 실측된 것과 같은 처방). */
.trend-summary-price {
  margin: 0 0 6px;
  font-size: 1.6rem;                        /* ≈29px ≥ 26 볼드(§7.2) */
  font-weight: 800;
  color: var(--color-text, #111);
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
.trend-summary-change { margin: 0 0 6px; }
/* "바로 전 / 경매일 09-08 대비" 는 공백에서 끊겨 keep-all 로 못 막는다 — 기준 문구를 한 덩어리로 */
.trend-basis { display: inline-block; font-weight: 700; color: var(--color-text, #111); }
.trend-summary-state { margin: 0 0 6px; font-weight: 700; }

/* 차트 — viewBox + width:100%. 고정 픽셀 폭이 없다 */
.trend-section { margin: 20px 0; }
.trend-section h3 { margin: 0 0 8px; }
.trend-count { font-weight: 400; font-size: 1rem; }
/* 🔴 차트도 카드 면 위에 올린다 — 눈금선·눈금 글자가 바닥(--color-bg) 위에 직접 놓이면
   흰 후광(TrendChart::CARD)이 바닥과 어긋나 글자 테두리가 지저분해진다. */
/* 🔴 `max-width: 560px` 을 뺐다(사용자 지적 2026-09-12: "원/kg 추이 카드는 웹에서는 넓이가
   다름") — 넓은 화면에서 이 카드만 좁아 요약·표 카드와 어긋나 보였다. SVG 는 viewBox +
   width:100% 라 폭이 늘어도 비율이 유지된다. */
.trend-chart {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-card, 14px);
  padding: 12px 10px;
}
.trend-svg { display: block; width: 100%; height: auto; }
.trend-axis-note, .trend-legend { margin: 6px 0 0; color: var(--color-text-sub, #4a4a4a); }
.trend-legend { font-weight: 700; color: var(--color-text, #111); }
.trend-chart-none { color: var(--color-text-sub, #4a4a4a); }

/* 표 — 항상 보인다(스크린리더가 추가 조작 없이 읽는다). "큰 글씨 표로 보기"는 <details> 한 번 탭(JS 없음) */
.trend-big p { margin: 6px 0; }
.trend-big[open] + .trend-table-wrap { font-size: 1.35em; }

/* 🔴 표를 감싼 상자가 카드다 — 바닥(--color-bg)이 흰색이 아니라서 이 면이 경계를 만든다
   (MASTER.md §0 "경계를 선이 아니라 색이 만든다"). 표 자체의 규칙은 건드리지 않는다 —
   TrendCssTest 가 `.trend-table th/td` 의 white-space·display 를 고정한다. */
.trend-table-wrap {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-card, 14px);
  padding: 12px 14px;
}
.trend-table { width: 100%; border-collapse: collapse; }
.trend-table caption { text-align: left; padding: 4px 0 8px; color: var(--color-text-sub, #4a4a4a); caption-side: top; word-break: keep-all; }
/* 🔴 app.css:299 전역 `th, td { white-space: nowrap }` 를 이 표에서 푼다 — 실측 넘침 원인(385px 에서 scrollWidth 435).
   7열 데스크톱에서도 등락 문구가 한 줄로 밀리면 main(720px)을 넘는다 */
.trend-table th, .trend-table td {
  white-space: normal;
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-border-soft, #E2E8DE);
  text-align: right;
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.trend-table th[scope="col"], .trend-table th[scope="row"] { text-align: left; }
/* 넓은 화면(진짜 표 모양)에서도 같은 줄무늬 — 7열을 눈이 가로로 따라가려면 줄이 잡혀야 한다 */
.trend-table tbody tr:nth-child(even) { background: var(--color-bg, #F4F7F2); }

/* 좁은 화면(메인 캡처 400px 포함): 한 점 = 촘촘한 줄 흐름.
   09-09(수) 3,869원/kg [▼ 내렸어요 −171원 (−4.2%)]   ← 폭이 모자라면 [등락] 이 통째로 다음 줄
   64,064상자 · 경매일 3일 · 확정 · 77,388원/상자       ← 작게, 항상 새 줄
   셀마다 라벨을 붙이던 카드(점당 ≈270px, 29점 = 7,914px)를 버린다. 값이 단위를 스스로 싣는다(TrendTable).
   실측(격리 headless Chrome): 385px 표 2,382px·행 79/56px·scrollWidth=clientWidth / 360px 도 넘침 0(한 행 101px). */
@media (max-width: 719px) {
  /* 머리행은 시각적으로만 숨긴다 — 스크린리더에는 남긴다(display:none 금지). display:block 이어야 width·overflow·clip 이 상자에 걸린다 */
  .trend-table thead {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .trend-table, .trend-table caption, .trend-table tbody { display: block; width: 100%; }
  /* 실측(385px): 1줄 날짜 80 + 원/kg 93 + 등락 223 ≈ 410px > 행 폭 361px(360px 기기는 ≈336px) — 18px 에서 한 줄에 못 든다.
     등락을 줄이면(▼ −171원) §7.2 3중 표기가 깨지므로 줄이지 않고, 등락은 inline-block 으로 통째로 다음 줄에 보낸다.
     대신 줄 간격을 좁혀 3줄 행 79px, 2줄 행 56px(385px 실측) 로 맞춘다. */
  /* 🔴 가독성(사용자 지적 2026-09-12: "값 표: 가독성 있도록, 너무 나열해놓음").
     선 하나로만 나누던 것을 **줄마다 색을 번갈아** 주고 안쪽 여백을 늘린다 —
     카드(흰 면) 위에서 바닥색(--color-bg)이 그대로 줄무늬가 된다(이미 있는 대비를 쓴다).
     날짜·원/kg 은 이미 굵으니 크기는 건드리지 않는다. */
  .trend-table tr {
    display: block;
    padding: 10px 10px;
    border-bottom: 1px solid var(--color-border-soft, #E2E8DE);
    line-height: 1.45;
    border-radius: var(--radius-chip, 10px);
  }
  .trend-table tbody tr:nth-child(even) { background: var(--color-bg, #F4F7F2); }
  .trend-table tr:last-child { border-bottom: none; }
  .trend-table th[scope="row"], .trend-table td {
    display: inline;
    padding: 0;
    border: 0;
    text-align: left;
    vertical-align: baseline;
  }
  .trend-table th.trend-c-date, .trend-table td.trend-c-kg { font-weight: 700; margin-right: 0.4em; }
  .trend-table td.trend-c-change { display: inline-block; font-weight: 700; }
  .trend-table td.trend-c-box, .trend-table td.trend-c-days,
  .trend-table td.trend-c-final, .trend-table td.trend-c-price {
    font-size: 0.85em; /* 18px × 0.85 ≈ 15.3px — 축소 모드 하한 15px(§7.2) */
    color: var(--color-text-sub, #4a4a4a);
  }
  /* 둘째 줄 시작 — 인라인 흐름 안에서 줄을 바꾼다 */
  .trend-table td.trend-c-box::before { content: "\A"; white-space: pre; }
  .trend-table td.trend-c-days::before, .trend-table td.trend-c-final::before,
  .trend-table td.trend-c-price::before { content: " · "; }
}

.trend-closures ul { margin: 8px 0 0; padding-left: 1.2em; }
.trend-closures p { margin: 0; }