/* ==========================================================================
   section8 — 비용 안내 (정액제 패키지 + 진행절차 7단계)
   Figma: PC 153:2454 / TA(768) 153:3236 / MO(375) 153:2810
   NOTE: 담당 배정 시 "성공사례(Frame257/.story-card)"로 추정되었으나 실제 노드는
   비용/절차 안내 섹션이었음. .story-card는 이 섹션에 해당하지 않아 사용하지 않음
   (자세한 내용은 작업 보고 참고).
   ========================================================================== */

.section8 {
  padding: clamp(48px, calc(48px + (90 - 48) * ((100vw - 375px) / (1440 - 375))), 90px) 0;
  background: var(--color-bluegrey-100);
}

.s8-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, calc(28px + (50 - 28) * ((100vw - 375px) / (1440 - 375))), 50px);
}

/* ---- Wrapper: pricing card + step list + note (Figma: Frame358) ---- */
.s8-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 767px) {
  .s8-content { gap: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (768 - 375))), 30px); }
}
@media (min-width: 768px) {
  .s8-content { gap: clamp(30px, calc(30px + (45 - 30) * ((100vw - 768px) / (1440 - 768))), 45px); }
}

/* ---- Pricing package card (dark gradient banner) ---- */
.s8-pricing {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
  border-radius: clamp(10px, calc(10px + (20 - 10) * ((100vw - 375px) / (1440 - 375))), 20px);
  background: radial-gradient(140% 170% at 50% -22%, #4b6cb7 0%, #2a4b8c 44%, #193a77 66%, var(--color-darkblue) 88%);
  gap: clamp(15px, calc(15px + (32 - 15) * ((100vw - 375px) / (1440 - 375))), 32px);
  padding: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1440 - 375))), 40px)
           clamp(24px, calc(24px + (38 - 24) * ((100vw - 375px) / (768 - 375))), 38px);
}
@media (min-width: 768px) {
  .s8-pricing { padding-left: clamp(40px, calc(40px + (62 - 40) * ((100vw - 768px) / (1440 - 768))), 62px);
                padding-right: clamp(40px, calc(40px + (62 - 40) * ((100vw - 768px) / (1440 - 768))), 62px); }
}

.s8-pricing__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, calc(8px + (11 - 8) * ((100vw - 375px) / (1440 - 375))), 11px);
  width: 100%;
  text-align: left;
}
@media (max-width: 767px) {
  .s8-pricing__head { justify-content: center; text-align: center; }
}
.s8-pricing__check { flex-shrink: 0; width: clamp(13px, calc(13px + (20 - 13) * ((100vw - 375px) / (1440 - 375))), 20px); height: auto; }
.s8-pricing__head-text {
  font-weight: 600;
  font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 375px) / (1440 - 375))), 20px);
  line-height: 1.35;
}

.s8-pricing__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, calc(16px + (24 - 16) * ((100vw - 375px) / (1440 - 375))), 24px);
}
@media (min-width: 768px) {
  .s8-pricing__body { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

.s8-pricing__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, calc(8px + (36 - 8) * ((100vw - 375px) / (1440 - 375))), 36px);
}
@media (min-width: 768px) {
  .s8-pricing__info { align-items: flex-start; text-align: left; }
}

.s8-pricing__price {
  display: flex;
  align-items: flex-end;
  gap: clamp(9px, calc(9px + (12 - 9) * ((100vw - 375px) / (1440 - 375))), 12px);
}
.s8-pricing__price strong {
  font-weight: 700;
  font-size: clamp(34px, calc(34px + (46 - 34) * ((100vw - 375px) / (1440 - 375))), 46px);
  line-height: 1.1;
}
.s8-pricing__price span {
  font-weight: 400;
  font-size: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / (1440 - 375))), 16px);
}

.s8-pricing__desc {
  font-weight: 400;
  font-size: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / (1440 - 375))), 16px);
  line-height: 1.5;
}

.s8-pricing__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}
@media (min-width: 768px) {
  .s8-pricing__tags { flex-direction: column; align-items: flex-start; gap: 28px; }
}
.s8-pricing__tags li {
  display: flex;
  align-items: center;
  gap: clamp(6px, calc(6px + (12 - 6) * ((100vw - 375px) / (1440 - 375))), 12px);
  font-weight: 600;
  font-size: clamp(12px, calc(12px + (18 - 12) * ((100vw - 375px) / (1440 - 375))), 18px);
  white-space: nowrap;
}
.s8-pricing__dot {
  flex-shrink: 0;
  width: clamp(4px, calc(4px + (7 - 4) * ((100vw - 375px) / (1440 - 375))), 7px);
  height: clamp(4px, calc(4px + (7 - 4) * ((100vw - 375px) / (1440 - 375))), 7px);
  border-radius: 50%;
  background: var(--color-white);
}

/* ---- Step list (Figma: Frame191, 1~7 numbered timeline) ----
   Interaction annotation (Figma, PC node 153:2479):
   "hover시 해당 숫자 배경컬러 darkblue, 숫자 텍스트 white로 변경"
   -> implemented below as a per-item hover on .s8-step__num
---------------------------------------------------------------- */
.s8-steps {
  width: 100%;
  max-width: 653px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, calc(18px + (36 - 18) * ((100vw - 375px) / (1440 - 375))), 36px);
}
.s8-step {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, calc(10px + (23 - 10) * ((100vw - 375px) / (1440 - 375))), 23px);
}
.s8-step__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(18px, calc(18px + (35 - 18) * ((100vw - 375px) / (1440 - 375))), 35px);
  height: clamp(18px, calc(18px + (35 - 18) * ((100vw - 375px) / (1440 - 375))), 35px);
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-darkblue);
  color: var(--color-darkblue);
  font-weight: 600;
  font-size: clamp(10px, calc(10px + (18 - 10) * ((100vw - 375px) / (1440 - 375))), 18px);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.s8-step:hover .s8-step__num {
  background: var(--color-darkblue);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .s8-step__num { margin-top: 3px; }
}
.s8-step__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.s8-step__title {
  font-weight: 600;
  color: var(--color-black);
  font-size: clamp(16px, calc(16px + (22 - 16) * ((100vw - 375px) / (1440 - 375))), 22px);
  line-height: 1.3;
}
.s8-step__desc {
  font-weight: 400;
  color: var(--color-grey-900);
  font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1440 - 375))), 18px);
  line-height: 1.4;
}

/* ---- Footnote + CTA ---- */
.s8-note {
  width: 100%;
  max-width: 445px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 767px) {
  .s8-note { gap: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (768 - 375))), 30px); }
}
@media (min-width: 768px) {
  .s8-note { gap: clamp(30px, calc(30px + (40 - 30) * ((100vw - 768px) / (1440 - 768))), 40px); }
}
.s8-note__text {
  font-weight: 400;
  color: var(--color-grey-900);
  font-size: clamp(11px, calc(11px + (14 - 11) * ((100vw - 375px) / (1440 - 375))), 14px);
  line-height: 1.5;
}