@charset "utf-8";

/* ============================================================
   회사소개 › 인증·특허
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:471

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css 가, 히어로는 /css/page-hero.css 가 맡는다.

   시안은 절대좌표로 그려져 있지만 여기서는 격자와 흐름으로 옮긴다 —
   카드가 늘거나 줄어도 무너지지 않아야 하기 때문이다.
   대신 시안 좌표에서 뽑은 '간격' 을 그대로 쓴다. 계산 근거는 규칙 옆에 적었다.
   ============================================================ */

/* 메인용으로 걸어 둔 스냅을 푼다 (다른 서브 페이지와 같다) */
html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.cert-page {
  /* ---------- 색 ----------
     시안 변수 그대로다. --color #135a9c / --black #222 / --gray #9f9f9f.
     #9f9f9f 는 style.css 의 --gray, #575757 은 --ink-mid 로 이미 있다. */
  --cert-point: #135a9c;    /* 카드에 마우스를 올렸을 때 (시안 2048:641) */
  --cert-ink:   #222;
  --panel-bg:   #f3f3f3;

  /* ---------- 격자 ----------
     시안에서 본문 칸은 260~1660 (폭 1400) 이고,
     카드 두 장이 오른쪽 끝에 붙는다 (820~1660, 회색 판 안에서는 740~1580).
     제목은 왼쪽에 남는 자리를 쓴다. */
  --grid-w: 1400;
  --gutter: 40;
  --panel-pad: 80;

  /*
    카드는 시안(400 × 775, 이미지 300 × 425)을 비율 그대로 90% 로 줄였다.
    시안대로면 카드 한 장이 화면 세로의 3분의 2를 차지해서
    한 번에 두 장을 견주기 어렵다. 인증서 이미지는 A4 비율(0.706)을 지킨다.
  */
  --card-w:    360;   /* 시안 400 */
  --card-gap:   36;   /* 시안 40 */
  --card-pad:   45;   /* 시안 50 — 이미지 좌우 여백 */
  --img-w:     270;   /* 시안 300 */
  --img-h:     382;   /* 시안 425 (0.706 유지) */
  --card-r:     15;
}

/* 시안은 히어로 아래 138 을 비우지만, 히어로를 낮춘 만큼 함께 줄인다 */
.cert {
  margin-top: calc(60 * var(--u));
  padding-bottom: calc(150 * var(--u));   /* 시안 240 — 마지막 판 → 푸터 */
}

/* ==================== 그룹 ==================== */
.cert-group {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
  display: grid;
  /* 오른쪽은 카드 두 장 + 사이 간격. 왼쪽은 남는 자리를 제목이 쓴다 */
  grid-template-columns: 1fr calc(var(--card-w) * 2 * var(--u) + var(--card-gap) * var(--u));
}
/* 시안 그룹 간격: 1816 → 1966, 3846 → 3996, 5586 → 5736 (모두 150) */
.cert-group + .cert-group { margin-top: calc(150 * var(--u)); }

/* 시안에서 두 그룹은 회색 판 위에 놓인다 (2048:562 · 2048:495) */
.cert-group--panel {
  padding: calc(140 * var(--u)) calc(var(--panel-pad) * var(--u)) calc(150 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--panel-bg);
}

.cert-group__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(60 * var(--u));   /* 시안 60~65 */
  letter-spacing: -.03em;             /* -1.35 / 45 */
  color: var(--cert-ink);
}

.cert-group__desc {
  /* 시안 제목 위 → 설명 위가 101~158, 제목 높이를 뺀 값이 36 */
  margin: calc(36 * var(--u)) 0 0;
  font-weight: 300;
  font-size: calc(25 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: -.03em;             /* -0.75 / 25 */
  color: var(--ink-mid);
  /* 낱말 중간이 아니라 띄어쓰기에서 접는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ==================== 카드 판 ==================== */
.cert-group__cards {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--card-w) * var(--u)));
  gap: calc(var(--card-gap) * var(--u));
  /* 시안: 카드 줄 사이 40 (2106 → 2921 = 815, 카드 775) */
  align-content: start;
}

