@charset "utf-8";
/* =========================================================
   인증기업 현황 (certified-companies.html) — companies.css
   로드 순서: style.css → sub.css → companies.css
   서브비주얼(.a2v)·2차메뉴(.a2tab)·라벨/제목(.a2-label, .a2-h2)은 sub.css "서브 공통"
   ========================================================= */


.cc { padding: 120px 0 140px; }
.cc__head { text-align: center; }
.cc__head > p:last-child { margin-top: 18px; font-size: 18px; line-height: 1.75; color: var(--sub); }

/* 상단 바 : 전체 건수 */
.cc__bar { margin-top: 56px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cc__total { font-size: 16px; color: var(--sub); }
.cc__total strong { font-weight: 800; color: var(--navy); }
.cc__hint { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cc__hint .ico { width: 16px; height: 16px; color: var(--point); }

/* 표 : 라운드 박스 + 가로 스크롤 */
.cc-table { margin-top: 16px; overflow: hidden; background: #fff; border: 1px solid #DCE3EE; border-radius: 22px; box-shadow: 0 16px 36px rgba(16, 38, 76, .05); }
.cc-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cc-table__scroll:focus-visible { outline: 2px solid var(--point); outline-offset: -2px; }
.cc-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cc-table .c-ci { width: 220px; }
.cc-table .c-name { width: 260px; }
.cc-table .c-no { width: 170px; }
.cc-table thead th { height: 60px; padding: 0 24px; background: #F4F6FA; border-bottom: 1px solid #DCE3EE; font-size: 15px; font-weight: 700; color: var(--navy); text-align: left; white-space: nowrap; }
.cc-table thead th:first-child, .cc-table thead th:nth-child(3) { text-align: center; }
.cc-table tbody td { padding: 16px 24px; border-top: 1px solid #EDF1F6; font-size: 16px; line-height: 1.55; color: var(--body); vertical-align: middle; word-break: keep-all; overflow-wrap: anywhere; }
.cc-table tbody tr:first-child td { border-top: 0; }
.cc-table tbody tr { transition: background .2s; }
.cc-table tbody tr:hover { background: #F8FAFE; }
.cc-table__ci { text-align: center; }
.cc-table__name { font-weight: 700; color: var(--ink); }
.cc-table__no { text-align: center; font-size: 15px !important; font-weight: 600; letter-spacing: .02em; color: #2454C6 !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* CI : 같은 크기 영역 안에서 원본 비율 유지 + 중앙 정렬 */
.cc-ci { display: flex; align-items: center; justify-content: center; width: 156px; height: 60px; margin: 0 auto; padding: 8px 12px; border: 1px solid #EDF1F6; border-radius: 12px; background: #fff; }
.cc-ci img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* 더보기 (모바일) */
.cc__more { margin-top: 28px; text-align: center; }
.cc__more-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 28px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--navy); transition: border-color .25s, background .25s; }
.cc__more-btn [data-more-count] { font-weight: 600; color: var(--muted); }
.cc__more-btn .ico { width: 16px; height: 16px; transform: rotate(90deg); }
.cc__more-btn:hover { border-color: var(--navy); background: #F4F6FA; }
.cc__more-btn[hidden] { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .cc { padding: 88px 0 96px; }
  .cc-table .c-ci { width: 180px; }
  .cc-table .c-name { width: 200px; }
  .cc-table .c-no { width: 140px; }
  .cc-table thead th, .cc-table tbody td { padding-left: 16px; padding-right: 16px; }
  .cc-ci { width: 140px; height: 54px; }
}

@media (max-width: 768px) {
  .cc { padding: 64px 0 72px; }
  .cc__head { text-align: left; }
  .cc__head > p:last-child { font-size: 15px; }
  .cc__bar { margin-top: 32px; }
  .cc__total { font-size: 14px; }
  .cc__hint { display: inline-flex; }
  .cc-table { margin-top: 12px; border-radius: 18px; }
  /* 화면 폭 초과 시 가로 스크롤 : 4개 항목 유지 */
  .cc-table table { min-width: 620px; }
  .cc-table .c-ci { width: 128px; }
  .cc-table .c-name { width: 150px; }
  .cc-table .c-no { width: 112px; }
  .cc-table thead th { height: 48px; padding: 0 12px; font-size: 13px; }
  .cc-table tbody td { padding: 12px; font-size: 14px; }
  .cc-table__no { font-size: 13px !important; }
  .cc-ci { width: 104px; height: 44px; padding: 6px 8px; border-radius: 10px; }
  .cc__more { margin-top: 20px; }
  .cc__more-btn { width: 100%; justify-content: center; height: 50px; }
}