/* ⑳ 안전창업 — 카키 한지 배경, 세로 원 4개, 테이프 붙은 종이 '맞춤상담' (시안 y 18722~19406) */
.s20 {
  --s20-bg: #e8d488;
  --s20-green: #005633;
  --s20-k: 1;                 /* 종이 크기 비율(PC 538px = 1) */
  background: var(--s20-bg) url(../assets/s20/bg.jpg) center / cover no-repeat;
  color: #000;
  overflow-x: clip;           /* 원이 위 구역(⑲)에 살짝 걸치도록 위로는 열어 둠 */
  overflow-y: visible;
  z-index: 1;
}
.s20-in { position: relative; max-width: var(--wrap); margin-inline: auto; text-align: center; }
/* 배경 영상: 김이 천천히 오르는 감자탕(힉스필드 54번, 10-27). bg.jpg 와 같은 노란 색·흐림·옅기를 영상에 입혀 둠(평균색·명암 폭 bg.jpg 와 맞춤).
   bg.jpg 는 그대로 밑에 깔려 영상·포스터가 안 뜰 때 대신 보인다. 글(.s20-in)은 영상보다 뒤에 와서 위에 그려진다. */
.s20 > .loopv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* 세로 원 '안 전 창 업' */
.s20-badge { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* 흰 테두리는 원 전체를 한 덩어리로 감싸고, 위쪽 원이 아래 원을 덮는다(시안) */
.s20-dot {
  --ring: 9px;
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-white); color: var(--c-white); line-height: 1; letter-spacing: 0;
}
.s20-dot::before { content: ""; position: absolute; inset: var(--ring); border-radius: 50%; background: var(--s20-green); border: 1px solid rgba(0, 0, 0, .55); z-index: 1; }
.s20-dot:nth-child(2)::before { z-index: 4; }
.s20-dot:nth-child(3)::before { z-index: 3; }
.s20-dot:nth-child(4)::before { z-index: 2; }
.s20-dot b { position: relative; z-index: 10; font-weight: 900; }
.s20-dot + .s20-dot { margin-top: -43px; }
/* 원 안 글자가 하나씩 톡 */
.js .s20-badge.in .s20-dot b { animation: pop .55s ease-out both; }
.js .s20-badge.in .s20-dot:nth-child(3) b { animation-delay: .12s; }
.js .s20-badge.in .s20-dot:nth-child(4) b { animation-delay: .24s; }
.js .s20-badge.in .s20-dot:nth-child(5) b { animation-delay: .36s; }

.s20-title { color: #000; letter-spacing: -0.07em; text-wrap: initial; }
.s20-title em { font-style: normal; color: var(--s20-green); }
.s20-desc { color: #000; letter-spacing: -0.06em; }
.s20-strong { font-weight: 700; color: #000; letter-spacing: -0.06em; }

/* 테이프 붙은 종이 — 살짝 흔들림 */
.s20-paper {
  position: relative; width: calc(538px * var(--s20-k)); aspect-ratio: 538 / 337;
  background: url(../assets/s20/paper.png) center / 100% 100% no-repeat;
  transform-origin: 58% 12%;
}
.js .s20-note.in .s20-paper { animation: s20-sway 3.4s ease-in-out .3s infinite; }
@keyframes s20-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-1.6deg); } 75% { transform: rotate(1.4deg); } }
.s20 .s20-paper-txt {
  position: absolute; left: 0; right: 0; top: calc(100px * var(--s20-k));
  display: flex; flex-direction: column; align-items: center;
  transform: rotate(5deg); transform-origin: 50% 50%; color: #000; line-height: 1;
}
.s20-paper-lab { font-weight: 700; font-size: max(14px, calc(21px * var(--s20-k))); letter-spacing: -0.06em; transform: translateX(calc(46px * var(--s20-k))); }
.s20-paper-num { margin-top: calc(14px * var(--s20-k)); font-size: calc(78px * var(--s20-k)); letter-spacing: -0.06em; transform: translateX(calc(-8px * var(--s20-k))); }

/* ---------- PC: 시안 좌표 ---------- */
@media (min-width: 1600px) {
  .s20 { height: 685px; }
  .s20-in { height: 100%; padding-top: 143px; }
  .s20-badge { position: absolute; left: 2px; top: -46px; width: 130px; }
  .s20-dot { width: 130px; height: 130px; font-size: 50px; }
  .s20-title { font-size: 62px; line-height: 72px; }
  .s20-note { position: absolute; left: 1072px; top: 113px; }
  .s20-desc { margin-top: 56px; font-size: 18px; line-height: 30px; letter-spacing: -0.04em; }
  .s20-strong { margin-top: 40px; font-size: 23px; line-height: 30px; letter-spacing: -0.05em; }
}

/* ---------- 태블릿 ---------- */
@media (min-width: 769px) and (max-width: 1599px) {
  .s20 { padding: 90px 24px 80px; }
  .s20-badge { position: absolute; left: 0; top: -60px; }
  .s20-dot { --ring: 7px; width: 96px; height: 96px; font-size: 38px; }
  .s20-dot + .s20-dot { margin-top: -32px; }
  .s20-title { font-size: clamp(40px, 5.2vw, 56px); line-height: 1.18; padding-left: 90px; }
  .s20-note { display: flex; justify-content: center; margin-top: 36px; }
  .s20 { --s20-k: .72; }
  .s20-desc { margin-top: 32px; font-size: 16px; line-height: 1.8; }
  .s20-strong { margin-top: 24px; font-size: 19px; line-height: 1.6; }
}

/* ---------- 휴대폰: 원은 가로 한 줄, 종이는 글 아래 ---------- */
@media (max-width: 768px) {
  .s20 { --s20-k: .56; padding: 52px 16px 56px; overflow: hidden; }
  .s20-badge { flex-direction: row; justify-content: center; }
  .s20-dot { --ring: 5px; width: 64px; height: 64px; font-size: 27px; }
  .s20-dot + .s20-dot { margin-top: 0; margin-left: -12px; }
  .s20-title { margin-top: 26px; font-size: clamp(28px, 7.6vw, 40px); line-height: 1.25; letter-spacing: -0.06em; }
  .s20-note { display: flex; justify-content: center; margin-top: 22px; }
  .s20-desc { margin-top: 22px; font-size: 15px; line-height: 1.75; letter-spacing: -0.04em; }
  .s20-desc br { display: none; }
  .s20-strong { margin-top: 16px; font-size: 16px; line-height: 1.6; letter-spacing: -0.04em; }
}