@charset "utf-8";
/* =========================================================================
   KSC 콘텐츠 디자인 시스템 (코리아안전기술)
   - content.php 본문(co_content)에서 class 만으로 사용 (HTMLPurifier 통과)
   - 모든 규칙은 .ksc 하위로 스코프하여 테마 기존 스타일과 충돌 방지
   - 반응형: 모바일 우선, 768px / 1024px 분기
   ========================================================================= */

.ksc{
  --ksc-navy:#1d4ed8;
  --ksc-navy-d:#1a3aa8;
  --ksc-blue:#2196f3;
  --ksc-accent:#3b82f6;
  --ksc-line:#e3e7ef;
  --ksc-bg:#eff5ff;
  --ksc-ink:#222;
  --ksc-sub:#5a6275;
  --ksc-radius:12px;
  color:var(--ksc-ink);
  font-size:16px;
  line-height:1.7;
  word-break:keep-all;
  letter-spacing:-.01em;
  max-width:1140px;
  margin:0 auto;
  padding:8px 16px 60px;
}
.ksc *{box-sizing:border-box;}
.ksc img{max-width:100%;height:auto;display:block;}

/* ---- 페이지 인트로(히어로) ---- */
.ksc .ksc-hero{
  background:linear-gradient(120deg,#2196f3,#2f57b0);
  color:#fff;border-radius:var(--ksc-radius);
  padding:34px 28px;margin:6px 0 36px;
}
.ksc .ksc-hero h2{margin:0 0 10px;font-size:1.6rem;font-weight:800;color:#fff;line-height:1.35;}
.ksc .ksc-hero p{margin:0;font-size:1.02rem;opacity:.94;}

/* ---- 섹션 제목(좌측 바) ---- */
.ksc .ksc-h{
  position:relative;font-size:1.3rem;font-weight:800;color:var(--ksc-navy);
  margin:46px 0 18px;padding-left:16px;line-height:1.4;
}
.ksc .ksc-h:before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:6px;
  border-radius:3px;background:linear-gradient(var(--ksc-navy),var(--ksc-accent));
}
.ksc .ksc-h:first-child{margin-top:8px;}
.ksc .ksc-sub-h{font-size:1.08rem;font-weight:700;color:var(--ksc-blue);margin:26px 0 12px;}
.ksc p{margin:0 0 14px;}
.ksc .lead{font-size:1.06rem;color:#374151;background:var(--ksc-bg);
  border-left:4px solid var(--ksc-accent);border-radius:8px;padding:18px 20px;margin:0 0 24px;}

/* ---- 리스트 ---- */
.ksc ul.ksc-list{list-style:none;margin:0 0 18px;padding:0;}
.ksc ul.ksc-list>li{position:relative;padding:8px 0 8px 22px;border-bottom:1px dashed var(--ksc-line);}
.ksc ul.ksc-list>li:before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;
  border-radius:2px;background:var(--ksc-accent);}
.ksc ul.ksc-list>li b,.ksc ul.ksc-list>li strong{color:var(--ksc-navy);}
.ksc ul.ksc-list .desc{display:block;color:var(--ksc-sub);font-size:.96rem;margin-top:3px;}

/* 정의형 리스트(용어+설명) */
.ksc .ksc-dl{margin:0 0 18px;}
.ksc .ksc-dl .row{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--ksc-line);}
.ksc .ksc-dl .row .term{flex:0 0 200px;font-weight:700;color:var(--ksc-navy);}
.ksc .ksc-dl .row .val{flex:1 1 280px;color:#374151;}

/* ---- 프로세스 플로우(셰브론) ---- */
.ksc .ksc-flow{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0 10px;counter-reset:step;}
.ksc .ksc-flow .step{
  flex:1 1 100px;background:linear-gradient(135deg,var(--ksc-navy),var(--ksc-blue));
  color:#fff;border-radius:10px;padding:20px 16px;text-align:center;position:relative;min-width:140px;
}
.ksc .ksc-flow .step .cap{display:block;font-size:.8rem;opacity:.85;margin-bottom:6px;}
.ksc .ksc-flow .step .ttl{display:block;font-size:1.05rem;font-weight:800;}
.ksc .ksc-flow .step:not(:last-child):after{
  content:"\f105";font-family:"FontAwesome";position:absolute;right:-17px;top:50%;
  transform:translateY(-50%);color:var(--ksc-blue);font-size:2.0rem;z-index:2;
}

/* ---- 카드 그리드 ---- */
.ksc .ksc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0;}
.ksc .ksc-card{border:1px solid var(--ksc-line);border-radius:var(--ksc-radius);padding:22px 20px;background:#fff;
  box-shadow:0 2px 10px rgba(22,53,122,.04);transition:.2s;}
