@charset "utf-8";

/* 인증·특허 게시판 스킨 */

/* ---------- 분류 탭 ---------- */
.cert-cate h2 { position: absolute; width: 0; height: 0; overflow: hidden; font-size: 0; line-height: 0; }
.cert-cate #bo_cate_ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 35px; list-style: none; }
.cert-cate #bo_cate_ul li { margin: 0; }
.cert-cate #bo_cate_ul a {
    display: inline-block; padding: 9px 20px; border: 1px solid #e5e5e5; border-radius: 999px;
    font-size: 0.9375rem; color: #666; background: #fff; transition: all .2s;
}
.cert-cate #bo_cate_ul a:hover { border-color: var(--gw-main-color); color: var(--gw-main-color); }
.cert-cate #bo_cate_ul a.bo_cate_on { border-color: #000; background: #000; color: #fff; }

/* ---------- 카드 그리드 ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-bottom: 60px; }

.cert-card { display: block; position: relative; }
.cert-card:hover .cert-thumb { border-color: #000; transform: translateY(-6px); }
.cert-card:hover .cert-info .tit { color: var(--gw-main-color); }

/* 분류 뱃지 */
.cert-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    padding: 5px 13px; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
    color: #fff; background: #343644;
}
.cert-badge.is-patent     { background: var(--gw-main-color); }
.cert-badge.is-trademark  { background: var(--gw-sub-color02); }
.cert-badge.is-license    { background: #343644; }

/* 증서 썸네일 — A4 세로 비율 */
.cert-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 1 / 1.414;
    border: 1px solid #e5e5e5; border-radius: 6px; background: var(--gw-color02);
    transition: all .3s;
}
.cert-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* 증서 스캔본 첨부 전 상태 */
.cert-thumb-text {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; padding: 20px; text-align: center;
    background: linear-gradient(160deg, #f4f6fd 0%, #e9edfa 100%);
}
.cert-thumb-text i { font-size: 2.5rem; color: #b9c2e0; margin-bottom: 14px; }
.cert-thumb-text .no { font-size: 1rem; font-weight: 600; color: #343644; letter-spacing: -0.01em; }
.cert-thumb-text .date { margin-top: 6px; font-size: 0.875rem; color: #8b93ad; }

/* 카드 하단 정보 */
.cert-info { padding-top: 18px; }
.cert-info .year { font-size: 1.125rem; color: #999; line-height: 1.4; }
.cert-info .tit {
    margin-top: 4px; font-size: 1.0625rem; line-height: 1.5; color: #000;
    word-break: keep-all; transition: color .2s;
}

/* 목록 비어있음 */
.cert-empty { grid-column: 1 / -1; padding: 90px 20px; color: #999; }
.cert-empty i { color: #ccc; }

.cert-paging { margin-bottom: 60px; }

/* ---------- 상세 ---------- */
.cert-view-head { padding: 0 0 45px; }
.cert-view-head .cert-badge { position: static; display: inline-block; margin-bottom: 20px; }
.cert-view-head .title { font-size: 2.5rem; line-height: 1.35; word-break: keep-all; }
.cert-view-head .date { margin-top: 14px; font-size: 1rem; }

/* 증서 이미지 */
.cert-doc { margin-bottom: 60px; text-align: center; }
.cert-doc img {
    max-width: 760px; width: 100%; height: auto;
    border: 1px solid #e5e5e5; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
}

/* 상세 본문 (정보표) */
.cert-body { max-width: 760px; margin: 0 auto 60px; font-size: 1.0625rem; line-height: 1.85; color: #333; }
.cert-body img { max-width: 100%; height: auto; }
/* 페이지 배경이 #f6f7fc라 표를 흰 카드 위에 올려야 문서처럼 읽힌다.
   헤더 배경은 테마 계열 틴트를 써서 라벨 열이 구분되게 한다. */
.cert-body table {
    width: 100%; border-collapse: collapse; overflow: hidden;
    border-top: 2px solid #000; border-radius: 0 0 6px 6px; background: #fff;
}
.cert-body table th,
.cert-body table td { padding: 15px 18px; border-bottom: 1px solid #e8eaf2; text-align: left; vertical-align: top; }
.cert-body table tr:last-child th,
.cert-body table tr:last-child td { border-bottom: none; }
.cert-body table th { width: 30%; font-weight: 600; color: #343644; background: #eef1fa; word-break: keep-all; }
.cert-body table td { color: #333; word-break: keep-all; }

/* ---------- 버튼 행 (테마 공통 규칙) ---------- */
.btn_bo_user { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0; list-style: none; }
.btn_bo_user > li { display: inline-block; vertical-align: middle; }
.btn_bo_user > li .btn_b01 { width: 10.5rem; height: 3.5rem; line-height: 2rem; }

#bo_v_top { padding-top: 10px; }
#bo_btn_top { margin-bottom: 60px; }

/* 목록 버튼과 하단 제작문의 CTA가 붙어 '제작문의' 뱃지가 버튼 글로우와 겹치는 것을 막는다.
   포트폴리오 상세는 사이에 Next project 영역이 있어 자연히 벌어지지만 여기는 없다. */
.cert-cta { margin-top: 10rem; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 24px; }
    .cert-view-head .title { font-size: 2rem; }
}

@media (max-width: 640px) {
    .cert-grid { grid-template-columns: 1fr; gap: 30px; }
    .cert-cate #bo_cate_ul { gap: 6px; margin-bottom: 25px; }
    .cert-cate #bo_cate_ul a { padding: 8px 16px; font-size: 0.875rem; }
    .cert-view-head { padding-bottom: 30px; }
    .cert-view-head .title { font-size: 1.625rem; }
    .cert-doc { margin-bottom: 40px; }
    .cert-body { margin-bottom: 40px; font-size: 1rem; }
    .cert-body table th,
    .cert-body table td { padding: 12px 13px; font-size: 0.9375rem; }
    .cert-body table th { width: 34%; }

    /* #bo_v_top / #bo_btn_top은 gw-con-1280 밖에 있어 좌우 거터가 없다.
       거터를 주지 않으면 전체폭 버튼이 화면 끝에 붙는다. */
    #bo_v_top, #bo_btn_top { padding-left: 19.5px; padding-right: 19.5px; }
    .btn_bo_user { gap: 8px; }
    .btn_bo_user > li { width: 100%; }
    .btn_bo_user > li .btn_b01 { width: 100%; height: auto; padding: 1rem; }
}