:root {
  --renewal-navy: #071d43;
  --renewal-navy-soft: #102d5e;
  --renewal-blue: #1464f4;
  --renewal-blue-dark: #0d52d5;
  --renewal-sky: #edf4ff;
  --renewal-bg: #f4f7fb;
  --renewal-line: #dce5f1;
  --renewal-ink: #10213e;
  --renewal-muted: #748198;
  --renewal-success: #159b76;
  --renewal-shadow: 0 18px 50px rgba(20, 53, 100, .09);
}

html { background: var(--renewal-bg); }
body {
  color: var(--renewal-ink) !important;
  background: var(--renewal-bg) !important;
  font-family: "Noto Sans KR", sans-serif !important;
  letter-spacing: -.025em;
}

body::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 360px;
  content: "";
  background:
    radial-gradient(circle at 15% 0, rgba(76, 141, 255, .10), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, var(--renewal-bg) 100%);
  pointer-events: none;
}

a, button, input, select, textarea { transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s, transform .2s; }
button:active, a:active { transform: scale(.985); }
input:focus, select:focus, textarea:focus {
  border-color: #7eabff !important;
  box-shadow: 0 0 0 3px rgba(20, 100, 244, .10) !important;
  outline: none !important;
}

.renewal-header {
  height: 72px !important;
  color: var(--renewal-ink);
  background: rgba(255,255,255,.92) !important;
  border-color: var(--renewal-line) !important;
  box-shadow: 0 1px 0 rgba(16,33,62,.02);
}
.renewal-header-inner { max-width: 1120px !important; }
.renewal-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: var(--renewal-blue);
  border-radius: 13px !important;
  box-shadow: 0 8px 18px rgba(20,100,244,.2);
}
.renewal-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.renewal-brand-name { color: var(--renewal-navy) !important; font-size: 18px !important; font-weight: 800 !important; }
.renewal-desktop-nav { gap: 6px !important; }
.renewal-desktop-nav a {
  padding: 9px 12px;
  color: #657389 !important;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 650;
}
.renewal-desktop-nav a:hover { color: var(--renewal-blue) !important; background: var(--renewal-sky); }
.renewal-desktop-nav a.text-toss-500 {
  color: var(--renewal-blue) !important;
  background: var(--renewal-sky);
}
.renewal-session-link {
  padding: 9px 13px;
  border: 1px solid var(--renewal-line);
  border-radius: 10px;
  font-weight: 700 !important;
}

.renewal-mobile-nav {
  background: rgba(255,255,255,.96) !important;
  border-color: var(--renewal-line) !important;
  box-shadow: 0 -8px 30px rgba(20,53,100,.08) !important;
}
.renewal-mobile-nav a { color: #a2adbc !important; }
.renewal-mobile-nav a.text-toss-500 { color: var(--renewal-blue) !important; }
.renewal-mobile-nav i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #f1f5fa;
  border-radius: 10px;
  font-size: 14px !important;
}
.renewal-mobile-nav a.text-toss-500 i { color: #fff; background: var(--renewal-blue); }

main { position: relative; }
main.max-w-2xl, main.max-w-xl, main.max-w-lg { max-width: 760px !important; }
main.pt-24 { padding-top: 112px !important; }
.bg-white.rounded-3xl,
.bg-white.rounded-\[2rem\],
.bg-white.rounded-2xl,
form.bg-white {
  border: 1px solid var(--renewal-line) !important;
  box-shadow: var(--renewal-shadow) !important;
}
.rounded-3xl, .rounded-\[2rem\] { border-radius: 22px !important; }
.rounded-2xl { border-radius: 15px !important; }
.rounded-xl { border-radius: 11px !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--renewal-shadow) !important; }

