/* ═══════════════════════════════════════════════════════════════
   모바일 전용 소개 3면 공통 스타일 (2026-08-13)
     m_intro.html  — 기본(혜택)
     m_store.html  — 스마트스토어
     m_place.html  — 플레이스
   ⚠️ 회원 셸(ss_init.js)·ss.css 를 쓰지 않는 독립 화면이다.

   🎨 규칙 — place_marketing.html 의 원칙을 그대로 따른다:
        "배경색을 카드마다 바꾸면 산만해진다"
      · 카드 배경은 **은은한 파랑 하나**로 통일한다(#f7f9ff / 테두리 #e4e9f8)
      · 위계는 색이 아니라 **굵기·크기**로 만든다
      · 강조색은 섹션당 한 번만. 스마트스토어 초록 / 플레이스 주황은
        라벨·아이콘·수치에만 점처럼 쓴다(면적을 칠하지 않는다)
      · 그림자는 리포트·차트처럼 '물체'인 것에만
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#5e62f4; --accent2:#8b5cf6;
  --store:#03C75A;  --store-dk:#00994a;
  --place:#f97316;  --place-dk:#ea580c;
  --ink:#111118; --ink2:#333340; --muted:#5f6475; --dim:#9aa3b2;
  --line:#e9e9f0;
  /* 카드 — 전 화면 공통. 여기만 바꾸면 3면이 함께 바뀐다 */
  --card-bg:#f7f9ff; --card-line:#e4e9f8;
  --page:#f7f8fc;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  background:#fff;color:var(--ink2);font-size:15px;line-height:1.72;letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:520px;margin:0 auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── 헤더 : 로고 + 두 서비스 전환 ── */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:9px;padding:11px 16px}
