/* ===== ORDER VIEW (오더 시스템형) ===== */
html, body { height: 100%; overflow: hidden; }   /* 본문 스크롤 제거 — 페이지 단위 스냅만 */
.order { height: 100svh; height: 100dvh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; position: relative; }

/* 상단 고정 영역: 브랜드행 + 분류행을 하나의 sticky 로 묶어 스크롤 떨림 방지 */
.order__top {
  position: relative; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.order__top .topbar {
  position: static; background: transparent; backdrop-filter: none; border-bottom: 0;
  padding-bottom: 8px;
}

/* 분류 바: (좌) 선택된 분류 이름  /  (우) 분류 탭 */
.cat-tabs {
  display: flex; align-items: center; gap: 16px;
  padding: 4px var(--pad-page) 10px;
}
/* 좌측 — 현재 선택한 분류 이름 (아래에 있던 것을 여기로 이동) */
.cat-current { margin-right: auto; display: flex; align-items: baseline; gap: 10px;
  min-width: 0; white-space: nowrap; }
.cat-current__jp {
  font-family: var(--font-ja); font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px); color: var(--indigo-deep); line-height: 1;
}
.cat-current__en {
  font-family: var(--font-en-title); letter-spacing: .04em;
  color: var(--ink-soft); font-size: 13px;
}
/* 우측 — 분류 탭 목록(가로 스크롤) */
.cat-tabs__list {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  min-width: 0; justify-content: flex-end;
}
.cat-tabs__list::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: 0 0 auto; border: 0; background: transparent;
  color: var(--ink-soft); padding: 8px 14px; border-radius: 999px;
  font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  transition: all .15s; position: relative;
}
html[lang="ja"] .cat-tab { font-family: var(--font-ja); }
html[lang="en"] .cat-tab { font-family: var(--font-en-title); }
html[lang="ko"] .cat-tab { font-family: var(--font-ko); }
.cat-tab[aria-selected="true"] { color: var(--indigo); font-weight: 600; }
.cat-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.cat-tab:hover { color: var(--ink); }

/* 본문 — 화면 가득(최대폭 제한 없음) */
/* 본문 — 페이지 단위 세로 스냅 스크롤 컨테이너 */
.order__main {
  flex: 1; min-height: 0; width: 100%; margin: 0; padding: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.order__main::-webkit-scrollbar { display: none; }

/* 메뉴 카드 — 한 화면(페이지) = 3열 × 2줄(최대 6개)이 가득 차고,
   초과분은 아래 페이지로 넘어가 페이지 단위로 스냅됩니다 */
.menu-page {
  height: 100%; box-sizing: border-box;
  padding: clamp(12px, 1.8vh, 22px) var(--pad-page);
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  scroll-snap-align: start; scroll-snap-stop: always;
  /* 화면에 들어올 때 부드럽게 떠오르듯 나타남 */
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.menu-page.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-page { transition: none; opacity: 1; transform: none; }
}

/* 페이지 인디케이터(우측 점) — 페이지가 2개 이상일 때만 표시 */
.page-dots {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; z-index: 40;
}
.page-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 1px solid color-mix(in srgb, var(--indigo) 45%, transparent);
  background: transparent; cursor: pointer; transition: all .2s;
}
.page-dot.is-active { background: var(--indigo); border-color: var(--indigo); transform: scale(1.15); }

.dish {
  background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: var(--card-radius); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer;
}
.dish:hover { transform: translateY(-4px); box-shadow: 0 14px 30px var(--shadow);
  border-color: color-mix(in srgb, var(--indigo) 40%, var(--hairline)); }

.dish__media { flex: 1 1 auto; min-height: 0; background: var(--paper-2);
  position: relative; overflow: hidden; }
.dish__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; }
.dish:hover .dish__media img { transform: scale(1.05); }

