:root {
/* ?? ?됱긽 ?? */
--swatch--light: #ffffff;
--swatch--dark: #000000;
--swatch--brand: #050fff;
--swatch--light-faded: #818181;
--swatch--light-grey: #f4f4f4;
--swatch--faded-text: #cccccc;
/* ?? 12而щ읆 洹몃━???? */
--site--column-count: 12;
--site--gutter: 0.625rem;
--site--margin: clamp(1rem, 0.5rem + 2.5vw, 1.25rem);
/* ?? 諛섏쓳???ъ씠利??? */
--size--7rem: clamp(5rem, 4.285rem + 3.571vw, 7.5rem);
--size--9rem: clamp(6rem, 5.142rem + 4.285vw, 9rem);
--size--15rem: clamp(10rem, 8.571rem + 7.142vw, 15rem);
/* ?? 蹂대뜑 ?? */
--border-width--main: 1px;
/* ?? ?댁쭠 ?? */
--ease--main: cubic-bezier(0.32, 0.72, 0, 1);
--transition--main: 400ms var(--ease--main);
/* ?? ??댄룷洹몃옒???? */
--font--primary: "Pretendard Variable", "Pretendard", sans-serif;
--font--secondary: "Noto Serif KR", serif;
--font--tertiary: "Instrument Serif", serif;
--bg: #f6f1ec;
--surface: var(--swatch--light);
--surface-soft: #f4efea;
--text: var(--swatch--dark);
--text-muted: #615a52;
--line: rgba(17, 17, 17, 0.08);
--line-strong: rgba(17, 17, 17, 0.16);
--dark: #14110f;
--dark-soft: #221d19;
--accent: #c9a96e;
--accent-deep: #a98a54;
--shadow-soft: 0 18px 40px rgba(36, 22, 10, 0.08);
--shadow-panel:
rgba(0, 0, 0, 0.06) 0 0 0 1px,
rgba(0, 0, 0, 0.04) 0 1px 2px,
rgba(0, 0, 0, 0.04) 0 2px 4px;
--radius-card: 24px;
--radius-pill: 9999px;
--max-width: 1240px;
--font-body: var(--font--primary);
--font-display: var(--font--secondary);
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--site-header-height: 84px;
}
@media (max-width: 991px) {
:root {
--site-header-height: 76px;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Home Header / Mega Menu
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
[data-magnetic] {
transform: none !important;
transition: none !important;
}
.home-odd-ritual .site-header,
.home-odd-ritual .site-header.is-scrolled,
.home-odd-ritual .site-header-prd,
.home-odd-ritual .site-header-prd.is-scrolled {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.home-odd-ritual .site-header-prd .menu-toggle-prd,
.site-header-prd .menu-toggle-prd {
display: none !important;
}
.home-odd-ritual .site-header-prd .menu-toggle-prd::before,
.site-header-prd .menu-toggle-prd::before {
content: "";
display: inline-block;
width: 14px;
height: 10px;
margin-right: 0.7rem;
border-top: 1.75px solid currentColor;
border-bottom: 1.75px solid currentColor;
opacity: 0.92;
transition: transform 0.28s var(--ease--main), background 0.28s ease, border-color 0.28s ease;
}
.site-header-prd [data-menu-toggle][aria-expanded="true"] {
color: #111111 !important;
}
.site-header-prd [data-menu-toggle][aria-expanded="true"]::before {
content: "";
width: 13px;
height: 13px;
border: 0;
background:
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
transform: rotate(45deg);
}
.mobile-menu-overlay {
display: block;
position: fixed;
top: calc(84px + var(--safe-top));
right: calc(20px + var(--safe-right));
left: auto;
width: min(calc(100vw - 40px - var(--safe-left) - var(--safe-right)), 324px);
transform: translateY(-10px) scale(0.98);
transform-origin: top right;
z-index: 10010;
overflow: hidden;
border-radius: 26px;
background: linear-gradient(145deg, rgba(250, 247, 240, 0.985), rgba(239, 233, 224, 0.97));
border: 1px solid rgba(255, 255, 255, 0.58);
box-shadow:
0 24px 58px rgba(15, 23, 42, 0.2),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
backdrop-filter: none;
-webkit-backdrop-filter: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.24s ease,
transform 0.42s cubic-bezier(0.22, 0.86, 0.2, 1),
visibility 0.28s ease;
}
.mobile-menu.mobile-menu-overlay {
display: block;
}
.mobile-menu-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
body.menu-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(7, 10, 14, 0.035);
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
}
.menu-mega-shell {
width: 100%;
padding: 0.62rem;
display: grid;
gap: 0.3rem;
max-height: calc(100vh - 100px - var(--safe-top) - var(--safe-bottom));
max-height: calc(100dvh - 100px - var(--safe-top) - var(--safe-bottom)); /* 모바일 주소창 포함 실제 높이 → 내부 스크롤 정상 */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* 모바일 메뉴 — 대분류 그룹 + 서브 + 상담예약 CTA */
.overlay-groups {
display: grid;
gap: 0.1rem;
}
.overlay-group {
padding: 0.18rem 0.16rem 0.3rem;
}
.overlay-group-title {
margin: 0 0 0.3rem;
padding: 0.42rem 0.7rem;
border-radius: 10px;
background: #283a63; /* 상담 예약 바로가기 CTA와 동일한 네이비 */
font-family: var(--font--primary); /* 하단 CTA와 동일 폰트 */
font-size: 0.78rem;
font-weight: 700; /* 볼드체 */
letter-spacing: 0.01em;
color: #ffffff;
}
.overlay-group-links {
display: grid;
gap: 0.06rem;
}
.overlay-sub-link {
display: flex;
align-items: center;
min-height: 38px;
padding: 0.28rem 0.62rem;
border-radius: 11px;
font-family: var(--font--primary);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: -0.01em;
color: #14110f;
text-decoration: none;
background: rgba(255, 255, 255, 0.4);
transition: background-color 0.2s ease, color 0.2s ease;
}
.overlay-sub-link:hover,
.overlay-sub-link:focus-visible {
background: rgba(40, 58, 99, 0.09);
color: #283a63;
}
.overlay-sub-link.is-pending {
color: rgba(20, 17, 15, 0.4);
pointer-events: none;
}
.overlay-sub-soon {
margin-left: 0.4rem;
font-size: 0.64rem;
font-weight: 500;
color: rgba(20, 17, 15, 0.35);
}
.overlay-cta {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin-top: 0.25rem;
border-radius: 14px;
background: #283a63;
color: #ffffff;
font-family: var(--font--primary);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
transition: background-color 0.2s ease;
}
.overlay-cta:hover,
.overlay-cta:focus-visible {
background: #3a52d6;
}
.mobile-menu-overlay.is-open .overlay-menu-label {
opacity: 1;
transform: translateY(0) scale(1);
}
.mobile-menu-overlay.is-open .overlay-menu-label:nth-child(1) { transition-delay: 0.03s; }
.mobile-menu-overlay.is-open .overlay-menu-label:nth-child(2) { transition-delay: 0.07s; }
@media (max-width: 1023px) {
.home-odd-ritual .site-header-prd .menu-toggle-prd,
.site-header-prd .menu-toggle-prd {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 108px;
height: 46px;
padding: 0 1.15rem;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.14);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 246, 248, 0.98) 100%);
color: #111111;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 10px 24px rgba(15, 23, 42, 0.14);
}}
@media (max-width: 767px) {
.home-odd-ritual .site-header-prd .menu-toggle-prd,
.site-header-prd .menu-toggle-prd {
min-width: 84px;
height: 52px;
padding: 0 1rem;
}
.mobile-menu-overlay {
top: calc(76px + var(--safe-top));
right: calc(12px + var(--safe-right));
width: min(calc(100vw - 24px - var(--safe-left) - var(--safe-right)), 318px);
}
.menu-mega-shell {
padding: 0.68rem;
}}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--font--primary);
-webkit-text-size-adjust: 100%;
overscroll-behavior: none;
scroll-padding-top: calc(var(--site-header-height) + var(--safe-top));
}
body {
background-color: var(--bg);
font-family: var(--font--primary);
color: var(--text);
min-width: 320px;
overflow-x: hidden;
overflow-x: clip;
line-height: 1.65;
overscroll-behavior: none;
}
@supports (-webkit-touch-callout: none) {
html,
body {
min-height: -webkit-fill-available;
}}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.site-header-prd {
z-index: 10020;
}
.site-header-prd [data-menu-toggle][aria-expanded="true"] {
color: #111111 !important;
}
.site-header-prd [data-menu-toggle][aria-expanded="true"]::before {
content: "";
width: 13px;
height: 13px;
border: 0;
background:
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
transform: rotate(45deg);
}
.page-main {
background-color: var(--swatch--light);
overflow-x: hidden;
overflow: clip;
position: relative;
transition:
opacity 0.45s cubic-bezier(0.22, 0.86, 0.2, 1),
transform 0.45s cubic-bezier(0.22, 0.86, 0.2, 1),
filter 0.45s cubic-bezier(0.22, 0.86, 0.2, 1);
}
body.page-leaving .page-main {
opacity: 0;
transform: translateY(28px) scale(0.985);
filter: blur(6px);
}
body.page-entering .page-main {
opacity: 0;
transform: translateY(28px) scale(0.985);
filter: blur(6px);
animation: page-main-enter 0.75s cubic-bezier(0.22, 0.86, 0.2, 1) forwards;
}
@keyframes page-main-enter {
from {
opacity: 0;
transform: translateY(28px) scale(0.985);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
.page-main.is-dark {
background-color: var(--swatch--dark);
color: var(--swatch--light);
}
html,
body {
scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* ?? ?꾨━濡쒕뜑 ?? */
.preloader_wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh;
z-index: 9999;
background-color: var(--swatch--light);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
body:not(.show-preloader) .preloader_wrap {
display: none;
}
.preloader-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preloader_logo-contain {
position: absolute;
z-index: 3;
opacity: 0;
transform: translateY(12px);
}
.preloader_logo {
width: var(--size--9rem);
height: auto;
display: block;
object-fit: contain;
}
.preloader-inner_bg {
position: absolute;
inset: 0;
background-color: var(--swatch--light);
z-index: 2;
}
body.has-lightbox {
overflow: hidden;
}
::selection {
background-color: var(--swatch--brand);
color: #fff;
}
/* ?? ?뱀뀡 ?뚮쭏 ?꾪솚 ?? */
[data-theme="dark"] {
background-color: var(--swatch--dark);
color: var(--swatch--light);
}
[data-theme="light"] {
background-color: var(--swatch--light);
color: var(--swatch--dark);
}
[data-theme="dark"] a {
color: var(--swatch--light);
}
[data-theme="light"] a {
color: var(--swatch--dark);
}
/* ?뚮쭏 ?꾪솚 ?몃옖吏??*/
section,
.section {
transition: background-color 0.6s ease, color 0.6s ease;
}
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling {
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font: inherit;
}
select {
font: inherit;
}
img,
video,
canvas,
svg {
max-width: 100%;
}
@media (max-width: 768px) {
input,
select,
textarea {
font-size: 16px;
}}
@media (max-width: 768px) {
.premium-signature-body--lead {
max-width: min(26rem, calc(100vw - 2.5rem)) !important;
font-family: var(--font--primary) !important;
font-size: clamp(1.18rem, 4.8vw, 1.48rem) !important;
line-height: 1.42 !important;
font-weight: 650 !important;
letter-spacing: -0.03em !important;
margin-bottom: 1rem !important;
}
.premium-signature-copy::before {
height: 9.5rem !important;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.28) 0%, rgba(5, 7, 10, 0.14) 55%, rgba(5, 7, 10, 0) 100%) !important;
}}
.container {
width: min(calc(100% - 40px - var(--safe-left) - var(--safe-right)), var(--max-width));
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
padding-top: var(--safe-top);
transition: background-color 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease;
border-bottom: 1px solid transparent;
}
.home-odd-ritual .site-header {
background-color: var(--swatch--light);
}
.site-header.is-scrolled {
background: rgba(250, 246, 241, 0.82);
backdrop-filter: blur(16px);
border-color: rgba(17, 17, 17, 0.08);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
min-width: 0;
}
.brand {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.18em;
}
.brand-logo {
display: inline-flex;
align-items: center;
max-width: 156px;
line-height: 0;
}
.brand-logo img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
mix-blend-mode: multiply;
filter: saturate(0.95) contrast(1.02);
}
.menu-toggle {
border: 0;
background: transparent;
color: var(--text);
min-width: 44px;
min-height: 44px;
}
.mobile-menu {
display: none;
border-top: 1px solid var(--line);
background: rgba(250, 246, 241, 0.96);
}
.mobile-menu.is-open {
display: block;
}
.hero {
position: relative;
min-height: max(760px, 100svh);
display: grid;
align-items: end;
overflow: clip;
}
.hero-media,
.hero-overlay,
.hero-strip {
position: absolute;
inset: 0;
}
.hero-media {
z-index: 0;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.eyebrow {
margin: 0 0 16px;
font-size: 0.82rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: inherit;
opacity: 0.72;
}
.hero h1,
.section h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.045em;
}
.hero h1 {
max-width: 10ch;
font-size: clamp(3.2rem, 8vw, 5.9rem);
line-height: 1.02;
text-wrap: balance;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 18px;
border-radius: var(--radius-pill);
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
text-align: center;
}
.button:hover {
transform: translateY(-1px);
}
.section {
padding: 88px 0;
}
.section h2 {
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: 1.08;
text-wrap: balance;
}
.page-hero-media,
.page-hero-overlay {
position: absolute;
inset: 0;
}
.page-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section p {
color: inherit;
opacity: 0.82;
line-height: 1.72;
text-wrap: pretty;
}
.overview-card,
.overview-visual,
.plan-preview,
.feature-card,
.commercial-card,
.data-card,
.contact-form {
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--shadow-panel), var(--shadow-soft);
border-radius: var(--radius-card);
min-width: 0;
}
.overview-gallery-stage {
overflow: clip;
border-radius: var(--radius-card);
background: rgba(255, 255, 255, 0.7);
}
.overview-gallery-stage img {
width: 100%;
display: block;
aspect-ratio: 1.08 / 1;
object-fit: cover;
transition: opacity 0.45s ease, transform 0.8s ease;
}
.overview-gallery-stage img.is-swapping {
animation: planSwap 0.6s ease;
}
.overview-gallery-strip button.is-active {
border-color: rgba(201, 169, 110, 0.72);
box-shadow:
0 0 0 1px rgba(201, 169, 110, 0.3),
0 16px 32px rgba(36, 22, 10, 0.1);
}
.premium-spotlight,
.section-feature-media {
margin-bottom: 20px;
}
.section-feature-media {
min-height: 320px;
}
.overview-card dl {
display: grid;
gap: 16px;
margin: 0;
}
.overview-card div {
display: grid;
gap: 6px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.overview-card dt {
color: var(--text-muted);
font-size: 0.84rem;
}
.overview-card dd {
margin: 0;
font-size: 1.02rem;
line-height: 1.55;
}
.plan-tabs .is-active {
background: #111111;
color: #ffffff;
}
.plan-subtabs .is-active {
background: rgba(201, 169, 110, 0.18);
border-color: rgba(201, 169, 110, 0.34);
color: #6c5425;
}
.plan-frame-live img.is-swapping {
animation: planSwap 0.6s ease;
}
.contact-visual {
margin-top: 28px;
min-height: 320px;
}
.map-tabs .is-active {
background: #111111;
color: #ffffff;
}
.tabs-inline .is-active {
background: #111111;
color: #ffffff;
}
.gallery-filters .is-active {
background: #111111;
color: #ffffff;
border-color: #111111;
}
.field {
position: relative;
}
.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
border-color: #b8422e;
box-shadow: 0 0 0 3px rgba(184, 66, 46, 0.08);
}
.consent {
grid-template-columns: auto 1fr;
align-items: center;
}
.consent input {
width: 18px;
height: 18px;
}
.field-error {
min-height: 18px;
font-size: 0.8rem;
color: #b8422e;
}
.form-feedback {
display: none;
padding: 14px 16px;
border-radius: 16px;
font-size: 0.92rem;
line-height: 1.6;
}
.form-feedback.is-visible {
display: block;
}
.form-feedback.is-success {
background: rgba(77, 162, 98, 0.12);
color: #245c33;
border: 1px solid rgba(77, 162, 98, 0.22);
}
.form-feedback.is-error {
background: rgba(184, 66, 46, 0.08);
color: #8d2f21;
border: 1px solid rgba(184, 66, 46, 0.18);
}
@keyframes planSwap {
0% {
opacity: 0.42;
transform: scale(0.985);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes galleryCardIn {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lightboxFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes lightboxCardIn {
0% {
opacity: 0;
transform: translateY(18px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.home-odd-ritual {
--font-body: var(--font--primary);
--font-display: var(--font--secondary);
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?덉뼱濡??щ씪?대뜑
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
@media (min-width: 768px) {
.section {
padding: 112px 0;
}
.section-grid,
.contact-layout {
grid-template-columns: 1.05fr 0.95fr;
align-items: start;
}
#overview .section-grid {
grid-template-columns: 0.8fr 1fr;
}
.premium-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plan-reference-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commercial-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.premium-stack {
grid-template-columns: 1fr;
}
.feature-grid,
.commercial-grid,
.supply-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.contact-page-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-location-banner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.commercial-cta {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.supply-grid-mobile {
display: none;
}
}
@media (min-width: 1440px) {
.hero h1 {
max-width: 11ch;
}
.section {
padding: 128px 0;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?덉뼱濡??щ씪?대뜑
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.hero-slider {
position: relative;
width: 100%;
height: 100svh;
overflow: hidden;
background-color: var(--swatch--dark);
}
.hero-slider_inner {
position: relative;
width: 100%;
height: 100%;
}
/* ?? 諛곌꼍 ?대?吏 ?? */
.hero-slider_bg-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slider_bg {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
}
.hero-slider_bg.is-active {
opacity: 1;
}
.hero-slider_bg-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
transition: transform 8s ease-out;
}
.hero-slider_bg.is-active .hero-slider_bg-img {
transform: scale(1);
}
.slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.05) 40%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 1;
}
/* ?? ?섎떒 ?ㅻ퉬寃뚯씠???? */
.hero-slider_nav {
position: absolute;
bottom: 2.5rem;
left: 0;
right: 0;
z-index: 10;
display: flex;
align-items: flex-end;
padding: 0 var(--site--margin);
gap: 0;
}
.hero-slider_nav-item {
flex: 1;
cursor: pointer;
padding: 1rem 0;
background: transparent;
font: inherit;
color: inherit;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.3);
transition: flex var(--transition--main), border-color var(--transition--main);
overflow: hidden;
display: flex;
align-items: center;
gap: 1rem;
}
.hero-slider_nav-item.is-active {
flex: 3;
border-top-color: rgba(255, 255, 255, 0.9);
}
.hero-slider_num {
font-family: var(--font--tertiary);
font-style: italic;
font-size: 0.875rem;
color: var(--swatch--light);
opacity: 0.7;
white-space: nowrap;
transition: opacity var(--transition--main);
}
.hero-slider_nav-item.is-active .hero-slider_num {
opacity: 1;
}
.hero-slider_thumb {
width: 0;
height: 60px;
overflow: hidden;
opacity: 0;
transition: width 0.6s var(--ease--main), opacity 0.4s ease;
border-radius: 4px;
flex-shrink: 0;
}
.hero-slider_nav-item.is-active .hero-slider_thumb {
width: 90px;
opacity: 1;
}
.hero-slider_thumb-img {
width: 90px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.hero-slider_nav-scroll {
flex: 0 0 auto;
border-top: none;
cursor: default;
}
/* ?? ?덉뼱濡??띿뒪???? */
.hero-intro {
position: absolute;
bottom: 8rem;
left: var(--site--margin);
z-index: 10;
color: var(--swatch--light);
}
.hero-intro_label {
font-family: var(--font--primary);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 1rem;
opacity: 0.8;
}
.hero-intro_heading {
font-family: var(--font--primary);
font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
font-weight: 800;
line-height: 0.96;
margin-bottom: 1rem;
letter-spacing: -0.05em;
text-transform: uppercase;
}
.hero-intro_sub {
font-family: var(--font--primary);
font-size: 0.75rem;
font-weight: 500;
opacity: 0.78;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@media (max-width: 991px) {
.hero-slider {
height: var(--lpb-stable-mobile-screen, 100svh);
}
.hero-intro {
bottom: 10rem;
}
.hero-intro_heading {
font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}
.hero-slider_thumb {
display: none;
}
.hero-slider_nav-item.is-active {
flex: 2;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?뱀뀡 由щ퉴 ?좊땲硫붿씠?? ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
/* 湲곕낯 由щ퉴 (?꾨옒?먯꽌 ?꾨줈) */
[data-reveal] {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.55s var(--ease--main), transform 0.55s var(--ease--main);
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* ?쇱そ?먯꽌 ?ㅻⅨ履?*/
[data-reveal="left"] {
transform: translateX(-60px);
}
[data-reveal="left"].is-revealed {
transform: translateX(0);
}
/* ?ㅻⅨ履쎌뿉???쇱そ */
[data-reveal="right"] {
transform: translateX(60px);
}
[data-reveal="right"].is-revealed {
transform: translateX(0);
}
/* ?ㅼ?????*/
[data-reveal="scale"] {
transform: scale(0.92);
}
[data-reveal="scale"].is-revealed {
transform: scale(1);
}
/* ?대┰?⑥뒪 由щ퉴 (?꾨옒?먯꽌 ?꾨줈 ?대┝) */
[data-reveal="clip"] {
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
transform: none;
opacity: 1;
transition: clip-path 0.75s var(--ease--main);
}
[data-reveal="clip"].is-revealed {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/* ?ㅽ깭嫄??쒕젅??*/
[data-reveal-delay="1"] { transition-delay: 0.05s; }
[data-reveal-delay="2"] { transition-delay: 0.1s; }
[data-reveal-delay="3"] { transition-delay: 0.15s; }
[data-reveal-delay="4"] { transition-delay: 0.2s; }
[data-reveal-delay="5"] { transition-delay: 0.25s; }
/* Ken Burns ?대?吏 ?ㅽ겕濡?*/
[data-img-scroll] {
overflow: clip;
position: relative;
}
[data-img-scroll] img {
height: 120%;
width: 100%;
object-fit: cover;
will-change: transform;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?띿뒪???명꽣?숈뀡
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
/* ?? ?몃쾭 ?몃뜑?쇱씤 ?? */
[data-underline] {
position: relative;
display: inline-block;
}
[data-underline]::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.4s var(--ease--main);
}
[data-underline]:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* ?? ?띿뒪???뚮┰ (?꾨줈 諛?댁삱由ш린) ?? */
[data-text-flip] {
display: inline-block;
overflow: hidden;
position: relative;
}
/* ?? ?뷀뀒???띿뒪??(?꾨줈 諛?댁꽌 ???띿뒪???몄텧) ?? */
[data-detail] {
position: relative;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
/* ?? 踰꾪듉 ?몃쾭: 諛곌꼍 梨꾩슦湲??? */
[data-btn-hover] {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: 1px solid currentColor;
border-radius: var(--radius-pill);
overflow: hidden;
cursor: pointer;
background: transparent;
color: inherit;
font-family: var(--font--primary);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
transition: color 0.4s var(--ease--main);
}
[data-btn-hover]::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s var(--ease--main);
z-index: -1;
}
[data-btn-hover]:hover::before {
transform: scaleX(1);
}
[data-btn-hover]:hover {
color: var(--swatch--light);
}
[data-theme="dark"] [data-btn-hover]:hover {
color: var(--swatch--dark);
}
/* ?? ?띿뒪??踰꾪듉 + ?붿궡???? */
[data-text-btn] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
position: relative;
}
/* ?? 留곹겕 由ъ뒪???몃쾭 (硫붾돱 ?ㅽ??? ?? */
[data-link-list] a {
display: block;
padding: 0.75rem 0;
border-bottom: 1px solid var(--line);
transition: padding-left 0.4s var(--ease--main), opacity 0.3s ease;
}
[data-link-list] a:hover {
padding-left: 1rem;
}
[data-link-list]:hover a {
opacity: 0.4;
}
[data-link-list]:hover a:hover {
opacity: 1;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Cross-Document View Transition
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
@view-transition {
navigation: auto;
}
/* 페이지 이동: 새 페이지가 이전 페이지 '위로' 부드럽게 덮으며 페이드인.
이전 페이지는 가만히 있으므로 흰 틈·헤더 잔상이 생기지 않음. */
::view-transition-old(root) {
animation: none;
}
::view-transition-new(root) {
animation: vtPageIn 0.55s cubic-bezier(0.22, 0.86, 0.2, 1) both;
transform-origin: center top;
}
@keyframes vtPageIn {
from {
opacity: 0;
transform: translateY(10px) scale(1.004);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Slide Subpages
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.sub-page.sub-page-slides {
padding-top: 0;
background:
radial-gradient(circle at top left, rgba(5, 15, 255, 0.05), transparent 32%),
#0a0a0a;
scroll-snap-type: y mandatory;
}
.scene-slide {
position: relative;
min-height: calc(100svh - var(--subpage-header-offset, 84px));
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: clip;
display: flex;
align-items: stretch;
}
.scene-slide + .scene-slide {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scene-slide[data-theme="light"] {
background:
radial-gradient(circle at top right, rgba(5, 15, 255, 0.05), transparent 28%),
#f6f1ec;
color: #111111;
}
.scene-slide[data-theme="dark"] {
background:
linear-gradient(160deg, rgba(18, 20, 30, 0.92), rgba(8, 8, 12, 0.96)),
#0a0a0a;
color: #ffffff;
}
.scene-media {
position: absolute;
inset: 0;
z-index: 0;
}
.scene-media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
}
.scene-slide-light .scene-overlay,
.scene-slide[data-theme="light"] .scene-overlay {
background:
linear-gradient(180deg, rgba(246, 241, 236, 0.18) 0%, rgba(246, 241, 236, 0.04) 100%);
}
.scene-copy {
max-width: 38rem;
}
.scene-copy.is-narrow {
max-width: 32rem;
}
.scene-slide[data-theme="light"] .scene-title {
color: #111111;
}
.scene-slide[data-theme="dark"] .scene-title {
color: #fbf8f4;
}
.scene-slide[data-theme="light"] .scene-tags span,
.scene-slide[data-theme="light"] .scene-facts span {
border-color: rgba(17, 17, 17, 0.12);
background: rgba(17, 17, 17, 0.02);
}
.scene-visual-card,
.scene-graphic-card,
.scene-plan-card {
position: relative;
overflow: hidden;
border-radius: 28px;
min-height: 420px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}
.scene-slide[data-theme="light"] .scene-visual-card,
.scene-slide[data-theme="light"] .scene-graphic-card,
.scene-slide[data-theme="light"] .scene-plan-card {
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(245, 241, 236, 0.86)),
#ffffff;
border-color: rgba(17, 17, 17, 0.08);
box-shadow: 0 30px 60px rgba(34, 22, 12, 0.08);
}
.scene-visual-card img,
.scene-plan-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scene-plan-card {
padding: 2rem;
display: grid;
place-items: center;
}
.scene-plan-card img {
object-fit: contain;
}
.scene-graphic-card {
padding: clamp(1.8rem, 3vw, 2.5rem);
display: grid;
gap: 1rem;
}
.scene-compare-card,
.scene-stat-card {
border-radius: 22px;
padding: 1.4rem 1.3rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.scene-slide[data-theme="light"] .scene-compare-card,
.scene-slide[data-theme="light"] .scene-stat-card {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(17, 17, 17, 0.08);
}
.scene-compare-card strong,
.scene-stat-card strong {
display: block;
font-family: var(--font--tertiary);
font-size: clamp(1.9rem, 2vw, 2.5rem);
line-height: 1;
margin-bottom: 0.6rem;
}
.scene-compare-card span,
.scene-stat-card span {
display: block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.56;
margin-bottom: 0.6rem;
}
.scene-compare-card p,
.scene-stat-card p {
font-size: 0.92rem;
line-height: 1.65;
opacity: 0.74;
}
.scene-slide[data-theme="light"] .scene-metric-row {
border-color: rgba(17, 17, 17, 0.1);
}
.scene-slide[data-theme="dark"] .scene-summary-bar span {
color: #f6f7ff;
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
.scene-slide.is-active .scene-media img,
.scene-slide.is-active .scene-visual-card img {
transform: scale(1);
}
@media (max-width: 991px) {
.sub-page.sub-page-slides {
scroll-snap-type: y proximity;
}
.scene-slide {
min-height: auto;
}
.scene-visual-card,
.scene-graphic-card,
.scene-plan-card {
min-height: 320px;
}}
.sub-hero {
padding: 3rem var(--site--margin) 4rem;
text-align: left;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?꾩퐫?붿뼵
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.accordion-group {
width: 100%;
}
.accordion-item {
border-bottom: 1px solid var(--line);
}
.accordion-item:first-child {
border-top: 1px solid var(--line);
}
/* ?ㅻ뜑 (?대┃ ?곸뿭) */
.accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 0;
cursor: pointer;
width: 100%;
background: none;
border: none;
font-family: var(--font--primary);
font-size: 1rem;
font-weight: 500;
color: inherit;
text-align: left;
gap: 1rem;
transition: opacity 0.3s ease;
}
.accordion-header:hover {
opacity: 0.6;
}
/* ?대졇?????몃줈???④? (+ ??-) */
.accordion-item.is-open .toggle-line.is-vert {
transform: translateX(-50%) scaleY(0);
}
.accordion-item.is-open .accordion-dropdown {
grid-template-rows: 1fr;
opacity: 1;
}
/* ?ㅽ겕 ?뚮쭏 ?꾩퐫?붿뼵 */
[data-theme="dark"] .accordion-item {
border-color: rgba(255, 255, 255, 0.12);
}
/* 紐⑤컮??*/
@media (max-width: 991px) {
.accordion-header {
padding: 1rem 0;
font-size: 0.9rem;
}
.accordion-content_inner {
padding: 0 0 1.25rem 0;
font-size: 0.85rem;
}
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?쇱씠?몃컯?? ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.lightbox-overlay {
position: fixed;
inset: 0;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox-overlay.is-active {
opacity: 1;
visibility: visible;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
width: 2.5rem;
height: 2.5rem;
background: none;
border: none;
cursor: pointer;
z-index: 2;
padding: 0;
}
.lightbox-close_line {
position: absolute;
width: 100%;
height: 1px;
background-color: var(--swatch--light);
top: 50%;
left: 0;
transition: transform 0.3s var(--ease--main);
}
.lightbox-close_line.is-1 {
transform: rotate(45deg);
}
.lightbox-close_line.is-2 {
transform: rotate(-45deg);
}
.lightbox-close:hover .lightbox-close_line.is-1 {
transform: rotate(135deg);
}
.lightbox-close:hover .lightbox-close_line.is-2 {
transform: rotate(45deg);
}
.lightbox-content {
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
transform: scale(0.92);
opacity: 0;
transition: transform 0.5s var(--ease--main), opacity 0.4s ease;
}
.lightbox-overlay.is-active .lightbox-img {
transform: scale(1);
opacity: 1;
}
.lightbox-nav {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 2rem;
margin-top: 1.5rem;
}
.lightbox-prev,
.lightbox-next {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--swatch--light);
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.lightbox-prev:hover,
.lightbox-next:hover {
border-color: var(--swatch--light);
background-color: rgba(255, 255, 255, 0.08);
}
.lightbox-counter {
color: var(--swatch--light);
font-family: var(--font--tertiary);
font-style: italic;
font-size: 0.85rem;
opacity: 0.5;
}
[data-lightbox] {
cursor: pointer;
overflow: hidden;
position: relative;
}
[data-lightbox] img {
transition: transform 0.6s var(--ease--main);
}
[data-lightbox]:hover img {
transform: scale(1.04);
}
@media (max-width: 991px) {
.lightbox-close {
top: 1rem;
right: 1rem;
}
.lightbox-nav {
gap: 1.5rem;
}}
.gallery-cell {
overflow: hidden;
border-radius: 4px;
position: relative;
aspect-ratio: 4/3;
cursor: pointer;
}
.gallery-cell img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease--main);
}
.gallery-cell:hover img {
transform: scale(1.06);
}
.drag-slider_track {
display: flex;
gap: 1rem;
will-change: transform;
}
.drag-slider_item {
flex-shrink: 0;
width: 320px;
height: 220px;
border-radius: 8px;
overflow: hidden;
}
.drag-slider_item img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
transition: transform 0.6s var(--ease--main);
}
.drag-slider_item:hover img {
transform: scale(1.04);
}
.drag-slider.is-dragging .drag-slider_item img {
pointer-events: none;
}
@media (max-width: 991px) {
.drag-slider_item {
width: 240px;
height: 160px;
}}
@media (max-width: 479px) {
.drag-slider_item {
width: 200px;
height: 140px;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Menu Landing + Gallery Restore
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
body.menu-open {
/* 페이지 스크롤 잠그지 않음 — 스크롤하면 메뉴가 자동으로 닫힘(script.js) */
}
.site-header-prd {
background: rgba(247, 242, 236, 0.94);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.site-header-prd .header-inner {
gap: 1rem;
}
.header-actions {
margin-left: auto;
}
.header-link {
font-size: 0.78rem;
letter-spacing: 0.08em;
}
.header-phone {
font-family: var(--font--primary);
font-style: normal;
font-size: 0.9rem;
font-weight: 600;
}
.gallery-preview-main,
.gallery-preview-stack article {
overflow: hidden;
border-radius: 1.5rem;
position: relative;
min-height: 20rem;
background: #d8d0c8;
}
.gallery-preview-main,
.gallery-preview-stack a {
display: block;
}
.gallery-preview-main img,
.gallery-preview-stack img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease--main);
}
.gallery-preview-main:hover img,
.gallery-preview-stack article:hover img {
transform: scale(1.04);
}
.gallery-filter-chip.is-active,
.gallery-filter-chip:hover {
background: #111111;
color: #ffffff;
border-color: #111111;
}
.gallery-page-grid .gallery-cell {
border-radius: 1rem;
aspect-ratio: 1 / 1;
}
@media (max-width: 991px) {
.header-actions {
gap: 0.5rem;
}
.header-link {
display: none;
}
.menu-toggle-prd {
min-width: 64px;
height: 48px;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Home Hero Header Overlay
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.home-odd-ritual .site-header-prd {
background: transparent;
backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: none;
}
.home-odd-ritual .site-header-prd .brand-logo img {
mix-blend-mode: normal;
filter: none;
}
.home-odd-ritual .site-header-prd .header-link,
.home-odd-ritual .site-header-prd .header-phone {
color: #ffffff;
opacity: 0.92;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.home-odd-ritual .site-header-prd .menu-toggle-prd {
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
color: #111111;
border: 0;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12);
}
.home-odd-ritual .hero-slider_bg-img {
filter: brightness(1.12) saturate(1.04);
}
.home-odd-ritual .slide-overlay {
background: linear-gradient(
to bottom,
rgba(15, 22, 36, 0.14) 0%,
rgba(15, 22, 36, 0.1) 18%,
rgba(15, 22, 36, 0.18) 45%,
rgba(15, 22, 36, 0.38) 100%
);
}
@media (min-width: 1024px) {
.home-odd-ritual .site-header-prd .menu-toggle-prd,
.site-header-prd .menu-toggle-prd {
display: none !important;
}}
.scroll-progress_fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--swatch--brand), #4d6bff);
transform-origin: left;
will-change: width;
transition: width 0.05s linear;
border-radius: 0 2px 2px 0;
}
body.show-preloader .scroll-progress {
opacity: 0;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Ken Burns ?⑤윺?됱뒪 媛뺥솕
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
[data-parallax-img] {
overflow: clip;
position: relative;
}
[data-parallax-img] img {
width: 100%;
height: 120%;
object-fit: cover;
will-change: transform;
position: relative;
top: -10%;
}
[data-parallax-img]:hover img {
transition: transform 4s ease-out;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?좎뒪???뚮┝
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: 10003;
display: flex;
align-items: center;
gap: 0.6rem;
background-color: var(--swatch--dark);
color: var(--swatch--light);
padding: 0.875rem 1.5rem;
border-radius: var(--radius-pill);
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s var(--ease--main),
transform 0.4s var(--ease--main),
visibility 0.4s ease;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.toast.is-visible {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.toast-icon {
width: 1.4rem;
height: 1.4rem;
background-color: var(--swatch--brand);
color: var(--swatch--light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
flex-shrink: 0;
}
.toast.is-success .toast-icon {
background-color: #22c55e;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
?ㅽ겕濡???踰꾪듉
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.scroll-top {
position: fixed;
bottom: calc(2rem + var(--safe-bottom));
right: calc(2rem + var(--safe-right));
z-index: 1000;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: var(--swatch--dark);
color: var(--swatch--light);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.4s var(--ease--main),
visibility 0.4s ease,
transform 0.4s var(--ease--main),
background-color 0.3s ease,
border-color 0.3s ease;
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background-color: var(--swatch--brand);
border-color: var(--swatch--brand);
}
.scroll-top svg {
transition: transform 0.3s var(--ease--main);
}
.scroll-top:hover svg {
transform: translateY(-2px);
}
body.show-preloader .scroll-top {
display: none;
}
@media (max-width: 991px) {
.scroll-top {
width: 2.5rem;
height: 2.5rem;
bottom: calc(1.5rem + var(--safe-bottom));
right: calc(1.5rem + var(--safe-right));
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
???꾩넚 ?깃났 ?좊땲硫붿씠?? ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.form-success-overlay {
position: fixed;
inset: 0;
z-index: 10001;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.form-success-overlay.is-active {
opacity: 1;
visibility: visible;
}
.form-success-content {
text-align: center;
color: var(--swatch--light);
transform: translateY(20px) scale(0.96);
transition: transform 0.5s var(--ease--main);
}
.form-success-overlay.is-active .form-success-content {
transform: translateY(0) scale(1);
}
.form-success-check {
width: 4rem;
height: 4rem;
border: 2px solid var(--swatch--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--swatch--brand);
}
.form-success-check svg {
width: 1.5rem;
height: 1.5rem;
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.6s ease 0.3s;
}
.form-success-overlay.is-active .form-success-check svg {
stroke-dashoffset: 0;
}
.form-success-heading {
font-family: var(--font--primary);
font-size: 1.55rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.form-success-desc {
font-family: var(--font--primary);
font-size: 0.92rem;
font-weight: 500;
letter-spacing: -0.01em;
opacity: 0.65;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
PRD v5.1 Layout
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.site-header-prd {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding-top: var(--safe-top);
background: rgba(245, 240, 235, 0.88);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.site-header-prd .header-inner {
min-height: 84px;
}
.header-actions {
display: inline-flex;
align-items: center;
gap: 0.9rem;
min-width: 0;
}
.header-link {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
opacity: 0.8;
}
.header-link.is-current,
.header-link:hover {
opacity: 1;
}
.header-phone {
display: inline-flex;
align-items: center;
gap: 0.42em;
flex-shrink: 0;
white-space: nowrap;
font-family: var(--font--primary);
font-size: 1.55rem;
font-style: normal;
font-weight: 800;
letter-spacing: 0.01em;
text-transform: none;
opacity: 1;
}
.header-phone::before {
content: "";
flex: 0 0 auto;
width: 1.08em;
height: 1.08em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.menu-toggle-prd {
min-width: 78px;
height: 44px;
border-radius: var(--radius-pill);
border: 1px solid rgba(17, 17, 17, 0.12);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--text);
}
.prd-panel {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
padding: clamp(6rem, 5rem + 4vw, 9rem) 0;
}
.prd-panel-dark {
background: #0a0a0a;
color: #f6f1ec;
}
.prd-panel-location {
min-height: 100svh;
color: #ffffff;
}
.prd-location-media::after {
display: none;
}
.prd-location-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(9, 10, 18, 0.1) 0%, rgba(9, 10, 18, 0.18) 58%, rgba(9, 10, 18, 0.34) 100%),
linear-gradient(90deg, rgba(8, 8, 16, 0.18) 0%, rgba(8, 8, 16, 0.06) 42%, rgba(8, 8, 16, 0.02) 100%);
z-index: 0;
}
.prd-location-shell {
position: relative;
z-index: 1;
min-height: 100svh;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding-top: clamp(7rem, 11vh, 9.5rem);
padding-bottom: clamp(4rem, 7vh, 5rem);
}
.prd-location-copy {
max-width: 28rem;
color: #ffffff;
}
.prd-location-label {
margin: 0 0 1.75rem;
font-family: var(--font--secondary);
font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
}
.prd-location-line {
display: block;
width: 3.3rem;
height: 1px;
margin-bottom: 2.75rem;
background: rgba(255, 255, 255, 0.94);
}
.prd-location-heading {
max-width: 22rem;
margin: 0 0 2.4rem;
font-family: var(--font--primary);
font-size: clamp(1.65rem, 1.2rem + 1vw, 2.25rem);
line-height: 1.45;
letter-spacing: -0.02em;
font-weight: 500;
word-break: keep-all;
}
.prd-location-body {
max-width: 17rem;
font-size: 0.9rem;
line-height: 1.85;
color: rgba(255, 255, 255, 0.9);
}
.prd-panel-overview-visual {
min-height: 100svh;
color: #ffffff;
background: #0a0a0a;
}
.prd-overview-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(6, 8, 18, 0.02) 0%, rgba(6, 8, 18, 0.08) 48%, rgba(6, 8, 18, 0.16) 100%),
linear-gradient(90deg, rgba(6, 8, 18, 0.16) 0%, rgba(6, 8, 18, 0.05) 38%, rgba(6, 8, 18, 0.02) 100%);
z-index: 0;
}
.prd-overview-hero-shell {
position: relative;
z-index: 1;
min-height: 100svh;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: space-between;
padding-top: clamp(5.75rem, 9vh, 7.2rem);
padding-bottom: clamp(2.4rem, 5vh, 3.8rem);
}
.prd-overview-copy {
max-width: 44rem;
color: #ffffff;
padding-top: clamp(7rem, 12vh, 10rem);
}
.prd-overview-label {
margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.96;
}
.prd-overview-heading {
font-family: var(--font--primary);
font-size: clamp(1.65rem, 1.2rem + 1vw, 2.25rem);
line-height: 1.45;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0 0 clamp(2.2rem, 6vh, 3rem);
max-width: 34rem;
word-break: keep-all;
}
.prd-overview-body {
max-width: 26rem;
font-size: clamp(0.84rem, 0.78rem + 0.18vw, 0.94rem);
line-height: 1.8;
color: rgba(255, 255, 255, 0.92);
}
.prd-overview-summary {
justify-self: end;
align-self: end;
max-width: 26rem;
color: rgba(255, 255, 255, 0.94);
text-align: left;
}
.prd-overview-summary-title {
margin-bottom: 1rem;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.prd-overview-summary-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1rem;
font-size: 0.82rem;
line-height: 1.7;
}
.prd-overview-summary-grid span {
color: rgba(255, 255, 255, 0.74);
}
.prd-overview-summary-grid strong {
color: #ffffff;
font-weight: 400;
}
.prd-bg-media {
position: absolute;
inset: 0;
}
.prd-bg-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 10, 0.26), rgba(10, 10, 10, 0.72));
}
.prd-panel-overview-visual .prd-bg-media::after {
display: none;
}
.prd-bg-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prd-panel-signature {
min-height: 100svh;
padding: 0;
background: #0d1015;
display: block;
}
.premium-signature {
position: relative;
width: 100%;
flex: 0 0 100%;
min-height: 100svh;
overflow: clip;
}
.premium-signature-stage,
.premium-signature-media {
position: absolute;
inset: 0;
width: 100%;
}
.premium-signature-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.premium-signature-media--base img {
object-position: center center;
}
.premium-signature-media--reveal {
clip-path: inset(0 100% 0 0);
will-change: clip-path, transform;
}
.premium-signature-media--reveal img {
object-position: center center;
}
.premium-signature-stage-overlay {
position: absolute;
inset: 0;
background: none;
pointer-events: none;
}
.premium-signature-copy {
position: relative;
z-index: 1;
width: min(calc(100% - 40px - var(--safe-left) - var(--safe-right)), var(--max-width));
margin: 0 auto;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(7rem, 11vh, 9.5rem) 0 clamp(3.75rem, 3rem + 2vw, 5rem);
color: #ffffff;
}
.premium-signature-copy::before {
display: none;
}
.premium-signature-heading {
max-width: 20rem;
}
.premium-signature-label {
margin: 0 0 0.4rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
opacity: 0.94;
}
.premium-signature-title {
margin: 0;
font-family: var(--font--secondary);
font-size: clamp(1.85rem, 1.4rem + 1.35vw, 2.8rem);
line-height: 0.94;
letter-spacing: -0.04em;
font-weight: 400;
}
.premium-signature-rule {
display: block;
width: 2.5rem;
height: 1px;
margin-top: 1rem;
background: rgba(255, 255, 255, 0.92);
}
.premium-signature-caption {
position: relative;
isolation: isolate;
max-width: 36rem;
transition: opacity 0.45s ease, transform 0.45s ease;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.18);
}
.premium-signature-caption::before {
content: "";
position: absolute;
inset: -1.2rem -2.6rem -1.35rem -1.9rem;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.24) 0%, rgba(5, 7, 10, 0.14) 54%, rgba(5, 7, 10, 0) 100%);
pointer-events: none;
z-index: -1;
}
.premium-signature-body {
margin: 0;
font-size: clamp(0.82rem, 0.76rem + 0.12vw, 0.94rem);
line-height: 1.85;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.98);
font-weight: 500;
}
.premium-signature-body--lead {
max-width: 34rem;
font-family: var(--font--primary);
font-size: clamp(1.65rem, 1.2rem + 1vw, 2.25rem);
line-height: 1.45;
letter-spacing: -0.02em;
font-weight: 500;
color: #ffffff;
margin-bottom: 1.35rem;
word-break: keep-all;
}
.prd-panel-rooftop {
display: block;
min-height: 100svh;
padding: 0;
color: #ffffff;
}
.prd-rooftop-sequence {
position: relative;
width: 100%;
min-height: 100svh;
overflow: clip;
isolation: isolate;
}
.prd-rooftop-media {
position: absolute;
inset: 0;
z-index: 0;
}
.prd-rooftop-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform: none;
transform-origin: center center;
will-change: auto;
filter: brightness(1.09) saturate(1.03);
}
.prd-rooftop-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(9, 12, 18, 0.01) 0%, rgba(9, 12, 18, 0.025) 44%, rgba(9, 12, 18, 0.07) 100%),
linear-gradient(90deg, rgba(9, 12, 18, 0.09) 0%, rgba(9, 12, 18, 0.03) 34%, rgba(9, 12, 18, 0.005) 100%);
z-index: 1;
}
.prd-rooftop-shell {
position: relative;
z-index: 2;
min-height: 100svh;
display: flex;
align-items: stretch;
justify-content: flex-start;
padding-top: clamp(7rem, 10.5vh, 8.6rem);
padding-bottom: clamp(4rem, 8vh, 5.25rem);
}
.prd-rooftop-copy {
position: relative;
width: min(100%, 26rem);
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prd-rooftop-copy::before {
content: "";
position: absolute;
left: -2.25rem;
bottom: clamp(2.4rem, 7vh, 4rem);
width: min(28rem, calc(100% + 4rem));
height: clamp(14rem, 28vh, 18rem);
background: radial-gradient(circle at 18% 48%, rgba(7, 10, 16, 0.34) 0%, rgba(7, 10, 16, 0.18) 38%, rgba(7, 10, 16, 0.05) 72%, rgba(7, 10, 16, 0) 100%);
z-index: -1;
pointer-events: none;
}
.prd-rooftop-state {
position: absolute;
left: 0;
bottom: clamp(4rem, 8vh, 5rem);
width: min(100%, 21rem);
opacity: 1;
transform: none;
pointer-events: auto;
transition: none;
}
.prd-rooftop-state.is-active {
opacity: 1;
transform: none;
}
.prd-rooftop-state-title {
margin: 0 0 0.55rem;
font-family: var(--font--secondary);
font-size: clamp(1.78rem, 1.38rem + 0.75vw, 2.35rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: #ffffff;
text-shadow: 0 8px 18px rgba(8, 10, 16, 0.2), 0 1px 0 rgba(8, 10, 16, 0.18);
}
.prd-rooftop-state-title::after {
content: "";
display: block;
width: 3rem;
height: 1px;
margin-top: 1.1rem;
background: currentColor;
opacity: 0.86;
box-shadow: 0 8px 18px rgba(8, 10, 16, 0.18);
}
.prd-rooftop-body {
margin: 0;
font-size: 0.9rem;
line-height: 1.82;
color: rgba(255, 255, 255, 0.98);
text-shadow: 0 6px 16px rgba(8, 10, 16, 0.18), 0 1px 0 rgba(8, 10, 16, 0.14);
}
.prd-copy-on-dark,
.prd-copy-on-dark .eyebrow {
color: var(--swatch--light);
}
.prd-panel-concierge {
display: block;
min-height: 100svh;
padding: 0;
}
.prd-concierge-sequence {
position: relative;
min-height: 100svh;
overflow: clip;
isolation: isolate;
}
.prd-concierge-media {
position: absolute;
inset: 0;
z-index: 0;
}
.prd-concierge-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
opacity: 0;
will-change: opacity;
}
.prd-concierge-image.is-active {
opacity: 1;
}
.prd-concierge-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 55%);
z-index: 1;
pointer-events: none;
}
.prd-concierge-shell {
position: relative;
z-index: 2;
min-height: 100svh;
display: flex;
align-items: stretch;
justify-content: flex-start;
padding-bottom: clamp(4rem, 8vh, 5.2rem);
}
.prd-concierge-copy {
position: relative;
width: min(100%, 25rem);
min-height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
color: #1a1a1a;
transition: color 0.45s ease;
}
.prd-concierge-copy.is-dark {
color: #1a1a1a;
}
.prd-concierge-copy.is-light {
color: #ffffff;
}
.prd-concierge-copy::before {
content: "";
position: absolute;
left: -2.4rem;
bottom: clamp(1.2rem, 5vh, 2.4rem);
width: min(31rem, calc(100% + 5rem));
height: clamp(23rem, 42vh, 28rem);
background: radial-gradient(circle at 18% 58%, rgba(8, 10, 16, 0.42) 0%, rgba(8, 10, 16, 0.24) 38%, rgba(8, 10, 16, 0.1) 62%, rgba(8, 10, 16, 0.02) 82%, rgba(8, 10, 16, 0) 100%);
opacity: 0.92;
transition: opacity 0.45s ease;
z-index: -1;
pointer-events: none;
}
.prd-concierge-heading-group {
position: absolute;
left: 0;
bottom: clamp(13rem, 19vh, 15rem);
display: grid;
gap: 0;
}
.prd-concierge-label,
.prd-concierge-title {
margin: 0;
font-family: var(--font--secondary);
font-size: clamp(2rem, 1.55rem + 1.2vw, 2.8rem);
line-height: 0.96;
letter-spacing: -0.035em;
font-weight: 400;
color: currentColor;
text-shadow: 0 10px 22px rgba(8, 10, 16, 0.24), 0 1px 0 rgba(8, 10, 16, 0.18);
}
.prd-concierge-line {
display: block;
width: 3rem;
height: 1px;
margin-top: 1.45rem;
background: currentColor;
opacity: 0.85;
box-shadow: 0 8px 18px rgba(8, 10, 16, 0.18);
}
.prd-concierge-state {
position: absolute;
left: 0;
bottom: clamp(4rem, 8vh, 5rem);
width: min(100%, 21rem);
opacity: 0;
transform: translateY(18px);
pointer-events: none;
transition:
opacity 0.4s ease,
transform 0.5s cubic-bezier(0.22, 0.86, 0.2, 1);
}
.prd-concierge-state.is-active {
opacity: 1;
transform: translateY(0);
}
.prd-concierge-state-title {
margin: 0 0 0.75rem;
font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.18rem);
line-height: 1.58;
letter-spacing: -0.02em;
font-weight: 500;
color: currentColor;
text-shadow: 0 8px 18px rgba(8, 10, 16, 0.22), 0 1px 0 rgba(8, 10, 16, 0.16);
}
.prd-concierge-body {
margin: 0;
font-size: 0.88rem;
line-height: 1.82;
color: currentColor;
text-shadow: 0 8px 18px rgba(8, 10, 16, 0.22), 0 1px 0 rgba(8, 10, 16, 0.16);
}
.prd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 1.5rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(17, 17, 17, 0.12);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: transform 0.35s var(--ease--main), background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.prd-btn:hover {
transform: translateY(-1px);
}
.prd-btn-primary {
background: var(--swatch--brand);
color: var(--swatch--light);
border-color: var(--swatch--brand);
}
.prd-visual-frame,
.type-showcase-media,
.space-gallery-card {
overflow: hidden;
border-radius: 28px;
}
.prd-visual-frame img,
.type-showcase-media img,
.space-gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 991px) {
.site-header-prd .header-inner {
min-height: 76px;
}
.site-header-prd .brand-logo {
margin-left: -0.75rem;
}
.header-actions {
gap: 0.65rem;
}
.header-link:not(.header-phone) {
display: none;
}
.header-phone {
font-size: 1rem;
font-weight: 700;
}
.prd-panel {
min-height: auto;
padding: 7rem 0 4.5rem;
}
.prd-panel-signature {
min-height: 100svh;
padding: 0;
}
.prd-panel-rooftop,
.prd-panel-concierge {
min-height: 100svh;
padding: 0;
}
.prd-rooftop-sequence,
.prd-rooftop-shell,
.prd-concierge-sequence,
.prd-concierge-shell {
min-height: 100svh;
}
.prd-overview-hero-shell {
min-height: 100svh;
padding-top: 6.4rem;
align-content: space-between;
}
.prd-overview-copy {
max-width: 100%;
padding-top: 4rem;
}
.prd-overview-heading {
margin-bottom: 1.8rem;
max-width: 20rem;
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}
.prd-overview-body {
max-width: 18rem;
}
.prd-overview-summary {
justify-self: start;
max-width: 18rem;
margin-top: 3rem;
}
.prd-overview-summary-grid {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.prd-location-shell {
min-height: 100svh;
padding-top: 6.4rem;
}
.prd-location-copy {
max-width: 100%;
}
.prd-location-heading {
max-width: 17rem;
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}
.prd-location-body {
max-width: 15rem;
font-size: 0.84rem;
}
.premium-signature-copy {
padding-top: 6rem;
}
.premium-signature-caption {
max-width: 28rem;
}
.prd-rooftop-copy {
width: min(100%, 17rem);
}
.prd-rooftop-state {
width: min(100%, 15rem);
}
.prd-rooftop-state-title {
font-size: clamp(1.35rem, 1.12rem + 0.7vw, 1.85rem);
}
.prd-rooftop-body {
font-size: 0.8rem;
}
.prd-concierge-copy {
width: min(100%, 18rem);
}
.prd-concierge-label,
.prd-concierge-title {
font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem);
}
.prd-concierge-heading-group {
bottom: clamp(11.5rem, 18vh, 13rem);
}
.prd-concierge-state {
width: min(100%, 15rem);
}
.prd-concierge-body {
font-size: 0.8rem;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
Sticky Revealing Footer
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
html {
--footer-reveal-height: 128px;
}
html,
body {
background: #080807;
}
.page-main {
position: relative;
z-index: 2;
background: var(--swatch--light);
margin-bottom: var(--footer-reveal-height);
}
.site-footer-reveal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
min-height: var(--footer-reveal-height);
background: #080807;
color: rgba(255, 255, 255, 0.56);
font-family: var(--font--primary);
transform: translateZ(0);
will-change: transform;
}
.footer-reveal-inner {
min-height: var(--footer-reveal-height);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
max-width: var(--max-width);
margin: 0 auto;
padding: 3rem 3.75rem 2.5rem;
}
.footer-reveal-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2.5rem;
width: 100%;
}
.footer-reveal-left {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.footer-reveal-brand {
margin: 0;
font-family: var(--font--primary);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #ffffff;
}
.footer-reveal-addr {
font-size: 0.75rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.68);
margin: 0;
}
.footer-reveal-phone {
color: #c9a96e;
text-decoration: none;
font-family: var(--font--tertiary);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.footer-reveal-phone:hover {
color: #f0c88a;
}
.footer-biz-label {
font-size: 0.72rem;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
}
.footer-biz-logo {
height: 52px;
width: auto;
filter: brightness(0) invert(1); /* 네이비 로고 → 흰색 (다크 푸터 대비) */
opacity: 0.9;
}
.footer-reveal-legal,
.footer-reveal-copy {
color: rgba(255, 255, 255, 0.32);
}
.footer-reveal-legal {
font-size: 0.625rem;
line-height: 1.6;
margin: 0;
}
.footer-reveal-legal p {
margin: 0;
}
.footer-reveal-sep {
display: inline-block;
width: 1px;
height: 10px;
background: rgba(255, 255, 255, 0.22);
margin: 0 0.75rem;
vertical-align: middle;
}
.footer-reveal-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.55rem;
text-align: right;
}
.footer-reveal-copy {
font-size: 0.625rem;
letter-spacing: 0.02em;
font-family: var(--font--primary); /* 한글 '라포르테 블랑 서현' 정상 렌더 */
margin: 0;
}
@media (max-width: 768px) {
html,
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
body {
overscroll-behavior-y: auto;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
a,
button {
touch-action: manipulation;
}
body.page-leaving .page-main,
body.page-entering .page-main {
transform: translateY(16px);
filter: blur(3px);
}
@keyframes page-main-enter {
from {
opacity: 0;
transform: translateY(16px);
filter: blur(3px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
[data-reveal="scale"] {
transform: translateY(20px);
}
[data-reveal="scale"].is-revealed {
transform: translateY(0);
}
[data-img-scroll] img,
[data-parallax-img] img {
height: 100%;
top: 0;
transform: none !important;
will-change: auto;
}
html {
--footer-reveal-height: 104px;
}
.footer-reveal-inner {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.9rem 0.9rem calc(0.7rem + var(--safe-bottom));
}
.footer-reveal-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.footer-reveal-left {
gap: 0.55rem;
}
.footer-reveal-right {
gap: 0.35rem;
}
.footer-biz-logo {
height: 34px;
}
.footer-biz-label {
font-size: 0.58rem;
}
.footer-reveal-brand {
font-size: 1.02rem;
}
.footer-reveal-addr {
font-size: 0.56rem;
line-height: 1.32;
margin: 0;
}
.footer-reveal-phone {
font-size: 0.7rem;
}
.footer-reveal-legal,
.footer-reveal-copy {
font-size: 0.45rem;
line-height: 1.3;
}
.footer-reveal-sep {
height: 7px;
margin: 0 0.34rem;
}
.footer-reveal-right {
grid-column: 2;
text-align: left;
}
.scroll-top {
width: 2.15rem;
height: 2.15rem;
right: calc(0.85rem + var(--safe-right));
bottom: calc(0.85rem + var(--safe-bottom));
}}
@media (min-width: 769px) and (max-width: 1024px) {
.footer-reveal-inner {
padding: 2.5rem 2.5rem 2rem;
gap: 1.5rem;
}}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?? Gallery Shared Pages
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧??*/
.page-gallery-public,
.page-gallery-interior {
background: #f5f1eb;
color: #171410;
font-family: "Noto Sans KR", sans-serif;
}
.footer-info__phone {
color: #c9a96e;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.04em;
}
.footer-info__phone:hover {
color: #dfc08a;
}
/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?? Public Archive Gallery
?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧??*/
.page-gallery-public-archive {
background: #f1ede6;
color: #151515;
}
.space-archive-page {
min-height: 100svh;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 32%),
linear-gradient(180deg, #f4efe7 0%, #efe8df 100%);
}
.space-archive-shell {
width: min(1480px, calc(100% - 3rem));
margin: 0 auto;
}
.space-archive-hero {
padding: 6rem 0 0;
}
.space-archive-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 3rem;
align-items: end;
padding: 1rem 0 3.8rem;
border-bottom: 1px solid rgba(21, 21, 21, 0.1);
}
.space-archive-hero__eyebrow,
.space-archive-section__eyebrow {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
}
.space-archive-hero__eyebrow,
.space-archive-section__eyebrow {
color: rgba(109, 103, 95, 0.92);
}
.space-archive-hero__title {
margin: 1rem 0 0;
font-size: clamp(3.8rem, 8vw, 6.8rem);
line-height: 0.94;
letter-spacing: -0.065em;
font-weight: 600;
}
.space-archive-hero__summary {
max-width: 33rem;
margin-left: auto;
}
.space-archive-hero__summary p {
margin: 0;
font-size: 1rem;
line-height: 2;
color: rgba(95, 90, 82, 0.96);
}
.space-archive-nav {
position: sticky;
top: 0;
z-index: 25;
border-bottom: 1px solid rgba(21, 21, 21, 0.1);
background: rgba(241, 237, 230, 0.88);
backdrop-filter: blur(18px);
}
.space-archive-nav__track {
display: flex;
gap: 1.25rem;
overflow-x: auto;
padding: 1rem 0;
white-space: nowrap;
scrollbar-width: none;
}
.space-archive-nav__track::-webkit-scrollbar {
display: none;
}
.space-archive-sections {
padding: 0 0 8rem;
}
@media (max-width: 1100px) {
.space-archive-hero__grid,
.space-archive-section__header {
grid-template-columns: 1fr;
}
.space-archive-hero__summary,
.space-archive-section__summary {
margin-left: 0;
}}
@media (max-width: 768px) {
.space-archive-shell {
width: min(100% - 2rem, 1480px);
}
.space-archive-hero {
padding-top: 4.3rem;
}
.space-archive-hero__grid {
gap: 1.4rem;
padding-bottom: 2.6rem;
}
.space-archive-nav__track {
gap: 1rem;
padding: 0.9rem 0;
}}
/* Mobile PRD interaction fixes */
@media (max-width: 768px) {
.hero-slider {
height: var(--lpb-stable-mobile-screen, 100svh);
min-height: var(--lpb-stable-mobile-screen, 100svh);
max-height: var(--lpb-stable-mobile-screen, 100svh);
overflow: hidden;
}
.hero-slider,
.hero-slider_inner,
.hero-slider_bg-wrap,
.hero-slider_bg,
.hero-slider_bg-img,
.hero-media,
.hero-image {
transform: none !important;
translate: none !important;
scale: none !important;
will-change: auto !important;
}
.hero-slider_bg-img {
height: var(--lpb-stable-mobile-screen, 100svh);
object-fit: cover;
transition: opacity 0.8s ease !important;
}
.prd-overview-hero-shell {
width: 100%;
min-height: 100svh;
padding: 6.4rem 24px 3rem;
align-content: space-between;
}
.prd-overview-summary {
justify-self: end !important;
align-self: end;
max-width: min(18.5rem, calc(100vw - 48px));
margin: 2.5rem 0 0 auto !important;
text-align: left;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.46), 0 1px 1px rgba(0, 0, 0, 0.34);
}
.prd-overview-summary-title {
margin-bottom: 0.65rem;
font-size: 0.72rem;
line-height: 1.7;
}
.prd-overview-summary-grid {
grid-template-columns: auto minmax(0, 1fr) !important;
gap: 0.16rem 0.7rem;
font-size: 0.72rem;
line-height: 1.82;
}
.prd-overview-summary-grid span,
.prd-overview-summary-grid strong {
font-size: inherit;
line-height: inherit;
}
.prd-panel-signature,
.premium-signature {
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
.premium-signature {
background: #0d1015;
}
.premium-signature-stage,
.premium-signature-media {
position: absolute;
inset: 0;
min-height: 100%;
background: transparent !important;
}
.premium-signature-media--reveal {
clip-path: inset(0 0 0 0) !important;
transform: none !important;
}
.premium-signature-copy {
min-height: auto !important;
height: auto !important;
display: flex;
justify-content: flex-start;
gap: clamp(14rem, 34vh, 22rem);
padding: 6rem 1.25rem calc(5.5rem + var(--safe-bottom)) !important;
overflow: visible !important;
}
.premium-signature-copy::before {
display: none;
}
.premium-signature-caption {
max-width: min(100%, 24rem) !important;
height: auto !important;
min-height: 0;
padding: 1.2rem 1.1rem 1.35rem;
overflow: visible !important;
background: linear-gradient(180deg, rgba(5, 7, 11, 0.76), rgba(5, 7, 11, 0.58));
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.48);
}
.premium-signature-body {
font-size: 0.82rem;
line-height: 1.86;
}
.premium-signature-body--lead {
font-size: 0.98rem;
line-height: 1.65;
}
.prd-panel-concierge,
.prd-concierge-sequence {
min-height: auto !important;
height: auto !important;
padding: 0 !important;
overflow: visible !important;
background: #080807;
}
.prd-concierge-sequence {
display: block;
isolation: auto;
}
.prd-concierge-media {
position: relative !important;
inset: auto !important;
display: grid;
z-index: 0;
background: transparent !important;
}
.prd-concierge-image {
position: relative !important;
inset: auto !important;
width: 100%;
height: clamp(280px, 72svh, 560px);
display: block;
opacity: 1 !important;
object-fit: cover;
object-position: center center;
transform: none !important;
will-change: auto !important;
}
.prd-concierge-overlay {
display: none;
}
.prd-concierge-shell {
min-height: auto !important;
display: block;
padding: 2rem 1.25rem calc(3.5rem + var(--safe-bottom));
background: #080807;
}
.prd-concierge-copy {
width: 100% !important;
min-height: auto !important;
display: block;
color: #ffffff !important;
}
.prd-concierge-copy::before {
display: none;
}
.prd-concierge-heading-group,
.prd-concierge-state {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
}
.prd-concierge-heading-group {
margin-bottom: 2rem;
}
.prd-concierge-state {
max-width: 22rem;
margin-top: 1.6rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.prd-concierge-state:first-of-type {
margin-top: 0;
}
.prd-concierge-state-title {
font-size: 1rem;
line-height: 1.62;
}
.prd-concierge-body {
font-size: 0.82rem;
line-height: 1.86;
}
.pin-spacer {
background: transparent !important;
}
.prd-bg-media,
.premium-signature-media,
.prd-concierge-media,
.prd-visual-frame,
.type-showcase-media,
.section-feature-media,
.overview-gallery-stage,
.gallery-preview-main,
.gallery-preview-stack article,
.space-gallery-card {
background: transparent !important;
}
.prd-bg-media img,
.premium-signature-media img,
.prd-concierge-media img,
.prd-visual-frame img,
.type-showcase-media img,
.section-feature-media img,
.overview-gallery-stage img,
.gallery-preview-main img,
.gallery-preview-stack img,
.space-gallery-card img,
[data-img-scroll] img,
[data-parallax-img] img {
width: 100%;
height: 100%;
display: block;
object-fit: cover !important;
transform: none !important;
will-change: auto !important;
}
}
/* Mobile PRD layer alignment refinements */
@media (max-width: 768px) {
.premium-signature {
background: transparent !important;
overflow: hidden !important;
}
.premium-signature-stage,
.premium-signature-media {
min-height: 100svh;
}
.premium-signature-copy {
min-height: 100svh !important;
justify-content: space-between;
gap: 0;
padding: 5.75rem 1.25rem calc(4.6rem + var(--safe-bottom)) !important;
}
.premium-signature-copy::before {
display: block;
left: 0;
right: auto;
bottom: calc(4.15rem + var(--safe-bottom));
width: min(31rem, 88vw);
height: 14.5rem;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.48) 0%, rgba(5, 7, 10, 0.32) 58%, rgba(5, 7, 10, 0) 100%);
opacity: 1;
z-index: -1;
}
.premium-signature-caption {
max-width: min(23.5rem, calc(100vw - 2.5rem)) !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.56), 0 1px 2px rgba(0, 0, 0, 0.42);
}
.premium-signature-body {
font-size: 0.8rem;
line-height: 1.88;
font-weight: 600;
}
.premium-signature-body--lead {
margin-bottom: 1rem;
font-size: 0.96rem;
line-height: 1.58;
font-weight: 700;
}
.prd-panel-concierge,
.prd-concierge-sequence {
min-height: auto !important;
background: transparent !important;
overflow: visible !important;
}
.prd-concierge-sequence.is-mobile-sequence > .prd-concierge-media,
.prd-concierge-sequence.is-mobile-sequence > .prd-concierge-overlay,
.prd-concierge-sequence.is-mobile-sequence > .prd-concierge-shell {
display: none !important;
}
.prd-concierge-mobile-stack {
display: block;
width: 100%;
background: transparent;
}
.prd-concierge-mobile-panel {
position: relative;
min-height: 58svh;
margin: 0;
overflow: hidden;
background: transparent;
isolation: isolate;
}
.prd-concierge-mobile-panel + .prd-concierge-mobile-panel {
margin-top: 0;
}
.prd-concierge-mobile-image {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3;
display: block !important;
opacity: 1 !important;
object-fit: cover !important;
object-position: center center;
transform: none !important;
will-change: auto !important;
}
.prd-concierge-mobile-panel--lobby .prd-concierge-mobile-image {
aspect-ratio: 1 / 0.78;
object-position: center center;
}
.prd-concierge-mobile-panel--fitness .prd-concierge-mobile-image,
.prd-concierge-mobile-panel--golf .prd-concierge-mobile-image {
aspect-ratio: 1 / 0.68;
}
.prd-concierge-mobile-copy {
position: absolute;
left: 1.45rem;
right: 1.45rem;
bottom: 1.45rem;
z-index: 2;
max-width: 21rem;
color: #ffffff;
text-shadow: 0 2px 13px rgba(0, 0, 0, 0.58), 0 1px 2px rgba(0, 0, 0, 0.42);
}
.prd-concierge-mobile-copy::before {
content: "";
position: absolute;
left: -1.45rem;
right: -4rem;
bottom: -1.45rem;
height: calc(100% + 3.25rem);
background: linear-gradient(90deg, rgba(5, 7, 10, 0.48) 0%, rgba(5, 7, 10, 0.28) 58%, rgba(5, 7, 10, 0) 100%);
z-index: -1;
pointer-events: none;
}
.prd-concierge-mobile-heading {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
margin-bottom: clamp(4.5rem, 20svh, 8.5rem);
display: grid;
opacity: 1 !important;
transform: none !important;
}
.prd-concierge-mobile-heading .prd-concierge-label,
.prd-concierge-mobile-heading .prd-concierge-title {
font-size: clamp(1.9rem, 8vw, 2.45rem);
line-height: 0.92;
color: #ffffff;
}
.prd-concierge-mobile-heading .prd-concierge-line {
width: 2.2rem;
margin-top: 0.95rem;
color: #ffffff;
}
.prd-concierge-mobile-state {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 19rem;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
}
.prd-concierge-mobile-state .prd-concierge-state-title {
margin-bottom: 0.75rem;
font-size: 0.98rem;
line-height: 1.58;
font-weight: 700;
color: #ffffff;
}
.prd-concierge-mobile-state .prd-concierge-body {
font-size: 0.78rem;
line-height: 1.88;
font-weight: 600;
color: rgba(255, 255, 255, 0.96);
}
.site-footer-reveal,
.footer-reveal-inner {
margin-top: 0 !important;
}
}
/* Mobile concierge panel tightening */
@media (max-width: 768px) {
.prd-concierge-mobile-panel {
min-height: 0 !important;
}
.prd-concierge-mobile-panel--lobby .prd-concierge-mobile-copy {
top: 1.25rem;
bottom: 1.45rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prd-concierge-mobile-panel--lobby .prd-concierge-mobile-copy::before {
height: 46%;
}
.prd-concierge-mobile-panel--lobby .prd-concierge-mobile-heading {
margin-bottom: 0;
}
.prd-concierge-mobile-panel--fitness .prd-concierge-mobile-copy,
.prd-concierge-mobile-panel--golf .prd-concierge-mobile-copy {
max-width: 20rem;
}
}
/* Mobile signature premium stacked images */
@media (max-width: 768px) {
.prd-panel-signature {
min-height: auto !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
overflow: visible !important;
}
.premium-signature {
position: relative;
min-height: auto !important;
height: auto !important;
background: transparent !important;
overflow: visible !important;
}
.premium-signature-stage {
position: relative !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
display: block;
overflow: visible !important;
z-index: 0;
}
.premium-signature-media {
position: relative !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
display: block !important;
opacity: 1 !important;
transform: none !important;
translate: none !important;
scale: none !important;
clip-path: inset(0 0 0 0) !important;
will-change: auto !important;
background: transparent !important;
}
.premium-signature-media + .premium-signature-media {
margin-top: 0;
}
.premium-signature-media img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 4;
display: block !important;
object-fit: cover !important;
transform: none !important;
will-change: auto !important;
}
.premium-signature-media--base img {
object-position: center center;
}
.premium-signature-media--reveal img {
object-position: center center;
}
.premium-signature-stage-overlay {
display: none !important;
}
.premium-signature-copy {
position: absolute !important;
top: 0;
left: 0;
right: 0;
z-index: 2;
width: 100%;
min-height: min(133.333vw, 76svh) !important;
height: min(133.333vw, 76svh) !important;
display: flex !important;
flex-direction: column;
justify-content: space-between !important;
gap: 0 !important;
padding: 5.75rem 1.25rem calc(2.2rem + var(--safe-bottom)) !important;
color: #ffffff;
pointer-events: none;
overflow: visible !important;
}
.premium-signature-copy::before {
display: block !important;
content: "";
position: absolute;
left: 0;
right: auto;
bottom: 0;
width: min(31rem, 88vw);
height: 13rem;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.46) 0%, rgba(5, 7, 10, 0.28) 58%, rgba(5, 7, 10, 0) 100%);
opacity: 1;
z-index: -1;
pointer-events: none;
}
.premium-signature-heading {
position: relative;
max-width: 18rem;
}
.premium-signature-caption {
position: relative;
max-width: min(22.5rem, calc(100vw - 2.5rem)) !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58), 0 1px 2px rgba(0, 0, 0, 0.44);
}
.premium-signature-body {
font-size: 0.8rem !important;
line-height: 1.86 !important;
font-weight: 650;
}
.premium-signature-body--lead {
margin-bottom: 1rem;
font-size: 0.95rem !important;
line-height: 1.58 !important;
font-weight: 750;
}
}
/* Mobile signature premium image ratio lock */
@media (max-width: 768px) {
.premium-signature-media img {
height: 133.333vw !important;
max-height: none !important;
}
.premium-signature-copy {
min-height: 133.333vw !important;
height: 133.333vw !important;
}
}
/* Mobile premium copy on second image */
@media (max-width: 768px) {
.premium-signature-copy {
top: 133.333vw !important;
min-height: 133.333vw !important;
height: 133.333vw !important;
}
}
/* Mobile premium second image copy split */
@media (max-width: 768px) {
.premium-signature-copy {
top: 133.333vw !important;
min-height: 133.333vw !important;
height: 133.333vw !important;
justify-content: space-between !important;
padding-top: 5.75rem !important;
padding-bottom: calc(2.2rem + var(--safe-bottom)) !important;
}
.premium-signature-heading {
align-self: flex-start;
margin: 0 !important;
}
.premium-signature-caption {
margin-top: auto !important;
align-self: flex-start;
}
}
/* Mobile premium heading first image caption second image */
@media (max-width: 768px) {
.premium-signature-copy {
top: 0 !important;
min-height: 266.666vw !important;
height: 266.666vw !important;
justify-content: flex-start !important;
padding: 5.75rem 1.25rem calc(2.2rem + var(--safe-bottom)) !important;
}
.premium-signature-copy::before {
bottom: 0 !important;
}
.premium-signature-heading {
align-self: flex-start;
margin: 0 !important;
}
.premium-signature-caption {
position: absolute !important;
left: 1.25rem;
right: 1.25rem;
bottom: calc(2.2rem + var(--safe-bottom));
max-width: min(22.5rem, calc(100vw - 2.5rem)) !important;
margin: 0 !important;
}
}
/* Mobile premium all copy on first image */
@media (max-width: 768px) {
.premium-signature-copy {
top: 0 !important;
min-height: 133.333vw !important;
height: 133.333vw !important;
justify-content: space-between !important;
padding: 5.75rem 1.25rem calc(2.2rem + var(--safe-bottom)) !important;
}
.premium-signature-copy::before {
bottom: 0 !important;
height: 13rem !important;
}
.premium-signature-caption {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-top: auto !important;
align-self: flex-start;
}
}
/* Mobile rooftop copy top alignment */
@media (max-width: 768px) {
.prd-rooftop-shell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.prd-rooftop-copy {
width: min(100%, 18rem) !important;
min-height: 100svh;
}
.prd-rooftop-copy::before {
top: 4.9rem !important;
bottom: auto !important;
left: -1.25rem;
width: min(25rem, calc(100vw - 0.5rem));
height: 14rem;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.42) 0%, rgba(5, 7, 10, 0.25) 58%, rgba(5, 7, 10, 0) 100%);
}
.prd-rooftop-state {
top: 5.75rem !important;
bottom: auto !important;
left: 0 !important;
width: min(100%, 18rem) !important;
}
.prd-rooftop-state-title {
margin-bottom: 0.65rem;
}
}
/* Mobile premium subtle copy layer */
@media (max-width: 768px) {
.premium-signature-copy::before {
height: 10.5rem !important;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.2) 0%, rgba(5, 7, 10, 0.12) 48%, rgba(5, 7, 10, 0) 100%) !important;
}
.premium-signature-caption {
text-shadow: 0 2px 9px rgba(0, 0, 0, 0.44), 0 1px 1px rgba(0, 0, 0, 0.34) !important;
}
}
/* Mobile concierge title scale */
@media (max-width: 768px) {
.prd-concierge-mobile-heading .prd-concierge-label,
.prd-concierge-mobile-heading .prd-concierge-title {
font-size: clamp(1.35rem, 6vw, 1.82rem) !important;
line-height: 0.94 !important;
}
.prd-concierge-mobile-heading .prd-concierge-line {
width: 1.9rem;
margin-top: 0.75rem;
}
}
/* Mobile premium remove copy layer */
@media (max-width: 768px) {
.premium-signature-copy::before {
display: none !important;
}
.premium-signature-heading,
.premium-signature-caption {
text-shadow: 0 2px 7px rgba(0, 0, 0, 0.36), 0 1px 1px rgba(0, 0, 0, 0.28) !important;
}
}
/* Mobile premium ultra thin copy layer */
@media (max-width: 768px) {
.premium-signature-copy::before {
display: block !important;
content: "";
position: absolute;
left: 0;
right: auto;
bottom: 0 !important;
width: min(27rem, 82vw);
height: 9.5rem !important;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.14) 0%, rgba(5, 7, 10, 0.08) 52%, rgba(5, 7, 10, 0) 100%) !important;
opacity: 1;
z-index: -1;
pointer-events: none;
}
}
/* Mobile premium layer includes lead */
@media (max-width: 768px) {
.premium-signature-copy::before {
width: min(28rem, 86vw) !important;
height: 12.8rem !important;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.16) 0%, rgba(5, 7, 10, 0.09) 55%, rgba(5, 7, 10, 0) 100%) !important;
}
}
/* Mobile menu refined glass list */
@media (max-width: 767px) {
.mobile-menu-overlay {
top: calc(82px + var(--safe-top));
right: calc(14px + var(--safe-right));
width: min(calc(100vw - 44px - var(--safe-left) - var(--safe-right)), 286px);
border-radius: 22px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 243, 237, 0.68));
border-color: rgba(255, 255, 255, 0.48);
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.13),
0 1px 0 rgba(255, 255, 255, 0.68) inset;
backdrop-filter: blur(18px) saturate(1.12);
-webkit-backdrop-filter: blur(18px) saturate(1.12);
}
body.menu-open::before {
background: rgba(7, 10, 14, 0.015);
}
.menu-mega-shell {
padding: 0.48rem;
gap: 0.18rem;
}
.overlay-nav-labels {
gap: 0.18rem;
}
.overlay-menu-label {
min-height: 58px;
padding: 0.66rem 0.72rem;
grid-template-columns: auto 1fr auto;
gap: 0.58rem;
border-radius: 17px;
background: rgba(255, 255, 255, 0.28);
}
.overlay-menu-label + .overlay-menu-label {
border-top: 1px solid rgba(20, 17, 15, 0.045);
}
.overlay-menu-label:hover,
.overlay-menu-label:focus-visible {
background: rgba(255, 255, 255, 0.46);
}
.overlay-menu-index {
width: 1.45rem;
height: 1.45rem;
background: rgba(17, 17, 17, 0.045);
color: rgba(20, 17, 15, 0.5);
font-size: 0.66rem;
}
.overlay-menu-copy {
gap: 0.02rem;
}
.overlay-menu-label strong {
font-size: 0.88rem;
line-height: 1.2;
letter-spacing: -0.018em;
}
.overlay-menu-label em {
font-size: 0.61rem;
line-height: 1.25;
color: rgba(20, 17, 15, 0.44);
}
.overlay-menu-arrow {
font-size: 0.92rem;
color: rgba(20, 17, 15, 0.34);
transform: translateY(-1px);
}
}
/* Mobile menu compact width pass */
@media (max-width: 767px) {
.mobile-menu-overlay {
top: calc(74px + var(--safe-top));
right: calc(12px + var(--safe-right));
width: min(calc(100vw - 132px - var(--safe-left) - var(--safe-right)), 238px) !important;
border-radius: 19px;
}
.menu-mega-shell {
padding: 0.36rem;
}
.overlay-nav-labels {
gap: 0.12rem;
}
.overlay-menu-label {
min-height: 48px !important;
padding: 0.5rem 0.58rem !important;
gap: 0.46rem !important;
border-radius: 14px !important;
}
.overlay-menu-index {
width: 1.18rem !important;
height: 1.18rem !important;
font-size: 0.54rem !important;
}
.overlay-menu-label strong {
font-size: 0.78rem !important;
line-height: 1.18 !important;
}
.overlay-menu-label em {
font-size: 0.55rem !important;
line-height: 1.18 !important;
}
.overlay-menu-arrow {
font-size: 0.78rem !important;
}
}
/* Mobile menu tiny popover */
@media (max-width: 767px) {
.mobile-menu-overlay {
top: calc(72px + var(--safe-top));
right: calc(16px + var(--safe-right));
width: min(calc(100vw - 186px - var(--safe-left) - var(--safe-right)), 188px) !important;
border-radius: 17px !important;
background: rgba(255, 255, 255, 0.74) !important;
border: 1px solid rgba(255, 255, 255, 0.44) !important;
box-shadow:
0 14px 34px rgba(15, 23, 42, 0.11),
0 1px 0 rgba(255, 255, 255, 0.58) inset !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
body.menu-open::before {
background: transparent !important;
}
.menu-mega-shell {
padding: 0.34rem !important;
gap: 0 !important;
}
.overlay-nav-labels {
gap: 0 !important;
}
.overlay-menu-label {
min-height: 42px !important;
padding: 0.48rem 0.58rem !important;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 0.45rem !important;
border-radius: 13px !important;
background: transparent !important;
}
.overlay-menu-label + .overlay-menu-label {
border-top: 1px solid rgba(20, 17, 15, 0.07) !important;
}
.overlay-menu-label:hover,
.overlay-menu-label:focus-visible {
background: rgba(255, 255, 255, 0.34) !important;
}
.overlay-menu-index,
.overlay-menu-label em {
display: none !important;
}
.overlay-menu-copy {
display: block !important;
min-width: 0;
}
.overlay-menu-label strong {
display: block;
font-size: 0.82rem !important;
line-height: 1.18 !important;
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
}
.overlay-menu-arrow {
flex: 0 0 auto;
font-size: 0.78rem !important;
color: rgba(20, 17, 15, 0.38) !important;
transform: translateY(-1px);
}
}
/* Hero smoothness optimization */
@media (max-width: 768px) {
.hero-slider,
.hero-slider_inner,
.hero-slider_bg-wrap {
height: var(--lpb-stable-mobile-screen, 100svh) !important;
min-height: var(--lpb-stable-mobile-screen, 100svh) !important;
max-height: var(--lpb-stable-mobile-screen, 100svh) !important;
}
.hero-slider_bg {
transition: opacity 0.72s ease !important;
will-change: opacity;
}
.hero-slider_bg-img {
height: var(--lpb-stable-mobile-screen, 100svh) !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
.hero-slider_nav-item,
.hero-slider_nav-item.is-active {
flex: 1 1 0 !important;
transition: border-color 0.28s ease, opacity 0.28s ease !important;
}
.hero-intro {
transform: translateZ(0);
}
}
/* Mobile gallery overlay header */
@media (max-width: 768px) {
.page-gallery-landing .site-header-prd,
.page-gallery-landing .site-header-prd.is-scrolled {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.page-gallery-landing .site-header-prd .header-inner {
min-height: 84px;
}
.page-gallery-landing .site-header-prd .brand-logo img {
filter: none !important;
}
.page-gallery-landing .site-header-prd .menu-toggle-prd {
background: rgba(255, 255, 255, 0.96) !important;
color: #111111 !important;
border: 0 !important;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12) !important;
}
}
/* Mobile public archive overlay header */
@media (max-width: 768px) {
.page-gallery-public-archive .site-header-prd,
.page-gallery-public-archive .site-header-prd.is-scrolled {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.page-gallery-public-archive .site-header-prd .header-inner {
min-height: 84px;
}
.page-gallery-public-archive .site-header-prd .brand-logo img {
filter: none !important;
mix-blend-mode: normal !important;
}
.page-gallery-public-archive .site-header-prd .menu-toggle-prd {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96) !important;
color: #111111 !important;
border: 0 !important;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12) !important;
}
.page-gallery-public-archive .space-archive-hero {
padding-top: calc(84px + var(--safe-top));
}
}
/* Mobile interior archive overlay header */
@media (max-width: 768px) {
.page-gallery-interior-archive .site-header-prd,
.page-gallery-interior-archive .site-header-prd.is-scrolled {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.page-gallery-interior-archive .site-header-prd .header-inner {
min-height: 84px;
}
.page-gallery-interior-archive .site-header-prd .brand-logo img {
filter: none !important;
mix-blend-mode: normal !important;
}
.page-gallery-interior-archive .site-header-prd .menu-toggle-prd {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96) !important;
color: #111111 !important;
border: 0 !important;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12) !important;
}
.page-gallery-interior-archive .space-archive-hero {
padding-top: calc(84px + var(--safe-top));
}
}
/* Mobile gallery archive rendering budget */
@media (max-width: 768px) {
.page-gallery-landing,
.page-gallery-public-archive,
.page-gallery-interior-archive {
overscroll-behavior-y: auto;
}
.page-gallery-public-archive .gallery-viewer__main,
.page-gallery-interior-archive .gallery-viewer__main,
.page-gallery-public-archive .gallery-viewer__image-wrap,
.page-gallery-interior-archive .gallery-viewer__image-wrap,
.page-gallery-public-archive .gallery-viewer__image,
.page-gallery-interior-archive .gallery-viewer__image {
touch-action: pan-y pinch-zoom !important;
overscroll-behavior: auto !important;
}
.page-gallery-public-archive .gallery-thumbs,
.page-gallery-interior-archive .gallery-thumbs,
.page-gallery-public-archive .gallery-thumb,
.page-gallery-interior-archive .gallery-thumb {
touch-action: pan-x pan-y pinch-zoom !important;
overscroll-behavior: auto !important;
}
.page-gallery-public-archive .space-archive-hero::before,
.page-gallery-interior-archive .space-archive-hero::before {
transform: none !important;
will-change: auto !important;
}
}
/* Mobile motion polish */
@media (max-width: 768px) {
html,
body {
overscroll-behavior-x: none;
overscroll-behavior-y: auto;
}
.page-main {
filter: none !important;
transition:
opacity 0.32s cubic-bezier(0.22, 0.86, 0.2, 1),
transform 0.32s cubic-bezier(0.22, 0.86, 0.2, 1) !important;
}
body.page-leaving .page-main,
body.page-entering .page-main {
transform: translate3d(0, 12px, 0) scale(0.992) !important;
filter: none !important;
}
body.page-entering .page-main {
animation: mobile-page-main-enter 0.42s cubic-bezier(0.22, 0.86, 0.2, 1) forwards !important;
}
@keyframes mobile-page-main-enter {
from {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.992);
filter: none;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: none;
}
}
[data-reveal] {
transition-duration: 0.42s;
will-change: auto;
}
.hero-slider_bg,
.gh__viewport,
.gallery-viewer__main,
.mobile-menu-overlay {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.gallery-viewer__image,
.hero-slider_bg-img,
.gh__full-img img,
.gh__panel-img img {
-webkit-user-drag: none;
}
}
/* Mobile forced no-zoom motion lock */
@media (max-width: 768px), (pointer: coarse) {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body.page-leaving .page-main,
body.page-entering .page-main,
.page-main {
transform: none !important;
scale: none !important;
translate: none !important;
filter: none !important;
}
body.page-entering .page-main {
animation: none !important;
}
.hero-slider,
.hero-slider_inner,
.hero-slider_bg-wrap,
.hero-slider_bg,
.hero-slider_bg-img,
.hero-media,
.hero-image,
.page-hero-media,
.page-hero-media img,
.sub-hero,
.sub-hero img,
.prd-bg-media,
.prd-bg-media img,
.prd-overview-hero-shell,
.premium-signature-media,
.premium-signature-media img,
.premium-signature-media--reveal,
.prd-concierge-media,
.prd-concierge-media img,
.prd-concierge-image,
.gallery-preview-main,
.gallery-preview-main img,
.gallery-preview-stack img,
.overview-gallery-stage,
.overview-gallery-stage img,
.section-feature-media,
.section-feature-media img,
.type-showcase-media,
.type-showcase-media img,
[data-parallax],
[data-parallax-img],
[data-parallax-img] img,
[data-img-scroll],
[data-img-scroll] img,
[data-reveal="scale"],
[data-reveal="scale"].is-revealed {
transform: none !important;
scale: none !important;
translate: none !important;
will-change: auto !important;
}
.hero-slider_bg-img,
.hero-image,
.page-hero-media img,
.prd-bg-media img,
.premium-signature-media img,
.prd-concierge-image,
.gallery-preview-main img,
[data-parallax-img] img,
[data-img-scroll] img {
transition-property: opacity !important;
}
}
@media (max-width: 768px) {
.premium-signature-body--lead {
max-width: min(26rem, calc(100vw - 2.5rem)) !important;
font-family: var(--font--primary) !important;
font-size: clamp(1.18rem, 4.8vw, 1.48rem) !important;
line-height: 1.42 !important;
font-weight: 650 !important;
letter-spacing: -0.03em !important;
margin-bottom: 1rem !important;
}
.premium-signature-copy::before {
height: 9.5rem !important;
background: linear-gradient(90deg, rgba(5, 7, 10, 0.28) 0%, rgba(5, 7, 10, 0.14) 55%, rgba(5, 7, 10, 0) 100%) !important;
}}
/* Mobile signature premium uses only the caption readability layer */
@media (max-width: 768px) {
.premium-signature-copy::before {
display: none !important;
}
}
/* Promotion film */
.prd-film-section {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
padding: calc(clamp(5.5rem, 10vh, 8rem) + var(--safe-top)) 0 calc(clamp(5rem, 9vh, 7rem) + var(--safe-bottom));
overflow: clip;
background: #070707;
color: #fff;
}
.prd-film-section::before,
.prd-film-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.prd-film-section::before {
background: url("./assets/hero-04.webp") center / cover no-repeat;
transform: scale(1.01);
opacity: 1;
}
.prd-film-section::after {
background:
linear-gradient(180deg, rgba(7, 8, 12, 0) 0%, rgba(7, 8, 12, 0.06) 58%, rgba(7, 8, 12, 0.2) 100%),
linear-gradient(90deg, rgba(7, 8, 12, 0.24) 0%, rgba(7, 8, 12, 0.1) 38%, rgba(7, 8, 12, 0.02) 100%);
}
.prd-film-shell {
position: relative;
z-index: 1;
width: min(calc(100% - 40px - var(--safe-left) - var(--safe-right)), 1480px);
max-width: 1480px;
min-height: calc(100svh - clamp(10rem, 18vh, 15rem));
display: grid;
grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1.5fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
}
.prd-film-copy {
max-width: 26rem;
}
.prd-film-label {
margin: 0 0 1.75rem;
font-family: var(--font--secondary);
font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
color: #ffffff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}
.prd-film-line {
display: block;
width: 3.3rem;
height: 1px;
margin-bottom: 2.75rem;
background: rgba(255, 255, 255, 0.94);
}
.prd-film-title {
max-width: 22rem;
margin: 0 0 2.4rem;
font-family: var(--font--primary);
font-size: clamp(1.65rem, 1.2rem + 1vw, 2.25rem);
line-height: 1.45;
letter-spacing: -0.02em;
font-weight: 500;
word-break: keep-all;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.prd-film-body {
max-width: 20rem;
margin: 0;
font-size: 0.9rem;
line-height: 1.85;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}
.prd-film-card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
cursor: pointer;
background: #171612 url("./assets/video/film-thumb.webp") center / cover no-repeat;
color: #fff;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
}
.prd-film-teaser {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
}
.prd-film-card-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14)),
linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 58%);
pointer-events: none;
}
.prd-film-play {
position: absolute;
left: 50%;
top: 50%;
width: clamp(4.75rem, 8vw, 7rem);
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.56);
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
transform: translate(-50%, -50%);
backdrop-filter: blur(14px);
transition: transform 0.42s ease, background-color 0.42s ease, border-color 0.42s ease;
}
.prd-film-play-icon {
width: 0;
height: 0;
margin-left: 0.32rem;
border-top: 0.72rem solid transparent;
border-bottom: 0.72rem solid transparent;
border-left: 1.05rem solid currentColor;
}
.prd-film-card:hover .prd-film-play {
transform: translate(-50%, -50%) scale(1.06);
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.88);
}
.prd-film-meta {
position: absolute;
left: clamp(1.25rem, 3vw, 2.4rem);
right: clamp(1.25rem, 3vw, 2.4rem);
bottom: clamp(1.25rem, 3vw, 2.25rem);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
text-align: left;
color: rgba(255, 255, 255, 0.92);
}
.prd-film-meta span,
.film-modal__caption span {
font-family: var(--font--primary);
font-size: 0.72rem;
line-height: 1.2;
letter-spacing: 0.22em;
font-weight: 700;
}
.prd-film-meta strong,
.film-modal__caption strong {
font-family: var(--font--primary);
font-size: 0.88rem;
letter-spacing: 0.08em;
font-weight: 800;
}
.film-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.film-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.film-modal__backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(0, 0, 0, 0.86);
}
.film-modal__dialog {
position: relative;
width: min(92vw, 1180px);
color: #fff;
}
.film-modal__video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 78svh;
background: #000;
object-fit: contain;
box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.58);
}
.film-modal__close {
position: absolute;
right: 0;
top: -3.25rem;
height: 2.4rem;
padding: 0 1rem;
border: 1px solid rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-family: var(--font--primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
cursor: pointer;
}
.film-modal__caption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1rem;
color: rgba(255, 255, 255, 0.82);
}
body.has-film-modal {
overflow: hidden;
}
@media (max-width: 900px) {
.prd-film-section {
min-height: 100svh;
padding-top: calc(6.4rem + var(--safe-top));
padding-bottom: calc(4.5rem + var(--safe-bottom));
}
.prd-film-shell {
min-height: auto;
grid-template-columns: 1fr;
gap: 2.4rem;
}
.prd-film-copy {
max-width: 100%;
}
.prd-film-title {
max-width: 17rem;
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}
.prd-film-body {
max-width: 17rem;
font-size: 0.84rem;
}
.prd-film-card {
aspect-ratio: 16 / 10;
}
.prd-film-teaser {
object-fit: cover;
}
.prd-film-meta {
align-items: flex-start;
flex-direction: column;
}
.film-modal__dialog {
width: calc(100vw - 2rem);
}
.film-modal__close {
top: -3rem;
}
.film-modal__caption {
align-items: flex-start;
flex-direction: column;
gap: 0.45rem;
}}
@media (max-width: 768px), (pointer: coarse) {
.hero-slider_bg-img,
.preloader-img,
.prd-bg-media,
.prd-bg-media img,
.premium-signature-media,
.premium-signature-media img,
.premium-signature-media--reveal,
.prd-concierge-media,
.prd-concierge-media img,
.prd-concierge-image,
.scene-media,
.scene-media img,
.scene-visual-card,
.scene-graphic-card,
.scene-plan-card,
.scene-stat-card,
.scene-compare-card,
[data-parallax],
[data-parallax-img],
[data-parallax-img] img,
[data-img-scroll],
[data-img-scroll] img,
[data-reveal="scale"],
[data-reveal="scale"].is-revealed {
transform: none !important;
scale: none !important;
translate: none !important;
will-change: auto !important;
}
.hero-slider_bg-img {
transition: none !important;
}
.hero-slider_bg {
transition: opacity 0.75s ease !important;
}
[data-reveal],
[data-reveal="left"],
[data-reveal="right"],
[data-reveal="scale"] {
transform: none !important;
transition-property: opacity !important;
}}
/* Mobile: show footer naturally after the promotion section, no reveal layer */
@media (max-width: 900px), (pointer: coarse) {
html {
--footer-reveal-height: 0px !important;
}
html,
body {
background: var(--swatch--light) !important;
}
.page-main {
margin-bottom: 0 !important;
}
.site-footer-reveal {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 2 !important;
min-height: auto !important;
transform: none !important;
will-change: auto !important;
}
.footer-reveal-inner {
min-height: auto !important;
}
.prd-film-section,
.prd-film-section::before,
.prd-film-card,
.prd-film-card::before,
.prd-film-teaser,
.prd-film-poster,
.prd-film-media,
.prd-film-media img,
.prd-film-media video {
transform: none !important;
scale: none !important;
translate: none !important;
will-change: auto !important;
}
.prd-film-section::before,
.prd-film-teaser,
.prd-film-poster {
transition-property: opacity !important;
}
}
/* Mobile: disable scroll/reveal motion that can feel like zoom */
@media (max-width: 900px), (pointer: coarse) {
html {
--lpb-stable-mobile-screen: calc(var(--lpb-mobile-vh, 1svh) * 100);
}
.hero-slider {
position: relative !important;
top: auto !important;
z-index: 1 !important;
height: var(--lpb-stable-mobile-screen) !important;
min-height: var(--lpb-stable-mobile-screen) !important;
max-height: var(--lpb-stable-mobile-screen) !important;
overflow: hidden !important;
isolation: isolate;
contain: layout paint;
}
.hero-slider_inner,
.hero-slider_bg-wrap,
.hero-slider_bg,
.hero-slider_bg-img {
height: var(--lpb-stable-mobile-screen) !important;
min-height: var(--lpb-stable-mobile-screen) !important;
max-height: var(--lpb-stable-mobile-screen) !important;
}
.hero-intro,
.hero-slider_nav {
transform: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
[data-mobile-soft-reveal] {
opacity: 0 !important;
transform: translate3d(0, 18px, 0) !important;
scale: none !important;
translate: none !important;
filter: none !important;
transition:
opacity 0.62s cubic-bezier(0.22, 0.86, 0.2, 1),
transform 0.68s cubic-bezier(0.22, 0.86, 0.2, 1) !important;
transition-delay: var(--mobile-reveal-delay, 0ms) !important;
animation: none !important;
will-change: opacity, transform !important;
}
[data-mobile-soft-reveal].is-revealed {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
}
[data-mobile-soft-reveal] img,
[data-mobile-soft-reveal] video {
transform: none !important;
scale: none !important;
translate: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
.hero-slider_bg-img,
.prd-bg-media,
.prd-bg-media img,
.premium-signature-media,
.premium-signature-media img,
.prd-rooftop-media,
.prd-rooftop-image,
.prd-concierge-media,
.prd-concierge-image,
.prd-film-section::before,
.prd-film-teaser,
.prd-film-poster {
transform: none !important;
scale: none !important;
translate: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
}
/* ============================================================
Mega Menu (desktop) — PPT gray/blue + dh-bangbae reveal
============================================================ */
.mega-nav,
.mega-panel {
display: none; /* 모바일에서는 숨김 — 데스크탑 media에서만 노출 */
}
@media (min-width: 1024px) {
.site-header-prd .header-inner {
position: relative;
}
.mega-nav {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.mega-nav_list {
display: grid;
grid-template-columns: repeat(4, 168px);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.mega-nav_item {
justify-self: center;
}
.mega-nav_top {
display: inline-flex;
align-items: center;
height: 46px;
padding: 0 16px;
font-family: var(--font--primary, inherit);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
color: #1a1a1a;
white-space: nowrap;
border-radius: 8px;
transition: background-color 0.25s ease, color 0.25s ease;
}
.mega-nav_top:hover,
.mega-nav_top.is-active {
background: rgba(108, 108, 110, 0.92); /* PPT gray */
color: #ffffff;
}
.mega-nav_underline {
display: none; /* 목업: 회색 메뉴에 밑줄 없음 */
}
/* Home: header is transparent over hero → white nav text by default */
.home-odd-ritual .site-header-prd .mega-nav_top {
color: #ffffff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.home-odd-ritual .site-header-prd .mega-nav_top:hover,
.home-odd-ritual .site-header-prd .mega-nav_top.is-active {
color: #ffffff;
text-shadow: none;
}
/* Open state: solid header so gray/blue reads well (overrides home transparent) */
.site-header.site-header-prd.is-mega-open,
.home-odd-ritual .site-header.site-header-prd.is-mega-open {
background: #ffffff !important; /* 갤러리 계열 transparent !important 덮어쓰기 */
backdrop-filter: blur(18px) !important;
border-bottom-color: rgba(17, 17, 17, 0.08) !important;
box-shadow: none;
}
.home-odd-ritual .site-header-prd.is-mega-open .mega-nav_top {
color: #1a1a1a;
text-shadow: none;
}
.home-odd-ritual .site-header-prd.is-mega-open .mega-nav_top:hover,
.home-odd-ritual .site-header-prd.is-mega-open .mega-nav_top.is-active {
color: #ffffff;
}
.home-odd-ritual .site-header-prd.is-mega-open .header-phone {
color: #1a1a1a;
text-shadow: none;
}
.home-odd-ritual .site-header-prd.is-mega-open .brand-logo img {
filter: none;
}
/* Full-width dropdown panel */
.mega-panel {
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #ffffff;
border-top: 1px solid rgba(17, 17, 17, 0.06);
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
box-shadow: 0 26px 44px rgba(17, 17, 17, 0.1);
overflow: hidden;
max-height: 0;
opacity: 0;
pointer-events: none;
transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.site-header-prd.is-mega-open .mega-panel {
max-height: 340px;
opacity: 1;
pointer-events: auto;
}
.mega-panel_grid {
display: grid;
grid-template-columns: repeat(4, 168px);
justify-content: center;
padding: 24px 0 28px;
}
.mega-panel_col {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 4px;
}
/* 레퍼런스: 흰 배경 위 플레인 텍스트 링크 → 호버 시 진해지며 살짝 커짐 */
.mega-panel_link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 2px;
background: none;
border: 0;
color: #2a3550;
font-size: 1.06rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
text-align: center;
white-space: nowrap;
opacity: 0;
transform: translateY(10px);
transform-origin: center;
--r: 0ms;
transition: color 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
font-weight 0.2s ease;
}
/* 스태거 리빌 — 컬럼/행 지연값 */
.mega-panel_link:nth-child(2) { --r: 55ms; }
.mega-panel_link:nth-child(3) { --r: 110ms; }
.mega-panel_col:nth-child(2) { --c: 60ms; }
.mega-panel_col:nth-child(3) { --c: 120ms; }
.mega-panel_col:nth-child(4) { --c: 180ms; }
.site-header-prd.is-mega-open .mega-panel_link {
opacity: 1; /* reduced-motion 대비 기본 노출 */
transform: translateY(0);
animation: megaBoxIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: calc(var(--c, 0ms) + var(--r, 0ms));
}
@keyframes megaBoxIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.site-header-prd.is-mega-open .mega-panel_link:hover {
color: #0f1830;
font-weight: 700;
transform: scale(1.16);
}}
/* ============================================================
사업개요 랜딩 페이지 (business.html) — 흰 헤더 (전 랜딩 통일)
============================================================ */
.page-business .site-header-prd,
.page-business .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
box-shadow: none;
}
/* 사업개요 — 흰 배경 OVERVIEW 레이아웃 (야경조감 + 정보 패널) */
.page-business {
background: #ffffff;
min-height: 100svh;
}
.page-business-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(2.5rem, 5vw, 4.5rem));
padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.overview-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
/* 헤더: OVERVIEW 태그 + 두 줄 카피 */
.overview-head {
margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.overview-tag {
display: inline-block;
padding: 0.5em 1.3em;
border-radius: 4px;
background: #16203a;
color: #ffffff;
font-family: var(--font--primary);
font-size: clamp(0.86rem, 0.76rem + 0.5vw, 1.12rem);
font-weight: 800;
letter-spacing: 0.16em;
}
.overview-headline {
margin: clamp(1rem, 2vw, 1.5rem) 0 0;
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.18;
color: #16203a;
font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.85rem);
}
.overview-subline {
margin: 0.55rem 0 0;
font-family: var(--font--primary);
font-weight: 500;
font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.4rem);
letter-spacing: -0.01em;
color: rgba(22, 32, 58, 0.6);
}
/* 카드: 야경조감(좌) + 정보 패널(우) */
.overview-card {
display: grid;
grid-template-columns: 1.22fr 1fr;
gap: clamp(1.25rem, 2.5vw, 2.25rem);
align-items: stretch;
}
.overview-visual {
margin: 0;
border-radius: clamp(10px, 1.4vw, 18px);
overflow: hidden;
box-shadow: 0 30px 64px -34px rgba(15, 24, 48, 0.55);
}
.overview-visual img {
display: block;
width: 100%;
height: 100%;
min-height: clamp(260px, 38vw, 520px);
object-fit: cover;
}
.overview-info {
display: flex;
flex-direction: column;
padding: clamp(1.75rem, 2.6vw, 2.75rem) clamp(1.6rem, 2.4vw, 2.5rem);
border-radius: clamp(10px, 1.4vw, 18px);
background: linear-gradient(165deg, #f4f8fc 0%, #e8f0f8 100%);
border: 1px solid rgba(40, 58, 99, 0.08);
}
.overview-brand {
margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
padding-bottom: clamp(0.9rem, 1.6vw, 1.3rem);
border-bottom: 1px solid rgba(22, 32, 58, 0.14);
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.12;
color: #16203a;
font-size: clamp(1.45rem, 1rem + 1.7vw, 2.1rem);
}
.overview-brand span {
display: block;
font-weight: 600;
color: rgba(22, 32, 58, 0.7);
}
.overview-specs {
margin: 0;
display: flex;
flex-direction: column;
}
.overview-spec {
display: grid;
grid-template-columns: clamp(72px, 8vw, 96px) 1fr;
gap: 0.75rem;
align-items: baseline;
padding: clamp(0.62rem, 1.1vw, 0.9rem) 0;
border-bottom: 1px solid rgba(22, 32, 58, 0.09);
}
.overview-spec:last-child {
border-bottom: 0;
}
.overview-spec dt {
font-family: var(--font--primary);
font-weight: 700;
font-size: clamp(0.9rem, 0.82rem + 0.32vw, 1.04rem);
letter-spacing: 0.01em;
color: #2b3a5e;
}
.overview-spec dd {
margin: 0;
font-family: var(--font--primary);
font-weight: 500;
font-size: clamp(0.95rem, 0.86rem + 0.36vw, 1.1rem);
letter-spacing: -0.01em;
color: #1f2937;
}
@media (max-width: 860px) {
.overview-card {
grid-template-columns: 1fr;
}
.overview-visual img {
min-height: clamp(220px, 56vw, 360px);
}}
/* 푸터가 없는 페이지 — 푸터 리빌용 빈 공간(검은 여백) 제거 */
.page-business,
.page-brand,
.page-directions,
.page-premium,
.page-location,
.page-site-plan,
.page-unit {
--footer-reveal-height: 0px;
}
.page-business .page-main,
.page-brand .page-main,
.page-directions .page-main,
.page-premium .page-main,
.page-location .page-main,
.page-site-plan .page-main,
.page-unit .page-main {
margin-bottom: 0;
}
/* ============================================================
브랜드 소개 랜딩 페이지 (brand.html)
흰 헤더(기본) → 헤더 아래 파란 풀폭 밴드 → 흰 배경+검은 글씨 (흰-파랑-흰)
============================================================ */
.page-brand {
background: #ffffff;
}
/* 헤더를 또렷한 흰색으로 (첨부 1번 — 라이트 헤더 + 어두운 메뉴 + 네이비 로고) */
.page-brand .site-header-prd,
.page-brand .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
box-shadow: none;
}
.page-brand-main {
background: #ffffff;
/* 헤더 아래로 내려서 시작 + 흰 여백 (헤더와 사진이 붙지 않게) */
padding-top: calc(var(--site-header-height, 84px) + clamp(1.5rem, 3.5vw, 3.25rem));
padding-bottom: clamp(3rem, 7vw, 7rem);
}
.brand-band {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.brand-history {
text-align: center;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) 0;
}
.brand-history p {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.45rem);
line-height: 1.8;
letter-spacing: -0.01em;
color: #111111; /* 흰 배경 위 검은 글씨 */
}
.brand-history p:first-child {
font-weight: 700;
}
.brand-history p + p {
color: rgba(17, 17, 17, 0.6);
}
/* 두 번째 섹션 — 왼쪽 가운데 문구 + 오른쪽 큰 로고 (높이 낮게) */
.brand-statement {
background: #ffffff;
}
.brand-statement-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(2rem, 5vw, 5rem);
min-height: clamp(340px, 50vh, 520px); /* 다른 섹션보다 낮게 */
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}
.brand-statement-text {
flex: 1 1 auto;
min-width: 0;
}
.brand-statement-line {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(1.5rem, 1rem + 2.2vw, 2.65rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.015em;
color: #1a2440; /* 네이비 */
}
.brand-statement-logo {
flex: 0 0 auto;
text-align: center;
}
.brand-statement-logo img {
display: block;
width: clamp(150px, 17vw, 240px);
height: auto;
margin: 0 auto;
}
.brand-statement-caption {
margin: 1rem 0 0; /* 타이트해진 로고 바로 아래 */
font-family: var(--font--primary);
font-size: clamp(1rem, 0.88rem + 0.45vw, 1.2rem);
font-weight: 600;
letter-spacing: 0.02em;
color: #1a2440;
}
/* 세 번째 섹션 — 라포르테 레퍼런스 (2×2 그리드 이미지) */
.brand-references {
background: #ffffff;
padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 7rem);
}
/* 섹션 헤더 */
.ref-head {
width: 100%;
max-width: 1200px;
margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
text-align: center;
}
.ref-eyebrow {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(0.74rem, 0.66rem + 0.3vw, 0.88rem);
font-weight: 700;
letter-spacing: 0.22em;
color: #b8965a;
}
.ref-title {
margin: 0.6rem 0 0;
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.02em;
color: #16203a;
font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
}
/* 2×2 카드 그리드 */
.ref-grid {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
}
.ref-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid rgba(22, 32, 58, 0.08);
border-radius: clamp(12px, 1.4vw, 18px);
overflow: hidden;
box-shadow: 0 18px 40px -30px rgba(15, 24, 48, 0.35);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s ease;
}
.ref-card:hover {
transform: translateY(-6px);
box-shadow: 0 32px 60px -32px rgba(15, 24, 48, 0.45);
}
.ref-card-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #eef1f5;
}
.ref-card-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-card:hover .ref-card-media img {
transform: scale(1.045);
}
.ref-card-body {
padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.4rem, 2.2vw, 2rem) clamp(1.6rem, 2.4vw, 2.2rem);
}
.ref-card-eyebrow {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(0.72rem, 0.66rem + 0.26vw, 0.84rem);
font-weight: 700;
letter-spacing: 0.13em;
color: #b8965a;
}
.ref-card-title {
margin: 0.55rem 0 0;
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.02em;
color: #16203a;
font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
}
.ref-card-desc {
margin: clamp(0.7rem, 1.2vw, 1rem) 0 0;
font-family: var(--font--primary);
font-weight: 400;
font-size: clamp(0.95rem, 0.88rem + 0.32vw, 1.05rem);
line-height: 1.72;
letter-spacing: -0.01em;
color: rgba(33, 43, 64, 0.72);
word-break: keep-all;
}
@media (max-width: 720px) {
.ref-grid {
grid-template-columns: 1fr;
max-width: 460px;
}}
@media (max-width: 768px) {
.brand-statement-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 2rem;
min-height: auto;
padding: clamp(2.5rem, 8vw, 3.5rem) 1.25rem;
}
.brand-statement-line {
text-align: center;
}
.brand-statement-logo img {
width: clamp(140px, 42vw, 210px);
}}
/* ============================================================
오시는 길 (directions.html) — 좌측 지도 + 우측 LOCATION MAP 카드
============================================================ */
.page-directions {
background: #ffffff;
min-height: 100svh; /* 내용이 짧아도 흰 배경이 화면 끝까지 — 하단 다크 비침 방지 */
}
/* 흰 페이지에 맞춰 헤더도 또렷한 흰색 */
.page-directions .site-header-prd,
.page-directions .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
}
.page-directions-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(2.75rem, 5vw, 4.25rem));
padding-bottom: clamp(3rem, 7vw, 6rem);
}
.directions-section {
width: 100%;
max-width: var(--max-width, 1280px);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.directions-eyebrow {
display: block;
width: fit-content;
margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem); /* 가운데 정렬 */
padding: 0.5rem 1.3rem;
background: #2b3a55;
color: #ffffff;
font-family: var(--font--primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
border-radius: 5px;
}
.directions-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: stretch;
}
/* 지도 */
.directions-map {
position: relative;
min-height: clamp(420px, 56vh, 600px);
border-radius: 14px;
overflow: hidden;
background: #dfe6ee;
box-shadow: 0 24px 48px rgba(30, 42, 74, 0.12);
}
/* 정적 지도 이미지 + 길찾기 버튼 */
.directions-map-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.map-link-btn {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 0.72rem 1.3rem;
border-radius: 999px;
background: #1e2a4a;
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
box-shadow: 0 10px 24px rgba(15, 24, 48, 0.32);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.map-link-btn:hover {
transform: translateY(-2px);
background: #2b3a55;
}
/* LOCATION MAP 카드 (다크 네이비) */
.directions-info {
display: flex;
}
.location-card {
width: 100%;
background: #ffffff;
color: #16203a;
border: 1px solid rgba(22, 32, 58, 0.1);
border-radius: clamp(12px, 1.4vw, 18px);
padding: clamp(1.75rem, 2.6vw, 2.5rem);
box-shadow: 0 22px 52px -30px rgba(15, 24, 48, 0.34);
}
.location-card-label {
margin: 0;
font-family: var(--font--primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.2em;
color: #b8965a; /* 골드 */
}
.location-card-title {
margin: 0.55rem 0 0;
font-family: var(--font--primary);
font-size: clamp(1.35rem, 1rem + 1.1vw, 1.7rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #16203a;
}
.location-card-divider {
height: 1px;
margin: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1.1rem, 2vw, 1.5rem);
background: rgba(22, 32, 58, 0.1);
}
.location-row {
display: flex;
gap: 0.8rem;
padding: 0.55rem 0;
}
.location-row + .location-row {
border-top: 1px solid rgba(22, 32, 58, 0.08);
margin-top: 0.4rem;
padding-top: 1.1rem;
}
.location-row-icon {
flex-shrink: 0;
font-size: 1.05rem;
line-height: 1.5;
}
.location-row-body {
min-width: 0;
}
.location-row-head {
margin: 0 0 0.3rem;
font-family: var(--font--primary);
font-size: 1rem;
font-weight: 700;
color: #16203a;
}
.location-row-main {
margin: 0;
font-family: var(--font--primary);
font-size: 0.95rem;
font-weight: 600;
color: #2a3343;
}
.location-row-sub {
margin: 0.2rem 0 0;
font-family: var(--font--primary);
font-size: 0.86rem;
line-height: 1.55;
color: rgba(22, 32, 58, 0.55);
}
.location-transit {
margin-top: 0.8rem;
background: #f5f7fb;
border: 1px solid rgba(22, 32, 58, 0.08);
border-radius: 10px;
padding: 0.85rem 1rem;
display: grid;
gap: 0.6rem;
}
.transit-line {
display: grid;
grid-template-columns: 3.8em 1fr auto;
align-items: center;
gap: 0.5rem;
font-family: var(--font--primary);
font-size: 0.85rem;
}
.transit-station {
font-weight: 700;
color: #16203a;
}
.transit-route {
color: rgba(22, 32, 58, 0.5);
font-size: 0.78rem;
}
.transit-time {
font-weight: 700;
color: #16203a;
white-space: nowrap;
text-align: right;
}
@media (max-width: 980px) {
.directions-grid {
grid-template-columns: 1fr;
}
.directions-map {
min-height: clamp(320px, 48vh, 460px);
}}
@media (max-width: 768px) {
.directions-section {
padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.transit-line {
grid-template-columns: 3.4em 1fr;
}
.transit-time {
grid-column: 1 / -1;
text-align: left;
}}
/* ============================================================
모바일: 랜딩 페이지 헤더 투명 (메인 히어로처럼 로고 + MENU만)
============================================================ */
@media (max-width: 1023px) {
.page-business .site-header-prd,
.page-business .site-header-prd.is-scrolled,
.page-brand .site-header-prd,
.page-brand .site-header-prd.is-scrolled,
.page-directions .site-header-prd,
.page-directions .site-header-prd.is-scrolled,
.page-premium .site-header-prd,
.page-premium .site-header-prd.is-scrolled,
.page-location .site-header-prd,
.page-location .site-header-prd.is-scrolled,
.page-site-plan .site-header-prd,
.page-site-plan .site-header-prd.is-scrolled,
.page-unit .site-header-prd,
.page-unit .site-header-prd.is-scrolled {
background: transparent !important;
border-bottom: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
}
/* ============================================================
프리미엄 (premium.html) — 풀폭 이미지 3개, 헤더 밑에서 시작
============================================================ */
.page-premium {
background: #ffffff;
}
/* 흰 헤더 (데스크탑) — 모바일은 위 미디어쿼리에서 투명 처리 */
.page-premium .site-header-prd,
.page-premium .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
box-shadow: none;
}
/* 프리미엄 — 풀폭 → 흰 배경 위 컨테이너로 축소 (한 눈에 보이게) */
.page-premium {
min-height: 100svh;
}
.page-premium-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(2rem, 4vw, 3.5rem));
padding-bottom: clamp(3rem, 7vw, 6rem);
}
.premium-section {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 3vw, 2rem);
}
.premium-section + .premium-section {
margin-top: clamp(2rem, 4.5vw, 3.75rem);
}
.premium-img {
display: block;
width: 100%;
height: auto;
margin: 0;
border-radius: clamp(10px, 1.4vw, 16px);
box-shadow: 0 26px 56px -34px rgba(15, 24, 48, 0.42);
}
/* ============================================================
입지환경 (location.html) — 제목(우리 폰트) + 입지 지도 이미지, 흰 배경
============================================================ */
.page-location {
background: #ffffff;
min-height: 100svh;
}
.page-location .site-header-prd,
.page-location .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
box-shadow: none;
}
.page-location-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(4rem, 8vw, 7rem));
padding-bottom: clamp(3rem, 7vw, 6rem);
}
.location-section {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
text-align: center;
}
.location-title {
margin: 0 0 clamp(2rem, 4vw, 3.25rem);
}
.location-title h1 {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(2.1rem, 1.3rem + 3.8vw, 3.9rem); /* 평형안내(BLANC'S TYPE) 제목과 동일 */
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.14;
color: #16203a;
word-break: keep-all;
}
.location-title p {
margin: clamp(0.65rem, 1.4vw, 1.1rem) 0 0;
font-family: var(--font--primary);
font-size: clamp(1.15rem, 0.95rem + 1vw, 1.75rem);
font-weight: 500;
letter-spacing: -0.01em;
color: rgba(22, 32, 58, 0.62);
}
.location-env-img {
display: block;
width: 100%;
max-width: 840px;
height: auto;
margin: 0 auto;
}
/* 입지환경 — 서현 인프라 (Convenience/Education) 섹션 */
.location-infra {
width: 100%;
max-width: 1080px;
margin: clamp(2.5rem, 6vw, 5rem) auto 0;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.location-infra-titles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.location-infra-col {
text-align: center;
}
.location-infra-col h2 {
margin: 0;
font-family: var(--font--primary);
font-size: clamp(1.15rem, 0.85rem + 1.4vw, 1.85rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
color: #16203a;
}
.location-infra-col p {
margin: 0.4rem 0 0;
font-family: var(--font--primary);
font-size: clamp(0.82rem, 0.75rem + 0.4vw, 1.02rem);
font-weight: 500;
letter-spacing: -0.01em;
color: rgba(22, 32, 58, 0.6);
}
.location-infra-img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
@media (max-width: 768px) {
.location-infra-titles {
grid-template-columns: 1fr;
gap: 1.5rem;
}}
/* ============================================================
단지 및 동호수 배치도 (site-plan.html)
PLOT MAP / FLOOR UNIT PLAN — 제목(우리 폰트) + 정리된 이미지, 흰 배경
============================================================ */
.page-site-plan {
background: #ffffff;
min-height: 100svh;
}
/* 흰 헤더 (데스크탑) — 모바일은 투명 미디어쿼리에서 처리 */
.page-site-plan .site-header-prd,
.page-site-plan .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: none;
}
.page-site-plan-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(2.5rem, 5vw, 4.5rem));
padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.site-plan-section {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
text-align: center;
}
.site-plan-section:first-of-type {
padding-top: 0;
}
.site-plan-title {
margin: 0 0 clamp(2rem, 4vw, 3.25rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
.site-plan-tag {
display: inline-block;
padding: 0.48em 1.25em;
border-radius: 999px;
background: #16203a;
color: #ffffff;
font-family: var(--font--primary);
font-size: clamp(0.74rem, 0.66rem + 0.34vw, 0.92rem);
font-weight: 700;
letter-spacing: 0.2em;
}
.site-plan-title h1,
.site-plan-title h2 {
margin: 0.7rem 0 0;
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.14;
color: #16203a;
font-size: clamp(2.1rem, 1.3rem + 3.8vw, 3.9rem);
}
.site-plan-title p {
margin: 0.15rem 0 0;
font-family: var(--font--primary);
font-weight: 500;
font-size: clamp(1.1rem, 0.92rem + 0.9vw, 1.6rem);
letter-spacing: -0.012em;
color: rgba(22, 32, 58, 0.6);
}
.site-plan-figure {
margin: 0;
line-height: 0;
}
.site-plan-img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.site-plan-img--plot {
max-width: 1120px;
border-radius: clamp(8px, 1.4vw, 16px);
box-shadow: 0 24px 60px -32px rgba(22, 32, 58, 0.45);
}
.site-plan-img--floor {
max-width: 1240px;
}
@media (max-width: 768px) {
.site-plan-img--plot {
box-shadow: 0 16px 36px -24px rgba(22, 32, 58, 0.4);
}}
/* ============================================================
평형 안내 (unit.html) — BLANC'S TYPE
제목(Pretendard) + 정리된 6타입 그리드 이미지, 흰 배경
============================================================ */
.page-unit {
background: #ffffff;
min-height: 100svh;
}
.page-unit .site-header-prd,
.page-unit .site-header-prd.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(17, 17, 17, 0.07);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: none;
}
.page-unit-main {
background: #ffffff;
padding-top: calc(var(--site-header-height, 84px) + clamp(2.5rem, 5vw, 4.5rem));
padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.unit-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
text-align: center;
}
.unit-title {
margin: 0 0 clamp(2.25rem, 4.5vw, 3.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
.unit-tag {
display: inline-block;
padding: 0.48em 1.25em;
border-radius: 999px;
background: #16203a;
color: #ffffff;
font-family: var(--font--primary);
font-size: clamp(0.74rem, 0.66rem + 0.34vw, 0.92rem);
font-weight: 700;
letter-spacing: 0.2em;
}
.unit-title h1 {
margin: 0.7rem 0 0;
font-family: var(--font--primary);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.14;
color: #16203a;
font-size: clamp(2.1rem, 1.3rem + 3.8vw, 3.9rem);
word-break: keep-all; /* 한글 단어 안 깨지게 ("담은" 유지) */
}
.unit-title p {
margin: 0.15rem 0 0;
font-family: var(--font--primary);
font-weight: 500;
font-size: clamp(0.95rem, 0.82rem + 0.7vw, 1.3rem);
letter-spacing: 0.01em;
color: rgba(22, 32, 58, 0.55);
}
.unit-figure {
margin: 0;
line-height: 0;
}
.unit-img {
display: block;
width: 100%;
height: auto;
max-width: 1120px;
margin: 0 auto;
}
/* ============================================================
모바일 메뉴 — 트렌디 등장 (그룹 스태거 슬라이드+페이드)
============================================================ */
@media (max-width: 1023px) {
.overlay-group,
.overlay-cta {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-overlay.is-open .overlay-group,
.mobile-menu-overlay.is-open .overlay-cta {
opacity: 1;
transform: none;
}
.mobile-menu-overlay.is-open .overlay-group:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu-overlay.is-open .overlay-group:nth-child(2) { transition-delay: 0.13s; }
.mobile-menu-overlay.is-open .overlay-group:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu-overlay.is-open .overlay-group:nth-child(4) { transition-delay: 0.27s; }
.mobile-menu-overlay.is-open .overlay-cta { transition-delay: 0.32s; }
/* 탭 시 살짝 눌리는 마이크로 인터랙션 */
.overlay-sub-link {
transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.overlay-sub-link:active { transform: scale(0.98); }
.overlay-cta:active { transform: scale(0.985); }
}
@media (prefers-reduced-motion: reduce) {
.overlay-group,
.overlay-cta {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}