.bg-blue-600, .bg-toss-500 {
  background-color: var(--renewal-blue) !important;
  border-color: var(--renewal-blue) !important;
}
.hover\:bg-blue-700:hover, .hover\:bg-toss-600:hover { background-color: var(--renewal-blue-dark) !important; }
.text-blue-500, .text-blue-600, .text-toss-500, .text-toss-600 { color: var(--renewal-blue) !important; }
.bg-blue-50, .bg-toss-50 { background-color: var(--renewal-sky) !important; }
.border-blue-50, .border-blue-100 { border-color: #cfe0ff !important; }
.text-gray-900, .text-gray-800, .text-toss-900 { color: var(--renewal-ink) !important; }
.text-gray-700, .text-gray-600 { color: #51627c !important; }
.text-gray-500, .text-gray-400 { color: var(--renewal-muted) !important; }
.bg-gray-50 { background-color: #f8fafc !important; }
.bg-gray-100, .bg-toss-bg { background-color: var(--renewal-bg) !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--renewal-line) !important; }

input, select, textarea {
  color: var(--renewal-ink) !important;
  background-color: #f8fafc !important;
  border-color: var(--renewal-line) !important;
}
button.bg-blue-600, a.bg-blue-600, button.bg-toss-500, a.bg-toss-500 {
  box-shadow: 0 10px 24px rgba(20,100,244,.18) !important;
}

#result-view > div {
  border-color: var(--renewal-line) !important;
  border-radius: 17px !important;
  box-shadow: 0 10px 30px rgba(20,53,100,.06) !important;
}
#result-view button { min-height: 54px; border-radius: 12px !important; }
#loading-view > div { border-radius: 18px !important; }
#custom-modal .modal-container,
#phoneSetupModal > div:last-child,
#notiModal > div:last-child,
#accountModal > div:last-child {
  border: 1px solid var(--renewal-line);
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(7,29,67,.22) !important;
}

.renewal-footer {
  margin-top: 64px !important;
  padding: 44px 0 !important;
  color: #7d899c;
  background: #eef3f9 !important;
  border-color: var(--renewal-line) !important;
}
.renewal-footer a:hover { color: var(--renewal-blue) !important; }
.renewal-footer-brand { color: var(--renewal-navy) !important; font-weight: 800 !important; }

body > nav.fixed.top-0,
body > nav.fixed.w-full.z-40 {
  height: 72px !important;
  background: rgba(255,255,255,.92) !important;
  border-color: var(--renewal-line) !important;
}
body > nav.fixed.top-0 > div,
body > nav.fixed.w-full.z-40 > div { max-width: 1120px !important; }

#pricing .bg-white,
#process .bg-white,
#reviews .bg-white,
section .border.border-gray-100 {
  border-color: var(--renewal-line) !important;
  box-shadow: 0 14px 40px rgba(20,53,100,.07) !important;
}
#process, #pricing { background: #f3f7fc !important; }
#reviews { background: #fff !important; }

