/* 메뉴: 고기 색을 따라 움직이는 와인빛 배경 */
.m-hero { position: relative; height: 76svh; min-height: 480px; overflow: hidden; }
.m-hero > .shade { background: linear-gradient(0deg, var(--wine) 0, rgba(42, 14, 11, .2) 55%, rgba(14, 12, 10, .4) 100%); }
.m-hero__copy { position: absolute; inset: auto var(--gutter) clamp(22px, 4vh, 40px); display: grid; gap: 18px; }
.m-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.m-hero__meta .eyebrow { color: #e1d9cd; }

.hd:not(.is-hidden) ~ main .m-nav { top: 76px; }
.m-nav { position: sticky; top: 0; z-index: 20; transition: top .5s var(--ease); display: flex; gap: 6px; padding: 10px var(--gutter); overflow-x: auto; background: rgba(30, 11, 9, .68); backdrop-filter: blur(14px); border-block: 1px solid rgba(245, 241, 234, .1); scrollbar-width: none; }
.m-nav::-webkit-scrollbar { display: none; }
.m-nav button { flex: none; min-height: 42px; padding: 0 16px; border-radius: 99px; font-size: 15px; font-weight: 500; color: #cfc7bb; transition: background .3s, color .3s; }
.m-nav button.is-on { background: var(--bone); color: #1a0d0a; }

.m-cut__stick { position: relative; height: 100svh; display: grid; grid-template-columns: 1fr minmax(0, min(84vh, 46vw)) 1fr; align-items: center; gap: clamp(16px, 3vw, 44px); padding-inline: var(--gutter); overflow: hidden; }
.m-cut__ghost { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: clamp(120px, 27vw, 500px); font-weight: 600; color: rgba(245, 241, 234, .06); white-space: nowrap; pointer-events: none; }
.m-cut__plate { grid-column: 2; grid-row: 1; position: relative; }
.m-cut__plate .plate { width: 100%; height: auto; }
.m-cut__info { grid-column: 1; grid-row: 1; display: grid; gap: 14px; position: relative; z-index: 1; }
.m-cut__info h2 { font-size: clamp(38px, 4.6vw, 84px); }
.m-cut__info .eyebrow { color: var(--ember-hi); }
.m-cut__info .lead { color: #dcd3c7; }
.m-cut__side { grid-column: 3; grid-row: 1; display: grid; gap: 22px; justify-items: start; position: relative; z-index: 1; }
.m-cut__price { display: grid; gap: 14px; width: 100%; }
.m-cut__price > div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid rgba(245, 241, 234, .18); }
.m-cut__price dt { font-size: 13px; color: #cfc7bb; }
.m-cut__price dd { font-size: 17px; }
.m-cut__price dd.d { font-size: clamp(30px, 3.2vw, 54px); line-height: 1.1; }
.m-cut__price b { font-weight: 500; color: var(--ember-hi); }
.m-cut__soldout { padding: 8px 14px; border-radius: 99px; background: var(--bone); color: #1a0d0a; font-size: 14px; font-weight: 600; }

.m-list { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.m-list ul { margin-top: 26px; border-top: 1px solid rgba(245, 241, 234, .18); }
.m-row { display: grid; grid-template-columns: 1fr minmax(160px, .5fr) 150px; align-items: center; gap: 12px 24px; padding: clamp(18px, 2vw, 30px) 0; border-bottom: 1px solid rgba(245, 241, 234, .18); transition: padding .5s var(--ease), color .3s; }
.m-row:hover { padding-inline: 16px; color: var(--ember-hi); }
.m-row.is-sold { opacity: .45; }
.m-row__thumb { display: none; }
.m-row__name p, .m-row__origin { color: #cfc7bb; font-size: 14px; }
.m-row__price { text-align: right; }
.m-row__price b { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; }
.m-float { position: fixed; z-index: 30; left: 0; top: 0; width: 300px; height: 300px; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }

.m-origin { padding: clamp(70px, 9vw, 140px) var(--gutter) clamp(90px, 11vw, 170px); display: grid; gap: 26px; justify-items: start; }
.m-origin__table { width: 100%; overflow-x: auto; }
.m-origin table { width: 100%; min-width: 520px; border-collapse: collapse; }
.m-origin th, .m-origin td { padding: 14px 16px 14px 0; text-align: left; border-bottom: 1px solid rgba(245, 241, 234, .18); font-weight: 400; }
.m-origin thead th { font-size: 13px; color: #cfc7bb; }
.m-origin tbody th { font-weight: 600; }
.m-origin > .eyebrow { max-width: 62ch; line-height: 1.7; color: #cfc7bb; }

@media (max-width: 899px) {
  .hd:not(.is-hidden) ~ main .m-nav { top: 64px; }
  .m-cut { padding-block: 40px; border-bottom: 1px solid rgba(245, 241, 234, .1); }
  .m-cut__stick { height: auto; display: grid; grid-template-columns: 1fr; gap: 18px; overflow: visible; }
  .m-cut__ghost { top: 170px; }
  .m-cut__plate, .m-cut__info, .m-cut__side { grid-column: 1; grid-row: auto; }
  .m-cut__plate .plate { width: 88%; margin-inline: auto; }
  .m-cut__side .btn { width: 100%; }
  .m-row { grid-template-columns: 64px 1fr auto; }
  .m-row__thumb { display: block; width: 64px; height: 64px; grid-row: 1 / span 2; }
  .m-row__origin { grid-column: 2 / -1; grid-row: 2; }
  .m-row__price { grid-column: 3; grid-row: 1; }
  .m-row:hover { padding-inline: 0; }
  .m-float { display: none; }
}
