/* 서관면옥 메뉴판 전용 스타일.
   docs/design-system/design-system.md v1.0의 토큰을 그대로 옮긴다(그 문서가 단일 출처).
   원본 테마 CSS는 건드리지 않고, 이 파일의 모든 규칙은 .menu-board 아래로 격리한다.
   데스크톱 스텁 페이지는 .menu-board를 쓰지 않으므로 이 스타일의 영향을 받지 않는다(스펙 §5). */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

/* ---------- 모바일 메뉴판에서 홈페이지용 상단 크롬 숨김 ----------
   서브비주얼(대형 사진 배너 + 문구)과 SNB 경로(메뉴소개 / 메뉴판)는 홈페이지를
   둘러볼 때는 필요하지만, QR로 들어와 메뉴를 보고 주문하는 흐름에서는 첫 화면을
   통째로 차지해 방해가 된다. 상단은 헤더만 남기고 바로 메뉴로 들어간다.
   `:has(> .menu-board)`라 모바일 메뉴판에만 걸린다 — 데스크톱 스텁은 `.ssc`를 쓰므로
   영향받지 않고, 이 파일 자체가 메뉴판 경로에서만 로드되므로 다른 페이지와도 무관하다. */
.sub_content_wrapper:has(> .menu-board) .sub_visual,
.sub_content_wrapper:has(> .menu-board) .snb_wrap {
  display: none;
}

/* 서브비주얼이 밀어주던 자리가 사라지면 본문이 고정 헤더(position:fixed, 50px) 아래로
   파고들어 지점명이 로고와 겹친다. 헤더 높이만큼 상단 여백을 직접 확보한다. */
.sub_content_wrapper:has(> .menu-board) > .menu-board {
  padding-top: 50px;
}

/* 원본 테마는 이 래퍼에 overflow-x:hidden을 걸어 둔다(가로 스크롤 방지). 그러면 이 요소가
   스크롤 컨테이너가 되어 하단 안내의 position:sticky가 뷰포트가 아닌 이 래퍼를 기준으로
   잡혀 무력화된다. 메뉴판 본문은 가로로 넘치는 요소가 없으므로(카테고리 탭은 자체
   overflow-x로 처리) 여기서만 해제한다. */
.sub_content_wrapper:has(> .menu-board) {
  overflow: visible;
}
/* :has() 미지원 브라우저 대비 이중 안전장치. 이 파일은 메뉴판 경로에서만 로드되므로
   조건 없이 걸어도 다른 페이지에 영향이 없다. 위 규칙이 깨지면 sticky 전체가 무력화된다. */
.sub_content_wrapper {
  overflow: visible;
}

/* ---------- 메뉴판에서는 헤더를 '스크롤된 상태'로 고정 ----------
   원본 헤더는 최상단에서 투명 배경 + 흰 로고·흰 햄버거로 바뀐다. 사진 히어로가 깔린
   다른 페이지에서는 맞는 처리지만, 메뉴판은 배경이 밝은 종이색이라 흰 로고가 보이지 않는다.
   그래서 스크롤 여부와 무관하게 어두운 로고·어두운 햄버거·불투명 배경을 유지한다.
   `#hd`는 body 직계 자식이라 `.sub_content_wrapper`로는 닿지 않아 body에서 :has()를 건다.
   데스크톱 스텁은 `.menu-board`를 쓰지 않으므로 원본 헤더 동작 그대로다. */
body:has(.menu-board) #hd #hd_wrapper {
  background: var(--mb-paper, #F7F4EC);
  border-bottom: 1px solid rgba(76, 69, 65, 0.16);
}
/* 흰 로고(h_logo_1)를 끄고 어두운 로고(h_logo_2)를 항상 켠다.
   원본은 opacity·visibility·height 세 가지를 함께 전환하므로 셋 다 덮어써야 한다
   (opacity만 바꾸면 visibility:hidden·height:0이 남아 로고가 사라진다). */
body:has(.menu-board) #hd #logo img:first-child {
  opacity: 0;
  visibility: hidden;
  height: 0;
}
body:has(.menu-board) #hd #logo img:last-child {
  opacity: 1;
  visibility: visible;
  height: auto;
}
/* 상단 이동 버튼(#top_btn)은 화면 우하단에 fixed·z-index 99로 떠 있어, 메뉴판 하단의
   주문 안내(플로팅)와 정확히 겹친다. 메뉴판은 주문 안내가 하단의 주역이고 목록도 길지 않으니
   여기서는 상단 이동 버튼을 숨긴다. #top_btn은 #ft 안에 있어 body에서 :has()로 잡는다.
   !important가 필요하다 — 원본 스크립트가 스크롤 시 인라인 style="display: inline-block"을
   직접 넣으므로 인라인이 스타일시트를 이긴다. */
/* 메뉴판 위에서는 "메뉴판으로 돌아가기"가 무의미하다. return-on.css의
   #mb_return{display:flex!important}을 이기려면 여기가 더 구체적이어야 한다 —
   body:has(...) 한 겹을 더해 특이도를 올린다(둘 다 !important이므로). */
body:has(.menu-board) #mb_return {
  display: none !important;
}

body:has(.menu-board) #top_btn {
  display: none !important;
}

