:root {
    --main-blue: #011131;
    --light-blue: #eff6ff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.custom-guidance-wrapper {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Pretendard', sans-serif;
}

/* 인트로 배너 기본 스타일 (PC: 왼쪽 정렬) */
.intro-banner {
    background: linear-gradient(135deg, var(--main-blue), #0d2874);
    border-radius: 20px;
    padding: 50px 60px; /* PC에서는 좌우 여백을 넓게 */
    color: white;
    margin-bottom: 40px;
    
    /* PC 정렬 설정 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 자식 요소들을 왼쪽으로 */
    text-align: left;        /* 텍스트 왼쪽 정렬 */
}

.intro-banner h2 { 
    font-size: 32px; 
    margin: 20px 0; 
}

.intro-banner p { 
    font-weight: 300; 
    line-height: 1.7; 
    opacity: 0.9; 
    font-size: 18px; 
}

.pc-only { 
        display: none; 
    }

.m-only {
    display: block;
}   


.badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.intro-banner h2 { font-size: 28px; margin: 15px 0; }
.intro-banner p { font-weight: 300; line-height: 1.6; opacity: 0.9; }


/* 근거 문구 스타일링 */
.notice-evidence {
    margin-top: 15px;       /* 공지 리스트와의 간격 */
    font-size: 12px;        /* 글씨 크기 (취향에 따라 12px~14px 권장) */
    color: #b9b9b9;            /* 살짝 흐린 회색으로 가독성 조절 */
    text-align: right;      /* 우측 정렬 (보통 근거 문구는 우측에 배치) */
    font-weight: 300;       /* 글자 두께를 가늘게 */
    letter-spacing: -0.02em; /* 자간을 살짝 좁혀 깔끔하게 표현 */
}



/* 카드 그리드 레이아웃 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.info-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease;
    border: 1px solid #f1f5f9;
}
.info-card:hover { transform: translateY(-5px); }

.card-icon {
        display: flex;
        justify-content: center;
}

.circle-bg {
    width: 80px;  /* 아이콘 크기에 맞춰 조금 키움 */
    height: 80px;
    background: var(--light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* 아이콘 공통 설정 */
.ico-custom {
    display: inline-block;
    width: 42px;  /* 아이콘 크기 조절 */
    height: 42px;
    background-color: #011131; /* [중요] 여기서 아이콘 색상을 한 번에 제어 가능 */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 추천대상: 추천대상.svg */
.icon-target {
    -webkit-mask-image: url('images/icon-target.svg');
    mask-image: url('images/icon-target.svg');
}

/* 추천단위: 추천단위.svg */
.icon-unit {
    -webkit-mask-image: url('images/icon-unit.svg');
    mask-image: url('images/icon-unit.svg');
}

/* 추천방식: 추천방식.svg */
.icon-mail {
    -webkit-mask-image: url('images/icon-mail.svg');
    mask-image: url('images/icon-mail.svg');
}

/* 성과분야: 성과분야.svg */
.icon-star {
    -webkit-mask-image: url('images/icon-star.svg');
    mask-image: url('images/icon-star.svg');
    width: 38px;
    height: 38px;
}




.info-card h3 { font-size: 18px; text-align: center; color: var(--main-blue); margin-bottom: 15px; }
.info-card p { color: var(--text-sub); line-height: 1.5; font-size: 15px; }
.info-card a { display: flex; text-align: center; }

/* 성과분야 섹션 스타일 */
.tag-group { margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: #f1f5f9; color: var(--main-blue); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }

/* 하단 큰 카드 설정 */
.info-card.wide-bottom {
    grid-column: span 3; /* 상단 3칸을 모두 합쳐서 사용 */
    margin-top: 10px;    /* 상단 카드들과의 간격 */
    display: flex;
    flex-direction: column;
    align-items: normal; 
}

.wide-bottom .performance-table {
    width: 100%; /* 표는 카드 전체 너비 사용 */
}



/* 성과 분야 표 전용 스타일 */
.wide-table { grid-column: span 2; } /* PC에서 표 섹션을 넓게 배치 */

.performance-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    border-top: 2px solid #2563eb;
}

.performance-table th {
    background: #f8fafc;
    padding: 12px;
    border-bottom: 1px solid #cbd5e1;
    color: #1e293b;
}

.performance-table td {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.performance-table .cat-title {
    background: #fdfdfd;
    font-weight: 700;
    color: #2563eb;
    text-align: center;
}

.performance-table ul {
    margin: 0; padding-left: 15px;
    list-style-type: none;
}

.performance-table li {
    position: relative;
    margin-bottom: 4px;
    color: #475569;
}

.performance-table li::before {
    content: "•";
    position: absolute;
    left: -12px;
    color: #94a3b8;
}


/* 추천방식(이메일복사)*/

.copy-email {
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 5px;
    background: #eff6ff;
    border-radius: 4px;
}

/* 토스트 알림: 중앙 하단에 잠깐 떴다 사라짐 */
.copy-toast {
    visibility: hidden; position: fixed; left: 50%; bottom: 30px; 
    transform: translateX(-50%); background: #333; color: #fff;
    padding: 10px 20px; border-radius: 30px; z-index: 9999;
}
.copy-toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2s; }

@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

/* 다운로드 버튼 */
.btn-modern-download {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--main-blue);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* 반응형 */

@media (max-width: 900px) {

    .intro-banner {
        padding: 40px 20px;
        
        /* 모바일 정렬 설정 */
        align-items: center;    /* 자식 요소들을 가운데로 */
        text-align: center;     /* 텍스트 가운데 정렬 */
    }

    .intro-banner h2 {
        font-size: 24px;
    }

    .intro-banner p {
        font-size: 15px;
    }

    .pc-only {
        display:block;
    }

    .m-only {
    display: none;
    }  
        

    .notice-evidence {
        text-align: center;   
        font-size: 11px;
    }

    .card-grid {
        grid-template-columns: 1fr; /* 1열로 배치 */
    }

    .info-card.wide-bottom {
        grid-column: span 1; /* 모바일에서는 다시 1칸만 차지 */
    }

    .info-card {
        align-items: center;    
        /*text-align: center;     */
    }

    .card-icon {
        display: flex;
        justify-content: center;
    }

    .circle-bg {
        margin-left: auto;      
        margin-right: auto;
    }


    .wide-table { grid-column: span 1; }
    
    /* 모바일에서는 표를 숨기거나 카드로 보이게 조절 가능하나, 
       가독성을 위해 표 내부 구조를 수직으로 정렬 */
    .performance-table thead { display: none; }
    .performance-table tr { display: block; margin-bottom: 20px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .performance-table td { display: block;}
    .performance-table .cat-title { background: #eff6ff; padding: 10px; }
    
    

}