/* ===================================================================
   WUAZEN 하위 페이지 — 이미지 적용 레이어 (2026-07-26)
   ★대표님 지시로 kie.ai 나노바나나로 직접 생성한 이미지를 각 페이지에 배치.
   홈(home.css)과 같은 처리: 이미지 한 장 + 글자 쪽을 눌러 주는 스크림.
   style.css 뒤에 로드된다.
   =================================================================== */

/* ── 페이지 히어로 이미지 ───────────────────────────────────── */
.page-hero { position: relative; overflow: hidden; }
.sub-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.8; z-index: 0;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(13,27,42,0.96) 0%, rgba(13,27,42,0.88) 36%, rgba(13,27,42,0.46) 66%, rgba(13,27,42,0.16) 100%);
}
.page-hero-inner { position: relative; z-index: 2; }

@media (max-width: 899px) {
  .sub-hero-img { opacity: 0.5; }
  .page-hero::after { background: linear-gradient(180deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.86) 55%, rgba(13,27,42,0.92) 100%); }
}

/* ── 자동화 적용 예시 카드(이미지 + 설명) ───────────────────── */
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.ex-card {
  background: var(--white); border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 520ms var(--ease-lux), box-shadow 520ms var(--ease-lux), border-color 220ms ease-out;
}
.ex-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 30px 60px -36px rgba(13,27,42,0.42); }
.ex-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--navy); }
.ex-body { padding: clamp(22px, 2.4vw, 30px); }
.ex-tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em;
  color: #8A6A20; border: 1px solid rgba(201,168,76,0.5); border-radius: 999px; padding: 4px 10px;
}
.ex-card h3 { margin-top: 14px; font-size: 1.1875rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; word-break: keep-all; }
.ex-card p { margin-top: 12px; font-size: 0.9375rem; line-height: 1.75; color: var(--text-muted); word-break: keep-all; }

@media (max-width: 899px) {
  .ex-grid { grid-template-columns: 1fr; }
}

/* ── 본문 삽입 이미지 ───────────────────────────────────────── */
.sub-figure { margin-top: clamp(34px, 4vw, 56px); }
.sub-figure img {
  display: block; width: 100%; border-radius: 10px; border: 1px solid var(--border-light);
}
.section-navy .sub-figure img { border-color: rgba(255,255,255,0.12); }
.sub-figure figcaption {
  margin-top: 14px; font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.01em;
}
.section-navy .sub-figure figcaption { color: rgba(247,246,241,0.6); }

/* ===================================================================
   AI 오케스트레이션 조직도 (2026-07-26)
   출처: 서버(COO) 대외공개용 초안 — 고객 → 총괄 오케스트레이터 → 실행 5역할
        → 품질검증(QA) → 취합·납품. 민감정보(모델·서버·채널) 비공개 원칙 유지.
   =================================================================== */
.orch { margin-top: clamp(40px, 5vw, 64px); }
.orch-row { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); }
.orch-node {
  position: relative; text-align: center;
  border: 1px solid rgba(201,168,76,0.42); border-radius: 10px;
  background: rgba(255,255,255,0.035); padding: 18px 22px; min-width: 168px;
  transition: border-color 240ms ease-out, background 240ms ease-out, transform 420ms var(--ease-lux);
}
.orch-node:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); transform: translateY(-3px); }
.orch-node .r { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; }
.orch-node .n { margin-top: 8px; font-size: 1.0625rem; font-weight: 800; color: var(--ivory); letter-spacing: -0.02em; word-break: keep-all; }
.orch-node .d { margin-top: 8px; font-size: 0.8125rem; line-height: 1.6; color: rgba(247,246,241,0.66); word-break: keep-all; }

.orch-node.lead { border-color: var(--gold); background: rgba(201,168,76,0.13); min-width: 300px; }
.orch-node.lead .n { font-size: 1.3125rem; }
.orch-node.client { min-width: 132px; border-style: dashed; }
.orch-node.qa { min-width: 300px; }
.orch-node.out { min-width: 360px; border-color: rgba(247,246,241,0.35); }

.orch-link { display: block; width: 1px; height: clamp(22px, 3vw, 34px); margin: 0 auto; background: rgba(201,168,76,0.5); }
.orch-link.fan { position: relative; height: clamp(26px, 3.4vw, 38px); }
.orch-link.fan::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: rgba(201,168,76,0.35);
}
.orch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.orch-grid .orch-node { min-width: 0; padding: 18px 14px; }

.orch-flow { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.orch-flow div { padding-top: 16px; border-top: 1px solid rgba(201,168,76,0.3); }
.orch-flow b { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--gold); }
.orch-flow span { display: block; margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: rgba(247,246,241,0.78); word-break: keep-all; }

@media (max-width: 1023px) {
  .orch-grid { grid-template-columns: repeat(2, 1fr); }
  .orch-flow { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .orch-node.lead, .orch-node.qa, .orch-node.out { min-width: 0; width: 100%; }
}
@media (max-width: 599px) {
  .orch-grid { grid-template-columns: 1fr; }
  .orch-flow { grid-template-columns: 1fr; }
}