/* 햄버거 3선도 최상단에서 흰색이라 같이 어둡게 고정한다. */
body:has(.menu-board) #hd .gnb_menu_btn .bar,
body:has(.menu-board) #hd .gnb_menu_btn .bar::before,
body:has(.menu-board) #hd .gnb_menu_btn .bar::after {
  background: var(--mb-ink, #4C4541);
}

.menu-board {
  --mb-paper: #F7F4EC;
  --mb-paper-deep: #EBE6DE;
  --mb-ink: #4C4541;
  --mb-cream: #F3F0E2;
  --mb-text-2: #6E6863;
  /* 참고 사항용. 설명(--mb-text-2)보다 한 단 연하다. */
  --mb-text-3: #8A837D;
  --mb-border: rgba(76, 69, 65, 0.16);
  /* 인쇄 메뉴판의 카테고리 제목 버건디. 종이 배경 대비 6.91:1(AA 통과). */
  --mb-maroon: #8C3A32;

  /* 화면 상단에 고정되는 두 층의 높이. 앵커 스크롤 보정에 쓰므로 한 곳에서 관리한다.
     헤더는 원본 테마가 position:fixed로 잡은 50px, 탭은 아래 mb-tabs의 실측 높이다. */
  --mb-header-h: 50px;
  /* 탭바 실측 높이. 필터칩 서체를 고운바탕으로 바꾸며 51 → 52px가 됐다.
     이 값이 어긋나면 카테고리 앵커 스크롤이 그만큼 밀린다(scroll-margin-top). */
  --mb-tabs-h: 52px;
  /* 필터칩 강조 판정선 — 헤더+탭 바로 아래. */
  --mb-spy-line: calc(var(--mb-header-h) + var(--mb-tabs-h) + 8px);

  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--mb-paper);
  color: var(--mb-ink);
  line-height: 1.6;
}

/* ---------- 헤더: 로고 아래 장식선 없음(피드백 반영), 굵은 보더로만 구분 ---------- */
.menu-board .mb-header {
  padding: 16px 16px 14px;
  border-bottom: 2px solid var(--mb-ink);
}
.menu-board .mb-store-name {
  margin: 0;
  font: 700 1.5rem/1.2 'Gowun Batang', 'Noto Serif KR', serif;
  color: var(--mb-ink);
}

/* ---------- 카테고리 필 탭 ---------- */
/* 카테고리 탭은 스크롤해도 헤더 바로 밑에 붙어 있는다. 목록이 길어 어느 분류를 보고 있는지
   잃기 쉽고, 다른 분류로 건너뛰는 동작이 잦기 때문이다.
   z-index는 헤더(100)보다 낮고 본문·주문안내(10)보다 높게 둔다. */
