/* ═══════════════════════════════════════════════════
   시안 A+C — 다크 인덱스
   A(다크 에디토리얼)의 몸에 C의 히어로(대형 영문 타이포)를 얹는다.
   style.css 위에 얹는 오버라이드 — 히어로만 다르고 나머지는 A 그대로.
   ═══════════════════════════════════════════════════ */

/* ═══ 내비 — 사이트 전체가 쓰는 번호 라벨 문법("01 — 소개")을 내비에도 그대로 심는다.
   지금 보고 있는 섹션의 번호만 오렌지로 켜져 있어, 내비 자체가 목차이자 위치표시가 된다. */
.nav__logo { position: relative; padding-right: clamp(18px, 2.2vw, 32px) }
.nav__logo::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--c-line-s);
}
.nav__menu { gap: clamp(14px, 1.7vw, 26px) }
.nav__menu a { display: inline-flex; align-items: baseline; gap: .55em }
.nav__no {
  font-family: var(--f-label); font-size: 9px; letter-spacing: 0;
  color: var(--c-line-s); transition: color .35s var(--ease);
}
.nav__menu a:hover .nav__no, .nav__menu a.is-active .nav__no { color: var(--c-signal) }
.nav__menu a.is-active { color: var(--c-cream) }
.nav__menu a.is-active::after { width: 100% }

/* 히어로 — 사진 없이 타이포만. C의 head__en을 다크 토큰으로 번역 */
.ihead {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(120px, 16vh, 200px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.ihead__en {
  font-family: var(--f-body);            /* C와 동일하게 산세리프 — 로고의 그로테스크 인상 */
  font-size: clamp(52px, 10.5vw, 190px);
  font-weight: 500; line-height: .9;
  letter-spacing: -.045em; text-transform: uppercase;
  color: var(--c-cream);
}
.ihead__en .dot { color: var(--c-signal) }
.ihead__ko { margin-top: 1.4em; max-width: 40ch }

/* 지표 표 — C의 괘선 표 형태로 (A의 flex 나열 대신 4열 표) */
.ihead .hero__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--c-line-s); padding-top: 0;
}
.ihead .hero__meta div {
  padding: 1em 1em 1.2em 0; border-right: 1px solid var(--c-line); min-width: 0;
}
.ihead .hero__meta div:last-child { border-right: 0 }

/* ═══ 단색 라인 일러스트 ═══
   SVG 배경이 먹색으로 구워져 있어 screen 블렌드로 얹는다 — 검정은 사라지고
   크림 선만 남아 어느 어두운 면에도 붙는다. 등장은 왼쪽부터 그려지는 와이프. */
.illu img { width: 100% }            /* SVG 자체가 투명 배경 — 블렌드 불필요 */
.js .illu img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s var(--ease) .15s;
}
.js .illu.is-in img { clip-path: inset(0 0 0 0) }
.illu.is-in img { animation: illuFloat 7s ease-in-out 1.8s infinite }
@keyframes illuFloat {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
}

/* 소개 — 요리 4종 드로잉(왼쪽, 넓게) + 셰프 드로잉(오른쪽) 나란히 */
.about-visual {
  display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px); flex-wrap: wrap;
}
.dishu { flex: 1 1 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: end }
.dishu__item { text-align: center }
.dishu__item img { width: 100%; max-width: 190px; margin: 0 auto }
.dishu__item .label { display: block; margin-top: 1em; font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-mute) }
.js .dishu__item:nth-child(2) img { transition-delay: .28s }
.js .dishu__item:nth-child(3) img { transition-delay: .42s }
.js .dishu__item:nth-child(4) img { transition-delay: .56s }

.illu--chef { flex: 0 0 auto; margin-top: 0 }
.illu--chef img { max-width: min(320px, 46vw) }

/* 포크 나선 — 메뉴 제목 옆 */
.gbar__l { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px) }
.illu--fork { flex: 0 0 auto }
.illu--fork img { width: clamp(64px, 7vw, 110px) }

