/* ===========================================================================
   EU CRA Events — 사이버보안 취약점·사고 신고 안내 (서비스 메뉴)

   시안: EU CRA 페이지 시안 01.pdf. 공용 컴포넌트를 먼저 쓰고 시안에만 있는 요소만 여기 둔다 —
     히어로 배너   : .sub-hero(46rem) + 하단 정렬은 .sub-hero--quote, 타이틀 서체는 교육 .trn-hero__word 값
     Report form   : .section-lede(골드바 리드) + .dl-list(HSE 다운로드 목록)
     샌드 밴드     : 사이트 샌드(--color-sand) 밴드. 단 시안대로 글자는 흰색이 아니라 짙은색(#222)
   본문은 EU 규정 원문 용어라 네 로케일 모두 영문이다 (페이지 래퍼에 lang="en").
   =========================================================================== */

/* ---------- 히어로 — 배너 하단 좌측 2줄 타이틀 ---------- */
.cra-hero { display: flex; align-items: flex-end; padding-bottom: 4.6rem; }
.cra-hero .container { position: relative; z-index: 1; }
.cra-hero__title {
  font-family: var(--font-en); font-size: 4.2rem; font-weight: 400;
  line-height: 1.25; letter-spacing: .04em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.cra-hero__title strong { font-weight: 800; }

/* ---------- 리드 — 방패 아이콘 + 대문자 헤딩 (시안) ---------- */
.cra-lede { display: flex; align-items: center; gap: 2.4rem; margin-bottom: 4.6rem; }
.cra-lede__ico { flex: 0 0 auto; width: 6.4rem; height: 6.4rem; }
.cra-lede h2 {
  font-size: 2.2rem; font-weight: 700; line-height: 1.4; letter-spacing: .01em;
  color: #1c2430; text-transform: uppercase;
}

/* ---------- 신고 대상 2종 — 샌드 밴드(제목) + 설명문 ---------- */
.cra-events { border-bottom: 1px solid var(--line-gold); }
.cra-events dt {
  padding: .85rem 2rem;
  background: var(--color-sand); color: #222;
  font-size: 1.7rem; font-weight: 700;
}
.cra-events dd {
  padding: 1.8rem 2rem 2.2rem;
  font-size: 1.45rem; font-weight: 300; line-height: 1.75; color: var(--ink-soft);
}

/* ---------- Report form — 서식 다운로드 + 신고 메일 밴드 ----------
   행 좌우 여백을 2rem 으로 넓혀 위 밴드·설명문의 글자 시작선과 맞춘다 (공용 .dl-list 는 1rem).
   행 구분선은 시안대로 회색(#c9ccd0)이 아니라 밴드와 같은 샌드 골드 — 시안 600dpi 실측 #c19f76,
   메일 밴드와 동일 색이라 토큰 --color-sand 로 잡는다.
   행 자체는 관리자가 등록한 문서를 공용 렌더러(pages/public-documents.js)가 그린다. */
.cra-forms .dl-list a { padding-inline: 2rem; border-color: var(--color-sand); }

.cra-mail {
  display: flex; align-items: center; gap: 2.4rem;
  padding: 1.8rem 2rem;
  background: var(--color-sand); color: #222;
  transition: filter .25s;
}
.cra-mail:hover { filter: brightness(1.07); }
.cra-mail:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.cra-mail__text {
  flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
  font-size: 1.6rem;
}
.cra-mail__text strong { font-weight: 700; }
.cra-mail__ico { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; color: #fff; }
.cra-mail__ico svg { display: block; width: 100%; height: 100%; }

/* 브레이크포인트·값은 교육 히어로(.trn-hero__word)·전략물자 배너(.sub-hero--quote)와 같다 */
@media (max-width: 1024px) {
  .cra-hero__title { font-size: 3.2rem; }
}
@media (max-width: 640px) {
  .cra-hero { padding-bottom: 2.6rem; }
  .cra-hero__title { font-size: 2.4rem; }
  /* 헤딩이 여러 줄로 감기면 방패를 첫 줄에 붙인다 (헤딩 크기는 .section-lede h3 처럼 유지) */
  .cra-lede { align-items: flex-start; }
}