/* Meat Atlas — palette derived from myoglobin chemistry:
   deoxy (deep purple-red) → oxy (cherry) → met (grey-brown), plus fat cream.
   Layered on top of the shared Tool-Lifes design system. */
.meat {
  --myo: #8E1B2E;
  --cherry: #C94A56;
  --fat: #F5E3C0;
  --met: #7C6A63;
  --plate: #F7F5F1;
  --plate-ink: #2A2724;
  --plate-line: #D8D2C8;
  --hero-wash: radial-gradient(120% 80% at 12% 0%, rgba(216, 57, 74, .12), transparent 55%),
    linear-gradient(180deg, #1a1214 0%, #2a181c 42%, #1a1214 100%);
  --body-font: inherit;
  --disp: Bahnschrift, "DIN Alternate", "DIN Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --cjk: 0;
  font-family: var(--body-font);
}
.meat .meat-brand {
  font-family: var(--disp); font-stretch: condensed; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; margin: 0 0 .35em; line-height: 1.05;
}
.meat .meat-hero {
  background: var(--hero-wash) !important;
  position: relative; overflow: hidden;
}
.meat .meat-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 55%; height: 120%;
  background: radial-gradient(closest-side, rgba(245, 227, 192, .14), transparent 70%);
  pointer-events: none; transform: rotate(12deg);
  height: auto; opacity: 1; filter: none;
}
.meat .meat-hero .wrap { position: relative; z-index: 1; }
.meat .meat-hero .lede { max-width: 38rem; color: #f0e4e6; }
.meat .meat-hero h1 { letter-spacing: -.02em; }
.meat.locale-ko .meat-hero h1,
.meat.locale-ja .meat-hero h1,
.meat.locale-zh .meat-hero h1 { letter-spacing: 0; font-weight: 700; }

/* Plate tilt wrapper — keeps grain ::after on .plate-card free of the shine layer */
.meat .plate-tilt {
  position: relative; border-radius: 6px;
  transform-style: preserve-3d;
}
.meat .chart-stage {
  perspective: 1100px; transform-style: preserve-3d;
}
.meat .chart-stage .chart {
  transform-origin: 50% 55%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .meat .chart-stage .chart { transition: none; will-change: auto; }
}

/* ---------- butcher-chart plate ---------- */
.meat .plate-card {
  background: var(--plate);
  border-radius: 2px;
  padding: 28px 28px 18px;
  border: 1px solid color-mix(in srgb, var(--plate-line) 70%, transparent);
  box-shadow: 0 12px 32px -28px rgba(20, 10, 12, .28);
  position: relative;
  overflow: hidden;
}
.meat .plate-card::after { content: none; }
.meat .plate-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--plate-line);
  padding-bottom: 10px; margin-bottom: 18px; color: var(--plate-ink);
}
.meat .plate-head .t {
  font-family: var(--disp); font-stretch: condensed; font-weight: 650;
  font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase;
}
.meat .plate-head .m {
  font-family: ui-monospace, Consolas, monospace; font-size: .64rem;
  color: #8A847A; letter-spacing: .1em;
}
.meat .plate-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: ui-monospace, Consolas, monospace; font-size: .62rem;
  color: #9A948A; letter-spacing: .06em; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--plate-line) 55%, transparent);
  margin-top: 8px;
}
.meat .chart { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- clickable primal regions ---------- */
.meat .primal {
  cursor: pointer;
  transition: opacity .28s ease, filter .28s ease;
}
.meat .primal:hover, .meat .primal:focus-visible {
  filter: brightness(1.06) saturate(1.04);
}
.meat .primal:focus-visible { outline: none; }
.meat .primal:hover > path, .meat .primal:focus-visible > path { filter: none; }
.meat .primal.dim, .meat .fpart.dim { opacity: .42; }
.meat .primal.on, .meat .fpart.on {
  opacity: 1; filter: brightness(1.05);
}
.meat .primal.on > path, .meat .fpart.on > path { filter: none; }
.meat .fpart {
  cursor: pointer;
  transition: opacity .28s ease, filter .28s ease;
}
.meat .fpart:hover, .meat .fpart:focus-visible { filter: brightness(1.05); }
.meat .fpart:focus-visible { outline: none; }
.meat .plabel {
  font-family: var(--disp); font-stretch: condensed; font-weight: 650; font-size: 13.5px;
  fill: #fff; letter-spacing: .05em; pointer-events: none; text-transform: uppercase;
  opacity: .95;
}
.meat .plabel.loc { font-weight: 400; font-size: 11.5px; opacity: .88; letter-spacing: 0;
  text-transform: none; font-family: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .meat .primal { animation: meat-drop .55s cubic-bezier(.2, .9, .25, 1) backwards; }
  @keyframes meat-drop { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
}
@media (prefers-reduced-motion: reduce) {
  .meat .primal, .meat .fpart { transition: none; }
}

/* ---------- chart + readout layout ---------- */
.meat .chartgrid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .meat .chartgrid { grid-template-columns: 1.55fr .85fr; gap: 32px; } }
.meat .readout {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 2px; padding: 24px 26px; align-self: start;
  box-shadow: none;
}
@media (min-width: 900px) { .meat .readout { position: sticky; top: 74px; } }
.meat .readout .rl {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .14em; font-size: .68rem; color: var(--muted);
}
.meat .readout h3 { font-size: 1.35rem; margin: .2em 0 .15em; font-weight: 650; }
.meat .readout .alias {
  font-family: ui-monospace, Consolas, monospace; font-size: .74rem;
  color: color-mix(in srgb, var(--myo) 75%, var(--muted)); margin-bottom: 14px;
}
.meat .readout p { color: var(--ink2); font-size: .93rem; margin: 0 0 18px; line-height: 1.65; }
.meat .readout .go { color: var(--myo); font-weight: 600; font-size: .88rem; }

/* ---------- meters ---------- */
.meat .meterrow {
  display: grid; grid-template-columns: minmax(64px, 92px) 1fr 36px; gap: 12px;
  align-items: center; font-size: .8rem; margin-bottom: 11px;
}
.meat .meterrow .ml {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-size: .72rem;
}
.meat .meterrow .track { height: 3px; background: color-mix(in srgb, var(--track, #e8e4de) 90%, transparent); overflow: hidden; border-radius: 1px; }
.meat .meterrow .track i {
  display: block; height: 100%; border-radius: 1px;
  background: color-mix(in srgb, var(--myo) 82%, #5a3038);
  transition: width .55s cubic-bezier(.16, 1, .3, 1);
}
.meat .meterrow .mv {
  font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
  font-variant-numeric: tabular-nums; color: var(--ink2); text-align: right; font-weight: 500;
}

/* ---------- marbling scale ---------- */
.meat .bmsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.meat .bms {
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  background: var(--surface); transition: transform .25s ease, border-color .25s;
}
.meat .bms:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cherry) 40%, var(--line)); }
.meat .bms canvas { display: block; width: 100%; height: auto; }
/* Grade names run long in some locales ("1++등급 · 와규 A5"), so the caption
   stacks instead of sitting on one row and every card keeps the same height. */
.meat .bms .cap {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: .63rem;
  color: var(--muted); letter-spacing: .03em; min-height: 3.6em;
}
.meat .bms .cap b { color: var(--myo); letter-spacing: .06em; }
.meat .bms .cap span { line-height: 1.35; }

/* ---------- doneness ---------- */
.meat .two { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .meat .two { grid-template-columns: 1.1fr .9fr; } }
.meat .cooker {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 2px; padding: 22px; box-shadow: none;
}
.meat .cooker canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.meat .tempbar { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 6px; flex-wrap: wrap; }
.meat .tempbar .big {
  font-family: var(--disp); font-stretch: condensed; font-size: 2.7rem; line-height: 1;
  color: var(--cherry); font-variant-numeric: tabular-nums; font-weight: 700;
}
.meat .tempbar .dn-stage {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .12em; font-size: .92rem;
}
.meat .tempbar .dn-stage small {
  display: block; font-family: ui-monospace, Consolas, monospace; font-size: .68rem;
  letter-spacing: .04em; color: var(--muted); text-transform: none;
}
.meat input[type=range] { width: 100%; accent-color: var(--cherry); height: 28px; cursor: pointer; }
.meat input[type=range]:focus-visible { outline: 2px solid var(--cherry); outline-offset: 3px; }
.meat .ticks {
  display: flex; justify-content: space-between;
  font-family: ui-monospace, Consolas, monospace; font-size: .64rem;
  color: var(--muted); letter-spacing: .04em;
}
.meat .myo-swatch { font-weight: 700; }

/* ---------- cut detail page ---------- */
.meat .dgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.meat .dcard {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 2px; padding: 18px 20px; box-shadow: none;
}
.meat .dcard h3 {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .13em; font-size: .74rem; color: var(--muted);
  margin: 0 0 14px; font-weight: 600;
}
.meat .dcard p { font-size: .93rem; color: var(--ink2); margin: 0; }
.meat .dtemp {
  font-family: var(--disp); font-stretch: condensed; font-size: 2.2rem; line-height: 1.05;
  color: var(--cherry); font-variant-numeric: tabular-nums; font-weight: 700;
}
.meat .dtemp small {
  display: block; font-size: .95rem; color: var(--ink); margin-top: 4px;
  letter-spacing: .05em; font-weight: 400;
}
.meat .dcard .note { margin-top: 12px; font-size: .88rem; }
.meat .cut-alias {
  font-family: ui-monospace, Consolas, monospace; font-size: .82rem;
  color: #f0b8bf; margin: 0;
}
.meat .safety {
  font-size: .82rem; color: var(--muted); border-left: 2px solid var(--line);
  padding-left: 14px; margin-top: 26px;
}

/* ---------- chips ---------- */
.meat .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.meat .chips a {
  font-size: .88rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px;
  transition: border-color .2s, color .2s;
}
.meat .chips a:hover { border-color: color-mix(in srgb, var(--cherry) 45%, var(--line)); color: var(--myo); transform: none; text-decoration: none; }
.meat .chips a .ar { color: var(--cherry); margin-right: 5px; font-weight: 700; }

/* ---------- tool tiles on the app home ---------- */
.meat .tool-tile {
  display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--cherry);
  position: relative; overflow: hidden;
}
.meat .tool-tile h3 { font-size: 1.15rem; margin: 0; }
.meat .tool-tile .sub {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- nutrition ---------- */
.meat .nutgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.meat .nutcell {
  background: var(--bg); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.meat .nutcell b {
  font-family: var(--disp); font-stretch: condensed; font-size: 1.45rem; line-height: 1;
  color: var(--myo); font-variant-numeric: tabular-nums;
}
.meat .nutcell b small { font-size: .62rem; margin-left: 3px; color: var(--muted); font-weight: 400; }
.meat .nutcell span { font-size: .72rem; color: var(--muted); }
.meat .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.meat .nuttable { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.meat .nuttable caption {
  caption-side: top; text-align: left; font-size: .78rem; color: var(--muted);
  padding-bottom: 8px; font-family: ui-monospace, Consolas, monospace;
}
.meat .nuttable th, .meat .nuttable td {
  border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: right; vertical-align: middle;
}
.meat .nuttable thead th {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .08em; font-size: .7rem; color: var(--muted); font-weight: 600;
  border-bottom: 1.5px solid var(--ink2); white-space: nowrap;
}
.meat .nuttable thead th:first-child, .meat .nuttable tbody th { text-align: left; }
.meat .nuttable thead th button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;
  text-transform: inherit; letter-spacing: inherit;
}
.meat .nuttable thead th button:hover, .meat .nuttable thead th button.on { color: var(--myo); }
.meat .nuttable thead th button::after { content: " ↕"; opacity: .5; }
.meat .nuttable tbody th { font-weight: 600; min-width: 130px; }
.meat .nuttable tbody th .src { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }
.meat .nuttable td b {
  font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
  font-size: .84rem; font-weight: 700;
}
.meat .nbar {
  display: block; height: 4px; background: var(--track); border-radius: 999px;
  overflow: hidden; margin-bottom: 4px; min-width: 44px;
}
.meat .nbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--myo), var(--cherry)); }

