/* 메뉴 사진 포트폴리오(work/menu-photo.html) — 이름은 전부 mpf- 로 시작(전역 충돌 피함) */
:root{--mpf-gap:clamp(4.5rem,8vw,8rem);--mpf-fig-r:10px;--mpf-shadow:0 30px 60px -40px #12121459}

.mpf{padding-bottom:var(--sub-gap)}
.mpf-svc{margin-top:22px}

/* 구역 머리 — 모노 라벨 · 큰 제목 · 한 줄 */
.mpf-sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;align-items:end;padding-top:28px;border-top:1px solid var(--line2);margin-bottom:var(--mpf-gap)}
.mpf-sh__k{grid-column:1/-1;color:var(--pt);margin-bottom:18px}
.mpf-sh__d{color:var(--ink2);font-size:var(--lead);line-height:var(--lh-b);padding-bottom:.4em}

/* 사례 한 줄 — 왼쪽 설명, 오른쪽 Before 작게 · After 크게 */
.mpf-case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.mpf-case+.mpf-case{margin-top:var(--mpf-gap)}
.mpf-case__info{position:sticky;top:calc(var(--nav) + 32px)}
.mpf-case__idx{color:var(--steel);margin-bottom:14px}
.mpf-case__h{font-size:var(--h3);font-weight:700;line-height:var(--lh-h);letter-spacing:-.035em;margin-bottom:10px}
.mpf-case__d{color:var(--ink2);max-width:20em}
.mpf-case__imgs{display:grid;gap:clamp(12px,1.6vw,20px);align-items:end}
.mpf-case__imgs--n2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.mpf-case__imgs--n3{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.5fr)}

/* 그림 한 장 — 자르지 않고 원본 비율 그대로 */
.mpf-fig img{width:100%;height:auto;border-radius:var(--mpf-fig-r);background:var(--paper2);box-shadow:var(--mpf-shadow)}
.mpf-fig figcaption{margin-top:10px;color:var(--ink)}
.mpf-fig figcaption::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pt);margin-right:8px;vertical-align:.1em}
.mpf-fig--before img{box-shadow:none;filter:saturate(.9)}
.mpf-fig--before figcaption{color:var(--steel)}
.mpf-fig--before figcaption::before{background:var(--line2)}

/* 모음 컷 — 합성 2장, 아래 4장 */
.mpf-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);align-items:start}
.mpf-set--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:clamp(12px,1.6vw,20px)}

@media (max-width:900px){
  .mpf-sh,.mpf-case{grid-template-columns:1fr;gap:18px}
  .mpf-case__info{position:static}
  .mpf-set{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mpf-case__imgs--n2{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .mpf-case__imgs--n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mpf-case__imgs--n3 .mpf-fig--before{grid-column:1/-1;width:50%}
  .mpf-cap-x{display:none}
  .mpf-set--2{grid-template-columns:1fr}
  .mpf-fig figcaption{font-size:10.5px}
}

/* ── 가게별 전체 메뉴(11-04) ── */
:root{--mpf-tile-r:8px;--mpf-lb-bg:#121214f2}
.mpf-all{margin-top:22px}
.mpf-sh--s{margin-bottom:28px}
.mpf-back{font-size:15px;color:var(--steel);border-bottom:1px solid var(--line2)}
.mpf-back:hover{color:var(--ink)}

/* 가게 카드 */
.mpf-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px) clamp(12px,1.6vw,20px)}
.mpf-brand{display:flex;flex-direction:column;gap:4px}
.mpf-brand__img{display:block;overflow:hidden;border-radius:var(--mpf-fig-r);background:var(--paper2);aspect-ratio:4/3;margin-bottom:10px}
.mpf-brand__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mpf-brand:hover .mpf-brand__img img{transform:scale(1.04)}
.mpf-brand__k{color:var(--steel)}
.mpf-brand__n{font-size:clamp(17px,1.4vw,20px);font-weight:700;letter-spacing:-.03em;line-height:var(--lh-h)}
.mpf-brand__c{color:var(--pt)}

/* 메뉴 그리드 — 원본 비율 그대로 */
.mpf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px) clamp(12px,1.6vw,20px);align-items:start}
.mpf-grid--set{grid-template-columns:repeat(3,minmax(0,1fr))}
.mpf-tile{position:relative;display:block;width:100%;text-align:left;cursor:zoom-in}
.mpf-tile img{width:100%;height:auto;border-radius:var(--mpf-tile-r);background:var(--paper2);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mpf-tile:hover img{transform:translateY(-3px);box-shadow:var(--mpf-shadow)}
.mpf-tile__n{display:block;margin-top:10px;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.45}
.mpf-tile__b{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:var(--pill);background:var(--paper);color:var(--ink);font-style:normal;font-size:10.5px}
.mpf-tile__b::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pt);margin-right:6px;vertical-align:.12em}

/* 크게 보기 */
.mpf-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(56px,7vw,80px) clamp(16px,4vw,56px);background:var(--mpf-lb-bg);opacity:0;transition:opacity .22s ease;overflow:auto;overscroll-behavior:contain}
.mpf-lb.is-on{opacity:1}
.mpf-lb[hidden]{display:none}
.mpf-lb__x{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:#f4f4f21f;display:grid;place-items:center}
.mpf-lb__x svg{width:16px;height:16px;stroke:#f4f4f2;stroke-width:1.6;fill:none}
.mpf-lb__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:end;width:min(100%,1200px)}
.mpf-lb.has-b .mpf-lb__in{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.mpf-lb figure img{width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:var(--mpf-tile-r)}
.mpf-lb figcaption{margin-top:10px;color:#f4f4f2b3}
.mpf-lb__a figcaption span:first-child{color:var(--pt)}

@media (max-width:900px){
  .mpf-brands,.mpf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mpf-grid--set{grid-template-columns:1fr}
  .mpf-lb.has-b .mpf-lb__in{grid-template-columns:minmax(0,1fr)}
  .mpf-lb.has-b .mpf-lb__b{width:55%}
}
@media (max-width:560px){
  .mpf-tile__n{font-size:14px}
  .mpf-brand__n{font-size:16px}
}