/* 하는 일 — 항목마다 일러스트 */
.illu--svc { margin-bottom: var(--s-2) }
.illu--svc img { max-width: 150px }
/* 밀키트 아이콘만 생성 당시 선이 유독 굵게 나와서 다른 3개 굵기에 맞춰 침식(erode) 필터로 얇게 보정 — #thinLine 정의는 concept-ac.html 참조 */
.illu--thin img { filter: url(#thinLine) }

/* 메뉴 벽 — 4열: 매장당 4장이라 한 줄 = 한 촬영 배경색으로 떨어진다 */
.gallery { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr) } }

/* ═══ Recruit — 본문 왼쪽, 셰프단체 드로잉 오른쪽 (chef 섹션과 같은 24컬럼 비율) ═══ */
.recruit { display: grid; grid-template-columns: repeat(24, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center }
.recruit__in { grid-column: 1 / 12 }
.recruit__illu { grid-column: 13 / 25 }
.recruit__illu img { width: 100%; max-width: 560px }
@media (max-width: 900px) {
  .recruit { grid-template-columns: 1fr }
  .recruit__in, .recruit__illu { grid-column: auto }
  .recruit__illu { order: -1; max-width: 420px; margin: 0 auto }
}

/* ═══ 후기 — 매장별 네이버 평점을 그대로 공개 (가공 없음) ═══ */
.revgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3) }
.revcard {
  display: block; border-top: 1px solid var(--c-line-s); padding-top: var(--s-3);
  transition: border-color .35s var(--ease);
}
.revcard:hover { border-top-color: var(--c-signal) }
.revcard .label { display: block }
.revcard__name { display: block; font-family: var(--f-display); font-size: var(--t-h3); margin-top: var(--s-1) }
.revcard__src { display: flex; align-items: baseline; gap: .6em; margin-top: var(--s-3) }
.revcard__rate {
  font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 36px);
  color: var(--c-cream);
}
.revcard__rate--sm { font-size: clamp(20px, 1.9vw, 28px) }
.revcard__n { font-size: var(--t-caption); color: var(--c-mute) }
.cu { font-variant-numeric: tabular-nums; display: inline-block }

/* 출처 뱃지 — 네이버 초록/구글 4색을 그대로 써서 한눈에 구분되게 */
.srcmark { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 4px; display: inline-block }
.srcmark--n {
  background: #03C75A; color: #fff; font-family: var(--f-body); font-weight: 700;
  font-size: 11px; line-height: 17px; text-align: center;
}
.srcmark--g { width: 16px; height: 16px }

.revcard__links { display: flex; flex-direction: column; gap: .3em; margin-top: var(--s-3) }
.revcard__links a {
  display: inline-flex; align-items: center; gap: .4em; width: max-content;
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-mute); transition: color .3s var(--ease);
}
.revcard__links a:hover { color: var(--c-signal) }

/* ═══ 후기 말풍선 마퀴 — 방문객 리뷰 원문이 끝없이 흐른다 ═══ */
.quotewall {
  margin: clamp(48px, 6vw, 88px) calc(var(--pad) * -1) 0;
  overflow: hidden; position: relative;
}
.quotewall::before, .quotewall::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(28px, 6vw, 90px); z-index: 2;
  background: linear-gradient(90deg, var(--c-void), transparent);
}
.quotewall::after { inset: 0 0 0 auto; left: auto; background: linear-gradient(270deg, var(--c-void), transparent) }
.quotewall__track {
  display: inline-flex; gap: var(--s-3); padding-inline: var(--pad);
  animation: quoteScroll 62s linear infinite;
}
.quotewall:hover .quotewall__track, .quotewall.is-paused .quotewall__track { animation-play-state: paused }
@keyframes quoteScroll { to { transform: translateX(-50%) } }

