/* ⑨ 초록 둥근 카드 — 장기 운영 (시안 y 8194~8824, 카드 8211~8824)
   카드 아래쪽 191px(카드 높이의 31%)부터 카키 띠가 깔린다 → ⑨-추가·⑩까지 이어짐.
   위치·글자 크기는 카드 폭(1441px) 기준 비율(--u). */
.s09 {
  --s09-gold: #d9c67a;
  --s09-card-w: min(1441px, calc(100vw - 40px));
  background: linear-gradient(to top, var(--c-khaki) 0, var(--c-khaki) calc(var(--s09-card-w) * .1326), var(--c-white) 0);
  padding: 17px 0 0;
}
.s09-card {
  --u: calc(100cqw / 1441);
  position: relative;
  container-type: inline-size;
  width: min(1441px, calc(100% - 40px));
  aspect-ratio: 1441 / 613;
  margin: 0 auto;
  border-radius: 40px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 25% 45%, #025b37 0%, #005633 45%, #004f2e 100%);
  color: var(--c-white);
}
.s09-txt { position: absolute; z-index: 2; left: calc(122 * var(--u)); top: calc(160 * var(--u)); }
.s09-title { font-size: calc(50 * var(--u)); line-height: calc(63 * var(--u)); letter-spacing: -0.045em; }
.s09-w { color: var(--c-white); }
.s09-g { color: var(--s09-gold); }
.s09-desc { margin-top: calc(45 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(32 * var(--u)); letter-spacing: -0.045em; color: rgba(255,255,255,.95); }

.s09-card .s09-pic { position: absolute; z-index: 1; left: calc(706 * var(--u)); top: 0; width: calc(735 * var(--u)); height: 100%; }
.s09-pic > img { width: 100%; height: 100%; object-fit: cover; }
.s09-pic .s09-mark { position: absolute; z-index: 3; right: 4%; top: 12%; width: 2px; height: 2px; }

/* 금색 배지 '10년 이상 장기운영' */
.s09-pic .s09-badge {
  position: absolute; z-index: 2; left: -10.34%; top: 57.6%; width: 25.3%; aspect-ratio: 1;
  padding: 3.6%; border-radius: 50%;
  background: conic-gradient(from 20deg, #fff2b8, #c8992f, #f7df8c, #9c6e1d, #f9e6a0, #c8992f, #fff2b8);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.35);
}
.s09-badge-in {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #2b2b2b 0%, #0b0b0b 65%, #000 100%);
  box-shadow: 0 0 0 2px #f3dc8c, inset 0 2px 8px rgba(255,255,255,.12);
  text-align: center;
}
.s09-badge-in::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,246,210,.35), rgba(255,255,255,0)); animation: s09-shine 3.8s ease-in-out infinite; }
@keyframes s09-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.s09-badge-t {
  font-family: var(--f-body); font-weight: 900; font-size: calc(25 * var(--u)); line-height: 1.18; letter-spacing: -0.05em;
  background: linear-gradient(180deg, #fff4c4 0%, #e7cc7a 55%, #c9a049 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s09-stars { margin-top: calc(10 * var(--u)); font-size: calc(11 * var(--u)); color: var(--s09-gold); letter-spacing: .15em; line-height: 1; }
.s09-stars b { font-size: 1.45em; font-weight: 400; }

@media (max-width: 768px) {
  .s09 { --s09-card-w: calc(100vw - 32px); background: linear-gradient(to top, var(--c-khaki) 0, var(--c-khaki) calc(var(--s09-card-w) * .42), var(--c-white) 0); padding-top: 12px; }
  .s09-card { aspect-ratio: auto; width: calc(100% - 32px); border-radius: 24px; }
  .s09-txt { position: static; padding: 34px 20px 28px; }
  .s09-title { font-size: clamp(25px, 7.2vw, 50px); line-height: 1.3; }
  .s09-desc { margin-top: 16px; font-size: 15px; line-height: 1.75; }
  .s09-desc br { display: none; }
  .s09-card .s09-pic { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 735 / 613; }
  .s09-pic .s09-badge { left: 2%; top: 58%; width: 26%; }
  .s09-badge-t { font-size: clamp(11px, 3.3vw, 21px); }
  .s09-stars { margin-top: 4px; font-size: 9px; }
}