@charset "utf-8";
/* ================================================================
   인증현황 · 한국어                            ★2026-10-01 새로 만듦
   ----------------------------------------------------------------
   쓰는 화면 : views/about/certification.php · views/en/about/certification.php
   ★2026-10-01 cert_ko.css 에서 이름을 바꿈 (영문도 함께 쓰게 되어서)
   ★예전 certification.css 는 쓰지 않는다. 컨트롤러가 읽기만 하고
     이름이 달라 영향이 없다. 일문 화면이 쓰는지 확인 전이라 지우지 않았다.
   ★구역마다 색이 다르다 (사용자 결정 2026-10-01)
     제품 인증 파랑 · 경영시스템 남색 · 지식재산권 노랑 · ESG 초록
     색은 구역 위 띠 · 딱지 · 고른 배지 · 숫자에만 쓴다. 바탕은 흰색.
   ★머리 장식 — 인증서 테두리 물결 무늬 + 도장 동그라미 (움직이지 않음)
   ================================================================ */

#content.ct-wrap{
    padding:0 0 110px !important; margin:0 !important;
    background:#EBF0F4;
}
.ct-wrap *{ box-sizing:border-box; }
.ct-inner{ width:min(1240px, 88%); margin:0 auto; }

/* 구역 색 묶음 — --c 띠 · --t 글씨 · --b 옅은 바탕 */
.ct-blue { --c:#1385B8; --t:#0D6C9B; --b:#E4F1F8; }
.ct-navy { --c:#102838; --t:#102838; --b:#E3E9EE; }
.ct-amber{ --c:#F5A623; --t:#A26705; --b:#FDF1DC; }
.ct-green{ --c:#1F9E6E; --t:#15734F; --b:#E3F4EC; }

/* ================================================================
   1 · 머리
   ================================================================ */
.ct-head{ position:relative; overflow:hidden; padding:56px 0 36px; }
.ct-head .ct-inner{ position:relative; z-index:2; }
.ct-deco{
    position:absolute; right:0; top:0; z-index:1;
    width:460px; height:150px; pointer-events:none;
}
.ct-deco path, .ct-deco circle{ fill:none; stroke-width:1; }
.ct-title{
    margin:0; font-size:32px; font-weight:600;
    letter-spacing:-.04em; line-height:1.3; color:#102838;
}
.ct-lead{
    margin:12px 0 0; max-width:760px;
    font-size:16px; line-height:1.75; color:#4A5B68;
    letter-spacing:-.02em; word-break:keep-all;
}

/* ================================================================
   2 · 구역 카드
   ================================================================ */
.ct-sec{
    background:#fff; border-radius:12px;
    border-top:3px solid var(--c);
    padding:24px 26px 26px;
}
.ct-sec + .ct-sec{ margin-top:18px; }
.ct-sec-head{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-bottom:18px;
}
.ct-tag{
    display:inline-block; padding:4px 10px; border-radius:4px;
    background:var(--b); color:var(--t);
    font-size:12px; font-weight:500; letter-spacing:-.01em;
}
.ct-sec-title{
    margin:0; font-size:19px; font-weight:600;
    color:#102838; letter-spacing:-.03em;
}
.ct-sec-hint{ margin-left:auto; font-size:13px; color:#7B858E; }

/* ================================================================
   3 · 배지
   ================================================================ */
.ct-badges{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:12px;
}
.ct-badge{
    height:104px; padding:10px 12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:#fff; border:1px solid #DFE6EB; border-radius:10px;
    cursor:pointer; font-family:inherit; color:#102838;
    transition:border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.ct-badge:hover{ border-color:var(--c); transform:translateY(-3px); }
.ct-badge.on{
    border-color:var(--c); background:var(--b);
    box-shadow:inset 0 -3px 0 var(--c);
}
.ct-badge:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.ct-badge-img{
    display:block; max-width:110px; max-height:48px;
    width:auto; height:auto; object-fit:contain;
}
.ct-badge-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.ct-badge-cap{
    max-width:100%; font-size:12px; color:#7B858E;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 전체 인증서 보기 — 점선으로 구별 */
.ct-badge.is-all{ border-style:dashed; color:var(--t); }
.ct-badge.is-all .ct-badge-name{ font-size:14px; font-weight:500; }
.ct-badge.is-all svg{ width:22px; height:22px; stroke:var(--c); fill:none; stroke-width:1.6; }

/* ================================================================
   4 · 배지 누른 뒤 펼쳐지는 칸 (구역 카드 안)
   ================================================================ */
.ct-panel{
    margin-top:22px; padding-top:22px;
    border-top:1px solid #E8EDF1;
}
.ct-panel-title{ margin:0; font-size:16px; font-weight:600; color:#102838; }
.ct-panel-sub{ margin:6px 0 16px; font-size:13.5px; color:#7B858E; }
.ct-empty{ margin:0; font-size:14px; color:#7B858E; }

/* 연결 제품 */
.ct-prods{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:14px;
}
.ct-prod{
    display:block; width:100%; padding:0; text-align:left;
    background:#fff; border:1px solid #DFE6EB; border-radius:10px; overflow:hidden;
    cursor:pointer; font-family:inherit;
    transition:border-color .2s, transform .2s, box-shadow .2s;
}
.ct-prod:hover{
    border-color:#1385B8; transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(16,40,56,.12);
}
.ct-prod-img{ aspect-ratio:4 / 3; background:#F4F7F9; }
.ct-prod-img img{ display:block; width:100%; height:100%; object-fit:contain; }
.ct-prod-tx{ padding:12px 14px 14px; }
.ct-prod-cate{ display:block; font-size:12px; color:#1385B8; }
.ct-prod-name{ margin:5px 0 0; font-size:15px; font-weight:600; color:#102838; letter-spacing:-.02em; }
.ct-prod-sum{
    margin:5px 0 0; font-size:13px; line-height:1.5; color:#7B858E;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 인증서 보기 (제품 인증 · 경영시스템 공통) */
.ct-back{
    margin:0 0 16px; padding:0; border:0; background:none; cursor:pointer;
    font-family:inherit; font-size:14px; color:#1385B8;
}
.ct-back:hover{ text-decoration:underline; }
.ct-cert{ display:flex; gap:28px; align-items:flex-start; }
.ct-cert-img{
    flex:0 0 280px; width:280px;
    background:#F4F7F9; border:1px solid #DFE6EB; border-radius:8px;
    padding:10px; cursor:zoom-in;
}
.ct-cert-img img{ display:block; width:100%; max-height:380px; object-fit:contain; }
.ct-cert-info{ flex:1; min-width:0; }
.ct-cert-name{ margin:0; font-size:20px; font-weight:600; color:#102838; letter-spacing:-.03em; }
.ct-cert-cap{ margin:8px 0 0; font-size:14px; color:#7B858E; }
.ct-cert-hint{ margin:6px 0 0; font-size:12.5px; color:#9AA6B0; }
.ct-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ct-btn{
    display:inline-flex; align-items:center; height:44px; padding:0 20px;
    border:1px solid #DFE6EB; border-radius:8px; background:#fff;
    font-size:14.5px; color:#102838; text-decoration:none;
    transition:border-color .2s, color .2s, background .2s;
}
.ct-btn:hover{ border-color:#1385B8; color:#1385B8; }
.ct-btn.is-main{ background:#1385B8; border-color:#1385B8; color:#fff; }
.ct-btn.is-main:hover{ background:#0D6C9B; border-color:#0D6C9B; color:#fff; }
.ct-notice{ margin:16px 0 0; font-size:14px; color:#7B858E; }

/* 제품 보러가기에 마우스 올리면 따라다니는 제품 사진 */
.ct-mthumb{
    display:none; position:absolute; z-index:250; pointer-events:none;
    width:150px; padding:6px; background:#fff;
    border:1px solid #DFE6EB; border-radius:8px;
    box-shadow:0 10px 24px rgba(16,40,56,.18);
}
.ct-mthumb img{ display:block; width:100%; }

/* ================================================================
   5 · 지식재산권
   ================================================================ */
.ct-ip{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ct-ip-btn{
    padding:18px 20px; text-align:left; cursor:pointer;
    background:#fff; border:1px solid #DFE6EB; border-radius:10px;
    font-family:inherit; color:#102838;
    transition:border-color .2s, background .2s;
}
.ct-ip-btn:hover{ border-color:var(--c); }
.ct-ip-btn.on{ border-color:var(--c); background:var(--b); }
.ct-ip-n{
    display:block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:34px; line-height:1; color:var(--t);
}
.ct-ip-l{ display:block; margin-top:8px; font-size:15px; font-weight:500; }
.ct-ip-s{ display:block; margin-top:3px; font-size:12.5px; color:#7B858E; }
.ct-ip-panel{ display:none; margin-top:16px; }
.ct-ip-panel.on{ display:block; }
.ct-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.ct-table th{
    text-align:left; padding:10px 8px; font-size:13px; font-weight:500;
    color:#7B858E; border-bottom:1px solid #DCE4EA;
}
.ct-table td{ padding:12px 8px; border-bottom:1px solid #EEF2F5; color:#102838; }
.ct-table td.no{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13.5px; }

/* ================================================================
   6 · ESG
   ================================================================ */
.ct-esg{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ct-esg-card{ background:var(--b); border-radius:10px; padding:20px 22px; }
.ct-esg-card strong{ display:block; font-size:16px; font-weight:600; color:var(--t); }
.ct-esg-card p{ margin:8px 0 0; font-size:14px; line-height:1.6; color:#4A5B68; word-break:keep-all; }

/* ================================================================
   7 · 전체 인증서 창 · 사진 크게 보기
   ================================================================ */
.ct-modal{
    position:fixed; left:0; right:0; top:0; bottom:0; z-index:300;
    display:none; align-items:center; justify-content:center;
    background:rgba(16,40,56,.72); padding:20px;
}
.ct-modal.on{ display:flex; }
.ct-modal-in{
    position:relative; width:min(1000px, 100%); max-height:86vh; overflow:auto;
    background:#fff; border-radius:12px; padding:28px;
}
.ct-modal-title{ margin:0 0 18px; font-size:18px; font-weight:600; color:#102838; }
.ct-modal-x{
    position:absolute; right:16px; top:14px;
    width:38px; height:38px; border-radius:50%;
    border:1px solid #DFE6EB; background:#fff; cursor:pointer;
    font-size:20px; line-height:1; color:#102838;
}
.ct-gal{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; }
.ct-gal-item{ cursor:zoom-in; }
.ct-gal-item img{
    display:block; width:100%; aspect-ratio:3 / 4; object-fit:contain;
    background:#F4F7F9; border:1px solid #DFE6EB; border-radius:8px; padding:6px;
}
.ct-gal-item p{ margin:8px 0 0; font-size:13px; text-align:center; color:#4A5B68; }

.ct-lb{
    position:fixed; left:0; right:0; top:0; bottom:0; z-index:400;
    display:none; align-items:center; justify-content:center;
    background:rgba(16,40,56,.88); padding:40px; cursor:zoom-out;
}
.ct-lb.on{ display:flex; }
.ct-lb img{ max-width:100%; max-height:100%; border-radius:6px; background:#fff; }

/* ================================================================
   8 · 좁은 화면
   ================================================================ */
@media (max-width:1024px){
    .ct-title{ font-size:28px; }
    .ct-deco{ opacity:.6; }
    .ct-cert{ flex-direction:column; }
    .ct-cert-img{ flex:none; width:100%; max-width:320px; }
}
@media (max-width:768px){
    #content.ct-wrap{ padding-bottom:70px !important; }
    .ct-inner{ width:90%; }
    .ct-head{ padding:38px 0 24px; }
    .ct-title{ font-size:23px; }
    .ct-lead{ font-size:14.5px; }
    .ct-deco{ width:300px; height:98px; opacity:.45; }
    .ct-sec{ padding:18px 16px 20px; }
    .ct-sec-title{ font-size:17px; }
    .ct-sec-hint{ margin-left:0; width:100%; }
    .ct-badges{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .ct-badge{ height:92px; }
    .ct-prods{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
    .ct-ip{ grid-template-columns:1fr; gap:8px; }
    .ct-ip-btn{ display:flex; align-items:baseline; gap:12px; padding:14px 16px; }
    .ct-ip-n{ font-size:26px; }
    .ct-ip-l{ margin-top:0; }
    .ct-table{ font-size:13px; }
    .ct-esg{ grid-template-columns:1fr; }
    .ct-btn{ flex:1 1 auto; justify-content:center; }
    .ct-modal-in{ padding:20px 16px; }
    .ct-gal{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}