/* M1 오늘의 시세 — 오늘·확정 탭 전용 보강 스타일. docs/MASTER.md v1.0 를 따른다.
 * app.css 의 토큰·클래스를 재사용한다 — .card·.price·.btn·.tabs·.tablewrap 은 여기서
 * 다시 정의하지 않는다. index.php 가 top.php 다음에 이 파일을 <link> 한다.
 *
 * 🔴 이 파일의 가장 작은 글자는 `0.85rem` 이다(= 가장 작은 루트 112.5% 에서 15.3px).
 *    `MinFontSizeCssTest` 가 app.css·m1.css·source.css 의 선언을 전수로 훑어 15px 하한을
 *    지킨다 — 0.85rem 아래로 내려가는 선언을 새로 넣지 않는다.
 * 🔴 클래스 이름을 함부로 바꾸지 않는다. app.css 의 `html.density-compact .m1-*` 규칙이
 *    이 이름들을 겨냥하고 있어서, 이름만 바꾸면 "한눈에 보기"가 조용히 깨진다.
 */

/* ══ 꺾쇠 — 글자가 아니라 그림이다 (2026-09-18 사용자 지적) ═══════════
 * 사용자 원문: "화살표는 기기에 따라 다르게 보이고 있어, 일괄성 있는 표시로 해줘.
 * 품종에 > 도 함께 수정해줘."
 *
 * 🔴 `›`(U+203A)는 **글꼴이 그린다.** 한글 글꼴 스택은 기기마다 다르므로
 *    (Apple SD Gothic Neo / One UI / Noto Sans KR / 웹폰트 실패 시 시스템 폴백)
 *    같은 글자가 가는 따옴표처럼도, 굵은 꺾쇠처럼도 보인다. 그래서 글자를 버리고
 *    **마스크 SVG** 로 그린다 — 어느 기기든 같은 모양이다.
 * 🔴 색은 `background-color` 라 토큰(`--brand-ink`)을 그대로 쓴다 — 마스크는 알파만
 *    보므로 SVG 안의 `stroke='black'` 은 색이 아니다(토큰 규칙 위반 아님).
 * 🔴 크기는 `rem` 이다. 세 자리의 부모 글자 크기가 서로 다르므로(접힘줄 0.9rem ·
 *    품종명 1.05rem) `em` 으로 주면 세 꺾쇠가 제각각 다른 크기가 된다 — 없애려는
 *    불일치 그 자체다.
 * 🔴 폭을 옛 글자에 맞췄다 — `›` 의 실제 advance 폭 6.53px vs 새 그림 7.55px
 *    (393x852 · 루트 18px 실측). 접힘줄은 이미 폴드(717) 경계라 폭이 늘면 글줄이
 *    늘어 세로로 밀린다(개발TASK.md §10.17). 실서버 393x852 **6조합 전부** y 좌표
 *    무변화 확인(§10.26 ②).
 */
/* 🔴 토큰(`--chev-mask`·`--chev-w`·`--chev-h`)은 **`app.css` `:root` 에 있다.**
   여기 두면 안 된다 — 같은 꺾쇠를 쓰는 `.item-spec-minmax-summary`(품목 상세, 한눈에
   보기)가 `app.css` 에 있는데 그 화면은 `m1.css` 를 **안 읽는다**(`item.php` 는
   app+m7 만 link 한다). 토큰이 없으면 `mask-image` 가 통째로 죽어 **초록 사각형**이
   남는다 — 에러 없이. docs/MASTER.md §1.1 대로 토큰은 app.css 한 곳에서만 정의한다. */
