/* 프리텐다드 글꼴(앱 폴더에 포함, SIL OFL 1.1 — fonts/Pretendard-LICENSE.txt) */
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  --bg: #ffffff;
  --ink: #2f2f2f;
  --ink-strong: #1a1a1a;
  --accent: #e8452a;
  --muted: #b5b5b5;
  --font: "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  cursor: none;
}

/* 1900×1080 기준 화면을 모니터 크기에 맞춰 비율 그대로 확대·축소합니다. */
.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1900px;
  height: 1080px;
  transform-origin: 0 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

.section-title {
  position: absolute;
  font-size: 50px;
  line-height: 60px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.item {
  --k: 1;  /* 칸이 좁을 때 줄이는 비율 */
  position: absolute;
  height: calc(48px * var(--k));
  white-space: nowrap;
}

.item-name,
.item-price {
  position: absolute;
  top: 0;
  font-size: calc(35px * var(--k));
  line-height: calc(48px * var(--k));
  font-weight: 400;
}

.item-name { left: 0; }

.item-note {
  position: absolute;
  left: 0;
  top: calc(44px * var(--k));
  font-size: calc(24px * var(--k));
  line-height: calc(28px * var(--k));
  white-space: nowrap;
}

.item.is-highlight .item-name,
.item.is-highlight .item-price { color: var(--accent); }

.item.is-soldout .item-name,
.item.is-soldout .item-note { color: var(--muted); }

.item.is-soldout .item-price {
  color: var(--muted);
  font-size: calc(28px * var(--k));
  font-weight: 700;
}

.extras {
  position: absolute;
  font-size: 25px;
  line-height: 29px;
  font-weight: 700;
  color: var(--ink-strong);
}

.extras-line { position: relative; height: 29px; white-space: nowrap; }
.extras-value { position: absolute; top: 0; right: 0; }

.notice-block {
  position: absolute;
  font-size: 56px;
  line-height: 55px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0;
  white-space: nowrap;
}

.notice-block.is-account {
  font-size: 49px;
  line-height: 60px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.accent { color: var(--accent); }

.layer { position: absolute; inset: 0; }

/* 오른쪽 안내 이미지: 영역 안에 비율을 유지해 맞추고, 여러 장이면 부드럽게 전환합니다. */
.notice-images { position: absolute; overflow: hidden; }

.notice-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.notice-image.is-active { opacity: 1; }

/* 메뉴판 표시가 꺼져 있을 때의 대기 화면 */
.standby {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--bg);
  color: #c8c8c8;
  font-family: var(--font);
  font-size: clamp(20px, 2.4vw, 48px);
  font-weight: 400;
  text-align: center;
  cursor: default;
}
.standby[hidden], .stage[hidden], .fs-hint[hidden] { display: none; }

.standby-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 850px;
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid #e0c48f;
  border-radius: 12px;
  background: #fff4e0;
  color: #7a4a00;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.standby-login label { flex: 1 1 290px; word-break: keep-all; }
.standby-password {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #a77935;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: text;
}
.standby-confirm {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: #202020;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.standby-confirm:hover { background: #3a3a3a; }
.standby-password:focus-visible,
.standby-confirm:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.standby-login-error {
  flex-basis: 100%;
  max-width: 100%;
  color: #9d241b;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.fs-hint {
  position: fixed;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: var(--font);
  font-size: 18px;
  z-index: 10;
  pointer-events: none;
}