/* ⑧ 크림 둥근 카드 — 초보 가능 (시안 y 7548~8194, 카드 7564~8177)
   위치·글자 크기는 카드 폭(1441px) 기준 비율(--u). */
.s08 {
  --s08-line: #dbc87b;
  background: var(--c-white);
  padding: 16px 0 17px;
}
.s08-card {
  --u: calc(100cqw / 1441);
  position: relative;
  container-type: inline-size;
  width: min(1441px, calc(100% - 40px));
  aspect-ratio: 1441 / 614;
  margin: 0 auto;
  border: 1px solid var(--s08-line);
  border-radius: 40px;
  overflow: hidden;
  background: var(--c-cream);
  color: #000;
}
.s08-left { position: absolute; z-index: 2; left: calc(119 * var(--u)); top: calc(149 * var(--u)); }
.s08-pill {
  display: inline-block; width: calc(126 * var(--u)); height: calc(30 * var(--u));
  border-radius: calc(8 * var(--u)); background: #005633; color: var(--c-cream);
  font-size: max(13px, calc(18 * var(--u))); line-height: calc(30 * var(--u)); text-align: center; letter-spacing: -0.02em;
}
.s08-title { margin-top: calc(24 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(59 * var(--u)); letter-spacing: -0.05em; }
.s08-card .s08-art { position: absolute; z-index: 1; left: calc(405 * var(--u)); top: calc(1 * var(--u)); width: calc(795 * var(--u)); }
.s08-art img { width: 100%; height: auto; }
.s08-art .s08-mark { position: absolute; z-index: 3; right: 6%; top: 52%; width: 2px; height: 2px; }
/* 원형 사진 자리의 육수 붓기 반복 영상(힉스필드 51번, 10-27). art.jpg 의 어두운 원(중심 314.5,305.4 · 반지름 235)보다 2px 크게 덮는다.
   멈춤 화면(poster)은 지금 사진을 같은 칸으로 잘라 둔 것 → 영상이 안 돌면 예전 모습 그대로. */
.s08-art > .loopv { position: absolute; left: calc(77 / 795 * 100%); top: calc(68 / 612 * 100%); width: calc(475 / 795 * 100%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; clip-path: circle(50% at 50% 50%); pointer-events: none; }
/* 원 오른쪽 위로 걸친 숟가락 고기(김치 조각)는 art.jpg 에서 오려 영상 위에 다시 올림 */
.s08-art::after { content: ""; position: absolute; inset: 0; background: url(../assets/s08/spoon.png) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.s08-desc { position: absolute; z-index: 2; left: calc(1047 * var(--u)); top: calc(378 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(30 * var(--u)); letter-spacing: -0.045em; color: #1e1e1e; }

/* 국자 위 김(살짝) */
.s08-steam { position: absolute; left: 25%; top: 6%; width: 18%; height: 22%; pointer-events: none; }
.s08-steam i { position: absolute; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 68%); filter: blur(6px); opacity: 0; animation: s08-steam 5s ease-out infinite; }
.s08-steam i:nth-child(1) { left: 10%; }
.s08-steam i:nth-child(2) { left: 40%; animation-delay: 1.7s; }
.s08-steam i:nth-child(3) { left: 24%; animation-delay: 3.3s; }
@keyframes s08-steam { 0% { opacity: 0; transform: translateY(20%) scale(.6); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateY(-110%) scale(1.5); } }

@media (max-width: 768px) {
  .s08 { padding: 24px 0 12px; }
  .s08-card { aspect-ratio: auto; width: calc(100% - 32px); border-radius: 24px; padding: 30px 18px 28px; text-align: center; }
  .s08-left, .s08-desc { position: static; }
  .s08-pill { width: auto; height: auto; padding: 3px 14px; border-radius: 8px; font-size: 15px; line-height: 24px; }
  .s08-title { margin-top: 12px; font-size: clamp(28px, 8.2vw, 50px); line-height: 1.22; }
  .s08-card .s08-art { position: relative; left: auto; top: auto; width: auto; margin: 14px -18px 0; }
  .s08-desc { margin-top: 10px; font-size: 15px; line-height: 1.75; }
}