[hidden] { display: none !important; }

:root {
  /* Warm, understated hanjeongsik (한정식) palette: a deep parchment ground,
     a quiet wine red instead of a bright brick red, and a muted antique
     gold for hairlines/accents — picked over the brighter first draft so
     the site reads composed rather than casual, without going to a dark
     background. */
  --red: #7a2028;
  --red-dark: #5c1620;
  --navy: #16213e;
  --cream: #f6ead2;
  --surface: #fffdf8;
  --gold: #a9822e;
  --ink: #241a12;
  --muted: #8a7250;
  --line: #e3cd9e;
  --radius: 16px;
  --font-display: "Noto Serif KR", "Noto Serif TC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cream);
  color: var(--ink);
}

.order-app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: 100px; background: var(--cream); }

/* Hero */
.hero {
  position: relative;
  height: 180px;
  background: linear-gradient(150deg, #2f2016, #1a120b);
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid var(--gold);
}
.lang-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.history-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-admin-pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Store header */
.store-header {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 16px 12px;
  margin-top: -28px;
  position: relative;
}
.store-avatar {
  width: 64px; height: 64px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; flex-shrink: 0;
  /* overflow stays visible (not hidden, like it used to be) so the seasonal
     taegeuk artwork's flowers/leaves/etc. — which extend past the plain
     taegeuk circle — aren't clipped away by this badge's round frame. The
     img itself is sized larger than the frame below and centered over it. */
}
.store-avatar img {
  width: 92px; height: 92px; display: block;
  filter: drop-shadow(0 3px 6px rgba(26, 18, 11, 0.35));
}
.store-header-text { flex: 1; min-width: 0; padding-top: 34px; }
.store-header-text h1 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.table-badge {
  display: inline-block;
  background: none;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.store-info-btn {
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* 매장(dine-in) / 포장(takeout) segmented control — two tabs joined into one
   rounded pill (not separate pill buttons like .cat-tabs below), so they
   read as a single either/or toggle rather than a list of choices. Lives
   inside the item detail sheet (#itemSheet, per-dish choice) — no
   horizontal margin needed since .sheet already has its own padding. */
.order-type-tabs {
  display: flex;
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.order-type-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.order-type-tab.active {
  background: var(--ink);
  color: var(--cream);
}

/* Notice banner */
.notice-banner {
  margin: 0 16px 14px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}

/* 영업시간 밖 안내 — 손님이 메뉴는 그대로 보되 주문만 막힌 상태.
   사장님: "메뉴는 보이고 주문만 잠금". 그래서 메뉴를 가리지 않는 띠 하나로
   두고, 잠긴 버튼(.is-closed)은 눌리지 않는다는 게 눈으로 보이게 한다. */
.closed-banner {
  margin: 0 16px 14px;
  background: #8a1c1c;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.closed-banner b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
/* 직원 모드 — 잠기지는 않았고, 지금이 영업시간 밖이라는 알림일 뿐이다.
   손님에게 보이는 붉은 띠와 같은 색이면 직원이 "막혔다" 로 읽는다. */
.closed-banner.staff-mode { background: #34506e; }

/* 자리가 옮겨졌을 때의 안내 — 확인 버튼 하나면 새 자리로 간다. */
/* 이미 결제한 라운드 — 목록에는 남되 합계에는 안 들어간다. 흐리게 두면
   손님이 "낸 것"과 "낼 것"을 한눈에 가른다. */
.history-item.paid { opacity: 0.6; }
.history-paid-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #e6efe6; color: #2f6b3a; font-size: 11px; font-weight: 700; vertical-align: middle;
}
.history-paid-note { margin-top: 10px; text-align: right; font-size: 13px; color: #6b6357; }

.moved-msg { font-size: 16px; line-height: 1.6; margin: 6px 0 14px; }
/* 어느 자리로 가는지 — 버튼은 「확인」 하나뿐이라 번호는 그 위에 크게. */
.moved-msg .moved-table { display: block; font-size: 40px; line-height: 1.2; margin-top: 8px; }
.moved-sub { font-size: 13px; opacity: 0.75; margin: 12px 0 0; }
.closed-banner .closed-sub {
  opacity: 0.9;
  font-size: 12px;
}
button.is-closed,
button.is-closed:hover {
  background: #b9b3ad;
  color: #f3f0ec;
  cursor: not-allowed;
}

/* Category tabs */
.cat-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 10px;
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cat-tabs button.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.search-bar { padding: 0 14px 10px; }
.search-bar input {
  width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; font-family: inherit; background: var(--surface);
}

/* Menu list */
.menu-list { padding: 4px 16px 20px; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; }
.no-results { text-align: center; color: var(--muted); padding: 30px 0; font-size: 13px; }
/* Lands scrollIntoView() below the sticky .cat-tabs-row instead of behind
   it — without this, clicking a category tab (see order.js) scrolls the
   section flush to the very top of the page, which is exactly where the
   sticky tab bar then pins itself, hiding the category title underneath
   it and making the jump look like it landed one row too far down. */
.cat-section { margin-bottom: 6px; scroll-margin-top: 54px; }
.cat-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 20px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.cat-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.item-row {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 22px -18px rgba(74,50,20,0.55);
  cursor: pointer;
  align-items: flex-start;
}
.item-row-text { flex: 1; min-width: 0; }
.item-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.item-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 5px; font-weight: 700; }
.badge-spicy { background: #f6e2df; color: var(--red); }
.badge-signature { background: none; border: 1px solid var(--gold); color: var(--gold); }
/* 牛/豬 icons next to the dish name in the menu list — matches the official
   printed menu, which puts the same icons right after the dish title. */
.item-meat-icons { display: inline-flex; align-items: center; gap: 2px; }
.item-meat-icons .option-icon { height: 16px; }
/* Same icons, slightly bigger, next to the item detail sheet's larger title
   (see #itemName in order.js openItemSheet). */
.sheet-body h2 .item-meat-icons { margin-left: 4px; }
.sheet-body h2 .item-meat-icons .option-icon { height: 20px; }
.item-price { font-weight: 800; font-size: 14px; margin-bottom: 4px; color: var(--red); }
.item-price-note { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.item-price-original { font-size: 12px; color: var(--muted); font-weight: 400; text-decoration: line-through; margin-right: 5px; }
.item-discount-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--red);
  background: #f6e2df; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.item-sub { color: var(--muted); font-size: 12px; line-height: 1.5; }
.item-row-allergens { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.allergen-badge-compact {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 12px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line);
}
.item-allergens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.allergen-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.item-row-photo {
  width: 84px; height: 84px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(150deg, #eeddb8, #ddc088);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; overflow: hidden;
  background-size: cover; background-position: center;
}
.item-unavailable { opacity: 0.4; pointer-events: none; }
/* 「오늘만」·「기간 지정」 품절 배지 (2026-09-29). 흐린 줄 안에서도 읽히게 진하게. */
.badge-soldout { background: #444; color: #fff; font-weight: 800; }

/* Cart FAB */
.cart-fab {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px;
  max-width: 528px; width: calc(100% - 28px);
  background: var(--ink); color: #fff; border: none; border-radius: 14px;
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 25;
}
#cartCount {
  background: rgba(255,255,255,0.25); border-radius: 999px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.cart-fab-label { flex: 1; text-align: left; }

/* Sheets / modals */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet h2 { font-family: var(--font-display); }
.sheet {
  background: var(--surface); width: 100%; max-width: 560px; border-radius: 20px 20px 0 0;
  padding: 18px; max-height: 88vh; overflow-y: auto; position: relative;
  animation: slideUp 0.2s ease-out;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-close {
  position: absolute; right: 14px; top: 14px; border: 1px solid var(--line); background: var(--cream);
  width: 32px; height: 32px; border-radius: 999px; font-size: 15px; cursor: pointer; z-index: 2;
}
.lock-backdrop {
  align-items: center; z-index: 999; background: rgba(0,0,0,0.65);
}
.lock-card {
  background: var(--surface); width: calc(100% - 48px); max-width: 320px; border-radius: 20px;
  padding: 32px 24px; text-align: center;
}
.lock-icon { font-size: 40px; margin-bottom: 12px; }
.lock-card h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.lock-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* 인원수 — 어른(大)/아이(小) 두 줄. 2026-09-10.
   손님이 서서 한 손으로 누르는 자리라 버튼을 44px 로 키웠다(모달의 다른
   .qty-row 보다 크다). 옆에 大/小 를 같이 적는 건 메뉴판·빌지가 쓰는 글자가
   그거라서, 홀에서 말이 어긋나지 않게 하려는 것이다. */
.party-rows { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 10px; }
.party-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px;
}
.party-label { display: flex; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 700; }
.party-label em { font-style: normal; font-size: 13px; color: var(--muted); }
.party-row .qty-row { margin-bottom: 0; gap: 10px; }
.party-row .qty-row button { width: 44px; height: 44px; font-size: 20px; }
.party-row .qty-row span { font-size: 19px; font-weight: 700; min-width: 32px; text-align: center; }
.party-total { font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 14px; min-height: 20px; }
#partySizeConfirmBtn[disabled] { opacity: 0.45; cursor: not-allowed; }

.toast-banner {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #2b2620; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13px; max-width: 88vw; text-align: center; z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.toast-banner.show { opacity: 1; }

.idle-warning-banner {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #2b2620; color: #fff; padding: 14px 18px; border-radius: 14px;
  font-size: 13px; max-width: 88vw; text-align: center; z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.idle-warning-banner p { margin: 0 0 10px; }
.idle-warning-actions { display: flex; gap: 8px; justify-content: center; }
.idle-warning-actions button {
  border: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
#idleExtendBtn { background: var(--red); color: #fff; font-weight: 700; }
#idleAckBtn { background: rgba(255,255,255,0.15); color: #fff; }
.sheet-photo {
  width: 100%; height: 180px; border-radius: 14px; margin-bottom: 12px;
  background: linear-gradient(150deg, #eeddb8, #ddc088); background-size: cover; background-position: center;
  border: 1px solid var(--line);
}
.sheet-body h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 20px; }
.sheet-sub { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
/* 설명은 크게, 눈에 띄는 칸으로(2026-10-04 사장님: "설명의 글자를 크게 표시될 수 있도록 … 고객이 주문시 이
   부분을 제대로 보지 못해, 공기밥이 제공된다는 사실을 모른채 공기밥을 별도로 주문하는 일이 지속적으로 발생").
   예전엔 13px 로 바로 위 회색 부제목과 같은 크기라 지나쳤다 — 이제 이름(20px) 다음으로 큰 글자, 굵게,
   연한 노란 바탕에 빨간 왼쪽 띠. 설명이 없는 메뉴는 빈 칸이 안 보이게. */
.sheet-desc {
  font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--ink);
  margin: 4px 0 14px; padding: 10px 12px;
  background: #fff4d6; border-left: 4px solid var(--red); border-radius: 10px;
}
.sheet-desc:empty { display: none; }
.sheet-price-info { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--red); }
.options-label { font-weight: 700; font-size: 13px; margin-bottom: 6px; }

.options-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.options-list button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px;
}
.options-list button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* 牛/豬 face icons (cropped from the restaurant's own PDF menu, see
   optionLabel() in order.js) shown inside option/mix-option buttons. */
.option-icon { height: 18px; width: auto; vertical-align: middle; display: inline-block; }
.mix-option-name .option-icon { height: 22px; }
.qty-row { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 8px; }
.qty-row button {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 18px; cursor: pointer;
}
#qtyVal { font-size: 17px; font-weight: 700; min-width: 24px; text-align: center; }
.mix-options { margin-bottom: 8px; }
.mix-options-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.mix-option-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
}
.mix-option-row .mix-option-name { font-weight: 700; font-size: 14px; }
.mix-option-row .qty-row { margin-bottom: 0; gap: 12px; }
.mix-option-row .qty-row button { width: 30px; height: 30px; font-size: 16px; }
.mix-option-row .qty-row span { font-size: 15px; font-weight: 700; min-width: 20px; text-align: center; }
.mix-options-hint { font-size: 12px; color: var(--muted); text-align: center; }
.add-btn {
  width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 12px;
  padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px;
}

/* Cart */
.cart-sheet h2 { margin-top: 0; }
.cart-items { margin-bottom: 12px; }
.cart-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-item-name { font-weight: 600; font-size: 14px; }
.cart-item-meta { font-size: 12px; color: var(--muted); }
.cart-item-right { text-align: right; white-space: nowrap; }
.cart-item-qty-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cart-item-qty-ctrl button {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
}
/* 「삭제」는 −/+ 와 같은 버튼이 아니다.
   2026-09-14 사장님이 손님 화면 사진을 보내셨다. 「移除」가 두 글자인데 위
   규칙의 24px 동그라미를 그대로 물려받아 移 / 除 로 쪼개져 있었다. 한국어
   「삭제」도 두 글자고 영어 「Remove」는 여섯 글자라, 세 언어 모두 깨진다.
   글자 수에 맞춰 가로로 늘어나는 알약으로 따로 둔다. */
.cart-item-qty-ctrl .cart-item-remove {
  width: auto; min-width: 0; height: 28px;
  padding: 0 14px; margin-left: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap;      /* 글자를 쪼개지 않는다 — 이게 핵심이다 */
  flex: none;               /* 좁은 화면에서 눌려 찌그러지지 않게 */
  cursor: pointer;
}
.cart-item-qty-ctrl .cart-item-remove:hover,
.cart-item-qty-ctrl .cart-item-remove:active {
  color: var(--red); border-color: var(--red);
}
.cart-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.cart-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.cart-vip-row { display: flex; justify-content: flex-end; font-size: 12px; font-weight: 700; color: var(--red); margin: -6px 0 8px; }
.history-vip-note { text-align: right; font-size: 12px; font-weight: 700; color: var(--red); margin-top: 4px; }

/* Order history (receipt) */
.history-sheet h2 { margin: 0 0 2px; }
.history-table-label {
  margin: 0 0 16px; font-size: 13px; color: var(--muted); font-weight: 700;
}
.history-list { margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.history-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px;
}
.history-item-name { font-weight: 600; }
.history-item-qty { color: var(--muted); font-weight: 500; margin-right: 4px; }
.history-item-price { font-weight: 700; white-space: nowrap; }
.history-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.history-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 17px; padding-top: 10px; border-top: 2px solid var(--ink);
}
.submit-btn {
  width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 12px;
  padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.submit-btn:disabled { opacity: 0.6; }
/* 보내는 중. 글자만으로는 「멈춘 것」과 「일하는 중」이 구별되지 않아서,
   돌아가는 것을 하나 붙인다 (2026-09-14: 손님이 한 번 더 눌렀다). */
.submit-btn.is-busy { opacity: 1; }
.submit-btn.is-busy::after {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 10px;
  vertical-align: -2px; border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff; border-radius: 50%; animation: hg-spin 0.7s linear infinite;
}
@keyframes hg-spin { to { transform: rotate(360deg); } }

/* Confirmation */
.confirm-sheet { text-align: center; }
.confirm-icon {
  width: 56px; height: 56px; border-radius: 999px; background: #e7f6ec; color: #1a8a44;
  display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 6px auto 14px;
}
.confirm-sheet h2 { margin: 0 0 6px; }
/* 수기 주문을 넣은 직원에게만 보이는 줄 — 곧 관리자 화면으로 돌아간다. */
.confirm-return-note { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.confirm-sheet p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.order-status-track { display: flex; justify-content: space-between; margin: 0 6px 22px; position: relative; }
.order-status-track::before {
  content: ""; position: absolute; top: 11px; left: 5%; right: 5%; height: 2px; background: var(--line); z-index: 0;
}
.status-step { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; flex: 1; }
.status-dot { width: 22px; height: 22px; border-radius: 999px; background: var(--line); border: 2px solid var(--surface); }
.status-step.done .status-dot { background: var(--ink); }
.status-step-label { font-size: 10px; color: var(--muted); }
.status-step.done .status-step-label { color: var(--ink); font-weight: 700; }

/* Membership (회원/VIP) sheet */
.member-sheet h2 { margin-top: 0; }
.member-hint { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.google-signin-btn {
  width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.member-msg { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.member-account-line { font-size: 13px; color: var(--muted); margin: 0 0 16px; font-weight: 600; }
#memberNoCard input, #memberNoCard { margin-bottom: 4px; }
#memberCardInput {
  width: 100%; box-sizing: border-box; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  font-size: 15px; font-family: inherit; margin-bottom: 10px;
}
.member-card-badge {
  display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px;
  background: #f0f0f0; color: var(--muted); margin-bottom: 10px;
}
.member-card-badge.active { background: #e7f6ec; color: #1a8a44; }
.member-card-badge.expired { background: #fdecea; color: var(--red); }
.member-card-info { font-size: 14px; line-height: 1.9; margin-bottom: 16px; }
.member-signout-btn {
  width: 100%; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 12px;
  padding: 11px; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* Store info sheet */
.info-rows { margin-top: 8px; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.info-label { color: var(--muted); flex-shrink: 0; }
.info-row span:last-child { text-align: right; }

/* Language sheet */
.lang-sheet h2 { margin-top: 0; }
.lang-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lang-option {
  padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: left;
}
.lang-option.active { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (min-width: 600px) {
  .cart-fab { width: 528px; }
}

/* VIP 카드 등록은 되돌릴 수 없는 동작이라 누르기 전에 눈에 띄게 안내한다
   (되돌리는 건 사장님만 — Admin > 회원(VIP) > 등록해제). */
.member-notice { color: #9a5b00; background: #fff6e5; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }

/* 메뉴 보기 전용(/menu-view, 2026-09-30) — 홈페이지 「전체 메뉴 열기」.
   인원·포장 정보를 묻지 않고, 담기·장바구니·주문 기록을 숨긴다. */
.view-only-banner {
  margin: 0 16px 14px; padding: 10px 14px; border-radius: 10px;
  background: #f3ead6; color: #6b4d12; font-size: 14px; font-weight: 700; text-align: center;
}
body.view-only #cartFab,
body.view-only #historyBtn,
body.view-only #itemOrderTypeTabs,
body.view-only #qtyRow,
body.view-only #qtyHint,
body.view-only #addToCartBtn { display: none !important; }