/* /menu 웹툰 랜딩 전용. 본사이트 styles.css 와 색·서체가 달라 이 페이지에서만 씁니다.
   마크업은 디자인 핸드오프의 인라인 스타일을 그대로 쓰므로, 여기에는
   프로토타입에서 이벤트로 처리하던 것(리빌·호버)만 담습니다. */

.menu-page {
  background: #F1EEE7;
  color: #111;
  word-break: keep-all;
}
.menu-page a { color: #A67C2E; text-decoration: none; }
.menu-page a:hover { color: #7d5c1f; text-decoration: underline; }

/* ── 스크롤 리빌 (README: IntersectionObserver, 한 번만) ──
   기존 transform(rotate 등)은 인라인 스타일에 있으므로 건드리지 않고,
   여기서는 감쌀 수 있는 값만 더합니다. */
.rv { opacity: 0; transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.rv-in { opacity: 1; }

.rv-1 { transform: translateY(28px); }
.rv-1.rv-in { transform: none; }

.rv-pop { transform: translateX(-24px); }
.rv-pop.rv-in { transform: none; }

.rv-stamp { transform: scale(1.8); transition-duration: .35s; transition-timing-function: cubic-bezier(.2,1.6,.4,1); transition-delay: .35s; }
.rv-stamp.rv-in { transform: none; }

.rv-bubble { transform: translateY(10px) scale(.96); transition-delay: .25s; }
.rv-bubble.rv-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none !important; transition: none; }
}

/* ── 호버 (README: 손님 카드 / 봉지 / 모듈 행 / 버튼) ── */
.menu-page .scp1:hover { border-color: #111 !important; }
.menu-page .scp2:hover { background: #F1EBDD !important; }
.menu-page .scp3:hover { background: #A67C2E !important; }
.menu-page .scp4 { transition: transform .18s ease; }
.menu-page .scp4:hover { transform: translateY(-3px) rotate(-1deg); }

/* 오마카세 사례 5장 — 3열 그리드에서 마지막 한 칸이 비어 왼쪽으로 쏠립니다.
   가운데로 모아 빈 칸이 눈에 띄지 않게 합니다. */
.menu-page .works-grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
.menu-page .works-grid > * { flex: 1 1 200px; max-width: 260px; }

.menu-page .demo-badge { cursor: pointer; }
.menu-page .demo-badge:hover { opacity: .75; }

.menu-page button { font-family: inherit; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
/* 선택한 메뉴 표기가 길어지면 아래로 넘어가게 */
.menu-page #chip-picked { white-space: normal; }

.menu-page #order-send:disabled { opacity: .6; cursor: default; }

/* 스펙 패널 키커(01 · 소개형 …) — 원본이 연한 회갈색 500 이라 잘 안 읽힙니다.
   메뉴 이름 바로 위에서 등급을 알려주는 자리라 굵고 진하게 올립니다. */
.menu-page .spec-kicker {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111 !important;
  letter-spacing: 0.04em !important;
}
/* 5화(다크 패널)는 배경이 어두워 반대로 밝게 */
.menu-page .tile-dark .spec-kicker,
.menu-page [style*="background: rgb(28, 26, 22)"] .spec-kicker,
.menu-page [style*="background: rgb(33, 30, 25)"] .spec-kicker {
  color: #C9A45C !important;
}

/* 화 제목 바 — 앞 화와 떨어지고, 자기 본문과는 붙어야 한 덩어리로 읽힙니다.
   원본은 위 14px / 아래 42px 로 반대였습니다. */
.menu-page div:has(> .ep-tag) { margin-top: 26px; margin-bottom: -24px; }

/* 표지 셰프 옆 — 메모지와 자바 커피잔.
   캐릭터마다 키가 달라 셰프 모자 오른쪽이 비어 있습니다. */
.menu-page div:has(> .chef-aside) { position: relative; }

.menu-page .chef-aside {
  position: absolute;
  left: calc(100% + 10px);
  top: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #6F4E1B;
  background: #FFF6D6;
  border: 1.5px dashed #A67C2E;
  border-radius: 4px;
  padding: 4px 7px;
  transform: rotate(2deg);
  white-space: nowrap;
  z-index: 2;
}

.menu-page .java-cup {
  position: absolute;
  left: calc(100% + 26px);
  top: 34px;
  transform: rotate(-4deg);
  z-index: 2;
}

/* 좁은 화면에서는 옆자리가 없어 명찰 아래로 내려갑니다 */
@media (max-width: 860px) {
  .menu-page .chef-aside {
    position: static;
    margin-top: 7px;
    white-space: normal;
    text-align: center;
  }
  .menu-page .java-cup { position: static; display: block; margin: 6px auto 0; width: 64px; height: 64px; }
}

/* 입장 컷 — 낱말마다 색으로 구분해 "손님마다 다르다"가 눈에 들어오게 */
.menu-page .entry-line { color: #2A251D; }
.menu-page .entry-line .kw {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* 1화 셰프 속마음 — 말풍선과 외침 사이. 점선 구름 풍선에 꼬리 동그라미 두 개로
   "입 밖에 낸 말"과 구분합니다. 꼬리는 왼쪽(셰프 쪽)으로. */
.menu-page .chef-thought {
  position: relative;
  margin-left: 34px;
  max-width: 30em;
  padding: 14px 22px 15px;
  background: #FBF8F1;
  border: 2.5px dashed #111;
  border-radius: 30px 38px 32px 40px / 40px 30px 38px 30px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #3B342A;
  transform: rotate(-1deg);
}
.menu-page .chef-thought::before,
.menu-page .chef-thought::after {
  content: "";
  position: absolute;
  background: #FBF8F1;
  border: 2.5px dashed #111;
  border-radius: 50%;
}
.menu-page .chef-thought::before { width: 14px; height: 14px; left: -20px; top: 12px; }
.menu-page .chef-thought::after  { width: 8px;  height: 8px;  left: -33px; top: 0; }
.menu-page .chef-thought-tag {
  display: block;
  margin-bottom: 4px;
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #A67C2E;
}
.menu-page .chef-thought b {
  color: #111;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #E7B84B;
  text-underline-offset: 4px;
}
@media (max-width: 560px) {
  .menu-page .chef-thought { font-size: 14.5px; padding: 12px 16px 13px; }
}

/* ── 모바일 ─────────────────────────────────────────
   패널 장식(스크린톤)이 패널 밖 30px 까지 나가도록 그려져 있습니다.
   문서 폭을 넓히지 않도록 잘라 냅니다. */
.menu-page { overflow-x: clip; }

@media (max-width: 560px) {
  /* 화 제목 바와 부제 태그가 한 줄에 갇혀 가로로 넘칩니다. 두 줄로 접습니다. */
  .menu-page div:has(> .ep-tag) { flex-wrap: wrap; row-gap: 8px; }
  .menu-page .ep-tag { white-space: normal !important; }
}

/* ── 사이트 헤더/푸터와 이어지는 여백 ── */
.menu-page > .menu-inner { margin: 0 auto; }