.menu-board .mb-tabs {
  position: sticky;
  top: var(--mb-header-h);
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  /* 본문이 뒤로 지나가므로 배경이 불투명해야 한다. */
  background: var(--mb-paper);
  /* -webkit-overflow-scrolling: touch를 쓰지 않는다 — iOS Safari에서 이 속성이 붙은
     요소는 position:sticky가 무시된다. 최신 iOS는 이 속성 없이도 관성 스크롤이 된다. */
  border-bottom: 1px solid var(--mb-border);
  scrollbar-width: none;
}
.menu-board .mb-tabs::-webkit-scrollbar { display: none; }
.menu-board .mb-tab {
  flex-shrink: 0;
  padding: 6px 13px;
  /* 카테고리 제목·소제목과 같은 디스플레이 서체. 필터칩만 산세리프면 상단에서
     서체가 튄다(소제목을 고운바탕으로 바꾼 것과 같은 이유). */
  font: 600 0.8125rem/1 'Gowun Batang', 'Noto Serif KR', serif;
  border: 1px solid var(--mb-ink);
  border-radius: 999px;
  color: var(--mb-ink);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.menu-board .mb-tab--on,
.menu-board .mb-tab[aria-current='true'] {
  background: var(--mb-ink);
  color: var(--mb-cream);
}

/* ---------- 필터칩 강조: 보고 있는 섹션을 따라간다 ----------
   예전에는 첫 칩에 aria-current를 박아둬서, 스크롤해 다른 섹션을 봐도 첫 칩이
   계속 강조돼 있었다. 스크롤 위치는 정적 마크업이 알 수 없고 스크립트는 쓰지
   않으므로(전역 제약), 브라우저의 스크롤 연동 애니메이션으로 만든다.

   두 겹이다.
   1겹) 스크롤 연동 — 각 섹션이 자기 view-timeline을 만들고, 같은 번호의 칩이
        그 타임라인을 쓴다. timeline-scope로 이름을 .menu-board까지 끌어올려야
        형제 요소인 탭에서 참조할 수 있다.
        판정선: 헤더+탭 바로 아래에 1px 띠를 만들고(view-timeline-inset),
        그 띠가 섹션 안에 있는 동안만 켠다. 섹션들이 빈틈없이 이어져 있어
        어느 순간에도 정확히 하나만 켜진다.
   2겹) 칩을 눌렀을 때 — :target으로 잡는다. 1겹이 없는 브라우저에서도
        탭 이동만큼은 강조가 따라온다. 애니메이션이 일반 선언을 이기므로
        1겹이 동작하면 그쪽이 우선한다(더 정확하다).

   미지원 브라우저에서는 아무 칩도 강조되지 않는다 — 틀린 칩이 강조된 채로
   남는 것보다 낫다는 판단이다. */
.menu-board {
  timeline-scope: --mb-cat-0, --mb-cat-1, --mb-cat-2, --mb-cat-3, --mb-cat-4, --mb-cat-5, --mb-cat-6, --mb-cat-7, --mb-cat-8, --mb-cat-9, --mb-cat-10, --mb-cat-11;
}
.menu-board section[id^='cat-'] {
  /* 판정선 위/아래를 잘라 1px 띠만 남긴다. 100vh가 실제 뷰포트와 조금 달라도
     섹션이 연속이라 "어느 하나가 켜진다"는 성질은 유지된다 — 판정 위치만 살짝
     옮겨갈 뿐이다. */
  view-timeline-inset: var(--mb-spy-line) calc(100vh - var(--mb-spy-line) - 1px);
}
/* 첫 섹션만 예외 — 띠를 화면 하단까지 늘린다.
   페이지 최상단에서는 판정선이 아직 지점명 영역에 있어 어느 섹션에도 닿지 않는다.
   그러면 랜딩 화면에서 첫 카테고리가 보이는데도 칩이 하나도 안 켜져 고장처럼 보인다.
   첫 섹션을 "판정선 아래로 걸쳐 있으면 켜짐"으로 바꾸면 최상단부터 켜지고,
   끄는 시점은 그 섹션의 끝이 판정선을 지날 때 = 둘째 섹션이 켜지는 순간과
   정확히 같아서 겹치지 않는다. */
/* 마지막 카테고리는 반대쪽 예외다. 아래에 원산지·알레르기 안내문이 붙어 있어,
   1px 띠만 쓰면 안내문 구간에서 어느 칩도 켜지지 않는다.
   띠를 화면 top~판정선으로 잡으면 "판정선이 이 섹션 top을 지난 뒤로는 계속 켜짐"이
   되고, 켜지는 시점은 직전 섹션이 꺼지는 순간과 같아 겹치지 않는다. */
.menu-board section[id^='cat-'][data-last] {
  /* 위쪽은 화면 밖까지 넉넉히 연다(음수 inset = 확장). 그러지 않으면 안내문·사이트
     푸터까지 내려가 이 섹션이 화면 위로 완전히 빠졌을 때 교차가 끊겨 칩이 꺼진다. */
  view-timeline-inset: -300vh calc(100vh - var(--mb-spy-line));
}
.menu-board section#cat-0 {
  view-timeline-inset: var(--mb-spy-line) 0px;
}
.menu-board .mb-tab {
  animation: mb-chip-on linear both;
  animation-range: cover 0% cover 100%;
}
/* 범위 밖(0%/100%)에서는 꺼지고 안에서만 켜지도록 경계에서 값을 바꾼다.
   fill: both라 범위 이전에는 0% 프레임, 이후에는 100% 프레임이 적용된다. */
@keyframes mb-chip-on {
  0% { background: transparent; color: var(--mb-ink); }
  0.01%, 99.99% { background: var(--mb-ink); color: var(--mb-cream); }
  100% { background: transparent; color: var(--mb-ink); }
}
.menu-board section#cat-0 { view-timeline-name: --mb-cat-0; }
.menu-board .mb-tab[href='#cat-0'] { animation-timeline: --mb-cat-0; }
.menu-board section#cat-1 { view-timeline-name: --mb-cat-1; }
.menu-board .mb-tab[href='#cat-1'] { animation-timeline: --mb-cat-1; }
.menu-board section#cat-2 { view-timeline-name: --mb-cat-2; }
.menu-board .mb-tab[href='#cat-2'] { animation-timeline: --mb-cat-2; }
.menu-board section#cat-3 { view-timeline-name: --mb-cat-3; }
.menu-board .mb-tab[href='#cat-3'] { animation-timeline: --mb-cat-3; }
.menu-board section#cat-4 { view-timeline-name: --mb-cat-4; }
.menu-board .mb-tab[href='#cat-4'] { animation-timeline: --mb-cat-4; }
.menu-board section#cat-5 { view-timeline-name: --mb-cat-5; }
.menu-board .mb-tab[href='#cat-5'] { animation-timeline: --mb-cat-5; }
.menu-board section#cat-6 { view-timeline-name: --mb-cat-6; }
.menu-board .mb-tab[href='#cat-6'] { animation-timeline: --mb-cat-6; }
.menu-board section#cat-7 { view-timeline-name: --mb-cat-7; }
.menu-board .mb-tab[href='#cat-7'] { animation-timeline: --mb-cat-7; }
.menu-board section#cat-8 { view-timeline-name: --mb-cat-8; }
.menu-board .mb-tab[href='#cat-8'] { animation-timeline: --mb-cat-8; }
.menu-board section#cat-9 { view-timeline-name: --mb-cat-9; }
.menu-board .mb-tab[href='#cat-9'] { animation-timeline: --mb-cat-9; }
.menu-board section#cat-10 { view-timeline-name: --mb-cat-10; }
.menu-board .mb-tab[href='#cat-10'] { animation-timeline: --mb-cat-10; }
.menu-board section#cat-11 { view-timeline-name: --mb-cat-11; }
.menu-board .mb-tab[href='#cat-11'] { animation-timeline: --mb-cat-11; }

