/* ───────────────────────────────────────────────
   styles.css L1391-1435 — .page-hero / __inner / __crumbs / __title / __sub (서브페이지 히어로)
   ─────────────────────────────────────────────── */
/* ============================================================
   Sub-page wireframe utilities (added for prototype sub-pages)
   ============================================================ */
.page-hero {
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  background: transparent;
  border-bottom: 0;
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
}
.page-hero__crumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--ink-500);
  font-weight: 500;
}
.page-hero__crumbs a:hover { color: var(--ink-900); }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-lg);
  line-height: 1.18;
  letter-spacing: var(--tracking-display-lg);
  color: var(--ink-900);
}
.page-hero__title em { font-style: italic; font-weight: 500; color: var(--orange-700); }
.page-hero__title--sm {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.page-hero__sub {
  font-size: 17px;
  line-height: var(--lh-loose);
  color: var(--ink-800);
  max-width: 56ch;
}


/* ───────────────────────────────────────────────
   styles.css L2305-2321 — .page-hero__inner width 통일 — page-hero 패밀리와 co-locate (block_hero), --full override(L5372)가 이기도록 block_hero 내 선행 배치
   ─────────────────────────────────────────────── */
/* ============================================================
   Page hero — width 통일 (다른 섹션과 동일한 container 너비, 좌측 정렬)
   ============================================================ */
.page-hero__inner {
  /* container와 합쳐 사용 — 헤더의 .site-header__inner 와 동일한 1280 max */
  max-width: var(--container-max) !important;
  align-items: stretch;             /* default — 자식 max-width로 텍스트 폭만 제한 */
  margin-bottom: -86px;
  position: relative;
  z-index: 2;
}
.page-hero--standalone .page-hero__inner { margin-bottom: 0; }
.page-hero__title { max-width: none; }
.page-hero__sub   { max-width: 56ch; }
.page-hero__crumbs a { color: var(--ink-900); }
.page-hero__sub a { color: var(--ink-900); border-bottom: 1px solid currentColor; padding-bottom: 1px; font-weight: 600; }


/* ───────────────────────────────────────────────
   styles.css L3178-3283 — block_hero__mock 16:9 + 컴포넌트
   ─────────────────────────────────────────────── */
/* Film hero — 16:9 video mockup (replaces clay-scene illustration) */
.block_hero__mock {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(222,101,40,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--ink-800) 0%, var(--ink-900) 60%, #050505 100%);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(26, 23, 20, 0.18),
    0 2px 6px var(--ink-900-12),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  color: var(--paper-80);
}
.block_hero__mock::before {
  /* subtle scanline texture */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.015) 2px,
    rgba(255,255,255,0.015) 3px
  );
  pointer-events: none;
}
.block_hero__mock-corner {
  position: absolute;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}
