/* 성지폰 셀프배송 안내. 범위: .sjp-process 내부만. 외부 전역 스타일을 변경하지 않습니다. */
@font-face {
  font-family: 'SJP Process Pretendard';
  src: url('../promo/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.sjp-process {
  --spp-navy: #07173c;
  --spp-pink: #ff0055;
  --spp-blue: #087aff;
  --spp-muted: #626872;
  width: 100%;
  max-width: 492px;
  margin-inline: auto;
  container: sjp-process / inline-size;
  color: var(--spp-navy);
  font-family: 'SJP Process Pretendard', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  line-height: 1.3;
  writing-mode: horizontal-tb;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  isolation: isolate;
}
.sjp-process *, .sjp-process *::before, .sjp-process *::after { box-sizing: border-box; }
.sjp-process :where(h2, p, ol, li) { margin: 0; padding: 0; }
.sjp-process img { display: block; max-width: 100%; }
.sjp-process__surface {
  --spp-u: 1px;
  --spp-u: calc(100cqw / 492);
  display: grid;
  gap: calc(1 * var(--spp-u));
  padding: calc(13 * var(--spp-u)) calc(14 * var(--spp-u)) calc(5 * var(--spp-u)) calc(1 * var(--spp-u));
  background: linear-gradient(110deg, #fafdff, #fff9fd);
}
.sjp-process__top {
  display: grid;
  grid-template-columns: minmax(90px, calc(106 * var(--spp-u))) minmax(0, 1fr);
  gap: calc(5 * var(--spp-u));
  min-width: 0;
  align-items: stretch;
}
.sjp-process__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(5 * var(--spp-u));
  min-width: 0;
  padding-top: calc(2 * var(--spp-u));
}
.sjp-process__title {
  margin-left: calc(10 * var(--spp-u)) !important;
  font-size: clamp(18px, calc(22 * var(--spp-u)), 22px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: calc(-1.1 * var(--spp-u));
}
.sjp-process__title > span { display: block; white-space: nowrap; }
.sjp-process__intro-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  min-height: 0;
  padding: 3px 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--spp-pink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.4px;
  text-align: center;
  writing-mode: horizontal-tb;
  word-break: keep-all;
}
.sjp-process__intro-badge > span { display: block; max-width: 100%; white-space: nowrap; text-align: center; }
.sjp-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 0;
  min-width: 0;
  min-height: calc(118 * var(--spp-u));
  padding: calc(4 * var(--spp-u)) 0 calc(7 * var(--spp-u));
  border: 1px solid #dbeeff;
  border-radius: calc(13 * var(--spp-u));
  background: linear-gradient(120deg, #f2faff, #f0f8ff);
  list-style: none;
}
.sjp-process__step {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
}
.sjp-process__step-icon {
  width: calc(72 * var(--spp-u));
  height: calc(68 * var(--spp-u));
  object-fit: contain;
  flex: none;
}
.sjp-process__step-label {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: start;
  justify-content: center;
  gap: calc(4 * var(--spp-u));
  width: 100%;
  min-width: 0;
  margin-top: calc(-7 * var(--spp-u));
  padding-inline: calc(1 * var(--spp-u));
}
.sjp-process__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(16px, calc(22 * var(--spp-u)), 22px);
  height: clamp(16px, calc(22 * var(--spp-u)), 22px);
  border-radius: 50%;
  background: var(--spp-blue);
  color: #fff;
  font-size: clamp(11px, calc(14 * var(--spp-u)), 14px);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sjp-process__step-copy {
  min-width: 0;
  color: #101316;
  font-size: clamp(12px, calc(15 * var(--spp-u)), 15px);
  font-weight: 750;
  line-height: 1.38;
  letter-spacing: calc(-.65 * var(--spp-u));
  text-align: center;
  word-break: keep-all;
}
.sjp-process__step-copy > span { display: block; white-space: nowrap; }
.sjp-process__arrow {
  position: absolute;
  left: calc(100% - 13 * var(--spp-u));
  top: calc(28 * var(--spp-u));
  width: calc(26 * var(--spp-u));
  height: calc(20 * var(--spp-u));
  pointer-events: none;
}
.sjp-process__save {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(100 * var(--spp-u)) minmax(0, 1fr);
  column-gap: calc(9 * var(--spp-u));
  align-items: center;
  min-height: calc(127 * var(--spp-u));
  margin-top: 14px;
  margin-inline: calc(7 * var(--spp-u)) calc(2 * var(--spp-u));
  padding: 12px calc(12 * var(--spp-u)) 12px calc(12 * var(--spp-u));
  border-radius: calc(13 * var(--spp-u));
  background: linear-gradient(110deg, #ffedf5, #fcebf3);
}
.sjp-process__save-art { display: flex; justify-content: center; align-items: center; min-width: 0; }
.sjp-process__save-icon { width: calc(96 * var(--spp-u)); height: calc(100 * var(--spp-u)); object-fit: contain; }
.sjp-process__save-copy { min-width: 0; }
.sjp-process__save-badge {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: calc(-6 * var(--spp-u)) !important;
  padding: 2px 1em 3px;
  border-radius: 999px;
  background: var(--spp-pink);
  color: #fff;
  font-size: clamp(12px, calc(15 * var(--spp-u)), 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  white-space: nowrap;
  word-break: keep-all;
}
.sjp-process__headline {
  margin-top: calc(4 * var(--spp-u)) !important;
  color: var(--spp-navy);
  font-size: clamp(17px, calc(22.5 * var(--spp-u)), 22.5px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: calc(-.85 * var(--spp-u));
  word-break: keep-all;
}
.sjp-process__headline-line { display: block; }
.sjp-process__headline strong { color: var(--spp-pink); font: inherit; }
.sjp-process__description {
  margin-top: calc(2 * var(--spp-u)) !important;
  color: var(--spp-muted);
  font-size: clamp(12px, calc(16 * var(--spp-u)), 16px);
  font-weight: 450;
  line-height: 1.24;
  letter-spacing: calc(-.5 * var(--spp-u));
  word-break: keep-all;
}
.sjp-process__description > span { display: block; }

/* 360~430px: 획일적인 이미지 축소 대신 최소 글자 크기를 지킵니다. */
@container sjp-process (max-width: 430px) {
  .sjp-process__surface { padding-right: 8px; padding-left: 2px; gap: 6px; }
  .sjp-process__top { grid-template-columns: 90px minmax(0, 1fr); gap: 5px; }
  .sjp-process__title { margin-left: 6px !important; }
  .sjp-process__intro-badge { padding: 3px 13px; font-size: 9px; letter-spacing: -.55px; }
  .sjp-process__step-label { gap: 2px; }
  .sjp-process__step-copy { font-size: 12px; letter-spacing: -.55px; }
  .sjp-process__steps { padding-top: 5px; padding-bottom: 7px; }
  .sjp-process__save { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; padding: 12px 10px; margin-top: 14px; margin-inline: 4px 0; }
  .sjp-process__save-icon { width: 66px; height: 74px; }
  .sjp-process__save-badge { margin-left: 0 !important; padding: 2px 1em 3px; }
  .sjp-process__headline { font-size: 18px; line-height: 1.25; letter-spacing: -.65px; margin-top: 5px !important; }
  .sjp-process__description { font-size: 12px; line-height: 1.45; letter-spacing: -.25px; margin-top: 4px !important; }
  .sjp-process__description > span { display: inline; }
}

/* 360~384px: 3열 라벨 칸이 좁아 「할인 개통상담」이 잘립니다. 글자 12px는 유지합니다. */
@container sjp-process (max-width: 384px) {
  .sjp-process__step-label { gap: 1px; padding-inline: 0; }
  .sjp-process__number { width: 15px; height: 15px; font-size: 11px; }
}
@container sjp-process (max-width: 369px) {
  .sjp-process__number { width: 14px; height: 14px; font-size: 10px; }
  .sjp-process__step-copy { letter-spacing: -1px; }
}

/* 320~359px: 제목·배지를 위에 놓아 3단계 라벨의 가로 공간을 확보합니다. */
@container sjp-process (max-width: 359px) {
  .sjp-process__surface { padding: 9px 7px; gap: 8px; }
  .sjp-process__top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sjp-process__intro { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 3px; }
  .sjp-process__title { margin-left: 0 !important; font-size: 18px; line-height: 1.12; }
  .sjp-process__intro-badge { width: max-content; max-width: 100%; min-height: 0; padding: 4px 18px; font-size: 11px; line-height: 1.12; letter-spacing: -.5px; }
  .sjp-process__steps { min-height: 104px; padding: 5px 0 8px; border-radius: 12px; }
  .sjp-process__step-icon { width: 60px; height: 57px; }
  .sjp-process__step-label { margin-top: -3px; gap: 3px; }
  .sjp-process__number { width: 18px; height: 18px; font-size: 12px; }
  .sjp-process__step-copy { font-size: 12px; line-height: 1.4; letter-spacing: -.55px; }
  .sjp-process__arrow { width: 22px; height: 17px; left: calc(100% - 11px); top: 24px; }
  .sjp-process__save { grid-template-columns: 57px minmax(0, 1fr); margin: 0; gap: 7px; padding: 9px 8px; border-radius: 12px; }
  .sjp-process__save-icon { width: 56px; height: 66px; }
  .sjp-process__save-badge { font-size: 11.5px; padding: 2px 1em 3px; letter-spacing: -.4px; }
  .sjp-process__headline { font-size: 17px; line-height: 1.28; letter-spacing: -.6px; }
  .sjp-process__description { font-size: 12px; }
}

/* 사이트 img{height:auto !important}가 아이콘 상자를 누르지 않게 보정합니다. */
.sjp-process .sjp-process__step-icon { width: calc(72 * var(--spp-u)) !important; height: calc(68 * var(--spp-u)) !important; max-width: none !important; }
.sjp-process .sjp-process__arrow { width: calc(26 * var(--spp-u)) !important; height: calc(20 * var(--spp-u)) !important; max-width: none !important; }
.sjp-process .sjp-process__save-icon { width: calc(96 * var(--spp-u)) !important; height: calc(100 * var(--spp-u)) !important; max-width: none !important; }
@container sjp-process (max-width: 430px) {
  .sjp-process .sjp-process__save-icon { width: 66px !important; height: 74px !important; }
}
@container sjp-process (max-width: 359px) {
  .sjp-process .sjp-process__step-icon { width: 60px !important; height: 57px !important; }
  .sjp-process .sjp-process__arrow { width: 22px !important; height: 17px !important; }
  .sjp-process .sjp-process__save-icon { width: 56px !important; height: 66px !important; }
}