/* =========================================================
   핵심 역량 카드 — B안 '투톤 컬러 블록'
   그라데이션 없이 단색 면 + 큰 번호 + 흰 아이콘 타일
   등장: 카드 순차 상승 → 색 면이 아래에서 차오름 → 번호·아이콘·본문·태그 순서
   ========================================================= */
.cxb-grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:left}
.cxb-edu{--c:#2A5FE0;--t:#EAF0FF;--t2:#DCE6FF}
.cxb-ai{--c:#C94C72;--t:#FCEBF0;--t2:#F9DCE5}
.cxb-data{--c:#1380B0;--t:#E3F3FA;--t2:#D2ECF7}
.cxb-ptl{--c:#5158DE;--t:#EEEEFD;--t2:#E1E2FB}

.cxb-card{position:relative;display:flex;flex-direction:column;min-height:440px;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(19,37,74,.06);transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s}

/* 상단 단색 블록 */
.cxb-blk{position:relative;height:178px;display:flex;align-items:flex-end;padding:0 26px 22px;color:var(--c);isolation:isolate}
.cxb-blk::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--t);transition:background .4s}
.cxb-en{position:absolute;left:26px;top:24px;font-size:12px;font-weight:800;letter-spacing:.16em}
.cxb-no{position:absolute;right:22px;top:12px;font-size:66px;font-weight:900;line-height:1;letter-spacing:-.04em;opacity:.16;transition:opacity .4s,transform .5s cubic-bezier(.2,.75,.2,1)}
.cxb-ic{width:64px;height:64px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(19,37,74,.08);transition:background .35s,color .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.cxb-ic svg{width:30px;height:30px}

/* 하단 본문 */
.cxb-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.cxb-nm{font-size:14px;font-weight:800;color:var(--c)}
.cxb-card h3{margin:10px 0 0;font-size:clamp(21px,1.72vw,25px);line-height:1.38;letter-spacing:-.04em;color:#13254A}
.cxb-card p{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:#55617C}
.cxb-tags{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:6px}
.cxb-tags span{padding:6px 11px;border-radius:99px;border:1px solid #DFE5F0;background:#fff;font-size:12px;font-weight:700;color:#4A5878;white-space:nowrap;transition:border-color .3s,color .3s}

/* 마우스 오버 */
.cxb-card.visible:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(19,37,74,.12)}
.cxb-card:hover .cxb-blk::before{background:var(--t2)}
.cxb-card:hover .cxb-no{opacity:.3;transform:translateX(-6px)}
.cxb-card:hover .cxb-ic{background:var(--c);color:#fff;transform:rotate(-6deg) scale(1.04)}
.cxb-card:hover .cxb-tags span{border-color:color-mix(in srgb,var(--c) 35%,#fff);color:var(--c)}

/* ---------- 등장 애니메이션 ---------- */
.concept-home .cxb-card.reveal{opacity:0;transform:translateY(48px);filter:none;transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s}
.concept-home .cxb-card.reveal.visible{opacity:1;transform:none;animation:cxbIn .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.13s) backwards}
.cxb-card.visible .cxb-blk::before{animation:cxbFill .75s cubic-bezier(.65,0,.35,1) calc(var(--i)*.13s + .2s) backwards}
.cxb-card.visible .cxb-en{animation:cxbFade .5s ease calc(var(--i)*.13s + .55s) backwards}
.cxb-card.visible .cxb-no{animation:cxbNo .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.13s + .5s) backwards}
.cxb-card.visible .cxb-ic{animation:cxbPop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*.13s + .65s) backwards}
.cxb-card.visible .cxb-body>*:not(.cxb-tags){animation:cxbUp .6s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.13s + .55s) backwards}
.cxb-card.visible .cxb-tags span{animation:cxbPop .45s cubic-bezier(.34,1.56,.64,1) backwards}
.cxb-card.visible .cxb-tags span:nth-child(1){animation-delay:calc(var(--i)*.13s + .8s)}
.cxb-card.visible .cxb-tags span:nth-child(2){animation-delay:calc(var(--i)*.13s + .87s)}
.cxb-card.visible .cxb-tags span:nth-child(3){animation-delay:calc(var(--i)*.13s + .94s)}

@keyframes cxbIn{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes cxbFill{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cxbFade{from{opacity:0}to{opacity:1}}
@keyframes cxbNo{from{opacity:0;transform:translateY(22px)}to{opacity:.16;transform:none}}
@keyframes cxbPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes cxbUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 반응형 */
@media(max-width:1180px){.cxb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .cxb-grid{grid-template-columns:1fr;margin-top:40px;gap:16px}
 .cxb-card{min-height:0}
 .cxb-blk{height:140px}
 .cxb-no{font-size:54px}
}
/* 움직임 줄이기 설정 존중 */
@media(prefers-reduced-motion:reduce){
 .concept-home .cxb-card.reveal{opacity:1;transform:none}
 .cxb-card,.cxb-card *,.cxb-card *::before{animation:none!important;transition:none!important}
}
/* '솔루션 보기' 안내: 글자와 화살표를 가운데 한 줄 축으로 */
.cx .cx-cue{display:flex!important;flex-direction:column;align-items:center;gap:6px;width:max-content;margin-left:auto!important;margin-right:auto!important;text-align:center!important}