@charset "utf-8";
/* ============================================================
   WORKNEST — 화면을 가득 채우는 첫 화면 (PLAY · MATE · ZIP 공용)

   쓰는 쪽은 inc/page_hero.php 를 부르고 $PAGE_CSS 에 'hero' 를 넣는다.
   머리말은 이 칸 위에서 투명했다가 아래로 내려가면 흰 바탕이 된다.
   ============================================================ */

/* 머리말이 사진 위에 얹힌다 (메인 화면과 같은 방식).
   어느 화면에서 그럴지는 첫 칸의 data-header-clear 가 알려 주고,
   js/common.js 의 initHeaderTone() 이 색을 바꾼다.

   첫 화면을 쓰는 화면은 body 에 아래 이름을 붙인다.
   새 화면을 더할 때 여기에도 한 줄 보태 주면 된다. */
.page-play .site-header,
.page-mate .site-header,
.page-zip  .site-header {
  background: transparent; border-bottom-color: transparent;
}
.page-play .site-header.is-solid,
.page-mate .site-header.is-solid,
.page-zip  .site-header.is-solid {
  background: rgba(255,255,255,.9);
  border-bottom-color: var(--line-soft);
}

.ph-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 100vh; min-height: 100svh;
  /* 머리말이 위에 얹혀 있으므로 그만큼 비우고 글을 놓는다 */
  padding-block: calc(var(--header-h) + 7vh) 0;
  margin-top: calc(var(--header-h) * -1);
  background: #E9EFF9;
  overflow: hidden;
}

.ph-bg { position: absolute; inset: 0; z-index: 0; }
.ph-bg picture, .ph-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-bg img { object-fit: cover; object-position: 54% 52%; }


/* ── 사진 위에 얹는 영상 ───────────────────────────────────
   쓰는 화면에서 $HERO_VIDEO_PC · $HERO_VIDEO_MO 를 적으면 js/hero.js 가
   화면 너비에 맞는 것 하나만 불러와 여기에 넣는다.

   한 번만 돌고 마지막 장면에서 멈춘다. 소리는 나지 않는다.
   <video> 는 사진과 똑같이 cover 로 덮으므로 크기 계산이 따로 없다.
   영상이 실제로 돌기 시작한 뒤에 서서히 나타나고, 못 받으면 사진이 남는다. */
.ph-video {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.ph-video.is-on { opacity: 1; }
.ph-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

@media (prefers-reduced-motion: reduce) { .ph-video { display: none; } }
/* 위쪽을 살짝 밝히던 흰 천(그라데이션)은 끈다 —
   2026-09-29 사이트 주인: 「배경 그라데이션 들어간 부분 모두 제거」 */
.ph-veil { display: none; }

.ph-in { position: relative; z-index: 2; }

.ph-title {
  margin: 0;
  font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.5rem);
  font-weight: 800; line-height: 1.22; letter-spacing: -.034em;
  color: var(--brand-ink);
}
/* 제목 끝의 느낌표만 브랜드 색으로 */
.ph-title .ph-bang {
  color: var(--brand);
}

.ph-sub {
  margin-top: clamp(12px, 1.6vh, 20px);
  font-size: clamp(.93rem, .88rem + .24vw, 1.1rem);
  line-height: 1.75; color: #45505F;
}

/* 아래로 이어진다는 표시 — 글자 없이 꺾쇠 하나.
   바닥이 밝은 사진이라 흰 원만으로는 묻힌다. 테두리를 브랜드 색으로 준다. */
.ph-cue {
  position: absolute; z-index: 5;
  left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--brand-300);
  background: rgba(255, 255, 255, .3); color: var(--brand);   /* 흰 바탕은 30% 만 — 영상이 비쳐 보이게 (2026-09-29 사이트 주인). 화살표 · 테두리는 그대로 진하게 */
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
  animation: phCue 2.2s var(--ease) infinite;
}
.ph-cue:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.ph-cue svg { width: 19px; height: 19px; display: block; }

@keyframes phCue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .ph-cue { animation: none; } }

/* ── 화면마다 다른 자리 잡기 ──────────────────────────────── */
/* 세 화면 모두 사진이 영상의 마지막 장면이다. 영상(.ph-video video)과
   같은 자리(50% 50%)를 잡아야 이어질 때 화면이 튀지 않는다.
   맨 위의 기본값(54% 52%)은 영상을 쓰지 않는 화면을 위해 남겨 둔다. */
.page-play .ph-bg img { object-position: 50% 50%; }

.page-mate .ph-bg img { object-position: 50% 50%; }

/* ZIP — 영상 가운데에 이미 큰 글자가 들어 있어 우리 글은 얹지 않는다 */
.page-zip .ph-bg img { object-position: 50% 50%; }

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ph-hero {
    min-height: 92vh; min-height: 92svh;
    /* 글을 그림 위쪽 빈 하늘에 앉힌다.
       MATE 는 인물이 높이 올라와 있어 아래에서 따로 더 줄인다. */
    padding-block: calc(var(--header-h) + 7.5vh) 0;
  }
  .ph-bg img { object-position: 56% 54%; }
  .ph-cue { display: none; }

  /* MATE — 세로 영상은 인물이 화면 중간부터 차지해 글 놓을 하늘이 좁다.
     그래서 이 화면만 세 가지를 달리한다.
       · 설명을 한 줄로 잇는다 (두 줄이면 얼굴까지 내려온다)
       · 위 여백을 줄여 글을 올린다
       · 사진과 영상을 위쪽으로 붙여 하늘을 더 보여 준다
     사진과 영상은 반드시 같은 자리를 잡아야 이어질 때 화면이 튀지 않는다. */
  .page-mate .ph-sub br { display: none; }
  .page-mate .ph-hero { padding-block: calc(var(--header-h) + 3vh) 0; }
  .page-mate .ph-bg img,
  .page-mate .ph-video video { object-position: 50% 0%; }
}