/* 성지폰 프로모션 컴포넌트. 전체 페이지가 아닌 .sjp 내부에만 적용합니다. */
@font-face {
  font-family: 'SJP Pretendard';
  src: url('fonts/PretendardVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.sjp {
  --sjp-pink: #ff004f;
  --sjp-navy: #07152c;
  --sjp-muted: #75818b;
  --sjp-green: #00b75b;
  --sjp-yellow: #fff45a;
  --sjp-gradient: linear-gradient(105deg, #ff0061 0%, #ff0045 26%, #ff4800 100%);
  width: 100%;
  max-width: 775px;
  margin-inline: auto;
  container: sjp / inline-size;
  color: var(--sjp-navy);
  font-family: 'SJP Pretendard', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.25;
  isolation: isolate;
}
.sjp *, .sjp *::before, .sjp *::after { box-sizing: border-box; }
.sjp :where(h2, p) { margin: 0; }
.sjp img { display: block; max-width: 100%; }
.sjp button, .sjp a { font: inherit; -webkit-tap-highlight-color: transparent; }
.sjp button { appearance: none; cursor: pointer; }
.sjp__surface {
  --sjp-u: 1px; /* fallback for browsers without container queries */
  --sjp-u: calc(100cqw / 775);
  display: grid;
  gap: calc(12 * var(--sjp-u));
  padding: calc(3 * var(--sjp-u)) calc(6 * var(--sjp-u)) calc(6 * var(--sjp-u)) calc(7 * var(--sjp-u));
  background: #fff7fa;
}
.sjp__deadline {
  height: calc(146 * var(--sjp-u));
  display: grid;
  grid-template-columns: calc(111 * var(--sjp-u)) 1fr calc(301 * var(--sjp-u));
  align-items: center;
  gap: calc(9 * var(--sjp-u));
  border: 1px solid #ffe1eb;
  border-radius: calc(14 * var(--sjp-u));
  background: linear-gradient(110deg, #fffafd, #fff9fc);
  box-shadow: 0 calc(3 * var(--sjp-u)) calc(12 * var(--sjp-u)) #f9aac433;
  overflow: hidden;
}
.sjp__clock {
  width: calc(110 * var(--sjp-u));
  height: calc(120 * var(--sjp-u));
  margin-left: calc(2 * var(--sjp-u));
  flex: none;
}
.sjp__deadline-copy { min-width: 0; padding-bottom: calc(1 * var(--sjp-u)); transform: translateY(calc(3 * var(--sjp-u))); }
.sjp__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(38 * var(--sjp-u));
  padding: 0 calc(10 * var(--sjp-u));
  margin-bottom: calc(2 * var(--sjp-u));
  border-radius: calc(12 * var(--sjp-u));
  background: var(--sjp-pink);
  color: #fff;
  font-size: calc(27 * var(--sjp-u));
  font-weight: 850;
  letter-spacing: calc(-1.6 * var(--sjp-u));
}
.sjp__heading {
  font-size: calc(44 * var(--sjp-u));
  font-weight: 900;
  letter-spacing: calc(-1.8 * var(--sjp-u));
  line-height: 1.08;
  white-space: nowrap;
}
.sjp__pink { color: var(--sjp-pink); }
.sjp__deadline-note {
  margin-top: calc(3 * var(--sjp-u)) !important;
  font-size: calc(20 * var(--sjp-u));
  font-weight: 550;
  letter-spacing: calc(-.85 * var(--sjp-u));
  white-space: nowrap;
  color: var(--sjp-muted);
}
.sjp__timer-wrap {
  position: relative;
  height: calc(118 * var(--sjp-u));
  margin-right: calc(9 * var(--sjp-u));
  border-radius: calc(14 * var(--sjp-u));
  background: linear-gradient(125deg, #fff0f5, #ffe9f0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(calc(1 * var(--sjp-u)));
}
.sjp__timer-wrap::before {
  content: '';
  position: absolute;
  left: calc(-12 * var(--sjp-u));
  top: calc(9 * var(--sjp-u));
  bottom: calc(9 * var(--sjp-u));
  width: 1px;
  background: #ff7a9e;
}
.sjp__timer {
  display: grid;
  grid-template-columns: repeat(3, calc(80 * var(--sjp-u)));
  gap: calc(16 * var(--sjp-u));
  padding-top: calc(3 * var(--sjp-u));
  text-align: center;
}
.sjp__time-unit { position: relative; }
.sjp__time-unit + .sjp__time-unit::before {
  content: ':';
  position: absolute;
  left: calc(-14 * var(--sjp-u));
  top: calc(10 * var(--sjp-u));
  color: #df0010;
  font-size: calc(43 * var(--sjp-u));
  font-weight: 850;
  line-height: 1;
}
.sjp__digit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(70 * var(--sjp-u));
  border: 1px solid #f3232c;
  border-radius: calc(12 * var(--sjp-u));
  background: linear-gradient(145deg, #ff080b, #db0005 68%, #f20b13);
  box-shadow: inset 0 calc(3 * var(--sjp-u)) calc(4 * var(--sjp-u)) #ff4a4a99, 0 calc(5 * var(--sjp-u)) calc(11 * var(--sjp-u)) #e9001f46;
  color: #fff;
  font-size: calc(48 * var(--sjp-u));
  font-weight: 800;
  letter-spacing: calc(-1.5 * var(--sjp-u));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sjp__unit-label {
  display: block;
  margin-top: calc(5 * var(--sjp-u));
  color: #e21a20;
  font-size: calc(18 * var(--sjp-u));
  font-weight: 650;
}
.sjp__actions {
  display: grid;
  grid-template-columns: 250fr 502fr;
  gap: calc(10 * var(--sjp-u));
  min-width: 0;
}
.sjp__phone, .sjp__apply {
  height: calc(110 * var(--sjp-u));
  border-radius: calc(12 * var(--sjp-u));
  min-width: 0;
  text-decoration: none;
  transition: filter .15s ease, box-shadow .15s ease;
}
.sjp__phone {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--sjp-u));
  padding: 0 calc(12 * var(--sjp-u)) 0 calc(17 * var(--sjp-u));
  background: linear-gradient(120deg, #fff, #fcfdff);
  border: 1.5px solid #d9dde4;
  color: var(--sjp-navy);
  box-shadow: 0 calc(2 * var(--sjp-u)) calc(5 * var(--sjp-u)) #34405414;
}
.sjp__phone-icon { width: calc(55 * var(--sjp-u)); height: calc(62 * var(--sjp-u)); flex: none; }
.sjp__phone-copy { min-width: 0; }
.sjp__phone-title { display: block; font-size: calc(24 * var(--sjp-u)); font-weight: 850; letter-spacing: calc(-.9 * var(--sjp-u)); white-space: nowrap; }
.sjp__phone-number { display: block; color: var(--sjp-green); font-size: calc(26 * var(--sjp-u)); font-weight: 850; letter-spacing: calc(-1.2 * var(--sjp-u)); white-space: nowrap; }
.sjp__chevron { width: calc(22 * var(--sjp-u)); height: calc(33 * var(--sjp-u)); flex: none; margin-left: auto; }
.sjp__phone .sjp__chevron { width: calc(18 * var(--sjp-u)); }
.sjp__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--sjp-u));
  padding: 0 calc(12 * var(--sjp-u)) 0 calc(15 * var(--sjp-u));
  border: 0;
  background: var(--sjp-gradient);
  box-shadow: inset 0 calc(3 * var(--sjp-u)) calc(5 * var(--sjp-u)) #ffffff32, 0 calc(3 * var(--sjp-u)) calc(6 * var(--sjp-u)) #fc0a4033;
  color: #fff;
}
.sjp__truck { width: calc(94 * var(--sjp-u)); height: calc(78 * var(--sjp-u)); flex: none; }
.sjp__apply-copy { flex: 1; font-size: calc(33 * var(--sjp-u)); font-weight: 900; line-height: 1.2; letter-spacing: calc(-1.7 * var(--sjp-u)); white-space: nowrap; text-align: center; }
.sjp__yellow { color: var(--sjp-yellow); }
.sjp__guide {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--sjp-u));
  height: calc(121 * var(--sjp-u));
  padding: calc(10 * var(--sjp-u)) calc(12 * var(--sjp-u)) calc(10 * var(--sjp-u)) calc(25 * var(--sjp-u));
  border-radius: calc(15 * var(--sjp-u));
  background: linear-gradient(100deg, #ffedf4, #fdebf2);
}
.sjp__discount { width: calc(85 * var(--sjp-u)); height: calc(96 * var(--sjp-u)); flex: none; }
.sjp__guide-copy { min-width: 0; }
.sjp__guide-title { font-size: calc(31.5 * var(--sjp-u)); font-weight: 850; letter-spacing: calc(-1.6 * var(--sjp-u)); line-height: 1.3; white-space: nowrap; }
.sjp__guide-note { margin-top: calc(1 * var(--sjp-u)) !important; color: var(--sjp-muted); font-size: calc(20.8 * var(--sjp-u)); font-weight: 500; letter-spacing: calc(-.8 * var(--sjp-u)); white-space: nowrap; }
.sjp__state-message:empty { display: none; }
.sjp__state-message { color: #a02148; padding: 6px 10px; font-size: 14px; line-height: 1.5; text-align: center; }
.sjp__demo-label { margin: 6px 10px 0 !important; color: #5a6475; font-size: 12px; text-align: center; }
.sjp [hidden] { display: none !important; }
.sjp__phone:focus-visible, .sjp__apply:focus-visible { outline: 3px solid #0a57df; outline-offset: 4px; }
.sjp__phone:hover, .sjp__apply:not(:disabled):hover { filter: brightness(1.04); }
.sjp__apply:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .72; }
.sjp[data-state='expired'] .sjp__heading, .sjp[data-state='unavailable'] .sjp__heading, .sjp[data-state='scheduled'] .sjp__heading { display: none; }
.sjp[data-state='expired'] .sjp__badge, .sjp[data-state='unavailable'] .sjp__badge, .sjp[data-state='scheduled'] .sjp__badge { display: none; }
.sjp__inactive-heading { display: none; font-size: calc(30 * var(--sjp-u)); font-weight: 850; }
.sjp[data-state='expired'] .sjp__inactive-heading--expired,
.sjp[data-state='unavailable'] .sjp__inactive-heading--unavailable,
.sjp[data-state='scheduled'] .sjp__inactive-heading--scheduled { display: block; }
.sjp[data-state='expired'] .sjp__digit, .sjp[data-state='unavailable'] .sjp__digit, .sjp[data-state='scheduled'] .sjp__digit { background: #84909d; border-color: #84909d; box-shadow: none; }

/* 640px 미만: 글자를 단순 축소하지 않고 가독성을 위해 재배치합니다. */
@container sjp (max-width: 639px) {
  .sjp__surface { --sjp-u: 1px; padding: 6px; gap: 10px; }
  .sjp__deadline { height: auto; min-height: 220px; padding: 12px; grid-template-columns: 72px minmax(0, 1fr); gap: 7px 9px; border-radius: 14px; }
  .sjp__clock { width: 72px; height: 79px; margin-left: 0; }
  .sjp__deadline-copy { transform: none; }
  .sjp__badge { height: 27px; padding-inline: 10px; margin-bottom: 3px; font-size: 19px; border-radius: 9px; letter-spacing: -.7px; }
  .sjp__heading { font-size: clamp(23px, 5.8cqw, 34px); letter-spacing: -1.2px; }
  .sjp__deadline-note { font-size: 13px; line-height: 1.5; letter-spacing: -.4px; white-space: normal; word-break: keep-all; margin-top: 3px !important; }
  .sjp__timer-wrap { grid-column: 1 / -1; height: 101px; margin: 0; border-radius: 12px; transform: none; }
  .sjp__timer-wrap::before { display: none; }
  .sjp__timer { grid-template-columns: repeat(3, minmax(0, 80px)); width: 100%; max-width: 276px; justify-content: center; gap: 16px; }
  .sjp__digit { height: 63px; font-size: 44px; border-radius: 11px; }
  .sjp__unit-label { font-size: 14px; margin-top: 4px; }
  .sjp__time-unit + .sjp__time-unit::before { top: 9px; font-size: 38px; }
  .sjp__actions { grid-template-columns: 1fr 1.7fr; gap: 7px; }
  .sjp__phone, .sjp__apply { height: 88px; border-radius: 11px; }
  .sjp__phone { padding: 6px; gap: 4px; justify-content: center; }
  .sjp__phone-icon { width: 26px; height: 35px; }
  .sjp__phone-title { font-size: 14px; letter-spacing: -.6px; }
  .sjp__phone-number { font-size: 16.5px; letter-spacing: -.6px; }
  .sjp__phone .sjp__chevron { display: none; }
  .sjp__apply { padding: 9px; gap: 7px; }
  .sjp__truck { width: 40px; height: 39px; }
  .sjp__apply-copy { font-size: 20px; letter-spacing: -1px; white-space: normal; word-break: keep-all; }
  .sjp__apply-lead { display: block; font-size: 16px; margin-bottom: 2px; }
  .sjp__apply .sjp__chevron { width: 13px; height: 26px; }
  .sjp__guide { height: auto; min-height: 112px; padding: 13px 12px; gap: 10px; border-radius: 14px; }
  .sjp__discount { width: 51px; height: 61px; }
  .sjp__guide-title { font-size: 19px; letter-spacing: -.7px; line-height: 1.4; white-space: normal; word-break: keep-all; }
  .sjp__guide-note { font-size: 13px; letter-spacing: -.3px; line-height: 1.5; white-space: normal; word-break: keep-all; margin-top: 5px !important; }
  .sjp__inactive-heading { font-size: 23px; }
}
@container sjp (max-width: 359px) {
  .sjp__deadline { grid-template-columns: 60px minmax(0, 1fr); padding: 10px; }
  .sjp__clock { width: 60px; height: 66px; }
  .sjp__heading { font-size: 22px; letter-spacing: -1px; }
  .sjp__actions { grid-template-columns: 1fr; }
  .sjp__phone { height: 60px; justify-content: flex-start; padding-inline: 16px; gap: 10px; }
  .sjp__phone-copy { display: flex; align-items: center; gap: 10px; }
  .sjp__phone-title { font-size: 17px; }
  .sjp__phone-number { font-size: 21px; }
  .sjp__phone .sjp__chevron { display: block; width: 14px; }
  .sjp__apply { height: 80px; gap: 12px; padding-inline: 15px; }
  .sjp__truck { width: 51px; height: 48px; }
  .sjp__apply-copy { font-size: 24px; }
  .sjp__apply-lead { font-size: 17px; }
  .sjp__guide { gap: 8px; padding-inline: 10px; }
  .sjp__discount { width: 44px; height: 54px; }
  .sjp__guide-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sjp__phone, .sjp__apply { transition: none; }
}

/* 사이트 전역 img{height:auto !important}·a:link 색이 배너 아이콘/전화번호를 덮지 않게 보정합니다. */
.sjp a.sjp__phone:link,
.sjp a.sjp__phone:visited,
.sjp a.sjp__phone:hover,
.sjp a.sjp__phone:active { color: var(--sjp-navy); text-decoration: none; }
.sjp .sjp__phone-number { color: var(--sjp-green) !important; }
.sjp .sjp__clock { width: calc(110 * var(--sjp-u)) !important; height: calc(120 * var(--sjp-u)) !important; max-width: none !important; }
.sjp .sjp__phone-icon { width: calc(55 * var(--sjp-u)) !important; height: calc(62 * var(--sjp-u)) !important; max-width: none !important; }
.sjp .sjp__truck { width: calc(94 * var(--sjp-u)) !important; height: calc(78 * var(--sjp-u)) !important; max-width: none !important; }
.sjp .sjp__discount { width: calc(85 * var(--sjp-u)) !important; height: calc(96 * var(--sjp-u)) !important; max-width: none !important; }
.sjp .sjp__chevron { width: calc(22 * var(--sjp-u)) !important; height: calc(33 * var(--sjp-u)) !important; max-width: none !important; }
.sjp .sjp__phone .sjp__chevron { width: calc(18 * var(--sjp-u)) !important; }
.sjp.sjp--no-deadline .sjp__deadline { display: none; }
@container sjp (max-width: 639px) {
  .sjp .sjp__clock { width: 72px !important; height: 79px !important; }
  .sjp .sjp__phone-icon { width: 26px !important; height: 35px !important; }
  .sjp .sjp__truck { width: 40px !important; height: 39px !important; }
  .sjp .sjp__discount { width: 51px !important; height: 61px !important; }
  .sjp .sjp__apply .sjp__chevron { width: 13px !important; height: 26px !important; }
}
@container sjp (max-width: 359px) {
  .sjp .sjp__clock { width: 60px !important; height: 66px !important; }
  .sjp .sjp__phone .sjp__chevron { display: block !important; width: 14px !important; height: 26px !important; }
  .sjp .sjp__truck { width: 51px !important; height: 48px !important; }
  .sjp .sjp__discount { width: 44px !important; height: 54px !important; }
}
@container sjp (max-width: 300px) {
  .sjp__surface { padding: 4px; gap: 8px; }
  .sjp__deadline { grid-template-columns: 46px minmax(0, 1fr); padding: 8px 8px 6px; gap: 6px; min-height: 0; }
  .sjp__badge { height: 20px; padding-inline: 6px; font-size: 13px; }
  .sjp__heading { font-size: 15px; letter-spacing: -.5px; white-space: normal; }
  .sjp__deadline-note { font-size: 11px; }
  .sjp__timer-wrap { height: auto; padding: 6px 0; }
  .sjp__timer { gap: 8px; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 64px)); }
  .sjp__digit { height: 44px; font-size: 26px; }
  .sjp__unit-label { font-size: 11px; }
  .sjp__time-unit + .sjp__time-unit::before { font-size: 22px; top: 4px; left: -7px; }
  .sjp__phone { height: 56px; padding-inline: 8px; gap: 6px; }
  .sjp__phone-copy { display: block; }
  .sjp__phone-title { font-size: 12px; }
  .sjp__phone-number { font-size: 16px; }
  .sjp__apply { height: 64px; gap: 6px; padding-inline: 8px; }
  .sjp__apply-copy { font-size: 15px; letter-spacing: -.6px; }
  .sjp__apply-lead { font-size: 12px; }
  .sjp__guide { padding: 8px; gap: 6px; }
  .sjp__guide-title { font-size: 13px; }
  .sjp__guide-note { font-size: 11px; }
  .sjp .sjp__clock { width: 46px !important; height: 50px !important; }
  .sjp .sjp__phone-icon { width: 22px !important; height: 28px !important; }
  .sjp .sjp__truck { width: 36px !important; height: 30px !important; }
  .sjp .sjp__discount { width: 32px !important; height: 40px !important; }
  .sjp .sjp__phone .sjp__chevron { width: 10px !important; height: 18px !important; }
  .sjp .sjp__apply .sjp__chevron { width: 10px !important; height: 18px !important; }
}