/* =========================================================
   파일명: /css/kpi.css

   설명:
   - 메인 홈의 주요 기능 카드와 KPI 숫자 표시를 위한 공통 스타일이다.
   - 현재 main-home.html은 portal-kpi-card가 아니라
     kpi-grid, kpi-card, kpi-value, kpi-sub 구조를 사용한다.
   - 따라서 이 CSS는 현재 main-home.html 구조에 맞춰 작성한다.
   - 기존 main.css의 화면 톤을 유지하면서 KPI 숫자 강조만 보강한다.

   현재 메인 홈 적용 기준:
   1) 상단 히어로 KPI
      - 최근 발행 성적서
      - mainHome.mainKpi.recentIssuedCertificateCount 사용

   2) 하단 주요 기능 카드 중 성적서 카드
      - 당월 발생 성적서
      - mainHome.mainKpi.monthlyIssuedCertificateCount 사용
      - 제목은 작게, 숫자는 크게, 설명은 작고 연하게 표시한다.

   사용 위치:
   - src/main/resources/static/css/kpi.css

   head 연결:
   - /css/kpi.css

   주의:
   - 이 파일은 JavaScript와 무관하다.
   - 서버에서 Model에 담긴 mainHome 값을 Thymeleaf가 출력하고,
     이 CSS는 화면 표현만 담당한다.
   ========================================================= */


/* =========================================================
   1. KPI 카드 목록 그리드
   ---------------------------------------------------------
   설명:
   - 메인 홈 하단 주요 기능 카드 4개를 배치하는 영역이다.
   - PC에서는 4열, 태블릿에서는 2열, 모바일에서는 1열로 표시한다.
   - 현재 main-home.html의 <div class="kpi-grid">에 적용된다.
   ========================================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}


/* =========================================================
   2. KPI 카드 기본형
   ---------------------------------------------------------
   설명:
   - 성적서 조회, 위변조 검증, 공지사항, 회원정보 카드 공통 스타일이다.
   - a 태그를 카드처럼 보이게 한다.
   - 링크 밑줄을 제거하고, 카드 hover 효과를 적용한다.
   ========================================================= */