.bubble {
  flex: 0 0 auto; width: clamp(260px, 26vw, 340px);
  background: var(--c-raise); border: 1px solid var(--c-line);
  padding: var(--s-3) var(--s-3) var(--s-2);
  position: relative;
}
.bubble::after {
  content: ""; position: absolute; left: 28px; bottom: -9px;
  width: 16px; height: 16px; background: var(--c-raise);
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  transform: rotate(45deg);
}
.bubble__stars { color: var(--c-signal); font-size: 12px; letter-spacing: .15em }
.bubble__body {
  font-size: var(--t-caption); line-height: 1.75; color: var(--c-cream);
  margin-top: var(--s-2); min-height: 5.6em;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.bubble figcaption {
  display: flex; align-items: baseline; gap: .6em; margin-top: var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid var(--c-line);
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .06em;
}
.bubble figcaption b { color: var(--c-cream); font-weight: 500; letter-spacing: 0 }
.bubble figcaption span { color: var(--c-mute) }

/* 셰프 초상 카드 — 액자 프레임 + 거대 워터마크로 왼쪽 기둥을 꽉 채운다 */
.chef__l { display: flex; flex-direction: column }
.chefcard {
  position: relative; margin-top: var(--s-4); width: 100%; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--c-line-s); overflow: hidden;
  padding: clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 40px) 0;
  background: radial-gradient(130% 90% at 50% 110%, rgba(242, 102, 42, .07), transparent 58%);
}
.chefcard__word {
  position: absolute; top: -0.14em; left: -0.03em; z-index: 0;
  font-family: var(--f-body); font-weight: 500; line-height: 1;
  font-size: clamp(90px, 11vw, 190px); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 235, 224, .13);
  pointer-events: none; user-select: none;
}
.chefcard__portrait { position: relative; z-index: 1; max-width: min(400px, 82%); margin: clamp(20px, 3vw, 44px) auto 0 }
.chefcard__portrait img { display: block; width: 100% }
.chefcard__portrait img.chefcard__badge {
  position: absolute; left: 47%; top: 63%; width: 19%;
  transform: translate(-50%, -50%);
}
/* ⚠ .illu.is-in img의 illuFloat 애니메이션이 transform을 통째로 덮어써서
   배지의 위치 고정용 translate(-50%,-50%)가 사라지고 목 쪽으로 튀는 버그가 있었다.
   배지 전용 키프레임에 중심 이동을 매 프레임 함께 넣어 고정한다. */
.illu.is-in .chefcard__portrait img.chefcard__badge {
  animation-name: chefBadgeFloat;
}
@keyframes chefBadgeFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) }
  50% { transform: translate(-50%, -50%) translateY(-8px) }
}
.chefcard figcaption {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 1em;
  border-top: 1px solid var(--c-line); padding-block: var(--s-2); margin-top: var(--s-3);
}

/* 약력 목록 — 왼쪽 카드와 하단선을 맞춘다. 위에 몰아 쌓지 않고
   전체 높이(그리드가 왼쪽 카드 높이로 늘려준 만큼)에 걸쳐 고르게 편다. */
.chef__r { display: flex; flex-direction: column }
.chef__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between }
.chef__list li { border-top: 1px solid var(--c-line) }

/* ═══ 브랜드 아코디언 ═══
   호버로 폭이 커지는 병풍이었으나, 모바일에서 확대 체감이 어색해
   세 폭 동일 크기 + 정보 상시 노출로 고정 (260812 대표 지시). */
