@charset "utf-8";
/* ============================================================
   산수 한양립스 더 에비뉴 — 현장 전용 스타일
   2026-09-28 제작. 레퍼런스 템플릿 위에 덮어쓰는 층이다.
   브랜드: 남색 #1E2A59 / 배경남색 #2F2E58 / 금색 #E3B965 / 브라운 #3E2E1F
   ============================================================ */
:root{
  --brand-navy:#1E2A59;
  --brand-navy-deep:#2F2E58;
  --brand-gold:#E3B965;
  --brand-gold-light:#FFDA89;
  --brand-brown:#3E2E1F;
  --brand-ivory:#DFD7C8;
}

/* ══════════════════════════════════════════════════════════════
   🔴 레퍼런스가 쓰기만 하고 정의하지 않은 CSS 변수들 (2026-09-28)
   `--page-margin` `--header-height` `--main-inner-size` `--width`
   `--device-width` 는 레퍼런스 CSS 4개 어디에도 정의가 없다(전수 확인).
   정의가 없으면 `padding: 0 var(--page-margin)` 같은 규칙이 통째로 무효가 되어
   헤더 여백이 0 이 되고 로고가 화면 왼쪽 끝에 붙는다.
   ══════════════════════════════════════════════════════════════ */
:root{
  --page-margin: 40px;
  --header-height: 88px;
  --main-inner-size: 1680px;
  --width: 1920;
  --device-width: 100vw;
}
@media (max-width:1024px){
  :root{
    --page-margin: 20px;
    --header-height: 62px;
    --width: 768;
  }
}
@media (max-width:600px){
  :root{ --page-margin: 16px; --header-height: 56px; --width: 390; }
}


/* ── 히어로 타이틀 (레퍼런스의 SVG 로고타입 대체) ── */
.hero_title--text{
  display:flex; flex-direction:column; gap:.06em;
  margin:0; padding:0;
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;
  color:#fff;
  font-weight:800;
  font-size:clamp(34px,4.6vw,68px);
  line-height:1.16;
  letter-spacing:-.035em;
  text-shadow:0 2px 24px rgba(10,12,26,.45);
  white-space:nowrap;
}
.hero_title--text .hero_title_ln{ display:block; }
.hero_title--text em{
  font-style:normal;
  color:var(--brand-gold);
}
@media (max-width:1024px){
  .hero_title--text{ font-size:clamp(28px,7.4vw,44px); letter-spacing:-.04em; }
}
@media (max-width:360px){
  .hero_title--text{ font-size:26px; }
}

/* ── 히어로 포인트 ── */
.hero_points b{ color:var(--brand-gold); font-weight:800; }

/* ── 금색 강조 테마 (레퍼런스 theme-pink 를 대체) ── */
.premium_item.theme-gold .premium_label span,
.premium_item.theme-gold strong{ color:var(--brand-gold); }
.premium_item.theme-gold .premium_line{ background:var(--brand-gold); }
@media (max-width:1024px){
  .premium_item.theme-mo-gold .premium_label span,
  .premium_item.theme-mo-gold strong{ color:var(--brand-gold); }
  .premium_item.theme-mo-gold .premium_line{ background:var(--brand-gold); }
}

/* ── 푸터 시행/시공/분양대행 텍스트화 ── */
.footer_company_item{ display:inline-flex; align-items:center; gap:.35em; }
.footer_company_item em{ font-style:normal; opacity:.72; }
.footer_logo{ height:auto; max-height:46px; width:auto; }


/* ── 헤더 로고 ────────────────────────────────────────────────
   히어로 위(투명 헤더)  : 금색판 logo_hero.png
   흰 배경 헤더(.bk/.on/.active) : 원본 남색판 logo.png
   🔴 filter:invert 를 쓰면 「산수」 캡슐이 흰색으로 채워져 글자가 사라진다.
      그래서 이미지 자체를 바꾼다(content:url).                      */
.temp_header_skin1 .header_logo{
  height:27px; width:auto; display:block;
  content:url('/assets/img/logo/logo_hero.png');
  filter:drop-shadow(0 1px 6px rgba(10,12,26,.35));
}
.temp_header_skin1.bk .header_logo,
.temp_header_skin1.on .header_logo,
.temp_header_skin1.active .header_logo{
  content:url('/assets/img/logo/logo.png');
  filter:none;
}
@media (max-width:1024px){
  .temp_header_skin1 .header_logo{ height:22px; }
}


