/* section07~10 — 값은 레퍼 1600 디자인 px (calc(N * var(--u))) */

/* ---------- section07 혼자서도 돌아가는 주방 (레퍼: 2줄 반대방향 사진 흐름 600 폭, 클릭하면 크게) ---------- */
.s07_list_wrap { margin-top: calc(120 * var(--u)); }
.s07_flow + .s07_flow { margin-top: calc(40 * var(--u)); }
.s07_flow li { margin-right: calc(50 * var(--u)); }
.s07_flow img { width: calc(600 * var(--u)); height: auto; aspect-ratio: 1200 / 682; object-fit: cover; cursor: zoom-in; transition: filter .3s ease; }
.s07_flow img:hover { filter: brightness(1.12); }

/* ---------- section08 본사와의 대화 — 석암 s08 실측(1440): 폰 369×656 @x981 y198 · 음식 누끼(고기 김치찜 누끼 s08_bowl — 메뉴 사진과 같은 흰 용기 — 폰 밑에 걸침, 대화 가리지 않게 아랫단만 덮음) · 카드 흐름 y448 (폰 뒤) ---------- */
#section08 { position: relative; z-index: 2; overflow-x: clip; overflow-y: visible; }   /* 뚝배기 그림자가 섹션 밑으로 넘침 → .sec overflow:hidden 이 뚝 자름. 가로(카드 흐름)만 자르고 세로는 보이게 + 다음 섹션 위로 */
#section08 .inner { position: relative; }
.s08_phone_wrap { position: absolute; right: 0; top: calc(70 * var(--u)); z-index: 10; }
.s08_phone { width: calc(410 * var(--u)); padding: calc(13 * var(--u)); border-radius: calc(56 * var(--u)); background: #111; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(30, 10, 5, .35), inset 0 0 0 calc(2 * var(--u)) #333; }
.s08_phone img { width: 100%; aspect-ratio: 9 / 16.6; object-fit: cover; object-position: top; border-radius: calc(42 * var(--u)); }
.s08_food { position: absolute; left: calc(17 * var(--u)); top: calc(476 * var(--u)); width: calc(378 * var(--u)); max-width: none; height: auto; filter: drop-shadow(0 calc(24 * var(--u)) calc(30 * var(--u)) rgba(40, 20, 10, .3)); pointer-events: none; }
.s08_flow { margin-top: calc(100 * var(--u)); padding: calc(20 * var(--u)) 0 calc(40 * var(--u)); }
.s08_flow li { margin-right: calc(45 * var(--u)); }
.s08_flow img { width: calc(315 * var(--u)); height: auto; aspect-ratio: 364 / 436; border-radius: calc(14 * var(--u)); box-shadow: var(--shadow-card); }


/* ---------- section10 메뉴 세로 카드 (레퍼: 좌 제목 · 우 459 카드가 화면 끝까지, PC 왼쪽 정렬) ---------- */
#section10 { padding: calc(150 * var(--u)) 0 calc(70 * var(--u)); }
#section10 .inner { display: flex; width: 100%; padding-left: calc(100 * var(--u)); }
#section10 .sec_txt { flex: none; width: calc(470 * var(--u)); }
#section10 .section_content { position: relative; flex: 1; min-width: 0; margin-left: calc(70 * var(--u)); }
#section10 .overflow-box { overflow: hidden; padding-bottom: calc(4 * var(--u)); }   /* 레퍼: 왼쪽은 잘라 제목을 안 덮고, 오른쪽은 화면 끝까지 */
#s10_swiper { overflow: visible; margin-left: 0; }
.s10_card { position: relative; width: calc(413 * var(--u)); height: calc(641 * var(--u)); background: #141110; overflow: hidden; }
.s10_card img { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale .6s cubic-bezier(.23, 1, .32, 1); }
.s10_card:hover img { scale: 1.04; }
.s10_card .v { position: absolute; right: calc(34 * var(--u)); top: calc(30 * var(--u)); z-index: 2; font-size: calc(52 * var(--u)); color: #fff; }
.s10_card .v .bk { display: block; width: 2.12em; height: auto; aspect-ratio: var(--ar); filter: drop-shadow(calc(2 * var(--u)) calc(2 * var(--u)) 0 #000); }   /* 산돌 광야 세로쓰기 SVG (2열) */
.s10_pg.swiper-pagination { position: relative; inset: auto; display: flex; width: calc(100% - 100 * var(--u)); margin-top: calc(50 * var(--u)); }
.s10_pg .swiper-pagination-bullet { position: relative; flex: 1; height: 2px; margin: 0 !important; border-radius: 0; background: rgba(63, 63, 63, .25); opacity: 1; }
.s10_pg .swiper-pagination-bullet::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width .3s ease; }
.s10_pg .swiper-pagination-bullet-active::before { width: 100%; }

@media (max-width: 768px) {
  .s07_list_wrap { margin-top: calc(120 * var(--u)); }
  .s07_flow + .s07_flow { margin-top: calc(60 * var(--u)); }
  .s07_flow li { margin-right: calc(60 * var(--u)); }
  .s07_flow img { width: calc(420 * var(--u)); }
  #section08 .sec_txt { text-align: center; }
  /* 모바일 석암(390): 폰 259×460 · 뚝배기(폰 밑 가운데, 아랫단 90px만 겹침) · 카드 264×316 */
  .s08_phone_wrap { position: relative; right: auto; top: auto; width: calc(510 * var(--u)); margin: calc(110 * var(--u)) auto 0; }
  .s08_phone { width: 100%; }
  .s08_food { left: calc(8 * var(--u)); top: calc(701 * var(--u)); width: calc(492 * var(--u)); }
  .s08_flow { margin-top: calc(305 * var(--u)); }
  .s08_flow { padding: calc(30 * var(--u)) 0 calc(70 * var(--u)); }   /* 그림자가 잘리지 않게 위아래 여유 */
  .s08_flow img { width: calc(520 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(60, 20, 10, .3), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(60, 20, 10, .16); }   /* 모바일은 카드가 커서 기본 그림자(.14)가 안 보임 */
  #section10 .inner { flex-direction: column; padding-left: 0; }
  #section10 .sec_txt { width: 100%; text-align: center; }
  #section10 .section_content { margin: calc(120 * var(--u)) 0 0; }
  .s10_card { width: calc(459 * var(--u)); height: calc(712 * var(--u)); }
  .s10_card .v { font-size: calc(58 * var(--u)); }
    .s10_pg.swiper-pagination { width: calc(100% - 60 * var(--u)); margin: calc(50 * var(--u)) auto 0; }
}