@charset "utf-8";

/* ============================================================
   서브 페이지 공통 히어로

   연혁(2048:671)과 인증특허(2048:471)가 같은 틀을 쓴다 —
   1840 × 700 라운드 35 상자에 사진을 깔고 어둡게 덮은 뒤,
   왼쪽 아래에 눈썹 한 줄과 제목 두 줄이 놓인다.
   페이지마다 다른 것은 사진·화각·어둡기뿐이라 변수로 뺐다.

   쓰는 법
     <link rel="stylesheet" href="../css/page-hero.css">
     <section class="page-hero" style="--hero-pos: 50% 37%">
       <img class="page-hero__photo" ...>
       <div class="page-hero__dim"></div>
       <div class="page-hero__copy"> 눈썹 · 제목 </div>
     </section>

   높이는 시안(700)보다 낮다. 그대로 옮기면 첫 화면을 표지가 다 먹어서
   정작 봐야 할 본문이 스크롤 밖으로 밀린다.
   ============================================================ */

.page-hero {
  position: relative;
  width: calc(1840 * var(--u));
  height: calc(430 * var(--u));            /* 시안 700 */
  margin: calc(140 * var(--u)) auto calc(18 * var(--u));   /* 시안 위 191 */
  border-radius: calc(35 * var(--u));
  overflow: hidden;
  background: #10151f;   /* 사진이 늦게 뜰 때 흰 판이 번쩍이지 않도록 */
}

/*
  시안은 원본을 큰 상자에 놓고 잘라 쓰는데, 그 좌표는 높이 700 일 때만 맞다.
  같은 화각을 비율(object-position)로 옮겨 두면 높이를 바꿔도 같은 자리가 보인다.
  값은 페이지에서 --hero-pos 로 준다.
*/
.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
  filter: grayscale(var(--hero-gray, 0));
}

.page-hero__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-dim, .55));
}

.page-hero__copy {
  position: absolute;
  /* 시안 x290 → 히어로 왼쪽(40) 기준 250.
     위가 아니라 아래를 기준으로 잡는다 — 히어로 높이를 바꿔도 따라 고칠 일이 없다
     (시안도 글 아래로 높이의 18% 를 남긴다) */
  left: calc(250 * var(--u));
  bottom: calc(76 * var(--u));
  color: var(--color-white);
}

.page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));       /* 시안 점 260~270, 글자 290 */
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: 1.2;
}
.page-hero__eyebrow::before {
  content: "";
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--color-white);
}

.page-hero__title {
  margin: calc(16 * var(--u)) 0 0;   /* 눈썹 아래 70 - 눈썹 높이 54 */
  font-weight: 700;
  font-size: calc(65 * var(--u));
  line-height: calc(85 * var(--u));  /* 시안 85 */
  letter-spacing: -.03em;            /* -1.95 / 65 */
  /* 한글은 기본값이면 낱말 중간에서 끊긴다 ("축적으/로").
     띄어쓰기에서만 접고, 끊을 수 없는 긴 낱말만 예외로 둔다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.page-hero__title span { display: block; }
/* 제목 안에서 'SPCI' 같은 영문만 한 단 크게 잡는 시안이 있다 (2048:1381 · 2048:1492).
   em 으로 주면 좁은 화면에서 제목이 줄어도 비율이 그대로 따라간다 */
.page-hero__title b {
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: 1.077em;                /* 시안 70 / 65 */
}

/* 제목 아래 한 줄 설명 — 시안에는 없고 온라인문의 확정 카피(2026-09-10)로 생겼다.
   어느 페이지든 .page-hero__copy 안 제목 뒤에 <p class="page-hero__sub"> 를 두면 같은 모양이 된다 */
.page-hero__sub {
  margin: calc(18 * var(--u)) 0 0;
  font-weight: 300;
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .85);
  word-break: keep-all;
}
.page-hero__sub b { font-family: "Open Sans", var(--font-base); font-weight: 600; }

/* ---------- 첫 화면 등장 ----------
   다른 페이지에서 넘어왔을 때 통째로 나타나지 않도록 위에서부터 차례로 올라온다.
   스크롤이나 관찰자에 걸지 않고 CSS 애니메이션으로 둔다 —
   그려지는 순간 스스로 재생되므로 스크립트가 없어도 글이 사라지지 않는다.

   히어로 상자는 올리지 않고 밝아지기만 한다.
   큰 사진이 통째로 움직이면 '은은하게' 가 아니라 화면이 흔들린 것처럼 보인다. */
@keyframes pageHeroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pageHeroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.js .page-hero          { animation: pageHeroFade .9s var(--flow-ease) both; }
.js .page-hero__eyebrow { animation: pageHeroRise .7s var(--flow-ease) .22s both; }
.js .page-hero__title   { animation: pageHeroRise .7s var(--flow-ease) .31s both; }
.js .page-hero__sub     { animation: pageHeroRise .7s var(--flow-ease) .40s both; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 768px) {
  /* 812 짜리 화면에서 420 이면 절반이 표지다. 본문이 먼저 보이도록 낮춘다 */
  .page-hero {
    width: calc(100% - var(--page-gutter, 16) * var(--u) * 2);
    height: calc(300 * var(--u));
    margin: calc(100 * var(--u)) auto calc(14 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  .page-hero__copy {
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    bottom: calc(24 * var(--u));
  }
  .page-hero__eyebrow { font-size: calc(20 * var(--u)); gap: calc(8 * var(--u)); }
  .page-hero__eyebrow::before { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .page-hero__title {
    margin-top: calc(10 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: 1.42;
  }
  .page-hero__sub { margin-top: calc(8 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); }
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .page-hero,
  .js .page-hero__eyebrow,
  .js .page-hero__title,
  .js .page-hero__sub { animation: none; }
}