.logo{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.04em;flex:none}
.logo b{background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hd-nav{display:flex;gap:6px;margin-left:auto}
.hd-nav a{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:9px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.hd-nav a.on.s{background:#eafaf1;border-color:#bfe9d0;color:var(--store-dk)}
.hd-nav a.on.p{background:#fff4e9;border-color:#fadcc1;color:var(--place-dk)}
.hd-nav a.login{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff}

/* ── 히어로 ── */
.hero{position:relative;padding:48px 22px 40px;text-align:center;
  background:radial-gradient(680px 320px at 50% -10%,rgba(94,98,244,.15),transparent 68%),
             linear-gradient(180deg,#fff 0%,var(--page) 100%)}
.hero.s{background:radial-gradient(680px 320px at 50% -10%,rgba(3,199,90,.14),transparent 68%),
             linear-gradient(180deg,#fff 0%,var(--page) 100%)}
.hero.p{background:radial-gradient(680px 320px at 50% -10%,rgba(249,115,22,.14),transparent 68%),
             linear-gradient(180deg,#fff 0%,var(--page) 100%)}
.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(--accent);background:rgba(94,98,244,.10);border:1px solid rgba(94,98,244,.20)}
.tag.s{color:var(--store-dk);background:#eafaf1;border-color:#bfe9d0}
.tag.p{color:var(--place-dk);background:#fff4e9;border-color:#fadcc1}
.hero h1{font-size:29px;font-weight:800;color:var(--ink);line-height:1.36;letter-spacing:-.04em}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero.s h1 em{background:none;-webkit-text-fill-color:initial;color:var(--store-dk)}
.hero.p h1 em{background:none;-webkit-text-fill-color:initial;color:var(--place-dk)}
.hero p{margin-top:15px;font-size:15.5px;color:var(--muted);line-height:1.8}
.hero p b{color:var(--ink2);font-weight:700}

/* ── 섹션 ── */
.sec{padding:50px 22px}
.sec.page{background:var(--page)}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  padding:5px 11px;border-radius:8px;margin-bottom:12px;color:var(--accent);background:rgba(94,98,244,.10)}
.eyebrow.s{color:var(--store-dk);background:#eafaf1}
.eyebrow.p{color:var(--place-dk);background:#fff4e9}
h2{font-size:24px;font-weight:800;color:var(--ink);line-height:1.4;letter-spacing:-.035em}
h3{font-size:17.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.sub{margin-top:13px;font-size:15px;color:var(--muted);line-height:1.8}
.sub b{color:var(--ink2);font-weight:700}
.note{margin-top:12px;font-size:12.5px;color:var(--dim);line-height:1.7}

/* ── 카드 : 전부 같은 은은한 파랑 ── */
.cards{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.c{padding:21px 20px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-line)}
.c-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.c-em{font-size:20px;line-height:1;flex:none}
.c-n{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.c-d{font-size:14px;color:var(--ink2);line-height:1.78}
.c-d b{font-weight:800;color:var(--ink)}
.c-d+.c-d{margin-top:9px}
/* 카드 안 항목 */
.kv{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.kv-i{display:flex;gap:10px;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.kv-k{flex:none;min-width:54px;font-weight:800;color:var(--ink)}
/* 카드 안 강조 박스 — 흰 바탕으로 한 겹 띄운다 */
.hl{margin-top:13px;padding:12px 14px;background:#fff;border-radius:11px;
  font-size:13px;line-height:1.72;color:var(--ink2);border:1px solid var(--card-line)}
.hl b{font-weight:800;color:var(--ink)}
/* 수치 강조 */
.big{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.2}
.big.s{color:var(--store-dk)} .big.p{color:var(--place-dk)}

/* ── 샘플(차트·표) : 물체이므로 흰 바탕 + 그림자 ── */
.demo{margin-top:14px;background:#fff;border:1px solid var(--card-line);border-radius:14px;padding:15px 14px 12px}
.demo-t{font-size:12px;font-weight:800;color:var(--dim);margin-bottom:10px;letter-spacing:.02em}
.demo svg{width:100%;display:block}
.demo-b{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--dim)}
.demo-cap{margin-top:9px;font-size:12px;color:var(--muted);line-height:1.65}
.demo-cap b{color:var(--ink);font-weight:800}
/* 미니 표 */
.mt{width:100%;border-collapse:collapse;font-size:12.5px}
.mt th{background:#eef1f9;color:#4a5163;font-weight:700;padding:7px 8px;text-align:center;font-size:11.5px}
.mt td{padding:7px 8px;text-align:center;border-bottom:1px solid #f0f2f8;color:var(--ink2)}
.mt tr:last-child td{border-bottom:none}
.mt td.l{text-align:left;font-weight:700;color:var(--ink)}
.mt .up{color:#e11d48;font-weight:800}
.mt .dn{color:#2563eb;font-weight:800}
.mt .ok{color:var(--store-dk);font-weight:800}

/* ── 비교(전/후) ── */
.vs{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-b{padding:15px 13px;border-radius:13px;background:#fff;border:1px solid var(--card-line)}
.vs-b.bad{border-color:#f3d7d7;background:#fffafa}
.vs-b.good{border-color:#c9e9d6;background:#f8fffb}
.vs-t{font-size:12.5px;font-weight:800;margin-bottom:9px}
.vs-b.bad .vs-t{color:#c0392b} .vs-b.good .vs-t{color:var(--store-dk)}
.vs-r{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--muted)}
.vs-r b{color:var(--ink);font-weight:800}

/* ── 단계(선순환 등) ── */
.steps{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:#fff;
  border:1px solid var(--card-line);border-radius:12px}
.step-n{flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.step.s .step-n{background:var(--store)} .step.p .step-n{background:var(--place)}
.step-t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.55}
.step-t span{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--muted)}

/* ── 리포트 이미지 ── */
.shot{margin-top:20px;border-radius:16px;overflow:hidden;border:1px solid var(--card-line);background:#fff;
  box-shadow:0 14px 32px rgba(40,40,90,.10)}
.shot img{width:100%}
.shot-c{padding:11px;font-size:12px;color:var(--dim);text-align:center;border-top:1px solid var(--card-line)}

/* ── 버튼 ── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;
  border-radius:13px;font-size:15px;font-weight:800;border:none;font-family:inherit;cursor:pointer;letter-spacing:-.02em}
.btn+.btn{margin-top:9px}
.b-kakao{background:#FEE500;color:#191600}
.b-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.b-grad{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 10px 22px rgba(94,98,244,.28)}
.b-store{background:var(--store);color:#fff;box-shadow:0 10px 22px rgba(3,199,90,.26)}
.b-place{background:var(--place);color:#fff;box-shadow:0 10px 22px rgba(249,115,22,.26)}

/* ── 다음 화면으로 ── */
.next{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.next a{display:flex;align-items:center;gap:12px;padding:16px 17px;border-radius:14px;
  background:var(--card-bg);border:1px solid var(--card-line)}
.next .n-em{font-size:22px;flex:none}
.next .n-t{font-size:14.5px;font-weight:800;color:var(--ink)}
.next .n-d{font-size:12.5px;color:var(--muted);margin-top:2px}
.next .n-go{margin-left:auto;font-size:16px;color:var(--dim);flex:none}

/* ── CTA ── */
.cta{padding:52px 22px 58px;text-align:center;color:#fff;
  background:radial-gradient(600px 300px at 50% 0%,rgba(139,92,246,.32),transparent 70%),
             linear-gradient(160deg,#1b1b2e,#111118)}
.cta h2{color:#fff}
.cta .sub{color:#a9adc4}
.cta .btns{margin-top:24px;text-align:left}
.cta .b-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.20)}
.cta .fin{margin-top:16px;font-size:12.5px;color:#8b90a8}
.cta .fin a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.3)}

/* ── 푸터 ── */
.ft{padding:24px 22px 36px;font-size:11.5px;color:var(--dim);line-height:1.9;background:var(--page)}
.ft-l{display:flex;gap:13px;margin-bottom:8px;flex-wrap:wrap}
.ft-l a{color:var(--muted);font-weight:700}

/* 등장 */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}