/* ============================================================
   USIM PC - Static CSS (Scoped to .usim-page-pc)
   Google Fonts import (Inter + Noto Sans KR)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ============================================================
   Base reset + variables - scoped under .usim-page-pc so it never
   touches the shared header/gnb/footer or other pages
   ============================================================ */
.usim-page-pc, .usim-page-pc *, .usim-page-pc *::before, .usim-page-pc *::after { box-sizing: border-box; margin: 0; padding: 0; }
.usim-page-pc img { display: block; max-width: 100%; }
.usim-page-pc ul { list-style: disc; }
.usim-page-pc a { text-decoration: none; color: inherit; }

/* ============================================================
   Page wrapper (variables now live here instead of :root)
   ============================================================ */
.usim-page-pc { --teal-main: #148b97; --teal-dark: #0a5960; --teal-cta: #0e6166; --teal-border: #10767c; --teal-badge: #087b7e; --teal-mid: #10757b; --teal-table: #02757b; --dark: #222d37; --gray-text: #333; --gray-mid: #444; --gray-light: #edf4f6; --bg-faq: #f1f7f9; --bg-compare: #f6f8fb; --bg-step: #f9fafc; --bg-notice: #eeeeee; --table-border: #afd1d1; --font-gmarket: 'Gmarket Sans TTF', 'GmarketSans', 'Noto Sans KR', sans-serif; --font-inter: 'Inter', 'Noto Sans KR', sans-serif; font-family: var(--font-inter); font-size: 16px; color: var(--gray-text); background-color: #f5f5f5; display: flex; flex-direction: column; align-items: stretch; width: 1000px; margin: 0 auto; overflow: hidden; }

/* ============================================================
   SECTION 01 - HERO
   ============================================================ */
.usim-page-pc .section-hero { position: relative; width: 100%; height: 600px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
.usim-page-pc .section-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.usim-page-pc .section-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.usim-page-pc .section-hero__bg-overlay { position: absolute; inset: 0; background-image: linear-gradient(121.26deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 48.625%, rgba(153, 153, 153, 0) 99.157%); }
.usim-page-pc .hero-text { position: absolute; left: 108px; top: 99px; width: 429px; display: flex; flex-direction: column; gap: 45px; align-items: center; }
.usim-page-pc .hero-text__blur { position: absolute; left: -61px; top: -83px; width: 532px; height: 486px; pointer-events: none; }
.usim-page-pc .hero-text__blur svg { display: block; width: 100%; height: 100%; }
.usim-page-pc .hero-text__content { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; position: relative; z-index: 1; }
.usim-page-pc .hero-brand { font-family: var(--font-gmarket); font-size: 17px; font-weight: 800; color: var(--gray-mid); text-align: center; width: 100%; white-space: pre-wrap; }
.usim-page-pc .hero-brand__logo { display: inline-block; height: 18px; width: auto; vertical-align: middle; margin-left: 2px; margin-bottom:7px; opacity:0.8;}
.usim-page-pc .hero-badge-row { display: flex; flex-direction: column; gap: 2px; width: 100%; font-family: var(--font-gmarket); }
.usim-page-pc .hero-badge-row p { width: 100%; font-size: 17px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.4; text-align: center; }
.usim-page-pc .hero-badge-row .teal { color: var(--teal-main); font-weight: 500; }
.usim-page-pc .hero-badge-row .dark { color: var(--dark); }
.usim-page-pc .hero-badge-row .subtitle { font-size: 25px; color: var(--dark); letter-spacing: -0.96px; }
.usim-page-pc .hero-badge-row .subtitle strong { font-family: var(--font-gmarket); font-weight: 700; color: var(--teal-main); }
.usim-page-pc .hero-title { display: flex; flex-direction: column; gap: 4px; width: 100%; font-family: var(--font-gmarket); font-weight: 700; text-align: center; }
.usim-page-pc .hero-title__data { font-size: 52px; color: var(--teal-main); letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.usim-page-pc .hero-title__travel { font-size: 42px; color: var(--dark); letter-spacing: -2.46px; line-height: 1.15; white-space: nowrap; }
.usim-page-pc .hero-stat-bar { position: relative; width: 100%; background: #ffffff; border-radius: 11.492px; box-shadow: 0px 3.831px 3.831px rgba(0, 0, 0, 0.06); display: flex; align-items: center; padding: 16px 24px; }
.usim-page-pc .hero-stat-bar__inner { display: flex; align-items: flex-start; justify-content: center; flex: 1; }
.usim-page-pc .hero-stat-item { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10.721px; padding: 0; position: relative; }
.usim-page-pc .hero-stat-item--border-right { border-right: 0.893px solid #cacaca; padding-right: 21.441px; }
.usim-page-pc .hero-stat-item--mid { padding: 0 21.441px; border-right: 0.893px solid #cacaca; gap: 7.147px; }
.usim-page-pc .hero-stat-item--last { padding-left: 21.441px; gap: 14.294px; height: 88.719px; }
.usim-page-pc .hero-stat-icon { display: block; object-fit: contain; }
.usim-page-pc .hero-stat-icon--plane { width: 40px; height: 29px; opacity: 0.9; }
.usim-page-pc .hero-stat-icon--esim { width: 41px; height: 38px; opacity: 0.9; }
.usim-page-pc .hero-stat-icon--headset { position: absolute; left: 51px; top: 2px; width: 38px; height: 35px; opacity: 0.9; }
.usim-page-pc .hero-stat-texts { display: flex; flex-direction: column; align-items: center; }
.usim-page-pc .hero-stat-label { font-family: var(--font-inter); font-size: 16px; font-weight: 500; color: var(--gray-text); line-height: 1.3; letter-spacing: -0.3482px; white-space: nowrap; }
.usim-page-pc .hero-stat-value-row { display: flex; align-items: flex-end; gap: 1.787px; }
.usim-page-pc .hero-stat-value { font-family: var(--font-inter); font-size: 21px; font-weight: 700; color: var(--teal-dark); letter-spacing: -0.7695px; white-space: nowrap; line-height: 1; }
.usim-page-pc .hero-stat-unit { font-family: var(--font-inter); font-size: 16px; font-weight: 500; color: #222; letter-spacing: -0.3482px; white-space: nowrap; line-height: 1; padding-bottom: 1.787px; }
.usim-page-pc .hero-stat-bold { font-family: var(--font-inter); font-size: 21px; font-weight: 700; color: var(--teal-dark); letter-spacing: -0.36px; white-space: nowrap; line-height: 1.3; }
.usim-page-pc .hero-stat-sub { font-family: var(--font-inter); font-size: 16px; font-weight: 500; color: var(--gray-text); letter-spacing: -0.36px; white-space: nowrap; line-height: 1; }

/* ============================================================
   SECTION 02 - DISCOUNT
   ============================================================ */
.usim-page-pc .section-discount { position: relative; width: 100%; display: flex; flex-direction: row; gap: 56px; align-items: center; justify-content: center; padding: 56px 64px; overflow: hidden; background-image: linear-gradient(141.47deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 48.625%, rgba(153,153,153,0) 99.157%), linear-gradient(90deg, rgb(218,249,251) 0%, rgb(218,249,251) 100%); }
.usim-page-pc .discount-object { position: relative; width: 280px; height: 178px; flex-shrink: 0; overflow: hidden; }
.usim-page-pc .discount-object img { position: absolute; width: 103.96%; height: 114.81%; left: -4.12%; top: -10.94%; object-fit: cover; }
.usim-page-pc .discount-text-wrapper { display: flex; flex-direction: column; gap: 24px; align-items: center; flex-shrink: 0; }
.usim-page-pc .discount-text { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.usim-page-pc .discount-badge { border: 1px solid var(--teal-border); border-radius: 100px; padding: 2px 16px; display: inline-flex; align-items: center; justify-content: center; }
.usim-page-pc .discount-badge p { font-family: var(--font-inter); font-size: 17px; font-weight: 500; color: #11757c; letter-spacing: -0.64px; line-height: 1.4; white-space: nowrap; }
.usim-page-pc .discount-title { display: flex; gap: 12px; align-items: flex-end; justify-content: center; font-family: var(--font-gmarket); font-size: 33px; font-weight: 700; letter-spacing: -1.28px; white-space: nowrap; }
.usim-page-pc .discount-title__label { color: var(--dark); line-height: normal; }
.usim-page-pc .discount-title__pct { color: var(--teal-mid); line-height: 0; }
.usim-page-pc .discount-title__pct .num { letter-spacing: -0.8px; line-height: normal; }
.usim-page-pc .discount-title__pct .rest { line-height: normal; }
.usim-page-pc .discount-subtitle { font-family: var(--font-inter); font-size: 20px; font-weight: 500; color: var(--gray-mid); letter-spacing: -0.68px; line-height: 1.4; text-align: center; width: 100%; }
.usim-page-pc .cta-btn { position: relative; display: inline-flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--teal-border); cursor: pointer; overflow: hidden; }
.usim-page-pc .cta-btn p { font-family: var(--font-inter); font-size: 17px; font-weight: 500; color: var(--teal-mid); letter-spacing: -0.32px; line-height: 1.4; white-space: nowrap; position: relative; z-index: 1; }
.usim-page-pc .cta-btn__arrow { position: relative; z-index: 1; font-size: 14px; color: var(--teal-mid); line-height: 1; }

/* ============================================================
   SECTION 03 - FAQ
   ============================================================ */
.usim-page-pc .section-faq { background-color: var(--bg-faq); display: flex; flex-direction: column; gap: 40px; align-items: center; padding: 56px 44px; width: 100%; }
.usim-page-pc .section-title { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; }
.usim-page-pc .section-title__icon-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.usim-page-pc .section-title__icon { display: block; object-fit: contain; }
.usim-page-pc .section-title__icon--globe { width: 54px; height: 55px; }
.usim-page-pc .section-title__icon--passport { width: 96px; height: 80px; }
.usim-page-pc .section-title__icon--coupon { width: 102px; height: 68px; }
.usim-page-pc .section-title__text { display: flex; flex-direction: column; gap: 6px; align-items: center; font-family: var(--font-gmarket); font-weight: 700; white-space: nowrap; line-height: 1.2; }
.usim-page-pc .section-title__teal { font-size: 37px; color: var(--teal-main); letter-spacing: -0.025em; }
.usim-page-pc .section-title__dark { font-size: 37px; color: var(--dark); letter-spacing: -0.025em; }
.usim-page-pc .section-title__dark-sm { font-size: 33px; color: var(--dark); letter-spacing: -0.64px; }
.usim-page-pc .section-title__subtitle { font-family: var(--font-inter); font-size: 20px; font-weight: 400; color: var(--gray-text); letter-spacing: -0.72px; line-height: 1.6; white-space: nowrap; text-align: center; }
.usim-page-pc .faq-list { display: flex; flex-direction: column; gap: 16px; width: 912px; }
.usim-page-pc .faq-row { display: flex; gap: 16px; align-items: stretch; width: 100%; }
.usim-page-pc .faq-card { position: relative; background: #ffffff; border-radius: 24px; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.04); display: flex; flex: 1; flex-direction: column; gap: 32px; align-items: center; justify-content: center; padding: 32px 28px; min-width: 0; }
.usim-page-pc .faq-card__badge { position: absolute; top: -9px; left: 24px; background: var(--teal-badge); border-radius: 8px; padding: 4px; font-family: var(--font-gmarket); font-size: 21px; font-weight: 700; color: #fff; line-height: normal; white-space: nowrap; }
.usim-page-pc .faq-card__icon { display: block; object-fit: contain; }
.usim-page-pc .faq-card__icon--chip { width: 100px; height: 96px; }
.usim-page-pc .faq-card__icon--phone { width: 108px; height: 85px; }
.usim-page-pc .faq-card__icon--delivery { width: 130px; height: 97px; }
.usim-page-pc .faq-card__icon--agent { width: 84px; height: 89px; }
.usim-page-pc .faq-card__texts { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; width: 100%; }
.usim-page-pc .faq-card__question { font-family: var(--font-inter); font-size: 23px; font-weight: 700; color: var(--teal-main); letter-spacing: -0.88px; line-height: 1.25; width: 100%; white-space: normal; }
.usim-page-pc .faq-card__answer { font-family: var(--font-inter); font-size: 20px; font-weight: 400; color: var(--gray-text); letter-spacing: -0.68px; line-height: 1.6; width: 100%; white-space: normal; }

/* ============================================================
   SECTION 04 - COMPARE
   ============================================================ */
.usim-page-pc .section-compare { position: relative; display: flex; justify-content: center; padding: 56px 44px; width: 100%; }
.usim-page-pc .section-compare__bg { position: absolute; inset: 0; pointer-events: none; background-color: var(--bg-compare); }
.usim-page-pc .section-compare__bg-deco { position: absolute; inset: 0; opacity: 0.35; overflow: hidden; }
.usim-page-pc .section-compare__bg-deco img { position: absolute; width: 100%; height: 90.42%; left: 0; top: -7.67%; object-fit: cover; }
.usim-page-pc .section-compare__inner, .usim-page-pc .section-step__inner { position: relative; display: flex; flex-direction: column; gap: 40px; align-items: center; width: 912px; flex-shrink: 0; }
.usim-page-pc .compare-table { border: 1px solid var(--table-border); border-radius: 24px; overflow: hidden; width: 100%; display: flex; flex-direction: column; }
.usim-page-pc .compare-row { display: flex; align-items: center; border-bottom: 1px solid var(--table-border); width: 100%; }
.usim-page-pc .compare-row:last-child { border-bottom: none; }
.usim-page-pc .compare-cell { display: flex; align-items: center; justify-content: center; padding: 24px 12px; font-family: var(--font-inter); font-size: 20px; font-weight: 500; color: var(--gray-text); letter-spacing: -0.68px; line-height: 1.4; text-align: center; white-space: nowrap; }
.usim-page-pc .compare-cell--roaming { background: var(--gray-light); border-right: 1px solid var(--table-border); width: 250px; flex-shrink: 0; }
.usim-page-pc .compare-cell--usim { background: var(--teal-table); flex: 1; border-right: 1px solid var(--table-border); color: #fff; font-size: 23px; font-weight: 600; }
.usim-page-pc .compare-cell--esim { background: var(--gray-light); flex: 1; font-size: 23px; font-weight: 600; }
.usim-page-pc .compare-cell--roaming-hdr { font-size: 23px; font-weight: 600; }
.usim-page-pc .compare-cell--content-left { background: var(--gray-light); border-right: 1px solid var(--table-border); width: 250px; flex-shrink: 0; align-self: stretch; }
.usim-page-pc .compare-cell--content-right { background: #fff; flex: 1; gap: 24px; align-self: stretch; }
.usim-page-pc .compare-cell--content-right-split { background: #fff; flex: 1; gap: 10px; align-self: stretch; border-right: 1px solid var(--table-border); }
.usim-page-pc .compare-cell--content-right-last { background: #fff; flex: 1; gap: 10px; align-self: stretch; }
.usim-page-pc .compare-cell-icon { display: block; object-fit: contain; }
.usim-page-pc .compare-cell-icon--credit { width: 64px; height: 47px; }
.usim-page-pc .compare-cell-icon--piggy { width: 64px; height: 65px; }
.usim-page-pc .compare-cell-icon--truck { width: 64px; height: 46px; }
.usim-page-pc .compare-cell-icon--qr { width: 64px; height: 62px; }
.usim-page-pc .compare-cell__multiline { display: flex; flex-direction: column; text-align: center; }

/* ============================================================
   SECTION 05 - STEP
   ============================================================ */
.usim-page-pc .section-step { position: relative; display: flex; justify-content: center; padding: 56px 44px; width: 100%; }
.usim-page-pc .section-step__bg { position: absolute; inset: 0; pointer-events: none; background-color: var(--bg-step); }
.usim-page-pc .section-step__bg-deco { position: absolute; inset: 0; opacity: 0.35; overflow: hidden; }
.usim-page-pc .section-step__bg-deco img { position: absolute; width: 100%; height: 90.42%; left: 0; top: -7.67%; object-fit: cover; }
.usim-page-pc .step-cards-wrapper { display: flex; flex-direction: column; gap: 32px; align-items: flex-end; width: 100%; }
.usim-page-pc .step-card { position: relative; background: #ffffff; border-radius: 24px; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.04); width: 100%; }
.usim-page-pc .step-label { position: absolute; top: -12px; left: 24px; background: var(--teal-badge); border-radius: 8px; padding: 8px 12px; font-family: var(--font-gmarket); font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.32px; line-height: normal; white-space: nowrap; }
.usim-page-pc .step-01-card { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding: 40px 24px; }
.usim-page-pc .step-01-content { position: relative; display: flex; align-items: center; height: 35px; width: 100%; }
.usim-page-pc .step-01-hint { position: absolute; left: 190px; transform: translateX(-50%); font-family: var(--font-inter); font-size: 18px; font-weight: 500; color: var(--gray-text); letter-spacing: -0.68px; line-height: 1.6; text-align: center; white-space: nowrap; top: 5px; }
.usim-page-pc .step-01-btn { position: absolute; right: 13px; top: 0; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--teal-border); cursor: pointer; text-decoration: none; }
.usim-page-pc .step-01-btn p { font-family: var(--font-inter); font-size: 19px; font-weight: 500; color: var(--teal-badge); letter-spacing: -0.36px; line-height: 1.4; white-space: nowrap; }
.usim-page-pc .step-01-btn__arrow { font-size: 14px; color: var(--teal-badge); }
.usim-page-pc .step-23-row { display: flex; gap: 20px; align-items: center; width: 100%; }
.usim-page-pc .step-23-card { background: #ffffff; border-radius: 24px; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.04); position: relative; flex: 1; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding: 40px 24px 24px; min-width: 0; }
.usim-page-pc .step-23-content { display: flex; flex-direction: column; gap: 28px; align-items: center; width: 100%; }
.usim-page-pc .step-card-text { font-family: var(--font-inter); font-size: 20px; font-weight: 500; color: var(--gray-text); letter-spacing: -0.68px; line-height: 1.4; text-align: center; width: 100%; }
.usim-page-pc .step-card-text .teal { color: var(--teal-main); }
.usim-page-pc .step-screen-img { width: 100%; height: 360px; object-fit: contain; }
.usim-page-pc .step-04-card { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding: 48px 24px 28px; }
.usim-page-pc .step-04-label { top: -10px; }
.usim-page-pc .step-04-inner { display: flex; gap: 28px; align-items: flex-start; width: 100%; }
.usim-page-pc .step-04-side { display: flex; flex: 1; flex-direction: column; gap: 16px; align-items: center; min-width: 0; }
.usim-page-pc .step-04-side--esim { border-right: 1px dashed #cacaca; }
.usim-page-pc .step-04-case-label { border-bottom: 1px solid #333; border-radius: 8px; padding: 4px; font-family: var(--font-inter); font-size: 15px; font-weight: 700; color: var(--gray-text); text-align: center; white-space: nowrap; }
.usim-page-pc .step-04-desc { font-family: var(--font-inter); font-size: 17px; font-weight: 500; color: var(--gray-text); letter-spacing: -0.64px; line-height: 1.4; text-align: center; width: 100%; }
.usim-page-pc .step-04-img-qr { width: 198px; height: 108px; object-fit: contain; }
.usim-page-pc .step-04-img-usim { width: 198px; height: 127px; object-fit: contain; margin-top: 20px; }

/* ============================================================
   SECTION 06 - NOTICE
   ============================================================ */
.usim-page-pc .section-notice { background-color: var(--bg-notice); display: flex; flex-direction: column; gap: 40px; align-items: flex-start; padding: 56px 64px 72px 44px; width: 100%; overflow: hidden; }
.usim-page-pc .notice-block { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
.usim-page-pc .notice-heading { font-family: var(--font-inter); font-size: 24px; font-weight: 700; color: var(--dark); line-height: normal; }
.usim-page-pc .notice-list { display: block; list-style: disc; font-family: var(--font-inter); font-size: 20px; font-weight: 400; color: var(--gray-text); letter-spacing: -0.3px; line-height: 1.6; width: 100%; }
.usim-page-pc .notice-list li { margin-left: 30px; margin-bottom: 4px; }
.usim-page-pc .notice-list li:last-child { margin-bottom: 0; }
.usim-page-pc .notice-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.usim-page-pc .notice-body-text { font-family: var(--font-inter); font-size: 20px; font-weight: 400; color: var(--gray-text); letter-spacing: -0.32px; line-height: 1.6; }