/* 2겹: 칩을 눌러 이동한 경우 */
.menu-board:has(section#cat-0:target) .mb-tab[href='#cat-0'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-1:target) .mb-tab[href='#cat-1'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-2:target) .mb-tab[href='#cat-2'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-3:target) .mb-tab[href='#cat-3'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-4:target) .mb-tab[href='#cat-4'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-5:target) .mb-tab[href='#cat-5'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-6:target) .mb-tab[href='#cat-6'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-7:target) .mb-tab[href='#cat-7'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-8:target) .mb-tab[href='#cat-8'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-9:target) .mb-tab[href='#cat-9'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-10:target) .mb-tab[href='#cat-10'] { background: var(--mb-ink); color: var(--mb-cream); }
.menu-board:has(section#cat-11:target) .mb-tab[href='#cat-11'] { background: var(--mb-ink); color: var(--mb-cream); }

/* ---------- 카테고리 제목(중분류) ----------
   인쇄 메뉴판의 처리를 그대로 가져왔다: 버건디 세리프 제목 + 오른쪽으로 뻗는 가는 선.
   버건디(#8C3A32)는 종이 배경 대비 6.91:1로 작은 텍스트에도 AA를 통과한다
   (낙관 레드 #ED1C23은 3.99:1이라 본문 텍스트에 쓰지 않는다 — 디자인 시스템 §2.1). */
/* 탭을 눌러 앵커로 이동할 때, 고정된 헤더+탭 높이만큼 위를 비워 카테고리 제목이
   가려지지 않게 한다. 보정이 없으면 제목을 지나쳐 첫 품목에 맞춰 멈춘다. */
.menu-board section[id^='cat-'] {
  scroll-margin-top: calc(var(--mb-header-h) + var(--mb-tabs-h));
}

.menu-board .mb-cat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 30px 16px 10px;
  font: 700 1.125rem/1.3 'Gowun Batang', 'Noto Serif KR', serif;
  letter-spacing: 0.01em;
  color: var(--mb-maroon);
}
.menu-board .mb-cat-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mb-maroon);
  opacity: 0.35;
}

/* ---------- 소제목(2단) ----------
   PDF의 마실거리 안 '프리미엄 탁주'처럼 카테고리 아래 한 단 더 묶는 제목.
   카테고리 제목보다 한 단 낮게 보이도록 크기·색을 낮추고 선 장식은 쓰지 않는다. */
.menu-board .mb-sub-title {
  margin: 0;
  padding: 18px 16px 4px;
  /* 카테고리 제목과 같은 디스플레이 서체를 쓴다 — 소제목만 산세리프면 같은 위계 흐름
     안에서 서체가 튄다. 위계는 서체가 아니라 크기·색으로 구분한다. */
  font: 700 0.875rem/1.3 'Gowun Batang', 'Noto Serif KR', serif;
  letter-spacing: 0.02em;
  color: var(--mb-text-2);
}

/* ---------- 품목 행: 사진은 있을 때만, 원산지 배지 없음 ---------- */
.menu-board .mb-item {
  display: flex;
  gap: 14px;
  /* 품목 사이 가로선을 두지 않는다(PM 결정) — 여백만으로 가른다.
     그래서 이 padding이 유일한 구분 장치다. 줄이면 품목이 붙어 보인다. */
  padding: 14px 16px;
  /* 사진 상단과 메뉴명 상단을 맞춘다(PM 결정). 가운데 정렬도 시도했지만, 품목 목록은
     각 행의 시작 지점이 가로로 일정해야 읽기 쉽다. */
  align-items: flex-start;
}
/* 58px에서 1.7배(2026-08, "사진이 너무 작다" 피드백). 음식 사진이 메뉴판의 주된
   판단 근거인데 58px에서는 무엇인지 알아보기 어려웠다. */
