/* ============================================================
 * 공부폰 (갤럭시 A17 · SKT) — 공유 스타일(반응형)
 *   /study_phone(초등)·/exam_phone(수험생) 두 URL이 이 파일 하나를 쓴다.
 *   sk_kids_zem.css 에서 갈라져 나온 사본이다(프리픽스 skz- → stp-).
 *   ⚠ 사본이므로 ZEM폰 쪽을 고쳐도 여기는 안 바뀐다. 공통 수정이면 두 파일을 같이 볼 것.
 *   톤앤매너: claude.ai/design 시안(THEME A) 반영
 *     - 브랜드 단일 컬러 #4221ee (퍼플블루), 밝은 히어로, heavy weight(900/950), tint 선택(#f2efff)
 *   구조: 좌측 상세 + 우측 신청서 2단 sticky 카드(상담주문형 panel1↔panel2)
 *   ≤1024px: 우측 컬럼 숨김 → 하단 CTA + 바텀시트로 카드 이동(JS)
 * ============================================================ */

.stp, .stp * { box-sizing: border-box; }
.stp button, .stp input { font: inherit; }
.stp {
  --brand:#4221ee;        /* 메인 브랜드 */
  --brand2:#0b4fd3;       /* 보조 블루(그라데이션) */
  --tint:#f2efff;         /* 선택 배경(연보라) */
  --soft:#f7f9fc;
  --ink:#172033;
  --ink2:#191f28;
  --muted:#647084;
  --line:#e4e9f1;
  --card-shadow:0 22px 54px rgba(24,52,103,.08);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.stp h1,.stp h2,.stp h3,.stp p,.stp ul,.stp li { margin:0; padding:0; }
.stp ul { list-style:none; }

.stp-landing { width:min(100%,1440px); margin:0 auto; padding:42px 24px 120px; }
.stp-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  align-items:start;
  gap:48px;
}
.stp-detail { min-width:0; }

/* ===== 공통 섹션 헤더 ===== */
.stp-block { margin-top:56px; }
.stp .stp-kicker {
  font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px;
}
.stp-h2 { font-size:24px; font-weight:950; line-height:1.3; color:var(--ink); letter-spacing:-.01em; }
.stp .stp-h2-sub { margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6; }

/* ===== [상] 히어로 (밝은 톤) ===== */
.stp-hero {
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(135deg,#ffffff 0%,#f5faff 54%,#edf8ff 100%);
  box-shadow:var(--card-shadow);
}
.stp-hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,400px);
  gap:30px; align-items:center; padding:40px 36px;
}
.stp-hero-copy { min-width:0; }
.stp-hero-badge {
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.04em;
  color:var(--brand); border:1px solid var(--brand); border-radius:999px;
  padding:6px 16px; margin-bottom:16px;
}
.stp-hero-h1 { font-size:clamp(24px,3.2vw,30px); font-weight:900; line-height:1.25; color:var(--ink); }
.stp .stp-hero-big { margin-top:10px; font-size:clamp(34px,5vw,48px); font-weight:950; line-height:1.05; color:var(--brand); }
.stp-hero-divider { width:min(100%,320px); height:1px; margin:16px 0; background:var(--line); }
.stp-hero-desc { font-size:17px; line-height:1.65; color:#263243; }
.stp-hero-desc strong { color:var(--brand); font-weight:900; }
.stp-hero-pill {
  display:inline-flex; align-items:center; margin-top:18px;
  border-radius:999px; padding:11px 20px;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff;
  font-size:16px; font-weight:900; box-shadow:0 14px 26px rgba(18,81,214,.18);
}
.stp-hero-visual { position:relative; min-height:320px; display:flex; align-items:center; justify-content:center; }
/* 단말 캐러셀 */
.stp-carousel { position:relative; width:100%; max-width:360px; margin:0 auto; overflow:hidden; padding-bottom:24px; }
.stp-carousel-track { position:relative; z-index:1; display:flex; transition:transform .4s ease; }
.stp-slide { flex:0 0 100%; display:flex; align-items:center; justify-content:center; }
.stp-slide img { height:clamp(290px,32vw,360px); width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 18px 36px rgba(24,52,103,.20)); }
.stp-car-arrow {
  position:absolute; top:calc(50% - 12px); transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--brand); font-size:22px; font-weight:900; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.stp-car-arrow.prev { left:4px; }
