/* 사진과 여백이 중심인 홈. 사이트는 색 토큰으로만 톤을 바꾼다. */
.w-property-home {
    --w-property-home-radius: 18px;
    --w-property-home-overlay: linear-gradient(90deg, rgb(8 38 35 / 88%), rgb(8 38 35 / 46%) 58%, rgb(8 38 35 / 12%));
    /* 문구가 놓이는 아래쪽을 단계적으로 어둡게 하고 네 귀퉁이를 옅게 눌러 시선을 가운데로 모은다(앱과 같다). */
    --w-property-home-shade: linear-gradient(180deg, rgb(18 49 41 / 0%) 34%, rgb(18 49 41 / 25%) 66%, rgb(18 49 41 / 76%) 100%),
        radial-gradient(ellipse at 50% 42%, rgb(8 26 21 / 0%) 55%, rgb(8 26 21 / 24%) 100%);
    --w-property-home-on-image: var(--site-on-brand, #fff);
    --w-property-home-highlight: var(--site-accent-bright, #d9ed92);
    --w-property-home-surface: var(--site-bg, var(--wa-color-surface-default));
    --w-property-home-accent: var(--site-brand, var(--wa-color-brand-fill-loud));
    /* 앱(LivingHomePhoto)과 같은 전환 — 새 장은 1.10배에서 풀리고, 물러나는 장은 1.05배로 밀린다. */
    --w-property-home-transition: 1400ms;
    --w-property-home-enter-zoom: 1.1;
    --w-property-home-exit-zoom: 1.05;
    --w-property-home-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    color: var(--site-text, var(--wa-color-text-normal));
}
.w-property-home__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--w-property-home-radius);
    background: var(--site-brand-dark);
    padding: 0;
}
.w-property-home__cover { position: relative; isolation: isolate; min-width: 0; overflow: hidden; padding: 3rem 2rem 3rem; }
.w-property-home__cover::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--w-property-home-overlay); pointer-events: none; }
.w-property-home__cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--w-property-home-shade); pointer-events: none; }
.w-property-home__scenes { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* 사진은 전부 겹쳐 두고 보이는 장만 불투명하다. 전환은 대상 상태의 transition 으로만 일어난다 —
   비활성으로 돌아갈 때는 즉시 사라진다(이미 위 장이 완전히 덮은 뒤라 보이지 않는다). */
.w-property-home__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
    opacity: 0;
    transform: scale(var(--w-property-home-enter-zoom));
    transform-origin: var(--w-property-home-origin, 50% 50%);
    transition: none;
    will-change: opacity, transform;
    backface-visibility: hidden;
}
/* 사진마다 확대 중심을 달리 두어 같은 줌이 매번 다르게 보이게 한다(앱 _origins 와 같은 좌표). */
.w-property-home__image:nth-child(4n + 1) { --w-property-home-origin: 37.5% 42.5%; }
.w-property-home__image:nth-child(4n + 2) { --w-property-home-origin: 65% 56%; }
.w-property-home__image:nth-child(4n + 3) { --w-property-home-origin: 45% 65%; }
.w-property-home__image:nth-child(4n + 4) { --w-property-home-origin: 64% 37.5%; }
.w-property-home__image.is-active {
    z-index: 2;
    opacity: 1;
    transform: none;
    transition: opacity var(--w-property-home-transition) ease-in-out, transform var(--w-property-home-transition) var(--w-property-home-ease-out);
}
.w-property-home__image.is-leaving {
    z-index: 1;
    opacity: 1;
    transform: scale(var(--w-property-home-exit-zoom));
    transition: transform var(--w-property-home-transition) var(--w-property-home-ease-out);
}

.w-property-home__intro { position: relative; z-index: 1; color: var(--w-property-home-on-image); }
.w-property-home__eyebrow { margin: 0 0 1rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; }