/* 사진 없을 때 플레이스홀더 */
.dish__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 8px;
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 12px, color-mix(in srgb,var(--paper) 60%, var(--paper-2)) 12px 24px);
}
.dish__placeholder svg { width: 34px; height: 34px; opacity: .5; }
.dish__placeholder span { font-size: 11px; letter-spacing: .2em; font-family: var(--font-en-desc); }

/* 본문 — 이름(좌, 70%) · 가격(우, 30%) 가로 배치 → 본문 높이↓, 사진 높이↑ */
.dish__body { padding: 10px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; }
.dish__name {
  flex: 7 1 0; min-width: 0;
  font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;   /* 2줄 높이 확보 → 1줄/2줄이어도 카드 균형 유지 */
}
.dish[data-lang="ja"] .dish__name { font-family: var(--font-ja); }
.dish[data-lang="en"] .dish__name { font-family: var(--font-en-title); font-weight: 400; font-size: 17px; letter-spacing: .005em; }
.dish[data-lang="ko"] .dish__name { font-family: var(--font-ko); }
/* 서브타이틀(영문명) — Cinzel */
.dish__sub { font-family: var(--font-en-title); font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: var(--ls-sub); line-height: var(--lh-sub); margin: -2px 0 0; }
/* 디스크립션(영문) — Poppins */
.dish__desc { font-family: var(--font-en-desc); font-size: 12.5px; color: var(--ink-soft); margin: 0;
  letter-spacing: var(--ls-desc); line-height: var(--lh-desc);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish__foot { flex: 3 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.dish__price {
  font-family: var(--font-num); font-size: 20px; font-weight: 600;
  color: var(--indigo); line-height: 1.1; white-space: nowrap;
}
.dish__price small { font-size: 12px; color: var(--ink-soft); margin-right: 1px; }
.dish__price--tba { font-family: var(--font-en-desc); font-size: 12px; color: var(--ink-soft);
  letter-spacing: .04em; text-align: right; line-height: 1.3; }

/* ===== 라이트박스(이미지 팝업) ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: rgba(10,16,24,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.lightbox__close:hover { background: rgba(255,255,255,.16); }
.lightbox__close svg { width: 20px; height: 20px; }

.lightbox__stage { flex: 1; min-height: 0; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 44px); position: relative; }

.lightbox__figure { display: flex; flex-direction: column; align-items: flex-start;
  max-width: 92vw; max-height: 86vh; margin: 0; }
.lightbox__imgwrap { position: relative; display: inline-block; line-height: 0;
  animation: lbslide .28s ease; }
@keyframes lbslide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.lightbox__img {
  display: block; max-width: 92vw; max-height: 74vh; width: auto; height: auto;
  object-fit: contain; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.55); background:#000;
}
/* 사진 없을 때 라이트박스 플레이스홀더 */
.lightbox__ph { width: min(72vw, 720px); aspect-ratio: 4 / 3; border-radius: 8px;
  display: grid; place-items: center; gap: 10px; color: rgba(255,255,255,.6);
  background: repeating-linear-gradient(45deg, #1a242f 0 14px, #20303c 14px 28px); }
.lightbox__ph svg { width: 40px; height: 40px; }
.lightbox__ph span { font-family: var(--font-en-desc); letter-spacing: .2em; font-size: 12px; }

/* 이미지 위 좌상단: 메뉴 이름 */
.lightbox__name {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 16px 18px 36px;
  color: #fff; font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
  border-radius: 8px 8px 0 0; pointer-events: none;
}
.lightbox[data-lang="ja"] .lightbox__name { font-family: var(--font-ja); }
.lightbox[data-lang="en"] .lightbox__name { font-family: var(--font-en-title); }
.lightbox[data-lang="ko"] .lightbox__name { font-family: var(--font-ko); }
.lightbox__name small { display:block; font-family: var(--font-en-title); font-weight:500;
  font-size: 13px; letter-spacing: var(--ls-sub); color: rgba(255,255,255,.8); margin-top: 4px; }

/* 이미지 아래 좌하단: 디스크립션 */
.lightbox__desc {
  font-family: var(--font-en-desc); color: rgba(255,255,255,.82);
  letter-spacing: var(--ls-desc); line-height: var(--lh-desc); font-size: 14px;
  margin: 14px 2px 0; max-width: 70ch; text-align: left;
}

/* 좌우 네비게이션 */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  display: grid; place-items: center; transition: background .15s; z-index: 2;
}
.lightbox__nav:hover { background: rgba(255,255,255,.18); }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: clamp(8px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 28px); }
.lightbox__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); color: rgba(255,255,255,.7); font-size: 15px; letter-spacing: .06em;
}