.stp-car-arrow.next { right:4px; }
.stp-car-arrow:hover { background:#fff; }
.stp-car-dots { position:absolute; left:0; right:0; bottom:4px; z-index:3; display:flex; gap:7px; justify-content:center; }
.stp-car-dot { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:#cfd6e6; cursor:pointer; transition:all .15s ease; }
.stp-car-dot.on { background:var(--brand); width:20px; }
.stp-hero-blob { position:absolute; border-radius:999px; z-index:0; }
.stp-hero-blob.blob1 { top:10px; left:6px; width:150px; height:150px; background:rgba(66,33,238,.07); }
.stp-hero-blob.blob2 { bottom:0; right:0; width:120px; height:120px; background:rgba(24,184,167,.10); }
/* 히어로 하단 기능 스트립 */
.stp-hero-strip {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); background:rgba(255,255,255,.7);
}
.stp-strip-item {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 12px; font-size:15px; font-weight:850; color:var(--ink);
}
.stp-strip-item + .stp-strip-item { border-left:1px solid var(--line); }
.stp-strip-ico {
  display:grid; place-items:center; width:32px; height:32px;
  border:2px solid var(--brand); border-radius:10px; color:var(--brand); font-weight:950; font-size:15px;
}

/* ===== STEP ===== */
.stp-steps { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stp-step { border:1px solid var(--line); border-radius:10px; padding:20px 18px; background:#f8fafc; }
.stp-step-num {
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:999px; background:var(--brand); color:#fff; font-size:13px; font-weight:950; margin-bottom:12px;
}
.stp-step strong { display:block; font-size:16px; font-weight:950; margin-bottom:6px; color:var(--ink); }
.stp-step p { color:var(--muted); font-size:14px; line-height:1.6; }

/* ===== 혜택 ===== */
.stp-benefit-grid { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stp-benefit { border:1px solid var(--line); border-radius:10px; background:#fff; padding:26px 18px 22px; text-align:center; }
.stp-benefit-tag {
  display:inline-block; background:var(--brand); color:#fff; font-size:12px; font-weight:800;
  border-radius:8px; padding:5px 12px; margin-bottom:12px; white-space:nowrap;
}
.stp-benefit h3 { font-size:17px; font-weight:900; margin-bottom:8px; color:var(--ink); }
.stp-benefit p { color:var(--muted); font-size:14px; line-height:1.6; }

/* ===== 패널(가족결합/유의사항 공통) ===== */
.stp-panel { margin-top:14px; border:1px solid var(--line); border-radius:10px; padding:28px; background:#fff; }
/* 가운데 정렬 패널(포켓몬 액세서리 8종) — PC·모바일 공통 */
.stp-panel-center { text-align:center; }
.stp-panel-center .stp-benefit-tag { margin-left:auto; margin-right:auto; }
.stp-panel-center .stp-h2-sub { max-width:560px; margin-left:auto; margin-right:auto; }
.stp-combine { }
.stp .stp-panel-title { font-size:22px; font-weight:950; line-height:1.4; margin-bottom:16px; color:var(--ink); }
.stp .stp-panel-title-sm { font-size:20px; margin-bottom:12px; }
.stp-combine-table { display:flex; flex-direction:column; gap:8px; }
.stp-combine-table li {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--soft); border-radius:12px; padding:14px 18px;
}
.stp-combine-table li span { font-weight:700; }
.stp-combine-table li b { color:var(--brand); font-size:18px; white-space:nowrap; flex:0 0 auto; }
.stp-panel-note { margin-top:14px; color:var(--muted); font-size:12.5px; line-height:1.6; }

.stp-notice-list { display:grid; gap:10px; }
.stp-notice-list li {
  display:grid; grid-template-columns:minmax(96px,120px) 1fr; gap:14px;
  border-top:1px solid #eef2f7; padding-top:12px; font-size:14px; line-height:1.6; color:#344055;
}
.stp-notice-list strong { font-weight:950; }
.stp-notice-list b { color:var(--brand); }

/* ===== 요금제 단일 카드 ===== */
.stp-plan-section { border:1px solid var(--line); border-radius:16px; padding:30px 24px 26px; background:var(--soft); }
.stp-plan-card {
  margin-top:18px; border:1px solid #e8edf4; border-radius:10px; padding:32px; background:#fff;
  box-shadow:0 12px 30px rgba(23,32,51,.07);
}
.stp-plan-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stp-plan-carrier { background:var(--brand); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; border-radius:6px; padding:5px 11px; }
.stp-plan-rate { background:var(--brand); color:#fff; font-size:14px; font-weight:800; border-radius:8px; padding:7px 14px; }
.stp .stp-plan-name { font-size:26px; font-weight:950; color:var(--brand); margin-bottom:14px; }
.stp-plan-data { margin-bottom:14px; }
.stp-plan-data strong { font-size:34px; font-weight:900; color:var(--ink); }
.stp-plan-data .plus { font-size:18px; }
.stp-plan-data span { display:block; color:var(--muted); font-size:15px; margin-top:2px; }
.stp .stp-plan-specs { display:grid; gap:8px; margin-bottom:18px; color:#344055; font-size:15px; font-weight:700; }
.stp .stp-plan-specs li { position:relative; padding-left:22px; }
.stp .stp-plan-specs li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900; }
.stp-plan-breakdown { border-top:1px solid #eceef1; margin-top:12px; padding-top:14px; display:flex; flex-direction:column; gap:7px; }
.stp-plan-breakdown .row { display:flex; justify-content:space-between; font-size:16px; color:var(--muted); }
.stp-plan-breakdown .row b { color:var(--ink); font-weight:600; }
.stp-plan-breakdown .row b.minus { color:var(--brand); font-weight:700; }
.stp-plan-final { margin-top:16px; text-align:right; font-size:18px; color:#374151; }
.stp-plan-final span { color:var(--muted); font-size:14px; margin-right:4px; }
.stp-plan-final strong { font-size:40px; color:var(--brand); font-weight:900; }
.stp-plan-apply {
  margin-top:18px; width:100%; padding:15px; border:0; border-radius:12px; cursor:pointer;
  background:var(--brand); color:#fff; font-size:16px; font-weight:900;
  box-shadow:0 14px 26px rgba(66,33,238,.20); transition:filter .15s ease;
}
.stp-plan-apply:hover { filter:brightness(1.07); }
.stp .stp-plan-usim-notice { margin-top:16px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }

/* ===== 인증마크 ===== */
.stp-cert { margin-top:40px; }
.stp-cert-badge { border:0; background:none; padding:0; cursor:pointer; }
.stp-cert-badge img { max-width:120px; height:auto; display:block; }

/* ===== 상세 2탭 (혜택 / 제품 사양) ===== */
/* 탭바: 혜택/제품사양 모두 노출 + 클릭 시 해당 영역 스크롤 + 상단 고정(sticky) */
/* 글로벌 헤더(sticky 64~88px·z-index:8) 아래에 고정되도록 top·z 조정 (카테고리 안 가리게) */
.stp-tabs { display:flex; margin-top:36px; border-bottom:2px solid var(--line); position:sticky; top:72px; z-index:7; background:#fff; box-shadow:0 6px 16px rgba(23,32,51,.07); }
.stp-tab { flex:1 1 0; min-width:0; padding:15px 16px; border:0; background:none; cursor:pointer; font-size:16px; font-weight:800; color:var(--muted); position:relative; transition:color .15s ease; }
.stp-tab.on { color:var(--brand); }
.stp-tab.on::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--brand); border-radius:3px; }
.stp-tabpanel { display:block; scroll-margin-top:130px; }

/* ===== 제품 사양표 ===== */
.stp-spec-table { width:100%; border-collapse:collapse; margin-top:18px; border-top:2px solid var(--ink); }
.stp-spec-table th, .stp-spec-table td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.stp-spec-table th { width:34%; color:var(--muted); font-weight:700; background:var(--soft); }
.stp-spec-table td { color:var(--ink); font-weight:600; }
.stp .stp-copyright { margin-top:16px; font-size:11.5px; line-height:1.6; color:#9aa3b1; }

/* ============================================================
 * 우측 신청서 카드 (구조=contract_phone / 톤=브랜드)
 * ============================================================ */
.stp-form-col { position:sticky; top:72px; align-self:start; }
.stp-card { border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.08); overflow:hidden; color:var(--ink2); }
/* 상담주문형 가로 슬라이드 트랙 (panel1 견적 ↔ panel2 폼) */
/* 카드 슬라이드 패널(.stp-trackpanel) — 전역 max-width 영향 안 받는 flex-basis 패턴 */
.stp-track { display:flex; align-items:flex-start; transition:transform .32s ease; }
.stp-track.step2 { transform:translateX(-100%); }
.stp-trackpanel { flex:0 0 100%; min-width:0; }
/* 주의: 리셋 규칙 `.stp h2{padding:0}`(line 26, 우선순위 0,1,1)이 단일 클래스(0,1,0)를 이기므로
   `.stp`를 앞에 붙여 우선순위(0,2,0)를 올려야 패딩이 적용됨 */
.stp .stp-card-title { font-size:28px; font-weight:900; line-height:1.5; padding:30px 18px 24px; text-align:center; }
.stp-card-flag { margin-left:6px; color:var(--brand); font-weight:800; font-size:19px; }
/* 카드 내부 좌(색상~요금제) / 우(할인·할부·가격) 2단 */
.stp-card-cols { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
.stp-col-l { padding:16px 14px 8px; }
.stp-col-r { border-left:1px solid #f1f2f4; }
.stp-col-pad { padding:16px 14px 4px; }
/* panel1 CTA / panel2 상담 폼 */
.stp-panel1-cta { padding:12px 22px 20px; }
.stp-panel-pad { padding:20px 16px 22px; }
.stp-back { border:0; background:none; color:var(--muted); font-size:13px; cursor:pointer; padding:0 0 12px; }
.stp-lead-title { font-size:16px; font-weight:900; margin-bottom:12px; color:var(--ink2); }
.stp-lead { display:flex; flex-direction:column; gap:4px; }
.stp-input { width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; color:var(--ink2); }
.stp-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(66,33,238,.12); }

.stp-row { padding:10px 0; }
.stp-row > .lab { display:block; font-size:13px; font-weight:700; color:#4b5563; padding-bottom:8px; }
.stp-must { color:#dc2626; font-size:12px; font-weight:700; margin-left:4px; }

.stp-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.stp-chip {
  min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14px; font-weight:700; color:#344055; cursor:pointer; transition:all .12s ease;
}
.stp-chip:hover { border-color:#c4ccd6; }
.stp-chip.on { border-color:var(--brand); background:var(--tint); color:var(--brand); }

.stp-ro {
  display:inline-block; min-height:42px; line-height:42px; padding:0 16px;
  border:1px solid var(--brand); border-radius:10px; background:var(--tint); color:var(--brand); font-weight:800; font-size:14px;
}
.stp-ro-plan { display:flex; align-items:center; justify-content:space-between; line-height:1.2; width:100%; min-height:48px; }
.stp-ro-plan em { font-style:normal; color:var(--muted); font-weight:600; font-size:13px; }
.stp-plan-spec { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:8px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.stp-plan-spec span { background:#fff; padding:9px 6px; text-align:center; font-size:14px; font-weight:700; color:var(--ink2); }
.stp-plan-spec b { display:block; font-size:11.5px; font-weight:400; color:#8b95a1; margin-bottom:3px; }

/* 가격 섹션 */
.stp-sec { padding:16px 14px; border-top:1px solid #f2f2f2; }
.stp-sec .hd { display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.stp-sec .hd > span:first-child { display:flex; align-items:center; }
.stp-sec .hd .amt { font-size:18px; font-weight:800; }
.stp-sec-badge { display:inline-flex; width:20px; height:20px; margin-right:8px; align-items:center; justify-content:center; border-radius:6px; background:var(--brand); color:#fff; font-size:12px; font-weight:800; }
.stp-sec-sub { font-style:normal; font-weight:600; color:var(--muted); font-size:13px; margin-left:2px; }
.stp-line { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:8px; }
.stp-line.strong { color:var(--ink2); font-weight:700; }

.stp-total { padding:18px 16px; }
.stp-total .hd { display:flex; justify-content:space-between; align-items:baseline; }
.stp-total .lab { display:flex; align-items:center; font-size:14px; font-weight:700; }
.stp-total-badge { display:inline-flex; min-width:38px; height:20px; padding:0 7px; align-items:center; justify-content:center; border-radius:6px; background:var(--ink2); color:#fff; font-size:15px; font-weight:700; margin-right:6px; }
.stp-total .big { font-size:34px; font-weight:900; color:var(--brand); }
.stp-total .big small { font-size:15px; font-weight:700; margin-left:2px; color:var(--ink2); }
.stp-total-note { text-align:right; font-size:12px; color:#dc2626; margin-top:8px; }

/* 동의 */
.stp-agree { padding:14px 0 4px; display:flex; flex-direction:column; gap:9px; }
.stp-agree label { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#4b5563; line-height:1.5; cursor:pointer; }
/* 체크박스: 운영 사이트 전역 CSS(네이티브 숨김)에도 보이도록 강제 */
.stp-agree input[type="checkbox"] {
  -webkit-appearance:checkbox !important; -moz-appearance:checkbox !important; appearance:checkbox !important;
  width:18px !important; height:18px !important; min-width:18px; margin:1px 0 0 !important;
  opacity:1 !important; position:static !important; visibility:visible !important; display:inline-block !important;
  accent-color:var(--brand); flex:0 0 auto; cursor:pointer; clip:auto !important;
}
.stp-agree-view { border:0; background:none; padding:0; color:#8b95a1; font-size:12px; text-decoration:underline; cursor:pointer; }

/* CTA */
.stp-cta { width:100%; height:54px; border:0; border-radius:12px; cursor:pointer; background:var(--brand); color:#fff; font-size:16px; font-weight:800; box-shadow:0 14px 26px rgba(66,33,238,.20); transition:filter .15s ease; }
.stp-cta:hover { filter:brightness(1.06); }
.stp-cta.ghost { background:var(--soft); color:#333; box-shadow:none; }
.stp-form-msg { margin:12px 0 0; font-size:13px; color:var(--brand); }
.stp-form-msg.err { color:#dc2626; }
.stp-form-msg:empty { margin:0; }

/* ============================================================
 * 모바일 하단 CTA + 바텀시트 + 팝업
 * ============================================================ */
.stp-mobile-cta { display:none; }
/* 시트 노출은 [aria-hidden]으로만 제어 (기본 display:none 두면 열려도 안 보임) */

.stp-mobile-cta {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  min-height:58px; align-items:center; justify-content:space-between; gap:12px;
  border:0; border-radius:14px; padding:0 20px;
  background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:0 16px 36px rgba(66,33,238,.30);
}
.stp-mobile-cta-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.stp-mobile-cta-sub { font-size:12px; font-weight:800; color:rgba(255,255,255,.82); }
.stp-mobile-cta-main { font-size:16px; font-weight:900; }
.stp-mobile-cta-arrow { font-size:20px; }

.stp-sheet { position:fixed; inset:0; z-index:200; }
.stp-sheet[aria-hidden="true"] { display:none; }
.stp-sheet-dim { position:absolute; inset:0; background:rgba(15,23,42,.48); }
.stp-sheet-panel {
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-radius:20px 20px 0 0;
  max-height:calc(100vh - 40px); display:flex; flex-direction:column;
  animation:stp-sheet-up .26s ease;
}
@keyframes stp-sheet-up { from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.stp-sheet-handle { width:44px; height:4px; border-radius:999px; background:#d7dde7; margin:12px auto 6px; }
.stp-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:6px 20px 12px; border-bottom:1px solid #f1f2f4; }
.stp-sheet-head strong { font-size:18px; font-weight:950; color:#20293a; }
.stp-sheet-close { width:34px; height:34px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#5f6b7b; font-size:20px; line-height:1; cursor:pointer; }
.stp-sheet-body { overflow-y:auto; padding:0 0 16px; -webkit-overflow-scrolling:touch; }
.stp-sheet-body .stp-card { border:0; border-radius:0; box-shadow:none; }

/* 팝업 공통 */
.stp-pop { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.stp-pop.open { display:flex; }
.stp-pop-dim { position:absolute; inset:0; background:rgba(15,23,42,.5); }
.stp-pop-box { position:relative; width:100%; max-width:360px; background:#fff; border-radius:18px; padding:26px 22px; text-align:center; box-shadow:0 30px 80px rgba(15,23,42,.35); }
.stp-pop-box-wide { max-width:560px; text-align:left; }
.stp-pop-x { position:absolute; top:12px; right:14px; border:0; background:none; font-size:24px; color:#8b95a1; cursor:pointer; }
.stp-pop-title { font-size:20px; font-weight:800; color:var(--ink2); text-align:center; }
.stp-pop-title-left { text-align:left; }
/* 상담 방법 선택 팝업 (contract_phone 디자인 이식) */
.stp-pop-phone { margin-top:10px; font-size:14px; color:#6b7684; text-align:center; }
.stp-pop-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:54px; margin-top:10px; border:0; border-radius:12px; font-size:17px; font-weight:700; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.stp-pop-btn.tel { margin-top:22px; background:#3182f6; color:#fff; }
.stp-pop-btn.kakao { background:#fee500; color:#191919; }
.stp-pop-ico { width:25px; height:25px; flex:0 0 auto; }
.stp-terms-body { white-space:pre-wrap; word-break:break-word; font:inherit; margin:14px 0 0; color:#4b5563; line-height:1.65; font-size:13px; max-height:60vh; overflow:auto; }

/* 간단 토스트 (화면 중앙) */
.stp-toast { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); z-index:100001; max-width:80%; padding:16px 22px; border-radius:16px; background:rgba(25,31,40,.92); color:#fff; font-size:15px; font-weight:600; text-align:center; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.stp-toast.on { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ============================================================
 * [강조] 0원 혜택 — 좌측 배너 + 스티키 카드 배너
 * ============================================================ */
.stp-zero {
  margin-top:28px; border-radius:18px; padding:32px 32px 28px; color:#fff;
  /* 메인 브랜드 #4221ee 기반 — 브랜드 보라 → 더 진한 브랜드 보라 */
  background:linear-gradient(135deg,var(--brand) 0%,#3414c4 100%);
  box-shadow:0 22px 54px rgba(66,33,238,.24);
}
.stp-zero-eyebrow {
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.1em;
  color:var(--brand); background:#ece8ff; border-radius:999px; padding:5px 13px; margin-bottom:13px;
}
.stp-zero-title { font-size:clamp(23px,3.2vw,30px); font-weight:950; line-height:1.32; letter-spacing:-.01em; }
.stp-zero-title b { color:#fff; font-size:1.12em; }
.stp .stp-zero-sub { margin-top:10px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.95); }
.stp .stp-zero-sub b { color:#fff; font-weight:900; }
.stp-zero-grid { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* 가독성 개선: 반투명 카드 → 솔리드 화이트 + 다크 텍스트(고대비) */
/* flex 컬럼 + 넉넉한 세로 리듬 — 내부 항목이 다닥다닥 붙지 않게, 결과 배지는 하단 정렬(두 카드 높이 맞춤) */
.stp-zero-item { display:flex; flex-direction:column; background:#fff; border:0; border-radius:14px; padding:24px 22px; box-shadow:0 10px 26px rgba(13,20,50,.16); color:var(--ink2); }
.stp-zero-cap { font-size:13px; font-weight:700; color:var(--muted); margin-bottom:10px; }
/* 원래가(출고가/월요금) = "before" → 취소선으로 약화해 0원과 대비(강조) */
.stp-zero-num { font-size:23px; font-weight:800; color:#9298a6; letter-spacing:-.02em; line-height:1.15; text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:#cbd1db; }
.stp-zero-num small { font-size:14px; font-weight:700; color:var(--muted); text-decoration:none; }
.stp .stp-zero-break { margin:18px 0; padding-top:18px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:12px; }
.stp .stp-zero-break li { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:#5a6473; }
.stp .stp-zero-break li b { font-weight:800; color:var(--ink2); }
.stp .stp-zero-break li b.minus { color:#6b7280; }              /* 할인(차감) — 모노톤: 회색 */
/* 결과(0원) = 이 영역의 핵심 강조: 브랜드 #4221ee 기반 연보라 바 + 브랜드보라 큰 0원 */
.stp-zero-result { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-top:auto; padding:13px 18px; border-radius:12px; background:#ece8ff; border:1px solid #d7ccf9; color:var(--brand); font-weight:800; box-shadow:0 8px 18px rgba(66,33,238,.14); }
.stp-zero-result .lab { font-size:14px; font-weight:700; color:#6b61c4; }
.stp-zero-result b { font-size:25px; font-weight:950; line-height:1; letter-spacing:-.01em; color:var(--brand); }
/* note: 위 카드와 답답하게 붙지 않도록 구분선 + 여백 */
.stp .stp-zero-note { margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.22); font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.9); }

/* 0원 강조 / 지원 라인 */
.stp-amt-free { color:var(--brand) !important; }
.stp-line-pay { color:var(--brand); font-weight:700; }
.stp-plan-final-free strong { color:var(--brand); }

/* ============================================================
 * 반응형 (시안 기준: 1080 / 920 / 760 / 560 → 여기선 1024로 통합 전환)
 * ============================================================ */
@media (max-width:1024px){
  .stp-landing { padding:24px 18px 110px; }
  .stp-layout { grid-template-columns:1fr; gap:0; }
  /* 모바일은 글로벌 헤더가 고정이 아니라 스크롤로 사라짐(body.main 아님) → 탭은 화면 최상단에 고정 */
  .stp-tabs { top:0; }
  .stp-form-col { display:none; }          /* PC 우측 컬럼 숨김 — 카드는 시트로 이동 */
  .stp-mobile-cta { display:flex; }
  /* 카드: 2단 → 1단, 트랙 세로 스택(슬라이드 없음) */
  .stp-card-cols { grid-template-columns:1fr; }
  .stp-col-r { border-left:0; border-top:1px solid #f1f2f4; }
  .stp-track { flex-direction:column; transform:none !important; }
  .stp-trackpanel { flex:0 0 auto; width:100%; }
  .stp-flow-pc-only { display:none !important; }
  /* 히어로 1단 */
  .stp-hero-inner { grid-template-columns:1fr; gap:22px; padding:30px 26px; }
  .stp-hero-visual { min-height:0; }
  .stp-block { margin-top:48px; }
}
@media (max-width:760px){
  .stp-steps { grid-template-columns:1fr; }
  .stp-benefit-grid { grid-template-columns:1fr; }
  .stp-hero-strip { grid-template-columns:1fr; }
  .stp-strip-item + .stp-strip-item { border-left:0; border-top:1px solid var(--line); }
  .stp-zero { padding:24px 22px; }
  .stp-zero-grid { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .stp-hero-h1 { font-size:24px; }
  .stp-hero-big { font-size:38px; }
  .stp-plan-card { padding:24px 20px; }
}

/* ============================================================
 * 보강 섹션 (2026-06-29) — 알트 공식 상세 + ZEM 안심 서비스 콘텐츠
 *   ZEM 안심 케어 / 인증 배지 / 액세서리 스토리 / 각 부분 명칭
 *   기존 토큰(--brand·--tint·--soft·--line·--muted·--ink) 재사용
 * ============================================================ */

/* ZEM 안심 케어 그리드 */
.stp-care-grid { margin-top:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stp-care { border:1px solid var(--line); border-radius:12px; background:#fff; padding:22px 22px 20px; }
.stp-care-tag { display:inline-block; background:var(--tint); color:var(--brand); font-size:12px; font-weight:800; border-radius:8px; padding:5px 12px; margin-bottom:12px; }
.stp-care h3 { font-size:17px; font-weight:900; margin-bottom:8px; color:var(--ink); }
.stp-care p { color:var(--muted); font-size:14px; line-height:1.65; }
/* SOS·차단 강조 행 */
.stp-care-rows { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stp-care-row { display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:22px; }
.stp-care-row-badge { flex:0 0 auto; display:grid; place-items:center; min-width:46px; height:46px; padding:0 10px; border-radius:12px; background:var(--brand); color:#fff; font-size:14px; font-weight:950; }
.stp-care-row-body { min-width:0; }
.stp-care-row-body h3 { font-size:16px; font-weight:900; color:var(--ink); margin-bottom:10px; }
.stp-care-row-list { display:grid; gap:7px; }
.stp-care-row-list li { font-size:13.5px; line-height:1.55; color:#475063; }
.stp-care-row-list b { display:inline-block; min-width:52px; color:var(--brand); font-weight:800; }

/* 인증 배지 띠 */
.stp-badges { margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stp-badge { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; border:1px solid var(--line); border-radius:12px; padding:24px 14px; background:#fff; }
.stp-badge strong { display:grid; place-items:center; min-width:62px; height:34px; padding:0 12px; border-radius:999px; background:var(--brand); color:#fff; font-size:15px; font-weight:900; }
.stp-badge span { font-size:13px; font-weight:700; color:#475063; line-height:1.5; }

/* 액세서리 스토리텔링 */
.stp-acc-story { margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stp-acc-card { border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:22px 20px; }
.stp-acc-step { display:inline-block; background:var(--brand); color:#fff; font-size:12px; font-weight:800; border-radius:8px; padding:5px 12px; margin-bottom:10px; }
.stp-acc-card p { color:#475063; font-size:14px; line-height:1.6; }

/* 각 부분의 명칭 — altech 공식 라벨 다이어그램(단일 이미지) */
.stp-parts { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--soft); padding:28px; text-align:center; }
.stp-parts img { width:100%; max-width:860px; height:auto; }

/* 제품 특장점 2칸 행 — 카드 가로폭 50%(3칸 행보다 넓게), 텍스트 긴 카드용 */
.stp-benefit-grid-2 { grid-template-columns:repeat(2,1fr); margin-top:12px; }

@media (max-width:760px){
  .stp-benefit-grid-2 { grid-template-columns:1fr; }
  .stp-care-grid { grid-template-columns:1fr; }
  .stp-care-rows { grid-template-columns:1fr; }
  .stp-acc-story { grid-template-columns:1fr; }
  .stp-parts { padding:18px; }
}
@media (max-width:560px){
  .stp-badges { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
 * 고객후기 띠 (2026-08-10)
 *   등속으로 흐르는 순수 CSS 애니메이션. JS 배선 없음(study_phone.js 무관).
 *   한 칸씩 넘기는 캐러셀을 쓰지 않은 이유: 넘어가는 순간이 시선을 끊어 글이 안 읽힌다.
 *   prefers-reduced-motion으로 감싸지 않는다 — 그 설정을 켜둔 환경에서 이 섹션만
 *   통째로 멈춰 "여기만 죽어 있는" 화면이 되기 때문.
 * ============================================================ */
.stp-rv-section { border:1px solid var(--line); border-radius:16px; padding:30px 24px 26px; background:var(--soft); }

/* 평균 별점 요약 줄 */
.stp-rv-score { margin-top:16px; display:flex; align-items:center; gap:9px; }
.stp-rv-score b { font-size:19px; font-weight:950; color:var(--ink); }
.stp-rv-count { font-size:13.5px; font-weight:700; color:var(--muted); }
.stp-rv-stars { display:inline-flex; align-items:center; gap:2px; color:var(--brand); }
.stp-rv-stars svg { width:16px; height:16px; fill:currentColor; display:block; }

/* 띠 바깥틀 — 좌우 끝을 마스크로 흐려서 카드가 '잘리는' 게 아니라 흘러 들어오고 나가 보이게 한다.
   (섹션 배경이 --soft라 배경색 그라디언트로도 덮을 수 있지만, 배경 무관하게 동작하도록 mask를 쓴다) */
.stp-rv-marquee {
  margin-top:18px; overflow:hidden; padding:4px 0 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.stp-rv-track {
  display:flex; flex-wrap:nowrap; align-items:stretch; gap:14px; width:max-content;
  animation:stpRvMarquee var(--stp-rv-dur,90s) linear infinite;
}
/* 이음매 없는 무한 반복: 카드 2세트를 이어 붙였으므로 '한 세트 폭 + 그 뒤 gap'만큼 밀면
   두 번째 세트의 첫 카드가 방금 첫 세트 첫 카드가 있던 자리에 정확히 들어온다.
   gap은 카드 사이에만 들어가서(끝엔 없음) -50%는 딱 gap 절반(7px)이 모자라다 → 그 7px을 더 민다.
   후기 개수·카드 폭이 바뀌어도 gap 14px만 지키면 어긋나지 않는다. */
@keyframes stpRvMarquee { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 7px)); } }
/* 읽는 중엔 세운다 — 마우스를 올리거나 키보드 포커스가 들어오면 정지 */
.stp-rv-marquee:hover .stp-rv-track,
.stp-rv-marquee:focus-within .stp-rv-track { animation-play-state:paused; }

/* 카드 — 본문은 자르지 않는다(line-clamp 없음). flex의 align-items:stretch로 높이만 가장 긴 카드에 맞춘다.
   .stp-rv-txt{flex:1}이 남는 높이를 먹어서 메타 줄은 항상 카드 밑단에 붙는다. */
.stp-rv-card {
  flex:none; width:340px;
  display:flex; flex-direction:column; gap:12px;
  border:1px solid #e8edf4; border-radius:12px; background:#fff; padding:22px 22px 18px;
  box-shadow:0 12px 30px rgba(23,32,51,.07);
}
.stp .stp-rv-txt { flex:1; font-size:14.5px; line-height:1.7; color:#344055; font-weight:500; }
.stp-rv-meta {
  display:flex; align-items:center; gap:8px; padding-top:14px; border-top:1px solid #eef2f7;
  font-size:12.5px; font-weight:700; color:var(--muted);
}
.stp-rv-tag { flex:none; background:var(--tint); color:var(--brand); font-size:12px; font-weight:800; border-radius:8px; padding:4px 10px; }

@media (max-width:560px){
  .stp-rv-section { padding:24px 18px 22px; }
  /* 좁은 화면에서 카드가 화면을 꽉 채우면 다음 카드가 안 보여 '흐른다'는 게 안 읽힌다 → 살짝 좁힘 */
  .stp-rv-card { width:290px; padding:20px 18px 16px; }
}

/* ============================================================
 * 상품 비교표 (ZEM폰 vs 공부폰) — 2026-08-13
 *   레퍼런스가 "타사 비교"를 두는 자리에 자사 두 상품 안내를 놓는다.
 *   .stp-spec-table 은 2열(th/td)이라 3열이 필요한 여기에는 못 쓴다.
 *   .on = 이 페이지 상품(공부폰) 열 — 어느 열을 읽어야 하는지 색으로 고정한다.
 * ============================================================ */
.stp-vs { width:100%; border-collapse:collapse; margin-top:18px; border-top:2px solid var(--ink); }
.stp-vs th, .stp-vs td { text-align:left; padding:14px 14px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.stp-vs thead th { background:var(--soft); color:var(--ink); font-weight:900; font-size:14px; }
.stp-vs thead th.on { background:var(--tint); color:var(--brand); }
.stp-vs tbody th { width:26%; background:#fff; color:var(--muted); font-weight:700; }
.stp-vs tbody td { color:var(--ink); font-weight:600; }
.stp-vs tbody td.on { background:#faf9ff; color:var(--brand); font-weight:800; }

/* 히어로 우측을 이미지 대신 패널로 채울 때 — 실물 컷 확보 전 임시 */
.stp-hero-visual .stp-panel { margin-top:0; }

@media (max-width:760px){
  .stp-vs th, .stp-vs td { padding:11px 9px; font-size:12.5px; }
  .stp-vs tbody th { width:30%; }
}
/* ============================================================
 * 전환 장치 (2026-08-13) — 히어로 CTA · 중간 CTA 밴드 · FAQ
 *   부모 대상 고관여 상품이라 페이지가 길다. 스크롤 도중 마음이 선 지점에서
 *   바로 신청으로 빠질 구멍을 만들어 두는 게 목적이다(전부 data-open-form 위임).
 * ============================================================ */

/* 히어로 안 CTA — 첫 화면에서 이탈하기 전에 잡는다 */
.stp-hero-cta { margin-top:22px; max-width:340px; }

/* 섹션 사이 CTA 밴드 — 기능 설명 직후, 가격 설명 직후 두 곳 */
.stp-midcta {
  margin-top:56px; border-radius:16px; padding:34px 30px; text-align:center;
  background:linear-gradient(135deg,var(--brand) 0%,#3414c4 100%);
  box-shadow:0 22px 54px rgba(66,33,238,.24); color:#fff;
}
.stp-midcta h3 { font-size:21px; font-weight:950; line-height:1.4; }
.stp .stp-midcta p { margin-top:9px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.92); }
.stp-midcta .stp-cta {
  margin-top:20px; max-width:340px; margin-left:auto; margin-right:auto;
  background:#fff; color:var(--brand);
}
.stp-midcta .stp-cta:hover { background:#f4f1ff; }

/* FAQ — <details> 기본 동작을 그대로 쓴다(JS 없음). 접근성·검색 인덱싱 모두 유리 */
.stp-faq { margin-top:18px; border-top:2px solid var(--ink); }
.stp-faq details { border-bottom:1px solid var(--line); }
.stp-faq summary {
  list-style:none; cursor:pointer; padding:19px 44px 19px 2px; position:relative;
  font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.5;
}
.stp-faq summary::-webkit-details-marker { display:none; }
.stp-faq summary::after {
  content:'+'; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:21px; font-weight:800; color:var(--brand); line-height:1;
}
.stp-faq details[open] summary::after { content:'\2212'; }
.stp-faq summary:hover { color:var(--brand); }
.stp .stp-faq-a { padding:0 44px 20px 2px; font-size:14.5px; line-height:1.75; color:var(--muted); }
.stp .stp-faq-a b { color:var(--ink); font-weight:800; }

/* 부담 제거 박스 — 신청 직전 망설임을 여기서 끊는다 */
.stp-reassure { margin-top:14px; border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:10px; background:var(--soft); padding:22px 24px; }
.stp .stp-reassure p { font-size:14.5px; line-height:1.75; color:var(--ink); }
.stp .stp-reassure p + p { margin-top:8px; color:var(--muted); font-size:13.5px; }

/* 문제 호명 카드 — .stp-benefit 과 같은 격자를 쓰되 좌측 정렬(읽는 글이라) */
.stp-problem { text-align:left; }
.stp-problem .stp-benefit-tag { background:#fff1f1; color:#c2410c; }

@media (max-width:760px){
  .stp-midcta { padding:28px 20px; }
  .stp-hero-cta { max-width:none; }
}
/* ============================================================
 * 모바일 첫 화면 압축 (2026-08-13)
 *   sk_kids_zem.css 의 "모바일 히어로 압축"과 같은 원칙을 이 페이지 구성에 맞춰 다시 잡은 것.
 *   원칙: 주소창을 뺀 첫 화면(390×844 기준 ≈700px) 안에 히어로 + 스트립이 들어가고,
 *        그 아래 첫 섹션의 제목이 살짝 걸쳐 "더 있다"가 보여야 한다.
 *
 *   이 페이지가 ZEM폰과 다른 점 — 그래서 규칙이 다르다:
 *    · 단말 캐러셀이 없다. 대신 히어로 우측에 사양 카드(.stp-panel)를 임시로 뒀는데
 *      모바일에서 이게 320px+ 를 먹는다 → 숨긴다. 같은 내용이 제품 사양 탭에 그대로 있다.
 *      (A17 실물 컷이 들어오면 .stp-carousel 이 그 자리에 오고, 아래 190px 규칙을 받는다)
 *    · 히어로 안에 CTA 버튼을 넣었다. 모바일은 화면 하단에 고정 CTA(.stp-mobile-cta)가
 *      항상 떠 있어 같은 일을 이미 한다 → 숨긴다. 76px 회수 + 중복 제거.
 *    · H1은 두 줄짜리 후크라 <br>을 살린다(제품명 .stp-hero-big 의 <br>만 죽인다).
 * ============================================================ */
@media (max-width:760px){
  /* 스트립: 3행 세로 스택(≈204px)이 히어로 아래를 한 화면 가까이 밀어낸다.
     가로 3칸 1행(≈68px)으로 되돌리고 칸 안에서만 아이콘↑·글자↓로 쌓아 폭을 견딘다. */
  .stp-hero-strip { grid-template-columns:repeat(3,1fr); }
  .stp-strip-item {
    flex-direction:column; gap:6px; padding:12px 6px;
    font-size:11.5px; font-weight:800; line-height:1.3;
    text-align:center; word-break:keep-all;
  }
  .stp-strip-item + .stp-strip-item { border-left:1px solid var(--line); border-top:0; }
  .stp-strip-ico { width:26px; height:26px; border-radius:9px; font-size:13px; }

  /* 히어로 우측 임시 사양 카드 — 모바일에선 첫 화면을 통째로 밀어내므로 뺀다 */
  .stp-hero-visual { min-height:0; }
  .stp-hero-visual .stp-panel { display:none; }

  /* 히어로 CTA — 하단 고정 CTA와 중복이라 모바일에선 숨긴다 */
  .stp-hero-cta { display:none; }
}

@media (max-width:560px){
  .stp-hero-inner { gap:14px; padding:20px 16px; }
  .stp-hero-badge { font-size:11.5px; padding:5px 12px; margin-bottom:8px; }
  .stp-hero-h1 { font-size:23px; line-height:1.25; }
  /* 제품명: 바로 위 배지가 이미 같은 말을 한다 → 크게 외칠 이유가 없다 */
  .stp .stp-hero-big { font-size:20px; line-height:1.2; margin-top:6px; }
  .stp-hero-big br { display:none; }
  /* 구분선 하나에 상하 16px씩(총 33px)이 붙는다 → 제거하고 desc 여백으로 대체 */
  .stp-hero-divider { display:none; }
  .stp-hero-desc { font-size:14px; line-height:1.55; margin-top:10px; }
  .stp-hero-pill { font-size:13.5px; padding:9px 16px; margin-top:12px; }
  /* 실물 컷이 들어왔을 때를 위한 선반영 — clamp 하한(290px)이 세로를 안 줄여 준다 */
  .stp-carousel { padding-bottom:18px; }
  .stp-slide img { height:190px; }
  .stp-car-arrow { width:30px; height:30px; }
}
/* 강조행 라벨 — sk_kids_zem 은 라벨이 3~4자("미등록"·"표시제한")라 min-width 52px 만으로 간격이 났지만,
   여기는 라벨이 길어("알아서 정리"·"아이도 압니다") 폭을 넘기면 본문과 그대로 붙어 버린다.
   min-width 를 늘리는 대신 오른쪽 여백을 줘서 라벨 길이와 무관하게 항상 띄운다. */
.stp .stp-care-row-list b { padding-right:8px; }
/* 견적 카드 강조 펄스 — PC에서 [data-open-form] 을 눌렀을 때 카드가 이미 화면에 있어
   "아무 일도 안 일어났다"로 읽히는 것을 막는다. JS가 1.2초만 클래스를 붙였다 뗀다.
   모션 감소 설정에서는 테두리 색만 바뀌고 흔들지 않는다(검수 PC가 reduced-motion). */
@keyframes stpPulse {
  0%   { box-shadow:0 6px 24px rgba(0,0,0,.08), 0 0 0 0 rgba(66,33,238,.45); }
  70%  { box-shadow:0 6px 24px rgba(0,0,0,.08), 0 0 0 12px rgba(66,33,238,0); }
  100% { box-shadow:0 6px 24px rgba(0,0,0,.08), 0 0 0 0 rgba(66,33,238,0); }
}
.stp-card.stp-pulse { animation:stpPulse 1.2s ease-out 1; border-color:var(--brand); }
@media (prefers-reduced-motion:reduce){
  .stp-card.stp-pulse { animation:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(66,33,238,.25); }
}
/* 0원 배너 — 취소선을 긋지 않는 원래가.
   공부폰은 요금 지원이 없다(단말기만 지원). 월정액에 취소선을 그으면 그 금액이 사라지는 것처럼
   읽혀 요금까지 지원되는 상품으로 오해된다. 실제로는 선택약정 25%를 뺀 금액을 매달 낸다. */
.stp .stp-zero-num-plain { text-decoration:none; }
/* ============================================================
 * 상세 이미지 (2026-08-14)
 *   원본이 1024×1536(2:3)이라 세로가 길다. 본문 폭(PC ≈800px)에 그대로 깔면
 *   한 장이 1,200px을 먹어 스크롤이 이미지만 남는다 → 폭을 묶고 가운데 정렬한다.
 * ============================================================ */
.stp-fig { margin-top:18px; }
.stp-fig img { display:block; width:100%; height:auto; border-radius:14px; }
.stp-fig-tall { max-width:400px; margin-left:auto; margin-right:auto; }

/* 히어로 — 원본 위쪽 1/3이 빈 여백이다(카피 얹으라고 비워 둔 자리).
   아래를 기준으로 잘라 인물과 기기가 화면에 들어오게 한다. */
.stp-hero-fig { width:100%; max-width:380px; margin:0 auto; }
.stp-hero-fig img {
  display:block; width:100%; height:360px;
  object-fit:cover; object-position:50% 72%;
  border-radius:16px; box-shadow:0 18px 40px rgba(24,52,103,.14);
}

@media (max-width:760px){
  /* 히어로 이미지는 사양 카드와 같은 이유로 숨긴다 — 첫 화면 예산(≈700px).
     본문 아래쪽 .stp-fig 는 폴드 아래라 높이가 문제되지 않아 그대로 둔다. */
  .stp-hero-fig { display:none; }
  .stp-fig-tall { max-width:none; }
}
/* ============================================================
 * 전화 상담 표기 (2026-08-14)
 *   번호가 신청 팝업 안에만 있어서, 바로 전화하고 싶은 사람은 페이지 어디서도 못 찾았다.
 *   전부 tel: 링크라 모바일에서 누르면 바로 걸린다.
 * ============================================================ */

/* 중간 CTA 밴드(보라 배경) 안 — 버튼을 안 누르는 사람에게 주는 두 번째 길 */
.stp .stp-midcta-tel { margin-top:14px; font-size:14px; color:rgba(255,255,255,.86); }
.stp .stp-midcta-tel a {
  color:#fff; font-weight:900; font-size:17px; letter-spacing:.01em;
  text-decoration:underline; text-underline-offset:3px; margin-left:4px; white-space:nowrap;
}

/* 진행 안내의 부담 제거 박스 안 */
.stp .stp-reassure-tel { margin-top:10px; font-size:14px; color:var(--ink); }
.stp .stp-reassure-tel a {
  color:var(--brand); font-weight:900; font-size:16px;
  text-decoration:underline; text-underline-offset:3px; margin-left:4px; white-space:nowrap;
}

/* 모바일 하단 고정 바 — 전화 + 신청 두 버튼 */
.stp-mobile-bar { display:none; }
@media (max-width:1024px){
  .stp-mobile-bar {
    position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
    display:flex; align-items:stretch; gap:10px;
    filter:drop-shadow(0 16px 36px rgba(66,33,238,.28));
  }
  /* 고정 위치를 바가 넘겨받는다 — 버튼은 남는 폭을 채운다 */
  .stp-mobile-cta {
    position:static; left:auto; right:auto; bottom:auto;
    flex:1 1 auto; min-width:0; box-shadow:none;
  }
  .stp-mobile-cta-main { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stp-mobile-tel {
    flex:0 0 74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border-radius:14px; background:#fff; border:1px solid #d7ccf9; color:var(--brand);
    font-size:12px; font-weight:900; text-decoration:none;
  }
  .stp-mobile-tel svg { width:20px; height:20px; }
}
/* 운영시간 표기 (2026-08-14) */
.stp .stp-midcta-hours {
  display:block; margin-top:6px; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.78); letter-spacing:0;
}
/* 상담 방법 팝업 — 전화·카톡을 고르는 화면. 시간 밖에 온 사람을 카톡으로 돌린다. */
.stp .stp-pop-hours { margin-top:12px; text-align:center; line-height:1.6; }
.stp .stp-pop-hours b { display:block; font-size:14px; font-weight:900; color:var(--ink2); }
.stp .stp-pop-hours span { display:block; margin-top:4px; font-size:12.5px; color:#6b7684; }