#brandList { display: block }        /* style.css의 3열 그리드 해제 — 판 세 장이 전 폭을 쓴다 */
.acc { display: flex; gap: 2px; min-height: clamp(420px, 62vh, 660px) }
.acc__panel {
  position: relative; flex: 1; overflow: hidden; display: block; cursor: pointer;
  isolation: isolate;
}
/* 저강도 켄번즈 — illuFloat과 같은 결의 느린 미동. 텍스트·배지는 안 건드리고 사진 레이어만 */
.acc__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  animation: accKenBurns 22s ease-in-out infinite alternate;
}
@keyframes accKenBurns { from { transform: scale(1) } to { transform: scale(1.09) } }
.acc__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,10,7,.42), rgba(14,10,7,.18) 45%, rgba(14,10,7,.9));
}
.acc__no {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .2em; color: var(--c-cream);
}
.acc__en {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .3em;
  text-transform: uppercase; color: var(--c-mute);
}
.acc__body {
  position: absolute; inset: auto 0 0; z-index: 2; padding: var(--s-4);
}
.acc__body h3 { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.1 }
.acc__tag { font-size: var(--t-caption); color: var(--c-mute); margin-top: var(--s-1) }
.acc__intro {
  font-size: var(--t-caption); color: var(--c-mute); line-height: 1.8; max-width: 44ch;
  margin-top: var(--s-2);
}
.acc__stores { margin-top: var(--s-2); display: block }
.acc__ig { color: var(--c-signal); margin-left: .8em; transition: opacity .3s var(--ease) }
.acc__ig:hover { opacity: .75 }
.acc__bar { height: 2px; width: 88px; margin-top: var(--s-2) }

/* ═══ 매장 지도 ═══ */
#storeList { display: block }        /* style.css의 3열 그리드 해제 */
.mapwrap { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); gap: clamp(24px, 3.4vw, 56px); align-items: center }
.map { position: relative }
.map > img { width: 100% }
.pin { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; cursor: pointer; z-index: 2 }
.pin i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-signal); position: relative;
}
.pin i::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--c-signal); opacity: .6;
  animation: pinPulse 2.6s var(--ease) infinite;
}
@keyframes pinPulse {
  0% { transform: scale(.5); opacity: .8 }
  70%, 100% { transform: scale(1.9); opacity: 0 }
}
.pin span {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  color: var(--c-cream); white-space: nowrap;
}
.pin.is-hot i { box-shadow: 0 0 0 3px rgba(242,102,42,.35) }
.mlist ul { list-style: none }
.mlist__group + .mlist__group { margin-top: var(--s-4) }
.mlist__bhead {
  display: flex; align-items: center; gap: .8em;
  border-bottom: 1px solid var(--c-line-s); padding-bottom: var(--s-2);
}
.mlist__bhead i { width: 22px; height: 2px; flex: 0 0 auto }
.mlist__bko { font-family: var(--f-display); font-size: var(--t-h3) }
.mlist a {
  display: grid; grid-template-columns: 54px 1fr auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.mlist a:hover { background: rgba(242,235,224,.045); padding-left: .6em }
.mlist img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; filter: saturate(.85) brightness(.85) }
.mlist__name { font-family: var(--f-display); font-size: var(--t-h3) }
.mlist__sub { font-size: var(--t-caption); color: var(--c-mute); margin-top: 2px }
.mlist .label { white-space: nowrap }

/* ═══ 푸터 — 로고, "Chef's Space Company" 워드마크보다 크지 않게 (260812 확대했다가 260811 재축소, style.css 30px 기본값으로 복귀) ═══ */

