/* ============================================================ common.css — 사이트 전체 공통 스타일시트 페이지별 CSS 파일을 만들지 않는다. 특정 페이지 전용 효과는 맨 아래 [PAGE SPECIFIC] 섹션에만 추가. [테마 규칙] - 모든 색은 반드시 아래 토큰(--c-*)만 사용한다. 색상값 직접 사용 금지. - 라이트(기본)/다크 전환은 로 제어한다. ============================================================ */ /* ---------- 0. 디자인 토큰 ---------- */ :root { /* === 라이트 모드 (기본 · 더그로우 스타일 밝은 톤) === */ --c-bg: #fbfaf7; /* 바탕: 밝은 웜 화이트 */ --c-bg-alt: #f3f1ec; /* 보조 배경 */ --c-surface: #ffffff; /* 카드/폼 표면 */ --c-text: #1c1d1f; /* 본문 텍스트 */ --c-text-soft: #6a6d72; /* 보조 텍스트 */ --c-line: #e6e3dc; /* 경계선 */ --c-accent: #DAA520; /* 시그니처 : 더 진한 골드 */ --c-accent-soft: rgba(201, 162, 39, 0.35); --c-on-accent: #ffffff; /* 골드 버튼 위 글자색 */ --c-invert-bg: #181a1e; /* 다크 컨트라스트 밴드(통계/CTA/푸터) */ --c-invert-text: #f4f2ed; --c-invert-soft: rgba(244, 242, 237, 0.62); --c-invert-line: rgba(255, 255, 255, 0.08); --c-header-glass: rgba(255, 255, 255, 0.72); /* 스크롤 후 헤더 유리 배경 */ --c-header-fg: var(--c-text); /* 스크롤 후 헤더 글자색 */ --c-shadow: rgba(20, 22, 26, 0.08); --font-display: 'Noto Serif KR', serif; --font-body: 'Noto Sans KR', sans-serif; --header-h: 80px; --container: 1300px; --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); /* 빠르게 시작해 천천히 멈춤 */ } /* === 다크 모드 === */ html[data-theme='dark'] { --c-bg: #131519; --c-bg-alt: #191c21; --c-surface: #1e2127; --c-text: #eceae4; --c-text-soft: #9a9da3; --c-line: #2c3037; --c-accent: #c9a263; --c-accent-soft: rgba(201, 162, 99, 0.35); --c-on-accent: #15161a; --c-invert-bg: #0e1013; --c-invert-text: #f4f2ed; --c-invert-soft: rgba(244, 242, 237, 0.6); --c-invert-line: rgba(255, 255, 255, 0.07); --c-header-glass: rgba(19, 21, 25, 0.62); --c-header-fg: var(--c-text); --c-shadow: rgba(0, 0, 0, 0.35); } /* ---------- 1. 리셋 / 베이스 ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* 가로 스크롤 방지: overflow-x: clip 은 스크롤 컨테이너를 만들지 않아 모바일 핀치 줌(확대)을 막지 않는다. (html 에 hidden 을 걸면 확대가 막힘) */ body { overflow-x: clip; } body { font-family: var(--font-body); font-weight: 300; color: var(--c-text); background: var(--c-bg); line-height: 1.7; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; transition: background 0.45s var(--ease-luxe), color 0.45s var(--ease-luxe); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; background: none; border: 0; cursor: pointer; } .container { width: min(var(--container), 92%); margin: 0 auto; } /* ============================================================ 2. 사이트 헤더 — 스티키 + 투명 → 글래스모피즘 전환 히어로 위(투명 상태)에서는 테마와 무관하게 흰 글자, 스크롤 후에는 테마별 유리 배경 + 테마 글자색. ============================================================ */ #site-header { /* 투명 상태 전용 지역 변수 */ --header-fg: #ffffff; position: fixed; /* 스티키 헤더 */ top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); background: transparent; /* 최초: 투명 */ border-bottom: 1px solid transparent; transition: background 0.6s var(--ease-luxe), border-color 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe), backdrop-filter 0.6s var(--ease-luxe); } .header-inner { height: 100%; width: min(1400px, 94%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } /* 로고: 두 장을 겹쳐두고 스크롤 상태에 따라 전환 */ .logo a { display: flex; align-items: center; position: relative; } .logo img { height: calc(var(--header-h) - 40px); /* 메뉴바 높이에 맞춰 자동 조정 */ width: auto; display: block; transition: opacity 0.5s var(--ease-luxe); } /* 두 로고를 같은 자리에 겹침 */ .logo .logo-dark { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } /* 기본(투명 헤더): 밝은 로고만 보임 */ .logo .logo-light { opacity: 1; } .logo .logo-dark { opacity: 0; } /* 스크롤 후: 어두운 로고로 전환 */ #site-header.scrolled .logo .logo-light { opacity: 0; } #site-header.scrolled .logo .logo-dark { opacity: 1; } /* GNB */ .gnb ul { display: flex; gap: 4px; } .gnb a { display: block; padding: 10px 16px; font-size: 0.95rem; font-weight: 400; color: var(--header-fg); opacity: 0.85; position: relative; transition: color 0.4s var(--ease-luxe), opacity 0.4s var(--ease-luxe); } .gnb a::after { /* 호버/활성 밑줄 */ content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-luxe); } .gnb li:hover a::after, .gnb li.active a::after { transform: scaleX(1); } .gnb li:hover a, .gnb li.active a { opacity: 1; } /* 헤더 우측: 전화 + 테마 토글 */ .header-tel { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; /* 두껍게 */ color: var(--c-accent); letter-spacing: 0.04em; white-space: nowrap; } /* 헤더 관심고객등록 버튼 */ .header-cta { display: inline-block; background: var(--c-accent); color: #ffffff; /* 토큰 대신 흰색 고정 → 다크모드에서도 또렷 */ font-size: 0.95rem; font-weight: 700; padding: 10px 22px; border-radius: 4px; white-space: nowrap; transition: opacity 0.35s var(--ease-luxe), transform 0.35s var(--ease-luxe); } .header-cta:hover { opacity: 0.9; transform: translateY(-1px); } /* 헤더 카카오 /* 헤더 카카오 공유 아이콘 */ .header-share { display: none; /* PC 숨김 */ width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--header-fg); opacity: 0.85; flex-shrink: 0; transition: color 0.5s var(--ease-luxe), opacity 0.35s var(--ease-luxe); } .header-share:hover { opacity: 1; } @media (max-width: 1024px) { .header-share { display: inline-flex; } /* 모바일에서 가로 한 줄로 표시 */ } .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--header-fg); border-radius: 50%; color: var(--header-fg); opacity: 0.7; font-size: 0.95rem; transition: opacity 0.35s var(--ease-luxe), color 0.5s var(--ease-luxe), border-color 0.5s var(--ease-luxe), transform 0.45s var(--ease-luxe); } .theme-toggle:hover { opacity: 1; transform: rotate(20deg); } /* 토글 아이콘: 라이트에서는 달(다크로 전환), 다크에서는 해(라이트로 전환) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme='dark'] .theme-toggle .icon-sun { display: block; } html[data-theme='dark'] .theme-toggle .icon-moon { display: none; } /* --- 스크롤 후 상태: 글래스모피즘 --- */ #site-header.scrolled { --header-fg: var(--c-header-fg); /* 테마 글자색으로 전환 */ background: var(--c-header-glass); /* 반투명 유리 */ -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* 뒤 이미지가 흐릿하게 비침 */ border-bottom: 1px solid var(--c-accent-soft);/* 얇은 골드 경계선 */ box-shadow: 0 8px 30px var(--c-shadow); } /* --- 하단 반짝임 라인 --- 투명 → 메뉴바 전환 직전, 헤더 맨 아래로 빛이 한 번 흐른다. */ .header-shine { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--c-accent-soft) 38%, var(--c-accent) 50%, rgba(255, 255, 255, 0.95) 54%, var(--c-accent-soft) 62%, transparent 100%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; } #site-header.scrolled .header-shine { animation: header-shine 1.4s var(--ease-luxe) forwards; } @keyframes header-shine { 0% { opacity: 1; background-position: 120% 0; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -120% 0; } } /* 모바일 토글 */ .nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 1100; } .nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--header-fg); transition: transform 0.4s var(--ease-luxe), opacity 0.3s, background 0.5s; } .nav-toggle.open span { background: #ffffff; } /* 오버레이 메뉴 위에서는 항상 흰색 */ .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ 3. 메인 히어로 슬라이더 (3장 페이드) 이미지 위 글자는 테마와 무관하게 흰색 유지. ============================================================ */ .hero-slider { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: var(--c-invert-bg); } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease-luxe), transform 6.5s linear; } .hero-slide.active { opacity: 1; transform: scale(1); /* 켄번스(천천히 축소되며 정착) */ z-index: 1; } .hero-slide::after { /* 가독성용 어두운 그라데이션 */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 16, 19, 0.42) 0%, rgba(15, 16, 19, 0.08) 45%, rgba(15, 16, 19, 0.5) 100%); } .hero-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #ffffff; padding: 0 6%; } .hero-caption .eyebrow { font-size: 0.85rem; letter-spacing: 0.45em; color: var(--c-accent); text-transform: uppercase; margin-bottom: 22px; } .hero-caption h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.25; margin-bottom: 18px; } .hero-caption p { font-size: clamp(0.95rem, 1.6vw, 1.15rem); color: rgba(255,255,255,0.85); } /* 슬라이더 인디케이터 */ .hero-dots { position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 14px; } .hero-dots button { width: 36px; height: 3px; background: rgba(255, 255, 255, 0.35); transition: background 0.4s var(--ease-luxe); } .hero-dots button.active { background: var(--c-accent); } /* 스크롤 유도 */ .scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.7); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; padding-bottom: 34px; } .scroll-hint::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 28px; background: linear-gradient(180deg, var(--c-accent), transparent); animation: hint-drop 1.8s var(--ease-luxe) infinite; } @keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ============================================================ 4. 서브 페이지 히어로 (이미지 위 — 흰 글자 유지) ============================================================ */ .page-hero { position: relative; height: 46vh; min-height: 340px; display: grid; place-items: center; text-align: center; color: #ffffff; background-size: cover; background-position: center; background-color: var(--c-invert-bg); } .page-hero::after { content: ''; position: absolute; inset: 0; background: rgba(15, 16, 19, 0.45); } .page-hero__inner { position: relative; z-index: 1; padding-top: var(--header-h); } .page-hero__eyebrow { font-size: 0.8rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; } .page-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); } /* 서브 히어로 배경 이미지는 config.php 의 $SITE_IMAGES 에서 인라인 스타일로 주입된다. (원격 실패 시 로컬 레이어가 보임) */ /* ============================================================ 5. 공통 섹션 / 타이포 / 버튼 ============================================================ */ .section { padding: 110px 0; } .section--dark { /* 컨트라스트 밴드 */ background: var(--c-invert-bg); color: var(--c-invert-text); } .section--tint { background: var(--c-bg-alt); } .section-head { text-align: center; margin-bottom: 64px; } .section-head .eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; } .section-head h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.35; } .section-head .sub { margin-top: 16px; color: var(--c-text-soft); } .section--dark .section-head .sub { color: var(--c-invert-soft); } .btn { display: inline-block; padding: 16px 42px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.08em; border: 1px solid currentColor; transition: background 0.45s var(--ease-luxe), color 0.45s var(--ease-luxe), border-color 0.45s var(--ease-luxe); } .btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .btn--accent:hover { background: transparent; color: var(--c-accent); } .btn--ghost { color: #ffffff; } .btn--ghost:hover { background: #ffffff; color: var(--c-text); } /* ============================================================ 6. 스크롤 리빌 애니메이션 (lavieum 스타일) .reveal / .reveal-left / .reveal-right + .delay-1~4 ============================================================ */ .reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.9s var(--ease-luxe), transform 0.9s var(--ease-luxe); will-change: opacity, transform; } .reveal { transform: translateY(48px); } .reveal-left { transform: translateX(-64px); } .reveal-right { transform: translateX(64px); } .reveal.in, .reveal-left.in, .reveal-right.in { opacity: 1; transform: translate(0, 0); } .delay-1 { transition-delay: 0.12s; } .delay-2 { transition-delay: 0.24s; } .delay-3 { transition-delay: 0.36s; } .delay-4 { transition-delay: 0.48s; } /* 이미지+텍스트 교차 레이아웃 (lavieum amenity 스타일) */ .feature-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .feature-row + .feature-row { margin-top: 120px; } .feature-row.is-flip .feature-media { order: 2; } .feature-media { overflow: hidden; } .feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-luxe); } .feature-row:hover .feature-media img { transform: scale(1.05); } .feature-body .eyebrow { font-size: 0.78rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; } .feature-body h4 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4; margin-bottom: 18px; } .feature-body p { color: var(--c-text-soft); } .section--dark .feature-body p { color: var(--c-invert-soft); } /* ============================================================ 7. CTA 밴드 / 푸터 / 퀵버튼 ============================================================ */ .cta-band { background: var(--c-invert-bg); border-top: 1px solid var(--c-accent-soft); padding: 72px 0; } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .cta-band__copy { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--c-invert-text); } #site-footer { background: var(--c-invert-bg); border-top: 1px solid var(--c-invert-line); color: var(--c-invert-soft); font-size: 0.88rem; } .footer-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 64px 0 48px; } .footer-logo { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-invert-text); margin-bottom: 8px; } .footer-tagline { color: var(--c-accent); font-size: 0.85rem; letter-spacing: 0.08em; } .footer-info p { margin-bottom: 6px; } .footer-note { margin-top: 14px; font-size: 0.68rem; opacity: 0.7; } .footer-copy { border-top: 1px solid var(--c-invert-line); padding: 20px 0; text-align: center; font-size: 0.78rem; } .quick-call { position: fixed; right: 24px; bottom: 24px; z-index: 900; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: 0.95rem; padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 28px var(--c-shadow); transition: transform 0.35s var(--ease-luxe); } .quick-call:hover { transform: translateY(-3px); } /* ============================================================ 8. 폼 (고객등록) ============================================================ */ .form-card { max-width: 680px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-line); padding: 56px 52px; } .form-field { margin-bottom: 26px; } .form-field label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 10px; } .form-field label .req { color: #c0392b; } .form-field input[type="text"], .form-field input[type="tel"], .form-field select, .form-field textarea { width: 100%; padding: 14px 16px; font: inherit; font-size: 0.95rem; color: var(--c-text); border: 1px solid var(--c-line); background: var(--c-bg); transition: border-color 0.3s var(--ease-luxe), background 0.45s var(--ease-luxe); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--c-accent); } .form-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--c-text-soft); margin: 30px 0; } .form-agree input { margin-top: 4px; accent-color: var(--c-accent); } .form-submit { text-align: center; } .form-msg { margin-top: 16px; text-align: center; font-size: 0.88rem; color: #c0392b; } /* ============================================================ 9. [PAGE SPECIFIC] — 페이지 전용 효과만 아래에 추가 ============================================================ */ /* --- home: 핵심 수치 (다크 밴드 안) --- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-invert-line); border-top: 1px solid var(--c-invert-line); border-bottom: 1px solid var(--c-invert-line); } .stat-cell { background: var(--c-invert-bg); text-align: center; padding: 44px 16px; } .stat-cell strong { display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; color: var(--c-accent); margin-bottom: 6px; } .stat-cell span { font-size: 0.85rem; color: var(--c-invert-soft); letter-spacing: 0.06em; } /* --- summary: 사업개요 표 --- */ .summary-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-text); } .summary-table th, .summary-table td { padding: 20px 18px; border-bottom: 1px solid var(--c-line); text-align: left; font-size: 0.95rem; } .summary-table th { width: 200px; font-weight: 500; background: var(--c-bg-alt); letter-spacing: 0.04em; } /* --- concept: 카드 3열 --- */ .concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .concept-card { background: var(--c-surface); border: 1px solid var(--c-line); padding: 46px 36px; transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-luxe), background 0.45s var(--ease-luxe); } .concept-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px var(--c-shadow); } .concept-card .num { font-family: var(--font-display); color: var(--c-accent); font-size: 1rem; letter-spacing: 0.2em; margin-bottom: 18px; } .concept-card h4 { font-size: 1.2rem; font-weight: 500; margin-bottom: 12px; } .concept-card p { font-size: 0.92rem; color: var(--c-text-soft); } /* --- location: 입지 포인트 리스트 --- */ .loc-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; } .loc-point { display: flex; gap: 16px; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-line); padding: 26px 24px; } .loc-point .tag { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; background: var(--c-invert-bg); color: var(--c-accent); padding: 5px 10px; } .loc-point h5 { font-size: 1rem; font-weight: 500; margin-bottom: 4px; } .loc-point p { font-size: 0.86rem; color: var(--c-text-soft); } /* --- unit: 타입 탭 --- */ .unit-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; } .unit-tabs button { padding: 2px 30px; font-size: 0.95rem; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text-soft); transition: all 0.35s var(--ease-luxe); } .unit-tabs button.active { background: var(--c-invert-bg); border-color: var(--c-invert-bg); color: var(--c-accent); } .unit-panel { display: none; } .unit-panel.active { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; animation: panel-in 0.7s var(--ease-luxe); } @keyframes panel-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .unit-panel .plan { background: var(--c-surface); border: 1px solid var(--c-line); padding: 24px; display: flex; align-items: center; /* 세로 센터 */ justify-content: center; /* 가로 센터 */ } /* 배치도 패널: 2열 그리드 해제 → 세로 1열 (이미지 좌우 → 그 아래 텍스트) */ .unit-panel--layout.active { display: block; } /* 이미지 2장 좌우 */ .unit-panel--layout .plan--multi { display: flex; flex-direction: row; gap: 20px; } .unit-panel--layout .plan--multi img { width: 50%; margin: 0; } /* 이미지 아래 텍스트 */ .unit-panel--layout .unit-info { margin-top: 32px; } /* 모바일: 이미지 세로 */ @media (max-width: 640px) { .unit-panel--layout .plan--multi { flex-direction: column; } .unit-panel--layout .plan--multi img { width: 100%; margin: 0 auto; } } .unit-panel .plan img { margin: 0 auto; } .unit-panel .eyebrow { letter-spacing: 0.3em; color: var(--c-accent); } .unit-panel h4 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; margin: 8px 0 6px; } .unit-panel .desc { color: var(--c-text-soft); } .unit-spec { width: 100%; border-collapse: collapse; margin-top: 22px; border-top: 2px solid var(--c-text); } .unit-spec th, .unit-spec td { padding: 13px 12px; font-size: 0.9rem; border-bottom: 1px solid var(--c-line); text-align: left; } .unit-spec th { width: 130px; font-weight: 500; } /* --- directions: 약도/안내 --- */ .map-frame { width: 100%; aspect-ratio: 16 / 10.24; border: 1px solid var(--c-line); background: var(--c-surface); } .map-frame iframe, .map-frame img { width: 100%; height: 100%; object-fit: cover; border: 0; } .dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } .dir-card { background: var(--c-surface); border: 1px solid var(--c-line); padding: 36px 30px; } .dir-card h5 { font-size: 0.85rem; letter-spacing: 0.2em; color: var(--c-accent); text-transform: uppercase; margin-bottom: 14px; } .dir-card p { font-size: 0.92rem; color: var(--c-text-soft); } /* --- thankyou / 404 --- */ .center-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); } .center-page .eyebrow { font-size: 0.8rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; } .center-page h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; margin-bottom: 16px; } .center-page p { color: var(--c-text-soft); margin-bottom: 34px; } /* ============================================================ 10. 반응형 ============================================================ */ @media (max-width: 1024px) { .gnb { position: fixed; inset: 0; background: rgba(15, 16, 19, 0.94); /* 오버레이는 테마 무관 다크 */ -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-luxe), visibility 0.5s; } .gnb.open { opacity: 1; visibility: visible; } .gnb ul { flex-direction: column; text-align: center; gap: 10px; } .gnb a { font-size: 1.3rem; padding: 12px 24px; color: #f4f2ed; } .header-tel { display: none; } .nav-toggle { display: block; } /* 메뉴 오픈 시: 헤더의 backdrop-filter 가 만든 containing block 때문에 .gnb(fixed)가 헤더 높이에 갇히는 문제를 푼다. 필터를 풀면 화면 전체로 펼쳐진다. (오버레이 글자/토글은 흰색으로 유지) */ #site-header.menu-open { --header-fg: #f4f2ed; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; transition: none; /* 필터 해제를 즉시 적용 → 메뉴가 바로 중앙에 */ } .feature-row { grid-template-columns: 1fr; gap: 32px; } .feature-row.is-flip .feature-media { order: 0; } .feature-row + .feature-row { margin-top: 72px; } .stat-grid, .concept-grid, .dir-grid { grid-template-columns: 1fr 1fr; } .unit-panel.active { grid-template-columns: 1fr; gap: 32px; } .footer-inner { grid-template-columns: 1fr; } /* 모바일: 가로 리빌을 세로 움직임으로 바꿔 가로 넘침을 원천 차단 */ .reveal-left, .reveal-right { transform: translateY(48px); } } @media (max-width: 640px) { :root { --header-h: 64px; } .section { padding: 72px 0; } .stat-grid, .concept-grid, .dir-grid, .loc-points { grid-template-columns: 1fr; } .form-card { padding: 36px 24px; } .summary-table th { width: 110px; } .quick-call { right: 14px; bottom: 14px; } /* slide1 모바일: 가로 1/3 지점을 중심으로 */ .hero-slide--1 { background-position: 50% center; } } /* ---------- 모션 최소화 환경 배려 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } } /* --- 팝업 전용 문서 (개인정보 처리방침 등) --- */ .popup-body { background: var(--c-bg); } .popup-doc { max-width: 720px; margin: 0 auto; padding: 40px 28px 56px; } .popup-doc h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-bottom: 20px; } .popup-doc h2 { font-size: 1.05rem; font-weight: 500; margin: 26px 0 8px; color: var(--c-accent); } .popup-doc p { font-size: 0.92rem; color: var(--c-text-soft); margin-bottom: 6px; } .popup-doc__close { margin-top: 36px; text-align: center; } /* ============================================================ 분양 공지 팝업 (notice_type 1: 이미지 아래 / 2: 이미지 위 오버레이) ============================================================ */ /* 공통 오버레이 / 박스 */ .site-notice { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; background: rgba(15, 16, 19, 0.6); padding: 20px; } .site-notice.is-open { display: grid; } .site-notice__box { position: relative; width: min(400px, 100%); background: var(--c-invert-bg); color: var(--c-invert-text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; } /* 공통 텍스트 */ .notice-body { text-align: center; } .notice-tags { color: var(--c-accent); font-size: 0.85rem; font-weight: 500; margin-bottom: 12px; } .notice-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.35; } .notice-desc { color: var(--c-invert-soft); font-size: 0.9rem; margin-top: 10px; } /* 닫기 X */ .notice-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; background: rgba(15, 16, 19, 0.55); color: #fff; font-size: 1rem; display: grid; place-items: center; } /* 공통 하단 바 */ .notice-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--c-invert-line); font-size: 0.84rem; color: var(--c-invert-soft); } .notice-foot label { display: flex; align-items: center; gap: 7px; cursor: pointer; } .notice-foot input { accent-color: var(--c-accent); } .notice-foot__close { color: var(--c-invert-text); } /* ===== 타입1: 이미지 아래 ===== */ .notice-hero { position: relative; line-height: 0; } .notice-hero__img { width: 100%; display: block; } .notice-content { padding: 26px; } /* 이미지 '아래' 텍스트 영역 */ /* ===== 타입2: 이미지 위 오버레이 ===== */ .notice--type2 .notice-overlay__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .notice--type2::after { /* 가독성용 그라데이션 */ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 16, 19, 0.15) 0%, rgba(15, 16, 19, 0.55) 45%, rgba(15, 16, 19, 0.92) 100%); } .notice--type2 .notice-overlay__inner { position: relative; z-index: 2; padding: 230px 26px 8px; /* 위 여백 = 이미지가 보이는 면적 */ } /* 팝업 공지창의 '관심고객 등록하기' 버튼 */ .notice-cta { display: block; text-align: center; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; padding: 16px; margin: 0 26px 22px; } /* 모바일: 이미지 확대 안내 문구 */ .zoom-hint { position: relative; } .zoom-hint__tip { display: none; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2; white-space: nowrap; background: rgba(15, 16, 19, 0.7); color: #fff; font-size: 1.4rem; padding: 8px 14px; border-radius: 999px; pointer-events: none; opacity: 1; transition: opacity 0.6s ease; } @media (max-width: 640px) { .zoom-hint__tip { display: inline-block; } } /* 사라질 때 */ .zoom-hint__tip.is-hide { opacity: 0; } /* --- premium: 프리미엄 항목 카드 --- */ .prem-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3열 → 7개면 마지막 1개가 남음 */ gap: 24px; } .prem-card { background: var(--c-surface); border: 1px solid var(--c-line); padding: 34px 30px; transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-luxe); } .prem-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px var(--c-shadow); } .prem-card__no { display: block; font-family: var(--font-display); color: var(--c-accent); font-size: 1.1rem; letter-spacing: 0.15em; margin-bottom: 14px; } .prem-card__title { font-size: 1.15rem; font-weight: 500; margin-bottom: 12px; } .prem-card__desc { font-size: 0.9rem; color: var(--c-text-soft); line-height: 1.65; } /* 마지막 홀수 카드가 남을 때: 남는 칸을 채워 균형 맞춤 */ .prem-grid .prem-card:last-child:nth-child(3n - 2) { grid-column: span 3; } /* 7번째가 새 줄 첫칸이면 전체폭 */ @media (max-width: 1024px) { .prem-grid { grid-template-columns: repeat(2, 1fr); } /* 2열 */ .prem-grid .prem-card:last-child:nth-child(3n - 2) { grid-column: auto; } .prem-grid .prem-card:last-child:nth-child(2n - 1) { grid-column: span 2; } /* 7번째(홀수 끝) 전체폭 */ } /* 모바일: 무조건 1열, 모든 span 해제 */ @media (max-width: 640px) { .prem-grid { grid-template-columns: 1fr !important; } .prem-grid .prem-card { grid-column: auto !important; } /* 어떤 카드도 늘리지 않음 */ } /* --- location: VISION 리스트 (다크 밴드, 한 줄씩) --- */ .vision-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--c-invert-line); } .vision-item { position: relative; padding: 20px 20px 20px 34px; border-bottom: 1px solid var(--c-invert-line); color: var(--c-invert-text); font-size: 1rem; line-height: 1.6; } .vision-item::before { /* 앞머리 점(·) 대신 골드 마커 */ content: ''; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; transform: translateY(-50%); } @media (max-width: 640px) { .vision-item { font-size: 0.92rem; padding: 16px 14px 16px 28px; } .vision-item::before { left: 8px; } }