.menu-board .mb-item-thumb {
  /* 58 → 99 → 129px. "더 키워달라"가 세 번째다. 이 이상 키우면 텍스트 폭이
     215px 밑으로 내려가 품목 이름이 줄바꿈되기 시작한다(측정값). */
  width: 129px;
  /* 가로 4 : 세로 3. 자산도 400×300으로 크롭했으므로 object-fit이 추가로
     잘라내지 않는다 — 129px 표시 기준 3배 밀도(387px)까지 덮는다. */
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--mb-border);
  /* 가로세로비를 aspect-ratio로 잡을 때 이미지의 고유 비율이 개입하지 않도록. */
  display: block;
}
.menu-board .mb-item-body {
  flex: 1;
  min-width: 0;
  /* 행 높이만큼 늘린다(사진이 텍스트보다 높은 행이 많다). 그래야 '자세히 보기'를
     margin-top: auto로 행의 실제 하단에 붙일 수 있다.
     .mb-item은 align-items: flex-start라 이름은 계속 사진 상단에 맞는다. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.menu-board .mb-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.menu-board .mb-item-name {
  margin: 0;
  font: 700 0.9375rem/1.3 'Gowun Batang', 'Noto Serif KR', serif;
}
.menu-board .mb-item-price {
  flex-shrink: 0;
  /* 이름·카테고리 제목·필터칩과 같은 디스플레이 서체. 가격만 산세리프면
     한 줄 안에서 이름과 서체가 갈린다. */
  font: 600 0.875rem/1.3 'Gowun Batang', 'Noto Serif KR', serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* 복수가(작은반·큰반 등)는 문자열이 길어 이름을 밀어내므로 다음 줄에 왼쪽 정렬로 둔다. */
.menu-board .mb-item-price--stacked {
  display: block;
  margin: 3px 0 0;
  text-align: left;
}
.menu-board .mb-item-blurb {
  margin: 3px 0 0;
  font-size: 0.75rem;
  color: var(--mb-text-2);
}
/* 참고 사항 — 선택 옵션·추가 금액·원산지 표시. 음식 설명이 아니라 조건이므로
   설명 문단과 떼어 놓고 한 단 낮춘다(원본 메뉴판도 줄을 분리해 적는다).
   설명보다 작게·연하게 하되, 추가 금액이 걸린 정보라 읽히기는 해야 해서
   글머리표로 항목임을 드러낸다. */
/* 마실거리는 대부분 사진 없는 한 줄짜리 행이라, 사진 행에 맞춰 잡은 세로 여백이
   과하게 벌어져 보인다. 20% 줄인다(PM 결정). 구분선을 없앤 뒤로 이 여백이 유일한
   구분 장치이므로 더 줄이면 항목이 붙어 보인다.
   id가 아니라 data-category로 잡는 이유: id(cat-N)는 순서에 묶여 있어 카테고리가
   재배열되면 엉뚱한 섹션에 걸린다. */
.menu-board section[data-category='마실거리'] .mb-item {
  /* 0.8 → 0.72 (기준 14px 대비 다시 10% 축소). */
  padding-block: calc(14px * 0.72);
}
/* 소분류 사이는 반대로 벌린다. 목적은 "항목 간격 < 소분류 간격"을 뚜렷하게 만드는 것 —
   항목을 좁히고 소제목 앞을 넓혀 둘의 차이를 키운다(기준 18px에서 +20%). */
.menu-board section[data-category='마실거리'] .mb-sub-title {
  padding-top: calc(18px * 1.2);
}

.menu-board .mb-item-notes {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.menu-board .mb-item-notes li {
  position: relative;
  padding-left: 9px;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--mb-text-3, #8A837D);
}
.menu-board .mb-item-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  /* 글자 첫 줄 가운데에 맞춘다(11px × 1.5 = 16.5px 줄높이). */
  top: 7px;
  width: 3px;
  height: 3px;
  background: currentColor;
  opacity: 0.55;
}

/* ---------- 펼칠 수 있음을 알리는 표시 ----------
   아코디언이 있는지조차 몰라 누를 생각을 못 하는 경우를 막는다(PM 지시 2026-09-07).
   주목도는 낮게 — 메뉴 이름·가격을 읽는 데 방해가 되면 안 된다.
   링크가 없는 품목에는 <details>가 아예 없어 이 표시도 나오지 않는다. 즉
   "표시가 있으면 열린다"가 성립한다. */
.menu-board .mb-item-more {
  /* 앞의 요소들이 얼마나 길든 행의 하단에 붙는다. */
  margin: 8px 0 0;
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--mb-text-3);
}
/* 토글 꺾쇠. 아이콘 파일 없이 테두리 두 변을 돌려 만든다. */
.menu-board .mb-item-more::before {
  content: '';
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* 닫힘: '>' — 오른쪽을 가리킨다. */
  transform: rotate(-45deg);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 열림: 아래를 가리킨다. 텍스트는 그대로 두고 방향만으로 상태를 알린다. */
.menu-board details[open] .mb-item-more::before {
  transform: rotate(45deg);
}

/* ---------- 한글 줄바꿈 ----------
   한글은 기본 규칙상 아무 글자에서나 끊긴다 — "제주메밀 순면 평양냉/면"처럼 단어가
   쪼개진다. 사진을 키워 텍스트 폭이 좁아지면서 드러났다.
   원본 테마(mobile.css)가 `p { word-break: break-all }`을 걸고 있어서 .menu-board에
   상속용으로 얹는 것만으로는 안 된다 — 직접 매칭 규칙이 상속을 이긴다.
   그래서 요소를 직접 지목한다. */
.menu-board p,
.menu-board li,
.menu-board h2,
.menu-board h3,
.menu-board a {
  word-break: keep-all;
}

/* ---------- 사진 확대 레이어(:target) ----------
   클라이언트 스크립트 없이 만든다. 썸네일 링크가 해시를 바꾸면 :target이 걸리고,
   닫기는 매칭되지 않는 해시(#_)로 보내 해제한다. */
.menu-board .mb-item-thumb-link {
  display: block;
  flex-shrink: 0;
  /* 링크지만 밑줄·색 변화를 주지 않는다 — 보이는 건 사진뿐이다. */
  line-height: 0;
  /* 사진은 텍스트가 아니라 선택할 이유가 없다. 눌렀을 때 선택 블록이 잡히거나
     드래그가 시작되는 것을 막는다(품목 이름·설명은 그대로 선택 가능하다). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mb-lightbox {
  display: none;
}
.mb-lightbox:target {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  /* 헤더(z-index 99)와 복귀 버튼(99)보다 위에 와야 한다. */
  z-index: 200;
  padding: 16px;
  /* 0.92에서는 헤더의 밝은 배경(--mb-paper)이 상단에 띠처럼 비쳐 보였다. */
  background: rgba(35, 31, 29, 0.97);
}
/* 배경 전체가 닫기 영역이다. 사진 뒤에 깔리므로 사진을 눌러도 닫힌다 —
   확대해서 본 다음 아무 데나 누르면 닫히는 것이 모바일에서 기대되는 동작이다. */
.mb-lightbox-back {
  position: absolute;
  inset: 0;
  display: block;
}
/* 사진 + 닫기 버튼을 한 덩어리로 세로로 쌓아, 버튼이 항상 사진 바로 아래에 온다.
   사진 높이는 가변이므로 절대 위치로는 맞출 수 없다.
   프레임 자체는 포인터를 받지 않아, 사진이든 여백이든 누르면 뒤의 닫기 영역이 눌린다.
   닫기 버튼만 예외로 포인터를 받는다. */
.mb-lightbox-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}
.mb-lightbox img {
  max-width: 100%;
  /* flex 아이템이 줄어들 수 있게 해야 사진+버튼이 화면 안에 들어온다. */
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 어두운 배경 위에서 사진 경계를 드러낸다. */
  border: 1px solid rgba(247, 244, 236, 0.25);
}
/* 주목도는 낮게 — 아무 데나 눌러도 닫히므로 이건 "닫을 수 있다"는 안내에 가깝다. */
.mb-lightbox-close {
  pointer-events: auto;
  flex-shrink: 0;
  padding: 7px 18px;
  border: 1px solid rgba(247, 244, 236, 0.3);
  color: rgba(247, 244, 236, 0.7);
  background: transparent;
  font: 500 0.8125rem/1 'Pretendard Variable', Pretendard, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* ---------- 추가 구성(섹션 하단 모음) ----------
   설야멱 추가·쌈 추가·사리 추가처럼 특정 메뉴에 얹는 항목이다. 품목 행으로 반복해 적으면
   목록이 늘어지고 위계가 뭉개지므로, 중분류 섹션 맨 아래에 한 단 낮은 글머리로 모은다. */
.menu-board .mb-addons {
  margin: 0;
  padding: 10px 16px 16px;
  /* li를 flex로 잡으면 display:list-item이 아니게 되어 기본 마커가 사라진다.
     그래서 list-style을 끄고 이름 앞에 글머리표를 직접 붙인다. */
  list-style: none;
  color: var(--mb-text-2);
}
.menu-board .mb-addons li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.75rem;
  line-height: 1.5;
}
.menu-board .mb-addon-name::before {
  content: '·';
  margin-right: 7px;
  color: var(--mb-maroon);
}
.menu-board .mb-addon-price {
  flex-shrink: 0;
  /* 품목 가격과 같은 서체 — 같은 성격의 값이 서체로 갈리지 않게. */
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-variant-numeric: tabular-nums;
}

