/*
 * 마이페이지 > 수료증 (WEB-INF/views/mypage/certificates.jsp, certificate-detail.jsp) 전용.
 *
 * 셸·머리글·목록 줄(.post-list/.post-row*)·빈 상태는 theme/components.css 의 재사용
 * 컴포넌트를 그대로 쓴다. 이 파일에는 수료증에만 있는 것 — 목록 줄의 강조색, 인쇄용
 * 증서 판(.cert-sheet), 그리고 @media print 만 둔다.
 *
 * 색은 hex 를 직접 쓰지 않고 --mili-* 토큰을 참조한다(docs/design-system.md §2).
 */

/* ===== 목록 ===== */

/* .post-row 는 --accent 하나로 좌측 띠와 유형 배지 색을 함께 잡는다. 수료증은 배지 톤. */
.post-row--cert { --accent: var(--mili-stat-badge); }

.cert-empty__hint {
    margin: 0.25rem 0 1rem;
    color: var(--mili-muted);
    font-size: 0.875rem;
}

/* ===== 상세 ===== */

.cert-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.cert-actions__back {
    color: var(--mili-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.cert-actions__back:hover {
    color: var(--mili-fg);
}

/*
 * 증서 판. 인쇄했을 때 A4 한 장에 들어가도록 최대폭을 잡고 가운데 정렬한다.
 * 화면에서는 다크 표면 위의 카드로, 인쇄에서는 흰 종이로 바뀐다(맨 아래 @media print).
 */
.cert-sheet {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    border: 1px solid var(--mili-line);
    border-radius: var(--mili-radius-lg);
    background: var(--mili-panel);
    text-align: center;
}

.cert-sheet__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--mili-brand);
    /* 영문 전용 줄이라 지표용 글꼴을 쓴다. 한글이 섞이면 쓰지 않는다(변수 주석 참고). */
    font-family: var(--mili-font-metric);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
}

.cert-sheet__title {
    margin: 0 0 2.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    /* letter-spacing 은 마지막 글자 뒤에도 붙어 가운데 정렬이 왼쪽으로 밀린다. 그만큼 되민다. */
    text-indent: 0.35em;
}

/*
 * 라벨/값 2열. dt 를 우측 정렬해 가운데 축을 만든다.
 * 좁은 화면에서는 1열로 접고 라벨을 작게 얹는다.
 */
.cert-sheet__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0 0 2rem;
    text-align: center;
}

.cert-sheet__body dt {
    color: var(--mili-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.cert-sheet__body dd {
    margin: 0 0 1rem;
    color: var(--mili-fg);
    font-size: 1rem;
}

.cert-sheet__holder {
    font-size: 1.5rem;
    font-weight: 700;
}

.cert-sheet__course {
    font-size: 1.125rem;
    font-weight: 600;
}

.cert-sheet__serial {
    font-family: var(--mili-font-metric);
    letter-spacing: 0.08em;
}

.cert-sheet__note {
    margin: 0 0 1.5rem;
    color: var(--mili-muted);
    font-size: 0.875rem;
    line-height: var(--mili-line-body);
    /* 관리자가 넣은 설명이 길 수 있다. 줄바꿈은 살리되 가로 넘침은 막는다. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cert-sheet__sign {
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mili-line);
    color: var(--mili-muted);
    font-size: 0.9375rem;
}

@media (min-width: 576px) {
    .cert-sheet__body {
        grid-template-columns: auto 1fr;
        text-align: left;
    }

    .cert-sheet__body dt {
        text-align: right;
        padding-top: 0.35rem;
    }
}

/* ===== 인쇄 =====
 * 셸(사이드바·상단바·머리글)과 행동 버튼을 걷어내고 증서만 흰 종이에 남긴다.
 * 다크 토큰이 그대로 인쇄되면 배경이 통째로 검게 나오므로 이 블록에서만 색을 고정한다.
 */
@media print {
    .app-sidebar,
    .app-sidebar__scrim,
    .app-topbar,
    .mypage-head,
    .cert-actions {
        display: none !important;
    }

    .app-frame,
    .app-frame__body,
    .app-page {
        display: block;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .cert-sheet {
        max-width: none;
        margin: 0;
        padding: 2rem;
        border: 2px solid #333;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }

    .cert-sheet__eyebrow,
    .cert-sheet__title,
    .cert-sheet__body dd,
    .cert-sheet__sign,
    .cert-sheet__note,
    .cert-sheet__body dt {
        color: #111;
    }

    .cert-sheet__sign {
        border-top-color: #999;
    }

    /* 등장 연출은 인쇄에서 의미가 없고, 애니메이션 전 상태로 굳으면 내용이 안 보인다. */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}