/* ---------- ranked list (by cooking method) ---------- */
.meat .ranked {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.meat .rank-row {
  display: grid; grid-template-columns: 34px minmax(110px, 1fr) minmax(60px, 2fr) 40px;
  gap: 12px; align-items: center; background: var(--surface);
  padding: 11px 16px; color: var(--ink);
}
.meat .rank-row:hover { background: var(--bg); text-decoration: none; }
.meat .rank-row .rn {
  font-family: var(--disp); font-stretch: condensed; font-weight: 700; font-size: 1.05rem;
  color: var(--muted); font-variant-numeric: tabular-nums; text-align: center;
}
.meat .rank-row:nth-child(-n+3) .rn { color: var(--cherry); }
.meat .rank-row .rname { font-weight: 600; font-size: .95rem; }
.meat .rank-row .rname small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
.meat .rank-row .rbar { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.meat .rank-row .rbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--myo), var(--cherry)); }
.meat .rank-row .rv {
  font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
  font-size: .8rem; font-weight: 700; color: var(--myo); text-align: right;
}
@media (max-width: 560px) {
  .meat .rank-row { grid-template-columns: 28px 1fr 40px; }
  .meat .rank-row .rbar { grid-column: 2 / -1; }
}

/* ---------- storage ---------- */
.meat .keyrows {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.meat .keyrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: var(--surface); padding: 12px 18px;
}
.meat .keyrow .kk { font-size: .94rem; }
.meat .keyrow .kv {
  font-family: var(--disp); font-stretch: condensed; font-weight: 700;
  font-size: 1.05rem; color: var(--myo); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.meat .chip-time {
  display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: .74rem;
  color: var(--myo); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 11px; margin: 0 0 10px;
}

/* ---------- portion calculator ---------- */
.meat .calc {
  display: grid; gap: 18px; grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
@media (min-width: 780px) { .meat .calc { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.meat .calc-in { display: grid; gap: 14px; }
.meat .calc-in label { display: grid; gap: 6px; }
.meat .calc-in label span {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .1em; font-size: .72rem; color: var(--muted);
}
.meat .calc-in input, .meat .calc-in select {
  font: inherit; font-size: .96rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; width: 100%;
}
.meat .calc-in input:focus-visible, .meat .calc-in select:focus-visible {
  outline: 2px solid var(--cherry); outline-offset: 1px;
}
.meat .calc-out {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--bg); border-radius: 12px; padding: 20px 22px;
}
.meat .calc-out .co-l {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .12em; font-size: .72rem; color: var(--muted);
}
.meat .calc-out strong {
  font-family: var(--disp); font-stretch: condensed; font-size: 2.9rem; line-height: 1.05;
  color: var(--cherry); font-variant-numeric: tabular-nums;
}
.meat .calc-out .co-s, .meat .calc-out .co-p {
  font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--muted);
}
.meat .calc-out .co-p { margin-top: 6px; }

/* ---------- grouped cut index ---------- */
.meat .cutgroup + .cutgroup { margin-top: 18px; }
.meat .cutgroup h3 {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: var(--muted);
  margin: 0; font-weight: 600;
}

/* ---------- printable / downloadable charts ---------- */
.meat .downloads { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.meat .dl-card {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.meat .dl-card img {
  display: block; width: 100%; height: auto; background: var(--plate);
  border-bottom: 1px solid var(--line);
}
.meat .dl-card figcaption {
  padding: 12px 16px 14px; font-size: .88rem; color: var(--ink2);
  display: flex; flex-direction: column; gap: 8px;
}
.meat .dl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.meat .dl-links a {
  font-size: .8rem; font-weight: 700; color: var(--myo);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px;
  transition: border-color .2s, background .2s;
}
.meat .dl-links a:hover { border-color: var(--cherry); background: var(--bg); text-decoration: none; }

/* ---------- head-to-head comparison ---------- */
.meat .vs-x { color: var(--cherry); font-weight: 400; opacity: .8; margin: 0 .1em; }
.meat .duelhead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px;
  font-family: var(--disp); font-stretch: condensed; font-weight: 700; font-size: 1.05rem;
}
.meat .duelhead span:last-child { text-align: right; }
.meat .duels {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); display: grid; gap: 12px;
}
.meat .duel {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 1fr 34px 90px 34px 1fr;
  grid-template-areas: "lb lv lab rv rb";
}
.meat .duel .dl {
  grid-area: lab; text-align: center; font-family: var(--disp); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--muted);
}
.meat .duel .dbar { height: 9px; background: var(--track); border-radius: 999px; overflow: hidden; }
.meat .duel .dbar.l { grid-area: lb; display: flex; justify-content: flex-end; }
.meat .duel .dbar.r { grid-area: rb; }
.meat .duel .dbar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--met), var(--myo)); opacity: .55;
}
.meat .duel .dbar i.win { background: linear-gradient(90deg, var(--myo), var(--cherry)); opacity: 1; }
.meat .duel .dv {
  font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
  font-size: .78rem; color: var(--muted);
}
.meat .duel .dv:nth-of-type(1) { grid-area: lv; text-align: right; }
.meat .duel .dv:nth-of-type(2) { grid-area: rv; }
.meat .duel .dv.win { color: var(--myo); font-weight: 700; }
@media (max-width: 620px) {
  .meat .duel { grid-template-columns: 1fr 30px 30px 1fr; grid-template-areas: "lab lab lab lab" "lb lv rv rb"; row-gap: 4px; }
  .meat .duel .dl { text-align: left; }
}
.meat .dgrid.two-up { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.meat .dgrid.two-up .dcard h3 {
  font-size: 1.25rem; color: var(--ink); text-transform: none;
  letter-spacing: -.01em; margin-bottom: 4px; font-weight: 700;
}
.meat .vs-alias {
  font-family: ui-monospace, Consolas, monospace; font-size: .76rem;
  color: var(--myo); margin: 0 0 12px;
}
.meat .verdict { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.meat .verdict li {
  display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; align-items: center;
  background: var(--surface); padding: 11px 16px; font-size: .92rem;
}
.meat .verdict li.vh {
  background: var(--bg); font-family: var(--disp); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted);
}
.meat .verdict .vw { font-weight: 700; color: var(--myo); }
.meat .verdict .vw.tie { color: var(--muted); font-weight: 400; }
.meat .verdict .vs-num {
  font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--muted); text-align: right;
}
@media (max-width: 560px) {
  .meat .verdict li { grid-template-columns: 1fr auto; }
  .meat .verdict .vs-num { grid-column: 1 / -1; text-align: left; }
}

