/* ======================================================
   CEO SHIELD MOBILE OLD CARD V5.0
   대상: 전화 / 문자 / 카카오 / AI녹음 / 업로드이력

   기능 이벤트는 수정하지 않음.
   메모/푸시/상세보기 수정하지 않음.
   ====================================================== */


/* ----- 공통 old_mobile 카드 ----- */

.ceo-old-card-v50 {
    position:relative !important;

    min-width:0 !important;
    min-height:112px !important;
    height:112px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    padding:14px 13px 12px !important;

    border-radius:13px !important;
    border:1px solid rgba(255,255,255,.18) !important;

    overflow:hidden !important;

    text-align:left !important;
    text-decoration:none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 7px 16px rgba(0,0,0,.16) !important;

    cursor:pointer !important;

    transition:
        transform .12s ease,
        filter .12s ease !important;
}


.ceo-old-card-v50:active {
    transform:scale(.975) !important;
    filter:brightness(1.05) !important;
}


/* ----- 카드 컬러: old_mobile 기준 ----- */

.ceo-old-card-v50.phone {
    background:
        linear-gradient(
            145deg,
            #4caf43 0%,
            #35923b 100%
        ) !important;
}


.ceo-old-card-v50.sms {
    background:
        linear-gradient(
            145deg,
            #5873de 0%,
            #4159c4 100%
        ) !important;
}


.ceo-old-card-v50.kakao {
    background:
        linear-gradient(
            145deg,
            #fbd233 0%,
            #e5b813 100%
        ) !important;

    border-color:
        rgba(255,221,76,.7) !important;
}


.ceo-old-card-v50.ai {
    background:
        linear-gradient(
            145deg,
            #d95a49 0%,
            #b94135 100%
        ) !important;
}


.ceo-old-card-v50.history {
    background:
        linear-gradient(
            145deg,
            #54b1be 0%,
            #398d99 100%
        ) !important;
}


/* ----- 제목 ----- */

.ceo-old-card-v50
.ceo-v50-title {
    position:relative !important;
    z-index:3 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;

    font-size:13px !important;
    line-height:1.15 !important;

    font-weight:950 !important;

    letter-spacing:-.2px !important;
}


/* 카카오만 검정 텍스트 */
.ceo-old-card-v50.kakao
.ceo-v50-title {
    color:#161300 !important;
}


/* ----- 작은 설명 ----- */

.ceo-old-card-v50
.ceo-v50-sub {
    position:relative !important;
    z-index:3 !important;

    display:block !important;

    margin:4px 0 0 !important;
    padding:0 !important;

    color:rgba(255,255,255,.82) !important;

    font-size:8px !important;
    line-height:1.2 !important;

    font-weight:850 !important;
}


.ceo-old-card-v50.kakao
.ceo-v50-sub {
    color:rgba(36,28,0,.80) !important;
}


/* ----- old_mobile 아이콘 박스 ----- */

.ceo-old-card-v50
.ceo-v50-icon {
    position:absolute !important;

    left:13px !important;
    bottom:12px !important;

    width:42px !important;
    height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    border-radius:11px !important;

    background:
        rgba(255,255,255,.17) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.16) !important;

    font-size:22px !important;
    line-height:1 !important;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;

    z-index:4 !important;
}


/* 카카오 아이콘의 광택 */
.ceo-old-card-v50.kakao
.ceo-v50-icon {
    background:
        radial-gradient(
            circle at 35% 30%,
            #ffe783 0%,
            #ffd03c 38%,
            #dba814 100%
        ) !important;
}


/* ----- 우측 old_mobile 화살표 ----- */

.ceo-old-card-v50
.ceo-v50-arrow {
    position:absolute !important;

    right:11px !important;
    bottom:22px !important;

    z-index:5 !important;

    color:#ffffff !important;

    font-size:23px !important;
    line-height:1 !important;

    font-weight:500 !important;

    pointer-events:none !important;
}


.ceo-old-card-v50.kakao
.ceo-v50-arrow {
    color:#181400 !important;
}


/* ----- 기존 아이콘/텍스트는 숨김 ----- */

.ceo-old-card-v50
.ceo-v50-original-icon {
    display:none !important;
}


/* 과거 패치 잔재 */
.ceo-old-card-v50
.ceo-v46-icon,

.ceo-old-card-v50
.ceo-old-icon-v47,

.ceo-old-card-v50
.ceo-v48-old-icon,

.ceo-old-card-v50
.ceo-old-exact-icon-v49 {
    display:none !important;
}


/*
 기존 버튼 안의 제목/설명은 DOM에서 숨기고
 V5.0 전용 제목/설명을 사용.
*/
.ceo-old-card-v50
.ceo-v50-original-label {
    display:none !important;
}


/* ----- 상단 3개 카드 영역 ----- */

.ceo-v50-top-group {
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:10px !important;

    width:100% !important;

    margin:0 !important;

    box-sizing:border-box !important;
}