/* ---------- 펼침 애니메이션 ----------
   두 겹으로 쌓았다. 스크립트를 쓰지 않으므로(전역 제약) 브라우저 기능만으로 만든다.

   1겹) 높이: ::details-content + interpolate-size.
        닫힌 <details>의 내용은 원래 렌더되지 않아 높이를 트랜지션할 수 없다.
        ::details-content가 그 내용을 가리키게 해주고, interpolate-size가 auto
        높이로의 보간을 허용한다. transition-behavior: allow-discrete는
        content-visibility가 discrete 속성이라 필요하다.
        미지원 브라우저에서는 이 겹만 빠지고 높이가 즉시 바뀐다.

   2겹) 내용: keyframes로 살짝 올라오며 나타난다. 어디서나 동작하므로,
        1겹이 없는 환경에서도 "툭" 하고 나타나지는 않는다.

   interpolate-size는 상속되는데 :root가 아니라 .menu-board에만 걸어
   사이트 전체에 영향이 가지 않게 했다. */
.menu-board {
  interpolate-size: allow-keywords;
}
.menu-board details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    content-visibility 260ms;
  transition-behavior: allow-discrete;
}
.menu-board details[open]::details-content {
  block-size: auto;
}
.menu-board details[open] > .mb-item-links {
  animation: mb-reveal 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes mb-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 펼침 배경색도 같은 박자로 바뀌게 — 색만 툭 튀면 높이 애니메이션과 어긋난다. */
.menu-board details > summary .mb-item {
  transition: background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 다만 누르는 순간의 피드백은 즉시여야 한다. 260ms 페이드로 들어오면 눌러도
   반응이 없는 것처럼 느껴진다 — 누를 때만 트랜지션을 끈다(떼면 다시 부드럽게). */
.menu-board details > summary:active .mb-item {
  transition-duration: 0s;
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 걸지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .menu-board details::details-content,
  .menu-board details > summary .mb-item {
    transition: none;
  }
  .menu-board details[open] > .mb-item-links {
    animation: none;
  }
  .menu-board .mb-item-more::before {
    transition: none;
  }
}

/* ---------- 펼침(details) — 클라이언트 스크립트 없이 순수 HTML ---------- */
.menu-board details > summary {
  list-style: none;
  cursor: pointer;
}
.menu-board details > summary::-webkit-details-marker { display: none; }
.menu-board details[open] .mb-item { background: var(--mb-paper-deep); }

/* 눌렀을 때의 파란 깜빡임 제거.
   모바일 브라우저는 탭한 활성화 요소의 사각형에 기본 하이라이트(반투명 파랑)를
   그린다. 여기서는 <summary>가 품목 행 전체(390×113)를 덮고 있어, 사진만 눌러도
   행 전체가 파랗게 번쩍였다. 우리 CSS가 만든 게 아니라 브라우저 기본값이다.
   기본값을 끄되 피드백 자체를 없애지는 않는다 — 아래에서 우리 색으로 다시 준다. */
.menu-board summary,
.menu-board .mb-item-thumb-link {
  -webkit-tap-highlight-color: transparent;
}
/* 눌림 피드백. 펼친 상태와 같은 종이 짙은색을 써서 같은 언어로 반응한다. */
.menu-board summary:active .mb-item {
  background: var(--mb-paper-deep);
}
.menu-board .mb-item-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 14px;
  /* 펼친 영역은 배경색으로 이미 구분된다 — 하단선까지 두면 없앤 구분선이 여기만 남는다. */
  background: var(--mb-paper-deep);
}
.menu-board .mb-item-links a {
  font: 600 0.75rem/1.3 'Pretendard Variable', Pretendard, sans-serif;
  color: var(--mb-ink);
  text-decoration: none;
}
.menu-board .mb-item-links a:hover { text-decoration: underline; }

/* ---------- 원산지·알레르기 표시 ----------
   메뉴가 아니라 안내문이다. 카테고리 제목 형식은 그대로 쓰되(같은 문서의 한 절로
   읽히게), 본문은 품목 설명보다 작고 연하게 둔다. */
.menu-board .mb-notice {
  margin-bottom: 8px;
}
.menu-board .mb-notice-list {
  margin: 0;
  padding: 0 16px 4px;
}
.menu-board .mb-notice-list dt {
  margin-top: 12px;
  font: 700 0.75rem/1.4 'Gowun Batang', 'Noto Serif KR', serif;
  color: var(--mb-text-2);
}
.menu-board .mb-notice-list dd {
  margin: 3px 0 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--mb-text-3);
}