/* 모바일/좁은 화면 — 2열 × 3줄(최대 6개)로 한 화면 채움 */
@media (max-width: 760px) {
  .menu-page { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .cat-current__en { display: none; }
  .dish__body { padding: 10px 12px 12px; }
  .dish__name { font-size: 15px; }
  .dish[data-lang="en"] .dish__name { font-size: 16px; }
  .dish__desc { display: none; }
  .dish__price { font-size: 20px; }
  .lightbox__nav { width: 44px; height: 44px; }
}
/* ── 스마트폰(세로, ≤600px) — 한 줄 1개 카드 · 자연 스크롤 보기 ── */
@media (max-width: 600px) {
  /* 상단 한 줄 유지: 여백·버튼 모두 축소해 DINING NAMI 전체 표시 */
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .back-btn, .lang-switch button { white-space: nowrap; }
  .back-btn { padding: 5px 9px; font-size: 12px; flex: 0 0 auto; }
  .back-btn svg, .back-btn .arrow { width: 12px; height: 12px; }
  .lang-switch { padding: 2px; flex: 0 0 auto; }
  .lang-switch button { padding: 5px 7px; font-size: 11.5px; }
  .topbar__brand { font-size: 12px; letter-spacing: .01em; min-width: 0;
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__brand small { display: none; }
  .topbar__spacer { display: none; }   /* 모바일: 브랜드 표기 공간 최대 확보 */

  /* 탭줄 겹침 원인이던 '현재 분류명'은 숨김 — 활성 탭 밑줄이 그 역할 대체 */
  .cat-current { display: none; }
  .cat-tabs__list { justify-content: flex-start; }

  /* 카드: 한 줄에 1개, 페이지 스냅 대신 위아래 자연 스크롤 */
  .order__main { scroll-snap-type: none; }
  .menu-page {
    height: auto; grid-template-columns: 1fr; grid-template-rows: none;
    gap: 14px; padding: 12px var(--pad-page);
    opacity: 1; transform: none; transition: none;  /* 긴 목록에서 등장효과 해제 */
  }
  .menu-page + .menu-page { padding-top: 2px; }
  .dish { height: auto; }
  .dish__media { flex: none; aspect-ratio: 3 / 2; }  /* 사진 원본 비율(2000×1333) 그대로 */
  .page-dots { display: none; }
}

/* ── 카테고리 탭 — 우측에 더 있음을 알리는 힌트(그라데이션+›) ── */
.cat-tabs { position: relative; }
.cat-tabs::after {
  content: '\203A';
  position: absolute; right: 0; top: 0; bottom: 0; width: 46px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; font-size: 20px; line-height: 1; color: var(--indigo);
  background: linear-gradient(to right, transparent, var(--paper) 62%);
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.cat-tabs.has-more::after { opacity: .9; }
.cat-tabs::before {
  content: '\2039';
  position: absolute; left: 0; top: 0; bottom: 0; width: 46px;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 8px; font-size: 20px; line-height: 1; color: var(--indigo);
  background: linear-gradient(to left, transparent, var(--paper) 62%);
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1;
}
.cat-tabs.has-prev::before { opacity: .9; }