.meat .dishlist { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 6px; color: var(--ink2); }
.meat .dishlist li { padding: 2px 0; }
.meat .quiz { margin: 8px 0 24px; }
.meat .qlabel {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; color: var(--muted); margin: 0 0 12px;
}
.meat .qopts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.meat .qopt, .meat .qstart {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 6px; padding: 12px 16px; cursor: pointer;
  font: inherit; text-align: left; transition: border-color .2s, transform .2s;
}
.meat .qopt:hover, .meat .qstart:hover { border-color: var(--cherry); transform: translateY(-2px); }
.meat .qopt.on { border-color: var(--cherry); background: rgba(216, 57, 74, .06); }
.meat .qstart {
  background: var(--myo); color: #fff; border-color: var(--myo); font-weight: 700;
}
.meat .qresult .ranked { margin-top: 8px; }
.meat .grade-card h3 { margin-bottom: 4px; }

/* ---------- cut detail: copy + highlighted mini chart ---------- */
.meat .cut-layout {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  margin: 8px 0 28px; align-items: start;
}
@media (min-width: 880px) {
  .meat .cut-layout { grid-template-columns: 1.15fr .85fr; gap: 28px; }
}
.meat .cut-map { position: relative; }
@media (min-width: 880px) {
  .meat .cut-map { position: sticky; top: 74px; }
}
.meat .plate-mini { padding: 16px 16px 12px; }
.meat .plate-mini .plate-head { margin-bottom: 10px; padding-bottom: 6px; }
.meat .plate-mini .plate-head .t { font-size: 1rem; }