.m1-variety-go,
.m1-item-go,
.m1-settled-item-go,
.m1-settled-variety-go,
.m1-item-fold-summary::after,
.m1-rows-summary::after {
  flex: none;
  display: inline-block;          /* inline 에는 transform 이 안 먹는다 */
  width: var(--chev-w);
  height: var(--chev-h);
  background-color: var(--brand-ink, #0F5132);
  -webkit-mask-image: var(--chev-mask);
          mask-image: var(--chev-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ══ 시장 전환 — 채움 세그먼트(docs/MASTER.md §4.1) ═══════════════════
 * 🔴 예전에는 시장(안동·가락)과 기간 탭(오늘·확정)이 **똑같이 생긴 테두리 알약 4개**여서
 *    서로 다른 두 축이 한 덩어리로 보였다(사용자 지적). 두 장치를 갈랐다 —
 *    시장은 한 그릇 안에 붙은 칸이고 선택된 칸만 채워진다("어디"),
 *    기간은 주황 밑줄 + 부제다("무엇", app.css `.tabs`).
 */
.m1-market-switch {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
  padding: 4px;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-pill, 999px);
}
.btn-market {
  flex: 1 1 0;
  min-width: 0;                       /* flex 기본 auto 면 긴 라벨이 그릇을 밀어낸다 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 🔴 48px 규칙(ACC-B1)은 칸 **자체**가 지킨다. 한때 44 로 줄이고 "그릇 패딩 8 을 더하면
     52" 라고 넘어가려 했는데, 그건 그릇의 높이지 링크의 히트영역이 아니다. 폴드 4px 아끼자고
     접근성 보장을 깎지 않는다. */
  min-height: var(--touch-min, 48px);
  padding: 0 12px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  font-weight: 700;
  color: var(--color-text, #111);
  transition: background-color var(--dur-fast, 140ms) var(--ease, ease),
              color var(--dur-fast, 140ms) var(--ease, ease),
              transform var(--dur-fast, 140ms) var(--ease, ease);
}
.btn-market:hover { background: var(--brand-soft, #E8F3E9); color: var(--brand-ink, #0F5132); }
.btn-market:active { transform: scale(0.985); }
/* 🔴 선택 칸은 **채운다**. 흰 글자 on #0F5132 = 9.361:1(AAA, 실측). */
.btn-market[aria-current="page"] {
  background: var(--brand-ink, #0F5132);
  color: var(--brand-on-ink, #fff);
}
.btn-market[aria-current="page"]:hover {
  background: #0B3F27;                /* 더 어둡게만 간다 — 밝히면 흰 글자 대비가 내려간다 */
  color: var(--brand-on-ink, #fff);
}
/* 🔴 채움만으로 알리지 않는다 — 색각 이상에서도 보이는 점 표식을 같이 둔다
   (WCAG 1.4.1). `aria-current` 는 보조 기술 쪽 몫이라 이것과 별개로 남는다. */
.btn-market-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-fill, #F57C00);
}
.btn-market-label { min-width: 0; overflow-wrap: anywhere; }

/* "더 보기" 버튼 — `.day-nav a` 의 흰 배경이 `.btn` 을 덮어써 "흰 글자 on 흰 배경"이 됐던
   회귀 때문에 페이지 전용 클래스로 분리해 둔 것이다. 그대로 유지한다. */
.m1-more { display: flex; justify-content: center; margin: 16px 0; }

/* ══ 품목 카드 — 4층(docs/MASTER.md §4.3) ═══════════════════════════
 * 🔴 구조가 바뀌었다. 예전에는 카드 전체가 `<details>` 였고 접힌 줄이
 *    `사과 · 품종 13개 · 거래 48,909상자 · 150원/kg~8,500원/kg` **한 줄**이었다.
 *    지금은 값이 **항상** 보이고 품종 목록만 접힌다 — 펼친 품목 하나가 아니라
 *    모든 품목이 제 숫자를 보여준다.
 */
.m1-item-list { display: flex; flex-direction: column; gap: 10px; }

.m1-item {
  display: block;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-card, 14px);
}
/* 🔴 그림자는 첫 품목 하나에만. 전부에 주면 "떠 있는 것"이 기준을 잃고 위계가 평평해진다. */
.m1-item.is-lead {
  border-color: var(--color-border-lead, #C3CFBE);
  box-shadow: var(--shadow-lead, 0 1px 2px rgba(22,24,15,.06));
}

/* 1~3층 — 늘 보이는 값 덩어리. 클래스 이름은 app.css 의 density 규칙이 겨냥하므로 유지한다. */
.m1-item-summary { padding: 10px 14px 0; }

/* 1층 주제 */
.m1-item-title {
  margin: 0;
  /* 히트영역 오버레이(`.m1-item-link::before`)의 기준 상자 — 아래 링크 묶음 주석 참조. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* 주황은 채움 전용이다(흰 바탕 2.704:1 — 글자로 못 쓴다). 여기서는 품목의 표식 노릇만 한다. */
.m1-item-pip {
  width: 9px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  background: var(--accent-fill, #F57C00);
}


/* ══ 품목명 링크 — 첫화면에서 품목 상세(M3)로 ═════════════════════════
 * 사용자 지시 2026-09-18: "첫화면 품목명에 품목 상세링크 추가해줘. 사과, 배 선택시".
 * 오늘 탭 제목(`h2.m1-item-title`)과 확정 탭 품목 머리(`h3.m1-settled-item-name`)가
 * 같은 부품을 쓴다 — 품종명 링크(`.m1-variety-link`)와도 꺾쇠·글자색·밑줄 규칙이 같다.
 *
 * 🔴 **`min-height: var(--touch-min)` 을 쓰지 않는다** — 품종명 링크와 다른 유일한 점이고,
 *    그게 이 규칙이 따로 존재하는 이유다. 제목 줄은 글줄 높이가 약 27px(루트 16px)인데
 *    앵커에 48px 를 주면 줄이 그만큼 자라 **카드마다 +21px**. 첫화면은 폴드 717
 *    (`.ad-slot` 135px, §10.17) 경계에서 y 좌표를 픽셀 단위로 맞춰 둔 화면이라
 *    (§10.26 "6조합 전부 y 좌표 무변화") 그 증가가 곧 UI-02 결정 A 위반이다.
 * ⇒ 히트영역은 **흐름 밖 `::before` 오버레이**다. 레이아웃 높이 0, 글자 크기가 어떻든
 *    (`아주 크게` 루트 24px 포함) 정확히 `--touch-min`. 세로 padding + 음수 margin 으로
 *    상쇄하는 방법은 상쇄값이 고정 px 이라 일부 조합에서만 중립이 된다 — 쓰지 않는다.
 * 🔴 오버레이가 줄 **전체 폭**(pip 포함)을 덮는 것은 의도다 — 품목명 글자만 노리지 않아도
 *    눌린다. 아래위로 약 10px 씩 삐져나가는 자리는 카드 패딩과 값 블록의 여백이라
 *    누를 것이 없다(`.m1-stats` 는 링크가 아니다).
 * `ItemTitleLinkCssTest` 가 이 네 가지를 전부 감시한다 — 되돌리기 전에 위 주석을 읽어라.
 */
/* 🔴 `.m1-settled-variety-link`(확정 탭 품종명, 2026-09-19)도 여기서 받는다 — 품목명 둘과
   같은 부품이어야 한다. 오늘 탭 품종명(`.m1-variety-link`)은 일부러 빠져 있다: 그쪽은
   품종 블록 안의 flex 줄이라 `min-height: 48px` 가 줄 높이를 키우지 않는다. */
.m1-item-link,
.m1-settled-item-link,
.m1-settled-variety-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--color-text, #111);
  text-decoration: none;
}
.m1-item-link::before,
.m1-settled-item-link::before,
.m1-settled-variety-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--touch-min, 48px);
  transform: translateY(-50%);
}
/* 긴 품목명(`미상(품목코드 …)`)이 가로로 비어져 나가지 않게 — 잘라 숨기지 않고
   레이아웃으로 없앤다는 app.css 규칙과 같다. */
.m1-item-label,
.m1-settled-item-label,
.m1-settled-variety-label { min-width: 0; overflow-wrap: anywhere; }
/* 🔴 확정 탭 품종명만 **제목 색을 물려받는다** — `h4` 가 이미 `--brand-ink`(초록)인데
   링크가 되면서 그 줄만 검정으로 바뀌면 "왜 이 줄만 색이 빠졌지"가 된다.
   구조(48px 오버레이·밑줄 자리)는 위 묶음에서 그대로 받고 **색만** 뺀다. */
.m1-settled-variety-link { color: inherit; }
/* 🔴 밑줄은 **라벨에만** — 앵커에 걸면 sr-only 글자와 꺾쇠까지 선이 지나간다. */
.m1-item-link:hover .m1-item-label,
.m1-item-link:focus-visible .m1-item-label,
.m1-settled-item-link:hover .m1-settled-item-label,
.m1-settled-item-link:focus-visible .m1-settled-item-label { text-decoration: underline; }
.m1-settled-variety-link:hover .m1-settled-variety-label,
.m1-settled-variety-link:focus-visible .m1-settled-variety-label { text-decoration: underline; }

/* 2층 값 — 🔴 사용자가 먼저 보고 싶다고 한 두 숫자. 품목명보다 크다.
 * 🔴 최소 폭을 **rem** 으로 준다(px 아님). px 로 주면 글자만 커지고 칸 수는 그대로라
 *    `아주 크게`(루트 24px)에서 `71,136` 이 `71,1` / `36` 으로 **자릿수 한가운데서 갈렸다**
 *    — 360px × fs-l/fs-xl 에서 45개 요소 실측(2026-09-12). rem 이면 문턱이 글자와 같이
 *    커져서 안 들어가는 순간 자동으로 한 칸(세로 배치)이 된다. */
.m1-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 6px 10px;
  margin: 7px 0 0;
}
.m1-stat { margin: 0; display: flex; flex-direction: column; }
.m1-stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  /* 🔴 자릿수가 흔들리면 값끼리 비교가 안 된다 */
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 3px;
  /* 🔴 `overflow-wrap: anywhere`(body 상속)를 여기서 끊는다 — 숫자는 어떤 폭에서도
     자릿수 중간에서 갈리면 안 된다. 안 들어가면 위 그리드가 칸을 줄여 세로로 내려간다. */
  white-space: nowrap;
  overflow-wrap: normal;
}
.m1-stat-unit { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
.m1-stat-label { font-size: 0.85rem; color: var(--color-text-sub, #4a4a4a); line-height: 1.3; margin-top: 1px; }
/* 최고 평균만 초록 — 카드에서 "가장 비싼 값"이 어디인지 한 점으로 찍는다. 9.361:1 */
.m1-stat-hi .m1-stat-value { color: var(--brand-ink, #0F5132); }

/* 3층 분포 — 0~최고 축. 축을 구간 자체로 잡으면 어느 품목이든 꽉 차서 아무 말도 못 한다. */
.m1-dist { margin-top: 8px; }
.m1-dist-track {
  display: block;
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg, #F4F7F2);
  overflow: hidden;
}
.m1-dist-span {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(90deg, var(--brand-mid, #9CCFAE), var(--brand-ink, #0F5132));
}
.m1-dist-scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--color-text-sub, #4a4a4a);
  font-variant-numeric: tabular-nums;
}
.m1-dist-low, .m1-dist-high { min-width: 0; }
.m1-dist-high { text-align: right; }

/* 4층 접기 — 접힌 줄이 "더 보기"가 아니라 **접힌 것이 무엇인지** 말한다.
   사용자가 "크게 부각되지 않아도" 된다고 한 품종 수가 여기 앉는다(지우지는 않는다). */
.m1-item-fold { margin-top: 7px; border-top: 1px solid var(--color-border-soft, #E2E8DE); }
.m1-item-fold-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-min, 48px);
  padding: 0 14px;
  /* 카드(`.m1-item`)의 둥근 밑변 — hover 바탕이 테두리 밖으로 비어지지 않게. */
  border-radius: 0 0 var(--radius-card, 14px) var(--radius-card, 14px);
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-ink, #0F5132);
  overflow-wrap: anywhere;
  transition: background var(--dur-fast, 140ms) var(--ease, ease);
}
.m1-item-fold-summary::-webkit-details-marker { display: none; }
/* 🔴 마커는 **오른쪽 끝의 꺾쇠**다 — 품종명 링크의 꺾쇠(`.m1-variety-go`)와 **같은
   규칙**에서 모양·크기·색을 받는다(파일 머리의 꺾쇠 묶음) — 한쪽만 바꿀 수 없다.
   사용자 지적(2026-09-18): "품종 16개 앞에 블릿, 법인·규격 앞에 작은 블릿은 그냥
   범례로 볼 수가 있어, 클릭을 유도하지 않아 사용자가 하위 내용을 확인하지 못함".
   왼쪽 `▸` 는 **글머리표**로 읽히고, 0.9rem 을 상속받아 실제로 작았다. 오른쪽 꺾쇠는
   사용자가 이미 "누르면 된다"고 읽어낸 `홍로 ›` 와 같은 신호다.
   🔴 `::before` 를 **옮긴** 것이지 더한 것이 아니다 — flex 항목 수도 gap 수도 그대로라
   가로 폭을 더 먹지 않는다. 접힘줄은 이미 폴드 717 을 넘는 자리라(§10.17) 폭이 늘면
   글줄이 늘어 세로로 밀린다. 새 그림은 옛 글자보다 1.02px 넓고, y 좌표는 그대로다. */
.m1-item-fold-summary::after {
  content: "";   /* 모양은 위 꺾쇠 묶음의 마스크가 그린다. 읽힐 글자는 없다 — <summary> 가 이미 펼침 상태를 알린다 */
  margin-left: auto;
  transition: transform var(--dur-fast, 140ms) var(--ease, ease);
}
/* 펼쳐지면 90도 돌아 아래를 가리킨다 — 품종명의 이동 꺾쇠는 절대 돌지 않으므로
   같은 모양이라도 "열기"와 "가기"가 갈린다. */
.m1-item-fold[open] > .m1-item-fold-summary::after { transform: rotate(90deg); }
/* 🔴 hover 바닥은 카드 밑변을 따라 둥글게 — 접혀 있을 때 이 줄이 `.m1-item`(14px)의
   마지막 요소라 각진 바탕이 둥근 테두리 밖으로 비어져 보인다. 펼쳐지면 아래에 몸통이
   이어지므로 다시 0 으로 돌린다(`.m1-rows[open]` 과 같은 규칙). */
.m1-item-fold[open] > .m1-item-fold-summary { border-radius: 0; }
.m1-item-fold-summary:hover { background: var(--brand-soft, #E8F3E9); }
/* 🔴 `flex-wrap: wrap` 을 쓰지 않는다 — flex 는 줄이기보다 줄 나누기를 먼저 해서
   마커만 있는 빈 줄이 생긴다(홈에서 카드마다 23.5px 씩 붙어 폴드를 넘겼던 회귀). */
.m1-item-fold-text { flex: 1 1 auto; min-width: 0; }
.m1-item-body { padding: 0 10px 10px; }

/* ══ 품종 — 카드 안의 한 단 더 들어간 바닥색 블록 ═══════════════════
 * 흰 카드 > 바닥색 품종 > 흰 요약줄 로 3단이 눈에 보인다.
 */
.m1-variety {
  background: var(--color-bg, #F4F7F2);
  border-radius: var(--radius-inner, 11px);
  padding: 8px 10px 9px;
  margin-top: 7px;
}
.m1-variety-head {
  display: flex;
  align-items: center;
  gap: var(--gap-min, 8px);
  min-height: var(--touch-min, 48px);
}
/* 🔴 `flex: 1 1 auto` 로 두면 이름 상자가 줄을 가득 채우고, 그 안의 `space-between` 이
   꺾쇠를 **이름 상자의 오른쪽 끝 = 물량 칩 바로 앞**으로 보낸다. 실제로 `홍로 › 물량 77%`
   로 렌더됐다(실측). 이름은 글자 폭만 갖고, 남는 자리는 칩이 `margin-left:auto` 로 먹는다. */
.m1-variety-name { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 0 1 auto; min-width: 0; }
.m1-variety-link {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch-min, 48px);
  color: var(--color-text, #111);
  text-decoration: none;
}
.m1-variety-link:hover .m1-variety-label,
.m1-variety-link:focus-visible .m1-variety-label { text-decoration: underline; }
/* 긴 품종명(예: `미상(품종코드 …)`)이 flex 기본 min-width:auto 때문에 가로로 비어져
   나가지 않게 한다 — app.css 는 `overflow-x:hidden` 을 쓰지 않는다(잘라 숨기지 않고
   레이아웃으로 없앤다는 규칙). */
.m1-variety-label { min-width: 0; overflow-wrap: anywhere; }
/* `.m1-variety-go` 의 모양·크기·색은 위 꺾쇠 묶음에 있다 — 접힘줄 둘과 **한 규칙**이라
   한쪽만 바뀔 수 없다(그게 사용자가 짚은 대비를 지키는 방법이다, MASTER.md §4.12). */
/* 칩은 줄의 오른쪽 끝으로. 링크의 꺾쇠는 이름 바로 뒤에 붙어 "여기를 누르면 간다"를 말한다. */
/* 물량 비중 — "품종이 몇 개인지"보다 "어느 품종이 주력인지"가 쓸모 있다. 8.215:1 */
.m1-variety-share {
  flex: none;
  margin-left: auto;
  white-space: nowrap;          /* `물량 77%` 가 `물량` / `77%` 로 갈리지 않게 */
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-ink, #0F5132);
  background: var(--brand-soft, #E8F3E9);
  border-radius: var(--radius-pill, 999px);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* ══ 등급 참고선 — 🔴 숫자 먼저, 출처는 줄바꿈 뒤 ══════════════════
 * 사용자 지시 원문: "품종에도 홍로의 특, 상, 중 값으로 경매되었는데, 그 날이 9-10일
 * 자료다 라고 줄바꿈 되도록 해줘."
 * 예전에는 `직전 확정일(09-10) 경매 기준 · 특 4,716원/kg · …` 한 줄이라 출처가 숫자를
 * 가로막았고, 숫자마다 `원/kg` 이 붙어 세 줄로 접혔다. 단위는 이제 아래 한 번만 적는다.
 * 🔴 "직전 확정일 기준"이라는 성격과 기준일·거래구분 표기는 지우지 않는다(확정된 설계).
 *    자리와 크기만 바뀌었다.
 */
.m1-grade-line {
  display: block;
  margin: 0;
  padding: 8px 10px 9px;
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border-soft, #E2E8DE);
  border-radius: var(--radius-chip, 10px);
  overflow-wrap: anywhere;
}
/* 참고선이 없을 때는 한 줄 문단 그대로다 — 빈 상자를 그리지 않는다. */
.m1-grade-line-empty {
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-sub, #4a4a4a);
}
/* 🔴 등급 3칸도 같은 이유로 rem 문턱이다 — 루트가 커지면 3칸 -> 2칸 -> 1칸으로 내려간다. */
.m1-grade-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.7rem, 1fr));
  gap: 9px;
}
.m1-grade { display: flex; flex-direction: column; min-width: 0; }
.m1-grade-value {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #111);
  white-space: nowrap;          /* 등급값도 자릿수 중간에서 안 갈린다 */
  overflow-wrap: normal;
}
.m1-grade-key { font-size: 0.85rem; font-weight: 700; color: var(--color-text-sub, #4a4a4a); }
/* 막대는 서로의 비율이다(최고 등급 = 100%). 같은 값의 다른 표현이라 aria-hidden 이고,
   `.m1-grade-value` 가 이미 숫자를 읽어 준다 — 스크린리더에 두 번 읽히지 않는다. */
.m1-grade-bar {
  display: block;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--color-bg, #F4F7F2);
  overflow: hidden;
}
.m1-grade-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brand-ink, #0F5132);
}
/* 🔴 출처는 줄바꿈 뒤, 작게. 앞으로 되돌리지 않는다. */
.m1-grade-src {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border-soft, #E2E8DE);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--color-text-sub, #4a4a4a);
}

/* ══ 행 목록 — 기본 접힘 ════════════════════════════════════════════
 * 🔴 접힌 줄이 "더 보기"가 아니라 건수 + 대표 수치를 보여 준다. 실서버에서 행 목록은
 *    675px(가락 샤인마스캇은 2,472px)였다 — 펼쳐 두면 폴드가 통째로 잠긴다.
 */
.m1-rows { margin-top: 7px; }
.m1-rows-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  /* 🔴 `flex-wrap: wrap` 을 쓰지 않는다. flex 는 **줄 나누기를 줄이기(shrink)보다 먼저** 한다 —
     글자 덩어리의 max-content 폭이 남은 자리보다 크면 `min-width:0` 이 있어도 제 flex 줄로
     밀려나고, ▸ 마커만 있는 줄이 하나 더 생긴다. 그 한 줄(23.5px) 때문에 접힌 요약이
     57px 가 아니라 84px 였다(실측). 줄바꿈은 flex 가 아니라 글자 덩어리 안에서 한다. */
  min-height: var(--touch-min, 48px);
  padding: 6px 11px;
  border: 1px solid var(--color-border-soft, #E2E8DE);
  border-radius: var(--radius-chip, 10px);
  background: var(--color-card-bg, #fff);
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text, #111);
  overflow-wrap: anywhere;
}
.m1-rows-summary::-webkit-details-marker { display: none; }
/* 위 `.m1-item-fold-summary::after` 와 같은 이유·같은 모양이다. 이 줄이 바로
   사용자가 말한 "법인·규격 앞의 작은 블릿" 자리다. */
.m1-rows-summary::after {
  content: "";   /* 모양은 위 꺾쇠 묶음의 마스크가 그린다. 읽힐 글자는 없다 — <summary> 가 이미 펼침 상태를 알린다 */
  margin-left: auto;
  transition: transform var(--dur-fast, 140ms) var(--ease, ease);
}
.m1-rows[open] > .m1-rows-summary { border-radius: var(--radius-chip, 10px) var(--radius-chip, 10px) 0 0; }
.m1-rows[open] > .m1-rows-summary::after { transform: rotate(90deg); }
/* summary 의 flex 항목은 마커와 이 덩어리 둘뿐이다 — 줄바꿈은 이 안에서 인라인으로 한다. */
.m1-rows-text { flex: 1 1 auto; min-width: 0; }
/* 🔴 조각마다 nowrap — 줄은 조각 **사이**에서만 갈린다. 이걸 안 주면 `아주 크게` × 360px 에서
   `1,617~4,` / `021원/k` / `g` 로 자릿수가 쪼개진다(실측). body 의 `overflow-wrap: anywhere`
   상속을 여기서 끊는다. */
.m1-rows-count, .m1-rows-box, .m1-rows-range {
  white-space: nowrap;
  overflow-wrap: normal;
}
.m1-rows-count { color: var(--color-text-sub, #4a4a4a); }
.m1-rows-box, .m1-rows-range { font-variant-numeric: tabular-nums; }

.m1-row-list { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.m1-row {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border-soft, #E2E8DE);
  border-radius: var(--radius-chip, 10px);
  padding: 10px 12px;
}
.m1-row-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.m1-row-spec { color: var(--color-text-sub, #4a4a4a); margin: 4px 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.m1-row-price { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m1-row-kg { color: var(--brand-ink, #0F5132); }
.m1-row-box { color: var(--color-text-sub, #4a4a4a); font-variant-numeric: tabular-nums; }

/* ══ 확정 탭 ════════════════════════════════════════════════════════ */
.m1-settled-date { margin: 0; font-size: 1.05rem; }
.m1-settled-date-label { color: var(--color-text-sub, #4a4a4a); }
.m1-settled-date strong { font-weight: 800; font-variant-numeric: tabular-nums; }

/* 🔴 법인은 **한 줄에 하나**다. 예전엔 `display:flex; flex-wrap:wrap` 이라 폭이 남으면 두
   법인이 한 줄에 붙어 `한국청과㈜ 195건 대아청과㈜ 14건` 이 **한 항목처럼** 읽혔다
   (사용자 질문 2026-09-12 — 393px 에서는 이름이 길어 한 줄씩이라 안 보이다가, 폭이 넓어지면
   나타나는 종류다). 이름과 건수를 양끝으로 벌려 어느 건수가 누구 것인지 폭과 무관하게
   분명히 한다. */
.m1-corp-status { list-style: none; margin: 10px 0 0; padding: 0; }
.m1-corp-status li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-min, 8px);
  padding: 7px 0;
  border-top: 1px solid var(--color-border-soft, #E2E8DE);
}
.m1-corp-name { min-width: 0; overflow-wrap: anywhere; }
.m1-corp-count {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m1-settled-item {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #D2DBCD);
  border-radius: var(--radius-card, 14px);
  padding: 12px 14px 14px;
  margin-bottom: 10px;
}
.m1-settled-item-name {
  margin: 0 0 6px;
  position: relative;   /* `.m1-settled-item-link::before` 오버레이의 기준 상자 */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
/* 🔴 이름은 글자 폭만 갖는다 — `flex: 1 1 auto` 면 이름 상자가 줄을 가득 채워 꺾쇠가
   상자수 바로 앞으로 끌려간다(품종 머리에서 이미 겪은 `홍로 › 물량 77%`, 위 주석). */
.m1-settled-item-name > .m1-settled-item-link { flex: 0 1 auto; }
/* 상자수는 줄 오른쪽 끝 — 꺾쇠와 사이를 벌려 "품목명까지가 링크"라고 말한다. */
.m1-settled-item-qty {
  margin-left: auto;
  padding-left: var(--gap-min, 8px);
  flex: none;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;   /* 숫자가 자릿수 중간에서 갈리지 않게(CLAUDE.md) */
}
.m1-settled-item-name::before {
  content: "";
  width: 9px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  background: var(--accent-fill, #F57C00);
}
/* 🔴 품종 사이 여백 — 한 품종의 표가 끝나고 다음 품종 이름이 바로 붙어 "표가 계속된다"로
   읽혔다(사용자 지적: "'수미' 위 여백을 추가해줘. 품목이 너무 붙어 있어"). 여백만으로는
   약해서 구분선을 같이 둔다. **첫 품종**은 품목 이름 바로 아래라 선도 큰 여백도 없다 —
   `+ h4`(표 뒤에 오는 h4)에만 준다. */
.m1-settled-variety-name {
  margin: 10px 0 6px;
  position: relative;   /* `.m1-settled-variety-link::before` 오버레이의 기준 상자 */
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-ink, #0F5132);
}
.tablewrap + .m1-settled-variety-name {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft, #E2E8DE);
}
.m1-settled-table td, .m1-settled-table th { white-space: nowrap; }
.m1-settled-table th { font-size: 0.85rem; color: var(--color-text-sub, #4a4a4a); font-weight: 700; }
.m1-settled-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 390px) {
  .btn-market { padding: 0 8px; }
  .m1-item-summary { padding: 11px 12px 0; }
  .m1-item-body { padding: 2px 8px 8px; }
}