/* ═══════════════════════════════════════════════════════════════
   pr_mobile_b.css — 'B안: 소개 페이지형' (2026-08-25, 기준안 후보)
     m_place.html(m_style.css)의 리듬을 회원 셸 안에서 쓰도록 .pmb 로 스코프.
     ⚠️ m_style.css 를 직접 로드하면 전역 `*{margin:0}` 리셋이 셸(ss.css)을 깨뜨린다.
        그래서 필요한 규칙만 .pmb 하위로 옮겨 담는다.

   🎨 핵심 = "한 화면당 한 메시지 + 여백". 섹션마다 작은 라벨 → 큰 2줄 제목 →
      짧은 설명 → 시각 카드 하나. 카드로 꽉 채우지 않는다.
   ═══════════════════════════════════════════════════════════════ */
.pmb{
  --place:#f97316; --place-dk:#ea580c;
  --ink:#111118; --ink2:#333340; --muted:#5f6475; --dim:#9aa3b2;
  --line:#e9e9f0; --card-bg:#f7f9ff; --card-line:#e4e9f8; --page:#f7f8fc;
  max-width:520px; margin:0 auto;
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  color:var(--ink2); font-size:15px; line-height:1.72; letter-spacing:-.015em; -webkit-font-smoothing:antialiased;
}
.pmb *{box-sizing:border-box}
/* 셸 본문 패딩을 지워 섹션이 폭을 꽉 쓰게(풀블리드 느낌) */
#pr-main.main:has(.pmb){padding:0}
@media(max-width:640px){#pr-main.main:has(.pmb){padding:0}}

/* ── 히어로 ── */
.pmb-hero{padding:38px 24px 30px;text-align:center;
  background:radial-gradient(680px 320px at 50% -10%,rgba(249,115,22,.14),transparent 68%),
             linear-gradient(180deg,#fff 0%,var(--page) 100%)}
.pmb-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  padding:6px 13px;border-radius:20px;margin-bottom:16px;
  color:var(--place-dk);background:#fff4e9;border:1px solid #fadcc1}
.pmb-hero h1{font-size:29px;font-weight:800;color:var(--ink);line-height:1.36;letter-spacing:-.04em}
.pmb-hero h1 em{font-style:normal;color:var(--place-dk)}
.pmb-hero p{margin-top:15px;font-size:15.5px;color:var(--muted);line-height:1.8}
.pmb-hero p b{color:var(--ink2);font-weight:700}

/* ── 섹션 : 한 메시지 ── */
.pmb-sec{padding:34px 24px}
.pmb-sec.alt{background:var(--page)}
.pmb-eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  padding:5px 11px;border-radius:8px;margin-bottom:13px;color:var(--place-dk);background:#fff4e9}
.pmb-sec h2{font-size:24px;font-weight:800;color:var(--ink);line-height:1.4;letter-spacing:-.035em}
.pmb-sec .sub{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.8}
.pmb-sec .sub b{color:var(--ink2);font-weight:700}

/* ── 시각 카드(섹션당 하나) ── */
.pmb-card{margin-top:24px;padding:22px 20px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-line)}
/* 큰 숫자 히어로(30/70 등) */
.pmb-nums{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.pmb-num{background:#fff;border:1px solid var(--card-line);border-radius:16px;padding:20px}
.pmb-num .lab{font-size:13.5px;font-weight:800;color:var(--ink)}
.pmb-num .big{font-size:40px;font-weight:800;color:var(--place-dk);line-height:1.05;letter-spacing:-.03em;margin-top:2px}
.pmb-num .bar{height:8px;border-radius:6px;background:#eef1f9;overflow:hidden;margin-top:12px}
.pmb-num .bar i{display:block;height:100%;border-radius:6px;background:var(--place)}
.pmb-num .d{font-size:13px;color:var(--muted);line-height:1.7;margin-top:12px}
.pmb-num .d b{color:var(--ink);font-weight:800}
/* 번호 스텝(세로) */
.pmb-steps{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.pmb-step{display:flex;gap:13px;align-items:flex-start;padding:16px 16px;background:#fff;
  border:1px solid var(--card-line);border-radius:14px}
.pmb-step-n{flex:none;width:26px;height:26px;border-radius:8px;background:var(--place);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pmb-step-t{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.5}
.pmb-step-t span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.65}
/* 카드 안 강조 한마디 */
.pmb-hl{margin-top:16px;padding:16px 17px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;
  font-size:14px;line-height:1.75;color:#7c2d12}
.pmb-hl b{font-weight:800;color:var(--place-dk)}

/* 비교 — 소개톤 카드 리스트(항목마다 기존 vs GEO 나란히) */
.pmb-cmp{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.pmb-cmp-r{background:#fff;border:1px solid var(--card-line);border-radius:14px;padding:15px 16px}
.pmb-cmp-k{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.pmb-cmp-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pmb-cmp-o,.pmb-cmp-n{border-radius:11px;padding:11px 12px}
.pmb-cmp-o{background:#f4f5f8}
.pmb-cmp-n{background:#fff7ed;border:1px solid #fed7aa}
.pmb-cmp-o .t,.pmb-cmp-n .t{font-size:10.5px;font-weight:800;letter-spacing:.03em}
.pmb-cmp-o .t{color:#9aa3b2}
.pmb-cmp-n .t{color:var(--place-dk)}
.pmb-cmp-o .v{font-size:13.5px;font-weight:700;color:#5f6475;margin-top:4px;line-height:1.5}
.pmb-cmp-n .v{font-size:13.5px;font-weight:800;color:var(--ink);margin-top:4px;line-height:1.5}

/* FAQ 아코디언 — 네이티브 details */
.pmb-faq{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.pmb-faq details{background:#fff;border:1px solid var(--card-line);border-radius:14px;padding:16px 17px}
.pmb-faq summary{font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center;line-height:1.4}
.pmb-faq summary::-webkit-details-marker{display:none}
.pmb-faq summary::after{content:'+';color:var(--place-dk);font-weight:800;font-size:20px;flex:none;line-height:1}
.pmb-faq details[open] summary::after{content:'−'}
.pmb-faq p{font-size:13.5px;color:var(--ink2);line-height:1.78;margin-top:12px}
.pmb-faq p b{font-weight:800;color:var(--ink)}

/* ── 다음/CTA ── */
.pmb-cta{padding:42px 24px 48px;text-align:center;color:#fff;
  background:radial-gradient(600px 300px at 50% 0%,rgba(249,115,22,.30),transparent 70%),
             linear-gradient(160deg,#26160b,#171310)}
.pmb-cta h2{font-size:23px;font-weight:800;color:#fff;line-height:1.4;letter-spacing:-.03em}
.pmb-cta p{margin-top:12px;font-size:14px;color:#c9bcb0;line-height:1.75}
.pmb-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;margin-top:24px;
  border-radius:14px;font-size:15.5px;font-weight:800;border:none;font-family:inherit;cursor:pointer;
  letter-spacing:-.02em;text-decoration:none;background:var(--place);color:#fff;
  box-shadow:0 12px 26px rgba(249,115,22,.34)}

/* 등장 — CSS 애니메이션(JS 관찰자 금지, 셸 재삽입에도 안전) */
.pmb-rv{animation:pmbUp .55s ease both}
@keyframes pmbUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pmb-rv{animation:none}}