/* 앱 상세 페이지 공통 스타일 — 사이트 실측 규칙: 헤딩=Paperlogy, 본문=Pretendard 17px #333.
   페이지별 액센트는 .rbp-wrap 인라인 변수로 재정의 */
.rbp-wrap{
  --rbp-primary:var(--e-global-color-primary,#2C5C91);
  --rbp-primary-soft:var(--e-global-color-secondary,#80A9D6);
  --rbp-ink:#111111;--rbp-body:#333333;--rbp-sub:#666666;
  --rbp-bg:#f5f7fa;--rbp-card:#f4f6f8;
  max-width:100%;overflow-x:hidden;
  font-family:'Pretendard',sans-serif;font-size:17px;font-weight:400;line-height:1.7em;
  color:var(--rbp-body);background:#fff}
.rbp-wrap *{box-sizing:border-box}
.rbp-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.rbp-section{padding:96px 0}
.rbp-section.alt{background:var(--rbp-bg)}
.rbp-eyebrow{display:inline-block;color:var(--rbp-primary-soft);font-family:'Paperlogy','Pretendard',sans-serif;font-size:14px;font-weight:300;letter-spacing:.5em;line-height:1.4em;margin-bottom:14px}
.rbp-h1{font-family:'Paperlogy','Pretendard',sans-serif;font-size:46px;font-weight:700;margin:0 0 8px;line-height:1.25em;color:var(--rbp-ink)}
.rbp-h2{font-family:'Paperlogy','Pretendard',sans-serif;font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.3em;color:var(--rbp-ink)}
.rbp-tagline{font-size:18px;font-weight:600;color:var(--rbp-primary);margin:0 0 20px}
.rbp-sub{color:var(--rbp-sub);max-width:600px;margin:0 0 32px;font-size:17px}
.rbp-center{text-align:center}
.rbp-center .rbp-sub{margin-left:auto;margin-right:auto}
.rbp-hero{display:flex;align-items:center;gap:56px}
.rbp-hero-copy{flex:1 1 480px}
.rbp-hero-visual{flex:1 1 420px;display:flex;justify-content:center;align-items:center;gap:20px}
.rbp-hero-visual img.shot{width:min(240px,40vw);border-radius:24px;box-shadow:0 24px 48px rgba(29,41,57,.18)}
.rbp-hero-visual img.shot.back{transform:translateY(28px) rotate(3deg);width:min(210px,34vw);opacity:.95}
.rbp-hero-visual img.sticker{width:min(300px,55vw);filter:drop-shadow(0 18px 30px rgba(29,41,57,.18))}
.rbp-appicon{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 20px rgba(29,41,57,.15);margin-bottom:24px}
.rbp-btns{display:flex;flex-wrap:wrap;gap:12px}
.rbp-btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 28px;font-size:16px;font-weight:600;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.rbp-btn:hover{transform:translateY(-2px)}
.rbp-btn.fill{background:var(--rbp-primary);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--rbp-primary) 30%,transparent)}
.rbp-btn.fill:hover{color:#fff}
.rbp-btn.line{border:1.5px solid var(--rbp-primary);color:var(--rbp-primary);background:#fff}
.rbp-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.rbp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:48px}
.rbp-card{background:var(--rbp-card);border-radius:14px;padding:32px 28px}
.alt .rbp-card{background:#fff;box-shadow:0 6px 18px rgba(29,41,57,.06)}
.rbp-card h3{font-family:'Paperlogy','Pretendard',sans-serif;font-size:20px;font-weight:700;margin:0 0 10px;color:var(--rbp-ink)}
.rbp-card p{margin:0;color:var(--rbp-sub);font-size:15px;line-height:1.65em}
.rbp-card .num{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--rbp-primary);color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:16px;font-size:16px}
.rbp-card img.mascot{height:96px;margin-bottom:16px}
.rbp-steps{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* 홀수 카드 균형 배치: 5개=3+2 중앙, 7개=4+3 중앙 */
.rbp-grid.g5{grid-template-columns:repeat(6,1fr)}
.rbp-grid.g5>*{grid-column:span 2}
.rbp-grid.g5>*:nth-child(4){grid-column:2/span 2}
.rbp-grid.g7{grid-template-columns:repeat(8,1fr)}
.rbp-grid.g7>*{grid-column:span 2}
.rbp-grid.g7>*:nth-child(5){grid-column:2/span 2}
@media (max-width:1000px){
  .rbp-grid.g5,.rbp-grid.g7{grid-template-columns:1fr 1fr}
  .rbp-grid.g5>*,.rbp-grid.g7>*{grid-column:auto!important}
  .rbp-grid.g5>*:last-child,.rbp-grid.g7>*:last-child{grid-column:1/-1!important}
}
@media (max-width:640px){
  .rbp-grid.g5,.rbp-grid.g7{grid-template-columns:1fr}
  .rbp-grid.g5>*:last-child,.rbp-grid.g7>*:last-child{grid-column:auto!important}
}
.rbp-gallery{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-top:40px}
.rbp-gallery img{width:220px;border-radius:18px;flex:none;scroll-snap-align:start;box-shadow:0 10px 24px rgba(29,41,57,.12)}
/* 제품 화면 투어 — 위계 3단(섹션 > 단계 > 화면), 정렬은 2열 고정.
   🔴 화면 8컷을 4단계 x 2컷으로 묶는다 = 외톨이 카드가 안 생기고 열이 늘 맞는다.
   🔴 이미지는 빌드 때 16:9로 정규화해 둔다(원본 0.98~2.12) — 프레임이 늘 맞고 잘림 0.
   figure/figcaption을 쓰지 않는 이유 = 舊 WP 테마가 그 태그를 이탤릭으로 잡는다 */
.rbp-tour{display:grid;gap:58px;margin-top:56px;text-align:left;font-style:normal}

/* 2단: 단계 머리 — 번호·제목은 왼쪽, 설명은 오른쪽 끝. 밑줄이 열 폭을 그대로 그어 정렬을 보여 준다 */
.rbp-stage .head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:28px;border-bottom:1px solid rgba(29,41,57,.13)}
.rbp-stage .no{flex:none;font-family:'Paperlogy','Pretendard',sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.24em;color:var(--rbp-primary-soft)}
.rbp-stage h3{margin:0;font-family:'Paperlogy','Pretendard',sans-serif;font-size:22px;
  font-weight:700;line-height:1.3em;color:var(--rbp-ink);font-style:normal}
.rbp-stage .head p{margin:0 0 0 auto;font-size:15px;line-height:1.6em;color:var(--rbp-sub);font-style:normal}

/* 3단: 화면 카드 — 브라우저 틀 + 16:9 프레임 + 설명. 모든 카드가 같은 규격 */
.rbp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.rbp-cards .card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid rgba(29,41,57,.07);box-shadow:0 8px 24px rgba(29,41,57,.09);
  transition:transform .22s ease,box-shadow .22s ease}
.rbp-cards .card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(29,41,57,.15)}
.rbp-cards .bar{flex:none;display:flex;align-items:center;gap:7px;height:32px;padding:0 15px;
  background:#eef1f6;border-bottom:1px solid rgba(29,41,57,.07)}
.rbp-cards .bar i{display:block;width:8px;height:8px;border-radius:50%;background:#ccd5e1}
.rbp-cards .shot{aspect-ratio:16/9;background:#fff;overflow:hidden}
.rbp-cards .shot img{width:100%;height:100%;object-fit:cover;display:block}
.rbp-cards .txt{flex:1;display:flex;flex-direction:column;padding:20px 22px 24px}
.rbp-cards h4{margin:0 0 7px;font-family:'Paperlogy','Pretendard',sans-serif;font-size:18px;
  font-weight:700;line-height:1.35em;color:var(--rbp-ink);font-style:normal}
/* 🔴 나란히 놓인 카드의 설명이 1줄/2줄로 갈리면 아래가 어긋난다 → 2줄분을 미리 확보해 행 안에서 높이를 맞춘다 */
.rbp-cards p{margin:0;font-size:14.5px;line-height:1.65em;color:var(--rbp-sub);font-style:normal;
  min-height:calc(1.65em * 2)}
@media (max-width:860px){
  .rbp-tour{gap:44px}
  .rbp-stage .head{gap:10px}
  .rbp-stage .head p{margin-left:0;flex:1 1 100%}
  .rbp-cards{grid-template-columns:1fr;gap:22px}
}
.rbp-cta{background:linear-gradient(135deg,var(--rbp-primary),color-mix(in srgb,var(--rbp-primary) 60%,#8fb2d8));border-radius:24px;padding:72px 32px;color:#fff;text-align:center}
.rbp-cta .rbp-h2{color:#fff}
.rbp-cta p{color:rgba(255,255,255,.85);margin:0 auto 32px;max-width:520px}
.rbp-cta .rbp-btn.fill{background:#fff;color:var(--rbp-primary);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.rbp-cta .rbp-btn.line{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.rbp-cta .rbp-btns{justify-content:center}
/* 필름(영상) 섹션 */
.rbp-film{background:#0D1B2A}
.rbp-film .rbp-h2{color:#fff}
.rbp-film .rbp-sub{color:rgba(255,255,255,.7)}
.rbp-film .frame{position:relative;margin-top:44px;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);aspect-ratio:16/9;background:#000}
.rbp-film video{width:100%;height:100%;object-fit:cover;display:block}
.rbp-film .cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(160deg,rgba(44,92,145,.5),rgba(13,27,42,.72));cursor:pointer;transition:opacity .4s ease}
.rbp-film .cover.off{opacity:0;pointer-events:none}
.rbp-film .play{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.rbp-film .play::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);animation:rbp-pulse 1.8s ease-out infinite}
.rbp-film .play svg{width:30px;height:30px;fill:#0D1B2A;margin-left:5px}
@keyframes rbp-pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.25);opacity:0}}
.rbp-film .cover p{margin:0;font-size:13px;letter-spacing:.18em;color:#cfe0f2}
@media (max-width:900px){
  .rbp-section{padding:64px 0}
  .rbp-h1{font-size:36px}
  .rbp-h2{font-size:27px}
  .rbp-hero{flex-direction:column}
  .rbp-hero-visual{margin-top:16px}
}
/* 데스크톱 미관용 문장 줄바꿈은 모바일에서 해제(자연 줄바꿈) */
@media (max-width:640px){
  .rbp-sub br,.rbp-card p br,.rbp-cta p br{display:none}
}