/*
 푸시는 old_mobile 이식 대상이 아니므로
 기존 푸시 버튼이 같은 부모에 있을 경우
 그룹 밖으로 유지.
*/
.ceo-v50-push-keep {
    grid-column:auto !important;

    min-height:unset !important;
    height:auto !important;
}


/* ----- 하단 AI / 업로드 영역 ----- */

.ceo-v50-bottom-group {
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:10px !important;

    width:100% !important;

    box-sizing:border-box !important;
}


.ceo-v50-bottom-group
.ceo-old-card-v50 {
    min-height:96px !important;
    height:96px !important;
}


/*
 상세보기는 현재 mobile 형태 그대로.
 grid 한 칸만 사용.
*/
.ceo-v50-bottom-group
.ceo-v50-detail-keep {
    min-height:96px !important;
}


/* ----- 너무 좁은 모바일 ----- */

@media(max-width:430px) {

    .ceo-old-card-v50 {
        min-height:108px !important;
        height:108px !important;

        padding:
            12px 10px 10px !important;
    }

    .ceo-old-card-v50
    .ceo-v50-title {
        font-size:12px !important;
    }

    .ceo-old-card-v50
    .ceo-v50-sub {
        font-size:7px !important;
    }

    .ceo-old-card-v50
    .ceo-v50-icon {
        left:10px !important;
        bottom:10px !important;

        width:38px !important;
        height:38px !important;

        font-size:20px !important;
    }

    .ceo-old-card-v50
    .ceo-v50-arrow {
        right:9px !important;
        bottom:18px !important;

        font-size:21px !important;
    }

    .ceo-v50-top-group,
    .ceo-v50-bottom-group {
        gap:7px !important;
    }

    .ceo-v50-bottom-group
    .ceo-old-card-v50 {
        min-height:92px !important;
        height:92px !important;
    }
}

/* =====================================================
   CEO SHIELD V5.0.1
   문자 카드 BLUE COLOR OVERRIDE
   ===================================================== */

.ceo-old-card-v50.sms {
    background:
        linear-gradient(
            145deg,
            #5f7cf0 0%,
            #4965d8 52%,
            #3b53bd 100%
        ) !important;

    border-color:
        rgba(129,155,255,.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 16px rgba(28,47,120,.25) !important;
}

.ceo-old-card-v50.sms .ceo-v50-icon {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.26),
            rgba(255,255,255,.13)
        ) !important;

    border-color:
        rgba(255,255,255,.16) !important;
}

.ceo-old-card-v50.sms .ceo-v50-title {
    color:#ffffff !important;
}

.ceo-old-card-v50.sms .ceo-v50-sub {
    color:#eef2ff !important;
}

.ceo-old-card-v50.sms .ceo-v50-arrow {
    color:#ffffff !important;
}

/* =====================================================
   CEO SHIELD V5.0.2
   SMS BLUE FORCE OVERRIDE
   ===================================================== */

.ceo-old-card-v50.sms,
.ceo-old-card-v50.ceo-v50-sms-force,
button.ceo-v50-sms-force,
a.ceo-v50-sms-force,
[role="button"].ceo-v50-sms-force {
    background:
        linear-gradient(
            145deg,
            #5f7df4 0%,
            #4969e6 52%,
            #3654c9 100%
        ) !important;

    border-color:
        rgba(125,154,255,.82) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 18px rgba(38,67,180,.28) !important;
}

.ceo-v50-sms-force .ceo-v50-title {
    color:#ffffff !important;
}

.ceo-v50-sms-force .ceo-v50-sub {
    color:#eef3ff !important;
}

.ceo-v50-sms-force .ceo-v50-icon {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.13)
        ) !important;

    border-color:
        rgba(255,255,255,.18) !important;
}

.ceo-v50-sms-force .ceo-v50-arrow {
    color:#ffffff !important;
}


/* =====================================================
   CEO SHIELD MOBILE CARD LAYOUT V5.1
   문자 / 푸시 / 상세보기
   ===================================================== */


/* -----------------------------------------------------
   문자
   제목 위 / 설명 위 / 아이콘 아래 / > 우측
   ----------------------------------------------------- */

.ceo-old-card-v50.sms,
.ceo-v50-sms-force {

    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    padding:
        14px 13px 12px !important;

    background:
        linear-gradient(
            145deg,
            #617df1 0%,
            #4c68dc 50%,
            #3f56c7 100%
        ) !important;

    border:
        1px solid
        rgba(137,160,255,.75) !important;

    overflow:hidden !important;
}


.ceo-old-card-v50.sms .ceo-v50-title,
.ceo-v50-sms-force .ceo-v50-title {

    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:950 !important;

    line-height:1.15 !important;

    z-index:5 !important;
}


.ceo-old-card-v50.sms .ceo-v50-sub,
.ceo-v50-sms-force .ceo-v50-sub {

    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    display:block !important;

    margin-top:4px !important;

    color:#eef2ff !important;

    font-size:8px !important;
    font-weight:800 !important;

    line-height:1.2 !important;

    z-index:5 !important;
}