/* ---------- 하단 안내(주문 버튼·안내 문구) ----------
   스크롤 중에는 화면 하단에 떠 있다가, 목록 끝까지 내려가면 제자리(푸터 위)로 안착한다.
   `position: sticky; bottom: 0`이 그 동작을 그대로 해준다 — 컨테이닝 블록(.menu-board)을
   벗어나지 못하므로, 마지막 자식인 이 요소는 목록 끝에서 자연스럽게 자리를 잡는다.
   클라이언트 스크립트를 쓰지 않는다는 전역 제약을 지키면서 구현하는 방법이다. */
.menu-board .mb-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  border-top: 2px solid var(--mb-ink);
  padding: 14px 16px 20px;
  background: #fff;
  /* 안내 문구(좌) · 언어 선택(우). 문구가 길어져도 언어 버튼은 우측에 남는다. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-board .mb-footer-main {
  /* 줄어들 수 있어야 언어 버튼과 겹치지 않는다. 일본어 안내 문구처럼 긴 문장은
     두 줄로 접힌다. flex: 1이 없으면 문장이 언어 버튼 아래로 파고든다(실제로 그랬다). */
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- 언어 선택(드롭다운) ----------
   펼침은 <details>다 — 스크립트 없이 만들려고 품목 아코디언과 같은 방식을 쓴다.
   푸터가 화면 하단에 sticky로 붙어 있으므로 목록은 위로 연다. */
.menu-board .mb-lang {
  position: relative;
  flex-shrink: 0;
}
/* 닫힌 상태의 버튼 = 현재 언어 */
.menu-board .mb-lang-current {
  display: flex;
  align-items: center;
  gap: 5px;
  /* 2026-09-15 사전 점검(비트리 디자인팀)에서 "버튼이 작다"는 지적을 받아 키웠다.
     11px·24px 높이였다. 손가락으로 누르는 유일한 언어 진입점이라 세로를 먼저 벌린다. */
  padding: 9px 12px;
  border: 1px solid var(--mb-border);
  color: var(--mb-ink);
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-board .mb-lang-current::-webkit-details-marker {
  display: none;
}
/* 꺾쇠. 닫힘은 위(∧ — 위로 열린다는 뜻), 열림은 아래(∨). */
.menu-board .mb-lang-current::after {
  content: '';
  width: 4px;
  height: 4px;
  margin-left: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-board .mb-lang[open] .mb-lang-current::after {
  transform: rotate(45deg);
}
.menu-board .mb-lang[open] .mb-lang-current {
  border-color: var(--mb-ink);
}

/* 목록. 위로 열린다 — 아래로 열면 화면 밖이다. */
.menu-board .mb-lang-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin: 0 0 6px;
  padding: 4px;
  min-width: 100%;
  list-style: none;
  background: #fff;
  border: 1px solid var(--mb-ink);
  /* 푸터(z-index 10) 위로, 확대 레이어(200) 아래로. */
  z-index: 30;
}
.menu-board .mb-lang-menu li {
  margin: 0;
}
.menu-board .mb-lang-item {
  display: flex;
  align-items: center;
  gap: 7px;
  /* 터치 목표를 세로로 확보한다 — 좁은 화면에서 잘못 누르기 쉽다. */
  padding: 11px 12px;
  color: var(--mb-text-2);
  font-size: 0.8125rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.menu-board .mb-lang-item--on {
  color: var(--mb-ink);
  font-weight: 700;
  background: var(--mb-paper-deep);
}
.menu-board .mb-lang-item:active {
  background: var(--mb-paper-deep);
}
/* 국기 이모지는 글자보다 크게 잡혀 줄을 밀어낸다. 크기를 고정한다. */
.menu-board .mb-lang-flag {
  font-size: 1rem;
  line-height: 1;
}

.menu-board .mb-footer p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mb-ink);
}
.menu-board .mb-cta {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: none;
  background: var(--mb-ink);
  color: var(--mb-cream);
  font: 600 0.875rem/1 'Pretendard Variable', Pretendard, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
}
.menu-board .mb-cta-note {
  margin-top: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--mb-text-2);
}

