/* ============================================================
   page-unmanned.css — 무인시스템 페이지 (무인운영 브로슈어 v9 기반 전면 재구성)

   PDF 브로슈어 톤(오렌지/레드 포인트 + 다크 다이어그램)을 위한 *페이지 스코프*
   디자인 토큰 + 모든 섹션이 공유하는 공통 유틸리티.

   - 브랜드 전역 토큰의 SSOT 는 variables.css (architecture invariant). 여기엔
     무인 페이지 전용 톤만 둔다.
   - 섹션별 상세 스타일은 각 partials/unmanned/NN-*.html 내부 <style> 에 두고,
     클래스는 `um-s{섹션번호}-` prefix 로 충돌을 피한다 (디자이너 가이드 참조).
   ============================================================ */

:root {
  /* ── PDF 브로슈어 톤 (무인 페이지 스코프) ── */
  --um-orange:       #F15A24;
  --um-orange-2:     #F7941D;
  --um-orange-deep:  #E0451A;
  --um-red:          #E2231A;
  --um-cream:        #FBF4EA;
  --um-orange-soft:  #FFF1E8;
  --um-ink:          #1A1A1A;
  --um-grad:         linear-gradient(135deg, #FF7A2D 0%, #F15A24 55%, #E0451A 100%);
  --um-grad-soft:    linear-gradient(135deg, #FFF6EF 0%, #FFE6D2 100%);
}

/* ── 공통 컨테이너 (사이트 max-width 1200 규약 준수) ── */
.um-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── 섹션 래퍼 + 배경 변형 (PDF 페이지 간격 리듬) ── */
.um-sec { padding-block: clamp(56px, 8vw, 104px); }
.um-sec--cream { background: var(--um-cream); }
.um-sec--soft  { background: var(--um-orange-soft); }
.um-sec--gray  { background: var(--color-bg); }
.um-sec--dark  { background: var(--color-dark); color: #fff; }

/* ── 섹션 헤더: ▮ 막대 + 라벨 + 큰 제목 (PDF "▮제목" 스타일) ── */
.um-sec__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.um-sec--center .um-sec__head { margin-inline: auto; text-align: center; }

.um-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .02em;
  color: var(--um-orange-deep);
}
.um-eyebrow::before {
  content: "";
  width: 5px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--um-red);
}

.um-h2 {
  margin: .5rem 0 0;
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.55rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--um-ink);
}
.um-h2 em { font-style: normal; color: var(--um-orange); }

.um-lead {
  margin: .9rem 0 0;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-gray-2);
}

/* 다크 섹션 내 헤더/리드 색 보정 */
.um-sec--dark .um-h2 { color: #fff; }
.um-sec--dark .um-h2 em { color: var(--um-orange-2); }
.um-sec--dark .um-lead { color: rgba(255, 255, 255, .66); }

/* ── 재사용 토큰 컴포넌트 ── */
.um-pill {
  display: inline-block;
  padding: .5em 1.4em;
  border-radius: 999px;
  background: var(--um-grad);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: 0 6px 18px rgba(241, 90, 36, .28);
}

.um-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.um-num {
  display: inline-grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--um-grad);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(226, 35, 26, .25);
}

@media (max-width: 767px) {
  .um-wrap { padding-inline: 18px; }
}

/* ── 히어로 배경 사진 (.page-hero--photo) ─────────────────────────
   타이틀 영역 우측을 풀블리드 사진으로 채우고 위아래는 cover 로 crop.
   좌측: 완만한 그라데이션으로 텍스트(문구)와 겹치지 않게 페이드.
   오른쪽 모서리: 급격한 그라데이션으로 마무리. (mask 가 양끝을 동시 처리) */
.page-hero--photo .page-hero__photo {
  position: absolute;
  inset: 0 0 0 auto;              /* top/right/bottom:0, left:auto → 우측 정렬 */
  width: min(64%, 1180px);
  z-index: 0;                     /* page-hero__bg(-1) 위, __content(2) 아래 */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.45) 26%, #000 52%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.45) 26%, #000 52%, #000 90%, transparent 100%);
}
.page-hero--photo .page-hero__photo picture { display: block; width: 100%; height: 100%; }
.page-hero--photo .page-hero__photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;              /* 타이틀 높이에 맞춰 위아래 잘림 */
  object-position: 50% 42%;       /* 스크린(골프 코스) 중심을 화면에 */
}

/* 태블릿/모바일(≤1023px): 텍스트 가독 우선 — 사진을 은은한 배경으로 약화 */
@media (max-width: 1023px) {
  .page-hero--photo .page-hero__photo {
    width: 100%;
    opacity: .2;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  }
}