/* ③ 업종 바꾸고 매출 4배 — 브이웍스 시안 y 2040~3080 (냄비는 아래 구역에 85px 걸침) */
.s03 {
  --u: calc(min(100vw, 1920px) / 1920);
  --s03-green: #025332;
  position: relative;
  z-index: 3;
  overflow: visible;
  overflow-x: clip;
  color: #fff;
  background:
    radial-gradient(ellipse 40% 50% at 18% 30%, rgba(20, 110, 70, .35), rgba(0, 0, 0, 0) 70%),
    var(--s03-green);
}
.s03 .s03-bg { position: absolute; inset: 0; overflow: hidden; }
.s03 .s03-interior { position: absolute; top: 0; left: calc(50% + 145 * var(--u)); width: calc(815 * var(--u)); height: 100%; object-fit: cover; object-position: left top; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 calc(170 * var(--u))); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 calc(170 * var(--u))); }
.s03 .s03-stage { position: relative; width: calc(1920 * var(--u)); height: calc(1040 * var(--u)); margin: 0 auto; }
.s03 .s03-pill { position: absolute; left: calc(241 * var(--u)); top: calc(151 * var(--u)); width: calc(369 * var(--u)); height: calc(62 * var(--u)); display: grid; place-items: center; border-radius: calc(8 * var(--u)); background: linear-gradient(100deg, #f1c757 0%, #f6dd86 45%, #fcf3ab 100%); color: #1a1a1a; font-size: calc(23.5 * var(--u)); font-weight: 900; letter-spacing: -0.05em; white-space: nowrap; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .18); }
.s03 .s03-h { position: absolute; left: calc(238 * var(--u)); top: calc(240 * var(--u)); letter-spacing: -0.045em; white-space: nowrap; }
.s03 .s03-h .l1 { display: block; font-size: calc(67 * var(--u)); line-height: calc(87 * var(--u)); }
.s03 .s03-h .l2 { display: block; font-size: calc(67 * var(--u)); line-height: calc(100 * var(--u)); margin-top: calc(-4 * var(--u)); width: max-content; }
.s03 .s03-h em { font-style: normal; font-size: calc(95 * var(--u)); margin-left: 0; background: linear-gradient(180deg, #fff6c4 0%, #f0d77f 38%, #d2a548 62%, #f7e6a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.s03 .s03-sub { position: absolute; left: calc(240 * var(--u)); top: calc(449 * var(--u)); font-size: calc(20.5 * var(--u)); line-height: 1.4; letter-spacing: -0.04em; color: #f2f2ec; white-space: nowrap; }
.s03 .s03-pot { position: absolute; z-index: 2; left: calc(200 * var(--u)); top: calc(545 * var(--u)); width: calc(920 * var(--u)); }
.s03 .s03-pot img { width: 100%; height: auto; filter: drop-shadow(0 calc(18 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .35)); }

/* 연기: 냄비 위로 하얀 김이 피어오른다 */
.s03 .s03-smoke { position: absolute; left: 12%; right: 20%; top: -12%; height: 52%; pointer-events: none; }
.s03 .s03-smoke i { position: absolute; bottom: 0; width: 26%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); filter: blur(10px); opacity: 0; animation: s03-steam 6s ease-in-out infinite; }
.s03 .s03-smoke i:nth-child(1) { left: 8%; animation-delay: 0s; }
.s03 .s03-smoke i:nth-child(2) { left: 24%; animation-delay: -1s; width: 30%; }
.s03 .s03-smoke i:nth-child(3) { left: 40%; animation-delay: -2s; }
.s03 .s03-smoke i:nth-child(4) { left: 55%; animation-delay: -3s; width: 32%; }
.s03 .s03-smoke i:nth-child(5) { left: 70%; animation-delay: -4s; }
.s03 .s03-smoke i:nth-child(6) { left: 0; animation-delay: -5s; width: 30%; height: 80%; bottom: -30%; }
@keyframes s03-steam {
  0% { transform: translateY(30%) scale(.6, .7); opacity: 0; }
  25% { opacity: .9; }
  70% { opacity: .5; }
  100% { transform: translateY(-70%) translateX(8%) scale(1.25, 1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .s03 .s03-smoke i { opacity: .55; transform: none; } }

@media (max-width: 1024px) {
  .s03 { overflow-x: clip; }
  .s03 .s03-bg { position: static; order: 9; }
  .s03 .s03-stage { width: auto; height: auto; padding: 52px 16px 0; display: flex; flex-direction: column; align-items: flex-start; }
  .s03 .s03-pill { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 9px 18px; border-radius: 8px; font-size: 16px; }
  .s03 .s03-h { position: relative; left: auto; top: auto; margin-top: 18px; white-space: normal; }
  .s03 .s03-h .l1 { font-size: clamp(26px, 7.4vw, 52px); line-height: 1.35; }
  .s03 .s03-h .l2 { font-size: clamp(26px, 7.4vw, 52px); line-height: 1.3; }
  .s03 .s03-h em { font-size: clamp(40px, 11.6vw, 80px); margin-left: 4px; }
  .s03 .s03-sub { position: relative; left: auto; top: auto; margin-top: 12px; font-size: 15px; white-space: normal; }
  .s03 .s03-pot { position: relative; left: auto; top: auto; width: calc(100% + 16px); margin: 26px -8px -14%; }
  .s03 .s03-bg { display: block; }
  .s03 .s03-interior { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 815 / 700; object-position: center bottom; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 26%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 26%); }
  .s03 { display: flex; flex-direction: column; }
  .s03 .s03-stage { order: 1; position: relative; z-index: 2; }
  .s03 .s03-bg { order: 2; position: relative; inset: auto; }
}