/* ═══ 문의 — 대화형 (기존 폼은 화면 밖으로, 값은 그대로 채워 재사용) ═══ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.chatform { display: flex; flex-direction: column; gap: var(--s-2); height: clamp(400px, 52vh, 540px) }
.chatform__scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; scroll-behavior: smooth }
.chatform__input { display: flex; align-items: center; gap: .6em; border-top: 1px solid var(--c-line); padding-top: var(--s-2) }
.chatform__input.is-hidden { visibility: hidden; pointer-events: none }
.chatform__field { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--c-line-s); padding: .4em 0; font-size: var(--t-body); color: var(--c-cream) }
.chatform__field:focus { outline: 0; border-bottom-color: var(--c-signal) }
.chatform__send {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--c-line-s);
  background: transparent; color: var(--c-cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chatform__send:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-void) }

.bubble-row { display: flex; opacity: 0; transform: translateY(6px); animation: bubbleIn .45s var(--ease) forwards }
.bubble-row.bot { justify-content: flex-start; align-items: flex-end; gap: 8px }
.bubble-row.user { justify-content: flex-end }
.msg-avatar, .msg-avatar-spacer { width: 28px; height: 28px; flex: 0 0 auto }
.msg-avatar { border-radius: 50%; display: block }
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0) } }
.msg { max-width: 82%; padding: .65em .9em; font-size: var(--t-caption); line-height: 1.5; border-radius: 14px }
.bot .msg { background: var(--c-base); border: 1px solid var(--c-line); border-top-left-radius: 4px; color: var(--c-cream) }
.user .msg { background: var(--c-signal); color: var(--c-void); border-top-right-radius: 4px; font-weight: 500 }
.typing .msg { background: var(--c-base); border: 1px solid var(--c-line); border-top-left-radius: 4px; display: flex; gap: 4px; padding: .8em 1em }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mute); animation: typingDot 1s infinite ease-in-out }
.typing span:nth-child(2) { animation-delay: .15s } .typing span:nth-child(3) { animation-delay: .3s }
@keyframes typingDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; max-width: 92% }
.chip {
  font-size: 13px; padding: .5em .85em; border-radius: 999px; border: 1px solid var(--c-line-s);
  color: var(--c-cream); background: transparent; cursor: pointer;
  transition: opacity .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip:hover:not(:disabled) { border-color: var(--c-cream) }
.chip.is-picked { background: var(--c-signal); border-color: var(--c-signal); color: var(--c-void); font-weight: 500 }
.chip.is-faded { opacity: .25 }
.chip:disabled { cursor: default }

/* ═══ 이태리국시 매장 사진 — 부채꼴 갤러리 (GSAP) ═══ */
.fanwrap { padding-top: clamp(48px, 7vw, 88px); text-align: center }
.fanwrap__lead {
  font-family: var(--f-display); font-size: var(--t-h3); color: var(--c-cream);
  margin-top: .5em; margin-bottom: clamp(28px, 4vw, 48px);
}
.fancarousel { display: flex; flex-direction: column; align-items: center; gap: var(--s-4) }
.fancarousel__stage {
  position: relative; width: 100%; max-width: 920px; overflow: hidden;
  height: clamp(200px, 28vw, 360px);
  cursor: grab; touch-action: pan-y;
}
.fancarousel__stage.is-dragging { cursor: grabbing }
.fancarousel__stage.is-dragging .fancard { pointer-events: none }
.fancard {
  position: absolute; top: 50%; left: 50%; margin-top: calc(clamp(130px, 16vw, 220px) / -2);
  margin-left: calc(clamp(130px, 16vw, 220px) / -2);
  width: clamp(130px, 16vw, 220px); aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.6), 0 0 0 1px var(--c-line);
  transition: box-shadow .4s var(--ease);
}
.fancard:hover { box-shadow: 0 28px 54px -14px rgba(0,0,0,.7), 0 0 0 1px var(--c-line-s) }
.fancard__img { width: 100%; height: 100% }
.fancard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease) }
.fancard:hover .fancard__img img { transform: scale(1.08) }
.fancarousel__nav { display: flex; align-items: center; gap: var(--s-3) }
.fanarrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line-s);
  background: transparent; color: var(--c-cream); font-size: 18px; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.fanarrow:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-void) }
.fancounter { min-width: 5em; text-align: center; color: var(--c-mute); font-variant-numeric: tabular-nums }
@media (max-width: 600px) {
  .fancarousel__stage { height: clamp(160px, 46vw, 240px) }
}