/* ---------- locale-tuned type + market accents ----------
 * Same myoglobin system, different reading density and cultural warmth.
 * CJK drops forced uppercase (it looks like shouting and breaks glyph rhythm). */
.meat.locale-ko {
  --myo: #A0182C;
  --cherry: #E03A4C;
  --plate: #F4EFE6;
  --hero-wash: radial-gradient(110% 70% at 8% 0%, rgba(224, 58, 76, .22), transparent 52%),
    linear-gradient(165deg, #1c1014 0%, #32181e 48%, #140e10 100%);
  --body-font: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --disp: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Bahnschrift, sans-serif;
  --cjk: 1;
  word-break: keep-all; line-height: 1.65;
}
.meat.locale-ja {
  --myo: #8A1E30;
  --cherry: #C73B4A;
  --plate: #F3EEE6;
  --fat: #F7E8C8;
  --hero-wash: radial-gradient(100% 70% at 90% 10%, rgba(247, 232, 200, .12), transparent 50%),
    linear-gradient(180deg, #161214 0%, #2a1a1e 50%, #141012 100%);
  --body-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Segoe UI", sans-serif;
  --disp: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Bahnschrift, sans-serif;
  --cjk: 1;
  line-height: 1.75; letter-spacing: .01em;
}
.meat.locale-zh {
  --myo: #962234;
  --cherry: #D6454F;
  --plate: #F2EDE5;
  --hero-wash: radial-gradient(90% 60% at 20% 0%, rgba(214, 69, 79, .18), transparent 55%),
    linear-gradient(180deg, #181214 0%, #2c171c 45%, #151012 100%);
  --body-font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --disp: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Bahnschrift, sans-serif;
  --cjk: 1;
  line-height: 1.7;
}
.meat.locale-es, .meat.locale-pt {
  --myo: #9C2434;
  --cherry: #E04452;
  --plate: #F5F0E7;
  --hero-wash: radial-gradient(100% 70% at 70% 0%, rgba(224, 68, 82, .17), transparent 55%),
    linear-gradient(185deg, #1a1214 0%, #2e1a1f 50%, #161012 100%);
  --disp: "Avenir Next Condensed", Bahnschrift, "Arial Narrow", "Helvetica Neue", sans-serif;
}
.meat.locale-fr {
  --myo: #7E2232;
  --cherry: #C93A4A;
  --plate: #F1EDE6;
  --hero-wash: radial-gradient(95% 65% at 15% 0%, rgba(201, 58, 74, .14), transparent 50%),
    linear-gradient(180deg, #171214 0%, #26171c 48%, #141012 100%);
  --disp: "Avenir Next Condensed", Bahnschrift, "Helvetica Neue", sans-serif;
}
.meat.locale-de {
  --myo: #841E2E;
  --cherry: #C83646;
  --plate: #F0EDE8;
  --hero-wash: linear-gradient(180deg, #151214 0%, #24161a 50%, #121012 100%);
  --disp: Bahnschrift, "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
}
.meat.locale-ru {
  --myo: #8F2032;
  --cherry: #D23C4C;
  --plate: #F2EEE8;
  --body-font: "Segoe UI", "PT Root UI", "Roboto", "Helvetica Neue", sans-serif;
  --disp: "Segoe UI", Bahnschrift, "Arial Narrow", sans-serif;
  --hero-wash: radial-gradient(90% 60% at 85% 0%, rgba(210, 60, 76, .15), transparent 50%),
    linear-gradient(180deg, #161214 0%, #28181d 48%, #141012 100%);
}
.meat.locale-en {
  --disp: Bahnschrift, "DIN Alternate", "DIN Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

.meat.locale-ko .meat-brand,
.meat.locale-ja .meat-brand,
.meat.locale-zh .meat-brand,
.meat.locale-ko .plate-head .t,
.meat.locale-ja .plate-head .t,
.meat.locale-zh .plate-head .t,
.meat.locale-ko .dcard h3,
.meat.locale-ja .dcard h3,
.meat.locale-zh .dcard h3,
.meat.locale-ko .readout .rl,
.meat.locale-ja .readout .rl,
.meat.locale-zh .readout .rl,
.meat.locale-ko .meterrow .ml,
.meat.locale-ja .meterrow .ml,
.meat.locale-zh .meterrow .ml,
.meat.locale-ko .tempbar .dn-stage,
.meat.locale-ja .tempbar .dn-stage,
.meat.locale-zh .tempbar .dn-stage,
.meat.locale-ko .qlabel,
.meat.locale-ja .qlabel,
.meat.locale-zh .qlabel {
  text-transform: none;
  letter-spacing: 0;
  font-stretch: normal;
}
.meat.locale-ko .plabel,
.meat.locale-ja .plabel,
.meat.locale-zh .plabel { text-transform: none; letter-spacing: 0; font-size: 13px; }
.meat.locale-ko .plabel.loc,
.meat.locale-ja .plabel.loc,
.meat.locale-zh .plabel.loc { font-size: 12px; }
.meat.locale-ja .section-intro,
.meat.locale-zh .section-intro { max-width: 42em; }
.meat.locale-ko .chips a,
.meat.locale-ja .chips a,
.meat.locale-zh .chips a { border-radius: 8px; }

.meat .nametable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.meat .nametable th, .meat .nametable td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.meat .nametable th[scope="row"] { font-weight: 650; width: 28%; }
.meat .nametable thead th { font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.meat .name-block { margin-bottom: 2rem; }
.meat .swap-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem 1rem; align-items: start; margin-bottom: 0.75rem; }
.meat .swap-row .k { display: block; font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 0.25rem; }
.meat .swap-arrow { font-size: 1.4rem; opacity: .45; padding-top: 1.4rem; }
.meat .swap-card h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.meat .dish-chips small { opacity: .55; margin-left: 0.25rem; font-size: 0.8em; }
.meat .doneness-species td { max-width: 28rem; }
@media (max-width: 640px) {
  .meat .swap-row { grid-template-columns: 1fr; }
  .meat .swap-arrow { padding-top: 0; transform: rotate(90deg); justify-self: start; }
}

/* ---------- 1. sticky species rail ---------- */
.meat .species-rail {
  position: sticky; top: 58px; z-index: 40;
  display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 20px; margin: 0;
  background: color-mix(in srgb, var(--bg, #f7f5f1) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(0,0,0,.08)) 70%, transparent);
  scrollbar-width: none;
}
.meat .species-rail::-webkit-scrollbar { display: none; }
.meat .species-rail a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px 7px; border-radius: 0; font-size: .76rem;
  font-family: var(--disp); font-stretch: condensed; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  border: none; border-bottom: 1px solid transparent; white-space: nowrap;
  background: transparent;
  transition: color .2s, border-color .2s;
}
.meat .species-rail a i {
  width: 6px; height: 6px; border-radius: 50%; display: block; opacity: .7;
}
.meat .species-rail a:hover { color: var(--ink); background: transparent; border-bottom-color: var(--plate-line); }
.meat .species-rail a.is-on {
  background: transparent;
  border-bottom-color: var(--myo);
  color: var(--plate-ink); font-weight: 650;
}
.meat .species-rail a.is-on i { opacity: 1; }
.meat .chart-legend { display: none; }

/* ---------- 2. doneness thermometer ---------- */
.meat .cooker-stage {
  display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: stretch;
}
.meat .thermo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 4px;
}
.meat .thermo-lab {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--disp); font-stretch: condensed; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.meat .thermo-track {
  position: relative; flex: 1; width: 8px; min-height: 140px;
  border-radius: 999px; overflow: visible;
  background: linear-gradient(180deg, #F5E3C0 0%, #C94A56 40%, #6E2430 100%);
  box-shadow: none;
}
.meat .thermo-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: transparent;
  transition: height .2s ease-out;
  pointer-events: none;
}
.meat .thermo-needle {
  position: absolute; left: -4px; right: -4px; height: 2px;
  background: var(--plate-ink); border-radius: 1px;
  box-shadow: none;
  bottom: 35%; transform: translateY(50%);
  transition: bottom .2s ease-out;
}
.meat .thermo-bulb {
  width: 14px; height: 14px; border-radius: 50%; margin-top: -2px;
  background: #8E1B2E;
  box-shadow: none;
}

/* ---------- 3. cut-page hero tinted by primal fill ---------- */
.meat .cut-hero {
  --hero-wash: radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--cut-accent, #D8394A) 18%, transparent), transparent 55%),
    linear-gradient(180deg, #1a1214 0%, color-mix(in srgb, var(--cut-accent, #8E1B2E) 14%, #2a181c) 42%, #1a1214 100%);
}
.meat .cut-kicker {
  display: inline-flex; align-items: center; gap: 8px;
}
.meat .cut-swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--cut-accent, var(--cherry));
  box-shadow: none;
}
.meat .cut-map-lab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--disp); font-stretch: condensed; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px;
}
.meat .cut-map-lab i {
  width: 10px; height: 10px; border-radius: 2px; display: block;
}
.meat .cut-photo {
  margin: 0 0 1.1rem; max-width: 36rem;
}
.meat .cut-photo img {
  width: 100%; height: auto; max-height: 18rem; object-fit: cover;
  border-radius: 14px; display: block; background: var(--line, #2a1a1e);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.meat .cut-photo figcaption {
  color: var(--muted); font-size: .78rem; margin-top: .4rem;
}
.meat .cut-photo--sm { max-width: none; margin-bottom: .85rem; }
.meat .cut-photo--sm img { max-height: 10rem; }
.meat .cut-hero .dtemp,
.meat.cut-accent .dtemp { text-shadow: none; }
.meat .dcard:has(.dtemp) {
  border-top: 1px solid var(--cut-accent, var(--cherry));
}

/* ---------- 4. animated meters ---------- */
.meat .meterrow .track i {
  width: var(--w, 0%);
}
html.meat-fx .meat .meterrow:not(.is-lit) .track i { width: 0; }
html.meat-fx .meat .meterrow.is-lit .track i {
  width: var(--w, 0%);
  transition: width .85s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.meat-fx .meat .meterrow:not(.is-lit) .track i { width: var(--w, 0%); }
  html.meat-fx .meat .meterrow.is-lit .track i { transition: none; }
}

/* ---------- 5. tool-tile marks + reveal polish ---------- */
.meat .tool-tile {
  padding-top: 18px;
  background: var(--surface);
}
.meat .tool-tile .tool-mark {
  position: absolute; top: 14px; right: 16px;
  width: auto; height: auto; border-radius: 0; padding: 0;
  display: block; font-family: ui-monospace, Consolas, monospace;
  font-weight: 500; font-size: .68rem; letter-spacing: .08em;
  color: var(--muted); background: none; box-shadow: none;
}
.meat .tool-tile[data-tool] { border-top-width: 1px; }
.meat .tool-tile[data-tool="grades"] .tool-mark { color: var(--muted); background: none; }
.meat .tool-tile:hover { border-color: color-mix(in srgb, var(--cherry) 35%, var(--line)); }
.meat .bms {
  animation: meat-bms-in .45s cubic-bezier(.16, 1, .3, 1) backwards;
  border-radius: 2px;
}
.meat .bms:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cherry) 40%, var(--line)); }
.meat .bms:nth-child(1) { animation-delay: .02s; }
.meat .bms:nth-child(2) { animation-delay: .04s; }
.meat .bms:nth-child(3) { animation-delay: .06s; }
.meat .bms:nth-child(4) { animation-delay: .08s; }
.meat .bms:nth-child(5) { animation-delay: .1s; }
.meat .bms:nth-child(6) { animation-delay: .12s; }
.meat .bms:nth-child(7) { animation-delay: .14s; }
.meat .bms:nth-child(8) { animation-delay: .16s; }
.meat .bms:nth-child(9) { animation-delay: .18s; }
@keyframes meat-bms-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.meat [data-reveal] {
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.meat [data-reveal].is-in { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .meat .bms { animation: none; }
  .meat .thermo-fill, .meat .thermo-needle { transition: none; }
  .meat .species-rail a { transition: none; }
}
.meat.locale-ko .species-rail a,
.meat.locale-ja .species-rail a,
.meat.locale-zh .species-rail a,
.meat.locale-ko .thermo-lab,
.meat.locale-ja .thermo-lab,
.meat.locale-zh .thermo-lab,
.meat.locale-ko .cut-map-lab,
.meat.locale-ja .cut-map-lab,
.meat.locale-zh .cut-map-lab {
  text-transform: none; letter-spacing: 0; font-stretch: normal;
}

@media (prefers-color-scheme: dark) {
  .meat .cut-alias { color: #f0b8bf; }
  .meat .readout .alias, .meat .meterrow .mv, .meat .bms .cap b, .meat .chips a:hover,
  .meat .dl-links a, .meat .vs-alias, .meat .verdict .vw, .meat .duel .dv.win { color: #e8798a; }
  .meat .nametable th, .meat .nametable td { border-bottom-color: rgba(255,255,255,.1); }
}

/* ---------- traffic Top-10: names filter, nutrition chips, next steps ---------- */
.meat .name-filter { margin: 0 0 18px; max-width: 28rem; }
.meat .name-filter-lab {
  display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; font-family: var(--disp); font-stretch: condensed;
}
.meat .name-filter-input {
  width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink);
}
.meat .name-filter-input:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }
.meat .name-filter-empty { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.meat .nut-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.meat .nut-chip {
  font: inherit; font-size: .78rem; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted);
}
.meat .nut-chip.is-on, .meat .nut-chip:hover {
  color: var(--plate-ink); border-color: color-mix(in srgb, var(--cherry) 40%, var(--line));
}
.meat .nut-chip.is-on { font-weight: 650; border-bottom-color: var(--myo); }
.meat .next-steps { margin: 28px 0; }
.meat .next-steps .next-block { margin-bottom: 18px; }
.meat .next-steps h3 {
  font-family: var(--disp); font-stretch: condensed; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600;
}
.meat.locale-ko .name-filter-lab,
.meat.locale-ja .name-filter-lab,
.meat.locale-zh .name-filter-lab,
.meat.locale-ko .next-steps h3,
.meat.locale-ja .next-steps h3,
.meat.locale-zh .next-steps h3 {
  text-transform: none; letter-spacing: 0; font-stretch: normal;
}

/* ---------- print: butcher cheat-sheet ---------- */
@media print {
  .site-header, .species-rail, .tl-share-fab, .adsbygoogle, [data-ad],
  .tool-tile, footer, .qstart, .name-filter, .nut-filters,
  input[type=range], .thermo, .downloads { display: none !important; }
  .meat .meat-hero {
    background: none !important; color: #111 !important;
    padding: 0 0 12px; box-shadow: none;
  }
  .meat .meat-hero .lede, .meat .cut-alias, .meat .meat-brand { color: #333 !important; }
  .meat .plate-card, .meat .readout, .meat .dcard, .meat .cooker {
    box-shadow: none !important; border: 1px solid #ccc; break-inside: avoid;
  }
  .meat .chartgrid { display: block; }
  .meat .duels, .meat .dgrid { break-inside: avoid; }
  .meat a { color: inherit; text-decoration: none; }
  .meat .primal { animation: none !important; filter: none !important; }
}