.block_hero__mock-corner--tl { top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 8px; }
.block_hero__mock-corner--tr { top: 16px; right: 18px; font-variant-numeric: tabular-nums; }
.block_hero__mock-corner--bl { bottom: 28px; left: 18px; color: var(--white); font-weight: 700; letter-spacing: 0.14em; }
.block_hero__mock-corner--br { bottom: 28px; right: 18px; font-variant-numeric: tabular-nums; }
.block_hero__mock-rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 0 0 rgba(231,76,60,0.6);
  animation: rec-pulse 1.6s ease-out infinite;
}
@keyframes rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}
.block_hero__mock-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--paper-50);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
  padding-left: 4px; /* visual centering for triangle */
}
.block_hero__mock-play:hover {
  background: var(--accent, #de6528);
  border-color: var(--accent, #de6528);
  color: var(--white);
  transform: none;
}
.block_hero__mock-bar {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  height: 3px;
  background: var(--paper-15);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}
.block_hero__mock-bar span {
  display: block;
  width: 32%;
  height: 100%;
  background: var(--accent, #de6528);
  border-radius: inherit;
}


/* ───────────────────────────────────────────────
   styles.css L3298-3317 — block_hero__mock-play 센터링 override
   ─────────────────────────────────────────────── */
/* Video mock play button — precise center (override padding offset) */
.block_hero__mock-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  inset: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
}
.block_hero__mock-play svg {
  transform: translateX(2px);  /* optical centering for triangle */
}
.block_hero__mock-play:hover {
  transform: translate(-50%, -50%) !important;
}

/* Video mock — center play symbol inside the round button (geometric center) */
.block_hero__mock-play svg { transform: none !important; margin: 0 !important; }


/* ───────────────────────────────────────────────
   styles.css L3338-3350 — block_hero__mock-play 위치 수정 override
   ─────────────────────────────────────────────── */
/* Video mock play button — fix accidental top-left positioning */
.block_hero__mock-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
}
.block_hero__mock-play:hover { transform: translate(-50%, -50%) !important; }


/* ───────────────────────────────────────────────
   styles.css L4643-4735 — about page — block_hero__mock--live + about-hero (hero 변형)
   ─────────────────────────────────────────────── */
/* ========================================
   About page additions
   ======================================== */

/* Real video inside block_hero__mock frame */
.block_hero__mock-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.block_hero__mock--live::before { display: none; }

/* About hero media */
.about-hero .page-hero__inner { display: block; }
.about-hero .page-hero__title { margin-bottom: 28px; }
.about-hero--with-visual .page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.about-hero--with-visual .page-hero__copy { min-width: 0; }
.about-hero--with-visual .page-hero__visual { min-width: 0; }
@media (max-width: 900px) {
  .about-hero--with-visual .page-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}


/* ───────────────────────────────────────────────
   styles.css L5357-5382 — studio page hero (page-hero--studio/full)
   ─────────────────────────────────────────────── */
/* Studio page hero */
.page-hero--studio {
  background: transparent;
  border-bottom: 0;
}
.page-hero--studio .page-hero__title { margin: 0 0 8px; line-height: 1.05; }

/* Full-bleed studio hero — title fills the viewport */
.page-hero--studio-full { overflow: hidden; }
.page-hero__inner--full {
  max-width: none !important;
  width: 100%;
  padding-inline: clamp(20px, 3vw, 48px) !important;
}
.page-hero--studio-full .block_hero__transforming-title {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}


/* ───────────────────────────────────────────────
   styles.css L5383-5516 — block_hero__transforming-title letter blur-in + shimmer + spinner (about hero)
   ─────────────────────────────────────────────── */
/* ============================================================
   Hero — Transparent & ever Transforming (about.php)
   ============================================================ */
.block_hero__transforming-title {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: clamp(40px, 9.5vw, 168px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  max-width: none !important;
  margin: 24px 0 56px !important;
  white-space: normal;
}
@media (max-width: 700px) {
  .block_hero__transforming-title { white-space: normal; }
}
/* default — plain ink color so letter blur-in animation works */
.block_hero__transforming-title {
  color: var(--ink-200) !important;
}

/* shimmer mode (activated by JS after intro finishes) — background-clip mask */
.block_hero__transforming-title.is-shimmering {
  color: transparent !important;
  background-image:
    linear-gradient(110deg,
      transparent 35%,
      var(--ink-100) 50%,
      transparent 65%),
    linear-gradient(0deg, var(--ink-200), var(--ink-200));
  background-size: 250% 100%, 100% 100%;
  background-position: -150% center, 0 center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 5s linear infinite;
}
.block_hero__transforming-title.is-shimmering .letter {
  -webkit-text-fill-color: transparent;
          color: transparent;
}
@keyframes title-shimmer {
  0%   { background-position:  250% center, 0 center; }
  100% { background-position: -150% center, 0 center; }
}
@media (prefers-reduced-motion: reduce) {
  .block_hero__transforming-title.is-shimmering { animation: none; }
}
.block_hero__transforming-title .letter {
  display: inline-block;
}
/* Hide initial raw text until JS wraps letters & adds .is-intro */
.block_hero__transforming-title:not(.is-intro):not(.is-shimmering) {
  opacity: 0;
}
.block_hero__transforming-title.is-intro,
.block_hero__transforming-title.is-shimmering { opacity: 1; }
.block_hero__transforming-title.is-intro .letter {
  opacity: 0;
  filter: blur(14px);
  animation: letter-in 0.7s var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes letter-in {
  to { opacity: 1; filter: blur(0); }
}
.block_hero__transforming-title em {
  opacity: 0;
  transform: translateX(-48px);
}
.block_hero__transforming-title.is-intro em {
  animation: em-slide-in 0.9s var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)) 1.1s forwards;
}
.block_hero__transforming-title:not(.is-intro) em {
  opacity: 1;
  transform: translateX(0);
}
@keyframes em-slide-in {
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .block_hero__transforming-title .letter { animation: none; opacity: 1; filter: blur(0); }
  .block_hero__transforming-title em { animation: none; opacity: 1; transform: none; }
}
.block_hero__transforming-title em {
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--orange-700) !important;
  -webkit-text-fill-color: var(--orange-700) !important;
  background: none !important;
  display: inline-block;
  margin-left: 1.2em;
  position: relative;
}
/* SpinKit-style spinner — two bouncing dots in counter-phase, rotating */
.block_hero__title-spinner {
  display: inline-block;
  position: relative;
  width: 0.5em;
  height: 0.5em;
  vertical-align: top;
  margin-left: 0.12em;
  margin-top: -0.05em;
  text-align: center;
  animation: block_hero__title-spinner-rotate 3.4s linear infinite;
}
.block_hero__title-spinner-dot {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 20%;
  background-color: var(--orange-700);
  border-radius: 50%;
  animation: block_hero__title-spinner-bounce 3.4s ease-in-out infinite;
}
.block_hero__title-spinner-dot--2 {
  top: auto;
  bottom: 0;
  animation-delay: -1.7s;
}
@keyframes block_hero__title-spinner-rotate {
  to { transform: rotate(360deg); }
}
@keyframes block_hero__title-spinner-bounce {
  0%, 100% { transform: scale(0); background-color: var(--orange-300); }
  50%      { transform: scale(1); background-color: var(--orange-700); }
}
@media (prefers-reduced-motion: reduce) {
  .block_hero__title-spinner,
  .block_hero__title-spinner-dot { animation: none; }
}