/* 장면 표시 점 — 문구 바로 위. 활성은 길게 늘어난 알약, 나머지는 반투명 점(앱 _SceneDots). */
.w-property-home__pagination { display: flex; align-items: center; margin: 0 0 6px; }
.w-property-home__pagination[hidden] { display: none; }
.w-property-home__dot { --wa-color-neutral-fill-quiet: transparent; --wa-color-neutral-fill-normal: transparent; --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) #fff; }
.w-property-home__dot::part(base) { width: auto; min-height: 20px; height: 20px; padding: 7px 7px 7px 0; border: 0; border-radius: 4px; background: transparent; }
.w-property-home__dot::part(label) { display: grid; place-items: center; }
.w-property-home__dot-mark { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 55%); transition: width 280ms var(--w-property-home-ease-out), background-color 280ms ease; }
.w-property-home__dot[aria-current="true"] .w-property-home__dot-mark { width: 18px; background: var(--w-property-home-highlight); }
.w-property-home__dot:hover .w-property-home__dot-mark { background: #fff; }
.w-property-home__dot[aria-current="true"]:hover .w-property-home__dot-mark { background: var(--w-property-home-highlight); }

/* 🔴 문구 블록은 한 칸에 겹쳐 가장 긴 장면의 높이로 고정된다 — 장면마다 늘었다 줄면 검색 패널이 덜컥거린다. */
.w-property-home__copy { display: grid; align-items: end; }
.w-property-home__scene-copy {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(32%);
    transition: opacity 300ms ease-in, transform 300ms ease-in, visibility 0s 300ms;
}
.w-property-home__scene-copy.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 620ms var(--w-property-home-ease-out), transform 620ms var(--w-property-home-ease-out), visibility 0s;
}
.w-property-home__scene-title { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.26; letter-spacing: -0.055em; font-weight: 750; text-wrap: balance; text-shadow: 0 2px 12px rgb(11 47 37 / 40%); }
.w-property-home__scene-title > span { display: block; }
.w-property-home__highlight { color: var(--w-property-home-highlight); }
.w-property-home__description { margin: 1rem 0 0; max-width: 26rem; font-size: 0.875rem; line-height: 1.7; word-break: keep-all; text-shadow: 0 1px 10px rgb(11 47 37 / 45%); }
.w-property-home__count { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 1.2rem; font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    .w-property-home__image.is-active,
    .w-property-home__image.is-leaving,
    .w-property-home__scene-copy,
    .w-property-home__scene-copy.is-active,
    .w-property-home__dot-mark { transition: none; }
    .w-property-home__image.is-leaving { transform: none; }
}
.w-property-home__search { margin-top: 1.75rem; padding: 1rem; border-radius: 12px; background: var(--w-property-home-surface); color: var(--site-text); }
.w-property-home__quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.w-property-home__quick-link { display: flex; align-items: center; gap: 0.8rem; min-width: 0; padding: 1.2rem 1rem; border: 1px solid var(--site-border); border-radius: 14px; background: var(--w-property-home-surface); }
.w-property-home__quick-link:hover,
.w-property-home__types a:hover { background: #f1f5f9; color: #64748b; text-decoration: none; }
.w-property-home__icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--site-brand-soft); color: var(--w-property-home-accent); font-size: 1.1rem; }
.w-property-home__quick-copy { display: grid; gap: 0.25rem; min-width: 0; }
.w-property-home__quick-copy strong { font-size: 0.9375rem; white-space: nowrap; }
.w-property-home__quick-copy small { font-size: 0.6875rem; color: var(--site-muted); word-break: keep-all; }
.w-property-home__quick-count { margin-left: auto; display: grid; gap: 0.35rem; justify-items: end; flex-shrink: 0; color: var(--w-property-home-accent); font-size: 0.75rem; font-weight: 650; }
.w-property-home__quick-count i { font-size: 0.65rem; }
.w-property-home__cities { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; padding: 0.1rem 0 1.5rem; border-bottom: 1px solid var(--site-border); margin-bottom: 1.75rem; }
.w-property-home__cities > span { display: inline-flex; align-items: center; gap: 0.4rem; padding-right: 0.5rem; font-size: 0.75rem; color: var(--site-muted); }
.w-property-home__section { margin-bottom: 2.5rem; }
.w-property-home__section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.w-property-home__section-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.04em; font-weight: 750; }
.w-property-home__section-head p { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--site-muted); word-break: keep-all; }
.w-property-home__section-head wa-button { flex-shrink: 0; }
.w-property-home__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.w-property-home__explore { padding: 1.5rem; border-radius: var(--w-property-home-radius); background: var(--w-property-home-surface); border: 1px solid var(--site-border); }
.w-property-home__types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.w-property-home__types a { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 0.25rem; border-radius: 10px; font-size: 0.8125rem; }
.w-property-home__types a > i:first-child { color: var(--w-property-home-accent); font-size: 1.65rem; }
.w-property-home__types a > i:last-child { display: none; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .w-property-home__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .w-property-home__quick-link { flex-wrap: wrap; padding: 1rem 0.75rem; gap: 0.5rem; }
    .w-property-home__quick-copy small { display: none; }
    .w-property-home__quick-count { width: 100%; display: flex; justify-content: space-between; }
    .w-property-home__search .w-listing-search--compact { grid-template-columns: minmax(0, 1fr) auto; }
    .w-property-home__search .w-listing-search__fields { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .w-property-home__cover { padding: 1.75rem 1.15rem 1.5rem; }
    .w-property-home__image { object-position: 62% center; }
    .w-property-home__scene-title { font-size: 1.75rem; }
    .w-property-home__eyebrow { font-size: 0.6rem; margin-bottom: 0.9rem; }
    .w-property-home__description { font-size: 0.8125rem; }
    .w-property-home__count { margin-top: 0.9rem; }
    .w-property-home__search { margin-top: 1.3rem; padding: 0.8rem; }
    .w-property-home__quick { gap: 0.5rem; }
    .w-property-home__quick-link { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.9rem 0.6rem; }
    .w-property-home__icon { flex-basis: auto; width: 32px; height: 32px; font-size: 0.875rem; }
    .w-property-home__quick-copy strong { font-size: 0.75rem; }
    .w-property-home__quick-copy small { display: none; }
    .w-property-home__quick-count { margin-left: 0; width: 100%; display: flex; justify-content: space-between; font-size: 0.6875rem; }
    .w-property-home__cities { gap: 0.1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
    .w-property-home__cities > span { width: 100%; margin: 0.3rem 0; }
    .w-property-home__section-head { align-items: flex-start; }
    .w-property-home__section-head h2 { font-size: 1.15rem; }
    .w-property-home__section-head p { font-size: 0.6875rem; }
    .w-property-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .w-property-home__explore { padding: 1.15rem; }
    .w-property-home__types { grid-template-columns: 1fr; gap: 0.25rem; }
    .w-property-home__types a { flex-direction: row; padding: 0.85rem 0.5rem; }
    .w-property-home__types a > i:first-child { width: 2rem; font-size: 1.3rem; }
    .w-property-home__types a > i:last-child { display: inline-block; margin-left: auto; font-size: 0.6rem; color: var(--site-muted); }
}