/* official-main-site.css — 청라푸르지오.site(D1) 전용. 공식 메인 복제 구간(official-main.css)에서 사이트마다 다른 것만 여기에 둔다.
   - 이 사이트의 sticky 헤더(header.header, PC 80px·휴대폰 62px, 평소 불투명한 크림색)를 히어로 위에서 투명하게
   - 모바일 하단 바(.mobile-cta 65px) 높이
   - 사이트 전역 규칙(nav, small 등)이 .om 안으로 새는 것 상쇄
   - 기존 히어로 띠(#site-info 안의 .hero)의 h1 → p.hero-h1 에 같은 모양, 높이 줄이기 */


/* ── 헤더: 흐름 안의 sticky 헤더. 히어로 위에서는 투명(.is-scrolled 보다 이긴다). 영상 위에서는 흰 글자, 「아크원이란?」에서는 평소 글자색 ── */
html[data-om-hd] .header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
html[data-om-hd="clear"] .header,
html[data-om-hd="clear"] .header #global-nav a,
html[data-om-hd="clear"] .header .menu-toggle {
  color: #fff;
}
html[data-om-hd="clear"] .header #global-nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -1px #fff;
}
html[data-om-hd="clear"] .header #global-nav a[aria-current]:after {
  background: #fff;
}
html[data-om-hd="clear"] .header #global-nav .nav-cta {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
html[data-om-hd="clear"] .header .brand-bi {
  filter: brightness(0) invert(1);
}
@media (max-width: 900px) {
  /* 휴대폰 전체 메뉴(펼친 상태)는 평소 색 */
  html[data-om-hd="clear"] .header #global-nav.open {
    background: var(--paper);
  }
  html[data-om-hd="clear"] .header #global-nav.open a {
    color: var(--ink);
  }
  html[data-om-hd="clear"] .header #global-nav.open .nav-cta {
    color: var(--green);
    border-color: #9aa89a;
  }
}

/* ── 사이트 전역 규칙이 .om 안으로 새는 것: nav(flex, 13px), small(13px) ── */
.om nav.om-nav {
  display: none;
  gap: normal;
  font-size: 16px;
}
.om--stage nav.om-nav {
  display: block;
}

/* ── 히어로: 하단 바는 이 사이트의 실제 높이(65px, 600px 이하에서만 보인다) ── */
.om .om-hero {
  --bar: 0px;
}
@media (max-width: 600px) {
  .om .om-hero {
    --bar: calc(65px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 기존 히어로의 h1 → p.hero-h1: style.css·pass02.css·official-content.css 의 `.hero h1` 규칙 11개를 그대로 복사(원래 파일은 고치지 않는다) ── */
.hero .hero-h1{font-size:clamp(62px,8.6vw,144px);letter-spacing:-.065em;font-weight:400;line-height:.95;margin:35px 0 40px}
.hero .hero-h1 em{font-style:italic;letter-spacing:-.06em}
@media(min-width:1600px){.hero .hero-h1{margin-block:45px}}
@media(max-width:900px){.hero .hero-h1{font-size:clamp(70px,11vw,98px)}}
@media(max-width:600px){.hero .hero-h1{font-size:clamp(56px,14vw,84px);margin:35px 0 36px}}
.hero .hero-h1{font-family:var(--display);font-size:clamp(60px,7.2vw,108px);line-height:1.035;letter-spacing:-.065em;margin:0;font-weight:300}
.hero .hero-h1 strong{font-weight:500}
@media(max-width:1100px){.hero .hero-h1{font-size:75px}}
@media(max-width:900px){.hero .hero-h1{font-size:68px}}
@media(max-width:600px){.hero .hero-h1{font-size:clamp(51px,13.1vw,69px);line-height:1.045;letter-spacing:-.065em;margin:0;max-width:350px}}
.hero .hero-h1 .hero-korean{display:block;font-family:inherit;font-weight:400;line-height:1.4;letter-spacing:.07em}
/* ── 기존 히어로: 이제 본문 중간의 띠. 화면을 꽉 채우지 않게 높이만 줄인다(글자·이미지는 그대로) ── */
#site-info .hero.official-hero {
  height: auto;
  min-height: 0;
  max-height: none;
}
#site-info .hero.official-hero .hero-signature {
  min-height: 300px;
}
#site-info .hero.official-hero .scroll-hint {
  display: none;
}
@media (max-width: 600px) {
  #site-info .hero.official-hero {
    height: auto;
    min-height: 600px;
    max-height: none;
  }
}