/* ==========================================================================
   PC 메뉴판 — 렌더된 마크다운 문서처럼
   ==========================================================================
   신규 디자인 시스템은 적용하지 않는다(설계 스펙 03 §5, PC 개편은 별도 과제).
   목표는 "꾸미기"가 아니라 "읽히기"다 — 제목 위계, 구분선, 목록, 부연만으로
   문서 형태를 만든다. 정식(canonical) URL이 데스크톱 경로라 검색·생성엔진이
   실제로 읽는 것도 이 페이지다.

   위쪽 .menu-board 규칙과 클래스가 겹치지 않게 접두를 mdoc-으로 따로 뒀다.
   같은 파일에 있지만 서로 간섭하지 않는다. */

.menu-doc {
  /* 글줄이 길면 읽기 어렵다. 이 안은 전부 산문·목록이라 폭 제한이 모두에게
     동일하게 걸린다(표·카드처럼 폭 제한 없는 형제가 없다). */
  max-width: 68ch;
  margin: 0 auto;
  padding: 20px 0 60px;
  color: #33302E;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
}

.menu-doc h1,
.menu-doc h2,
.menu-doc h3 {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  color: #26231F;
}

/* ---------- 문서 머리 ---------- */
.mdoc-title {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
.mdoc-lead {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 2px solid #26231F;
  color: #6E6863;
  font-size: 0.9375rem;
}

/* ---------- 카테고리 = 마크다운 ## ---------- */
.mdoc-cat {
  margin-top: 44px;
}
.mdoc-cat-title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(38, 35, 31, 0.18);
  font-size: 1.375rem;
  font-weight: 700;
}

/* ---------- 소제목 = 마크다운 ### ---------- */
.mdoc-sub-title {
  margin: 26px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #6E6863;
}

/* ---------- 품목 목록 ---------- */
.mdoc-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdoc-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(38, 35, 31, 0.08);
}
.mdoc-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.mdoc-item-name {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 1.0625rem;
  font-weight: 700;
}
.mdoc-item-price {
  flex-shrink: 0;
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mdoc-item-desc {
  margin: 4px 0 0;
  color: #55504B;
  font-size: 0.9375rem;
}

/* 참고 사항 = 마크다운 중첩 목록. 설명보다 한 단 낮다. */
.mdoc-item-notes {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
  color: #8A837D;
  font-size: 0.875rem;
}
.mdoc-item-notes li {
  padding: 1px 0;
}

/* ---------- 추가 구성 ---------- */
.mdoc-addons-label {
  margin: 18px 0 4px;
  color: #6E6863;
  font-size: 0.875rem;
  font-weight: 700;
}
.mdoc-addons {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: #6E6863;
  font-size: 0.875rem;
}
.mdoc-addons li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}
.mdoc-addon-price {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- 문서 꼬리 = 마크다운 --- 아래 안내 ---------- */
.mdoc-foot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 2px solid #26231F;
}
.mdoc-foot p {
  margin: 0;
}
.mdoc-foot-note {
  margin-top: 4px !important;
  color: #8A837D;
  font-size: 0.875rem;
}

/* ---------- 매장 안내(NAP) ----------
   같은 값이 구조화 데이터에도 들어간다. 화면에 없는 정보를 스키마에만 넣지 않는다는
   원칙 때문에, 이 블록이 있어야 Restaurant 스키마가 정당해진다. */
.mdoc-store {
  margin-top: 44px;
}
.mdoc-nap {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 8px 16px;
  margin: 16px 0 0;
}
.mdoc-nap dt {
  color: #8A837D;
  font-size: 0.9375rem;
}
.mdoc-nap dd {
  margin: 0;
  font-size: 0.9375rem;
}
.mdoc-nap a {
  color: #8C3A32;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- PC 문서: 원산지·알레르기 ---------- */
.menu-doc .mb-notice {
  margin-top: 44px;
}
.menu-doc .mb-notice .mb-cat-title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(38, 35, 31, 0.18);
  font-size: 1.375rem;
  font-weight: 700;
}
.menu-doc .mb-notice-list {
  margin: 16px 0 0;
  padding: 0;
}
.menu-doc .mb-notice-list dt {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #6E6863;
}
.menu-doc .mb-notice-list dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: #55504B;
}