/*
 * ConnectPie Design System – SHARED COMPONENTS (v1.0)
 * 여러 페이지에서 쓰는 "그래픽 컴포넌트"(HTML 위젯 안의 마크업) 스타일입니다.
 * 모든 클래스는 cp- 접두어로 범위를 제한해 Astra/Elementor 기본 스타일과 충돌하지 않습니다.
 */
.cp-vis{position:relative;padding:28px;font-family:var(--cp-font);color:var(--cp-ink)}
.cp-vis-tall{min-height:320px}
.cp-vis::before,.cp-vis::after{content:"";position:absolute;border-radius:50%;z-index:0}
.cp-vis::before{width:260px;height:260px;background:var(--cp-pt);top:-10px;right:10px}
.cp-vis::after{width:170px;height:170px;background:rgba(246,215,122,.33);bottom:-10px;left:0}
.cp-smp{position:absolute;top:0;right:0;z-index:3;font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.55;border:1px solid var(--cp-line);background:var(--cp-card);border-radius:99px;padding:4px 12px;color:var(--cp-mut)}

/* 대시보드 목업 */
.cp-mock{position:relative;z-index:1;display:flex;gap:10px;padding:12px;background:#0F1B2D;border-radius:18px;box-shadow:0 30px 60px -30px rgba(15,27,45,.53);color:#0F1B2D}
.cp-sd{width:60px;display:flex;flex-direction:column;gap:9px;padding:8px 4px}
.cp-sd i{height:7px;border-radius:4px;background:#2E3F5C}
.cp-sd i.on{background:#5B82FF}
.cp-scr{flex:1;min-width:0;background:#fff;border-radius:12px;padding:16px}
.cp-scr-t{display:block;font-size:15px;line-height:1.4}
.cp-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.cp-kp div{border:1px solid #E1E6EF;border-radius:9px;padding:8px;font-size:11px;line-height:1.4;color:#46536A}
.cp-kp b{display:block;font-size:18px;color:#0F1B2D}
.cp-rw{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #E8ECF3;font-size:12px;line-height:1.55;color:#0F1B2D}
.cp-pl{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:#FDE4E4;color:#B42318;white-space:nowrap}
.cp-pl-g{background:#DDF6E8;color:#146C3B}
.cp-pl-a{background:#FFF0CC;color:#8A5A00}

/* 떠 있는 카드 */
.cp-fl{position:absolute;z-index:2;padding:9px 14px;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:12px;box-shadow:0 12px 30px -12px rgba(15,27,45,.33);font-size:12px;line-height:1.55;color:var(--cp-ink);animation:cp-float 6s ease-in-out infinite}
.cp-fl b{display:block;font-size:13px}
@keyframes cp-float{50%{transform:translateY(-10px)}}
.cp-lbl{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-t)}
.cp-fake-btn{margin-top:10px;padding:12px 22px;border-radius:10px;background:var(--cp-ink);color:#fff;font-size:15px;font-weight:600;line-height:1.55;text-align:center}

@media (max-width:767px){
  .cp-vis{padding:40px 4px 36px}
  .cp-vis-tall{min-height:380px}
  .cp-vis .cp-fl{padding:7px 10px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.cp-fl{animation:none}}