.ceo-old-card-v50.sms .ceo-v50-icon,
.ceo-v50-sms-force .ceo-v50-icon {

    position:absolute !important;

    left:13px !important;
    top:auto !important;
    right:auto !important;
    bottom:12px !important;

    width:42px !important;
    height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:11px !important;

    background:
        rgba(255,255,255,.18) !important;

    border:
        1px solid
        rgba(255,255,255,.14) !important;

    font-size:22px !important;

    z-index:5 !important;
}


.ceo-old-card-v50.sms .ceo-v50-arrow,
.ceo-v50-sms-force .ceo-v50-arrow {

    position:absolute !important;

    left:auto !important;
    top:auto !important;

    right:10px !important;
    bottom:20px !important;

    display:block !important;

    color:#fff !important;

    font-size:25px !important;
    font-weight:500 !important;

    line-height:1 !important;

    z-index:6 !important;
}



/* -----------------------------------------------------
   푸시
   전화/문자/카카오와 동일 구조
   ----------------------------------------------------- */

.ceo-v51-push {

    position:relative !important;

    min-width:0 !important;
    min-height:112px !important;
    height:112px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    padding:
        14px 13px 12px !important;

    border-radius:13px !important;

    background:
        linear-gradient(
            145deg,
            #913ed1 0%,
            #7022ac 52%,
            #50137d 100%
        ) !important;

    border:
        1px solid
        #a84cf0 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.15),
        0 7px 16px
        rgba(38,8,62,.25) !important;

    overflow:hidden !important;

    text-align:left !important;

    cursor:pointer !important;
}


.ceo-v51-push-title {

    display:block !important;

    position:relative !important;

    margin:0 !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:950 !important;

    line-height:1.15 !important;

    z-index:5 !important;
}


.ceo-v51-push-sub {

    display:block !important;

    position:relative !important;

    margin-top:4px !important;

    color:
        rgba(255,255,255,.84) !important;

    font-size:8px !important;
    font-weight:800 !important;

    line-height:1.2 !important;

    z-index:5 !important;
}


.ceo-v51-push-icon {

    position:absolute !important;

    left:13px !important;
    bottom:12px !important;

    width:42px !important;
    height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:11px !important;

    background:
        rgba(255,255,255,.16) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    font-size:22px !important;

    z-index:5 !important;
}


.ceo-v51-push-arrow {

    position:absolute !important;

    right:10px !important;
    bottom:20px !important;

    color:#fff !important;

    font-size:25px !important;
    font-weight:500 !important;

    line-height:1 !important;

    z-index:6 !important;
}



/* -----------------------------------------------------
   상세보기
   AI녹음/업로드이력과 같은 구조
   ----------------------------------------------------- */

.ceo-v51-detail {

    position:relative !important;

    min-width:0 !important;
    min-height:96px !important;
    height:96px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    padding:
        13px 12px 10px !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            145deg,
            #4668bf 0%,
            #304f9c 52%,
            #243e7d 100%
        ) !important;

    border:
        1px solid
        rgba(116,151,239,.75) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12),
        0 6px 14px
        rgba(8,20,55,.20) !important;

    overflow:hidden !important;

    text-align:left !important;

    cursor:pointer !important;
}


.ceo-v51-detail-title {

    display:block !important;

    position:relative !important;

    margin:0 !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:950 !important;

    line-height:1.15 !important;

    z-index:5 !important;
}


.ceo-v51-detail-sub {

    display:block !important;

    position:relative !important;

    margin-top:4px !important;

    color:
        rgba(255,255,255,.82) !important;

    font-size:8px !important;
    font-weight:800 !important;

    line-height:1.2 !important;

    z-index:5 !important;
}


.ceo-v51-detail-icon {

    position:absolute !important;

    left:12px !important;
    bottom:10px !important;

    width:38px !important;
    height:38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:10px !important;

    background:
        rgba(255,255,255,.15) !important;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    color:#fff !important;

    font-size:20px !important;

    z-index:5 !important;
}


.ceo-v51-detail-arrow {

    position:absolute !important;

    right:10px !important;
    bottom:18px !important;

    color:#fff !important;

    font-size:24px !important;
    font-weight:500 !important;

    line-height:1 !important;

    z-index:6 !important;
}



/* -----------------------------------------------------
   V5.1에서 생성한 카드의 기존 내부 표시 숨김
   기능 element 자체는 제거하지 않음
   ----------------------------------------------------- */

.ceo-v51-push
.ceo-v51-hide-original,

.ceo-v51-detail
.ceo-v51-hide-original {

    display:none !important;
}



/* 좁은 화면 */

@media(max-width:430px){

    .ceo-v51-push {

        min-height:108px !important;
        height:108px !important;

        padding:
            12px 10px 10px !important;
    }


    .ceo-v51-push-icon {

        left:10px !important;
        bottom:10px !important;

        width:38px !important;
        height:38px !important;

        font-size:20px !important;
    }


    .ceo-v51-push-arrow {

        right:9px !important;
        bottom:18px !important;

        font-size:22px !important;
    }


    .ceo-v51-detail {

        min-height:92px !important;
        height:92px !important;
    }

}