/* ② 업종변경매출 — 브이웍스 시안 y 1000~2040 (1920 기준 좌표를 --u 로 비례 축소) */
.s02 {
  --u: calc(min(100vw, 1920px) / 1920);
  --s02-cream: #fbf3d6;
  --s02-pill: #005633;
  --s02-gold-num: #dccd85;
  background: var(--s02-cream);
  color: var(--c-ink);
}
.s02 .s02-blur { position: absolute; left: calc(50% - 1080 * var(--u)); top: calc(160 * var(--u)); width: calc(1150 * var(--u)); height: calc(820 * var(--u)); background: url(../assets/s03/pot.png) center / contain no-repeat; filter: blur(16px) saturate(.7); opacity: .2; pointer-events: none; }
.s02 .s02-stage { position: relative; width: calc(1920 * var(--u)); height: calc(1040 * var(--u)); margin: 0 auto; }
.s02 .s02-store { position: absolute; left: calc(1012 * var(--u)); top: calc(95 * var(--u)); width: calc(908 * var(--u)); height: auto; }
.s02 .s02-pill { position: absolute; left: calc(776 * var(--u)); top: calc(139 * var(--u)); width: calc(369 * var(--u)); height: calc(62 * var(--u)); display: grid; place-items: center; border-radius: calc(8 * var(--u)); background: var(--s02-pill); color: #fff; font-size: calc(23.5 * var(--u)); font-weight: 900; letter-spacing: -0.05em; white-space: nowrap; }
.s02 .s02-h { position: absolute; left: 0; right: 0; top: calc(201 * var(--u)); text-align: center; font-size: calc(70 * var(--u)); line-height: 1.3; letter-spacing: -0.04em; color: #161616; white-space: nowrap; }
.s02 .s02-h em { font-style: normal; color: var(--c-green); -webkit-text-emphasis: filled dot var(--c-green); text-emphasis: filled dot var(--c-green); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }
.s02 .s02-sub { position: absolute; left: 0; right: 0; top: calc(320 * var(--u)); text-align: center; font-size: calc(20.5 * var(--u)); line-height: 1.4; letter-spacing: -0.04em; color: #222; font-weight: 500; }

.s02 .s02-card { position: absolute; left: calc(240 * var(--u)); top: calc(422 * var(--u)); width: calc(688 * var(--u)); height: calc(501 * var(--u)); border-radius: calc(40 * var(--u)); background: #000; color: #fff; box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(60, 40, 10, .18); }
.s02 .s02-tape { position: absolute; left: calc(273 * var(--u)); top: calc(-29 * var(--u)); width: calc(184 * var(--u)); height: calc(62 * var(--u)); transform: rotate(-3deg); background: linear-gradient(180deg, rgba(214, 196, 140, .95), rgba(196, 176, 116, .95)), #cdb985; clip-path: polygon(2% 8%, 8% 0, 16% 6%, 26% 1%, 38% 5%, 52% 0, 66% 4%, 80% 0, 92% 5%, 100% 2%, 98% 30%, 100% 62%, 97% 100%, 86% 94%, 72% 100%, 58% 95%, 44% 100%, 30% 94%, 16% 100%, 4% 95%, 0 70%, 3% 38%); box-shadow: inset 0 0 18px rgba(120, 100, 50, .35); }
.s02 .s02-tape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .08) 0 3px, rgba(0, 0, 0, 0) 3px 9px); }
.s02 .s02-row { position: absolute; left: calc(115 * var(--u)); right: calc(40 * var(--u)); display: grid; }
.s02 .s02-row.a { top: calc(84 * var(--u)); }
.s02 .s02-row.b { top: calc(314 * var(--u)); }
.s02 .s02-row.a::after { content: ""; position: absolute; left: calc(-115 * var(--u)); width: calc(545 * var(--u)); top: calc(171 * var(--u)); border-top: 1px dashed #4b4b4b; }
.s02 .s02-row .lb { font-size: calc(22 * var(--u)); font-weight: 700; line-height: calc(30 * var(--u)); letter-spacing: -0.03em; width: max-content; }
.s02 .s02-row .v { display: flex; align-items: baseline; gap: calc(6 * var(--u)); width: max-content; font-size: calc(70 * var(--u)); line-height: calc(84 * var(--u)); letter-spacing: -0.03em; }
.s02 .s02-row .v small { font-size: calc(35 * var(--u)); font-weight: 700; letter-spacing: 0; }
.s02 .s02-row .v.gold { color: var(--s02-gold-num); }
.s02 .s02-arrow { position: absolute; left: calc(742 * var(--u)); top: calc(585 * var(--u)); width: calc(110 * var(--u)); height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.s02 .s02-badge { position: absolute; left: calc(812 * var(--u)); top: calc(570 * var(--u)); width: calc(190 * var(--u)); height: calc(190 * var(--u)); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #0a4029 0%, #032d1c 70%); box-shadow: 0 0 0 calc(26 * var(--u)) rgba(10, 70, 44, .28), 0 0 0 calc(30 * var(--u)) rgba(10, 70, 44, .12); color: #fff; }
.s02 .s02-badge b { font-size: calc(46 * var(--u)); line-height: 1.08; letter-spacing: -0.03em; }
.s02 .s02-badge.hit { animation: s02-hit .9s cubic-bezier(.3, 1.6, .5, 1) both, s02-glow 2.4s ease-in-out .9s infinite; }
.s02 .s02-row.b .v.hit { animation: s02-flash 1s ease-out both; }
@keyframes s02-hit { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes s02-glow { 0%, 100% { box-shadow: 0 0 0 calc(26 * var(--u)) rgba(10, 70, 44, .28), 0 0 0 calc(30 * var(--u)) rgba(10, 70, 44, .12); } 50% { box-shadow: 0 0 0 calc(34 * var(--u)) rgba(10, 90, 54, .32), 0 0 calc(40 * var(--u)) calc(40 * var(--u)) rgba(226, 200, 120, .25); } }
@keyframes s02-flash { 0% { text-shadow: none; } 40% { text-shadow: 0 0 24px rgba(255, 230, 150, .9); } 100% { text-shadow: none; } }

@media (max-width: 1024px) {
  .s02 .s02-blur { left: -30%; top: 140px; width: 140%; height: 70%; }
  .s02 .s02-stage { width: auto; height: auto; padding: 52px 16px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .s02 .s02-store { position: relative; order: 9; left: auto; top: auto; width: calc(100% + 32px); max-width: none; margin: 26px -16px 0; aspect-ratio: 908 / 680; object-fit: cover; object-position: left bottom; }
  .s02 .s02-pill { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 9px 18px; border-radius: 8px; font-size: 16px; }
  .s02 .s02-h { position: relative; top: auto; margin-top: 16px; font-size: clamp(30px, 8.6vw, 60px); white-space: normal; }
  .s02 .s02-sub { position: relative; top: auto; margin-top: 8px; font-size: 15px; }
  .s02 .s02-card { position: relative; left: auto; top: auto; width: 100%; max-width: 600px; height: auto; margin-top: 40px; padding: 34px 22px 30px; border-radius: 24px; text-align: left; }
  .s02 .s02-tape { left: 50%; top: -22px; width: 130px; height: 44px; margin-left: -65px; }
  .s02 .s02-row { position: relative; left: auto; right: auto; }
  .s02 .s02-row.a, .s02 .s02-row.b { top: auto; }
  .s02 .s02-row.a { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed #4b4b4b; }
  .s02 .s02-row.a::after { display: none; }
  .s02 .s02-row .lb { font-size: 15px; line-height: 1.5; }
  .s02 .s02-row .v { font-size: clamp(30px, 9.2vw, 56px); line-height: 1.15; gap: 4px; }
  .s02 .s02-row .v small { font-size: .5em; }
  .s02 .s02-arrow { display: none; }
  .s02 .s02-badge { position: relative; left: auto; top: auto; align-self: flex-end; z-index: 2; width: 104px; height: 104px; margin: -60px 6px 0 0; box-shadow: 0 0 0 12px rgba(10, 70, 44, .25); }
  .s02 .s02-badge b { font-size: 24px; }
}