/* ───────────────────────────────────────────────
   styles.css L5517-5649 — pixelize/scramble reveal + page-hero__tag/org
   ─────────────────────────────────────────────── */
/* Scramble effect placeholder — initial state hidden until JS runs */
[data-scramble] { will-change: contents; }

/* Pixelize reveal — left-to-right wipe-in (typewriter w/ stepped wipe) */
[data-pixelize] {
  position: relative;
  display: inline-block;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
[data-pixelize]::after {
  /* trailing block edge — moves with the wipe */
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  right: -10px;
  width: 12px;
  background: var(--orange-700);
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-pixelize].is-typing {
  animation: pixelize-wipe 1.6s steps(18, end) forwards;
}
[data-pixelize].is-typing::after { opacity: 1; }
[data-pixelize].is-done::after { opacity: 0; }
@keyframes pixelize-wipe {
  from { -webkit-clip-path: inset(0 100% 0 0);
                 clip-path: inset(0 100% 0 0); }
  to   { -webkit-clip-path: inset(0 0% 0 0);
                 clip-path: inset(0 0% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-pixelize] { clip-path: none !important; -webkit-clip-path: none !important; animation: none !important; }
  [data-pixelize]::after { display: none; }
}
.page-hero__tag {
  font-family: var(--font-kr);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  position: relative;
  padding-left: 76px;
}
.page-hero__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 52px;
  height: 2px;
  background: var(--ink-900);
  transform: translateY(-50%);
}
.page-hero__org {
  font-family: var(--font-kr);
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  padding: 14px 0;
  border-top: 1px solid rgba(26, 23, 20,0.10);
  border-bottom: 1px solid rgba(26, 23, 20,0.10);
}
.page-hero__org strong {
  font-weight: 700;
  color: var(--ink-900);
}
.page-hero__org-sep {
  display: inline-block;
  margin: 0 14px;
  color: var(--ink-300);
}
@media (max-width: 720px) {
  .page-hero__tag { font-size: 15px; }
  .page-hero__org { font-size: 12.5px; }
}


/* ───────────────────────────────────────────────
   styles.css L6333-6407 — ai-hero-bg full-bleed 배경 비디오 (hero 변형)
   ─────────────────────────────────────────────── */
/* ai-video.php — Hero with full-bleed background video */
.ai-hero-bg {
  position: relative;
  width: 100%;
  min-height: 72vh;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--white);
  display: flex;
  align-items: center;
}
.ai-hero-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ai-hero-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(26, 23, 20,0.70) 0%, rgba(26, 23, 20,0.45) 40%, rgba(26, 23, 20,0.75) 100%),
    radial-gradient(60% 60% at 25% 50%, rgba(26, 23, 20,0.55) 0%, rgba(26, 23, 20,0) 70%);
  pointer-events: none;
}
.ai-hero-bg__video { filter: brightness(0.78) saturate(1.05); }
.ai-hero-bg__inner {
  position: relative;
  z-index: 2;
  padding-block: 120px;
  max-width: var(--container-max, 1280px);
}
.ai-hero-bg__title {
  font-family: var(--font-kr);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--white);
  margin: 0 0 24px;
  max-width: 18ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.ai-hero-bg__title em {
  font-style: normal;
  color: var(--white);
  font-weight: 800;
}
.ai-hero-bg__sub {
  font-family: var(--font-kr);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,0.86);
  margin: 0 0 36px;
  max-width: 48ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.ai-hero-bg__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .ai-hero-bg { min-height: 80vh; }
  .ai-hero-bg__inner { padding-block: 80px; }
}

/* ───────────────────────────────────────────────
   WP 추가 — mock 비디오 클릭 → 비디오 모달 트리거 레이어
   ─────────────────────────────────────────────── */
.block_hero__mock-modal-trigger {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}