/* 지페가맹점(store.html) · 사진 구간: 가게 앞 · 테이블 QR · 메뉴 사진 (클래스 접두사 .sp-) */

/* ── 공통: 사진 틀 · AI 생성 이미지 표시 ───────────────── */
.sp-pic{position:relative;margin:0;border-radius:var(--r3);background:var(--mist);overflow:hidden;isolation:isolate}
.sp-pic picture{display:block;width:100%;height:100%}
.sp-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sp-pic__cap{position:absolute;left:16px;top:14px;z-index:2;padding:.25em .8em;border-radius:99px;background:rgba(255,255,255,.88);color:var(--ink2);font-size:12px;font-weight:800;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ── 1) 히어로 바로 아래: 가게 앞 큰 사진 (어두운 히어로와 흰 배경을 가로질러 걸침) ── */
.sec.sp-front{--sp-up:clamp(80px,9vw,176px);margin-top:-1px;padding:0 0 clamp(40px,5vw,96px);background:linear-gradient(180deg,var(--night) 0,var(--night) var(--sp-up),#fff var(--sp-up))}
.sp-front+.sec{padding-top:0}
.sp-pic--front{aspect-ratio:2/1;box-shadow:var(--sh2)}
.sp-pic--front img{object-position:50% 58%}
.sp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,4vw,96px);align-items:end;margin-top:clamp(36px,4.4vw,80px)}
.sp-intro .sec__head{max-width:none;margin:0}
.sp-intro__p{max-width:30em;color:var(--ink2);font-size:clamp(17px,1.3vw,22px);line-height:1.65}

/* ── 2) 테이블 QR 주문: 사진 + 짧은 설명 ───────────────── */
.sp-feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,120px);align-items:center;margin-top:clamp(72px,9vw,168px)}
.sp-pic--table{aspect-ratio:5/4}
.sp-pic--table img{object-position:46% 60%}
.sp-feat__txt .feat__p{max-width:26em}

/* ── 3) 메뉴 · AI 주문: 어두운 띠 + 음식 사진 ─────────── */
.sp-menu .sp-intro__p{color:#b6bfd3}
.sp-menu .sp-intro__fn{margin-top:1em}
.sp-menu>.wrap>.sec__fn{margin-top:1.4em}
.sp-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:clamp(220px,27vw,430px);gap:clamp(10px,1.2vw,20px);margin-top:clamp(36px,4.4vw,80px)}
.sp-mosaic .sp-pic{border-radius:var(--r2);background:#1a1e26}
.sp-m--a{grid-column:span 7}
.sp-m--b{grid-column:span 5}
.sp-m--d{grid-column:span 3;aspect-ratio:4/3}
.sp-m--a img{object-position:50% 56%}

/* ── 4) 전용 홍보물 갤러리: 사진 전체가 보이도록 (height 속성 때문에 세로로 잘리던 문제 보정) ── */
.sp-kit .gal__i{flex-basis:clamp(260px,28vw,470px)}
.sp-kit .gal__i img{height:auto;aspect-ratio:16/9}

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width:1023px){
  .sp-intro{grid-template-columns:minmax(0,1fr);align-items:start}
  .sp-feat{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,48px)}
}
@media (max-width:767px){
  .sp-pic--front{aspect-ratio:4/5;border-radius:var(--r2)}
  .sp-pic--front img{object-position:50% 60%}
  .sp-pic--table{aspect-ratio:1/1;border-radius:var(--r2)}
  .sp-mosaic{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-m--a,.sp-m--b{grid-column:1/-1;aspect-ratio:16/11}
  .sp-m--d{grid-column:auto;aspect-ratio:1/1}
  .sp-m--x{display:none}
}