/* 와우씨씨엠 리뉴얼 · 앱 다운로드 (/renew/app.php) */
.ap svg{width:100%;height:100%;display:block}

/* 첫 화면: 왼쪽 글·큰 버튼, 오른쪽 플레이어 화면 */
.ap-hero{padding:56px 0 64px;overflow:hidden;background:radial-gradient(circle at 90% 10%,rgba(239,90,34,.18),transparent 45%),linear-gradient(180deg,#fff4ec,#fff)}
.ap-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:48px}
.ap-name{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--brand)}
.ap-name img{width:44px;height:44px;border-radius:11px;box-shadow:0 4px 12px rgba(239,90,34,.3)}
.ap-hero h1{margin:16px 0 10px;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.25;word-break:keep-all}
.ap-lead{max-width:460px;margin:0 0 28px;font-size:16px;color:var(--sub);word-break:keep-all}
.ap-big{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;background:var(--brand);color:#fff;font-size:19px;font-weight:800;box-shadow:0 8px 22px rgba(239,90,34,.28);transition:background .2s,transform .2s}
.ap-big:hover{background:var(--brand-dk);color:#fff;transform:translateY(-2px)}
.ap-big svg{width:26px;height:26px;flex:none}
.ap-meta{margin:12px 0 4px;font-size:13.5px;color:var(--mute)}
.ap-other{font-size:14px;font-weight:600;color:var(--sub);text-decoration:underline;text-underline-offset:3px}

/* 플레이어 화면 틀 (PC 창 모양) */
.ap-win{position:relative;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 24px 60px rgba(43,35,32,.22),0 0 0 1px rgba(0,0,0,.06)}
.ap-win-bar{display:flex;gap:7px;padding:10px 14px;background:#f3f1ef;border-bottom:1px solid #e7e3df}
.ap-win-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.ap-win-bar i:nth-child(2){background:#febc2e}
.ap-win-bar i:nth-child(3){background:#28c840}
.ap-win img{display:block;width:100%;height:auto}
.ap-shot{position:relative;padding:0 0 36px 24px}
.ap-shot .ap-win{transform:rotate(-1.5deg)}
.ap-mini{position:absolute;left:0;bottom:0;width:62%;height:auto;border-radius:10px;box-shadow:0 14px 34px rgba(43,35,32,.25);transform:rotate(1deg)}

/* 기기별 네 칸 */
.ap-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px;scroll-margin-top:20px}
.ap-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 16px 20px;border:1px solid var(--line);background:#fff}
.ap-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.ap-ic{width:40px;height:40px;color:var(--ink)}
.ap-card.on .ap-ic{color:var(--brand)}
.ap-card h2{margin:12px 0 2px;font-size:18px;font-weight:800}
.ap-sub{margin:0 0 16px;font-size:13.5px;color:var(--mute)}
.ap-btn{display:block;width:100%;padding:11px 0;border:1px solid var(--ink);font-size:14.5px;font-weight:700;color:var(--ink)}
.ap-btn:hover,.ap-card.on .ap-btn{background:var(--brand);border-color:var(--brand);color:#fff}
.ap-req{margin:10px 0 0;font-size:12.5px;color:var(--mute);word-break:keep-all}
.ap-ver{margin:14px 0 0;font-size:13px;color:var(--mute);text-align:center}

/* 화면 둘러보기 */
.ap-feat{margin:56px 0 0;text-align:center}
.ap-feat h2{margin:0 0 16px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.ap-tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:22px}
.ap-tabs button{padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:14.5px;font-weight:700;color:var(--sub)}
.ap-tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.ap-pane .ap-win{max-width:820px;margin:0 auto}
.ap-pane-mini .ap-win{max-width:560px}
.ap-pane p{max-width:560px;margin:16px auto 0;font-size:15px;color:var(--sub);word-break:keep-all}

/* 휴대폰으로 받기 (QR) */
.ap-phone{display:flex;align-items:center;gap:28px;margin:44px 0 0;padding:24px 28px;background:var(--band)}
.ap-qr{flex:none;width:148px;height:148px;padding:8px;background:#fff}
.ap-qr img,.ap-qr canvas{display:block;width:132px !important;height:132px !important}
.ap-phone h2{margin:0 0 6px;font-size:18px;font-weight:800}
.ap-phone p{margin:0;font-size:14.5px;color:var(--sub);word-break:keep-all}
.ap-phone .ap-link{margin-top:8px;font-size:13px;color:var(--mute);word-break:break-all}

/* 설치 도움말 */
.ap-help{margin:44px 0 70px}
.ap-help h2{margin:0 0 12px;font-size:18px;font-weight:800}
.ap-help details{border-top:1px solid var(--line)}
.ap-help details:last-of-type{border-bottom:1px solid var(--line)}
.ap-help summary{padding:14px 4px;font-size:15px;font-weight:700;cursor:pointer}
.ap-help ol{margin:0 0 16px;padding-left:24px;font-size:14.5px;color:var(--sub);line-height:1.8}
.ap-ask{margin:14px 0 0;font-size:14px;color:var(--mute)}
.ap-ask a{color:var(--brand-dk);font-weight:600}

@media (max-width:1023px){
  .ap-all{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-hero-in{grid-template-columns:1fr;gap:36px;text-align:center}
  .ap-name{justify-content:center}
  .ap-lead{margin-left:auto;margin-right:auto}
  .ap-shot{max-width:560px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .ap-hero{padding:32px 0 40px}
  .ap-shot{padding-left:12px;padding-bottom:26px}
  .ap-feat{margin-top:40px}
  .ap-tabs button{padding:8px 13px;font-size:13.5px}
  .ap-big{padding:14px 24px;font-size:17px}
  .ap-all{gap:10px;margin-top:28px}
  .ap-card{padding:18px 10px 14px}
  .ap-phone{display:none} /* 휴대폰에서는 QR 필요 없음 */
}