/* 전국판 단지 홈페이지: 롯데캐슬 사이트 틀 위에 덧붙이는 것 (2026-10-13) */
/* 로고: 흰 글씨 로고는 머리(흰 바탕)에서 색을 뒤집고, 바닥글(어두운 바탕)에서는 모두 흰색으로 */
.site-header .logo img.lg-inv{filter:invert(1)}
/* 바닥글(어두운 바탕): 어두운 글씨 로고는 색을 뒤집되 색상은 유지(배지 안 글씨가 사라지지 않게), 원래 흰 로고는 그대로 */
.site-footer .ft-logo img.lg-dk{filter:invert(1) hue-rotate(180deg) brightness(1.08)!important}
.site-header .logo-txt a{display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:var(--c-ink,#222);line-height:1.15}
.site-header .logo-txt small{font-size:11px;letter-spacing:.14em;color:var(--c-accent,#b8975a);font-weight:700}
.site-header .logo-txt b{font-family:var(--font-sans);font-size:22px;font-weight:800;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.site-footer .ft-logo-txt b{font-family:var(--font-sans);font-size:22px;color:#fff}
.op-hero-bg img{width:100%;height:100%;object-fit:cover}
.op-fig img{width:100%;height:auto}
.nat-map{height:440px;background:#ece8e1;display:flex;align-items:center;justify-content:center;color:#8a7f70;border:1px solid var(--c-line,#e2e2e2)}
.nat-map a{color:var(--c-primary);font-weight:700}
.nat-map-sub{max-width:var(--maxw,1100px);margin:30px auto 0}
.gal-grid img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.op-gal button img{aspect-ratio:3/2;object-fit:cover}
.k-ptab .info-table td,.k-imgtxt .info-table td{text-align:center}
@media (max-width:1024px){.site-header .logo-txt b{font-size:18px;max-width:58vw}.site-header .logo-txt small{font-size:10px}}
@media (max-width:768px){.nat-map{height:320px}}
/* 2026-10-13 휴대폰에서 평면 탭 글씨('평면 1')가 두 줄로 넘침 → 한 줄에 3개씩, 글씨는 한 줄 */
.op-tabs button,.sub-content .tabs button{white-space:nowrap}
@media (max-width:768px){.op-tabs button{flex:0 0 calc((100% - 16px) / 3);padding:0 6px}.sub-content .tabs{flex-wrap:wrap}.sub-content .tabs button{flex:0 0 calc((100% - 12px) / 3);min-width:0;padding:0 6px}}
/* 2026-10-13 브랜드 로고만 있는 단지(힐스테이트): 브랜드 로고 + 단지 이름 */
.logo.logo-nm a{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.site-header .logo.logo-nm img{max-width:150px;object-fit:contain;object-position:left center}
body[data-dh] .site-header .logo.logo-nm .lg-name{color:#fff;border-left-color:rgba(255,255,255,.22)}
@media (min-width:1025px) and (max-width:1440px){.site-header .logo.logo-nm{flex:0 1 auto;min-width:0}.site-header .logo.logo-nm img{max-width:120px}.site-header .logo.logo-nm .lg-name{font-size:17px;line-height:1.25;max-width:200px;white-space:normal;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.site-header .gnb a.d1{white-space:nowrap;padding-inline:6px}}
.logo.logo-nm .lg-name{font-family:var(--font-sans);font-size:21px;font-weight:800;color:var(--c-ink,#222);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;padding-left:12px;border-left:1px solid var(--c-line,#ddd)}
.ft-logo.logo-nm{display:flex!important;flex-direction:row!important;align-items:center;gap:12px;flex-wrap:wrap}
.ft-logo.logo-nm .lg-name{font-family:var(--font-sans);font-size:21px;font-weight:800;color:#fff}
@media (max-width:1024px){.logo.logo-nm .lg-name{font-size:17px;max-width:52vw;padding-left:10px}.logo.logo-nm a{gap:10px}.site-header .logo.logo-nm{flex:1 1 auto;min-width:0}.site-header .logo.logo-nm img{flex:0 1 auto;min-width:0;max-width:34vw;object-fit:contain;object-position:left center}.site-header .logo.logo-nm .lg-name{flex:0 1 auto;min-width:0;max-width:none}.site-header .menu-btn{flex:0 0 auto}}
@media (max-width:480px){.site-header .logo.logo-nm img{max-width:27vw;max-height:30px}.site-header .logo.logo-nm .lg-name{font-size:15px;padding-left:8px}.logo.logo-nm a{gap:8px}}
/* 2026-10-13 띄어쓰기 없는 긴 단지명(산곡역자이힐스테이트앤하늘채)이 휴대폰에서 제목 칸을 넘어 화면이 옆으로 밀림 → 넘칠 때만 줄바꿈 */
.op-tit,.op-tit b,.hc-tit,.op-hero-tit,.page-title h1,.kp-bk b{overflow-wrap:anywhere}
/* 2026-10-13 상가 사이트 하단 메뉴: 전화연결·분양상담 두 칸 */
.mobile-bar.mb2{grid-template-columns:1fr 1fr!important}.mobile-bar.mb2 a{display:flex;align-items:center;justify-content:center;font-size:16px}
/* 2026-10-17 주인 "정렬이 깨짐": 바닥글 왼쪽(로고+이름+개인정보 단추)이 가로로 길어져 가운데 안내글이 좁은 기둥이 되던 것 → 왼쪽은 세로로 쌓고, 안내글이 남는 폭을 씀 */
@media (min-width:1025px){.site-footer .ft-inner{align-items:flex-start}.site-footer .ft-logo.logo-nm{flex-direction:column!important;align-items:flex-start!important;flex:0 1 300px;min-width:0}.site-footer .ft-logo.logo-nm .lg-name{white-space:normal}.site-footer .ft-info{flex:1 1 auto;min-width:0;max-width:640px}.site-footer .ft-right{flex:0 0 auto;align-items:flex-end}}
/* 아래 지역 링크(seo-links) 긴 이름이 줄바꿈 안 돼 휴대폰 화면이 7px 밀리던 것 */
.seo-links a{white-space:normal!important;overflow-wrap:anywhere}

/* 첫 화면: 단지 이름 + 가는 세로선 + 흰 로고, 가운데 (2026-10-18 주인 "전국단지도" — 광주 단지 사이트와 같은 틀) */
.op-hero .op-hero-bg::before{top:0!important;bottom:0!important;left:0!important;right:0!important;width:auto!important;height:auto!important;background:linear-gradient(180deg,rgba(10,12,18,.28) 0%,rgba(10,12,18,.12) 38%,rgba(10,12,18,0) 56%)!important}
.op-hero .op-hero-copy{display:flex!important;flex-direction:column!important;align-items:center!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important;width:min(900px,88vw)!important;max-width:none!important;top:clamp(56px,10vh,110px)!important;padding:0!important;border:0!important;text-align:center!important}
.op-hero .op-hero-copy .hc-chip,.op-hero .op-hero-copy .hc-sub,.op-hero .op-hero-copy .hc-deal,.op-hero .op-hero-copy .hc-notice{display:none!important}
.op-hero .op-hero-copy .hc-tit{order:1;margin:0!important;font-family:var(--font-serif,"Nanum Myeongjo",serif)!important;width:100%!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font-size:clamp(30px,2.6vw,44px)!important;font-weight:700!important;line-height:1.36!important;letter-spacing:-.02em!important;color:#fff!important;-webkit-text-fill-color:#fff!important;filter:none!important;word-break:keep-all;text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.18)!important}
.op-hero .op-hero-copy::after{content:"";order:2;display:block;flex:0 0 auto;width:1px;height:96px;margin:30px 0 0;background:rgba(255,255,255,.85);transform-origin:50% 0;animation:hxDrop 1.2s .9s cubic-bezier(.2,.7,.2,1) both}
.op-hero .op-hero-copy .hc-logo{order:3;display:block;max-width:min(340px,72vw);max-height:104px;width:auto;height:auto;margin:28px 0 0;filter:brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 6px 18px rgba(0,0,0,.32));animation:hxFade 1s 1.6s ease both}
@keyframes hxDrop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hxFade{from{opacity:0}to{opacity:1}}
@media (max-width:1024px){.op-hero .op-hero-copy{top:clamp(40px,9vh,80px)!important}.op-hero .op-hero-copy .hc-tit{font-size:clamp(23px,6.4vw,32px)!important}.op-hero .op-hero-copy::after{height:64px;margin-top:22px}.op-hero .op-hero-copy .hc-logo{max-height:72px;margin-top:20px}}
@media (prefers-reduced-motion:reduce){.op-hero .op-hero-copy::after,.op-hero .op-hero-copy .hc-logo{animation:none}}
/* 원래 흰 글씨 로고(lg-inv)는 그대로 흰색 */
.op-hero .op-hero-copy .hc-logo.lg-inv{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 6px 18px rgba(0,0,0,.32))!important}

/* 첫 화면 사진이 없는 단지(공식 홈페이지 없음): 가운데 큰 제목 숨기고 기존 안내판만 */
.op-hero:not(:has(.op-hero-bg)) .op-hero-copy{display:none!important}
/* 버튼 테두리: 원본 단지 사이트와 같이 금색 1px */
.op-btns .op-btn-red{border:1px solid var(--lux-gold)}
.op-btns .op-btn:is(:hover,:focus-visible){border-color:var(--lux-gold)!important}
/* 2026-10-19 위 메뉴 글씨 보통 굵기 (주인 "메뉴 굵기 보통") */
html body .site-header .gnb > ul > li:not(.gnb-reg-m) > a.d1{font-weight:400!important}
header .hd-tel .ico-tel{position:relative;top:2px}  /* 2026-10-19 전화 아이콘을 숫자 가운데에 (주인 "정렬 안맞음") */
/* 2026-10-19 가운데 로고 크기를 광주 단지와 통일 (주인 "전국단지도 통일 시켜줘") — PC 360×67 안, 휴대폰 화면 폭 70%·높이 50px 안 */
.op-hero .op-hero-copy .hc-logo{max-width:min(360px,86vw)!important;max-height:67px!important}
@media (max-width:768px){.op-hero .op-hero-copy .hc-logo{max-width:70vw!important;max-height:50px!important}}
/* 다시 1.5배, 가로만 제한 (주인 "다 1.5배 / 가로크기만 제한") */
.op-hero .op-hero-copy .hc-logo{max-width:min(450px,86vw)!important;max-height:84px!important}
@media (max-width:768px){.op-hero .op-hero-copy .hc-logo{max-width:70vw!important;max-height:63px!important}}
/* 가운데 로고 그림자 없앰 (주인 "그림자 없애줘") — 흰색으로만 */
.op-hero .op-hero-copy .hc-logo{filter:brightness(0) invert(1)!important}
.op-hero .op-hero-copy .hc-logo.lg-inv{filter:none!important}
/* 10-19 주인 "글씨사이즈 크게": 아래 전체 메뉴 글씨 키움 (광주 단지와 같은 15/16px, 휴대폰 14/15) */
.seo-links p>*{font-size:15px!important}
.seo-links p b{font-size:16px!important}
@media (max-width:768px){.seo-links p>*{font-size:14px!important}.seo-links p b{font-size:15px!important}}
/* 10-19 주인 "전국단지 포함 / 모바일은 아니야": PC 에서만 가운데 로고 그림자 + 그림자만 오버레이(hard-light) — 광주 단지와 같게 */
@media (min-width:769px){.op-hero .op-hero-copy .hc-logo{filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 4px 10px rgba(0,0,0,.45)) drop-shadow(0 8px 30px rgba(0,0,0,.4))!important;mix-blend-mode:hard-light}.op-hero .op-hero-copy .hc-logo.lg-inv{filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 4px 10px rgba(0,0,0,.45)) drop-shadow(0 8px 30px rgba(0,0,0,.4))!important}}
/* 10-19 주인 "로고 크기 1.5배 한거 맞아? / 더 작아졌는데": 로고 그림이 작으면(예: 광명 177×43) 최대 크기만 정해선 안 커짐 — 광주 단지와 같은 상자(높이 84, 휴대폰 63)에 꽉 차게 */
.op-hero .op-hero-copy .hc-logo{height:84px!important;width:auto!important;object-fit:contain}
@media (max-width:768px){.op-hero .op-hero-copy .hc-logo{height:63px!important}}
/* 10-19 주인 "드롭다운 … 화살표 오른쪽 여백 없는거 넣어주기": 고르기 칸 모두 아래 화살표(오른쪽 16px 여백) — 다크 단지는 dh-lux.css */
html body:not([data-dh]) select:not([multiple]){-webkit-appearance: none !important; appearance: none !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 14px 8px !important; padding-right: 44px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E") !important}

/* ===== 2026-10-19 첫 화면 SCROLL DOWN 도는 원 — 단지 사이트 전체(원래 13곳·dhome 다크 13곳·전국 단지) 공통 (주인 "이 효과 단지사이트 전체에", 범위 "전국 단지까지 전부")
   숨겨 둔 .hc-sub 를 자리로 씀(글자는 감춤): ::after = 도는 글자 원, ::before = 가운데 화살표(고정).
   글 묶음(.op-hero-copy)을 첫 화면 사진 아래 끝까지 늘리고 원을 맨 아래(PC 40px · 태블릿 30px · 휴대폰 50px 위)에 붙임 — 화면이 낮아 자리가 모자라면 로고 아래로 밀려 겹치지 않음
   사진 높이 = 폭 × 820/1920 (PC·태블릿), 폭 × 1185/720 (휴대폰), 글 묶음 top 만큼 뺌 ===== */
html body .op-hero .op-hero-copy{height:calc(100vw * 820 / 1920 - clamp(56px, 10vh, 110px))!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx){display:block!important;order:9!important;position:relative!important;flex:0 0 auto!important;box-sizing:content-box!important;width:148px!important;height:148px!important;margin:auto 0 40px!important;padding:0!important;border:0!important;border-top:20px solid transparent!important;font-size:0!important;line-height:0!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;outline:0!important;transform:none!important;opacity:1;animation:dhScrollIn 1s 2.1s ease both!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::before,html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::after{content:""!important;position:absolute!important;inset:0!important;display:block!important;background-repeat:no-repeat!important;background-position:center!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(0,0,0,.35))}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cpath d='M20 2v50M7 39l13 13 13-13' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:26px 38px!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::after{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpath id='c' d='M100 100m-82 0a82 82 0 1 1 164 0a82 82 0 1 1-164 0'/%3E%3C/defs%3E%3Ctext font-family='Arial,Helvetica,sans-serif' font-size='15.5' font-weight='400' letter-spacing='3' fill='%23ffffff'%3E%3CtextPath href='%23c' textLength='510' lengthAdjust='spacing'%3ESCROLL DOWN - SCROLL DOWN - SCROLL DOWN - %3C/textPath%3E%3C/text%3E%3C/svg%3E")!important;background-size:contain!important;animation:dhScrollSpin 16s linear infinite!important}
@keyframes dhScrollSpin{to{transform:rotate(360deg)}}
@keyframes dhScrollIn{from{opacity:0}to{opacity:1}}
@media (max-width:1024px){
html body .op-hero .op-hero-copy{height:calc(100vw * 820 / 1920 - clamp(40px, 9vh, 80px))!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx){width:120px!important;height:120px!important;margin-bottom:30px!important;border-top-width:14px!important}
}
@media (max-width:768px){
html body .op-hero .op-hero-copy{height:calc(100vw * 1185 / 720 - clamp(40px, 9vh, 80px))!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx){width:104px!important;height:104px!important;margin-bottom:50px!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::before,html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::after{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::before{background-size:20px 30px!important}
}
@media (prefers-reduced-motion:reduce){html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::after{animation:none!important}}
/* 자리가 모자라면(로고가 큰 곳·낮은 화면) 세로선과 원이 줄어듦 — 원은 늘 사진 아래 끝에서 정한 간격 위 */
html body .op-hero .op-hero-copy::after{flex:0 1 auto!important;min-height:18px!important}
html body .op-hero .op-hero-copy .hc-sub:not(#dhx){flex:0 1 auto!important;min-height:84px!important}
@media (max-width:768px){html body .op-hero .op-hero-copy .hc-sub:not(#dhx){min-height:72px!important}}
/* 10-19 주인 "음영효과는 빼줘": 원·화살표 그림자 없음 */
html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::before,html body .op-hero .op-hero-copy .hc-sub:not(#dhx)::after{filter:none!important}
/* 10-20 주인 "공유, top도 멈추면 사라지게": 휴대폰에서 화면을 내리는 동안만 보이고 멈추면 숨김 (layout.js 가 body.hs-idle 을 붙임) */
@media (max-width:1024px){html body .hs-backtop,html body .hs-share-m{transition:opacity .3s ease!important}html body.hs-idle .hs-backtop,html body.hs-idle .hs-share-m{opacity:0!important;pointer-events:none!important}}
/* 10-20 주인 "전국단지에도": 첫 화면 큰 제목 위 지역 이름 한 줄 (광주 단지와 같은 모양) */
html body .op-hero .op-hero-copy .hc-local{display:block!important;margin:0 0 10px!important;font-size:clamp(15px,1.2vw,19px)!important;font-weight:500!important;letter-spacing:.04em!important;line-height:1.4!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.5)!important;word-break:keep-all!important}
/* 10-20 주인 "전국단지도": 휴대폰 아래 메뉴 위쪽 얇은 선을 금색 대신 단지 테마색으로 (관리자 테마색을 바꾸면 같이 바뀜) */
@media (max-width:1024px){html body:not([data-dh]) .mobile-bar::before{background:linear-gradient(90deg,transparent,var(--mb-line,color-mix(in srgb,var(--c-primary) 55%,#fff)) 50%,transparent)!important}}
/* 10-20 주인 "상단줄도 저느낌으로 색만": 머리글 아래 얇은 선도 금색 대신 테마색 (아래 메뉴 선과 같은 색) */
html body:not([data-dh]) .site-header::after{background:linear-gradient(90deg,transparent,var(--mb-line,color-mix(in srgb,var(--c-primary) 55%,#fff)) 50%,transparent)!important}
/* 10-20 주인 "선이 살짝 아래로 내려왔네": 사진 아래 판(op-hero-panel)의 윗테두리 1px 아래에 빛줄 선이 따로 그어져 두 줄로 보이던 것 → 빛줄 선을 테두리 자리로 올림 */
html body:not([data-dh]) .op-hero-panel::before{top:-1px!important}
/* 10-20 주인 "여기도": 바닥글 윗선도 테마색 + 테두리 자리로 올림(두 줄로 보이던 것) */
html body:not([data-dh]) .site-footer::before{top:-1px!important;background:linear-gradient(90deg,transparent,var(--mb-line,color-mix(in srgb,var(--c-primary) 55%,#fff)) 50%,transparent)!important}
/* 10-21 휴대폰 글자 잘림 점검: 단지명이 긴 곳(천안·청주 아이파크, 숭의역 노르웨이숲 등 10곳)은 머리글 이름이 "…"로 잘림 → 두 줄까지 보이게. 큰 제목은 화면 폭을 넘지 않게 줄바꿈 보장 */
@media (max-width:768px){
  html body .site-header .logo .lg-name{white-space:normal!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;line-height:1.2!important;font-size:14px!important;word-break:keep-all!important}
  html body .op-hero-copy .hc-tit,html body .op-hero-copy .hc-local,html body .op-hero-panel h1,html body .op-hero-panel .op-chip{max-width:100%!important;overflow-wrap:anywhere!important}
}
/* 10-21 휴대폰 '글자 크게' 설정(접근성 글꼴 확대)에서 페이지 폭이 넓어져 글자가 화면 밖으로 잘리던 것: 머리글 로고·바닥글 전화번호·카드 칸이 줄어들지 못해 폭을 밀어냄 → 줄어들고 줄바꿈되게 */
@media (max-width:768px){
  html body .site-header .logo,html body .site-header .logo a{min-width:0!important;max-width:100%!important}
  html body main li,html body main [class*="grid"] > *,html body .site-footer li{min-width:0!important}
  html body .site-footer .ft-tel,html body .site-footer .ft-tel *{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
}
@media (max-width:768px){html body main p,html body main small,html body main td,html body main th,html body main li,html body main dd,html body main dt,html body main h2,html body main h3{overflow-wrap:anywhere}html body main table{max-width:100%}}
@media (max-width:768px){html body main a,html body main .js-tel-num,html body main dl{overflow-wrap:anywhere;max-width:100%}html body main .js-tel-num{white-space:normal!important}}
@media (max-width:768px){html body .kp-bv{white-space:normal!important;overflow-wrap:anywhere}}

/* 2026-10-22 태블릿에서 끝까지 내리면 바닥(진한색) 아래로 페이지 뒤 흰 바탕이 드러나던 것 → 뒤 바탕 아래쪽을 바닥 색으로 (위쪽은 흰색 그대로, 다크판 제외) */
html:has(> body:not([data-dh])) { background: linear-gradient(#fff 50%, var(--lux-ink, #1b1a19) 50%) fixed; }
html:has(> body:not([data-dh])) > body { background-color: #fff; }