/* 첫 화면 글 상자 고급화 (2026-10-09 주인 요청 "단지홈페이지 메인화면 좀더 고급스럽게")
   premium.css 다음에 불러 그 위에 덧씌운다. 색은 단지마다 premium.css 의 --lux-* 값을 그대로 쓴다(단지별 색 유지).
   빨강·베이지 통 상자 → 어두운 반투명 카드 + 금색 실선, 칩·부제는 상자 대신 가는 선. 되돌리려면 index.html 의 hero-lux.css 줄만 지우면 된다. */

/* 사진 위쪽을 살짝 밝혀 글이 또렷하게 */
.op-hero .op-hero-bg::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 58%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 100%); }
.op-hero .op-hero-copy { z-index: 3; }

/* 칩: 검은 띠 → 위아래 금색 실선 + 마름모 */
.op-hero .op-hero-copy .hc-chip { background: transparent; color: var(--lux-ink); padding: 9px 4px 8px; font-weight: 600; letter-spacing: .2em;
  border-top: 1px solid color-mix(in srgb, var(--lux-gold) 75%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--lux-gold) 75%, transparent); }
.op-hero .op-hero-copy .hc-chip::before, .op-hero .op-hero-copy .hc-chip::after { content: "◆"; display: inline-block; margin: 0 .7em; font-size: .62em; vertical-align: .18em; color: var(--lux-gold); letter-spacing: 0; }

/* 큰 제목: 조금 가볍게, 부드러운 빛 그림자 */
.op-hero .op-hero-copy .hc-tit { font-weight: 700; letter-spacing: -.03em; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 36px rgba(255,255,255,.65); }

/* 부제: 흰 상자 → 유리 느낌 띠 + 금색 세로선 */
.op-hero .op-hero-copy .hc-sub { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75); border-left: 2px solid var(--lux-gold); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); font-weight: 600; letter-spacing: .01em; }

@media (max-width: 768px) {
  .op-hero .op-hero-copy .hc-chip { letter-spacing: .12em; padding: 7px 2px 6px; }
  .op-hero .op-hero-copy .hc-chip::before, .op-hero .op-hero-copy .hc-chip::after { margin: 0 .5em; }
  .op-hero .op-hero-copy .hc-sub { border: 1px solid rgba(255,255,255,.8) !important; border-bottom: 1px solid color-mix(in srgb, var(--lux-gold) 70%, transparent) !important; }

  /* 분양 요약: 빨강·베이지 두 상자 → 어두운 반투명 카드 한 장 */
  .op-hero .hc-notice { position: relative; width: min(90%, 370px); margin-top: 20px; padding: 0;
    background: linear-gradient(160deg, color-mix(in srgb, var(--lux-ink) 90%, transparent), color-mix(in srgb, var(--lux-ink) 76%, transparent));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--lux-gold) 60%, transparent); box-shadow: 0 22px 44px -20px rgba(0,0,0,.6); }
  .op-hero .hc-notice::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--lux-gold) 22%, transparent); pointer-events: none; }
  .op-hero .hn-main { background: transparent !important; box-shadow: none !important; padding: 18px 16px 14px !important; color: #f6ecdc; }
  .op-hero .hn-main p { font-size: 16.5px !important; font-weight: 600; letter-spacing: -.01em; }
  .op-hero .hn-main b { color: var(--lux-gold2) !important; font-family: var(--font-serif); font-weight: 800; font-size: 1.2em; letter-spacing: -.02em; }
  .op-hero .hn-main hr { width: 64% !important; margin: 9px auto !important; border: 0 !important; height: 1px;
    background: linear-gradient(90deg, transparent, var(--lux-gold), transparent); }
  .op-hero .hn-sub { background: rgba(255,255,255,.05) !important; box-shadow: none !important; margin: 0 !important; padding: 12px 12px 11px !important;
    border-top: 1px solid color-mix(in srgb, var(--lux-gold) 35%, transparent); color: #efe4d2; }
  .op-hero .hn-sub p { font-size: 15px !important; font-weight: 600; }
  .op-hero .hn-sub b { color: var(--lux-gold2) !important; font-family: var(--font-serif); font-weight: 800; }
  .op-hero .hn-main small, .op-hero .hn-sub small { color: #e6d9c6; opacity: .72; letter-spacing: .02em; }
  /* 롯데는 예전에 안내문을 숨겼다(premium.css 끝 display:none). 2026-10-09 주인 요청 "롯데 캐슬도 통일"로 다시 보인다. */
  .op-hero .hc-notice .hn-note { display: block !important; }
  .op-hero .hn-note { margin: 0 !important; padding: 8px 14px 11px; color: rgba(236,224,206,.62) !important; border-top: 1px solid color-mix(in srgb, var(--lux-gold) 20%, transparent); }
}
@media (max-width: 380px) {
  .op-hero .hn-main { padding: 14px 12px 11px !important; } .op-hero .hn-main p { font-size: 15px !important; }
  .op-hero .hn-sub p { font-size: 14px !important; }
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  @media (max-width: 768px) { .op-hero .hc-notice { background: rgba(30,18,12,.84); border-color: rgba(195,154,107,.6); } }
}

/* 스크롤할 때 사진·글이 늦게 뜨던 것 (2026-10-09 주인 지적 "마우스 스크롤 할때 이미지가 늦게 떠")
   나타나기 효과가 1.1초 흐림+34px 올라오기였다. 흐림을 없애고 0.45초·14px 로 줄인다. 순서대로 늦게 뜨던 지연도 줄인다. */
[data-reveal] { transform: translateY(14px); filter: none !important; transition: opacity .45s ease, transform .45s ease !important; }
li[data-reveal]:nth-child(n) { transition-delay: 0s !important; }

/* 그래도 스크롤을 못 따라온다는 주인 말(2026-10-09) - 나타나기 효과를 아예 끈다. 사진·글이 처음부터 제자리에 보인다. */
[data-reveal], [data-reveal].revealed { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* 스크롤 효과를 '사진이 천천히 제자리로' 로 (2026-10-09 주인 요청 "더 어울리는 효과").
   사진·글은 처음부터 보인다(투명하게 시작하지 않으니 스크롤을 못 따라와 늦게 뜨는 일이 없다).
   화면에 들어온 묶음의 사진만 1.06배에서 1.6초에 걸쳐 제 크기로 - 모델하우스 영상의 느린 줌아웃 느낌. 글자는 움직이지 않는다. */
[data-reveal] img { transform: scale(1.06); transition: transform 1.6s cubic-bezier(.16,.8,.24,1) !important; will-change: transform; }
[data-reveal].revealed img { transform: scale(1); }
[data-reveal] .op-fig, [data-reveal].op-fig, [data-reveal] .op-wide, [data-reveal].op-wide { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { [data-reveal] img, [data-reveal].revealed img { transform: none; transition: none !important; } }