/*
 * ConnectPie Design System – BASE (v1.0)
 * 역할: 디자인 토큰(색/폰트) + 공통 "장식" 스타일 (타이포그래피, 버튼, 카드, 컬럼, CTA 등)
 * 규칙:
 *  - 레이아웃(너비, 방향, gap, padding, 정렬, 열 수)은 Elementor JSON/에디터가 담당합니다. 여기서는 건드리지 않습니다.
 *  - 모든 규칙은 ".elementor" 아래로 범위를 제한해 Astra/Elementor 기본 스타일을 !important 없이 이깁니다.
 *  - Elementor 위젯의 .elementor-widget-container 래퍼가 있든(구 마크업) 없든(최적화 마크업) 동작하도록 위젯 래퍼에 직접 지정합니다.
 */
:root{
  --cp-bg:#F7F8FB;--cp-card:#FFFFFF;--cp-ink:#0F1B2D;--cp-mut:#46536A;--cp-line:#DDE3EE;
  --cp-blue:#2450D6;--cp-navy:#0F1B2D;--cp-on-navy:#B8C4DA;--cp-navy-hi:#8FAAFF;
  --cp-t:#0E7490;--cp-c:#C2410C;--cp-v:#5B45D6;
  --cp-pt:#DDF3F8;--cp-pc:#FDE8E2;--cp-pv:#ECE8FF;
  --cp-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body.cp-site{background-color:var(--cp-bg);color:var(--cp-ink);font-family:var(--cp-font);overflow-x:hidden}

/* ---------- 섹션 배경 (섹션 컨테이너의 CSS 클래스) ---------- */
.elementor .cp-bg-gray{background-color:var(--cp-bg)}
.elementor .cp-bg-white{background-color:var(--cp-card)}
.elementor .cp-bg-navy{background-color:var(--cp-navy);color:#fff}
.elementor .cp-bg-lav{background-color:var(--cp-pv)}

/* ---------- 강조색: 위젯/컨테이너에 cp-kt / cp-kc / cp-kv ---------- */
.elementor .cp-kt{--cp-accent:var(--cp-t)}
.elementor .cp-kc{--cp-accent:var(--cp-c)}
.elementor .cp-kv{--cp-accent:var(--cp-v)}
/* 제목 안 강조 단어: <span class="cp-ct">…</span> (teal) / cp-cc (coral) / cp-cv (violet) */
.cp-ct{color:var(--cp-t)}.cp-cc{color:var(--cp-c)}.cp-cv{color:var(--cp-v)}

/* ---------- 제목 ---------- */
.elementor .cp-h1 .elementor-heading-title,
.elementor .cp-h2 .elementor-heading-title,
.elementor .cp-h3 .elementor-heading-title{font-family:var(--cp-font);color:var(--cp-ink);margin:0;padding:0}
.elementor .cp-h1 .elementor-heading-title{font-size:clamp(38px,5.4vw,60px);line-height:1.06;letter-spacing:-.025em;font-weight:800}
.elementor .cp-h2 .elementor-heading-title{font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:800}
.elementor .cp-h3 .elementor-heading-title{font-size:19px;line-height:1.4;font-weight:700;letter-spacing:0}
.elementor .cp-h3-lg .elementor-heading-title{font-size:24px;line-height:1.3}
.elementor .cp-h2-form .elementor-heading-title{font-size:24px;line-height:1.2}
.elementor .cp-bg-navy .cp-h1 .elementor-heading-title,
.elementor .cp-bg-navy .cp-h2 .elementor-heading-title,
.elementor .cp-bg-navy .cp-h3 .elementor-heading-title,
.elementor .cp-cta-grad .cp-h2 .elementor-heading-title{color:#fff}

/* 소제목(라인 + 대문자) / 라인 없는 변형(cp-tag-nl) */
.elementor .cp-tag .elementor-heading-title{display:flex;align-items:center;gap:10px;font-family:var(--cp-font);font-size:12px;line-height:1.55;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-accent,var(--cp-mut));margin:0;padding:0}
.elementor .cp-tag .elementor-heading-title::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
.elementor .cp-tag-nl .elementor-heading-title{font-size:11px}
.elementor .cp-tag-nl .elementor-heading-title::before{display:none}
.elementor .cp-tag-c .elementor-heading-title{justify-content:center}
.elementor .cp-bg-navy .cp-tag .elementor-heading-title{color:var(--cp-navy-hi)}
.elementor .cp-cta-grad .cp-tag .elementor-heading-title{color:#fff;opacity:.85}
/* 카드 안 작은 라벨 / 번호 */
.elementor .cp-sm .elementor-heading-title{font-family:var(--cp-font);font-size:11px;line-height:1.55;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-accent,var(--cp-mut));margin:0;padding:0}
.elementor .cp-nm-lg .elementor-heading-title{font-size:16px;letter-spacing:0}
.elementor .cp-nm .elementor-heading-title{font-family:var(--cp-font);font-size:12px;line-height:1.55;font-weight:700;letter-spacing:.1em;color:var(--cp-accent,var(--cp-t));margin:0;padding:0}

/* ---------- 본문 (Text Editor 위젯) ---------- */
.elementor .cp-text{font-family:var(--cp-font);font-size:16px;line-height:1.55;color:var(--cp-mut)}
.elementor .cp-text p{margin:0;padding:0}
.elementor .cp-text.cp-lead{font-size:18px;max-width:560px}
.elementor .cp-text.cp-narrow{max-width:460px}
.elementor .cp-text.cp-big{font-size:18px}
.elementor .cp-text.cp-ink{color:var(--cp-ink)}
.elementor .cp-text.cp-ink strong{font-weight:700}
.elementor .cp-bg-navy .cp-text{color:var(--cp-on-navy)}
.elementor .cp-chips p{display:flex;flex-wrap:wrap;gap:0 18px;font-size:14px}

/* ---------- 버튼 (Button 위젯) ---------- */
.elementor .cp-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:10px;border:1px solid var(--cp-ink);background-color:var(--cp-ink);color:#fff;fill:#fff;font-family:var(--cp-font);font-size:15px;font-weight:600;line-height:1.55;letter-spacing:normal;text-transform:none;text-decoration:none;box-shadow:none;transition:transform .2s ease}
.elementor .cp-btn .elementor-button:hover,.elementor .cp-btn .elementor-button:focus{transform:translateY(-2px);background-color:var(--cp-ink);color:#fff}
.elementor .cp-btn-o .elementor-button{background-color:transparent;color:var(--cp-ink)}
.elementor .cp-btn-o .elementor-button:hover,.elementor .cp-btn-o .elementor-button:focus{background-color:transparent;color:var(--cp-ink)}
.elementor .cp-btn-w .elementor-button{background-color:#fff;border-color:#fff;color:var(--cp-ink)}
.elementor .cp-btn-w .elementor-button:hover,.elementor .cp-btn-w .elementor-button:focus{background-color:#fff;color:var(--cp-ink)}

/* 텍스트 링크형 버튼 ("Explore the ERP →"): 카드/행 전체를 클릭 영역으로 확장 */
.elementor .cp-go .elementor-button{background:none;border:0;border-radius:0;padding:0;min-height:0;font-family:var(--cp-font);font-size:14px;font-weight:600;line-height:1.55;letter-spacing:normal;text-transform:none;white-space:nowrap;color:var(--cp-accent,var(--cp-ink));fill:currentColor;box-shadow:none}
.elementor .cp-go .elementor-button:hover,.elementor .cp-go .elementor-button:focus{background:none;color:var(--cp-accent,var(--cp-ink));text-decoration:underline}
.elementor .cp-go-lg .elementor-button{font-size:16px;font-weight:700}
body:not(.elementor-editor-active) .elementor .cp-go .elementor-button::after{content:"";position:absolute;inset:0;z-index:1}
.elementor .cp-back .elementor-button{background:none;border:0;border-radius:0;padding:0;min-height:0;font-family:var(--cp-font);font-size:13px;font-weight:400;line-height:1.55;letter-spacing:normal;text-transform:none;color:var(--cp-mut);fill:currentColor;box-shadow:none}
.elementor .cp-back .elementor-button:hover,.elementor .cp-back .elementor-button:focus{background:none;color:var(--cp-ink)}

/* ---------- 카드 ---------- */
.elementor .cp-card{position:relative;background-color:var(--cp-card);border:1px solid var(--cp-line);border-radius:18px;transition:transform .25s ease,box-shadow .25s ease}
.elementor .cp-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -24px rgba(15,27,45,.4)}
.elementor .cp-card-v{background-color:var(--cp-pv);border-color:var(--cp-v)}
.elementor .cp-card-t{background-color:var(--cp-pt)}
.elementor .cp-card-c{background-color:var(--cp-pc)}
.elementor .cp-bg-white .cp-card:not(.cp-card-v):not(.cp-card-t):not(.cp-card-c){background-color:var(--cp-bg)}
.cp-mn{box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:64px;background:var(--cp-card);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.55;color:var(--cp-mut)}
.cp-mn i{flex:1;height:34px;border-radius:6px;background:var(--cp-line)}
.cp-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:#FDE4E4;color:#B42318;white-space:nowrap}

/* ---------- 세로선 컬럼 / 선으로 나뉜 격자 ---------- */
.elementor .cp-col{border-left:1px solid var(--cp-line)}
.elementor .cp-grid-lines{background-color:var(--cp-line);border:1px solid var(--cp-line)}
.elementor .cp-cell{background-color:var(--cp-card)}
.elementor .cp-bg-white .cp-cell{background-color:var(--cp-bg)}

/* ---------- CTA ---------- */
.elementor .cp-cta-grad{border-radius:24px;background:linear-gradient(120deg,#0E7490,#5B45D6);color:#fff}
.elementor .cp-cta-card{border-radius:28px;background-color:var(--cp-card);border:1px solid var(--cp-line);box-shadow:0 20px 50px -30px rgba(15,27,45,.35)}
.elementor .cp-bg-white .cp-cta-card{background-color:var(--cp-bg)}
.elementor .cp-panel{border-radius:28px;background-color:var(--cp-card);border:1px solid var(--cp-line)}

/* ---------- 체크리스트 / 타임라인 / 스트립 (Text Editor 위젯 안의 목록) ---------- */
.elementor .cp-checks ul{list-style:none;margin:0;padding:0}
.elementor .cp-checks li{position:relative;margin:0;padding:16px 0 16px 34px;border-bottom:1px solid #2E3F5C;color:#fff;font-size:16px;line-height:1.55}
.elementor .cp-checks li::before{content:"";position:absolute;left:4px;top:23px;width:10px;height:6px;border-left:2px solid var(--cp-navy-hi);border-bottom:2px solid var(--cp-navy-hi);transform:rotate(-45deg)}

.elementor .cp-tl ol{list-style:none;margin:0;padding:0;counter-reset:cptl}
.elementor .cp-tl li{counter-increment:cptl;position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:18px;margin:0;padding:0 0 30px}
.elementor .cp-tl li::before{content:counter(cptl);grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;border:1.5px solid #3C5478;background:#15253D;color:#8FD8F0;display:grid;place-items:center;font-weight:700;position:relative;z-index:1}
.elementor .cp-tl li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:1.5px;background:#2E3F5C}
.elementor .cp-tl li strong{display:block;color:#fff;font-size:17px;font-weight:700;line-height:1.4}
.elementor .cp-tl li span{display:block;color:var(--cp-on-navy);font-size:14px;line-height:1.55}

.elementor .cp-strip-text p{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1.55;color:#fff;text-align:center}

/* ---------- 스크롤 등장 효과 (JS가 .cp-js 를 붙이고, Elementor 편집기에서는 동작하지 않음) ---------- */
.cp-js .cp-rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.cp-js .cp-rv.cp-in{opacity:1;transform:none}
.cp-js .elementor .cp-rv.cp-in.cp-card:hover{transform:translateY(-6px)}

/* ---------- Elementor Mobile (≤767px) ---------- */
@media (max-width:767px){
  .elementor .cp-text.cp-lead{font-size:16px}
  .elementor .cp-strip-text p{gap:10px 16px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .cp-js .cp-rv{opacity:1;transform:none;transition:none}
  .elementor .cp-card,.elementor .cp-btn .elementor-button{transition:none}
}

/* 섹션 공통 훅 (cp-sec): 배경 클래스 cp-bg-* 와 함께 모든 최상위 섹션에 붙습니다 */
.elementor .cp-sec{position:relative}

/* ---- Elementor 편집기 전용 ----
   편집기는 그리드 컨테이너 끝에 "빈 칸(+)" 요소를 하나 더 넣는데, auto-fit 열에서는 이것이 새 열이 되어
   레이아웃이 밀립니다. 실제 사이트(프론트)에는 존재하지 않으며, 여기서는 칸을 차지하지 않게만 만듭니다. */
.elementor-editor-active .elementor .e-grid:has(> .elementor-element) > .elementor-empty-view.elementor-empty-view,
.elementor-editor-active .elementor .e-grid:has(> .e-con-inner > .elementor-element) > .e-con-inner > .elementor-empty-view.elementor-empty-view{
  position:absolute;grid-area:auto;width:0;height:0;min-width:0;min-height:0;overflow:hidden;visibility:hidden}

/* 서비스 카드 안의 미니 시스템 화면 (Home > ERP at the centre) */
.cp-mn-k{display:grid;grid-template-columns:repeat(3,1fr)}
.cp-mn-k>div{min-width:0;padding:6px 8px;border:1px solid #E1E6EF;border-radius:9px;font-size:10px;line-height:1.35;color:var(--cp-mut)}
.cp-mn-k small{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-mn-k b{display:block;font-size:16px;line-height:1.3;color:var(--cp-ink)}
.cp-mn-inv{justify-content:space-between}
.cp-mn-inv>span{display:block;min-width:0;flex:1}
.cp-mn-inv b{font-size:12px;color:var(--cp-ink)}
.cp-mn-inv>span b,.cp-mn-inv small{display:block}
.cp-mn-inv small{font-size:10px;color:var(--cp-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-mn-inv em{font-style:normal;font-weight:700;font-size:13px;color:var(--cp-ink);white-space:nowrap}
.cp-mn-inv .cp-pill{font-size:10px}