/* Homepage: approved navy renewal concept */
.renewal-home { background: #fff !important; }
.renewal-home::before { display: none; }
.renewal-announcement {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  place-items: center;
  height: 34px;
  color: #dce8ff;
  background: var(--renewal-navy);
  font-size: 11px;
  font-weight: 700;
}
.renewal-public-header {
  top: 34px !important;
  height: 72px !important;
  background: rgba(255,255,255,.97) !important;
  border-color: var(--renewal-line) !important;
}
.renewal-public-header-inner { max-width: 1160px !important; }
.renewal-public-header img { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
.renewal-public-header .bg-toss-500 { padding: 12px 19px !important; border-radius: 11px !important; }
.renewal-home-hero {
  position: relative;
  overflow: hidden;
  padding-top: 190px !important;
  padding-bottom: 104px !important;
  background: #081a38 !important;
  border-bottom: 1px solid #17315a;
}
.renewal-home-hero::before,
.renewal-home-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(91,143,232,.18);
  border-radius: 50%;
  pointer-events: none;
}
.renewal-home-hero::before { left: -340px; bottom: -600px; width: 960px; height: 960px; }
.renewal-home-hero::after { right: -170px; top: -430px; width: 800px; height: 800px; }
.renewal-home-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) 500px;
  align-items: center;
  gap: 86px;
}
.renewal-home-copy { text-align: left; }
.renewal-home-copy > div:first-child {
  margin-bottom: 25px !important;
  padding: 0 !important;
  color: #8eb6ff !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.renewal-home-copy > div:first-child::before { width: 28px; height: 1px; content: ""; background: #5c91ef; }
.renewal-home-copy > div:first-child .relative { display: none; }
.renewal-home-copy h1 {
  margin-bottom: 28px !important;
  color: #fff !important;
  font-size: clamp(44px,4.5vw,61px) !important;
  font-weight: 720 !important;
  line-height: 1.22 !important;
  letter-spacing: -.045em !important;
}
.renewal-home-copy h1 span { color: #72a2ff !important; }
.renewal-home-copy h1 svg { display: none; }
.renewal-home-copy > p {
  margin-bottom: 35px !important;
  color: #b4c0d3 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}
.renewal-home-copy > p strong,
.renewal-home-copy > p .text-toss-900 { color: #fff !important; }
.renewal-home-copy > .flex { justify-content: flex-start !important; }
.renewal-home-copy > .flex a,
.renewal-home-copy > .flex button { min-height: 52px; padding: 0 24px !important; font-size: 14px !important; border-radius: 10px !important; }
.renewal-home-copy > .flex button { color: #dce8ff !important; background: transparent !important; border-color: #54709d !important; }
.renewal-home-copy > .flex button:hover { background: rgba(255,255,255,.07) !important; }
.renewal-home-checks { justify-content: flex-start !important; gap: 18px !important; color: #9eacc1 !important; font-size: 11px !important; }
.renewal-home-checks i { color: #77d9b6 !important; }
.renewal-request-preview {
  overflow: hidden;
  color: var(--renewal-ink);
  background: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 17px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.renewal-request-head,
.renewal-request-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 21px; }
.renewal-request-head { border-bottom: 1px solid var(--renewal-line); font-size: 14px; }
.renewal-request-head span { display: flex; align-items: center; gap: 7px; color: var(--renewal-success); font-size: 10px; font-weight: 700; }
.renewal-request-head i { width: 7px; height: 7px; background: #20b486; border-radius: 50%; }
.renewal-request-body { padding: 21px; }
.renewal-rail-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #eef2f8; border-radius: 10px; text-align: center; font-size: 11px; }
.renewal-rail-tabs b { padding: 10px; color: var(--renewal-blue); background: #fff; border: 1px solid var(--renewal-line); border-radius: 8px; }
.renewal-rail-tabs span { padding: 10px; color: #8b96a8; font-weight: 700; }
.renewal-route-box { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; margin-top: 17px; padding: 18px; background: #f4f7fb; border: 1px solid var(--renewal-line); border-radius: 12px; }
.renewal-route-box > div:last-child { text-align: right; }
.renewal-route-box small,
.renewal-schedule-row small { display: block; margin-bottom: 6px; color: #8a96a8; font-size: 9px; font-weight: 650; }
.renewal-route-box strong { font-size: 22px; }
.renewal-route-box button { display: grid; place-items: center; width: 34px; height: 34px; color: var(--renewal-blue); background: #fff; border: 1px solid var(--renewal-line); border-radius: 50%; }
.renewal-schedule-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.renewal-schedule-row > div { padding: 14px; border: 1px solid var(--renewal-line); border-radius: 10px; }
.renewal-schedule-row strong { font-size: 12px; }
.renewal-request-submit { display: grid; place-items: center; min-height: 49px; margin-top: 14px; color: #fff; background: var(--renewal-navy); border-radius: 9px; font-size: 12px; font-weight: 800; }
.renewal-request-submit:hover { background: var(--renewal-navy-soft); }
.renewal-request-foot { color: #8b96a8; background: #f8fafc; border-top: 1px solid var(--renewal-line); font-size: 9px; }
.renewal-request-foot strong { color: var(--renewal-blue); }
.renewal-home #process,
.renewal-home #pricing { background: #f5f8fc !important; }
.renewal-home #process .bg-white,
.renewal-home #pricing .bg-white,
.renewal-home #reviews .bg-white { border: 1px solid var(--renewal-line) !important; }

@media (max-width: 767px) {
  .renewal-header { height: 64px !important; }
  .renewal-header-inner { padding-inline: 16px !important; }
  .renewal-brand-mark { width: 34px; height: 34px; border-radius: 11px !important; }
  .renewal-brand-name { font-size: 16px !important; }
  main.pt-24 { padding-top: 88px !important; }
  main.max-w-2xl, main.max-w-xl, main.max-w-lg { padding-inline: 16px !important; }
  .bg-white.rounded-3xl, .bg-white.rounded-\[2rem\], form.bg-white { border-radius: 18px !important; }
  #result-view > div { padding: 18px !important; }
  .renewal-footer { margin-bottom: 64px; padding: 36px 18px 96px !important; }
  .renewal-announcement { position: relative; height: 30px; }
  .renewal-public-header { position: sticky !important; top: 0 !important; height: 62px !important; }
  .renewal-public-header .hidden.md\:flex { display: none !important; }
  .renewal-home-hero { padding-top: 58px !important; padding-bottom: 65px !important; }
  .renewal-home-grid { grid-template-columns: 1fr; gap: 44px; }
  .renewal-home-copy { text-align: center; }
  .renewal-home-copy > div:first-child,
  .renewal-home-copy > .flex,
  .renewal-home-checks { justify-content: center !important; }
  .renewal-home-copy h1 { font-size: 39px !important; }
  .renewal-home-copy > p { font-size: 14px !important; }
  .renewal-request-preview { max-width: 540px; margin: 0 auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}