/* 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: #D8394A;
  --fat: #F5E3C0;
  --met: #7C6A63;
  --plate: #F2EFE9;
  --plate-ink: #1B1B1A;
  --plate-line: #C9C2B6;
  --disp: Bahnschrift, "DIN Alternate", "DIN Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

/* ---------- butcher-chart plate ---------- */
.meat .plate-card {
  background: var(--plate);
  border-radius: 4px;
  padding: 24px 24px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 22px 50px -26px rgba(20, 10, 12, .55);
  position: relative;
  overflow: hidden;
}
.meat .plate-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 4px);
}
.meat .plate-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--plate-ink);
  padding-bottom: 8px; margin-bottom: 14px; color: var(--plate-ink);
}
.meat .plate-head .t {
  font-family: var(--disp); font-stretch: condensed; font-weight: 700;
  font-size: 1.3rem; letter-spacing: .02em; text-transform: uppercase;
}
.meat .plate-head .m {
  font-family: ui-monospace, Consolas, monospace; font-size: .68rem;
  color: #5C5750; letter-spacing: .08em;
}
.meat .plate-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: ui-monospace, Consolas, monospace; font-size: .64rem;
  color: #6B655C; letter-spacing: .06em; padding-top: 8px;
}
.meat .chart { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- clickable primal regions ---------- */
.meat .primal { cursor: pointer; transition: transform .38s cubic-bezier(.16, 1, .3, 1), filter .38s; }
.meat .primal:hover, .meat .primal:focus-visible { transform: translate(-5px, -13px);
  filter: drop-shadow(6px 16px 14px rgba(20, 10, 12, .42)); }
.meat .primal:focus-visible { outline: none; }
.meat .primal:hover > path, .meat .primal:focus-visible > path { filter: saturate(1.15) brightness(1.08); }
.meat .fpart { cursor: pointer; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.meat .fpart:hover, .meat .fpart:focus-visible { transform: translate(0, -9px); }
.meat .fpart:focus-visible { outline: none; }
.meat .plabel {
  font-family: var(--disp); font-stretch: condensed; font-weight: 700; font-size: 15px;
  fill: #fff; letter-spacing: .04em; pointer-events: none; text-transform: uppercase;
}
.meat .plabel.loc { font-weight: 400; font-size: 12.5px; opacity: .92; letter-spacing: 0;
  text-transform: none; font-family: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .meat .primal { animation: meat-drop .7s cubic-bezier(.2, .9, .25, 1) backwards; }
  @keyframes meat-drop { from { opacity: 0; transform: translate(0, -46px) } to { opacity: 1; transform: none } }
}

/* ---------- chart + readout layout ---------- */
.meat .chartgrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .meat .chartgrid { grid-template-columns: 1.55fr .85fr; } }
.meat .readout {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; align-self: start; box-shadow: var(--shadow);
}
@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: .16em; font-size: .72rem; color: var(--muted);
}
.meat .readout h3 { font-size: 1.4rem; margin: .15em 0 .1em; }
.meat .readout .alias {
  font-family: ui-monospace, Consolas, monospace; font-size: .76rem;
  color: var(--myo); margin-bottom: 12px;
}
.meat .readout p { color: var(--ink2); font-size: .94rem; margin: 0 0 16px; }
.meat .readout .go { color: var(--myo); font-weight: 700; font-size: .9rem; }

/* ---------- meters ---------- */
.meat .meterrow {
  display: grid; grid-template-columns: minmax(64px, 92px) 1fr 40px; gap: 10px;
  align-items: center; font-size: .8rem; margin-bottom: 9px;
}
.meat .meterrow .ml {
  font-family: var(--disp); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-size: .76rem;
}
.meat .meterrow .track { height: 7px; background: var(--track); overflow: hidden; border-radius: 999px; }
.meat .meterrow .track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--myo), var(--cherry));
  transition: width .55s cubic-bezier(.16, 1, .3, 1);
}
.meat .meterrow .mv {
  font-family: ui-monospace, Consolas, monospace; font-size: .76rem;
  font-variant-numeric: tabular-nums; color: var(--myo); text-align: right; font-weight: 700;
}

/* ---------- 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: 6px; overflow: hidden;
  background: var(--surface); transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s;
}
.meat .bms:hover { transform: translateY(-6px); border-color: var(--cherry); }
.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 var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.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 var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.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: 999px; padding: 6px 15px;
  transition: border-color .2s, transform .2s, color .2s;
}
.meat .chips a:hover { border-color: var(--cherry); color: var(--myo); transform: translateY(-2px); text-decoration: none; }
.meat .chips a .ar { color: var(--cherry); margin-right: 5px; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .meat .cut-alias { color: #f0b8bf; }
  .meat .readout .alias, .meat .meterrow .mv, .meat .bms .cap b, .meat .chips a:hover { color: #e8798a; }
}