.ksc .ksc-card:hover{box-shadow:0 8px 22px rgba(22,53,122,.1);transform:translateY(-2px);}
.ksc .ksc-card h4{margin:0 0 8px;color:var(--ksc-navy);font-size:1.08rem;font-weight:800;}
.ksc .ksc-card p{margin:0;color:var(--ksc-sub);font-size:.96rem;}

/* ---- 표 ---- */
.ksc .ksc-table-wrap{overflow-x:auto;margin:0 0 22px;}
.ksc table.ksc-table{width:100%;border-collapse:collapse;min-width:480px;background:#fff;}
.ksc table.ksc-table th,.ksc table.ksc-table td{border:1px solid var(--ksc-line);padding:12px 14px;text-align:center;vertical-align:middle;}
.ksc table.ksc-table thead th{background:var(--ksc-navy);color:#fff;font-weight:700;}
.ksc table.ksc-table tbody th{background:var(--ksc-bg);color:var(--ksc-navy);}
.ksc table.ksc-table tbody tr:nth-child(even) td{background:#fafbfe;}
.ksc table.ksc-table td.tal{text-align:left;}

/* ---- 이미지 박스 ---- */
.ksc .ksc-figure{margin:18px 0;border:1px solid var(--ksc-line);border-radius:var(--ksc-radius);overflow:hidden;}
.ksc .ksc-figure img{width:100%;}
.ksc .ksc-imgrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0;}
.ksc .ksc-figure.center{border:0;text-align:center;}
.ksc .ksc-figure.center img{width:auto;max-width:100%;margin:0 auto;display:inline-block;}

/* ---- 고객사 로고 그리드 ---- */
.ksc ul.ksc-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:18px 0;padding:0;list-style:none;}
.ksc ul.ksc-logos li{border:1px solid var(--ksc-line);border-radius:10px;height:100px;display:flex;align-items:center;justify-content:center;padding:16px;background:#fff;transition:.2s;}
.ksc ul.ksc-logos li:hover{box-shadow:0 6px 18px rgba(22,53,122,.12);transform:translateY(-2px);}
.ksc ul.ksc-logos li img{max-width:100%;max-height:64px;width:auto;}
.ksc ul.ksc-logos li.txt{font-weight:700;color:var(--ksc-navy);font-size:1.05rem;text-align:center;}

/* ---- 강조 박스 ---- */
.ksc .ksc-note{background:#fff8e6;border:1px solid #f3e2b3;border-radius:10px;padding:16px 18px;margin:16px 0;color:#7a5b00;}
.ksc .ksc-note b{color:#aa6e00;}
.ksc .ksc-note p:last-child{margin-bottom:0;}

/* ---- 반응형 ---- */
@media (max-width:1024px){
  .ksc{font-size:15.5px;}
  .ksc .ksc-hero h2{font-size:1.4rem;}
}
@media (max-width:768px){
  .ksc{padding:4px 14px 44px;}
  .ksc .ksc-hero{padding:26px 20px;}
  .ksc .ksc-h{font-size:1.16rem;}
  .ksc .ksc-flow{flex-direction:column;}
  .ksc .ksc-flow .step{min-width:0;}
  .ksc .ksc-flow .step:not(:last-child):after{
    content:"\f107";right:50%;top:auto;bottom:-37px;transform:translateX(50%);
  }
  .ksc .ksc-dl .row .term{flex:0 0 100%;}
}