.recharge-page { overflow-x: hidden; }
.recharge-page .site-header { box-shadow: 0 6px 24px rgba(17,47,104,.05); }
.recharge-hero { position: relative; overflow: hidden; padding: clamp(86px,10vw,132px) 0 96px; color: #fff; background: linear-gradient(135deg,#061735 0%,#0a2f68 58%,#0b4991 100%); }
.recharge-hero::before { content: ""; position: absolute; width: 500px; height: 500px; left: -220px; bottom: -300px; border-radius: 50%; border: 80px solid rgba(59,213,255,.07); }
.recharge-hero__glow { position: absolute; width: 340px; height: 340px; right: 8%; top: 5%; border-radius: 50%; background: #25c6b1; filter: blur(120px); opacity: .18; }
.recharge-hero__grid { position: relative; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: clamp(48px,8vw,104px); }
.recharge-hero h1 { margin: 2px 0 24px; font-size: clamp(45px,6vw,72px); line-height: 1.1; letter-spacing: -.055em; }
.recharge-hero h1 em { color: #8af5e7; font-style: normal; text-shadow: 0 0 25px rgba(89,244,222,.25); }
.recharge-hero__grid > div:first-child > p:not(.eyebrow) { margin: 0 0 32px; color: #c7d8ef; font-size: clamp(17px,2vw,20px); line-height: 1.8; }
.recharge-console { padding: 29px; border: 1px solid rgba(139,225,255,.27); border-radius: 28px; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055)); box-shadow: 0 32px 80px rgba(0,6,25,.35),inset 0 1px rgba(255,255,255,.15); backdrop-filter: blur(18px); }
.recharge-console__top { display: flex; justify-content: space-between; gap: 20px; color: #9eb7d8; font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.recharge-console__top b { color: #8af5e7; }
.recharge-console__amount { margin: 38px 0 28px; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(4,18,46,.34); }
.recharge-console__amount small,.recharge-console__amount strong,.recharge-console__amount span { display: block; }
.recharge-console__amount small { color: #83a0c8; font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.recharge-console__amount strong { margin: 7px 0 2px; font-size: 38px; }
.recharge-console__amount span { color: #7fe9ff; font-size: 15px; }
.recharge-console ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.recharge-console li { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 13px; color: #dce8f8; background: rgba(255,255,255,.075); font-size: 16px; font-weight: 750; }
.recharge-console li span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #062556; background: #8af5e7; font-size: 13px; font-weight: 900; }
.recharge-section { padding: clamp(78px,9vw,108px) 0; scroll-margin-top: 88px; }
.recharge-section--soft { background: #f6f9fd; }
.recharge-heading { max-width: 780px; margin-bottom: 40px; }
.recharge-heading--center { margin-inline: auto; text-align: center; }
.recharge-heading h2 { margin: 4px 0 12px; font-size: clamp(32px,4.2vw,48px); line-height: 1.22; letter-spacing: -.045em; }
.recharge-heading > p:last-child { margin: 0; color: var(--text); font-size: 17px; }
.ready-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.ready-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 13px 34px rgba(25,50,95,.06); }
.ready-grid article > span { color: #1769e8; font-size: 18px; font-weight: 950; }
.ready-grid h3 { margin: 13px 0 8px; font-size: 24px; }
.ready-grid p { margin: 0; color: var(--text); font-size: 17px; }
.recharge-app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.recharge-app-card { padding: 34px; border: 1px solid #bfe5df; border-top: 5px solid #168d82; border-radius: 23px; background: linear-gradient(155deg,#fff,#f2fffc); box-shadow: 0 18px 45px rgba(22,141,130,.1); }
.recharge-app-card--lg { border-color: #f0c5df; border-top-color: #a73779; background: linear-gradient(155deg,#fff,#fff4fa); box-shadow: 0 18px 45px rgba(167,55,121,.1); }
.recharge-app-card--postpaid { border-color: #c7dcfa; border-top-color: #1769e8; background: linear-gradient(155deg,#fff,#f1f7ff); box-shadow: 0 18px 45px rgba(23,105,232,.1); }
.recharge-network { display: inline-flex; padding: 7px 12px; border-radius: 999px; color: #087b73; background: #dcf7f1; font-size: 14px; font-weight: 900; }
.recharge-network--lg { color: #962b69; background: #ffe7f4; }
.recharge-network--postpaid { color: #1758b8; background: #e5f0ff; }
.recharge-app-card h3 { margin: 19px 0 10px; font-size: 28px; }
.recharge-app-card > p { min-height: 58px; margin: 0 0 25px; color: var(--text); font-size: 17px; }
.recharge-store-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.recharge-store-actions a { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; min-width: 0; padding: 16px; border: 1px solid #92d9cf; border-radius: 14px; color: #0d514c; background: #e9faf6; box-shadow: 0 10px 22px rgba(22,141,130,.14); transition: transform .2s,box-shadow .2s; }
.recharge-app-card--lg .recharge-store-actions a { border-color: #e5afd0; color: #6d2452; background: #fff0f8; box-shadow: 0 10px 22px rgba(167,55,121,.14); }
.recharge-app-card--postpaid .recharge-store-actions a { border-color: #b9d5fb; color: #174f9d; background: #eaf3ff; box-shadow: 0 10px 22px rgba(23,105,232,.14); }
.recharge-store-actions a:hover { transform: translateY(-3px); box-shadow: 0 15px 29px rgba(23,105,232,.2); }
.recharge-store-actions span,.recharge-store-actions strong { grid-column: 1; display: block; min-width: 0; }
.recharge-store-actions span { font-size: 14px; opacity: .72; }.recharge-store-actions strong { font-size: 18px; }
.recharge-store-actions b { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; position: static; transform: none; font-size: 18px; }
.recharge-app-card > .recharge-postpaid-note { min-height: 0; margin: 19px 0 0; padding-top: 17px; border-top: 1px solid #c7dcfa; color: #34506f; font-size: 14px; line-height: 1.65; }
.recharge-note { margin: 27px 0 0; padding: 18px 21px; border: 1px solid #cfe1fa; border-radius: 14px; color: #34506f; background: #eef6ff; font-size: 16px; text-align: center; }
.recharge-note strong { color: var(--navy); }
.recharge-request-section { position: relative; overflow: hidden; background: linear-gradient(135deg,#f4fbf4 0%,#f8fffb 48%,#eff7ff 100%); }
.recharge-request-section::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -150px; border-radius: 50%; background: rgba(36,190,76,.1); filter: blur(5px); }
.recharge-request-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(38px,7vw,88px); }
.recharge-request-copy h2 { margin: 4px 0 18px; font-size: clamp(34px,4.6vw,52px); line-height: 1.18; letter-spacing: -.05em; }
.recharge-request-copy > p:not(.eyebrow) { max-width: 630px; margin: 0; color: var(--text); font-size: 18px; line-height: 1.75; }
.recharge-request-copy ol { display: grid; gap: 12px; padding: 0; margin: 30px 0 0; list-style: none; }
.recharge-request-copy li { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid rgba(29,146,72,.16); border-radius: 15px; background: rgba(255,255,255,.72); }
.recharge-request-copy li > span { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 12px; color: #fff; background: #149636; font-size: 13px; font-weight: 950; }
.recharge-request-copy li strong,.recharge-request-copy li small { display: block; }
.recharge-request-copy li strong { color: #113b20; font-size: 17px; }
.recharge-request-copy li small { margin-top: 2px; color: #617269; font-size: 14px; }
.recharge-account-card { padding: clamp(27px,4vw,42px); border: 1px solid rgba(29,146,72,.22); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 27px 65px rgba(18,91,52,.13); text-align: center; }
.recharge-account-card__badge { display: inline-flex; padding: 7px 13px; border-radius: 999px; color: #fff; background: #123b80; font-size: 13px; font-weight: 900; }
.recharge-account-card__bank { margin: 20px 0 2px; color: #171b24; font-size: 23px; font-weight: 900; }
.recharge-account-card__number { display: block; color: #0aa972; font-size: clamp(26px,3.4vw,40px); line-height: 1.25; letter-spacing: -.035em; }
.recharge-account-card__owner { margin: 7px 0 23px; color: #4e5c6f; font-size: 17px; }
.recharge-account-card__owner b { color: #17243a; }
.recharge-account-card__send { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 15px; background: #f0f6ff; text-align: left; }
.recharge-account-card__send > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: #1769e8; font-weight: 950; }
.recharge-account-card__send p { margin: 0; }
.recharge-account-card__send strong,.recharge-account-card__send small { display: block; }
.recharge-account-card__send strong { color: #183056; font-size: 15px; }
.recharge-account-card__send small { margin-top: 2px; color: #60718d; font-size: 13px; }
.recharge-kakao-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; margin-top: 18px; padding: 12px 18px; border: 1px solid #f0d500; border-radius: 15px; color: #251f00; background: #fee500; box-shadow: 0 12px 26px rgba(134,115,0,.18); font-size: 17px; font-weight: 900; transition: transform .2s,box-shadow .2s; }
.recharge-kakao-button:hover { transform: translateY(-2px); box-shadow: 0 16px 31px rgba(134,115,0,.24); }
.recharge-kakao-button > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fee500; background: #2f2a0a; font-size: 14px; }
.recharge-kakao-button b { font-size: 16px; }
.recharge-phone-link { display: inline-block; margin: 16px 0 0; color: #1769e8; font-size: 15px; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }
.recharge-account-card__safe { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e4e9ef; color: #748095; font-size: 12px; line-height: 1.55; }
.recharge-section--dark { color: #fff; background: linear-gradient(135deg,#0a234f,#102f68); }
.recharge-heading--light h2 { color: #fff; }.recharge-heading--light > p:last-child { color: #c7d8ef; }
.recharge-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.recharge-steps li { min-width: 0; padding: 23px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.075); }
.recharge-steps > li > span { color: #8af5e7; font-size: 16px; font-weight: 950; }
.recharge-steps h3 { margin: 12px 0 7px; font-size: 21px; }
.recharge-steps p { margin: 0; color: #c7d8ef; font-size: 16px; }
.recharge-caution { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(38px,7vw,90px); }
.recharge-caution h2 { margin: 3px 0 0; font-size: clamp(32px,4vw,46px); letter-spacing: -.045em; }
.recharge-caution ul { margin: 0; padding: 27px 29px 27px 52px; border: 1px solid var(--line); border-radius: 20px; background: #f7f9fc; }
.recharge-caution li { margin: 8px 0; color: var(--text); font-size: 17px; }
.recharge-bottom { padding: 92px 0; color: #fff; background: #1769e8; text-align: center; }
.recharge-bottom h2 { margin: 3px 0 12px; font-size: clamp(35px,5vw,52px); }.recharge-bottom > .container > p:not(.eyebrow) { margin: 0 0 30px; color: #deebff; font-size: 17px; }.recharge-bottom .button-group { justify-content: center; }
@media (max-width: 1100px) { .recharge-app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.recharge-app-card--postpaid { grid-column: 1 / -1; } }
@media (max-width: 980px) { .recharge-hero__grid,.recharge-request-grid { grid-template-columns: 1fr; }.recharge-console { width: min(100%,650px); }.recharge-request-grid { max-width: 760px; }.recharge-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .recharge-hero { padding: 66px 0 72px; }.recharge-hero__grid > div:first-child > p:not(.eyebrow) br { display: none; }.ready-grid,.recharge-app-grid,.recharge-caution { grid-template-columns: 1fr; }.recharge-app-card--postpaid { grid-column: auto; }.recharge-app-card > p { min-height: 0; }.recharge-heading { margin-bottom: 29px; }.recharge-caution { gap: 28px; }.recharge-request-copy > p:not(.eyebrow) { font-size: 17px; } }
@media (max-width: 430px) { .recharge-page .container { width: min(calc(100% - 28px),var(--container)); }.recharge-page .brand-logo { width: 150px; }.recharge-hero h1 { font-size: 42px; }.recharge-console,.recharge-app-card,.ready-grid article { padding: 23px; }.recharge-console__amount strong { font-size: 31px; }.recharge-store-actions,.recharge-steps { grid-template-columns: 1fr; }.recharge-bottom .button-group { display: grid; } }