.kpi-card {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 176px;
    padding: 24px;
    border: 1px solid var(--portal-border, var(--color-border, #d9dee5));
    border-radius: 14px;
    background: var(--portal-white, var(--color-surface, #ffffff));
    box-shadow: var(--portal-shadow-sm, var(--shadow-card, 0 8px 24px rgba(15, 23, 42, 0.06)));
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* 카드 마우스 오버 효과 */
.kpi-card:hover {
    box-shadow: var(--portal-shadow-md, 0 4px 20px rgba(27, 46, 75, .10));
    transform: translateY(-2px);
}

/* 카드 상단 포인트 라인 */
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--portal-navy, #1B2E4B);
}


/* =========================================================
   3. 카드별 색상 톤
   ---------------------------------------------------------
   설명:
   - 카드 구조는 동일하게 유지하고 상단 라인 색상만 다르게 표시한다.
   - kpi-navy   : 성적서
   - kpi-accent : 위변조 검증
   - kpi-green  : 공지사항
   - kpi-red    : 회원정보
   ========================================================= */
.kpi-card.kpi-navy::before {
    background: var(--portal-navy, #1B2E4B);
}

.kpi-card.kpi-accent::before {
    background: var(--portal-accent, #C8931A);
}

.kpi-card.kpi-green::before {
    background: #2E8B57;
}

.kpi-card.kpi-red::before {
    background: #C0392B;
}


/* =========================================================
   4. KPI 아이콘
   ---------------------------------------------------------
   설명:
   - 카드 상단의 아이콘 영역이다.
   - 현재 main-home.html에서는 이모지를 사용하고 있다.
   - 아이콘 자체보다 업무 제목과 숫자가 더 잘 보이도록 배경은 연하게 둔다.
   ========================================================= */
.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 19px;
    background: rgba(27, 46, 75, .08);
}

/* 카드 색상 톤별 아이콘 배경 보정 */
.kpi-card.kpi-accent .kpi-icon {
    background: rgba(200, 147, 26, .12);
}

.kpi-card.kpi-green .kpi-icon {
    background: rgba(46, 139, 87, .10);
}

.kpi-card.kpi-red .kpi-icon {
    background: rgba(192, 57, 43, .10);
}


/* =========================================================
   5. KPI 영문 라벨
   ---------------------------------------------------------
   설명:
   - Certificate, Verification, Notice, Account 같은 분류 라벨이다.
   - 제목보다 작고 연하게 표시한다.
   ========================================================= */
.kpi-label {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--portal-text3, var(--color-muted, #667085));
}


/* =========================================================
   6. KPI 카드 제목
   ---------------------------------------------------------
   설명:
   - 기존에는 "성적서 조회", "위변조 검증" 같은 큰 제목 역할이었다.
   - 현재 성적서 카드는 "당월 발생 성적서" 제목 아래에 숫자를 크게 보여야 하므로,
     성적서 카드만 별도 보정한다.
   ========================================================= */
.kpi-value {
    font-family: 'Noto Serif KR', 'Noto Sans KR', 'Malgun Gothic', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--portal-navy, var(--color-text, #1f2937));
    letter-spacing: -0.03em;
    word-break: keep-all;
}


/* =========================================================
   7. KPI 카드 보조 설명
   ---------------------------------------------------------
   설명:
   - 카드 하단의 짧은 안내 문구 영역이다.
   - 일반 카드에서는 기존처럼 한 줄 설명을 표시한다.
   - 성적서 카드에서는 이 영역 안에 당월 건수를 포함한다.
   ========================================================= */
.kpi-sub {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--portal-text3, var(--color-muted, #667085));
    word-break: keep-all;
}


/* =========================================================
   8. 상단 히어로 KPI 숫자
   ---------------------------------------------------------
   적용 대상:
   - main-home.html 상단 히어로 영역
   - 최근 발행 성적서 숫자

   HTML 구조:
   <div class="portal-hero-stat-val portal-hero-stat-count">
       <strong>1</strong>
       <span class="portal-hero-stat-unit">건</span>
   </div>

   설명:
   - 상단은 최근 1일 기준 성적서 발행 건수이다.
   - 하단 당월 발생 성적서와 의미가 다르다.
   ========================================================= */
.portal-hero-stat-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.portal-hero-stat-count strong {
    font-family: 'Noto Serif KR', 'Noto Sans KR', 'Malgun Gothic', serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--portal-accent2, #E8B44A);
    letter-spacing: -0.04em;
}

.portal-hero-stat-unit {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, .86);
}


/* =========================================================
   9. 하단 성적서 카드 - 당월 발생 성적서 전용 보정
   ---------------------------------------------------------
   적용 대상:
   - main-home.html 하단 주요 기능 카드 중 첫 번째 성적서 카드

   현재 HTML 구조:
   <a class="kpi-card kpi-navy">
       <div class="kpi-icon">📄</div>
       <div class="kpi-label">Certificate</div>
       <div class="kpi-value">당월 발생 성적서</div>
       <div class="kpi-sub">
           당월
           <strong>128</strong>
           <span>건</span>
       </div>
   </a>

   설명:
   - 상단 KPI는 최근 발행 성적서이다.
   - 하단 카드는 당월 발생 성적서이다.
   - 제목은 작게, 숫자는 크게, 단위와 설명은 작게 표시한다.

   주의:
   - 현재 HTML에 별도 class를 추가하지 않았기 때문에
     .portal-kpi-section .kpi-card.kpi-navy 범위로만 보정한다.
   ========================================================= */

/* 하단 성적서 카드 제목 축소 */
.portal-kpi-section .kpi-card.kpi-navy .kpi-value {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--portal-navy, #1B2E4B);
    letter-spacing: -0.03em;
}

/* 하단 성적서 카드의 당월 건수 줄 */
.portal-kpi-section .kpi-card.kpi-navy .kpi-sub {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--portal-text3, #7b8794);
}

/* 하단 성적서 카드의 당월 건수 숫자 */
.portal-kpi-section .kpi-card.kpi-navy .kpi-sub strong {
    font-family: 'Noto Serif KR', 'Noto Sans KR', 'Malgun Gothic', serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--portal-accent2, #E8B44A);
}

/* 하단 성적서 카드의 단위 */
.portal-kpi-section .kpi-card.kpi-navy .kpi-sub span {
    font-size: 15px;
    font-weight: 800;
    color: var(--portal-text2, #667085);
}


/* =========================================================
   10. 태블릿 대응
   ---------------------------------------------------------
   설명:
   - 1280px 이하에서는 4열을 2열로 줄인다.
   ========================================================= */
@media (max-width: 1280px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   11. 모바일 대응
   ---------------------------------------------------------
   설명:
   - 모바일에서는 1열로 표시한다.
   - 카드 내부 여백과 숫자 크기를 줄여 화면 넘침을 방지한다.
   ========================================================= */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        min-height: auto;
        padding: 20px;
    }

    .kpi-value {
        font-size: 22px;
    }

    .portal-hero-stat-count strong {
        font-size: 24px;
    }

    .portal-kpi-section .kpi-card.kpi-navy .kpi-value {
        font-size: 16px;
    }

    .portal-kpi-section .kpi-card.kpi-navy .kpi-sub strong {
        font-size: 32px;
    }
}