@font-face {
  font-family: "SUIT";
  src: url("assets/fonts/SUIT-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --orange: #f15a00;
  --orange-dark: #d94d00;
  --orange-pale: #fff5e9;
  --charcoal: #1d1f20;
  --ink: #171717;
  --muted: #343434;
  --line: #c5c7c8;
  --line-soft: #e2e3e4;
  --panel: #f6f7f7;
  --green: #176b36;
  --yellow: #ffe31a;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { position: relative; color: var(--ink); background: #222; font-family: "SUIT", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; letter-spacing: 0; }

.menu-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: 88px 567px 369px;
  width: 1536px;
  height: 1024px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  transform: translate(-50%, -50%) scale(var(--menu-scale-x, 1), var(--menu-scale-y, 1));
  transform-origin: center;
}

.masthead {
  display: grid;
  grid-template-columns: 338px minmax(0, 1fr);
  align-items: center;
  color: #fff;
  background: var(--charcoal);
  border-top: 4px solid var(--orange);
}
.brand-lockup { display: grid; width: 100%; height: 100%; place-items: center; }
.brand-lockup img { display: block; width: 200px; height: 76px; object-fit: contain; }
.order-notes { display: grid; grid-template-columns: 1.24fr .66fr 1.1fr; align-items: center; height: 100%; }
.order-notes p { display: flex; align-items: center; min-width: 0; height: 30px; margin: 0; padding: 0 18px 0 30px; border-right: 1px solid #666; font-size: 17px; font-weight: 800; white-space: nowrap; }
.order-notes p:last-child { border-right: 0; }
.order-notes p::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 10px; background: var(--orange); transform: rotate(45deg); }

.chicken-catalog { display: grid; grid-template-columns: repeat(4, 384px); grid-template-rows: repeat(3, 189px); background: #fff; }
.chicken-item { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-width: 0; min-height: 0; padding: 8px 8px 7px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chicken-item:nth-child(4n) { border-right: 0; }
.chicken-item:nth-child(8n + 5), .chicken-item:nth-child(8n + 6), .chicken-item:nth-child(8n + 7), .chicken-item:nth-child(8n + 8) { background: #fbfbfb; }
.photo-zone { position: relative; display: grid; min-width: 0; place-items: center; overflow: hidden; }
.dish-photo { display: block; width: 179px; height: 140px; margin-top: 17px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.status-tag { position: absolute; z-index: 2; top: 7px; left: 11px; min-width: 43px; padding: 5px 9px 4px; border-radius: 3px; font-size: 13.5px; font-weight: 900; line-height: 1; text-align: center; }
.status-tag.new { color: #111; background: var(--yellow); border-left: 3px solid var(--orange); }
.status-tag.popular { color: #fff; background: var(--green); }

.chicken-copy { display: grid; grid-template-rows: 33px 50px 1fr; min-width: 0; padding: 5px 0 0 5px; }
.name-row { display: flex; align-items: start; justify-content: space-between; gap: 2px; min-width: 0; }
.name-row h3 { overflow: hidden; margin: 0; font-size: 23px; font-weight: 900; line-height: 1.18; white-space: nowrap; }
.chicken-item.long-name .name-row h3 { font-size: 19.5px; }
.spicy { flex: 0 0 auto; margin-top: 1px; font-family: "Apple Color Emoji", sans-serif; font-size: 13px; line-height: 1; white-space: nowrap; }
.description { display: -webkit-box; align-self: start; overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 13.25px; font-weight: 600; line-height: 1.36; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.price-block { align-self: end; min-width: 0; margin: 0 -2px -1px; padding: 7px 4px 3px; border-top: 1.5px solid #9fa2a3; background: #fafafa; }
.main-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 5px; }
.main-prices.vertical { grid-template-columns: 1fr; row-gap: 3px; }
.option-price { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; font-size: 15.5px; font-weight: 900; line-height: 1.05; white-space: nowrap; }
.option-price span { flex: 0 0 auto; min-width: 0; padding: 3px 6px 2px; color: #b83f00; background: #fff1e7; border: 1px solid #de570c; border-radius: 4px; font-size: 12px; font-weight: 900; line-height: 1; }
.option-price b { min-width: 0; font-weight: 900; text-align: left; }
.portion-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 7px; color: var(--orange); font-size: 11px; font-weight: 900; white-space: nowrap; }
.portion-prices span { display: flex; align-items: center; justify-content: flex-start; min-width: 0; gap: 2px; }
.portion-prices em { flex: 0 0 auto; padding: 3px 3px 2px; color: #b83f00; background: #fff1e7; border: 1px solid #de570c; border-radius: 4px; font-size: 11.5px; font-style: normal; font-weight: 900; line-height: 1; }
.portion-prices b { min-width: 0; color: var(--ink); font-size: 12.5px; }
.item-note { margin-top: 6px; color: var(--orange); font-size: 12.5px; font-weight: 900; text-align: center; }

.order-band { display: grid; grid-template-columns: 390px 354px 388px 404px; min-height: 0; border-top: 2px solid var(--charcoal); }
.utility-panel { min-width: 0; min-height: 0; overflow: hidden; padding: 19px 20px 15px; border-right: 1px solid #bfc1c2; }
.set-panel { background: var(--orange-pale); }
.half-panel { background: #fff; }
.sides-panel { background: var(--panel); }
.section-heading { display: flex; align-items: center; min-width: 0; height: 36px; margin-bottom: 9px; }
.section-heading h2 { flex: 0 0 auto; margin: 0; color: var(--orange); font-family: "Arial Narrow", "SUIT", sans-serif; font-size: 30px; font-weight: 900; line-height: 1; }
.section-heading p { flex: 1 1 auto; min-width: 0; overflow: hidden; margin: 1px 0 0 10px; color: #252525; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.section-heading.ruled::after { content: ""; flex: 1 1 18px; min-width: 8px; height: 1px; margin-left: 8px; background: #555; }

.set-list { display: grid; grid-template-rows: repeat(3, 1fr); height: 285px; }
.set-row { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 0; border-bottom: 1px solid #e8d9c9; }
.set-row:last-child { border-bottom: 0; }
.set-index { display: grid; width: 35px; height: 40px; place-items: center; color: #fff; background: var(--orange); font-size: 17px; font-weight: 900; }
.set-content { min-width: 0; }
.set-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.set-title h3 { overflow: hidden; margin: 0; font-size: 22px; font-weight: 900; white-space: nowrap; }
.set-title strong { flex: 0 0 auto; padding: 4px 9px; color: #fff; background: var(--orange); border-radius: 999px; font-size: 14px; font-weight: 900; line-height: 1; }
.set-content p { display: flex; align-items: center; overflow: hidden; gap: 6px; margin: 7px 0 0; color: #252525; font-size: 13px; font-weight: 650; white-space: nowrap; }
.set-content p span { min-width: 0; overflow: hidden; }
.set-content p b { color: var(--orange); }
.set-content p span:nth-of-type(2) { color: var(--orange); font-weight: 850; }

.half-list { display: grid; grid-template-rows: repeat(4, 1fr); height: 285px; }
.half-row { display: grid; grid-template-columns: 29px minmax(0, 1fr); grid-template-rows: 25px 25px; column-gap: 8px; align-content: center; min-height: 0; border-bottom: 1px solid #d9dbdc; }
.half-row:last-child { border-bottom: 0; }
.half-index { grid-row: 1 / 3; display: grid; width: 28px; height: 34px; place-items: center; align-self: center; color: var(--orange); border: 1.5px solid var(--orange); font-size: 13px; font-weight: 900; }
.half-name { display: flex; align-items: center; min-width: 0; gap: 6px; font-size: 15.5px; font-weight: 850; white-space: nowrap; }
.half-name em { overflow: hidden; color: var(--orange); font-style: normal; }
.half-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.half-price-grid span { display: flex; align-items: center; justify-content: flex-start; min-width: 0; gap: 2px; color: var(--orange); font-size: 10px; font-weight: 900; white-space: nowrap; }
.half-price-grid em { flex: 0 0 auto; padding: 2px 3px 1px; color: #b83f00; background: #fff1e7; border: 1px solid #de570c; border-radius: 3px; font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 1; }
.half-price-grid b { min-width: 0; color: var(--ink); font-size: 12.5px; font-weight: 900; }

.side-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; height: 285px; }
.side-group { min-width: 0; padding-right: 9px; border-right: 1px solid #cdd0d1; }
.side-group:last-child { padding-right: 0; border-right: 0; }
.side-item { display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 31px; font-size: 13px; font-weight: 850; }
.side-item span { overflow: hidden; white-space: nowrap; }
.side-item b { min-width: 0; color: var(--orange); font-size: 13.5px; font-weight: 900; text-align: left; white-space: nowrap; }

.dark-panel { display: grid; grid-template-rows: 140px minmax(0, 1fr); min-width: 0; min-height: 0; color: #fff; background: var(--charcoal); }
.drink-section, .sauce-section { min-width: 0; min-height: 0; overflow: hidden; padding: 18px 19px 13px; }
.drink-section { border-bottom: 1px solid #767777; }
.dark-heading { display: flex; align-items: center; height: 30px; }
.dark-heading h2 { flex: 0 0 auto; margin: 0; font-family: "Arial Narrow", "SUIT", sans-serif; font-size: 29px; font-weight: 900; }
.dark-heading::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 13px; background: #c7c7c7; }
.drink-grid { display: grid; grid-template-columns: repeat(var(--drink-count, 4), minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.drink-item { min-width: 0; }
.drink-item strong { display: block; overflow: hidden; font-size: 13.5px; font-weight: 900; white-space: nowrap; }
.drink-item small { display: block; overflow: hidden; margin-top: 2px; color: #e2e2e2; font-size: 8.5px; font-weight: 600; white-space: nowrap; }
.drink-item span { display: block; overflow: hidden; margin-top: 5px; color: var(--orange); font-size: 14.5px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.sauce-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; column-gap: 18px; height: 154px; margin-top: 8px; }
.sauce-item { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; border-right: 1px solid #5f6060; padding-right: 12px; font-size: 12.5px; font-weight: 700; }
.sauce-item:nth-child(n + 6) { border-right: 0; padding-right: 0; }
.sauce-item span { overflow: hidden; white-space: nowrap; }
.sauce-item b { flex: 0 0 auto; min-width: 0; color: var(--orange); font-size: 13.5px; font-weight: 900; text-align: left; }

.orientation-notice { display: none; }

@media (orientation: portrait) {
  .menu-sheet { display: none; }
  .orientation-notice {
    display: grid;
    width: 100vw;
    height: 100dvh;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 40px;
    color: #1d1f20;
    text-align: center;
    background: #fff;
  }
  .orientation-notice strong { font-size: 28px; line-height: 1.25; }
  .orientation-notice p { margin: -8px 0 0; color: #666; font-size: 16px; line-height: 1.5; }
  .rotate-device { position: relative; width: 78px; height: 104px; border: 5px solid #1d1f20; border-radius: 10px; transform: rotate(-18deg); }
  .rotate-device::before { content: ""; position: absolute; top: 8px; left: 50%; width: 22px; height: 4px; border-radius: 2px; background: #1d1f20; transform: translateX(-50%); }
  .rotate-device span { position: absolute; right: -42px; bottom: -24px; width: 54px; height: 54px; border-right: 6px solid #f15a00; border-bottom: 6px solid #f15a00; border-radius: 50%; transform: rotate(-8deg); }
  .rotate-device span::after { content: ""; position: absolute; right: -7px; bottom: 34px; width: 15px; height: 15px; border-right: 6px solid #f15a00; border-bottom: 6px solid #f15a00; transform: rotate(-42deg); }
  body.editor-open .orientation-notice { display: none; }
}