/* ══════════════════════════════════════════════════════════════
   인트로 — 산수 한양립스 더 에비뉴 전용 (2026-09-28 신설)
   레퍼런스의 「착.」 글자 아트 연출을 걷어내고 우리 문구로 새로 짰다.
   남색 바탕 + 금색 강조. 총 약 3.4초, SKIP 가능.
   ══════════════════════════════════════════════════════════════ */
.sv-intro{
  position:fixed; inset:0; z-index:100100;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#1E2A59;
}
.sv-intro__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 620px at 18% 12%, rgba(227,185,101,.13), transparent 62%),
    radial-gradient(900px 520px at 86% 88%, rgba(227,185,101,.09), transparent 62%),
    linear-gradient(160deg,#243059 0%,#1E2A59 48%,#181F42 100%);
}
.sv-intro__stage{
  position:relative; text-align:center; padding:0 24px;
  color:#fff;
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;
}
/* 상단 마크 */
.sv-intro__mark{
  display:block; margin:0 auto 26px; width:54px;
  opacity:0; transform:translateY(10px) scale(.92);
}
.sv-intro__mark img{ width:100%; height:auto; display:block; }
/* 리드 문구 (교체형) */
.sv-intro__lead{
  position:relative; height:1.6em; margin-bottom:18px;
  font-size:clamp(13px,1.55vw,17px); font-weight:600;
  letter-spacing:.06em; color:rgba(255,255,255,.66);
}
.sv-intro__lead-item{
  position:absolute; left:50%; top:0; transform:translate(-50%,8px);
  white-space:nowrap; opacity:0;
}
/* 메인 타이틀 */
.sv-intro__title{
  display:flex; flex-direction:column; gap:.08em;
  font-size:clamp(30px,5.0vw,66px); font-weight:800;
  line-height:1.2; letter-spacing:-.04em; margin:0 0 26px;
}
.sv-intro__ln{ display:block; white-space:nowrap; }
.sv-intro__w{ display:inline-block; opacity:0; transform:translateY(16px); }
/* inline-block 은 끝 공백을 먹는다 → 금색 어절 앞에 간격을 직접 준다 */
.sv-intro__title em.sv-intro__w{ margin-left:.24em; }
.sv-intro__title em{ font-style:normal; color:#E3B965; }
/* 구분선 + 서명 */
.sv-intro__rule{
  display:block; width:0; height:2px; margin:0 auto 18px;
  background:#E3B965; opacity:.9;
}
.sv-intro__sig{
  font-size:clamp(12px,1.35vw,15px); font-weight:600;
  letter-spacing:.16em; color:rgba(255,255,255,.72);
  opacity:0; transform:translateY(8px);
}
/* SKIP */
.sv-intro__skip{
  position:absolute; right:clamp(18px,3vw,46px); bottom:clamp(18px,3vw,46px);
  width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(227,185,101,.5); background:rgba(255,255,255,.04);
  color:#E3B965; font-size:12px; font-weight:700; letter-spacing:.14em;
  cursor:pointer; opacity:0;
  transition:background .2s ease,border-color .2s ease;
}
.sv-intro__skip:hover{ background:rgba(227,185,101,.14); border-color:#E3B965; }
@media (max-width:1024px){
  .sv-intro__mark{ width:44px; margin-bottom:20px; }
  .sv-intro__title{ font-size:clamp(26px,7.4vw,40px); }
  .sv-intro__skip{ width:60px; height:60px; font-size:11px; }
}
@media (max-width:360px){
  .sv-intro__title{ font-size:24px; }
}
/* 인트로 동안 본문 스크롤 잠금 */
body.is-intro{ overflow:hidden; }
/* 모션 최소화 선호 */
@media (prefers-reduced-motion:reduce){
  .sv-intro__mark,.sv-intro__w,.sv-intro__sig,.sv-intro__skip{ opacity:1 !important; transform:none !important; }
  .sv-intro__rule{ width:56px !important; }
}


/* ══════════════════════════════════════════════════════════════
   🔴 정의 없이 쓰이던 유틸 클래스 (2026-09-28)
   레퍼런스 CSS 에 규칙이 없어서 `.hidden` 이 붙은 스크린리더용 제목이
   화면에 32px 검은 글씨로 그대로 노출되고 있었다(헤더 위에 겹쳐 보임).
   `.m-only` 도 정의가 없어 PC 에서 모바일 전용 줄바꿈이 그대로 먹었다.
   ══════════════════════════════════════════════════════════════ */
.hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  overflow:hidden !important; white-space:nowrap !important;
}
.m-only{ display:none; }
@media (max-width:1024px){
  .m-only{ display:inline; }
  br.m-only{ display:block; }
}