/* ==================== 카드 ==================== */
/*
  마우스를 올리면 시안 2048:641 의 상태가 된다 —
  바탕이 #135a9c 로 바뀌고, 인증서가 조금 커지고, 글자가 흰색이 된다.

  시안은 그때 상세 행(연도·설명·인증 내용)을 지우고 큰 제목만 남기는데,
  여기서는 행을 남기고 흰색으로 뒤집었다.
  마우스가 지나갈 때마다 읽던 정보가 사라지면 오히려 읽기 어렵기 때문이다.
  (시안 그대로가 필요하면 아래 .cert-card__rows 규칙 하나만 opacity: 0 으로 바꾸면 된다)

  카드는 누르는 요소가 아니다 — 시안에 링크가 없다.
  나중에 <a> 로 감싸도 같은 모습이 되도록 :focus-within 을 함께 걸어 둔다.
*/
/*
  여백이 두 겹이다.
  시안에서 이미지는 카드 가장자리에서 50 들어오지만, 상세 행은 25 밖에 안 들어온다
  (구분선 폭이 카드 400 에 350 이다).
  카드 여백을 이미지 기준으로 잡으면 값 칸이 그만큼 좁아져 글이 자꾸 접힌다.
  그래서 카드는 행 기준(22)으로 두고, 이미지는 제 폭으로 가운데 세워 45 를 만든다.
*/
.cert-card {
  padding: calc(22 * var(--u));      /* 시안 25 */
  border-radius: calc(var(--card-r) * var(--u));
  background: var(--card-bg, var(--card-bg-soft));
  transition: background-color .3s ease,
              transform .3s ease,
              box-shadow .3s ease;
}
/* 회색 판 위에서는 카드가 흰색이다 (시안 2048:564 · 2048:497) */
.cert-group--panel .cert-card { --card-bg: var(--color-white); }

.cert-card:hover,
.cert-card:focus-within {
  background: var(--cert-point);
  transform: translateY(-6px);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(19, 90, 156, .28);
}

/* ---------- 인증서 이미지 ----------
   파일이 아직 없어도 자리는 지켜야 한다.
   틀이 비율과 바탕색을 갖고 있고, 그 위에 이미지가 얹힌다.
   이미지를 못 불러오면 js 가 <img> 만 걷어내므로 빈 틀이 남는다. */
.cert-card__thumb {
  position: relative;
  width: calc(var(--img-w) * var(--u));
  height: calc(var(--img-h) * var(--u));
  /* 위 22(카드 여백) + 23 = 45. 좌우도 (360-44-270)/2 = 23 이라 같은 값이 된다 */
  margin: calc(23 * var(--u)) auto 0;
  overflow: hidden;
  background: #e9ebef;
}
.cert-card__thumb img {
  width: 100%;
  height: 100%;
  /* 인증서는 잘리면 안 된다. 비율이 조금씩 달라 cover 로는 가장자리가 날아간다 */
  object-fit: contain;
}
/* 짚으면 틀째로 커진다 (시안 hover: 300 → 320, 1.067배).
   전에는 이미지만 키웠는데 틀이 고정이라 커진 만큼 가장자리가 잘려 어색했다.
   transform 은 자리를 차지하지 않으므로 카드 높이는 그대로고, 틀 둘레 여백(23)이 커진 만큼(약 10)을 받아 준다 */
.cert-card__thumb {
  transform: scale(1);
  transition: transform .3s ease;
}
.cert-card:hover .cert-card__thumb,
.cert-card:focus-within .cert-card__thumb { transform: scale(1.067); }