/* ═══ 문의 옆 브랜드 세 곳 (손그림 아이콘) ═══ */
.ask__brands {
  display: flex; gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--s-4); border-top: 1px solid var(--c-line-s);
}
.ask__brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  opacity: .82; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ask__brand:hover { opacity: 1; transform: translateY(-3px) }
.ask__brand-icon { width: clamp(64px, 6.6vw, 92px); height: clamp(64px, 6.6vw, 92px) }
.ask__brand span {
  font-family: var(--f-label); font-size: var(--t-caption); letter-spacing: .16em;
  color: var(--c-mute); white-space: nowrap;
}
.ask__brand:hover span { color: var(--c-cream) }
.ask__brand-logo { height: clamp(28px, 2.6vw, 36px); width: auto; margin-top: var(--s-1) }

/* ═══ 테이블 오더 태블릿 ═══ 매장 주문 단말기 실물처럼: 몸체(베젤)가 화면·배경과
   확실히 다른 톤을 가져야 "장치"로 읽힌다. 이전 버전은 베젤색이 배경과 거의 같아
   테두리 1px짜리 카드로만 보였다. */
.pad { position: relative; max-width: 560px }
.pad__body {
  position: relative;
  background: linear-gradient(160deg, #322A21 0%, #1B1610 55%, #0D0906 100%);
  border-radius: 30px;
  padding: 30px 16px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 46px 90px -24px rgba(0,0,0,.6),
    0 8px 18px -6px rgba(0,0,0,.5);
}
.pad__cam {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5B6772 0%, #262019 65%, #100C08 100%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), inset 0 0 1px rgba(255,255,255,.4);
}
.pad__screen {
  position: relative; overflow: hidden;
  background: var(--c-raise);
  border-radius: 14px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3);
  padding: clamp(20px, 2.4vw, 34px) clamp(18px, 2.2vw, 32px) clamp(14px, 1.6vw, 22px);
}
.pad__screen::before {
  /* 유리 화면에 비치는 얕은 반사광 — 과하지 않게 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 24%);
}
.pad__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--c-line); padding-bottom: var(--s-2); margin-bottom: var(--s-3);
}
.pad__home { width: 84px; height: 3px; border-radius: 2px; background: rgba(242,235,224,.22); margin: var(--s-3) auto 0 }
.pad__stand {
  width: 58px; height: 30px; margin: 0 auto; position: relative;
  background: linear-gradient(180deg, #241D16, #0A0705);
  clip-path: polygon(36% 0, 64% 0, 82% 100%, 18% 100%);
}
.pad__stand::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 148px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, #241D16, #0A0705);
  box-shadow: 0 22px 32px -6px rgba(0,0,0,.65);
}

@media (max-width: 900px) {
  .acc { flex-direction: column; min-height: 0 }
  .acc__panel { min-height: 380px }
  .acc__en { writing-mode: horizontal-tb; top: var(--s-3); right: var(--s-3) }
  .mapwrap { grid-template-columns: 1fr }
  .map { max-width: 420px; margin: 0 auto }
  .illu--chef img { max-width: 78vw }
  .pad { max-width: none }
  .revgrid { grid-template-columns: repeat(3, 1fr) }
  .dishu { flex-basis: 100%; grid-template-columns: repeat(4, 1fr) }
  .illu--chef { margin: 0 auto }
}
@media (max-width: 460px) {
  .dishu { grid-template-columns: repeat(2, 1fr); row-gap: clamp(20px, 4vw, 32px) }
}
@media (max-width: 600px) {
  .ihead { min-height: 78svh }
  .ihead .hero__meta { grid-template-columns: 1fr 1fr }
  .ihead .hero__meta div:nth-child(2n) { border-right: 0 }
  .revgrid { grid-template-columns: 1fr 1fr }
  .bubble { width: 78vw }
}
@media (prefers-reduced-motion: reduce) {
  .illu.is-in img { animation: none }
  .acc__img { animation: none }
  .pin i::after { animation: none; opacity: 0 }
  .quotewall { overflow-x: auto }
  .quotewall__track { animation: none }
  .bubble-row { animation: none; opacity: 1; transform: none }
}