@charset "utf-8";

/* ============================================================
   정보센터 › e-브로셔
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:1399

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

   구성
     히어로   .page-hero (연혁·인증특허·비전과 같은 것)
     탭       정보센터 하위 메뉴 네 개. 현재 항목 아래 90 × 3 밑줄
     제목     '회사 소개 자료' + 12 점, 그 아래 설명 한 줄
     카드     440 × 455 라운드 20, 테두리 #ebebeb. 셋이 나란히 (간격 40)
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.brc-page {
  --brc-point: #135a9c;      /* 시안 --color */
  /* 눌렀을 때는 한 단 어둡게 — 같은 코발트를 8% 어둡게 한 값이다 */
  --brc-point-deep: #115390;
  --brc-ink:   #222;         /* 시안 --black */
  --brc-line:  #ebebeb;      /* 카드·버튼 테두리 */
  --brc-thumb: #f2f2f2;      /* 썸네일 자리 바탕 */

  --grid-w: 1400;            /* 시안 260~1660 */
  --gutter: 40;

  --card-w: 440;
  --thumb-h: 270;
  --card-r: 20;
}

.brc-wrap {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}

/* 히어로 큰 글씨(SPCI · E-)와 하위 메뉴 탭은 공용 파일이 맡는다
   → /css/page-hero.css · /css/page-tabs.css */

/* ==================== 제목 ==================== */
.brc-head { margin-top: calc(110 * var(--u)); }   /* 시안 탭(1026) → 제목(1166) */

.brc-head__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(42 * var(--u));     /* 시안 50 */
  line-height: 1.3;
  letter-spacing: -.05em;             /* -2.5 / 50 */
  color: #000;
}
/* 시안 Ellipse 64 — 제목 뒤에 붙는 12 점 */
.brc-head__title::after {
  content: "";
  display: inline-block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--brc-point);
  vertical-align: baseline;
}

.brc-head__desc {
  margin: calc(26 * var(--u)) 0 0;    /* 시안 1166 → 1255, 제목 높이를 뺀 값 */
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 15px);   /* 시안 25 */
  line-height: 1.5;                   /* 시안 35/25 */
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}

/* ==================== 카드 ==================== */
.brc-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 * var(--u));
  margin-top: calc(90 * var(--u));    /* 시안 설명(1255) → 카드(1383) */
}

/*
  카드 전체가 누르는 곳은 아니다 — 누를 수 있는 건 아래 버튼뿐이다.
  대신 카드 어디에 마우스가 있어도 버튼이 함께 반응한다 (요청 사항).
*/
.brc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brc-line);
  border-radius: calc(var(--card-r) * var(--u));
  background: var(--color-white);
  overflow: hidden;                   /* 썸네일 줌인이 모서리를 넘지 않게 */
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.brc-card:hover,
.brc-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(17, 20, 24, .14);
  border-color: transparent;
}

/* ---------- 썸네일 ----------
   시안은 회색 판 위에 문서 아이콘만 놓여 있다.
   표지 이미지가 들어오면 그 위를 덮고, 없으면 시안 그대로 아이콘이 남는다. */
.brc-card__thumb {
  position: relative;
  height: calc(var(--thumb-h) * var(--u));
  background: var(--brc-thumb);
  overflow: hidden;
}
/* 시안 120 × 159 문서 아이콘 (비율 0.755) */
.brc-card__doc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(120 * var(--u));
  height: calc(159 * var(--u));
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.brc-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s ease;
}
.brc-card:hover .brc-card__cover,
.brc-card:focus-within .brc-card__cover { transform: scale(1.05); }
/* 표지가 없으면 아이콘만 남으므로 아이콘도 같이 살짝 커진다 */
.brc-card:hover .brc-card__doc,
.brc-card:focus-within .brc-card__doc { transform: translate(-50%, -50%) scale(1.05); }
.brc-card__doc { transition: transform .6s ease; }

/* ---------- 글 ---------- */
.brc-card__body {
  flex: 1 1 auto;
  /* 시안: 썸네일 아래(1653) → 제목(1681) 이 28, 좌우 여백 50 */
  padding: calc(28 * var(--u)) calc(50 * var(--u)) 0;
}

.brc-card__head {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  flex-wrap: wrap;
}
.brc-card__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(25 * var(--u));     /* 시안 25(한글) / 27(영문) */
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--brc-ink);
}
/* 영문 제목은 시안이 한 단 크고 Open Sans 다 */
.brc-card__title--en {
  font-family: "Open Sans", var(--font-base);
  font-size: calc(27 * var(--u));
  letter-spacing: -.03em;
}
.brc-card__lang {
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(17 * var(--u));
  color: var(--brc-point);
}

.brc-card__date {
  margin: calc(12 * var(--u)) 0 0;    /* 시안 1681 → 1718 */
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--gray);
}

/* ---------- 다운로드 버튼 ----------
   시안 2048:1428 기본 / 2048:1463 활성(코발트).
   활성은 '버튼에 마우스가 올라갔을 때' 가 아니라 '카드 어디든' 이다. */
/* 시안: 등록일 아래 29 → 버튼(1774), 버튼 아래 14 → 카드 끝(1838) */
.brc-card__foot {
  padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
}

