/* 비즈팝콘 고객 안내(guide.ai-web.co.kr) 공통 디자인 — 카페24 홈페이지빌더 디자인 규칙 실측 적용 (2026-10-03)
   실측: Pretendard / 본문 16px #1c1c1c / 주색 #084fff / 컨테이너 1280 / 섹션 여백 120·80(모바일 60·40)
   제목 48/58·30/38·24/34(모바일 28/36·18/30) / 설명 20/28(모바일 15/22) / 카드 r16 p40(모바일 p24) / 버튼 알약 56px 18px 700 */
:root{
  --blue:#084fff; --blue-dark:#0039c7; --blue-soft:#eef3ff;
  --ink:#1c1c1c; --ink-2:#424242; --ink-3:#757575; --ink-4:#a6a6a6;
  --line:#e8eaed; --bg:#ffffff; --bg-soft:#f9fafb; --white:#fff;
  --radius:16px;
}
html{scroll-padding-top:96px}
body{background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:normal;word-break:keep-all}
a{color:var(--blue)}

/* ── 상단바(GNB) ── */
.topbar{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.topbar .inner{max-width:1280px;height:56px;padding:0 24px;display:flex;align-items:center}
.logo{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.logo span{font-size:14px;font-weight:600;color:var(--ink-3)}
.topbar .call{border:0;background:var(--ink);color:#fff;font-size:14px;font-weight:700;padding:0 16px;height:38px;display:inline-flex;align-items:center;border-radius:9999px}

/* ── 히어로(파란 띠, 가운데 정렬) ── */
.hero,.phero{background:var(--blue);color:#fff;padding:40px 24px 44px}
.hero .inner,.phero .inner{max-width:1280px;margin:0 auto;text-align:center}
.hero .eyebrow{font-size:14px;font-weight:700;opacity:.85;margin:0 0 12px}
.hero h1,.phero h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.6px;margin:0 0 12px}
.hero p,.phero p.sub{font-size:15px;line-height:22px;opacity:.95;max-width:820px;margin-left:auto;margin-right:auto}
.badges{justify-content:center}
.badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);font-size:14px;font-weight:600;padding:7px 14px}

/* ── 본문 컨테이너 ── */
.wrap,body .wrap{max-width:1280px;margin:0 auto;padding:0 24px 64px}

/* 섹션 제목: 카페24 섹션 타이틀 규격 */
.section-title{margin:60px 0 20px;font-size:18px;line-height:30px;font-weight:700;color:var(--ink);letter-spacing:-.6px}

/* 카드 */
.card,.what,.step,.plan,.qa,details{border-radius:var(--radius);border:1px solid var(--line);box-shadow:none;background:#fff}
.card{padding:24px;margin:16px 0}
.card h2,.what h2{font-size:18px;line-height:30px;font-weight:700;color:var(--ink);letter-spacing:-.4px}
.card p,.what .lead{font-size:16px;line-height:24px;color:var(--ink-2)}
.what{margin:-24px 0 16px;padding:24px;border:2px solid var(--blue)}

/* 단계 카드 */
.step{margin:16px 0;overflow:hidden}
.step-head{padding:24px 24px 0;gap:16px}
.step-no{width:40px;height:40px;border-radius:12px;background:var(--blue);font-size:18px;font-weight:700}
.step-title{font-size:18px;line-height:30px;font-weight:700;letter-spacing:-.4px;margin:4px 0 0}
.step-sub{font-size:15px;line-height:22px;color:var(--ink-3);font-weight:400}
.step-body{padding:16px 24px 24px;font-size:16px;line-height:26px;color:var(--ink-2)}
.step-body p,.step-body li{font-size:16px;line-height:26px}

/* 스크린샷 */
a.shot{border-radius:12px;border:1px solid var(--line)}
.cap{font-size:13px;line-height:18px;color:var(--ink-4)}

/* 안내 상자 */
.note{border-radius:12px;font-size:15px;line-height:24px;padding:16px 20px}
.note.info{background:var(--blue-soft);border-color:#c9d8ff;color:#0a3aa8}

/* 자주 묻는 질문 */
details summary,.qa .q{font-size:16px;line-height:24px;font-weight:700;padding:18px 20px}
details summary::before{color:var(--blue)}
details .ans,.qa .a{font-size:15px;line-height:24px;color:var(--ink-2)}

/* 표 */
.tablewrap{border-radius:var(--radius);border:1px solid var(--line)}

/* 연락처 블록 → 카페24 다크 섹션 */
.contact{background:var(--ink);border-radius:var(--radius);padding:40px 24px;text-align:center}
.contact h2{font-size:24px;line-height:34px;font-weight:700;color:#fff}
.contact p{font-size:15px;line-height:22px;color:var(--ink-4)}
.contact .btns{max-width:640px;margin:0 auto}
.contact a{height:56px;padding:0 32px;border-radius:9999px;font-size:18px;font-weight:700;background:var(--blue);color:#fff}
.contact a.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:16px}
.contact .meta{color:var(--ink-4);font-size:13px}
footer{font-size:13px;line-height:20px;color:var(--ink-4);margin-top:40px}

/* 버튼(요금제 카드) */
.pc a.go{height:56px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border-radius:9999px;background:var(--ink)}
.pc.best a.go{background:var(--blue)}
.pc{border-radius:var(--radius);padding:24px;box-shadow:none}
.pc h3{font-size:18px;line-height:30px;font-weight:700}
.pc .who{font-size:16px;line-height:24px;color:var(--ink)}
.pc li{font-size:15px;line-height:24px}
.pc .pr{font-size:26px;line-height:34px;font-weight:700}

/* ── 데스크톱: 카페24 규격(제목 48/58, 섹션 120/80, 카드 p40) ── */
@media (min-width:1024px){
  .topbar .inner{height:80px;padding:0 40px}
  .logo{font-size:22px}
  .topbar .call{height:48px;font-size:16px;padding:0 20px}
  .hero,.phero{padding:80px 40px 88px}
  .hero h1,.phero h1{font-size:48px;line-height:58px;letter-spacing:-.96px;margin-bottom:16px}
  .hero p,.phero p.sub{font-size:20px;line-height:28px}
  .wrap,body .wrap{padding:0 40px 120px}
  .section-title{margin:96px 0 28px;font-size:30px;line-height:38px}
  .card{padding:40px}
  .card h2,.what h2{font-size:24px;line-height:34px}
  .card p,.what .lead{font-size:17px;line-height:28px}
  .what{padding:40px;margin-top:-40px}
  .step-head{padding:40px 40px 0}
  .step-no{width:48px;height:48px;font-size:20px}
  .step-title{font-size:24px;line-height:34px}
  .step-sub{font-size:16px;line-height:24px}
  .step-body{padding:20px 40px 40px;display:flow-root;font-size:17px;line-height:28px}
  .step-body p,.step-body li{font-size:17px;line-height:28px}
  /* 넓은 화면: 설명은 왼쪽, 화면 캡처는 오른쪽 */
  .step-body a.shot,.card a.shot{float:right;clear:right;width:54%;margin:0 0 8px 48px}
  .step-body .cap,.card .cap{float:right;clear:right;width:54%;margin:0 0 20px 48px}
  .card{display:flow-root}
  .note{font-size:16px;line-height:26px}
  details summary,.qa .q{font-size:18px;line-height:28px;padding:22px 28px}
  details .ans,.qa .a{font-size:16px;line-height:26px;padding-left:28px;padding-right:28px}
  .contact{padding:80px 40px}
  .contact h2{font-size:48px;line-height:58px;letter-spacing:-.96px;margin-bottom:12px}
  .contact p{font-size:20px;line-height:28px;margin-bottom:32px}
  .contact .btns{grid-template-columns:1fr 1fr}
  .pc{padding:40px 32px}
  .pc h3{font-size:30px;line-height:38px}
  .pc .pr{font-size:30px;line-height:38px}
}