/* ---------- 이름 ---------- */
.cert-card__name {
  /* 시안 이미지 아래(475) → 제목(527) 이 52 */
  margin: calc(47 * var(--u)) 0 0;
  font-weight: 700;
  /* --u 는 화면 폭에 정비례해 줄어든다. 1440 에서 17px 까지 내려가므로 바닥을 둔다 */
  font-size: max(calc(23 * var(--u)), 17px);   /* 시안 25 */
  line-height: 1.36;
  letter-spacing: -.03em;
  color: var(--cert-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: color .3s ease;
}

/* ---------- 상세 행 ---------- */
.cert-card__rows {
  margin: calc(18 * var(--u)) 0 0;
}

.cert-card__row {
  display: grid;
  /* 시안 라벨 x38 / 값 x167 → 칸 폭 129 를 90% 로 */
  grid-template-columns: calc(116 * var(--u)) 1fr;
  align-items: baseline;
  padding: calc(11 * var(--u)) 0;    /* 시안 행 간격 60 → 54 */
}
.cert-card__row + .cert-card__row {
  border-top: 1px solid var(--card-line, #e8e8e8);
  transition: border-color .3s ease;
}
/* 구분선은 카드 바탕보다 한 단 진하다 (시안 Line 36 #f3f3f3 · Line 37 #e8e8e8) */
.cert-group--panel .cert-card { --card-line: #f3f3f3; }

/* 시안은 이름표(23)가 값(19)보다 크다. 그 관계는 그대로 두되,
   좁은 화면에서 둘 다 읽을 수 있는 크기 아래로는 내려가지 않게 바닥을 둔다 */
.cert-card__label {
  font-size: max(calc(21 * var(--u)), 15px);   /* 시안 23 */
  line-height: max(calc(32 * var(--u)), 24px);
  letter-spacing: -.03em;
  color: var(--gray);
  transition: color .3s ease;
}

.cert-card__value {
  font-size: max(calc(19 * var(--u)), 15px);   /* 시안 19~20 */
  line-height: max(calc(32 * var(--u)), 24px);
  letter-spacing: -.03em;
  color: var(--cert-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: color .3s ease;
}

/* ---------- 올렸을 때 글자 반전 ---------- */
.cert-card:hover .cert-card__name,
.cert-card:focus-within .cert-card__name,
.cert-card:hover .cert-card__value,
.cert-card:focus-within .cert-card__value { color: var(--color-white); }

.cert-card:hover .cert-card__label,
.cert-card:focus-within .cert-card__label { color: rgba(255, 255, 255, .72); }

.cert-card:hover .cert-card__row + .cert-card__row,
.cert-card:focus-within .cert-card__row + .cert-card__row {
  border-color: rgba(255, 255, 255, .28);
}

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다.
   --d 는 그룹 안에서 몇 번째 카드인지다 (js/page-certificate.js 가 넣는다) */
.js .cert-group__head[data-reveal],
.js .cert-card[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js .cert-card[data-reveal] {
  transition-delay: calc(var(--d, 0) * .08s);
}
.js .cert-group__head[data-reveal].is-in,
.js .cert-card[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* 등장이 끝난 뒤에는 hover 의 transform 이 다시 걸려야 한다.
   전환 목록이 겹치지 않도록 등장 쪽 지연은 hover 에서 지운다 */
.js .cert-card[data-reveal].is-in:hover,
.js .cert-card[data-reveal].is-in:focus-within {
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .cert-page { --gutter: 16; --panel-pad: 12; }

  /* 히어로 → 첫 묶음. 첫 묶음의 margin 은 0 으로 두고 .cert 가 간격을 맡는다 */
  .cert { margin-top: var(--sp-block); }

  /* 제목 위, 카드 아래로 세운다 — 옆에 나란히 둘 폭이 없다 */
  .cert-group { display: block; }
  .cert-group + .cert-group { margin-top: var(--sp-section); }
  .cert-group--panel {
    padding: calc(32 * var(--u)) calc(var(--panel-pad) * var(--u)) calc(36 * var(--u));
    border-radius: calc(14 * var(--u));
  }

  .cert-group__title { font-size: calc(30 * var(--u)); line-height: 1.3; }
  .cert-group__desc {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.7;
  }

  /* 두 칸을 유지한다. 카드가 좁아지는 만큼 안쪽을 다시 짜야 한다 */
  .cert-group__cards {
    margin-top: var(--sp-head);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(12 * var(--u));
  }

  .cert-card { padding: calc(12 * var(--u)); }

  /*
    좁은 화면에서는 인증서 폭을 못 박지 않는다.
    카드가 화면 폭에 따라 줄어드는데 이미지만 고정하면 카드 밖으로 나가거나
    한쪽에 빈 자리가 남는다. 폭은 카드에 맡기고 A4 비율만 지킨다.
    (파일이 없어도 이 틀이 자리와 바탕색을 지킨다)
  */
  .cert-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: var(--img-w) / var(--img-h);
    margin: 0;
  }

  .cert-card__name {
    margin-top: calc(14 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.4;
  }
  .cert-card__rows { margin-top: calc(8 * var(--u)); }

  /*
    이름표와 값을 좌우로 두면 값이 들어갈 폭이 40 밖에 안 남는다.
    한 칸 안에서 위아래로 쌓는다.
  */
  .cert-card__row {
    display: block;
    padding: calc(7 * var(--u)) 0;
  }
  .cert-card__label {
    display: block;
    font-size: max(calc(12 * var(--u)), 11px);
    line-height: 1.4;
  }
  .cert-card__value {
    display: block;
    margin-top: calc(2 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.45;
  }

  /*
    올렸을 때의 효과는 끈다.
    터치 화면에서는 한 번 누른 카드에 hover 가 눌어붙어, 손을 뗀 뒤에도
    파란 채로 남는다. 등장 애니메이션만 남긴다.
  */
  .cert-card:hover,
  .cert-card:focus-within {
    background: var(--card-bg, var(--card-bg-soft));
    transform: none;
    box-shadow: none;
  }
  .cert-group--panel .cert-card:hover,
  .cert-group--panel .cert-card:focus-within { background: var(--color-white); }
  .cert-card:hover .cert-card__thumb,
  .cert-card:focus-within .cert-card__thumb { transform: none; }
  .cert-card:hover .cert-card__name,
  .cert-card:focus-within .cert-card__name,
  .cert-card:hover .cert-card__value,
  .cert-card:focus-within .cert-card__value { color: var(--cert-ink); }
  .cert-card:hover .cert-card__label,
  .cert-card:focus-within .cert-card__label { color: var(--gray); }
  .cert-card:hover .cert-card__row + .cert-card__row,
  .cert-card:focus-within .cert-card__row + .cert-card__row { border-color: var(--card-line, #e8e8e8); }
  .js .cert-card[data-reveal].is-in:hover,
  .js .cert-card[data-reveal].is-in:focus-within { transform: none; }
}

/* ---------- 두 칸이지만 카드가 아직 넓은 구간 ----------
   태블릿 폭에서는 카드가 250 을 넘으므로, 상세 행을 시안처럼 좌우로 되돌린다.
   같은 정보를 세 줄이 아니라 세 칸으로 읽는 편이 짧고 눈에 잘 들어온다. */
@media (min-width: 520px) and (max-width: 768px) {
  .cert-card { padding: calc(20 * var(--u)); }
  .cert-card__name { font-size: max(calc(17 * var(--u)), 16px); }
  .cert-card__row {
    display: grid;
    grid-template-columns: calc(72 * var(--u)) 1fr;
    align-items: baseline;
    padding: calc(9 * var(--u)) 0;
  }
  .cert-card__label { font-size: max(calc(14 * var(--u)), 13px); }
  .cert-card__value { margin-top: 0; font-size: max(calc(15 * var(--u)), 14px); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .js .cert-group__head[data-reveal],
  .js .cert-card[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cert-card,
  .cert-card__thumb img,
  .cert-card__name,
  .cert-card__label,
  .cert-card__value,
  .cert-card__row + .cert-card__row { transition: none; }
  .cert-card:hover,
  .cert-card:focus-within { transform: none; }
}

/* 모바일: 마지막 블록 → 푸터 간격을 공통 단계(--sp-section, style.css)로 맞춘다.
   데스크톱 값(시안 기준)을 그대로 두면 좁은 화면에서 푸터 위가 비어 보인다 */
@media (max-width: 768px) {
  .cert { padding-bottom: var(--sp-section); }
}