.brc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  height: calc(50 * var(--u));
  border: 1px solid var(--brc-line);
  border-radius: calc(10 * var(--u));
  background: var(--color-white);
  font-family: inherit;
  font-weight: 600;
  font-size: calc(19 * var(--u));
  letter-spacing: -.03em;
  color: var(--brc-ink);
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* 시안: 한글 버튼은 Noto 20, 영문 버튼은 Open Sans 19 */
.brc-btn--en { font-family: "Open Sans", var(--font-base); }
.brc-btn--ko { font-size: calc(20 * var(--u)); }

/* 카드 어디에 마우스가 있어도 버튼이 켜진다 */
.brc-card:hover .brc-btn,
.brc-card:focus-within .brc-btn {
  border-color: var(--brc-point);
  background: var(--brc-point);
  color: var(--color-white);
}
/* 버튼을 직접 겨냥했을 때는 한 단 더 진하게 — 누를 곳이 어디인지 구분된다 */
.brc-btn:hover,
.brc-btn:focus-visible {
  border-color: var(--brc-point-deep);
  background: var(--brc-point-deep);
  color: var(--color-white);
}
.brc-btn:focus-visible {
  outline: 2px solid var(--brc-point-deep);
  outline-offset: 3px;
}

/* 아이콘은 색을 글자에서 물려받는다 (시안의 검정·흰색 두 벌이 한 도형이다) */
.brc-btn__icon {
  flex: none;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  color: currentColor;
  transition: transform .3s ease;
}
.brc-card:hover .brc-btn__icon,
.brc-card:focus-within .brc-btn__icon,
.brc-btn:hover .brc-btn__icon,
.brc-btn:focus-visible .brc-btn__icon { transform: translateY(3px); }

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다.
   --d 는 줄에서 몇 번째인지다 (js/page-brochure.js 가 넣는다) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .brc-card[data-reveal] { transition-delay: calc(var(--d, 0) * .1s); }
/* 등장이 끝나면 올렸을 때의 움직임이 다시 걸려야 한다 */
.js .brc-card[data-reveal].is-in:hover,
.js .brc-card[data-reveal].is-in:focus-within {
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* 마지막 카드와 푸터 사이 (시안 1838 → 2068) */
main { padding-bottom: calc(180 * var(--u)); }

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

  /* 히어로→본문. 히어로 아래 여백·탭 위 여백과 겹쳐 가장 큰 값이 남는다 */
  .brc-wrap { margin-top: var(--sp-block); }
  .brc-head { margin-top: var(--sp-block); }
  .brc-head__title { font-size: calc(26 * var(--u)); }
  .brc-head__title::after {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    margin-left: calc(8 * var(--u));
  }
  .brc-head__desc {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.7;
  }

  /* 카드는 한 칸. 두 칸이면 표지와 제목이 모두 알아볼 수 없게 작아진다 */
  .brc-list {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    margin-top: var(--sp-head);
  }
  .brc-card__thumb { height: calc(180 * var(--u)); }
  .brc-card__doc { width: calc(80 * var(--u)); height: calc(106 * var(--u)); }
  .brc-card__body { padding: calc(18 * var(--u)) calc(18 * var(--u)) 0; }
  .brc-card__title { font-size: calc(19 * var(--u)); }
  .brc-card__title--en { font-size: calc(20 * var(--u)); }
  .brc-card__lang { font-size: calc(13 * var(--u)); }
  .brc-card__date { margin-top: calc(8 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  .brc-card__foot { padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
  .brc-btn { height: calc(44 * var(--u)); }
  .brc-btn,
  .brc-btn--ko { font-size: max(calc(15 * var(--u)), 14px); }
  .brc-btn__icon { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

  /*
    터치 화면에는 마우스를 올린다는 개념이 없다.
    올렸을 때만 버튼이 켜지면 여기서는 영영 회색으로 남으므로,
    버튼은 처음부터 켜진 상태로 둔다 (누를 곳이 분명해진다).
    카드가 뜨거나 표지가 커지는 것은 뺀다 — 한 번 누르면 그 상태로 눌어붙는다.
  */
  .brc-btn {
    border-color: var(--brc-point);
    background: var(--brc-point);
    color: var(--color-white);
  }
  .brc-card:hover,
  .brc-card:focus-within {
    transform: none;
    box-shadow: none;
    border-color: var(--brc-line);
  }
  .brc-card:hover .brc-card__cover,
  .brc-card:focus-within .brc-card__cover { transform: none; }
  .brc-card:hover .brc-card__doc,
  .brc-card:focus-within .brc-card__doc { transform: translate(-50%, -50%); }
  .brc-card:hover .brc-btn__icon,
  .brc-card:focus-within .brc-btn__icon { transform: none; }
  .js .brc-card[data-reveal].is-in:hover,
  .js .brc-card[data-reveal].is-in:focus-within { transform: none; }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .brc-card,
  .brc-card__cover,
  .brc-card__doc,
  .brc-btn,
  .brc-btn__icon { transition: none; }
  .brc-card:hover,
  .brc-card:focus-within { transform: none; }
  .brc-card:hover .brc-card__cover,
  .brc-card:focus-within .brc-card__cover { transform: none; }
  .brc-btn:hover .brc-btn__icon,
  .brc-card:hover .brc-btn__icon { transform: none; }
}

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