/* ⑪ 메뉴안내 — 초록 (시안 y 9318~10444, 원래 높이 1126px → 지금 PC 높이는 내용 기준 약 1000px). 배경 그림(무늬)은 글자·사진을 지운 원본.
   2026-10-27: 육수 붓는 사진·'맛있다!' 글씨 삭제(대표님 요청) → 제목·설명 가운데 정렬, 카드를 바로 아래로 당김 */
.s11 {
  --s11-bg: #004f2f;
  --s11-sub: #dee3e1;
  background: var(--s11-bg);
  color: var(--c-white);
}
.s11-title { color: var(--c-white); letter-spacing: -0.03em; }
.s11-gold { color: var(--c-khaki); }
.s11-sub { color: var(--s11-sub); letter-spacing: -0.05em; }

/* 크림 판 + 탭 */
.s11-card { background: var(--c-cream); border-radius: 40px; color: var(--c-ink); }
.s11-tabs { display: flex; justify-content: center; align-items: center; }
.s11-tab {
  position: relative; background: none; border: 0; cursor: pointer; color: #111;
  font: 700 24px/1 var(--f-body); letter-spacing: -0.04em; padding: 7px 2px 31px;
}
.s11-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c-green); transform: scaleX(0); transition: transform .35s ease; }
.s11-tab.is-on { color: var(--c-green); }
.s11-tab.is-on::after { transform: scaleX(1); }
.s11-tab:focus-visible { outline: 3px solid var(--c-gold-deep); outline-offset: 2px; border-radius: 4px; }
.s11-sep { width: 1px; height: 17px; margin: 0 47px 24px; background: #c9c3aa; }

/* 흰 둥근 상자 + 원형 메뉴 슬라이드 */
.s11-box { position: relative; background: var(--c-white); border: 1px solid var(--c-green); border-radius: 40px; }
.s11-pane[hidden] { display: none; }
.s11-pane.is-on { animation: s11-fade .45s ease both; }
@keyframes s11-fade { from { transform: translateY(10px); } to { transform: none; } }
.s11-track {
  list-style: none; margin: 0; padding: 0; display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.s11-track::-webkit-scrollbar { display: none; }
.s11-track:focus-visible { outline: 3px solid var(--c-gold-deep); outline-offset: 4px; border-radius: 12px; }
.s11-item { flex: 0 0 33.3333%; scroll-snap-align: start; text-align: center; }
.s11-item img { width: 260px; height: 260px; max-width: 100%; margin: 0 auto; border-radius: 50%; object-fit: cover; transition: transform .4s ease; }
.s11-item:hover img { transform: scale(1.04) rotate(-2deg); }
.s11-item p { margin-top: 21px; font: 700 20px/1.4 var(--f-body); letter-spacing: -0.03em; color: #111; }
.s11-arrow { position: absolute; z-index: 2; width: 64px; height: 44px; padding: 5px; background: none; border: 0; cursor: pointer; color: #111; border-radius: 8px; }
.s11-arrow svg { width: 56px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.s11-prev:hover svg { transform: translateX(-6px); }
.s11-next:hover svg { transform: translateX(6px); }
.s11-arrow:focus-visible { outline: 3px solid var(--c-gold-deep); }

/* ---------- PC: 제목·설명 가운데 → 바로 아래 크림 판 (판 안쪽 좌표는 시안 그대로) ---------- */
@media (min-width: 1200px) {
  .s11 { padding: 88px 0 92px; background: var(--s11-bg) url(../assets/s11/bg.jpg) center top / 1920px auto no-repeat; }
  .s11-head { position: relative; z-index: 2; text-align: center; }
  .s11-title { font-size: 62px; line-height: 72px; }
  .s11-sub { margin-top: 17px; font-size: 19px; line-height: 28px; }
  .s11-card { position: relative; z-index: 3; width: min(1440px, calc(100% - 40px)); height: 585px; margin: 44px auto 0; }
  .s11-tabs { position: absolute; top: 46px; left: 0; right: 0; }
  .s11 .s11-box { position: absolute; left: 50%; top: 108px; width: min(1220px, calc(100% - 80px)); height: 414px; transform: translateX(-50%); }
  .s11-pane { position: absolute; top: 51px; left: 50%; width: min(960px, calc(100% - 220px)); transform: translateX(-50%); }
  .s11-pane.is-on { animation: none; }
  .s11-prev { left: 44px; top: 186px; }
  .s11-next { right: 44px; top: 186px; }
}

/* ---------- 좁은 화면: 위아래로 쌓기 ---------- */
@media (max-width: 1199px) {
  .s11 {
    padding: 64px 0 64px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 30px),
      radial-gradient(ellipse 80% 60% at 50% 30%, #035533 0%, var(--s11-bg) 60%, #003a22 100%);
  }
  .s11-head { position: relative; z-index: 2; padding: 0 max(20px, env(safe-area-inset-left, 0px)); max-width: 900px; margin: 0 auto; text-align: center; }
  .s11-title { font-size: clamp(34px, 7vw, 62px); line-height: 1.18; }
  .s11-sub { margin-top: 12px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.5; }
  .s11-card { position: relative; z-index: 3; margin: 40px 16px 0; padding: 0 0 22px; max-width: 1100px; }
  @supports (margin-inline: auto) { .s11-card { margin-inline: max(16px, calc(50% - 550px)); } }
  .s11-tabs { padding-top: 20px; }
  .s11-tab { font-size: 20px; padding: 6px 2px 18px; }
  .s11-sep { margin: 0 28px 14px; }
  .s11-box { margin: 0 12px; padding: 28px 54px 22px; border-radius: 28px; }
  .s11-item { flex-basis: 50%; }
  .s11-item img { width: 200px; height: 200px; }
  .s11-item p { margin-top: 14px; font-size: 18px; }
  .s11-arrow { top: 50%; margin-top: -42px; width: 48px; height: 40px; }
  .s11-arrow svg { width: 38px; height: 26px; }
  .s11-prev { left: 4px; }
  .s11-next { right: 4px; }
}
@media (max-width: 768px) {
  .s11 { padding: 52px 0 52px; }
  .s11-card { margin-top: 30px; }
  .s11-box { margin: 0 10px; padding: 24px 40px 18px; }
  .s11-item { flex-basis: 100%; }
  .s11-item img { width: min(200px, 100%); height: auto; aspect-ratio: 1; }
  .s11-prev { left: 0; }
  .s11-next { right: 0; }
}