/* ④ 경쟁력 — 카키 배경 + 흰 둥근 판 (시안 y 3081~4859, 높이 1778) */
.s04 {
  --s04-green: #005633;
  --s04-tag: #e2cf98;
  --s04-tag-ink: #8a6a28;
  --s04-text: #2b2b2b;
  background: var(--c-khaki);
  padding-top: 104px;
  text-align: center;
}

/* 연기 모션: 위(③ 냄비 쪽)에서 피어오르는 김 */
.s04-smoke { position: absolute; left: 50%; top: -40px; width: 900px; height: 420px; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.s04-smoke i { position: absolute; bottom: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%); filter: blur(14px); opacity: .0; animation: s04-smoke 7s ease-in-out infinite; }
.s04-smoke i:nth-child(1) { left: 8%; animation-delay: 0s; }
.s04-smoke i:nth-child(2) { left: 32%; animation-delay: 1.8s; }
.s04-smoke i:nth-child(3) { left: 56%; animation-delay: 3.4s; }
.s04-smoke i:nth-child(4) { left: 76%; animation-delay: 5s; }
@keyframes s04-smoke {
  0% { transform: translateY(40px) scale(.6); opacity: 0; }
  30% { opacity: .55; }
  100% { transform: translateY(-260px) scale(1.5); opacity: 0; }
}

.s04-head { position: relative; z-index: 1; }
.s04-logo { width: 160px; height: auto; margin: 0 auto; }
.s04-title { margin-top: 6px; font-size: 64px; line-height: 73px; color: var(--c-black); letter-spacing: -0.035em; }
.s04-title em { font-style: normal; color: var(--s04-green); }
.s04-badge { display: inline-block; margin-top: 30px; min-width: 446px; padding: 13px 34px; border-radius: 8px; background: var(--s04-green); color: var(--c-white); font-size: 24px; line-height: 36px; font-weight: 700; letter-spacing: -0.04em; }

/* 흰 둥근 판 */
.s04-card { position: relative; z-index: 1; margin: 57px 60px 0; background: var(--c-white); border-radius: 100px 100px 0 0; padding: 114px 0 142px; text-align: left; }
.s04-in { width: 1440px; max-width: 100%; margin: 0 auto; position: relative; }

/* 양옆 초록·검정 띠 (②번 줄 높이) */
.s04-stripe { position: absolute; top: 1180px; width: 60px; height: 133px; z-index: 0;
  background: linear-gradient(to bottom, #025835 0 33px, var(--c-khaki) 33px 50px, #000 50px 83px, var(--c-khaki) 83px 100px, var(--s04-green) 100px 133px); }
.s04-stripe--l { left: 0; }
.s04-stripe--r { right: 0; }

.s04-row { position: relative; display: flex; align-items: flex-start; }
.s04-row--1 { height: 456px; }
.s04-row--2 { margin-top: 104px; height: 456px; }

/* 01 사진 롤링 */
.s04-roll { position: relative; width: 697px; height: 456px; flex: none; border-radius: 30px; overflow: hidden; background: #111; }
.s04-roll img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.s04-roll img.is-on { opacity: 1; }
.s04-roll img:first-child { position: relative; }

.s04-txt h3 { font-size: 41px; line-height: 52px; color: var(--c-black); letter-spacing: -0.045em; }
.s04-txt p { margin-top: 56px; font-size: 21px; line-height: 35px; color: var(--s04-text); letter-spacing: -0.05em; }
.s04-txt--1 { position: absolute; left: 804px; top: 116px; }
.s04-txt--2 { padding-top: 97px; width: 600px; }
.s04-tag { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 48px; margin-bottom: 14px; transform: rotate(-7deg);
  background: linear-gradient(135deg, #ecdcaa 0%, var(--s04-tag) 55%, #d4bd7c 100%); color: var(--s04-tag-ink);
  font: 900 21px/1 var(--f-display); letter-spacing: 0; box-shadow: 1px 2px 3px rgba(80,60,20,.18);
  clip-path: polygon(3% 6%, 96% 0, 100% 92%, 6% 100%); }

.s04-vline { display: block; width: 1px; background: #cfcfcf; } /* 10-27: 떠다니던 '정통'·'대표'·'메뉴' 큰 글씨는 대표님 요청으로 뺌 */
.s04-vline--2 { position: absolute; left: 674px; top: 205px; height: 248px; margin: 0; }

/* 02 사진 */
.s04 .s04-pic2 { position: absolute; left: 743px; top: 0; width: 697px; height: 456px; }
.s04-pic2 img { position: relative; z-index: 1; width: 697px; height: 456px; object-fit: cover; border-radius: 30px; }

@media (max-width: 1500px) {
  .s04-card { margin-inline: 40px; }
  .s04-stripe { width: 40px; }
  .s04-in { zoom: .82; }
}
@media (max-width: 1180px) {
  .s04-in { zoom: .66; }
}
/* 1024~1100px: .66배(950px)면 흰 판(화면-80px)보다 넓어 글·사진이 판 가장자리에 붙고 02 사진이 판 밖으로 나가던 것 → 조금 더 줄임 */
@media (min-width: 1024px) and (max-width: 1100px) {
  .s04-in { zoom: .62; }
}

/* 휴대폰·태블릿(1023px 이하): 한 줄로 쌓기 — 줄인 PC 배치가 판 밖·화면 밖으로 나가던 769~1023px도 같은 배치를 씀 */
@media (max-width: 1023px) {
  .s04 { padding-top: 56px; }
  .s04-smoke { width: 100%; height: 260px; }
  .s04-smoke i { width: 160px; height: 160px; }
  .s04-logo { width: 112px; }
  .s04-title { margin-top: 8px; font-size: clamp(26px, 7.2vw, 40px); line-height: 1.25; padding-inline: 16px; }
  .s04-badge { min-width: 0; margin: 20px 16px 0; padding: 11px 18px; font-size: 16px; line-height: 24px; }
  .s04-stripe { display: none; }
  .s04-card { margin: 36px 10px 0; border-radius: 40px 40px 0 0; padding: 44px 16px 56px; }
  .s04-in { zoom: 1; width: auto; }
  .s04-row { display: block; height: auto; }
  .s04-row--2 { margin-top: 56px; display: flex; flex-direction: column; }
  .s04-roll { width: 100%; height: auto; aspect-ratio: 697 / 456; border-radius: 20px; }
  .s04-roll img:first-child { height: 100%; }
  .s04-txt--1, .s04-txt--2 { position: static; width: auto; padding-top: 0; }
  .s04-txt--1 { margin-top: 28px; }
  .s04-txt h3 { font-size: clamp(22px, 6vw, 30px); line-height: 1.32; }
  .s04-txt p { margin-top: 16px; font-size: 15px; line-height: 1.7; letter-spacing: -0.03em; }
  .s04-tag { width: 44px; height: 40px; font-size: 17px; margin-bottom: 10px; }
  .s04-vline--2 { display: none; }
  .s04 .s04-pic2 { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 28px; }
  .s04-pic2 img { width: 100%; height: auto; aspect-ratio: 697 / 456; border-radius: 20px; }
}
.s04-rollwrap { flex: none; }
@media (max-width: 1023px) { .s04-rollwrap { width: 100%; } }
/* 검토 표시: 01 롤링 사진 확인 꼬리표는 사진 왼쪽 위 안쪽에(보라 꼬리표는 사진 오른쪽 위 바깥) — 휴대폰에서 둘이 겹치지 않게 */
.review .s04-row--1[data-note]::after { right: auto; bottom: auto; left: 12px; top: 12px; transform: none; }