/*
  집팔고 홈페이지 공통 스타일입니다.
  기존 화면의 흰 배경, 붉은 CI 포인트, 지도 기반 레이아웃을 기준으로 새로 작성했습니다.
*/

:root {
  --brand: #ed3b32;
  --brand-dark: #c72720;
  --ink: #191919;
  --muted: #6f7785;
  --line: #e8ebef;
  --soft: #f6f7f9;
  --white: #ffffff;
  --blue: #42b6ff;
  --green: #24b47e;
  --shadow: 0 18px 45px rgba(20, 24, 31, 0.12);
  --radius: 22px;
}

/* 모든 요소는 화면 검수 시 박스 크기가 꼬이지 않도록 border-box로 통일합니다. */
* {
  box-sizing: border-box;
}

/* 기본 본문 스타일은 모바일과 PC 모두 같은 색상 체계를 사용합니다. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fbfbfc;
}

/* 링크는 버튼과 구분되도록 기본 밑줄을 제거하고 색상을 상속합니다. */
a {
  color: inherit;
  text-decoration: none;
}

/* 입력 요소는 모든 폼에서 동일한 높이와 둥근 모서리를 사용합니다. */
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  background: var(--white);
}

/* 라벨은 세로 폼 레이아웃을 안정적으로 유지합니다. */
label {
  display: grid;
  gap: 8px;
  color: #343a46;
  font-weight: 700;
}

/* 상단 헤더는 기존 집팔고 공개 페이지의 메뉴 구조를 고정형으로 재구성했습니다. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

/* 로고 영역은 텍스트 로고를 사용해 외부 이미지 의존성을 제거합니다. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  white-space: nowrap;
}

/* 집팔고 CI 느낌의 붉은 마크입니다. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--brand);
  color: var(--white);
  font-weight: 900;
  letter-spacing: -1px;
}

/* PC 상단 메뉴는 한 줄 노출을 기본으로 합니다. */
.top-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  font-weight: 700;
  color: #3d4552;
}

/* ver4 추가: 첫 번째 메뉴구성 이미지 기준의 2단 상단 메뉴입니다. */
.two-depth-nav {
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* ver12 수정: 1단 메뉴와 2단 메뉴 사이의 hover 끊김을 없애기 위해 메뉴 항목 자체가 헤더 높이를 채우도록 합니다. */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 68px;
  padding: 0 2px;
}

/* ver4 추가: 1단 메뉴 버튼은 PPTX 대메뉴 박스를 웹 헤더에 맞춰 축약 표시합니다. */
.nav-main {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-radius: 14px;
  padding: 0 10px;
  color: #2d3542;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

/* ver4 추가: 현재 페이지와 마우스오버 상태를 동일한 브랜드 톤으로 표시합니다. */
.nav-item:hover .nav-main,
.nav-item:focus-within .nav-main,
.nav-item.active .nav-main {
  background: #fff0ef;
  color: var(--brand);
}

/* ver12 추가: 메인 메뉴와 서브메뉴 사이 투명 연결 영역입니다. */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  display: block;
}

/* ver4 추가: ☆ 메뉴는 PPTX 설명처럼 로그인 후 상단 메뉴 성격을 명확히 보이도록 표시합니다. */
.star-menu .nav-main {
  color: #176fa3;
}

/* ver4 추가: 회원사 메뉴는 입력된 agent 주소 묶음입니다. */
.agent-menu .nav-main {
  color: var(--brand);
}

/* ver12 수정: 2단 메뉴를 1단 메뉴 바로 아래에 붙여 마우스 이동 중 사라지는 문제를 근본적으로 해결합니다. */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 55;
  display: grid;
  gap: 4px;
  width: 210px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px;
  background: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}

/* ver4 추가: 항목 수가 많은 메뉴는 폭을 넓게 사용합니다. */
.wide-submenu {
  width: 270px;
}

/* ver4 추가: 마지막 메뉴는 화면 밖으로 나가지 않도록 오른쪽 정렬합니다. */
.nav-item:last-child .submenu {
  left: auto;
  right: 0;
}

/* ver12 수정: hover와 키보드 focus 모두 2단 메뉴를 열고, 닫힘 지연 없이 커서 이동 영역을 유지합니다. */
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* ver4 추가: 2단 메뉴 링크는 터치 가능한 카드형으로 통일합니다. */
.submenu a {
  display: block;
  border-radius: 12px;
  padding: 10px 11px;
  color: #3d4552;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

/* ver4 추가: 2단 메뉴 링크 hover입니다. */
.submenu a:hover,
.submenu a:focus {
  background: var(--soft);
  color: var(--brand);
}

/* ver4 추가: 하위 설명 문구는 My zip 사이드 패널 설명에만 사용합니다. */
.submenu small {
  color: var(--muted);
  font-weight: 700;
}

/* ver4 추가: 상단 메뉴가 많은 해상도에서는 글자 크기와 간격만 줄이고 구조는 유지합니다. */
@media (max-width: 1440px) {
  .site-header {
    gap: 12px;
    padding: 0 16px;
  }

  .nav-main {
    padding: 0 6px;
    font-size: 12px;
  }
}

/* 선택 유도 메뉴는 브랜드 색상으로 강조합니다. */
.accent-link {
  color: var(--brand);
}

/* 아이콘 버튼은 햄버거, 닫기, 모달 닫기에서 공통 사용합니다. */
.icon-button {
  border: 0;
  border-radius: 13px;
  background: var(--soft);
  color: var(--ink);
  min-width: 42px;
  height: 42px;
  font-size: 20px;
  cursor: pointer;
}

/* 페이지 본문 폭은 전체 화면을 활용하되 섹션에서 다시 제어합니다. */
.page-shell {
  min-height: calc(100vh - 190px);
}

/* 푸터는 공개 URL 하단 정보를 그대로 담는 영역입니다. */
.site-footer {
  padding: 34px 28px;
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: 14px;
}

/* 푸터 로고는 외부 이미지 없이 텍스트로 처리합니다. */
.footer-logo {
  font-weight: 900;
  color: var(--brand);
  font-size: 20px;
  margin-bottom: 10px;
}

/* 공통 버튼 스타일입니다. */
.primary,
.secondary,
.danger-button,
.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 900;
  cursor: pointer;
}

/* 핵심 CTA 버튼은 집팔고 CI 색상을 사용합니다. */
.primary {
  background: var(--brand);
  color: var(--white);
}

/* 보조 버튼은 흰색 카드형으로 구성합니다. */
.secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* 위험 액션 버튼은 탈퇴와 삭제 전용입니다. */
.danger-button {
  background: #fff0ef;
  color: var(--brand-dark);
}

/* 작은 버튼은 카드 내부 액션용입니다. */
.small-button {
  padding: 9px 12px;
  font-size: 13px;
  background: #fff5f4;
  color: var(--brand);
}

/* ghost 버튼은 닫기/초기화 같은 낮은 위계 액션입니다. */
.ghost {
  background: var(--soft);
  color: var(--muted);
}

/* full 클래스는 폼 하단 버튼을 폭 전체로 확장합니다. */
.full {
  width: 100%;
}

/* 위험 텍스트 버튼입니다. */
.plain.danger {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--brand);
  text-align: left;
  padding: 12px 0;
  font-weight: 800;
  cursor: pointer;
}

/* 헤더와 햄버거 메뉴에서 사용하는 슬라이드 드로어입니다. */
.drawer {
  position: fixed;
  top: 0;
  right: -390px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, 92vw);
  height: 100vh;
  padding: 22px;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: right 0.25s ease, left 0.25s ease;
  overflow: auto;
}

/* 왼쪽 드로어는 My zip 대시보드에 사용합니다. */
.drawer.left {
  left: -430px;
  right: auto;
}

/* 넓은 드로어는 대시보드 카드가 들어가도록 폭을 넓힙니다. */
.drawer.wide {
  width: min(420px, 94vw);
}

/* 열린 드로어는 화면 안으로 이동합니다. */
.drawer.open {
  right: 0;
}

/* 왼쪽 열린 드로어 이동 규칙입니다. */
.drawer.left.open {
  left: 0;
  right: auto;
}

/* 드로어 헤더는 제목과 닫기 버튼을 양끝에 배치합니다. */
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* 드로어 링크는 터치 영역을 크게 둡니다. */
.drawer a {
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f3;
  font-weight: 800;
}

/* 토스트는 PPTX의 3초 메시지 동작을 구현합니다. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  max-width: min(520px, 90vw);
  padding: 14px 18px;
  border-radius: 999px;
  background: #20242d;
  color: var(--white);
  box-shadow: var(--shadow);
  transform: translate(-50%, 120px);
  opacity: 0;
  transition: 0.25s ease;
}

/* 토스트 활성 상태입니다. */
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* 공통 모달 배경입니다. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  background: rgba(10, 12, 18, 0.48);
  padding: 18px;
}

/* 모달 열린 상태입니다. */
.modal.open {
  display: grid;
}

/* 모달 카드입니다. */
.modal-card {
  position: relative;
  width: min(540px, 96vw);
  border-radius: 26px;
  background: var(--white);
  padding: 28px;
  box-shadow: var(--shadow);
}

/* 모달 닫기 버튼 위치입니다. */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* Hero 섹션 공통 레이아웃입니다. */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: center;
  padding: 72px min(6vw, 72px);
  background: linear-gradient(135deg, #fff5f4, #ffffff 58%, #eef8ff);
}

/* Hero 제목은 랜딩 페이지의 첫인상을 담당합니다. */
.hero h1 {
  margin: 8px 0 16px;
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.06em;
}

/* 작은 섹션 설명 텍스트입니다. */
.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-weight: 900;
}

/* 일반 섹션 폭과 여백입니다. */
.section,
.panel-page,
.dashboard-page {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 54px 0;
}

/* 좁은 페이지는 내 정보와 같은 단일 폼에 사용합니다. */
.panel-page.narrow {
  width: min(760px, calc(100% - 36px));
}

/* 페이지 제목 블록입니다. */
.page-title {
  margin-bottom: 26px;
}

/* 페이지 제목의 h1 기본 스타일입니다. */
.page-title h1,
.section h2 {
  margin: 0 0 12px;
  font-size: clamp(25px, 3.3vw, 40px);
  letter-spacing: -0.05em;
}

/* 섹션 상단 우측 툴바 배치입니다. */
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

/* 두 칼럼 레이아웃입니다. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* 카드형 패널입니다. */
.panel-card,
.form-card,
.reward-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 24px;
  box-shadow: 0 8px 26px rgba(20, 24, 31, 0.06);
}

/* 리워드 카드의 큰 숫자입니다. */
.reward-card strong {
  display: block;
  margin: 12px 0;
  color: var(--brand);
  font-size: 40px;
  letter-spacing: -0.04em;
}

/* 통계 그리드입니다. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}

/* 세로 통계는 중개사 가입 랜딩에 사용합니다. */
.stat-grid.vertical,
.stat-grid.compact {
  grid-template-columns: 1fr;
}

/* 통계 카드입니다. */
.stat-grid > div,
.status-grid > article,
.step-grid > article {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  padding: 20px;
}

/* 통계 숫자입니다. */
.stat-grid b {
  display: block;
  font-size: 28px;
  color: var(--brand);
  letter-spacing: -0.04em;
}

/* 통계 설명입니다. */
.stat-grid span {
  color: var(--muted);
}

/* 3단계 설명 그리드입니다. */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

/* 단계 숫자 또는 라벨입니다. */
.step-grid span {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff0ef;
  color: var(--brand);
  font-weight: 900;
}

/* 상태 카드 그리드입니다. */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* 버튼 묶음입니다. */
.button-row,
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 지도 화면 전체 구조입니다. */
.map-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 410px);
  min-height: calc(100vh - 68px);
}

/* 지도 캔버스 영역입니다. */
.map-canvas {
  position: relative;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  background: #e8f2ec;
}

/* 지도 검색창입니다. */
.map-search {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 15;
  display: flex;
  gap: 8px;
  width: min(520px, calc(100% - 48px));
}

/* 로그인 후 상단 메뉴입니다. */
.login-menu {
  position: absolute;
  top: 86px;
  left: 24px;
  z-index: 15;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 로그인 메뉴 링크입니다. */
.login-menu a {
  border-radius: 999px;
  padding: 10px 14px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(20, 24, 31, 0.08);
  font-weight: 900;
}

/* 활성 로그인 메뉴입니다. */
.login-menu a.active {
  color: var(--brand);
}

/* 외부 지도 API 없이 구성한 CSS 지도입니다. */
.fake-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 720px;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.85) 0 90px, transparent 91px),
    radial-gradient(circle at 70% 68%, rgba(255,255,255,.75) 0 120px, transparent 121px),
    linear-gradient(30deg, transparent 0 46%, rgba(255,255,255,.55) 47% 49%, transparent 50%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.65) 43% 45%, transparent 46%),
    #dfeee5;
}

/* 지도 도로 느낌의 선입니다. */
.fake-map::before,
.fake-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 55%, rgba(255,255,255,.75) 56% 57%, transparent 58%),
    linear-gradient(0deg, transparent 0 48%, rgba(255,255,255,.65) 49% 50%, transparent 51%);
  pointer-events: none;
}

/* 지도 마커입니다. */
.map-marker {
  position: absolute;
  z-index: 10;
  display: grid;
  gap: 2px;
  min-width: 108px;
  border: 0;
  border-radius: 18px;
  padding: 10px 12px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(20, 24, 31, 0.18);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* 3D 가능 매물 마커 강조입니다. */
.map-marker.has-3d {
  border: 2px solid var(--blue);
}

/* 지도 오른쪽 버튼 묶음입니다. */
.map-controls {
  position: absolute;
  z-index: 12;
  display: grid;
  gap: 8px;
}

/* 오른쪽 컨트롤 위치입니다. */
.map-controls.right {
  right: 18px;
  top: 110px;
}

/* 지도 컨트롤 버튼입니다. */
.map-controls button,
.zoom-controls button {
  border: 0;
  border-radius: 14px;
  background: var(--white);
  min-width: 52px;
  min-height: 44px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.12);
  cursor: pointer;
}

/* 지도 확대/축소 버튼입니다. */
.zoom-controls {
  position: absolute;
  right: 18px;
  bottom: 130px;
  z-index: 12;
  display: grid;
  gap: 8px;
}

/* My zip 슬라이드 핸들입니다. */
.slide-handle {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 14;
  width: 42px;
  height: 86px;
  border: 0;
  border-radius: 0 22px 22px 0;
  background: var(--brand);
  color: var(--white);
  font-size: 34px;
  cursor: pointer;
}

/* 지도 하단 요약 카드입니다. */
.floating-summary {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 15;
  display: grid;
  gap: 6px;
  width: min(520px, calc(100% - 48px));
  border-radius: 20px;
  padding: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}

/* 필터 패널은 지도 옆 고정 영역으로 배치합니다. */
.filter-panel {
  border-left: 1px solid var(--line);
  background: var(--white);
  padding: 22px;
  overflow: auto;
}

/* 필터 제목 줄입니다. */
.filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

/* 필터 그룹 간격입니다. */
.filter-group {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

/* 필터 그리드입니다. */
.filter-grid {
  display: grid;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

/* 칩 버튼 묶음입니다. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 칩 버튼입니다. */
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: #3b4350;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}

/* 선택된 칩 버튼입니다. */
.chip.active {
  border-color: var(--brand);
  background: #fff1ef;
  color: var(--brand);
}

/* 미니 카드입니다. */
.mini-card {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  padding: 14px;
  text-align: left;
}

/* 미니 카드 부가 텍스트입니다. */
.mini-card span {
  color: var(--muted);
}

/* 웰컴 카드입니다. */
.welcome-card {
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), #ff785e);
  color: var(--white);
  padding: 22px;
}

/* 3D 미리보기 방 구조입니다. */
.tour-preview {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 120px);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
}

/* 방 블록입니다. */
.room {
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #eef8ff;
  font-weight: 900;
}

/* 큰 거실 블록입니다. */
.room-main {
  grid-row: span 2;
  background: #fff0ef;
}

/* 카드 그리드입니다. */
.card-grid {
  display: grid;
  gap: 18px;
}

/* 3열 카드 그리드입니다. */
.card-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

/* 4열 카드 그리드입니다. */
.card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

/* 3D 투어 카드입니다. */
.tour-card,
.event-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

/* 3D 썸네일은 CSS 그라데이션으로 만듭니다. */
.tour-image,
.event-image,
.listing-thumb {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e7f2ff, #fff1ef);
  color: var(--brand);
  font-size: 30px;
  font-weight: 900;
}

/* 검색 인라인 영역입니다. */
.search-inline,
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 툴바 입력 폭입니다. */
.toolbar input,
.search-inline input {
  min-width: 260px;
}

/* 체크 라벨입니다. */
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

/* 체크박스 폭 초기화입니다. */
.check input {
  width: auto;
}

/* 정보 리스트입니다. */
.info-list {
  display: grid;
  gap: 12px;
}

/* 정보 리스트 행입니다. */
.info-list > div {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  padding: 18px;
}

/* 정보 라벨입니다. */
.info-list span {
  color: var(--muted);
}

/* 수신동의 토글입니다. */
.switch {
  display: inline-flex;
  align-items: center;
}

/* 수신동의 실제 체크박스는 숨깁니다. */
.switch input {
  display: none;
}

/* 수신동의 트랙입니다. */
.switch span {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #d7dce4;
  position: relative;
}

/* 수신동의 핸들입니다. */
.switch span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: 0.2s ease;
}

/* 수신동의 활성 상태입니다. */
.switch input:checked + span {
  background: var(--brand);
}

/* 수신동의 활성 핸들 위치입니다. */
.switch input:checked + span::before {
  left: 24px;
}

/* 매물등록 레이아웃입니다. */
.register-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 30px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 54px 0;
}

/* 매물등록 안내 카드입니다. */
.register-intro {
  position: sticky;
  top: 92px;
  align-self: start;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff5f4, #ffffff);
  padding: 32px;
  border: 1px solid var(--line);
}

/* 단계형 폼 카드입니다. */
.wizard {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 단계 화면은 기본 숨김입니다. */
.wizard-step {
  display: none;
  gap: 18px;
  padding: 26px;
}

/* 활성 단계만 보입니다. */
.wizard-step.active {
  display: grid;
}

/* 단계 헤더입니다. */
.wizard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 단계 헤더 버튼입니다. */
.wizard-head button {
  border: 0;
  background: var(--soft);
  border-radius: 12px;
  min-width: 38px;
  height: 38px;
  cursor: pointer;
}

.property-result {
  margin-top: 18px;
}

.property-result-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(237, 59, 50, .18);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff5f4, #ffffff);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
}

.property-result-card b {
  color: #ed3b32;
  font-size: 13px;
}

.property-result-card h3 {
  margin: 0;
}

.property-result-card dl,
.property-check-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.property-result-card dt,
.property-check-card dt {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.property-result-card dd,
.property-check-card dd {
  margin: 3px 0 0;
  color: #111827;
  font-weight: 900;
}

.property-check-form.flow-grid {
  align-items: stretch;
}

.property-check-form .flow-card {
  display: grid;
  gap: 10px;
}

/* 소유자 추가 입력은 관계 선택 시 JS로 제어됩니다. */
.owner-extra {
  display: none;
  gap: 12px;
}

/* 소유자 추가 입력 활성 상태입니다. */
.owner-extra.show {
  display: grid;
}

/* 더블베네핏 추천 바입니다. */
.benefit-bar {
  height: 40px;
  border-radius: 999px;
  background: #e9edf3;
  overflow: hidden;
}

/* 더블베네핏 추천 바 내부입니다. */
.benefit-bar span {
  display: grid;
  place-items: center;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-weight: 900;
}

/* 탭 버튼 묶음입니다. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/* 개별 탭 버튼입니다. */
.tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  padding: 11px 16px;
  font-weight: 900;
  cursor: pointer;
}

/* 활성 탭 버튼입니다. */
.tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* 탭 패널은 기본 숨김입니다. */
.tab-panel {
  display: none;
}

/* 활성 탭 패널입니다. */
.tab-panel.active {
  display: block;
}

/* 매물 카드 리스트입니다. */
.card-list {
  display: grid;
  gap: 16px;
}

/* 매물 카드입니다. */
.listing-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  padding: 16px;
}

/* 매물 썸네일 안의 3D 배지입니다. */
.listing-thumb b {
  position: absolute;
}

/* 매물 본문입니다. */
.listing-body {
  display: grid;
  gap: 8px;
}

/* 매물 상단 라인입니다. */
.listing-topline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 상태 pill입니다. */
.pill,
.bubble {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

/* 상태 기본 pill입니다. */
.pill {
  background: #eef8ff;
  color: #1976aa;
}

/* 변동사항 말풍선입니다. */
.bubble {
  background: #fff0ef;
  color: var(--brand);
}

/* 가격 문구입니다. */
.price-line {
  color: var(--brand);
  font-weight: 900;
}

/* 공지사항 행입니다. */
.board-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

/* 인증 페이지 레이아웃입니다. */
.auth-page {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 36px;
  align-items: center;
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  padding: 70px 0;
}

/* 인증 카피 제목입니다. */
.auth-copy h1 {
  font-size: clamp(38px, 6vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.06em;
}

/* 인증 카드입니다. */
.auth-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 26px;
}

/* 가입 동의 박스입니다. */
.agree-box {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #fbfcfd;
  margin: 14px 0;
}

/* 회원사 전용 nav입니다. */
.agent-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: min(1180px, calc(100% - 36px));
  margin: 22px auto 0;
}

/* 회원사 nav 링크입니다. */
.agent-nav a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  padding: 11px 15px;
  font-weight: 900;
}

/* 회원사 nav 활성 링크입니다. */
.agent-nav a.active {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}

/* 회원사 화면 외곽입니다. */
.agent-shell {
  min-height: calc(100vh - 68px);
  background: #f7f8fb;
}

/* 회원사 필터입니다. */
.agent-filter {
  width: min(1180px, calc(100% - 36px));
  margin: 18px auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  padding: 16px;
}

/* 회원사 필터 탭입니다. */
.agent-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* 회원사 필터 본문입니다. */
.agent-filter-body {
  display: grid;
  gap: 12px;
}

/* 회원사 지표 스트립입니다. */
.metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 회원사 지표 pill입니다. */
.metric-strip span {
  border-radius: 999px;
  background: var(--soft);
  padding: 9px 12px;
}

/* 회원사 지도 크기입니다. */
.agent-map {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 40px;
  border-radius: 28px;
  min-height: 620px;
  overflow: hidden;
}

/* 회원사 검색창 위치 보정입니다. */
.agent-search {
  position: absolute;
}

/* 회원사 마커 색상입니다. */
.agent-marker {
  border: 2px solid var(--brand);
}

/* 반응형: 태블릿 이하에서는 1열 구성을 우선합니다. */
@media (max-width: 980px) {
  .top-nav {
    display: none;
  }

  .hero,
  .two-col,
  .register-layout,
  .auth-page,
  .map-layout {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    display: none;
  }

  .filter-panel.open {
    position: fixed;
    inset: 80px 14px 14px;
    z-index: 70;
    display: block;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
  }

  .stat-grid,
  .step-grid,
  .status-grid,
  .card-grid.four,
  .card-grid.three {
    grid-template-columns: 1fr;
  }

  .info-list > div,
  .listing-card {
    grid-template-columns: 1fr;
  }

  .register-intro {
    position: static;
  }
}

/* 반응형: 작은 모바일에서는 검색/툴바를 세로로 배치합니다. */
@media (max-width: 640px) {
  .site-header {
    padding: 0 14px;
  }

  .hero,
  .section,
  .panel-page,
  .dashboard-page {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .search-inline,
  .toolbar,
  .map-search {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar input,
  .search-inline input {
    min-width: 0;
  }

  .fake-map {
    min-height: 640px;
  }
}

/* ver3 추가: 햄버거 메뉴 안의 일반회원/게시판/회원사 구분 제목입니다. */
.drawer-label {
  margin: 18px 0 6px;
  padding: 0 4px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

/* ver3 추가: PPTX 누락 페이지용 타이틀 영역입니다. */
.route-title {
  max-width: 920px;
}

/* ver3 추가: 단순 페이지 카드가 PC에서 2열, 모바일에서 1열로 정렬되도록 합니다. */
.route-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* ver3 추가: 각 보강 페이지의 설명 카드는 기존 패널 카드 스타일을 그대로 확장합니다. */
.route-card {
  min-height: 220px;
}

/* ver3 추가: 긴 설명 리스트를 읽기 쉽게 정리합니다. */
.clean-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: #4d5665;
  line-height: 1.6;
}

/* ver3 추가: 회원가입, 인증, 지급신청 등 단일 폼 페이지의 공통 입력 영역입니다. */
.inline-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

/* ver3 추가: 체크박스나 전체 폭 버튼은 2열 폼에서 한 줄 전체를 사용합니다. */
.inline-form-card .wide,
.inline-form-card .full {
  grid-column: 1 / -1;
}

/* ver3 추가: URL 연결표를 테이블 대신 반응형 그리드로 구성합니다. */
.route-table {
  display: grid;
  gap: 8px;
}

/* ver3 추가: URL 연결표의 행 구조입니다. */
.route-row {
  display: grid;
  grid-template-columns: 130px 180px 230px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

/* ver3 추가: URL 연결표의 헤더 행은 강조 배경을 사용합니다. */
.route-head {
  background: #fff4f3;
  color: var(--brand-dark);
  font-weight: 900;
}

/* ver3 추가: 연결표의 주소 링크는 검수자가 바로 클릭할 수 있게 브랜드색으로 표시합니다. */
.route-row a {
  color: var(--brand);
  font-weight: 800;
  word-break: break-all;
}

/* ver3 추가: 푸시알림/알림톡 검수 카드입니다. */
.notification-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(20, 24, 31, 0.08);
}

/* ver3 추가: 중간 크기 화면에서는 연결표를 두 줄 형태로 줄입니다. */
@media (max-width: 980px) {
  .route-row {
    grid-template-columns: 1fr 1fr;
  }

  .route-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ver3 추가: 모바일에서는 보강 페이지 폼과 URL 연결표를 한 줄로 표시합니다. */
@media (max-width: 640px) {
  .inline-form-card {
    grid-template-columns: 1fr;
  }

  .route-row {
    grid-template-columns: 1fr;
  }
}



/* ver7: 사용자가 요청한 심플 헤더와 2단 메뉴 애니메이션입니다. */
.site-header.menu-ver6 {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 72px;
  padding: 0 34px;
  gap: 28px;
  border-bottom: 1px solid rgba(20, 24, 31, 0.08);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

/* ver7: 헤더 로고는 큰 색상 박스 대신 작고 단정한 형태로 정리했습니다. */
.site-header.menu-ver6 .brand {
  gap: 9px;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.site-header.menu-ver6 .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand);
  font-size: 13px;
}

/* ver7: 1단 메뉴는 파란 박스형을 제거하고 텍스트형 메뉴로 정리합니다. */
.site-header.menu-ver6 .top-nav {
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

body[data-auth-state="guest"] .auth-top-nav[data-top-menu-state="member"],
body[data-auth-state="member"] .auth-top-nav[data-top-menu-state="guest"],
body[data-auth-state="agent"] .auth-top-nav[data-top-menu-state="guest"] {
  display: none;
}

.site-header.menu-ver6 .nav-main {
  min-width: auto;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: #20242b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.03em;
  transition: color 0.18s ease, background 0.18s ease;
}

.site-header.menu-ver6 .nav-item:hover .nav-main,
.site-header.menu-ver6 .nav-item:focus-within .nav-main,
.site-header.menu-ver6 .nav-item.active .nav-main,
.site-header.menu-ver6 .star-menu .nav-main,
.site-header.menu-ver6 .agent-menu .nav-main {
  background: #fff4f3;
  color: var(--brand);
  border: 0;
}

/* ver7: 2단 메뉴는 깔끔한 카드형으로 두고, 나오는 동작에만 애니메이션을 줍니다. */
.site-header.menu-ver6 .submenu {
  top: calc(100% + 12px);
  width: 220px;
  border: 1px solid rgba(20, 24, 31, 0.08);
  border-radius: 18px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(20, 24, 31, 0.14);
  transform: translateY(10px) scale(0.98);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(.2, .8, .2, 1),
    visibility 0.18s ease;
}

.site-header.menu-ver6 .wide-submenu {
  width: 280px;
}

.site-header.menu-ver6 .nav-item:hover .submenu,
.site-header.menu-ver6 .nav-item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.site-header.menu-ver6 .submenu a {
  border-radius: 12px;
  padding: 11px 12px;
  color: #343a46;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.36;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.site-header.menu-ver6 .submenu a:hover,
.site-header.menu-ver6 .submenu a:focus {
  background: #fff4f3;
  color: var(--brand);
  transform: translateX(3px);
}

.site-header.menu-ver6 .submenu small {
  color: var(--muted);
}

/* ver7: 통합 메뉴 버튼은 하나만 유지하되 헤더 톤에 맞춰 정리합니다. */
.unified-menu-button {
  width: auto;
  min-width: 66px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(20, 24, 31, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #20242b;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(20, 24, 31, 0.06);
}

/* ver7: 통합 메뉴의 현재 상태 문구입니다. */
.drawer-state {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.integrated-state-menu {
  display: none;
}

body[data-auth-state="guest"] .integrated-state-menu[data-menu-state="guest"],
body[data-auth-state="member"] .integrated-state-menu[data-menu-state="member"],
body[data-auth-state="agent"] .integrated-state-menu[data-menu-state="agent"],
.integrated-state-menu.active {
  display: grid;
  gap: 0;
}

.integrated-state-menu a {
  color: #2d3542;
}

/* ver7: /zippalgo/main.do 인덱스 첫 화면입니다. 흰 배경, 빨간 문, 좌우 반전된 문열림 애니메이션을 CSS로 구현합니다. */
.main-index-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  align-items: center;
  min-height: calc(100vh - 72px);
  padding: 74px 8vw 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 50%, rgba(237, 59, 50, 0.08), transparent 34%),
    #ffffff;
}

.main-index-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.main-index-copy h1 {
  margin: 0 0 22px;
  color: #111318;
  font-size: clamp(31px, 3.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.07em;
  font-weight: 950;
}

.main-index-copy h1 span {
  color: var(--brand);
}

.main-index-copy p {
  margin: 0 0 30px;
  color: #333a45;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.red-door-stage {
  position: relative;
  width: min(520px, 42vw);
  height: min(520px, 42vw);
  min-width: 320px;
  min-height: 320px;
  justify-self: center;
  perspective: 1200px;
}

.door-glow {
  position: absolute;
  inset: 14% 2% 10% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 59, 50, 0.14), rgba(237, 59, 50, 0) 62%);
  animation: glowPulse 4.2s ease-in-out infinite;
}

.door-frame {
  position: absolute;
  top: 10%;
  right: 22%;
  width: 168px;
  height: 310px;
  border: 11px solid #16181d;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(237, 59, 50, 0.22);
  transform-style: preserve-3d;
}

/* 좌우 방향을 반전시키기 위해 오른쪽 경첩 기준으로 문이 열리도록 구성합니다. */
.red-door {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff5b52, #d92c25);
  border: 3px solid #8c1a15;
  transform-origin: right center;
  animation: redDoorOpen 4.8s cubic-bezier(.2, .75, .16, 1) infinite;
  transform-style: preserve-3d;
  box-shadow: inset 16px 0 30px rgba(255, 255, 255, 0.18), inset -12px 0 28px rgba(0, 0, 0, 0.16);
}

.door-panel {
  position: absolute;
  left: 24px;
  right: 34px;
  border: 2px solid rgba(105, 12, 10, 0.45);
  border-radius: 2px;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.12);
}

.door-panel.top {
  top: 34px;
  height: 88px;
}

.door-panel.bottom {
  bottom: 40px;
  height: 128px;
}

.door-knob {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 10px rgba(255, 212, 79, 0.65);
}

.door-light {
  position: absolute;
  top: 48%;
  right: 30%;
  width: 360px;
  height: 150px;
  background: linear-gradient(90deg, rgba(237, 59, 50, 0.28), rgba(237, 59, 50, 0));
  clip-path: polygon(35% 20%, 100% 0, 100% 100%, 0 100%);
  transform: rotate(-10deg);
  opacity: 0;
  animation: lightSpread 4.8s ease-in-out infinite;
}

@keyframes redDoorOpen {
  0%, 18% {
    transform: rotateY(0deg);
  }
  48%, 78% {
    transform: rotateY(68deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes lightSpread {
  0%, 18% {
    opacity: 0;
    transform: rotate(-10deg) scaleX(0.72);
  }
  48%, 78% {
    opacity: 1;
    transform: rotate(-10deg) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-10deg) scaleX(0.72);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.48;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* ver7: 메인 하위 섹션은 공개 메인 페이지 흐름에 맞춰 단정하게 구성합니다. */
.main-story-section,
.main-register-section,
.main-3d-section,
.main-faq-section {
  padding: 90px 7vw;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.main-story-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 38px;
  align-items: start;
  background: #fbfbfc;
}

.main-story-copy h2,
.main-register-section h2,
.main-3d-section h2,
.main-faq-section h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.06em;
}

.main-story-copy p,
.main-register-section p,
.main-3d-section p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.benefit-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.benefit-flow article {
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(20, 24, 31, 0.07);
}

.benefit-flow span {
  color: var(--brand);
  font-weight: 950;
  font-size: 13px;
}

.benefit-flow strong {
  display: block;
  margin: 12px 0 10px;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.benefit-flow p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.main-register-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: 34px;
  align-items: center;
}

.property-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.property-type-buttons a {
  min-width: 130px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 18px;
  background: #ffffff;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(20, 24, 31, 0.06);
}

.property-type-buttons a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.main-3d-section .card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.main-faq-section {
  background: #fbfbfc;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 22px;
  background: #ffffff;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 950;
  font-size: 18px;
}

.faq-list p {
  color: var(--muted);
  line-height: 1.7;
}

/* ver7: 작은 화면 레이아웃입니다. */
@media (max-width: 1280px) {
  .site-header.menu-ver6 {
    padding: 0 18px;
    gap: 14px;
  }

  .site-header.menu-ver6 .top-nav {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .site-header.menu-ver6 .nav-main {
    padding: 0 10px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .main-index-hero,
  .main-story-section,
  .main-register-section {
    grid-template-columns: 1fr;
  }

  .main-index-hero {
    min-height: auto;
    padding: 62px 24px 76px;
  }

  .red-door-stage {
    width: min(420px, 86vw);
    height: min(420px, 86vw);
  }

  .benefit-flow,
  .main-3d-section .card-grid.four {
    grid-template-columns: 1fr 1fr;
  }

  .property-type-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .site-header.menu-ver6 .top-nav {
    display: none !important;
  }

  .unified-menu-button {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .site-header.menu-ver6 {
    min-height: 64px;
    padding: 0 14px;
  }

  .main-index-copy h1 {
    font-size: 34px;
  }

  .benefit-flow,
  .main-3d-section .card-grid.four {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .red-door,
  .door-light,
  .door-glow,
  .site-header.menu-ver6 .submenu,
  .site-header.menu-ver6 .submenu a {
    animation: none;
    transition: none;
  }

  .red-door {
    transform: rotateY(56deg);
  }

  .door-light {
    opacity: 1;
  }
}


/* ================================
   ver10 메인페이지 원본 구조 재현
   - 사용자가 붙여넣은 2025년 12월 메인 HTML 문구/섹션 흐름을 기준으로 구성합니다.
   - 여자 이미지 영역은 코드에 남기지 않고, CSS 빨간 문 애니메이션과 최종 텍스트 슬라이드로 대체합니다.
   ================================ */

/* 원본 메인에서 쓰는 CI 포인트 텍스트입니다. */
.highlight-ci {
  color: var(--brand);
}

/* 원본 첫 화면의 큰 히어로를 기준으로 다시 정의합니다. */
.main-replica-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px);
  padding: 96px 7vw 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 48%, rgba(237, 59, 50, 0.12), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fffdfd 58%, #f7f7f9 100%);
  isolation: isolate;
}

/* ver14 수정: 문 전체를 비틀지 않고 정면으로 보이게 배치합니다. 우측 비주얼 영역 안에서 살짝만 왼쪽 이동합니다. */
.hero-door-stage {
  position: absolute;
  right: clamp(46px, 7.2vw, 132px);
  top: 50%;
  z-index: 1;
  width: clamp(300px, 32vw, 540px);
  height: clamp(470px, 48vw, 780px);
  transform: translateY(-50%) translateX(-18px);
  transform-origin: 50% 58%;
  perspective: 1500px;
  pointer-events: none;
}

/* ver14 수정: 빛은 문 높이에 맞춘 세로형 노란빛으로 시작해 문이 열릴수록 왼쪽으로 넓게 퍼집니다. */
.hero-door-light {
  position: absolute;
  right: clamp(160px, 16.8vw, 296px);
  top: 50%;
  width: clamp(520px, 58vw, 1120px);
  height: clamp(360px, 36vw, 610px);
  background:
    radial-gradient(ellipse at right center, rgba(255, 241, 154, 0.98) 0%, rgba(255, 211, 78, 0.86) 24%, rgba(255, 176, 0, 0.42) 52%, rgba(255, 176, 0, 0) 82%);
  clip-path: polygon(100% 0, 0 18%, 0 82%, 100% 100%);
  opacity: 0;
  transform: translateY(-50%) scaleX(0.08);
  transform-origin: right center;
  filter: blur(2px) brightness(1);
  animation: ver14DoorLight 11.6s cubic-bezier(.2,.78,.2,1) both;
}

/* 실제 문틀입니다. */
.hero-door-frame {
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(190px, 19vw, 330px);
  height: clamp(360px, 36vw, 610px);
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

/* ver14 추가: 문 높이 전체에 맞춘 안쪽 노란빛입니다. 문이 열릴 때 문 안쪽에서 먼저 밝아집니다. */
.hero-door-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 184, 0, 0.62), rgba(255, 241, 156, 0.96) 54%, rgba(255, 255, 255, 0.98));
  opacity: 0;
  box-shadow:
    0 0 44px rgba(255, 198, 42, 0.72),
    0 0 110px rgba(255, 214, 74, 0.42);
  animation: ver14DoorCoreLight 11.6s ease both;
}

/* 정면 문은 오른쪽 경첩을 기준으로 열립니다. */
.hero-red-door {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(125deg, #ff5b52 0%, #e73830 48%, #b9120c 100%);
  border: 0;
  border-radius: 4px;
  transform-origin: right center;
  transform-style: preserve-3d;
  box-shadow:
    inset 24px 0 36px rgba(255, 255, 255, 0.15),
    inset -18px 0 36px rgba(0, 0, 0, 0.18),
    0 36px 90px rgba(237, 59, 50, 0.24);
  animation: ver14DoorOpen 11.6s cubic-bezier(.17,.82,.22,1) both;
}

/* 문 패널은 이미지 없이 CSS로 구성해 외부 이미지 의존성을 제거합니다. */
.hero-door-panel {
  position: absolute;
  left: 16%;
  right: 22%;
  border: 3px solid rgba(100, 8, 6, 0.42);
  border-radius: 3px;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.12);
}

.hero-door-panel-top {
  top: 13%;
  height: 27%;
}

.hero-door-panel-bottom {
  bottom: 12%;
  height: 38%;
}

.hero-door-knob {
  position: absolute;
  left: 15%;
  top: 50%;
  width: clamp(12px, 1.2vw, 20px);
  height: clamp(12px, 1.2vw, 20px);
  border-radius: 50%;
  background: #ffe68d;
  box-shadow: 0 0 18px rgba(255, 226, 126, 0.9);
}

/* 메인 카피는 원본 문구를 유지하되, 문이 열릴 때 하얗게 눈부신 효과를 받습니다. */
.main-replica-hero .hero-content {
  position: relative;
  z-index: 3;
  max-width: min(840px, 62vw);
  margin-right: clamp(260px, 32vw, 560px);
  text-align: left;
  animation: ver8TextFlash 11.6s ease both;
}

.main-replica-hero h1 {
  margin: 0 0 24px;
  color: #111318;
  font-size: clamp(42px, 5.2vw, 86px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.075em;
}

.main-replica-hero .sub {
  margin: 0;
  color: #303642;
  font-size: clamp(18px, 1.6vw, 27px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.04em;
}

.main-replica-hero .sub strong {
  font-weight: 950;
}

/* ver14 수정: 문 높이에서 나온 노란빛이 커진 뒤 전체 흰 플래시로 넘어갑니다. */
.hero-flash-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse at 73% 50%, rgba(255, 237, 128, 0.98) 0%, rgba(255, 211, 70, 0.88) 20%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  pointer-events: none;
  animation: ver14WhiteFlash 11.6s ease both;
}

/* 하얀 플래시 이후 어두워지는 레이어입니다. */
.hero-dark-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 45%, rgba(237, 59, 50, 0.16), transparent 24%),
    rgba(0, 0, 0, 0.88);
  opacity: 0;
  pointer-events: none;
  animation: ver8Darken 11.6s ease both;
}

/* 최종 중앙 메시지입니다. "집팔고 새로운 시작"에서 "베네핏 x 집테리어"로 슬라이드 전환합니다. */
.hero-new-start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(96vw, 1200px);
  height: clamp(88px, 13vw, 190px);
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  font-size: clamp(46px, 8vw, 132px);
  font-weight: 950;
  letter-spacing: -0.08em;
  text-shadow:
    0 0 26px rgba(255, 255, 255, 0.82),
    0 0 70px rgba(237, 59, 50, 0.48);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  animation: ver8FinalMessage 11.6s ease both;
}

.hero-final-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(34%);
  white-space: nowrap;
}

.hero-final-start {
  animation: ver10StartCopy 11.6s cubic-bezier(.22,.72,.2,1) both;
}

.hero-final-next {
  animation: ver10NextCopy 11.6s cubic-bezier(.22,.72,.2,1) both;
}

/* 스크롤 표시도 원본 느낌으로 유지합니다. */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 7;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(25, 25, 25, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: ver8ScrollHide 11.6s ease both;
}

.mouse {
  position: relative;
  width: 25px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.wheel {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  animation: wheelMove 1.3s ease-in-out infinite;
}

@keyframes wheelMove {
  0% {
    transform: translate(-50%, 0);
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 12px);
    opacity: 0;
  }
}

/* 문 열림은 마지막 상태를 유지합니다. */
@keyframes ver8DoorOpen {
  0%, 15% {
    transform: rotateY(0deg);
  }
  46%, 100% {
    transform: rotateY(82deg);
  }
}

@keyframes ver14DoorOpen {
  0%, 15% {
    transform: rotateY(0deg);
  }
  28% {
    transform: rotateY(24deg);
  }
  42% {
    transform: rotateY(55deg);
  }
  56%, 100% {
    transform: rotateY(78deg);
  }
}



/* 문 안쪽에서 빛이 커집니다. */
@keyframes ver8DoorLight {
  0%, 15% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.48);
  }
  38% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.03);
  }
  62%, 100% {
    opacity: 0.42;
    transform: translateY(-50%) scaleX(1.18);
  }
}

@keyframes ver14DoorLight {
  0%, 15% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.08);
    filter: blur(3px) brightness(1);
  }
  28% {
    opacity: 0.42;
    transform: translateY(-50%) scaleX(0.38);
    filter: blur(2px) brightness(1.28);
  }
  42% {
    opacity: 0.82;
    transform: translateY(-50%) scaleX(0.82);
    filter: blur(1px) brightness(1.75);
  }
  56% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.14);
    filter: blur(0) brightness(2.35);
  }
  72%, 100% {
    opacity: 0.88;
    transform: translateY(-50%) scaleX(1.26);
    filter: blur(1px) brightness(1.55);
  }
}

@keyframes ver14DoorCoreLight {
  0%, 15% {
    opacity: 0;
    filter: brightness(1);
  }
  30% {
    opacity: 0.46;
    filter: brightness(1.28);
  }
  46% {
    opacity: 0.86;
    filter: brightness(1.65);
  }
  58%, 100% {
    opacity: 1;
    filter: brightness(1.95);
  }
}



/* 카피가 하얗게 빛난 뒤 어둠 속으로 사라집니다. */
@keyframes ver8TextFlash {
  0%, 22% {
    color: inherit;
    filter: none;
    opacity: 1;
  }
  42% {
    color: #ffffff;
    filter: brightness(2.4) drop-shadow(0 0 30px rgba(255, 255, 255, 0.9));
    opacity: 1;
  }
  58% {
    color: #ffffff;
    filter: brightness(4.2) drop-shadow(0 0 70px rgba(255, 255, 255, 1));
    opacity: 1;
  }
  72%, 100% {
    filter: brightness(1.3) blur(2px);
    opacity: 0;
  }
}

/* 강한 흰 플래시입니다. */
@keyframes ver8WhiteFlash {
  0%, 24% {
    opacity: 0;
  }
  39% {
    opacity: 0.96;
  }
  54%, 100% {
    opacity: 0;
  }
}

@keyframes ver14WhiteFlash {
  0%, 22% {
    opacity: 0;
  }
  36% {
    opacity: 0.28;
  }
  49% {
    opacity: 0.72;
  }
  58% {
    opacity: 1;
  }
  69%, 100% {
    opacity: 0;
  }
}

/* 플래시 후 어두운 장면으로 전환합니다. */
@keyframes ver8Darken {
  0%, 50% {
    opacity: 0;
  }
  76%, 100% {
    opacity: 1;
  }
}

/* 최종 문구 컨테이너 등장입니다. */
@keyframes ver8FinalMessage {
  0%, 62% {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.94);
    filter: blur(7px);
  }
  76%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

/* 첫 최종 문구가 나타난 뒤 위로 밀려나갑니다. */
@keyframes ver10StartCopy {
  0%, 60% {
    opacity: 0;
    transform: translateY(36%);
    filter: blur(8px);
  }
  70%, 84% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  94%, 100% {
    opacity: 0;
    transform: translateY(-54%);
    filter: blur(3px);
  }
}

/* 두 번째 문구가 아래에서 올라와 최종 상태로 남습니다. */
@keyframes ver10NextCopy {
  0%, 82% {
    opacity: 0;
    transform: translateY(58%);
    filter: blur(8px);
  }
  95%, 100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 최종 메시지가 뜰 때 스크롤 표시는 숨깁니다. */
@keyframes ver8ScrollHide {
  0%, 58% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}

/* 원본 HTML의 핀 섹션 흐름을 구현합니다. 스크롤 위치에 맞춰 한 화면 안에서 단계가 전환됩니다. */
.main-pin {
  background: #050505;
  color: #ffffff;
}

.pin {
  position: relative;
  height: calc(var(--pin-steps, 3) * 100vh);
  background: #050505;
}

.pin-inner {
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow: hidden;
}

.pin-step {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 68px);
  padding: 90px 7vw;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition: opacity 0.68s ease, transform 0.68s ease;
  pointer-events: none;
}

.pin-step.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.pin-step .content {
  width: min(1000px, 100%);
  text-align: center;
}

.pin-step h2 {
  margin: 0 0 24px;
  font-size: clamp(36px, 5.3vw, 88px);
  line-height: 1.14;
  letter-spacing: -0.075em;
}

.pin-step .lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.55;
  letter-spacing: -0.05em;
}

.view-pin {
  background: #111318;
}
.view-pin.pin {
  background: #111318;
}

/* 원본 접수 섹션입니다. */
.panel {
  padding: 100px 7vw;
}

.submit {
  background: #ffffff;
}

.submit-wrap {
  width: min(1040px, 100%);
  margin: 0 auto;
  text-align: center;
}

.submit-title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.18;
  letter-spacing: -0.075em;
}

.submit-title span {
  color: var(--brand);
}

.submit-sub {
  margin: 16px 0 34px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
}

.submit-form {
  display: grid;
  gap: 14px;
  width: min(860px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: #fbfbfc;
  box-shadow: 0 20px 56px rgba(20, 24, 31, 0.08);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row-address {
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.6fr);
}

.ip-search-wrap {
  position: relative;
}

.ip-search-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}

.ip-search-wrap .ip {
  padding-right: 58px;
}

.btn-ci {
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 18px;
  padding: 18px 24px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(237, 59, 50, 0.22);
}

.submit-note {
  margin: 18px 0 0;
  color: var(--muted);
}

/* 추천 매물 섹션입니다. */
.benefits {
  background: #f6f7f9;
}

.benefits-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.benefits-top-text {
  margin: 0 0 20px;
  font-size: clamp(25px, 3.4vw, 44px);
  font-weight: 950;
  letter-spacing: -0.06em;
}

.text-emphasis {
  color: var(--brand);
}

.benefits-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.benefit-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 15px;
  background: #fff;
  color: #404753;
  font-weight: 900;
  cursor: pointer;
}

.benefit-tag.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.benefits-board {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 24, 31, 0.08);
}

.board-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 950;
}

.listing-grid {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.listing-grid.is-active {
  display: grid;
}

.listing-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(20, 24, 31, 0.06);
}

.listing-thumb {
  position: relative;
  display: block;
  width: 100%;
  min-height: 156px;
  border: 0;
  background: #f2f3f5;
  cursor: pointer;
}

.listing-thumb img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.listing-card:hover .listing-thumb img,
.listing-card:focus-within .listing-thumb img {
  transform: scale(1.045);
}

.listing-thumb.soft {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.12)),
    linear-gradient(135deg, #e8fbff, #fff2e3);
}

.room-shape {
  position: absolute;
  inset: 22px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(25, 25, 25, 0.06) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(180deg, rgba(25, 25, 25, 0.05) 1px, transparent 1px) 0 0 / 36px 36px,
    rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.42);
}

.room-shape::before,
.room-shape::after {
  content: "";
  position: absolute;
  border-radius: 10px;
  background: rgba(237, 59, 50, 0.22);
}

.room-shape::before {
  left: 15%;
  bottom: 16%;
  width: 48%;
  height: 22%;
}

.room-shape::after {
  right: 12%;
  top: 18%;
  width: 22%;
  height: 38%;
}

.listing-wish {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--brand);
  font-size: 19px;
  font-weight: 950;
}

.listing-body {
  padding: 16px;
  text-align: left;
}

.listing-body p {
  margin: 0;
}

.listing-type {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.listing-price {
  margin-top: 6px !important;
  color: #111318;
  font-size: 20px;
  font-weight: 950;
}

.listing-meta,
.listing-desc {
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* FAQ 원본 흐름입니다. */
.faq {
  background: #ffffff;
}

.faq-wrap {
  width: min(900px, 100%);
  margin: 0 auto;
}

.faq-title {
  margin: 0 0 24px;
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: -0.07em;
  text-align: center;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-a {
  padding: 0 22px 20px;
  color: var(--muted);
  line-height: 1.75;
}

.faq-more {
  margin-top: 22px;
  text-align: center;
}

.faq-link {
  display: inline-flex;
  border-radius: 999px;
  padding: 13px 18px;
  background: #111318;
  color: #fff;
  font-weight: 900;
}

/* ver12 메인 반응형입니다. */
@media (max-width: 1080px) {
  .main-replica-hero {
    align-items: end;
    padding-top: 520px;
  }

  .hero-door-stage {
    top: 250px;
    right: 50%;
    transform: translate(50%, -50%) translateX(-10px);
  }

  .main-replica-hero .hero-content {
    max-width: 100%;
    margin-right: 0;
    text-align: center;
  }

  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row,
  .form-row-address {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .panel,
  .pin-step {
    padding-left: 22px;
    padding-right: 22px;
  }

  .main-replica-hero {
    min-height: calc(100vh - 64px);
    padding: 410px 22px 88px;
  }

  .hero-door-stage {
    top: 210px;
    width: 280px;
    height: 430px;
  }

  .main-replica-hero h1 {
    font-size: 36px;
  }

  .main-replica-hero .sub {
    font-size: 17px;
  }

  .hero-new-start {
    font-size: 40px;
    height: 78px;
  }

  .listing-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-red-door,
  .hero-door-light,
  .main-replica-hero .hero-content,
  .hero-flash-layer,
  .hero-dark-layer,
  .hero-new-start,
  .hero-final-copy,
  .scroll-indicator {
    animation: none;
  }

  .hero-red-door {
    transform: rotateY(82deg);
  }

  .hero-dark-layer {
    opacity: 1;
  }

  .hero-new-start,
  .hero-final-next {
    opacity: 1;
    filter: none;
  }
  .hero-final-start {
    opacity: 0;
  }
}






/* ver13 수정: 문 각도는 ver11 기준으로 되돌리고, 1단/2단 메뉴 이동 안정화만 유지합니다. */


/* ver13 최종 보정: 1단/2단 메뉴 간격 축소 및 hover 이동 안정화 */
.two-depth-nav .nav-item {
  min-height: 68px;
}

/* 서브메뉴를 1단 메뉴 바로 아래로 2px 겹치게 배치하여 빈 공간을 없앱니다. */
.two-depth-nav .submenu {
  top: calc(100% - 2px);
  margin-top: 0;
  transform: translateY(0);
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    visibility 0s linear 0.14s;
}

/* 1단 메뉴에서 2단 메뉴로 내려가는 커서 이동 경로를 넓게 확보합니다. */
.two-depth-nav .nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% - 2px);
  width: max(100%, 270px);
  height: 18px;
  z-index: 54;
  display: block;
  pointer-events: auto;
}

/* 마지막 메뉴는 오른쪽 정렬이므로 연결 영역도 오른쪽 기준으로 확장합니다. */
.two-depth-nav .nav-item:last-child::after {
  left: auto;
  right: 0;
}

/* hover, focus, 서브메뉴 자체 hover 상태 모두에서 메뉴를 유지합니다. */
.two-depth-nav .nav-item:hover .submenu,
.two-depth-nav .nav-item:focus-within .submenu,
.two-depth-nav .submenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}


/* ver15: 지침 logo.png 파일을 실제 헤더/푸터 로고로 사용합니다. */
.brand {
  min-width: 118px;
}

.brand-logo {
  display: block;
  width: 138px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.footer-logo-img {
  display: block;
  width: 128px;
  height: auto;
  margin-bottom: 10px;
}

/* ver15: 메인메뉴와 서브메뉴 사이의 실제 간격을 줄이고, 마우스 이동 중 메뉴가 닫히지 않도록 연결영역을 더 넓힙니다. */
.site-header.menu-ver6 {
  min-height: 64px;
}

.menu-ver6 .nav-item {
  min-height: 64px;
}

.menu-ver6 .nav-item::after {
  top: calc(100% - 8px);
  height: 18px;
}

.menu-ver6 .submenu {
  top: calc(100% - 3px);
  transform: translateY(0);
}

.menu-ver6 .nav-item:hover .submenu,
.menu-ver6 .nav-item:focus-within .submenu,
.menu-ver6 .submenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

@media (max-width: 1440px) {
  .brand-logo {
    width: 120px;
  }
}

@media (max-width: 1180px) {
  .brand-logo {
    width: 112px;
  }
}


/* =====================================================================
   ver26: PPTX 메뉴/보상문구/문오프닝/돈효과 정리
   - 1단 메뉴 둥근 캡슐을 제거하고 텍스트형 메뉴로 변경
   - 1단/2단 메뉴 간격을 더 좁히고 hover 연결 영역 유지
   - 문 열림을 중간 끊김 없는 단일 곡선 애니메이션으로 교체
   - 문 안쪽 돈 쏟아짐 + 최종 멘트 이후 돈 눈 효과 추가
   ===================================================================== */

/* 메인 메뉴 원형·캡슐형 배경을 제거하고 PPTX 메뉴명 중심으로 읽히게 정리합니다. */
.site-header.menu-ver26 {
  min-height: 62px;
  gap: 18px;
  padding: 0 22px;
}

.menu-ver26 .pptx-menu {
  gap: 2px;
  align-self: stretch;
  overflow: visible;
}

.menu-ver26 .nav-item {
  min-height: 62px;
  padding: 0 1px;
}

.menu-ver26 .nav-main {
  min-height: 62px;
  padding: 0 8px;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #242b36;
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1;
}

.menu-ver26 .nav-item:hover .nav-main,
.menu-ver26 .nav-item:focus-within .nav-main,
.menu-ver26 .nav-item.active .nav-main {
  background: transparent;
  border-bottom-color: var(--brand);
  color: var(--brand);
}

/* 1단 메뉴와 2단 메뉴 사이의 실제 빈 공간을 제거하고, 마우스 이동 경로는 투명 연결 영역으로 유지합니다. */
.menu-ver26 .nav-item::after {
  top: calc(100% - 8px);
  height: 18px;
}

.menu-ver26 .submenu {
  top: calc(100% - 4px);
  border-radius: 8px;
  padding: 7px;
  gap: 2px;
  transform: translateY(0);
}

.menu-ver26 .submenu a {
  border-radius: 5px;
  padding: 8px 9px;
}

.menu-ver26 .nav-item:hover .submenu,
.menu-ver26 .nav-item:focus-within .submenu,
.menu-ver26 .submenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-ver26 .unified-menu-button {
  border-radius: 4px;
}

/* 보상 문구가 바뀔 때 깜박임 없이 짧게 상승합니다. */
#reward-rotator {
  display: inline-block;
  min-width: 10.5em;
  color: var(--brand);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#reward-rotator.reward-changing {
  opacity: 0;
  transform: translateY(8px);
}

/* 문 안쪽 방에서 쏟아지는 돈 효과입니다. */

.hero-money-stream {
  position: absolute;
  right: clamp(118px, 13.5vw, 238px);
  top: 50%;
  z-index: 2;
  width: clamp(390px, 39vw, 780px);
  height: clamp(420px, 43vw, 760px);
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  animation: ver26MoneyStreamShow 11.6s linear both;
}

.hero-money-stream .tenk-bill,
.hero-money-snow .tenk-bill {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: center;
  width: var(--bill-w, 104px);
  height: var(--bill-h, 54px);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.84) 0 10%, transparent 11%),
    linear-gradient(90deg, rgba(255,255,255,.62), transparent 24%, transparent 76%, rgba(255,255,255,.35)),
    linear-gradient(135deg, #d9f8df 0%, #fff8c2 48%, #c9f1cd 100%);
  color: #13743c;
  border: 2px solid rgba(0, 117, 62, 0.86);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 0 0 8px rgba(16,140,72,.08),
    0 12px 28px rgba(0, 0, 0, .25),
    0 4px 18px rgba(255, 207, 45, .35);
  font-weight: 950;
  letter-spacing: -.02em;
}

.hero-money-stream .tenk-bill b,
.hero-money-snow .tenk-bill b {
  display: block;
  padding-left: 12px;
  font-size: clamp(14px, 1.6vw, 26px);
  white-space: nowrap;
}

.hero-money-stream .tenk-bill em,
.hero-money-snow .tenk-bill em {
  display: none;
}

.hero-money-stream span {
  position: absolute;
  right: 0;
  top: 45%;
  opacity: 0;
  animation: ver26MoneyPour 11.6s cubic-bezier(.13,.77,.16,1) both;
}

/* 최종 멘트 이후 만원권이 눈처럼 크게 불규칙하게 내리는 효과입니다. */
.hero-money-snow {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.hero-money-snow span {
  position: absolute;
  top: -18vh;
  width: var(--snow-w, 92px);
  height: var(--snow-h, 48px);
  font-size: var(--snow-font, 18px);
  opacity: 0;
  animation: ver26MoneySnow 11.6s linear both;
  animation-delay: var(--delay, 0s);
}

.hero-new-start {
  z-index: 7;
}

/* 기존 문열림의 중간 끊김을 제거하고 단일 곡선으로 부드럽게 엽니다. */
.hero-red-door {
  animation: ver26DoorOpen 11.6s cubic-bezier(.16,.78,.13,1) both;
}

.hero-door-light {
  animation: ver26DoorLight 11.6s cubic-bezier(.16,.78,.13,1) both;
}

@keyframes ver26DoorOpen {
  0%, 12% {
    transform: rotateY(0deg);
  }
  62%, 100% {
    transform: rotateY(80deg);
  }
}

@keyframes ver26DoorLight {
  0%, 12% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.04);
    filter: blur(3px) brightness(1);
  }
  58% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.25);
    filter: blur(0) brightness(2.7);
  }
  76%, 100% {
    opacity: 0.9;
    transform: translateY(-50%) scaleX(1.34);
    filter: blur(1px) brightness(1.7);
  }
}

@keyframes ver26MoneyStreamShow {
  0%, 17% { opacity: 0; }
  27%, 76% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes ver26MoneyPour {
  0%, 20% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.55);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--tx) * .14), calc(var(--ty) * .18)) rotate(calc(var(--rot) * .15)) scale(calc(var(--scale) * .78));
  }
  50% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--scale));
  }
  68% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 1.08), var(--floor)) rotate(calc(var(--rot) + 86deg)) scale(calc(var(--scale) * .98));
  }
  80%, 100% {
    opacity: .92;
    transform: translate(calc(var(--tx) * 1.02), calc(var(--floor) + 24px)) rotate(calc(var(--rot) + 96deg)) scale(calc(var(--scale) * .92));
  }
}

@keyframes ver26MoneySnow {
  0%, 65% {
    opacity: 0;
    transform: translate3d(0, -20vh, 0) rotate(0deg) scale(var(--snow-scale, 1));
  }
  69% {
    opacity: .98;
  }
  100% {
    opacity: .94;
    transform: translate3d(var(--drift), 122vh, 0) rotate(var(--spin, 540deg)) scale(var(--snow-scale, 1));
  }
}

@media (max-width: 1080px) {
  .hero-money-stream {
    right: clamp(86px, 24vw, 190px);
    width: clamp(330px, 70vw, 620px);
  }
}

/* ver26: 메뉴 버튼의 원형/캡슐 배경을 제거하고 1단-2단 이동 간격을 더 좁힙니다. */
.menu-ver22 .nav-main,
.menu-ver26 .nav-main,
.two-depth-nav .nav-main {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.two-depth-nav .nav-item {
  min-height: 54px !important;
  align-items: center;
}

.two-depth-nav .nav-item::after {
  top: 100%;
  height: 6px !important;
}

.two-depth-nav .submenu {
  top: calc(100% - 1px) !important;
  margin-top: 0 !important;
  transform: translateY(1px);
}

.two-depth-nav .nav-item:hover .submenu,
.two-depth-nav .nav-item:focus-within .submenu,
.two-depth-nav .submenu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ver26: 로그인 상태별 메뉴는 JS에서 hidden을 제어하며, hidden 속성이 있으면 레이아웃에서 제거합니다. */
.guest-menu[hidden],
.member-menu[hidden],
.agent-menu[hidden] {
  display: none !important;
}

/* ver26: 일반회원/공인중개사 가입 선택 UI입니다. */
.signup-role-row,
.login-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf1;
  font-size: 14px;
  font-weight: 850;
}

.signup-role-row label,
.login-role-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.signup-agency-field[hidden] {
  display: none !important;
}

/* 메뉴가 너무 많아지는 구간에서도 줄바꿈으로 인한 2단메뉴 간격 오류가 나지 않게 처리합니다. */
@media (max-width: 1320px) {
  .menu-ver26 .pptx-menu {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .menu-ver26 .nav-main {
    font-size: 12px;
    padding: 0 7px;
  }
}

@media (max-width: 1080px) {
  .menu-ver26 .pptx-menu {
    display: none;
  }
  .hero-money-stream {
    right: clamp(120px, 28vw, 220px);
  }
}


/* ver26: PPTX 누락 세부 페이지를 구성하기 위한 공통 레이아웃입니다. */
.pptx-page {
  padding-top: 42px;
}

.pptx-page .eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 950;
}

.flow-grid,
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.flow-card {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(20, 24, 31, 0.06);
}

.flow-card.solo {
  max-width: 720px;
}

.flow-card h3,
.flow-card p {
  margin: 0;
}

.step-no {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-weight: 950;
}

.status-badge {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.status-badge.ok { background: #24b47e; }
.status-badge.wait { background: #f2a500; }
.status-badge.done { background: #5f6b7a; }

.metric-large {
  color: var(--brand);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.mini-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
}

.mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.mini-row:first-child {
  border-top: 0;
}

.mini-row.head {
  background: #f6f7f9;
  color: #3d4552;
  font-weight: 950;
}

.always-on .wizard-step {
  display: grid;
  opacity: 1;
  transform: none;
}

@media (max-width: 720px) {
  .mini-row {
    grid-template-columns: 1fr;
  }
}



/* ver22: 공식 집팔고 로고 이미지와 로그인 상태별 메뉴 표시입니다. */
.official-logo-brand {
  flex: 0 0 auto;
}
.brand-logo {
  width: 52px;
  height: 52px;
  max-width: 52px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}
.footer-logo-img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 18px;
}
.auth-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding-left: 6px;
  font-size: 12px;
}
.auth-chip span {
  color: var(--brand);
  font-weight: 950;
}
.text-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 8px;
  font-weight: 900;
  color: #2d3542;
  cursor: pointer;
}
.text-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}
body:not(.auth-member) .member-menu,
body:not(.auth-agent) .agent-menu {
  display: none !important;
}
body.auth-member .guest-menu,
body.auth-agent .guest-menu {
  display: none !important;
}
body.auth-agent .member-menu {
  display: none !important;
}
body.auth-agent .agent-menu {
  display: inline-flex !important;
}
.menu-ver22 .nav-main {
  border-radius: 0;
  background: transparent !important;
  min-height: 38px;
  padding: 0 9px;
}
.menu-ver22 .nav-item:hover .nav-main,
.menu-ver22 .nav-item:focus-within .nav-main,
.menu-ver22 .nav-item.active .nav-main {
  color: var(--brand);
  box-shadow: inset 0 -3px 0 var(--brand);
}
.menu-ver22 .nav-item {
  min-height: 64px;
}
.menu-ver22 .nav-item::after {
  height: 6px;
}
.menu-ver22 .submenu {
  top: calc(100% - 2px);
  margin-top: 0;
  transform: translateY(1px);
}
.menu-ver22 .nav-item:hover .submenu,
.menu-ver22 .nav-item:focus-within .submenu,
.menu-ver22 .submenu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ver22: SQLite/로그인 안내 박스입니다. */
.demo-login-panel,
.sqlite-status-panel {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(135deg, #fff, #fff7f6);
  box-shadow: 0 10px 30px rgba(20,24,31,.06);
}
.demo-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.demo-account-card {
  border: 1px solid #ffd6d2;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}
.demo-account-card strong {
  display: block;
  color: var(--brand);
  margin-bottom: 8px;
}
.demo-account-card code {
  display: block;
  margin: 4px 0;
  color: #111;
  font-weight: 900;
}
.demo-account-card button {
  margin-top: 10px;
}
.login-role-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}
.login-role-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}
.login-role-row input {
  width: auto;
}

/* ver22: 문 열림 애니메이션을 단일 곡선으로 부드럽게 조정합니다. */
.hero-red-door {
  animation: ver22DoorOpen 11.6s cubic-bezier(.16,.74,.18,1) both !important;
}
@keyframes ver22DoorOpen {
  0% { transform: rotateY(0deg); }
  16% { transform: rotateY(2deg); }
  28% { transform: rotateY(19deg); }
  40% { transform: rotateY(45deg); }
  53% { transform: rotateY(72deg); }
  100% { transform: rotateY(76deg); }
}

/* ver22: 문 안쪽에서 큰 돈다발이 쏟아져 바닥으로 쓰러지는 효과입니다. */
.hero-money-stream {
  right: clamp(120px, 14vw, 245px);
  top: 52%;
  width: clamp(320px, 38vw, 720px);
  height: clamp(360px, 38vw, 650px);
  opacity: 1;
  animation: none;
}
.hero-money-stream span {
  min-width: var(--bill-w, 70px);
  height: var(--bill-h, 42px);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.4), transparent 20%),
    linear-gradient(135deg, #fff7b4, #ffe066 55%, #ffd43b);
  color: #107a41;
  border: 2px solid rgba(9, 115, 58, 0.42);
  box-shadow: 0 16px 35px rgba(25, 31, 42, 0.18);
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 1000;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: ver22MoneyCollapse 11.6s cubic-bezier(.17,.76,.24,1) both;
}
@keyframes ver22MoneyCollapse {
  0%, 26% {
    opacity: 0;
    transform: translate(0, -18px) rotate(0deg) scale(.6);
  }
  37% {
    opacity: 1;
    transform: translate(calc(var(--tx) * .45), calc(var(--ty) * .2 - 70px)) rotate(calc(var(--rot) * .35)) scale(1.08);
  }
  54% {
    opacity: 1;
    transform: translate(var(--tx), calc(var(--floor) - 80px)) rotate(calc(var(--rot) * .7)) scale(var(--scale, 1.1));
  }
  68%, 100% {
    opacity: .96;
    transform: translate(var(--tx), var(--floor)) rotate(var(--rot)) scale(var(--scale, 1.1));
  }
}

/* ver22: "집팔고 새로운 시작" 이후 크게, 많이, 불규칙하게 내리는 돈입니다. */
.hero-money-snow span {
  min-width: var(--snow-w, 66px);
  height: var(--snow-h, 40px);
  border-radius: 9px;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 18%),
    linear-gradient(135deg, #fff9bf, #ffdf3f 52%, #ffc928);
  color: #0c7e3d;
  border: 2px solid rgba(16, 125, 65, 0.42);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
  font-size: var(--snow-font, 18px);
  opacity: 0;
  animation: ver22MoneySnow 11.6s linear both !important;
  animation-delay: var(--delay, 0s) !important;
}
@keyframes ver22MoneySnow {
  0%, 54% {
    opacity: 0;
    transform: translate3d(0, -18vh, 0) rotate(0deg) scale(.8);
  }
  58% {
    opacity: .98;
  }
  100% {
    opacity: .98;
    transform: translate3d(var(--drift, 20px), 118vh, 0) rotate(var(--spin, 420deg)) scale(var(--snow-scale, 1));
  }
}

@media (max-width: 980px) {
  .auth-chip { display: none; }
  .brand-logo { width: 46px; height: 46px; }
  .demo-login-grid { grid-template-columns: 1fr; }
}


/* ver26: SQLite 상태/샘플계정 안내 박스는 화면에 노출하지 않습니다. */
.sqlite-status-panel,
.demo-login-panel {
  display: none !important;
}

/* ver26: 게시판/공지팝업/후기/뉴스/커뮤니티 공통 레이아웃입니다. */
.board-page .page-title,
.board-home .page-title {
  align-items: flex-start;
}

.board-write-card {
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(20, 24, 31, 0.08);
}

.board-write-card h2 {
  margin: 0;
  font-size: 20px;
}

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 10px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff8f7;
}

.board-list {
  display: grid;
  gap: 10px;
}

.enhanced-board-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.enhanced-board-row p {
  margin: 8px 0;
  color: #5b6472;
  line-height: 1.55;
}

.enhanced-board-row small {
  color: #8b94a3;
  font-weight: 700;
}

.board-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--brand);
  font-weight: 900;
  white-space: nowrap;
}

.rating-stars {
  color: #ffb020;
  letter-spacing: 1px;
}

.board-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.board-dashboard-grid section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

.board-dashboard-grid h2 {
  margin: 0 0 14px;
}

@media (max-width: 820px) {
  .enhanced-board-row {
    grid-template-columns: 1fr;
  }

  .board-meta {
    align-items: flex-start;
  }

  .board-dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* ver26: 메인 인덱스 전체 글자 크기를 한 단계 낮춥니다. 기존 섹션/애니메이션 구조는 유지합니다. */
body[data-page="메인 홈페이지"] {
  font-size: 15px;
}

body[data-page="메인 홈페이지"] .main-replica-hero {
  padding: 74px 6vw 72px;
}

body[data-page="메인 홈페이지"] .main-replica-hero .hero-content {
  max-width: min(760px, 58vw);
}

body[data-page="메인 홈페이지"] .main-replica-hero h1 {
  margin-bottom: 18px;
  font-size: clamp(36px, 4.7vw, 74px);
  line-height: 1.08;
}

body[data-page="메인 홈페이지"] .main-replica-hero .sub {
  font-size: clamp(16px, 1.35vw, 23px);
  line-height: 1.56;
}

body[data-page="메인 홈페이지"] .pin-step h2 {
  font-size: clamp(31px, 4.7vw, 76px);
  line-height: 1.12;
}

body[data-page="메인 홈페이지"] .pin-step .lead {
  font-size: clamp(16px, 1.72vw, 26px);
}

body[data-page="메인 홈페이지"] .panel {
  padding-top: 82px;
  padding-bottom: 82px;
}

body[data-page="메인 홈페이지"] .submit-title {
  font-size: clamp(31px, 3.85vw, 58px);
}

body[data-page="메인 홈페이지"] .submit-sub {
  font-size: 18px;
}

body[data-page="메인 홈페이지"] .benefits-top-text {
  font-size: clamp(23px, 2.95vw, 38px);
}

body[data-page="메인 홈페이지"] .benefit-tag {
  padding: 8px 13px;
  font-size: 13px;
}

body[data-page="메인 홈페이지"] .listing-price {
  font-size: 18px;
}

body[data-page="메인 홈페이지"] .listing-body {
  padding: 14px;
}

body[data-page="메인 홈페이지"] .faq-title {
  font-size: clamp(30px, 3.4vw, 48px);
}

body[data-page="메인 홈페이지"] .hero-new-start {
  font-size: clamp(39px, 6.8vw, 112px);
}

/* ver26: 인덱스 돈 효과를 만원권 유지 상태에서 조금 작게 조정합니다. */
body[data-page="메인 홈페이지"] .hero-money-stream {
  right: clamp(118px, 13.2vw, 232px);
  width: clamp(290px, 34vw, 640px);
  height: clamp(330px, 34vw, 590px);
}

body[data-page="메인 홈페이지"] .hero-money-stream span {
  min-width: var(--bill-w, 62px);
  height: var(--bill-h, 36px);
  border-radius: 7px;
  font-size: clamp(15px, 1.75vw, 27px);
  border-width: 1.5px;
  box-shadow: 0 12px 28px rgba(25, 31, 42, 0.15);
}

body[data-page="메인 홈페이지"] .hero-money-snow span {
  min-width: var(--snow-w, 58px);
  height: var(--snow-h, 34px);
  border-radius: 8px;
  font-size: var(--snow-font, 20px);
  border-width: 1.5px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

/* ver26: 일반회원/공인중개사 전용 페이지 접근 안내 카드입니다. */
.role-guard-card {
  width: min(780px, calc(100% - 36px));
  margin: 56px auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, #fff, #fff7f6);
  box-shadow: 0 18px 42px rgba(20, 24, 31, 0.10);
}

.role-guard-card h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.1vw, 42px);
  letter-spacing: -0.055em;
}

.role-guard-card p {
  margin: 0 0 18px;
  color: #5d6572;
  line-height: 1.65;
  font-weight: 700;
}

.role-guard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ver26: 일반회원 페이지와 공인중개사 페이지를 눈으로도 구분하기 위한 상단 띠입니다. */
.role-page-note {
  margin: 0 0 20px;
  border: 1px solid #ffd7d2;
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff9f8;
  color: #494f5b;
  font-weight: 800;
  line-height: 1.5;
}

.role-page-note strong {
  color: var(--brand);
}


/* ver26: 게시판 메인 대표글 카드가 실제 커뮤니티 허브처럼 보이도록 보강합니다. */
.board-representative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.board-representative-grid > section {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06);
}
.board-representative-grid h2 {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.board-list.compact .board-row {
  padding: 12px 0;
}
.board-list.compact .board-row p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}


/* ver28: 문열림 오프닝 아래 2개 신규 오프닝은 화면 안쪽 요소들이 계속 움직이도록 구성합니다. */
.opening-boost {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr);
  gap: clamp(22px, 4vw, 62px);
  align-items: center;
  min-height: clamp(560px, 76vh, 820px);
  padding: clamp(58px, 8vw, 112px) clamp(24px, 6vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(242, 83, 55, .18), transparent 34%),
    linear-gradient(135deg, #fff8ef 0%, #fff 42%, #f8fbff 100%);
  border-top: 1px solid rgba(243, 112, 33, .14);
}

.opening-boost::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(255, 197, 59, .22) 48% 52%, transparent 54% 100%),
    repeating-linear-gradient(120deg, rgba(225, 49, 38, .06) 0 1px, transparent 1px 48px);
  transform: translateX(-18%);
  animation: ver28LightSweep 4.8s linear infinite;
  pointer-events: none;
}

.opening-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.opening-copy .eyebrow {
  color: var(--brand);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.opening-copy h2 {
  margin: 8px 0 14px;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.opening-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.72;
  font-weight: 750;
}

.opening-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.opening-metrics span,
.opening-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 15px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(20, 24, 31, .18);
}

.opening-metrics b {
  color: #ffd45d;
}

.benefit-engine-stage,
.scan-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(360px, 45vw, 580px);
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 211, 94, .42), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,241,224,.62));
  border: 1px solid rgba(255, 160, 63, .24);
  box-shadow: 0 34px 90px rgba(228, 73, 45, .14);
  overflow: hidden;
}

.benefit-engine-stage::after,
.scan-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 34px);
  animation: ver28GridMove 3.4s linear infinite;
  pointer-events: none;
}

.engine-ring {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 3px dashed rgba(225, 49, 38, .34);
  filter: drop-shadow(0 10px 25px rgba(225,49,38,.18));
  animation: ver28Spin 8s linear infinite;
}

.ring-b {
  inset: 25%;
  border-color: rgba(247, 178, 38, .62);
  animation-duration: 5.6s;
  animation-direction: reverse;
}

.engine-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(92px, 9vw, 142px);
  height: clamp(92px, 9vw, 142px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #e83227, #ffb326);
  color: #fff;
  font-size: clamp(30px, 3vw, 52px);
  font-weight: 950;
  box-shadow: 0 0 0 16px rgba(255, 209, 86, .2), 0 24px 60px rgba(225,49,38,.34);
  animation: ver28Pulse 1.35s ease-in-out infinite;
}

.money-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e9ffe6, #fff8bd);
  color: #13743c;
  border: 2px solid rgba(19,116,60,.55);
  font-size: 24px;
  font-weight: 950;
  transform-origin: -130px 0;
  animation: ver28Orbit 4.2s linear infinite;
}

.orbit-2 { animation-duration: 5.2s; animation-delay: -1.2s; transform-origin: -170px 0; }
.orbit-3 { animation-duration: 6.1s; animation-delay: -2.3s; transform-origin: -102px 0; }

.deal-card,
.room-card {
  position: absolute;
  border-radius: 18px;
  padding: 14px 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255, 155, 46, .28);
  box-shadow: 0 18px 42px rgba(20,24,31,.14);
  font-weight: 950;
  animation: ver28Float 2.6s ease-in-out infinite;
}

.card-a { left: 8%; top: 14%; }
.card-b { right: 7%; top: 30%; animation-delay: -.8s; }
.card-c { left: 20%; bottom: 13%; animation-delay: -1.5s; }

.opening-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.opening-particles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(7px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 50%;
  background: rgba(225, 49, 38, .62);
  box-shadow: 0 0 20px rgba(255, 183, 49, .9);
  animation: ver28Particle var(--d) ease-in-out infinite;
  animation-delay: var(--delay);
}

.opening-3d-scan {
  grid-template-columns: minmax(320px, 1.05fr) minmax(280px, .95fr);
  background:
    radial-gradient(circle at 80% 10%, rgba(40, 126, 255, .16), transparent 36%),
    linear-gradient(135deg, #f8fbff 0%, #fff 46%, #fff5ec 100%);
}

.scan-grid {
  position: absolute;
  inset: 10%;
  background:
    linear-gradient(rgba(42,115,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,115,255,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(600px) rotateX(64deg);
  transform-origin: bottom;
  animation: ver28ScanGrid 3s linear infinite;
}

.scan-house {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(170px, 18vw, 290px);
  height: clamp(170px, 18vw, 290px);
  transform: translate(-50%, -45%) rotateX(58deg) rotateZ(45deg);
  transform-style: preserve-3d;
  animation: ver28HouseTilt 5.5s ease-in-out infinite;
}

.scan-house .wall-left,
.scan-house .wall-right,
.scan-house .roof {
  position: absolute;
  inset: 14%;
  background: rgba(255,255,255,.76);
  border: 3px solid rgba(225,49,38,.55);
  box-shadow: inset 0 0 36px rgba(255, 194, 61, .22), 0 20px 48px rgba(42,115,255,.16);
}

.scan-house .wall-right {
  transform: translateZ(78px);
  border-color: rgba(42,115,255,.5);
}

.scan-house .roof {
  inset: 0;
  transform: translateZ(132px) scale(.74);
  background: rgba(255, 211, 94, .7);
}

.scan-line {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 0;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(42,115,255,.92), transparent);
  box-shadow: 0 0 24px rgba(42,115,255,.9);
  animation: ver28ScanLine 1.7s ease-in-out infinite;
}

.room-a { left: 9%; top: 20%; }
.room-b { right: 11%; top: 18%; animation-delay: -.9s; }
.room-c { right: 18%; bottom: 13%; animation-delay: -1.8s; }

.scan-particles span {
  background: rgba(42, 115, 255, .72);
  box-shadow: 0 0 18px rgba(42, 115, 255, .85);
}

@keyframes ver28LightSweep { to { transform: translateX(22%); } }
@keyframes ver28GridMove { to { background-position: 34px 0; } }
@keyframes ver28Spin { to { transform: rotate(360deg); } }
@keyframes ver28Pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
@keyframes ver28Orbit { from { transform: rotate(0deg) translateX(130px) rotate(0deg); } to { transform: rotate(360deg) translateX(130px) rotate(-360deg); } }
@keyframes ver28Float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes ver28Particle { 0%,100% { transform: translate3d(0,0,0) scale(.75); opacity:.35; } 50% { transform: translate3d(16px,-24px,0) scale(1.35); opacity:1; } }
@keyframes ver28ScanGrid { to { background-position: 0 34px, 34px 0; } }
@keyframes ver28HouseTilt { 0%,100% { transform: translate(-50%,-45%) rotateX(58deg) rotateZ(45deg); } 50% { transform: translate(-50%,-49%) rotateX(64deg) rotateZ(53deg); } }
@keyframes ver28ScanLine { 0%,100% { top: 4%; opacity:.2; } 50% { top: 94%; opacity:1; } }

/* ver28: 게시판 콘텐츠 중간 광고배너. 배너 자체가 나타나는 애니메이션이 아니라 내부 도형/빛/게이지가 계속 움직입니다. */
.inline-service-banner {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  margin: 12px 0;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 211, 94, .44), transparent 25%),
    linear-gradient(135deg, #111827 0%, #2a1511 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(20,24,31,.18);
}

.inline-service-banner b {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  color: #ffd45d;
}

.inline-service-banner p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-weight: 750;
}

.inline-service-banner em {
  position: relative;
  z-index: 2;
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  color: #e83227;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.banner-motion {
  position: relative;
  width: 108px;
  height: 76px;
}

.banner-motion span {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffde6e, #e83227);
  box-shadow: 0 0 24px rgba(255, 209, 86, .72);
}

.banner-motion span:nth-child(1) { inset: 8px 40px 8px 8px; animation: ver28BannerPulse 1.4s ease-in-out infinite; }
.banner-motion span:nth-child(2) { width: 20px; height: 20px; right: 18px; top: 10px; animation: ver28BannerOrbit 2.4s linear infinite; }
.banner-motion span:nth-child(3) { width: 58px; height: 8px; left: 34px; bottom: 16px; animation: ver28BannerBar 1.8s ease-in-out infinite; }
.banner-motion span:nth-child(4) { width: 8px; height: 68px; right: 6px; top: 4px; background: rgba(42,115,255,.9); animation: ver28BannerScan 1.2s ease-in-out infinite; }

.inline-service-banner.view3d {
  background:
    radial-gradient(circle at 10% 40%, rgba(42,115,255,.46), transparent 26%),
    linear-gradient(135deg, #0f172a 0%, #14274f 100%);
}

.inline-service-banner.myzip {
  background:
    radial-gradient(circle at 10% 40%, rgba(36,180,126,.42), transparent 26%),
    linear-gradient(135deg, #071d16 0%, #17342b 100%);
}

.board-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.board-attachments span,
.board-link,
.board-video {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff3e8;
  color: #c83a23;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

@keyframes ver28BannerPulse { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
@keyframes ver28BannerOrbit { from { transform: rotate(0deg) translateX(22px) rotate(0deg); } to { transform: rotate(360deg) translateX(22px) rotate(-360deg); } }
@keyframes ver28BannerBar { 0%,100% { transform: scaleX(.38); transform-origin:left; } 50% { transform: scaleX(1); transform-origin:left; } }
@keyframes ver28BannerScan { 0%,100% { transform: translateX(-76px); opacity:.2; } 50% { transform: translateX(0); opacity:1; } }

@media (max-width: 900px) {
  .opening-boost {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .opening-3d-scan .scan-stage {
    order: 2;
  }
  .inline-service-banner {
    grid-template-columns: 1fr;
  }
}


/* ver29: 게시판은 목록 우선, 글쓰기 버튼 클릭 시에만 양식이 열립니다. */
.board-write-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 12px;
  padding: 16px 18px;
  border: 1px solid rgba(237, 59, 50, .18);
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96), rgba(255,246,244,.96)),
    repeating-linear-gradient(90deg, rgba(237,59,50,.04) 0 1px, transparent 1px 26px);
  box-shadow: 0 12px 30px rgba(20,24,31,.07);
}
.board-write-toggle-bar strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
}
.board-write-toggle-bar span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.board-write-form[hidden],
.board-write-form.is-collapsed {
  display: none !important;
}
.board-write-form.is-open {
  display: grid !important;
  animation: ver29FormOpen .28s ease both;
}
.board-write-close {
  width: max-content;
  margin-top: 4px;
}
@keyframes ver29FormOpen {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ver30: 네 번째 인덱스 오프닝 - 지도/도시/대시보드가 동시에 움직이는 리워드 시티 애니메이션입니다. */
.opening-reward-city {
  grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 212, 88, .34), transparent 30%),
    radial-gradient(circle at 76% 12%, rgba(35, 109, 255, .18), transparent 31%),
    linear-gradient(135deg, #fff9ed 0%, #ffffff 42%, #eef5ff 100%);
}
.opening-reward-city::before {
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(255, 220, 92, .34) 42%, transparent 49% 100%),
    repeating-linear-gradient(90deg, rgba(36, 109, 255, .06) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(237, 59, 50, .035) 0 1px, transparent 1px 42px);
  animation: ver30RewardSweep 4.4s linear infinite;
}
.reward-city-copy h2 {
  max-width: 620px;
}
.reward-city-metrics span {
  animation: ver30MetricPop 2.4s ease-in-out infinite;
}
.reward-city-metrics span:nth-child(2) { animation-delay: -.4s; }
.reward-city-metrics span:nth-child(3) { animation-delay: -.8s; }
.reward-city-metrics span:nth-child(4) { animation-delay: -1.2s; }

.reward-city-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(430px, 50vw, 660px);
  overflow: hidden;
  border-radius: 42px;
  border: 1px solid rgba(54, 104, 255, .2);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 224, 99, .46), transparent 28%),
    linear-gradient(145deg, #08111f 0%, #16264c 52%, #3b1711 100%);
  box-shadow:
    0 38px 96px rgba(17, 37, 84, .22),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.reward-city-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  transform: perspective(700px) rotateX(62deg) translateY(80px) scale(1.4);
  transform-origin: bottom;
  animation: ver30CityGrid 2.8s linear infinite;
}
.reward-city-stage::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 18%, rgba(255, 224, 86, .28) 20% 25%, transparent 27% 52%, rgba(54, 104, 255, .22) 54% 59%, transparent 61% 100%);
  animation: ver30CityHalo 11s linear infinite;
}
.city-sky-glow {
  position: absolute;
  inset: 8% 10% 35%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 97, .42), rgba(255,224,97,0) 62%);
  filter: blur(6px);
  animation: ver30GlowPulse 2.2s ease-in-out infinite;
}
.city-map-orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  width: clamp(230px, 28vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px dashed rgba(255, 225, 100, .46);
  box-shadow: 0 0 44px rgba(255, 225, 100, .22);
  animation: ver30OrbitSpin 13s linear infinite;
}
.city-map-orbit.orbit-sub {
  width: clamp(150px, 19vw, 270px);
  border-color: rgba(94, 152, 255, .58);
  animation-duration: 7.5s;
  animation-direction: reverse;
}
.city-map-road {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 58%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 100, .94), transparent);
  box-shadow: 0 0 26px rgba(255, 224, 100, .8);
  transform: rotate(-18deg);
  animation: ver30RoadPulse 1.6s ease-in-out infinite;
}
.city-map-road.road-b {
  top: 44%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(94, 152, 255, .88), transparent);
  animation-delay: -.75s;
}
.city-building {
  position: absolute;
  bottom: 9%;
  z-index: 4;
  width: clamp(46px, 5.5vw, 82px);
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(217, 235, 255, .88));
  box-shadow: 0 24px 44px rgba(0,0,0,.34);
  animation: ver30BuildingFloat 3.2s ease-in-out infinite;
}
.city-building span {
  display: block;
  width: 58%;
  height: 7px;
  margin: 12px auto;
  border-radius: 999px;
  background: rgba(237, 59, 50, .45);
  box-shadow: 0 0 16px rgba(255, 224, 100, .55);
  animation: ver30WindowBlink 1.8s linear infinite;
}
.city-building.b1 { left: 8%; height: 34%; }
.city-building.b2 { left: 21%; height: 48%; animation-delay: -.7s; }
.city-building.b3 { right: 18%; height: 42%; animation-delay: -1.1s; }
.city-building.b4 { right: 7%; height: 30%; animation-delay: -1.6s; }

.city-pin {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #ed3b32, #ffcf4a);
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 16px 34px rgba(237,59,50,.35);
  animation: ver30PinBounce 1.65s ease-in-out infinite;
}
.city-pin::after {
  content: attr(class);
  display: none;
}
.city-pin { text-indent: -999px; }
.city-pin::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: inset 0 0 0 5px rgba(237,59,50,.18);
}
.city-pin.pin-a::after,
.city-pin.pin-b::after,
.city-pin.pin-c::after,
.city-pin.pin-d::after {
  display: grid;
  place-items: center;
  content: attr(data-label);
}
.city-pin.pin-a { left: 25%; top: 20%; }
.city-pin.pin-b { right: 20%; top: 26%; animation-delay: -.35s; }
.city-pin.pin-c { left: 38%; bottom: 22%; animation-delay: -.7s; }
.city-pin.pin-d { right: 34%; bottom: 18%; animation-delay: -1.05s; }
.city-pin.pin-a::after { content: "매물"; }
.city-pin.pin-b::after { content: "조회"; }
.city-pin.pin-c::after { content: "적립"; }
.city-pin.pin-d::after { content: "정산"; }
.city-pin::after {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  text-indent: 0;
  color: #ed3b32;
  font-size: 12px;
  font-weight: 1000;
}

.reward-dashboard {
  position: absolute;
  z-index: 8;
  right: 7%;
  top: 10%;
  width: clamp(190px, 20vw, 290px);
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 26px 62px rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.55);
  animation: ver30DashboardFloat 3.4s ease-in-out infinite;
}
.reward-dashboard strong {
  display: block;
  color: #16264c;
  font-size: 14px;
  font-weight: 1000;
}
.reward-dashboard em {
  display: block;
  margin: 8px 0 10px;
  color: #ed3b32;
  font-style: normal;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 1000;
  letter-spacing: -.04em;
  animation: ver30NumberFlicker 1.1s steps(2, end) infinite;
}
.reward-dashboard small {
  display: block;
  color: rgba(20,24,31,.72);
  font-weight: 850;
}
.reward-bar {
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #e8edf7;
}
.reward-bar i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed3b32, #ffd45d);
  animation: ver30BarFlow 1.5s ease-in-out infinite;
}

.reward-bill-train span {
  position: absolute;
  z-index: 9;
  left: var(--p);
  bottom: 14%;
  display: grid;
  place-items: center;
  width: 86px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid rgba(17, 127, 63, .72);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.88), transparent 13%),
    linear-gradient(135deg, #d8ffe0, #fff4aa 58%, #beeec7);
  color: #0f7540;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 18px 36px rgba(0,0,0,.3);
  transform: translateX(-80px) scale(var(--s));
  animation: ver30BillTrain 4.4s cubic-bezier(.14,.8,.2,1) infinite;
  animation-delay: var(--d);
}
.reward-countdown {
  position: absolute;
  z-index: 8;
  left: 8%;
  top: 11%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 12px;
  align-items: center;
  border-radius: 22px;
  padding: 16px;
  background: rgba(4, 10, 18, .54);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(10px);
  animation: ver30CountdownFloat 2.8s ease-in-out infinite;
}
.reward-countdown span {
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 900;
}
.reward-countdown b {
  color: #ffd45d;
  font-size: 22px;
  font-weight: 1000;
}
.reward-city-particles span {
  background: rgba(255, 224, 94, .72);
  box-shadow: 0 0 22px rgba(255, 224, 94, .9);
}

@keyframes ver30RewardSweep { to { transform: translateX(22%) skewX(-8deg); } }
@keyframes ver30MetricPop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ver30CityGrid { to { background-position: 0 38px, 38px 0; } }
@keyframes ver30CityHalo { to { transform: rotate(360deg); } }
@keyframes ver30GlowPulse { 0%,100% { opacity:.56; transform: scale(.94); } 50% { opacity:1; transform: scale(1.08); } }
@keyframes ver30OrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ver30RoadPulse { 0%,100% { opacity:.46; filter: blur(0); } 50% { opacity:1; filter: blur(1px); } }
@keyframes ver30BuildingFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ver30WindowBlink { 0%,100% { opacity:.35; } 45%,60% { opacity:1; } }
@keyframes ver30PinBounce { 0%,100% { transform: translateY(0) rotate(-45deg) scale(1); } 50% { transform: translateY(-18px) rotate(-45deg) scale(1.08); } }
@keyframes ver30DashboardFloat { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(18px) rotate(-2deg); } }
@keyframes ver30NumberFlicker { 0%,100% { opacity:1; } 50% { opacity:.72; } }
@keyframes ver30BarFlow { 0%,100% { width:42%; } 50% { width:88%; } }
@keyframes ver30BillTrain {
  0% { opacity:0; transform: translate(-140px, 0) rotate(-10deg) scale(calc(var(--s) * .75)); }
  18% { opacity:1; }
  52% { transform: translate(70px, -96px) rotate(18deg) scale(var(--s)); }
  100% { opacity:0; transform: translate(260px, -190px) rotate(55deg) scale(calc(var(--s) * .82)); }
}
@keyframes ver30CountdownFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px, -10px); } }

@media (max-width: 900px) {
  .opening-reward-city {
    grid-template-columns: 1fr;
  }
  .reward-dashboard {
    top: 14%;
    right: 6%;
  }
  .reward-countdown {
    left: 6%;
  }
}

/* ver29 최종: JS 적용 전에도 게시판 글쓰기 양식은 목록 뒤에 숨겨둡니다. */
[data-board-form]{display:none;}
[data-board-form].is-open{display:grid !important;}


/* ver33: zippalgo.com/zippalgo/db.do 기준으로 전체 폰트 크기를 한 단계 낮추고 행간을 안정화합니다. */
:root {
  --font-base-ver33: 15px;
  --font-small-ver33: 13px;
  --font-card-ver33: 14px;
  --font-title-ver33: clamp(24px, 3.2vw, 38px);
  --font-hero-ver33: clamp(32px, 4.6vw, 52px);
}
body {
  font-size: var(--font-base-ver33);
  line-height: 1.56;
  letter-spacing: -0.015em;
}
.site-header { min-height: 62px; padding: 0 24px; }
.nav-item { min-height: 62px; }
.nav-main {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: -0.03em;
}
.submenu { top: calc(100% - 2px); padding: 8px; gap: 3px; border-radius: 12px; }
.submenu a { padding: 8px 9px; border-radius: 8px; font-size: 12.5px; }
.hero h1,
.main-replica-hero .hero-content h1 {
  font-size: var(--font-hero-ver33);
  line-height: 1.08;
  letter-spacing: -0.055em;
}
.hero .sub,
.main-replica-hero .hero-content .sub {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}
.page-title h1,
.section h2,
.pin-step h2,
.submit-title,
.benefits-top-text,
.opening-copy h2,
.kinetic-copy h2,
.cash-impact-copy h2 {
  font-size: var(--font-title-ver33);
  line-height: 1.15;
  letter-spacing: -0.05em;
}
.page-title p,
.panel-card,
.board-row,
.listing-body,
.faq-answer,
.submit-sub,
.opening-copy p,
.kinetic-copy p,
.cash-impact-copy p {
  font-size: var(--font-card-ver33);
}
.eyebrow { font-size: 12px; letter-spacing: .06em; }
.tenk-bill,
.hero-money-snow .tenk-bill {
  --bill-w: 82px;
  --bill-h: 42px;
}
.hero-money-stream .tenk-bill b,
.hero-money-snow .tenk-bill b {
  font-size: clamp(11px, 1.1vw, 17px);
}
.hero-money-snow .tenk-bill {
  width: var(--snow-w, 56px);
  height: var(--snow-h, 30px);
}
.hero-money-snow .tenk-bill b {
  font-size: var(--snow-font, 11px);
}
.board-representative-grid h2 { font-size: 17px; }
.board-list.compact .board-row p { font-size: 12.5px; }

/* ver33: Opening 02 - 해외 인터랙티브 히어로에서 많이 쓰는 키네틱 타이포·대시보드·입자 조합으로 완전 변경합니다. */
.opening-kinetic-ledger {
  grid-template-columns: minmax(310px, .85fr) minmax(400px, 1.15fr);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 214, 91, .25), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 84, 56, .18), transparent 30%),
    linear-gradient(135deg, #090b12 0%, #141827 54%, #2b1210 100%);
  color: #fff;
}
.opening-kinetic-ledger::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px),
    linear-gradient(100deg, transparent 0 38%, rgba(255, 218, 91, .18) 45%, transparent 55% 100%);
  animation: ver33LedgerSweep 5.8s linear infinite;
}
.kinetic-copy {
  position: relative;
  z-index: 4;
}
.kinetic-copy .eyebrow,
.cash-impact-copy .eyebrow { color: #ffd45d; }
.kinetic-copy h2 {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
  font-weight: 1000;
}
.kinetic-copy h2 span {
  display: block;
  width: max-content;
  padding: 2px 12px 5px;
  background: linear-gradient(90deg, #fff, #ffd45d 48%, #ff6658);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 22px rgba(255, 83, 64, .25));
  animation: ver33KineticText 2.8s cubic-bezier(.22,1,.36,1) infinite;
}
.kinetic-copy h2 span:nth-child(2) { margin-left: 34px; animation-delay: -.65s; }
.kinetic-copy h2 span:nth-child(3) { margin-left: 12px; animation-delay: -1.25s; }
.kinetic-copy p { color: rgba(255,255,255,.76); max-width: 560px; }
.ledger-stage {
  position: relative;
  z-index: 3;
  min-height: clamp(420px, 48vw, 620px);
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 213, 89, .2), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 36px 100px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.07);
}
.ledger-stage::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(255, 210, 80, .3) 18%, transparent 25% 58%, rgba(237,59,50,.24) 64%, transparent 72% 100%);
  animation: ver33LedgerHalo 10s linear infinite;
}
.ledger-ticker {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 22px;
  display: flex;
  gap: 12px;
  width: max-content;
  white-space: nowrap;
  animation: ver33Ticker 13s linear infinite;
}
.ledger-ticker span {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 950;
}
.ledger-ribbons i {
  position: absolute;
  z-index: 2;
  left: -20%;
  right: -20%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 213, 89, .9), transparent);
  box-shadow: 0 0 24px rgba(255, 213, 89, .75);
  animation: ver33Ribbon 2.6s ease-in-out infinite;
}
.ledger-ribbons i:nth-child(1) { top: 28%; transform: rotate(-18deg); }
.ledger-ribbons i:nth-child(2) { top: 44%; transform: rotate(12deg); animation-delay: -.7s; background: linear-gradient(90deg, transparent, rgba(85, 145, 255, .9), transparent); }
.ledger-ribbons i:nth-child(3) { top: 62%; transform: rotate(-7deg); animation-delay: -1.4s; }
.ledger-ribbons i:nth-child(4) { top: 75%; transform: rotate(22deg); animation-delay: -2.1s; background: linear-gradient(90deg, transparent, rgba(255, 86, 72, .9), transparent); }
.ledger-stack {
  position: absolute;
  z-index: 6;
  left: 8%;
  top: 26%;
  display: grid;
  gap: 14px;
  width: min(330px, 58%);
  perspective: 900px;
}
.ledger-stack article {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 6px 14px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  color: #121826;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transform-origin: left center;
  animation: ver33LedgerCard 4.2s ease-in-out infinite;
}
.ledger-stack article:nth-child(2) { animation-delay: -.8s; margin-left: 34px; }
.ledger-stack article:nth-child(3) { animation-delay: -1.6s; margin-left: 10px; }
.ledger-stack b { grid-row: span 2; color: #ed3b32; font-size: 26px; font-weight: 1000; }
.ledger-stack strong { font-size: 18px; font-weight: 1000; }
.ledger-stack em { color: #6f7785; font-size: 12px; font-style: normal; font-weight: 800; }
.ledger-counter {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 12%;
  width: min(260px, 42%);
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ed3b32, #ffb936);
  color: #fff;
  box-shadow: 0 28px 64px rgba(237,59,50,.35);
  animation: ver33CounterFloat 2.8s ease-in-out infinite;
}
.ledger-counter span { font-size: 22px; font-weight: 1000; }
.ledger-counter b { display: block; font-size: clamp(28px, 4vw, 52px); line-height: 1; }
.ledger-counter small { display: block; margin-top: 8px; color: rgba(255,255,255,.82); font-weight: 800; }

/* ver33: Opening 03 - 3D View는 홀로그램 공간투어 스타일로 분리합니다. */
.opening-hologram-tour {
  grid-template-columns: minmax(400px, 1.1fr) minmax(310px, .9fr);
  background:
    radial-gradient(circle at 72% 18%, rgba(52, 132, 255, .22), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255, 214, 91, .2), transparent 30%),
    linear-gradient(135deg, #eef6ff 0%, #ffffff 42%, #fff7ef 100%);
}
.opening-hologram-tour::before {
  background:
    linear-gradient(110deg, transparent 0 40%, rgba(52,132,255,.2) 48%, transparent 55% 100%),
    repeating-linear-gradient(120deg, rgba(52,132,255,.07) 0 1px, transparent 1px 40px);
  animation: ver33HoloSweep 3.8s linear infinite;
}
.hologram-stage {
  position: relative;
  z-index: 3;
  min-height: clamp(420px, 50vw, 640px);
  overflow: hidden;
  border-radius: 40px;
  background:
    radial-gradient(circle at 50% 45%, rgba(80, 155, 255, .24), transparent 32%),
    linear-gradient(145deg, #09111f 0%, #122849 58%, #08111f 100%);
  box-shadow: 0 36px 90px rgba(18, 54, 104, .28);
  border: 1px solid rgba(90, 160, 255, .22);
  perspective: 1000px;
}
.hologram-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 58%;
  background:
    linear-gradient(rgba(90,160,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,255,.22) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: rotateX(68deg);
  transform-origin: top;
  animation: ver33HoloFloor 2.7s linear infinite;
}
.hologram-house {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(42deg);
  animation: ver33HoloHouse 6s ease-in-out infinite;
}
.holo-wall,
.holo-roof {
  position: absolute;
  inset: 12%;
  border: 3px solid rgba(96, 196, 255, .78);
  background: rgba(105, 175, 255, .12);
  box-shadow: inset 0 0 36px rgba(90,180,255,.32), 0 0 38px rgba(90,180,255,.22);
}
.wall-b { transform: translateZ(72px); border-color: rgba(255, 214, 91, .78); }
.wall-c { inset: 28%; transform: translateZ(130px); border-color: rgba(255,255,255,.74); }
.holo-roof { inset: 2%; transform: translateZ(170px) scale(.7); border-color: rgba(237,59,50,.74); }
.holo-scan {
  position: absolute;
  left: -24%;
  right: -24%;
  top: 0;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #65d6ff, transparent);
  box-shadow: 0 0 26px #65d6ff;
  animation: ver33HoloScan 1.4s ease-in-out infinite;
}
.holo-ui {
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 12px 15px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  backdrop-filter: blur(8px);
  animation: ver33HoloUi 3s ease-in-out infinite;
}
.ui-a { left: 9%; top: 17%; }
.ui-b { right: 8%; top: 22%; animation-delay: -.9s; }
.ui-c { right: 18%; bottom: 16%; animation-delay: -1.8s; }
.hologram-copy h2 span {
  background: linear-gradient(90deg, #0d2b52, #317dff 48%, #ed3b32);
  -webkit-background-clip: text;
  background-clip: text;
}
.hologram-copy p { color: #566173; }

/* ver33: Opening 04 - 기존 도시 스타일을 버리고 현금 흐름 충격파/포털 스타일로 교체합니다. */
.opening-cash-impact {
  grid-template-columns: minmax(310px, .9fr) minmax(420px, 1.1fr);
  background:
    radial-gradient(circle at 20% 24%, rgba(237, 59, 50, .22), transparent 32%),
    radial-gradient(circle at 80% 78%, rgba(255, 212, 88, .32), transparent 30%),
    linear-gradient(135deg, #fff8ee 0%, #fff 42%, #fff2f0 100%);
}
.opening-cash-impact::before {
  background:
    radial-gradient(circle at 75% 50%, rgba(237,59,50,.18), transparent 20%),
    linear-gradient(100deg, transparent 0 36%, rgba(255,217,92,.34) 45%, transparent 55% 100%);
  animation: ver33CashSweep 3.4s ease-in-out infinite;
}
.cash-impact-copy {
  position: relative;
  z-index: 5;
}
.cash-impact-copy .eyebrow { color: #ed3b32; }
.cash-impact-copy h2 {
  margin: 10px 0 16px;
  max-width: 620px;
  font-weight: 1000;
  color: #141820;
}
.cash-impact-copy p {
  margin: 0;
  max-width: 610px;
  color: #5f6673;
  font-weight: 750;
}
.cash-impact-stage {
  position: relative;
  z-index: 4;
  min-height: clamp(430px, 50vw, 660px);
  overflow: hidden;
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 229, 122, .48), transparent 24%),
    linear-gradient(145deg, #260a08 0%, #611911 48%, #f6c05b 100%);
  box-shadow: 0 38px 100px rgba(128, 31, 21, .28);
}
.cash-impact-stage::before {
  content: "";
  position: absolute;
  inset: -24%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 3deg, transparent 3deg 11deg);
  animation: ver33CashBurstRotate 14s linear infinite;
}
.cash-portal {
  position: absolute;
  left: 50%;
  top: 43%;
  width: clamp(190px, 22vw, 330px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.cash-portal span {
  position: absolute;
  inset: calc(var(--i, 0) * 16px);
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.68);
  box-shadow: 0 0 28px rgba(255,255,255,.48), inset 0 0 24px rgba(255,255,255,.28);
  animation: ver33PortalPulse 2.2s ease-in-out infinite;
}
.cash-portal span:nth-child(1) { --i: 0; }
.cash-portal span:nth-child(2) { --i: 1; animation-delay: -.7s; border-color: rgba(255, 214, 91, .75); }
.cash-portal span:nth-child(3) { --i: 2; animation-delay: -1.4s; border-color: rgba(237, 59, 50, .7); }
.cash-wave i {
  position: absolute;
  z-index: 7;
  left: var(--x);
  top: -12%;
  display: grid;
  place-items: center;
  width: 94px;
  height: 44px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e7ffe8, #fff6bb);
  border: 2px solid rgba(20, 124, 65, .72);
  color: #136b38;
  font-size: 14px;
  font-style: normal;
  font-weight: 1000;
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
  transform: rotate(var(--r));
  animation: ver33CashFall 3.4s cubic-bezier(.2,.75,.25,1) infinite;
  animation-delay: var(--d);
}
.cash-story-card {
  position: absolute;
  z-index: 8;
  min-width: 150px;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 56px rgba(0,0,0,.28);
  animation: ver33StoryFloat 3.2s ease-in-out infinite;
}
.cash-story-card b { display: block; color: #ed3b32; font-size: 22px; }
.cash-story-card span { color: #4d5664; font-size: 13px; font-weight: 800; }
.story-a { left: 8%; top: 15%; }
.story-b { right: 9%; top: 18%; animation-delay: -.8s; }
.story-c { left: 16%; bottom: 14%; animation-delay: -1.6s; }
.cash-impact-meter {
  position: absolute;
  z-index: 9;
  right: 9%;
  bottom: 12%;
  width: min(280px, 44%);
  padding: 18px;
  border-radius: 24px;
  background: #141820;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.cash-impact-meter strong { display: block; margin-bottom: 10px; font-size: 14px; }
.cash-impact-meter span {
  display: block;
  overflow: hidden;
  height: 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.cash-impact-meter span i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed3b32, #ffd45d);
  animation: ver33CashMeter 1.35s ease-in-out infinite;
}
.cash-impact-meter em {
  display: block;
  margin-top: 10px;
  color: #ffd45d;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.kinetic-particles span { background: rgba(255, 213, 89, .78); }
.hologram-particles span { background: rgba(101, 214, 255, .78); }
.cash-impact-particles span { background: rgba(255, 232, 132, .78); }

@keyframes ver33LedgerSweep { to { transform: translateX(22%); } }
@keyframes ver33KineticText { 0%,100% { transform: translateX(0) skewX(0); opacity:.72; } 50% { transform: translateX(16px) skewX(-4deg); opacity:1; } }
@keyframes ver33LedgerHalo { to { transform: rotate(360deg); } }
@keyframes ver33Ticker { from { transform: translateX(0); } to { transform: translateX(-48%); } }
@keyframes ver33Ribbon { 0%,100% { opacity:.2; transform: translateX(-12%) rotate(var(--rot, 0deg)); } 50% { opacity:1; transform: translateX(12%) rotate(var(--rot, 0deg)); } }
@keyframes ver33LedgerCard { 0%,100% { transform: rotateY(-8deg) translateY(0); } 50% { transform: rotateY(8deg) translateY(-16px); } }
@keyframes ver33CounterFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes ver33HoloSweep { to { transform: translateX(28%); } }
@keyframes ver33HoloFloor { to { background-position: 0 34px, 34px 0; } }
@keyframes ver33HoloHouse { 0%,100% { transform: translate(-50%,-50%) rotateX(58deg) rotateZ(42deg); } 50% { transform: translate(-50%,-54%) rotateX(66deg) rotateZ(54deg); } }
@keyframes ver33HoloScan { 0%,100% { top: 6%; opacity:.2; } 50% { top: 92%; opacity:1; } }
@keyframes ver33HoloUi { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes ver33CashSweep { 0%,100% { transform: translateX(-8%); } 50% { transform: translateX(10%); } }
@keyframes ver33CashBurstRotate { to { transform: rotate(360deg); } }
@keyframes ver33PortalPulse { 0%,100% { transform: scale(.92); opacity:.42; } 50% { transform: scale(1.08); opacity:1; } }
@keyframes ver33CashFall { 0% { transform: translate3d(0,-20%,0) rotate(var(--r)); opacity:0; } 18% { opacity:1; } 70% { transform: translate3d(-30px,420px,0) rotate(calc(var(--r) + 280deg)); opacity:1; } 100% { transform: translate3d(40px,520px,0) rotate(calc(var(--r) + 420deg)); opacity:0; } }
@keyframes ver33StoryFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes ver33CashMeter { 0%,100% { width: 28%; } 50% { width: 92%; } }
@media (max-width: 900px) {
  .opening-kinetic-ledger,
  .opening-hologram-tour,
  .opening-cash-impact {
    grid-template-columns: 1fr;
  }
  .ledger-stage,
  .hologram-stage,
  .cash-impact-stage {
    min-height: 420px;
  }
}


/* ===== ver34 integrated typography, openings, board lounge, and DB UI fixes ===== */
/* 모든 큰 제목은 agent-hero-title 기준 최대 40px을 넘기지 않도록 통합합니다. */
:root {
  --font-body: 14px;
  --font-small: 12px;
  --font-mid: 15px;
  --font-subtitle: clamp(18px, 2.4vw, 24px);
  --font-title: clamp(24px, 4vw, 36px);
  --font-hero: clamp(28px, 4.6vw, 40px);
  --line-comfort: 1.55;
}

html { font-size: var(--font-body); }
body {
  font-size: var(--font-body);
  line-height: var(--line-comfort);
}

.agent-hero-title,
.hero h1,
.hero-title,
.page-title h1,
.route-title h1,
.auth-copy h1,
.pin-step h2,
.reward-submit h2,
.faq-title,
.opening-boost h2,
.board-lounge h1 {
  font-size: var(--font-hero) !important;
  line-height: 1.34 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

.panel-page h1,
.panel-card h2,
.route-card h2,
.community-section-title h2,
.community-bottom-grid h2,
.feed-column h3 {
  font-size: var(--font-subtitle) !important;
  line-height: 1.38 !important;
}

.site-header,
.nav-main,
.submenu a,
.panel-card,
.board-row,
.auth-card,
input,
textarea,
select,
button {
  font-size: var(--font-body);
}

.eyebrow,
.board-meta,
.small-button,
.secondary,
.primary {
  font-size: var(--font-small);
}

/* 2, 3, 4번째 오프닝은 서로 다른 컨테이너 크기와 전체영역 애니메이션을 사용합니다. */
.opening-boost {
  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20, 24, 40, 0.08);
}

.opening-copy,
.compact-copy,
.scan-copy,
.reward-pulse-copy {
  position: relative;
  z-index: 3;
}

.opening-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  margin-top: 12px;
}

.opening-flow-board {
  min-height: 430px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4.5vw, 52px);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 229, 150, .9), transparent 28%),
    linear-gradient(135deg, #fffdf7 0%, #f8fbff 58%, #fff6eb 100%);
}

.flow-board-bg span {
  position: absolute;
  inset: auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(255, 180, 30, 0.12);
  filter: blur(1px);
  animation: flowBlob 9s ease-in-out infinite alternate;
}
.flow-board-bg span:nth-child(1) { left: 5%; top: 12%; }
.flow-board-bg span:nth-child(2) { right: 7%; top: 10%; animation-delay: -2s; background: rgba(237, 59, 50, .10); }
.flow-board-bg span:nth-child(3) { left: 34%; bottom: -80px; animation-delay: -4s; background: rgba(25, 118, 210, .10); }
.flow-board-bg span:nth-child(4) { right: 26%; bottom: 18%; width: 120px; height: 120px; animation-delay: -6s; }

.flow-board-stage {
  position: relative;
  z-index: 2;
  min-height: 320px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.flow-path {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4d3d, #ffc83d, #29b36a);
  overflow: hidden;
}
.flow-path::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: flowLine 2.2s linear infinite;
}
.flow-path i {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 204, 70, .25), 0 10px 24px rgba(0,0,0,.12);
  transform: translate(-50%, -50%);
  animation: flowPing 1.8s ease-in-out infinite;
}
.flow-path i:nth-child(1) { left: 12%; }
.flow-path i:nth-child(2) { left: 50%; animation-delay: -.5s; }
.flow-path i:nth-child(3) { left: 88%; animation-delay: -1s; }

.flow-card {
  position: absolute;
  width: 154px;
  min-height: 104px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16,24,40,.13);
  animation: flowCardFloat 4.8s ease-in-out infinite;
}
.flow-card b { display: block; font-size: 12px; color: #ef3f34; }
.flow-card strong { display: block; margin-top: 7px; font-size: 16px; }
.flow-card em { position: absolute; right: 14px; bottom: 12px; font-style: normal; font-weight: 900; color: rgba(0,0,0,.14); }
.flow-a { left: 3%; top: 18%; }
.flow-b { left: 38%; top: 54%; animation-delay: -1.3s; }
.flow-c { right: 3%; top: 18%; animation-delay: -2.6s; }

.flow-money-strip {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 20px;
  display: flex;
  gap: 12px;
  animation: flowMoneySlide 8s linear infinite;
}
.flow-money-strip span {
  flex: 0 0 120px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d8f4d7, #ffffff 45%, #bde8b5);
  border: 1px solid rgba(38, 120, 50, .18);
  font-size: 12px;
  font-weight: 900;
  color: #1b6b32;
}

.opening-scan-room {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: center;
  padding: clamp(30px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(circle at 24% 30%, rgba(57, 255, 210, .22), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(255, 72, 56, .20), transparent 34%),
    linear-gradient(135deg, #08111f, #131b31 52%, #0f172a);
}

.scan-room-stage {
  position: relative;
  z-index: 2;
  min-height: 400px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255,255,255,.13);
}
.scan-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(500px) rotateX(58deg) translateY(70px) scale(1.2);
  transform-origin: bottom;
  animation: scanGridMove 5s linear infinite;
}
.scan-frame {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 13%;
  bottom: 13%;
  border-radius: 26px;
  border: 2px solid rgba(74,255,216,.46);
  box-shadow: 0 0 40px rgba(74,255,216,.16), inset 0 0 50px rgba(74,255,216,.08);
  animation: scanFramePulse 3.2s ease-in-out infinite;
}
.scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(85,255,218,.65), transparent);
  filter: blur(1px);
  animation: scanBeam 2.8s ease-in-out infinite;
}
.room-line {
  position: absolute;
  background: rgba(255,255,255,.74);
  box-shadow: 0 0 20px rgba(90,255,225,.5);
}
.line-a { left: 18%; top: 28%; width: 58%; height: 3px; transform: rotate(25deg); }
.line-b { left: 18%; bottom: 30%; width: 56%; height: 3px; transform: rotate(-25deg); }
.line-c { left: 50%; top: 28%; width: 3px; height: 44%; }
.room-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #45ffd8;
  box-shadow: 0 0 28px #45ffd8;
  animation: scanDot 2.4s ease-in-out infinite;
}
.dot-a { left: 16%; top: 25%; }
.dot-b { right: 17%; top: 49%; animation-delay: -.8s; }
.dot-c { left: 46%; bottom: 25%; animation-delay: -1.6s; }

.scan-card {
  position: absolute;
  min-width: 118px;
  padding: 11px 14px;
  border-radius: 16px;
  color: #eafffb;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 900;
  animation: scanCardFloat 4.2s ease-in-out infinite;
}
.scan-card-a { left: 7%; top: 8%; }
.scan-card-b { right: 7%; top: 20%; animation-delay: -1.1s; }
.scan-card-c { left: 10%; bottom: 9%; animation-delay: -2.2s; }

.scan-copy p,
.scan-copy h2 { color: #fff; }
.scan-copy .eyebrow { color: #8cf7df; }

.opening-reward-pulse {
  min-height: 500px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 28px;
  padding: clamp(30px, 5vw, 62px);
  background:
    radial-gradient(circle at 70% 40%, rgba(255, 205, 74, .42), transparent 32%),
    linear-gradient(135deg, #fff8e8 0%, #ffffff 45%, #fff0ee 100%);
}

.reward-pulse-stage {
  position: relative;
  min-height: 360px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,246,217,.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 24px 60px rgba(255, 90, 50, .14);
  overflow: hidden;
}
.pulse-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px dashed rgba(239, 63, 52, .32);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: pulseRotate 16s linear infinite;
}
.orbit-a { width: 280px; height: 280px; }
.orbit-b { width: 190px; height: 190px; animation-duration: 10s; animation-direction: reverse; }
.pulse-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ff4d3d, #b9130c);
  color: #fff;
  box-shadow: 0 0 0 12px rgba(239,63,52,.13), 0 28px 70px rgba(239,63,52,.30);
  animation: coreBeat 1.8s ease-in-out infinite;
}
.pulse-core b { display: block; font-size: 22px; }
.pulse-core span { display: block; font-size: 11px; font-weight: 800; }
.pulse-note {
  position: absolute;
  width: 112px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #d9f4d2, #fff 48%, #c1eab8);
  border: 1px solid rgba(16, 120, 45, .20);
  color: #14642e;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(40, 120, 55, .14);
  animation: noteOrbit 5.6s ease-in-out infinite;
}
.note-a { left: 8%; top: 18%; }
.note-b { right: 12%; top: 14%; animation-delay: -1.4s; }
.note-c { left: 13%; bottom: 16%; animation-delay: -2.8s; }
.note-d { right: 9%; bottom: 20%; animation-delay: -4.2s; }
.pulse-counter {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 38px rgba(20, 24, 40, .10);
}
.pulse-counter span { display: block; color: #6b7280; font-size: 12px; }
.pulse-counter strong { display: block; font-size: 22px; color: #111827; }
.pulse-counter i {
  display: block;
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4d3d, #ffcf53);
  transform-origin: left;
  animation: counterFill 2.4s ease-in-out infinite;
}
.op-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.op-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 999px;
  background: rgba(239,63,52,.55);
  transform: rotate(var(--r));
  animation: particleFloat 5s ease-in-out infinite;
  animation-delay: var(--d);
}

/* 게시판 허브는 실제 커뮤니티처럼 피드/카테고리/대표글이 한 화면에 보이도록 재구성합니다. */
.board-lounge {
  width: min(1180px, calc(100% - 28px));
  margin: 28px auto 64px;
}
.board-lounge-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4vw, 50px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 208, 80, .36), transparent 28%),
    linear-gradient(135deg, #111827, #2a1e1b 55%, #5f160f);
  color: #fff;
  overflow: hidden;
}
.board-lounge-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 130deg, transparent, rgba(255,255,255,.16), transparent, rgba(255,202,70,.18), transparent);
  animation: loungeSweep 10s linear infinite;
}
.board-lounge-hero > * { position: relative; z-index: 1; }
.board-lounge-hero h1 { color: #fff; margin: 6px 0 10px; }
.board-lounge-hero p { max-width: 680px; color: rgba(255,255,255,.82); }
.board-lounge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.board-live-panel {
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: #52ff97;
  box-shadow: 0 0 20px #52ff97;
  animation: livePulse 1.2s infinite;
}
.board-live-panel strong { display: block; margin-top: 18px; font-size: 24px; }
.board-live-panel em { display: block; margin-top: 6px; color: rgba(255,255,255,.75); font-style: normal; }
.live-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; margin-top: 24px; }
.live-bars i { flex: 1; border-radius: 999px; background: linear-gradient(#ffdf69,#ff564a); animation: liveBar 1.5s ease-in-out infinite; }
.live-bars i:nth-child(1) { height: 34%; }
.live-bars i:nth-child(2) { height: 72%; animation-delay: -.3s; }
.live-bars i:nth-child(3) { height: 52%; animation-delay: -.6s; }
.live-bars i:nth-child(4) { height: 90%; animation-delay: -.9s; }

.ziptier-board-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin: 16px 0;
  padding: 20px 22px;
  border-radius: 24px;
  color: #111827;
  text-decoration: none;
  background:
    radial-gradient(circle at 8% 20%, rgba(237, 59, 50, .18), transparent 28%),
    linear-gradient(135deg, #fff, #fff7ed 55%, #fff1f0);
  border: 1px solid rgba(237, 59, 50, .14);
  box-shadow: 0 18px 44px rgba(20, 24, 40, .08);
  overflow: hidden;
}

.ziptier-board-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-120%);
  animation: ziptierSweep 3.8s ease-in-out infinite;
}

.ziptier-board-banner > * {
  position: relative;
  z-index: 1;
}

.ziptier-orbit {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: #111827;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.ziptier-orbit i {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ed3b32;
  animation: ziptierTile 2.8s ease-in-out infinite;
}

.ziptier-orbit i:nth-child(2) {
  background: #f59e0b;
  animation-delay: .25s;
}

.ziptier-orbit i:nth-child(3) {
  background: #38bdf8;
  animation-delay: .5s;
}

.ziptier-copy b {
  display: inline-flex;
  margin-bottom: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px;
}

.ziptier-copy strong,
.ziptier-copy em {
  display: block;
}

.ziptier-copy strong {
  font-size: clamp(18px, 2.8vw, 28px);
  line-height: 1.2;
}

.ziptier-copy em {
  margin-top: 4px;
  color: #6b7280;
  font-style: normal;
  font-weight: 800;
}

.ziptier-link-motion {
  border-radius: 999px;
  padding: 12px 16px;
  background: #ed3b32;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(237, 59, 50, .24);
  animation: ziptierButton 1.8s ease-in-out infinite;
}

.community-stat-grid,
.community-bottom-grid,
.community-feed-grid {
  display: grid;
  gap: 14px;
}
.community-stat-grid {
  grid-template-columns: repeat(4, 1fr);
  margin: 16px 0;
}
.community-stat-grid article {
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20,24,40,.07);
}
.community-stat-grid b { display: block; font-size: 26px; color: #ef3f34; }
.community-stat-grid span { color: #6b7280; }

.board-category-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 20px;
}
.board-category-strip a {
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  color: #111827;
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.board-category-strip a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,24,40,.10);
}

.community-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 18px;
  align-items: start;
}
.community-main-feed,
.community-side > section,
.community-bottom-grid > section {
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(20,24,40,.07);
}
.community-main-feed {
  padding: 22px;
}
.community-section-title { margin-bottom: 14px; }
.community-feed-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feed-column.wide { grid-column: span 2; }
.feed-column {
  min-height: 210px;
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  overflow: hidden;
}
.feed-column h3 { margin: 0 0 10px; }

.community-side {
  display: grid;
  gap: 14px;
}
.side-card { min-height: 150px; }
.hot-keywords { padding: 18px; }
.hot-keywords h3 { margin-top: 0; }
.hot-keywords span {
  display: inline-flex;
  margin: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-weight: 800;
  color: #374151;
}

.community-bottom-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
}
.community-bottom-grid > section {
  padding: 16px;
  min-height: 220px;
  overflow: hidden;
}

.motion-list .board-row {
  animation: boardRowSlide 4.5s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.board-row-live {
  opacity: 0;
  transform: translateY(10px);
  animation: boardRowIn .45s ease forwards;
  animation-delay: var(--delay, 0s);
}
.board-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-row p { margin: 6px 0; color: #4b5563; }
.board-media {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.board-thumb {
  width: 82px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.08);
}
.attachment-chip,
.board-link,
.stars {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
}
.stars { color: #f59e0b; background: #fffbeb; }
.board-link { color: #2563eb; background: #eff6ff; text-decoration: none; }

.board-write-card[hidden] { display: none !important; }
.small-write-button { margin-right: auto; }

.service-ad-banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 1px solid rgba(239,63,52,.10);
}
.service-ad-banner a {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 120px;
  padding: 18px;
  color: #111827;
  text-decoration: none;
}
.service-ad-banner strong { font-size: 20px; }
.service-ad-banner em { font-style: normal; color: #6b7280; }
.service-ad-banner i { font-style: normal; font-weight: 900; color: #ef3f34; }
.ad-pulse {
  position: absolute;
  right: -28px;
  top: -28px;
  width: 118px;
  height: 118px;
  border-radius: 999px;
  background: rgba(239,63,52,.14);
  animation: adPulse 2.4s ease-in-out infinite;
}
.service-ad-banner.view3d { background: linear-gradient(135deg, #eff6ff, #ffffff); }
.service-ad-banner.myzip { background: linear-gradient(135deg, #ecfdf5, #ffffff); }

.ziptier-3d-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  width: min(1180px, calc(100% - 28px));
  margin: 26px auto 38px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 218, 96, .28), transparent 30%),
    linear-gradient(135deg, #111827, #301312 60%, #ed3b32);
  box-shadow: 0 22px 60px rgba(17, 24, 39, .18);
  overflow: hidden;
}

.ziptier-3d-cta::before {
  content: "";
  position: absolute;
  right: 10%;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 60px;
  background: rgba(255,255,255,.12);
  transform: rotate(18deg);
  animation: ziptierRoomFloat 4.6s ease-in-out infinite;
}

.ziptier-3d-cta > * {
  position: relative;
  z-index: 1;
}

.ziptier-3d-cta .eyebrow {
  color: #fbbf24;
}

.ziptier-3d-cta h2 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
}

.ziptier-3d-cta p {
  max-width: 680px;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

.ziptier-3d-cta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ziptier-3d-cta a {
  border-radius: 999px;
  padding: 13px 17px;
  font-weight: 1000;
  text-decoration: none;
  white-space: nowrap;
}

.ziptier-3d-cta a.primary {
  background: #fff;
  color: #ed3b32;
  animation: ziptierButton 1.8s ease-in-out infinite;
}

.ziptier-3d-cta a.secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
}

@keyframes flowBlob {
  to { transform: translate3d(30px, -20px, 0) scale(1.12); }
}
@keyframes ziptierSweep {
  45%, 100% { transform: translateX(120%); }
}
@keyframes ziptierTile {
  0%, 100% { transform: translate(-10px, -8px) rotate(-8deg); opacity: .92; }
  50% { transform: translate(10px, 8px) rotate(10deg); opacity: .72; }
}
@keyframes ziptierButton {
  50% { transform: translateY(-3px); box-shadow: 0 20px 36px rgba(237, 59, 50, .32); }
}
@keyframes ziptierRoomFloat {
  50% { transform: translateY(18px) rotate(10deg) scale(1.06); }
}
@keyframes flowLine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes flowPing {
  50% { transform: translate(-50%, -50%) scale(1.26); }
}
@keyframes flowCardFloat {
  50% { transform: translateY(-12px) rotate(-1deg); }
}
@keyframes flowMoneySlide {
  from { transform: translateX(0); }
  to { transform: translateX(-132px); }
}
@keyframes scanGridMove {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 68px, 68px 0; }
}
@keyframes scanFramePulse {
  50% { transform: scale(.98); box-shadow: 0 0 70px rgba(74,255,216,.26), inset 0 0 70px rgba(74,255,216,.10); }
}
@keyframes scanBeam {
  0% { transform: translateY(0); opacity: .15; }
  45% { opacity: .95; }
  100% { transform: translateY(230px); opacity: .12; }
}
@keyframes scanDot {
  50% { transform: scale(1.5); }
}
@keyframes scanCardFloat {
  50% { transform: translateY(-14px); }
}
@keyframes pulseRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes coreBeat {
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes noteOrbit {
  50% { transform: translateY(-18px) rotate(3deg); }
}
@keyframes counterFill {
  0% { transform: scaleX(.20); }
  60%, 100% { transform: scaleX(1); }
}
@keyframes particleFloat {
  50% { transform: translate(14px, -18px) rotate(calc(var(--r) + 90deg)); opacity: .35; }
}
@keyframes loungeSweep {
  to { transform: rotate(360deg); }
}
@keyframes livePulse {
  50% { transform: scale(1.6); opacity: .55; }
}
@keyframes liveBar {
  50% { transform: scaleY(.45); }
}
@keyframes boardRowIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes boardRowSlide {
  50% { transform: translateX(4px); }
}
@keyframes adPulse {
  50% { transform: scale(1.25); opacity: .62; }
}

@media (max-width: 900px) {
  .opening-flow-board,
  .opening-scan-room,
  .opening-reward-pulse,
  .board-lounge-hero,
  .community-layout,
  .ziptier-board-banner,
  .ziptier-3d-cta {
    grid-template-columns: 1fr;
  }
  .ziptier-3d-cta nav { justify-content: flex-start; }
  .community-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .community-feed-grid,
  .community-bottom-grid {
    grid-template-columns: 1fr;
  }
  .feed-column.wide { grid-column: auto; }
}

@media (max-width: 640px) {
  :root { --font-body: 13px; }
  .opening-boost { width: min(100% - 18px, 1180px); border-radius: 22px; }
  .opening-flow-board,
  .opening-scan-room,
  .opening-reward-pulse {
    padding: 24px 18px;
  }
  .ziptier-board-banner,
  .ziptier-3d-cta {
    padding: 22px 18px;
    border-radius: 22px;
  }
  .ziptier-link-motion,
  .ziptier-3d-cta a {
    width: 100%;
    text-align: center;
  }
  .community-stat-grid { grid-template-columns: 1fr; }
}


/* ver35: 메인 인덱스 2/3/4 오프닝을 서로 다른 컨테이너 구조와 전체 영역 애니메이션으로 교체합니다. */
.opening-boost.opening-02,
.opening-boost.opening-03,
.opening-boost.opening-04 {
  position: relative;
  overflow: hidden;
  width: min(1180px, calc(100% - 36px));
  margin: 34px auto;
  border: 1px solid rgba(232, 235, 239, 0.92);
  border-radius: 34px;
  min-height: clamp(380px, 54vw, 560px);
  padding: clamp(28px, 4.8vw, 58px);
  box-shadow: 0 28px 80px rgba(20, 24, 31, 0.12);
}

.benefit-terminal {
  display: grid;
  grid-template-columns: .9fr 1.15fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  color: #eaf2ff;
  background:
    radial-gradient(circle at 15% 20%, rgba(237, 59, 50, .38), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(66, 182, 255, .28), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #172033 52%, #111827 100%);
}
.terminal-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 60% 50%, #000 0%, transparent 74%);
  animation: terminalGridMove 14s linear infinite;
}
.terminal-copy,
.terminal-screen,
.panorama-copy,
.panorama-stage,
.city-map,
.city-copy {
  position: relative;
  z-index: 1;
}
.terminal-copy h2,
.panorama-copy h2,
.city-copy h2 {
  margin: 8px 0 14px;
  font-size: var(--font-hero);
  line-height: 1.26;
  letter-spacing: -0.045em;
}
.terminal-copy p,
.panorama-copy p,
.city-copy p {
  max-width: 520px;
  color: rgba(255,255,255,.78);
}
.terminal-screen {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  padding: 18px;
  background: rgba(7, 12, 25, .54);
  box-shadow: inset 0 0 50px rgba(66, 182, 255, .16), 0 24px 60px rgba(0,0,0,.22);
}
.terminal-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.8);
  font-size: 12px;
}
.terminal-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ed3b32;
}
.terminal-top span:nth-child(2) { background: #ffc857; }
.terminal-top span:nth-child(3) { background: #24b47e; }
.terminal-top b { margin-left: auto; letter-spacing: .12em; }
.terminal-lines {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}
.terminal-lines i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(66,182,255,.12), rgba(66,182,255,.82), rgba(237,59,50,.7), transparent);
  transform-origin: left;
  animation: terminalLine 2.4s ease-in-out infinite;
}
.terminal-lines i:nth-child(2) { animation-delay: -.4s; width: 78%; }
.terminal-lines i:nth-child(3) { animation-delay: -.8s; width: 88%; }
.terminal-lines i:nth-child(4) { animation-delay: -1.2s; width: 64%; }
.terminal-lines i:nth-child(5) { animation-delay: -1.6s; width: 92%; }
.terminal-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.terminal-dashboard article,
.terminal-cards span {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  animation: terminalCardFloat 4.2s ease-in-out infinite;
}
.terminal-dashboard b {
  display: block;
  color: rgba(255,255,255,.66);
  font-size: 12px;
}
.terminal-dashboard strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 21px;
}
.terminal-cards {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  white-space: nowrap;
  animation: terminalTicker 10s linear infinite alternate;
}
.terminal-cards span { min-width: 160px; color: #fff; }

.room-panorama {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  background:
    radial-gradient(circle at 74% 24%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 46%, #fff5f0 100%);
}
.room-panorama::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 140deg, transparent, rgba(237,59,50,.16), transparent, rgba(66,182,255,.18), transparent);
  animation: panoramaAura 12s linear infinite;
}
.panorama-copy p { color: #5f6673; }
.panorama-stage {
  min-height: 360px;
  perspective: 1100px;
}
.panorama-track {
  position: absolute;
  inset: 30px 0 70px;
  transform-style: preserve-3d;
  animation: panoramaTilt 6.5s ease-in-out infinite alternate;
}
.panorama-track article {
  position: absolute;
  width: 190px;
  height: 240px;
  border: 1px solid rgba(237,59,50,.18);
  border-radius: 26px;
  padding: 22px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    radial-gradient(circle at 30% 20%, rgba(237,59,50,.22), transparent 44%);
  box-shadow: 0 24px 50px rgba(20,24,31,.12);
}
.panorama-track article:nth-child(1) { left: 2%; top: 36px; transform: rotateY(-24deg) translateZ(30px); }
.panorama-track article:nth-child(2) { left: 27%; top: 0; transform: rotateY(-8deg) translateZ(80px); animation-delay: -.6s; }
.panorama-track article:nth-child(3) { left: 52%; top: 44px; transform: rotateY(12deg) translateZ(50px); animation-delay: -1.2s; }
.panorama-track article:nth-child(4) { left: 72%; top: 10px; transform: rotateY(28deg) translateZ(10px); animation-delay: -1.8s; }
.panorama-track b {
  display: block;
  font-size: 24px;
  color: #161b22;
}
.panorama-track span {
  position: absolute;
  left: 22px;
  bottom: 22px;
  color: var(--brand);
  font-weight: 900;
  letter-spacing: .08em;
}
.panorama-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(66,182,255,.88), #fff, rgba(237,59,50,.75), transparent);
  box-shadow: 0 0 28px rgba(66,182,255,.52);
  animation: panoramaScan 2.2s ease-in-out infinite;
}
.panorama-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(237,59,50,.18), transparent 64%);
  animation: panoramaFloor 3.6s ease-in-out infinite;
}

.reward-city {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 24% 30%, rgba(255,199,87,.32), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(237,59,50,.32), transparent 28%),
    linear-gradient(135deg, #1d1f2f 0%, #311b2d 48%, #101827 100%);
}
.city-map {
  min-height: 390px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 70%);
  background-size: 36px 36px, 36px 36px, auto;
  overflow: hidden;
  animation: cityMapDrift 10s linear infinite;
}
.city-road {
  position: absolute;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffdf8e, var(--brand), transparent);
  box-shadow: 0 0 26px rgba(255,223,142,.55);
  animation: cityRoad 3.4s ease-in-out infinite;
}
.road-a { left: 8%; right: 18%; top: 35%; transform: rotate(8deg); }
.road-b { left: 16%; right: 8%; top: 58%; transform: rotate(-12deg); animation-delay: -.8s; }
.road-c { left: 30%; right: 18%; top: 74%; transform: rotate(18deg); animation-delay: -1.6s; }
.city-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-style: normal;
  font-weight: 900;
  animation: cityPinPulse 2.6s ease-in-out infinite;
}
.pin-a { left: 12%; top: 18%; }
.pin-b { left: 48%; top: 42%; animation-delay: -.6s; }
.pin-c { right: 12%; bottom: 18%; animation-delay: -1.2s; }
.city-bills b {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 46px;
  border-radius: 10px;
  border: 2px solid rgba(39, 130, 73, .42);
  background: linear-gradient(135deg, #eaffdc, #fff);
  color: #16703a;
  font-size: 13px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  animation: cityBillFloat 4s ease-in-out infinite;
}
.city-bills b:nth-child(1) { left: 28%; top: 12%; }
.city-bills b:nth-child(2) { right: 18%; top: 35%; animation-delay: -1s; }
.city-bills b:nth-child(3) { left: 38%; bottom: 18%; animation-delay: -2s; }
.city-copy p { color: rgba(255,255,255,.78); }
.city-counter {
  position: relative;
  margin-top: 22px;
  max-width: 300px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.city-counter span { color: rgba(255,255,255,.7); font-size: 12px; }
.city-counter strong { display: block; margin-top: 6px; font-size: 26px; }
.city-counter em {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #ffdf8e, var(--brand));
  animation: cityGauge 2.2s ease-in-out infinite;
}

@keyframes terminalGridMove { to { background-position: 84px 42px; } }
@keyframes terminalLine { 0%,100% { transform: scaleX(.2); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes terminalCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes terminalTicker { to { transform: translateX(-22px); } }
@keyframes panoramaAura { to { transform: rotate(360deg); } }
@keyframes panoramaTilt { to { transform: rotateX(4deg) rotateY(-9deg) translateY(-8px); } }
@keyframes panoramaScan { 0%,100% { transform: translateY(-96px); opacity:.25; } 50% { transform: translateY(118px); opacity:1; } }
@keyframes panoramaFloor { 0%,100% { transform: scale(.86); opacity:.45; } 50% { transform: scale(1.08); opacity:.9; } }
@keyframes cityMapDrift { to { background-position: 72px 36px, 36px 72px, 0 0; } }
@keyframes cityRoad { 0%,100% { opacity:.35; transform: translateX(-18px) rotate(var(--r,0deg)); } 50% { opacity:1; transform: translateX(18px) rotate(var(--r,0deg)); } }
@keyframes cityPinPulse { 0%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(237,59,50,.26); } 50% { transform: translateY(-10px) scale(1.05); box-shadow: 0 0 0 22px rgba(237,59,50,0); } }
@keyframes cityBillFloat { 0%,100% { transform: translate3d(0,0,0) rotate(-6deg); } 50% { transform: translate3d(18px,-18px,0) rotate(8deg); } }
@keyframes cityGauge { 0% { transform: translateX(-82%); } 100% { transform: translateX(0); } }

@media (max-width: 900px) {
  .benefit-terminal,
  .room-panorama,
  .reward-city {
    grid-template-columns: 1fr;
  }
  .reward-city .city-map { order: 2; }
}


/* ver35: 사이트맵 조직도/개발 체크리스트/관리자 프로토타입 페이지 */
.sitemap-page .page-title,
.dev-check-page .page-title,
.admin-proto-page .page-title {
  max-width: 920px;
}
.sitemap-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.sitemap-summary article {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(20,24,31,.06);
}
.sitemap-summary strong {
  display: block;
  color: var(--brand);
  margin-bottom: 8px;
  font-size: 17px;
}
.sitemap-org-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.sitemap-org-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, #fffafa);
  padding: 22px;
  box-shadow: 0 12px 28px rgba(20,24,31,.06);
}
.sitemap-org-card h2 {
  margin: 0 0 14px;
  color: #151922;
  font-size: 20px;
}
.sitemap-org-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.sitemap-org-card li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
  padding: 12px 12px 12px 18px;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  background: #fff;
}
.sitemap-org-card li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 99px;
  background: var(--brand);
}
.sitemap-org-card li.external::before { background: #42b6ff; }
.sitemap-org-card li.new::before { background: #24b47e; }
.sitemap-org-card li a {
  font-weight: 800;
}
.sitemap-org-card li span,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  background: #fff0ee;
  color: var(--brand);
}
.sitemap-org-card li.external span,
.status-pill.external {
  background: #eaf7ff;
  color: #1371ae;
}
.sitemap-org-card li.new span,
.status-pill.new {
  background: #eafbf3;
  color: #148554;
}
.sitemap-org-card li small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.45;
}
.dev-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.check-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20,24,31,.06);
}
.check-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.check-table th,
.check-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: top;
}
.check-table th {
  background: #f8fafc;
  font-size: 13px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.admin-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(20,24,31,.06);
}
.admin-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
}
.admin-card button {
  margin-top: 12px;
  width: auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 900px) {
  .sitemap-summary,
  .sitemap-org-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }
}


/* ver36: 우측 통합 메뉴 버튼 클릭 영역과 상태 표시를 명확히 보정합니다. */
.unified-menu-button {
  position: relative;
  z-index: 70;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.drawer[aria-hidden="false"] {
  visibility: visible;
}
.drawer.open {
  right: 0;
}
.drawer.left.open {
  left: 0;
  right: auto;
}
.integrated-state-menu[hidden] {
  display: none !important;
}
.integrated-state-menu.active {
  display: grid;
  gap: 2px;
}
body.drawer-opened::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 72;
  background: rgba(15, 23, 42, 0.16);
  pointer-events: none;
}
.drawer.open {
  z-index: 90;
}

/* ver36: 메뉴 옆 로그인 상태칩은 실제 로그인 상태와 같은 텍스트로 갱신됩니다. */
.auth-chip {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.auth-member #auth-chip-text,
body.auth-agent #auth-chip-text {
  color: var(--brand);
}
body.auth-guest #auth-chip-text {
  color: #5f6b7a;
}

/* ver36: My zip/내매물 카드가 한 줄에서 겹치지 않도록 모든 카드 그리드를 minmax 기반으로 통일합니다. */
.flow-grid,
.profile-grid,
.card-grid,
.stat-grid,
.status-grid,
.step-grid,
.listing-api-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  align-items: stretch;
}
.flow-card,
.stat-grid > div,
.status-grid > article,
.step-grid > article,
.listing-api-card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.listing-api-grid {
  display: grid;
  gap: 14px;
  width: 100%;
}
.listing-api-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(20, 24, 31, .06);
}
.listing-api-card strong {
  font-size: 16px;
}
.listing-api-card p {
  margin: 0;
  color: var(--muted);
}
.listing-api-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.listing-api-card em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
}

/* ver36: 지폐가 1개만 보이던 문제를 JS 다중 생성과 CSS 변수 기본값으로 해결합니다. */
.hero-money-stream .tenk-bill {
  --tx: -320px;
  --ty: 60px;
  --floor: 260px;
  --rot: 180deg;
  --scale: .9;
  --bill-w: 92px;
  --bill-h: 48px;
}
.hero-money-stream .tenk-bill,
.hero-money-snow .tenk-bill {
  position: absolute;
  will-change: transform, opacity;
}
.hero-money-stream .tenk-bill::before,
.hero-money-snow .tenk-bill::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(20, 130, 73, .55);
  justify-self: end;
  margin-right: 10px;
}
.hero-money-snow .tenk-bill {
  --snow-w: 82px;
  --snow-h: 43px;
  --snow-font: 15px;
  --delay: 7.4s;
  --drift: 120px;
  --spin: 600deg;
  --snow-scale: .86;
}
.hero-money-snow .tenk-bill b,
.hero-money-stream .tenk-bill b {
  font-size: inherit;
}

/* ver36: 게시판 글쓰기 양식은 토글 시 자연스럽게 표시되고 목록이 항상 먼저 보입니다. */
.board-write-card[hidden] {
  display: none !important;
}
.board-toolbar .small-write-button {
  min-width: 88px;
}
.board-list.is-loading {
  opacity: .72;
}

@media (max-width: 760px) {
  .site-header {
    gap: 8px;
  }
  .auth-chip {
    max-width: 140px;
    font-size: 11px;
  }
  .flow-grid,
  .profile-grid,
  .card-grid,
  .stat-grid,
  .status-grid,
  .step-grid,
  .listing-api-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ver38 밝은 통일 테마: 어두운 배경과 과도한 명암을 제거하고 전체 페이지를 화이트/소프트 톤으로 정리합니다. */
:root {
  --z37-bg: #fbfcff;
  --z37-card: #ffffff;
  --z37-soft: #f6f8fb;
  --z37-ink: #1f2937;
  --z37-muted: #667085;
  --z37-line: #e6ebf2;
  --z37-red: #ed3b32;
  --z37-blue: #3182f6;
  --z37-green: #00a875;
}
html { background: var(--z37-bg); }
body {
  background: var(--z37-bg) !important;
  color: var(--z37-ink);
  font-size: 14px;
  line-height: 1.58;
}
.page-shell, .panel-page, .agent-shell, .board-lounge, .section, .map-layout {
  background: transparent !important;
}
.agent-hero, .agent-filter, .agent-shell, .board-lounge-hero, .community-side .side-card,
.flow-card, .welcome-card, .mini-card, .listing-api-card, .board-write-card, .board-row,
.community-bottom-grid > section, .feed-column, .side-card, .hot-keywords {
  background: #fff !important;
  color: var(--z37-ink) !important;
  border-color: var(--z37-line) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
}
h1, .agent-hero-title, .page-title h1, .hero-title, .pin-step h2, .submit-title,
.opening-boost h2, .board-lounge h1 {
  font-size: clamp(26px, 4vw, 40px) !important;
  line-height: 1.34 !important;
  letter-spacing: -0.035em;
}
h2, .section h2, .community-section-title h2 {
  font-size: clamp(22px, 3vw, 32px) !important;
  line-height: 1.38 !important;
}
p, li, input, select, textarea, button, a {
  font-size: 14px;
}
.site-header {
  background: rgba(255,255,255,.97) !important;
}
.unified-menu-button {
  position: relative;
  z-index: 90;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 10px !important;
  min-width: 62px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
}
.auth-chip {
  position: relative;
  z-index: 50;
  min-width: 96px;
}
.drawer {
  z-index: 140;
}
.drawer-opened::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15,23,42,.18);
}

/* ver38 내정보/My zip 카드 겹침 방지 */
.profile-grid,
.card-grid,
.stat-grid,
.community-feed-grid,
.community-bottom-grid {
  align-items: stretch;
}
.profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
}
.flow-card, .welcome-card, .mini-card {
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.flow-card label, .flow-card input, .flow-card textarea, .flow-card select {
  min-width: 0;
  max-width: 100%;
}
.myzip-dashboard, .myzip-card-list, #myzip-drawer .mini-card {
  display: grid;
  gap: 12px;
}
#myzip-drawer .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ver38 메인 인덱스 2/3/4번 토스 스타일 오프닝 */
.opening-boost.toss-opening {
  min-height: clamp(520px, 74vh, 760px);
  padding: clamp(58px, 8vw, 104px) clamp(22px, 6vw, 90px);
  background:
    radial-gradient(circle at 88% 14%, rgba(49,130,246,.12), transparent 32%),
    radial-gradient(circle at 16% 80%, rgba(237,59,50,.09), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border-top: 1px solid rgba(230,235,242,.92);
  color: var(--z37-ink);
  isolation: isolate;
}
.opening-boost.toss-opening::before {
  background:
    linear-gradient(90deg, transparent, rgba(49,130,246,.10), transparent),
    repeating-linear-gradient(90deg, rgba(148,163,184,.08) 0 1px, transparent 1px 52px);
  animation: z37SoftSweep 7s linear infinite;
}
.opening-boost.toss-opening::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 36px;
  pointer-events: none;
}
.toss-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.toss-copy p:not(.eyebrow) {
  color: #5e6a7d;
  font-size: clamp(14px, 1.25vw, 17px);
}
.opening-link {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 12px;
  background: #111827;
  color: #fff !important;
  font-weight: 900;
}
.flow-stage, .scan-device, .reward-bloom-stage {
  position: relative;
  z-index: 2;
  min-height: 400px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 34px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 26px 80px rgba(49,130,246,.12);
  overflow: hidden;
}
.flow-stage::before,
.scan-device::before,
.reward-bloom-stage::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, rgba(49,130,246,.08), rgba(237,59,50,.08), rgba(0,168,117,.08), rgba(49,130,246,.08));
  animation: z37RotateSlow 14s linear infinite;
}
.flow-line {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffddd9, #cfe4ff, #d9faec);
  transform: translateY(-50%);
  overflow: hidden;
}
.flow-line::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28%;
  height: 100%;
  border-radius: inherit;
  background: #3182f6;
  animation: z37FlowLine 2.7s ease-in-out infinite;
}
.flow-card {
  position: absolute;
  z-index: 2;
  width: min(190px, 34%);
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 18px 38px rgba(15,23,42,.08);
  animation: z37FloatCard 4.2s ease-in-out infinite;
}
.flow-card b, .flow-card strong, .flow-card em { display:block; }
.flow-card strong { margin: 8px 0; font-size: 24px; color: #3182f6; letter-spacing: -.04em; }
.flow-card em { color: #667085; font-style: normal; }
.flow-card.card-a { left: 9%; top: 18%; animation-delay: -.4s; }
.flow-card.card-b { left: 39%; top: 46%; animation-delay: -.9s; }
.flow-card.card-c { right: 8%; top: 20%; animation-delay: -1.3s; }
.flow-orb {
  position: absolute;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(49,130,246,.14);
  animation: z37Orb 5s ease-in-out infinite;
}
.orb-a { left: 8%; bottom: 15%; }
.orb-b { right: 18%; bottom: 20%; animation-delay: -1.8s; background: rgba(237,59,50,.12); }
.orb-c { left: 48%; top: 10%; animation-delay: -.8s; background: rgba(0,168,117,.12); }

.scan-device {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  padding: 28px;
}
.scan-room {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 15px 34px rgba(15,23,42,.06);
  overflow: hidden;
  animation: z37RoomLift 5s ease-in-out infinite;
}
.scan-room::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid rgba(49,130,246,.20);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(49,130,246,.16) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(237,59,50,.12) 49% 51%, transparent 52%);
}
.scan-room span {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-weight: 950;
  color: #111827;
}
.room-a { min-height: 210px; grid-row: span 2; }
.room-b { min-height: 140px; animation-delay: -.9s; }
.room-c { min-height: 140px; animation-delay: -1.6s; }
.scan-light {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(49,130,246,.24), transparent);
  animation: z37ScanLight 2.8s ease-in-out infinite;
}
.scan-dots i {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #3182f6;
  animation: z37DotPulse 2.2s ease-in-out infinite;
}
.scan-dots i:nth-child(1){left:22%;top:28%}.scan-dots i:nth-child(2){left:51%;top:22%;animation-delay:.3s}.scan-dots i:nth-child(3){left:72%;top:48%;animation-delay:.6s}.scan-dots i:nth-child(4){left:38%;top:74%;animation-delay:.9s}.scan-dots i:nth-child(5){left:82%;top:76%;animation-delay:1.2s}

.reward-bloom-stage {
  display: grid;
  place-items: center;
}
.bloom-ring {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(49,130,246,.14);
  animation: z37PulseRing 4s ease-in-out infinite;
}
.ring-a { width: 46%; aspect-ratio: 1; }
.ring-b { width: 68%; aspect-ratio: 1; animation-delay: -1s; border-color: rgba(237,59,50,.13); }
.ring-c { width: 88%; aspect-ratio: 1; animation-delay: -2s; border-color: rgba(0,168,117,.13); }
.bloom-center {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 174px;
  height: 174px;
  border-radius: 48px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(49,130,246,.16);
  border: 1px solid #e6ebf2;
  animation: z37CenterBeat 3s ease-in-out infinite;
}
.bloom-center b { font-size: 30px; color: var(--z37-red); }
.bloom-center strong { font-size: 14px; color: #3182f6; letter-spacing: .1em; }
.bloom-bills i {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg,#fff,#e9fff4);
  border: 1px solid #bdf4d6;
  color: #0c8f55;
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(0,168,117,.12);
  animation: z37BillOrbit 7s linear infinite;
}
.bloom-bills i:nth-child(1){--x:180px;--y:-118px}.bloom-bills i:nth-child(2){--x:-190px;--y:-80px;animation-delay:-1.7s}.bloom-bills i:nth-child(3){--x:160px;--y:130px;animation-delay:-3.4s}.bloom-bills i:nth-child(4){--x:-150px;--y:128px;animation-delay:-5.1s}
.bloom-stat {
  position: absolute;
  z-index: 5;
  right: 8%;
  top: 14%;
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
  animation: z37FloatCard 4s ease-in-out infinite;
}
.bloom-stat.second { left: 9%; right:auto; top:auto; bottom:15%; animation-delay:-1.2s; }
.bloom-stat span, .bloom-stat b { display:block; }
.bloom-stat span { color:#667085; font-size:13px; }
.bloom-stat b { color:#111827; font-size:22px; }

@keyframes z37SoftSweep { from { transform: translateX(-18%);} to { transform: translateX(18%);} }
@keyframes z37RotateSlow { to { transform: rotate(1turn);} }
@keyframes z37FlowLine { 0% { left:-30%; } 55% { left:52%; } 100% { left:100%; } }
@keyframes z37FloatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes z37Orb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-22px) scale(1.18); } }
@keyframes z37RoomLift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes z37ScanLight { 0% { left:-20%; opacity:.2; } 40% { opacity:1; } 100% { left:104%; opacity:.25; } }
@keyframes z37DotPulse { 0%,100% { transform: scale(.7); opacity:.36; } 50% { transform: scale(1.8); opacity:1; } }
@keyframes z37PulseRing { 0%,100% { transform: scale(.94); opacity:.48; } 50% { transform: scale(1.04); opacity:1; } }
@keyframes z37CenterBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes z37BillOrbit { 0% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(var(--x), var(--y)) rotate(9deg); } 100% { transform: translate(0,0) rotate(-8deg); } }

/* ver38 게시판 글쓰기/권한 안내 */
.board-write-card[hidden] { display: none !important; }
.board-write-card:not([hidden]) { display: grid !important; }
.board-policy-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #ffe1dd;
  background: #fff7f6;
  color: #c72720;
  font-weight: 900;
}
.board-toolbar .small-write-button {
  min-height: 34px;
  padding: 0 13px;
}
.parent-needs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--z37-line);
  border-radius: 28px;
  background: linear-gradient(135deg,#fff,#f5f9ff);
}
.parent-needs-cards {
  display: grid;
  gap: 10px;
}
.parent-needs-cards article {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--z37-line);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

/* ver38 매물 비교 위젯 */
.compare-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(360px, calc(100vw - 36px));
  max-height: 62vh;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--z37-line);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 46px rgba(15,23,42,.12);
  transform: translateY(calc(100% - 76px));
  transition: transform .22s ease;
}
.compare-widget.is-active { transform: translateY(0); }
.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.compare-head button {
  width: auto;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--z37-line);
  background: #fff;
  cursor: pointer;
}
.compare-help { margin: 8px 0 12px; color: var(--z37-muted); font-size: 13px; }
.compare-list { display: grid; gap: 10px; }
.compare-list article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--z37-line);
  border-radius: 16px;
  background: #fbfcff;
}
.compare-list dl {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin: 0;
}
.compare-list dt { color: var(--z37-muted); font-size: 12px; }
.compare-list dd { margin: 0; font-weight: 900; font-size: 12px; }
.marker-check {
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--z37-blue);
  font-size: 11px;
  font-weight: 950;
}
.map-marker.selected-for-compare {
  outline: 4px solid rgba(49,130,246,.28);
  box-shadow: 0 0 0 8px rgba(49,130,246,.14), 0 12px 32px rgba(49,130,246,.2) !important;
}
.map-marker.selected-for-compare .marker-check {
  background: var(--z37-blue);
  color: #fff;
}
@media (max-width: 860px) {
  .opening-boost.toss-opening,
  .parent-needs-hero {
    grid-template-columns: 1fr;
  }
  .flow-stage, .scan-device, .reward-bloom-stage { min-height: 340px; }
  .compare-widget { left: 12px; right: 12px; width:auto; }
}



/* ver38 신규 전세·월세 임대현황 페이지 */
.rental-hero-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(49,130,246,.12), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f7fbff 100%);
}
.rental-policy-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.rental-policy-strip article {
  padding: 18px;
  border: 1px solid #e6ebf2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15,23,42,.05);
}
.rental-policy-strip b,
.rental-policy-strip span {
  display: block;
}
.rental-policy-strip b {
  margin-bottom: 8px;
  font-size: 15px;
  color: #111827;
}
.rental-policy-strip span {
  color: #667085;
  font-size: 13px;
  line-height: 1.65;
}
.rental-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: start;
}
.agent-rental-page .rental-dashboard-grid {
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
}
.rental-list-panel,
.rental-form-panel {
  padding: 22px;
  border: 1px solid #e6ebf2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.06);
}
.rental-form-panel {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 96px;
}
.rental-form-panel label {
  display: grid;
  gap: 7px;
  color: #4b5563;
  font-weight: 800;
  font-size: 13px;
}
.rental-form-panel input,
.rental-form-panel select,
.rental-form-panel textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fbfdff;
  font: inherit;
  color: #111827;
}
.rental-card-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.rental-status-card {
  position: relative;
  padding: 18px;
  border: 1px solid #e6ebf2;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 12px 30px rgba(15,23,42,.045);
  overflow: hidden;
}
.rental-status-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #3182f6;
}
.rental-status-card.rental-soon::before,
.rental-status-card.rental-urgent::before {
  background: #ed3b32;
}
.rental-status-card.rental-expired::before {
  background: #111827;
}
.rental-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.rental-status-card h3 {
  margin: 12px 0 8px;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -.03em;
}
.rental-status-card p {
  margin: 0 0 10px;
  color: #5e6a7d;
}
.rental-status-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}
.rental-status-card dl div {
  padding: 10px;
  border-radius: 14px;
  background: #f6f8fb;
}
.rental-status-card dt {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}
.rental-status-card dd {
  margin: 4px 0 0;
  color: #111827;
  font-weight: 900;
}
.rental-confirm,
.rental-memo {
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff7ed;
  color: #9a3412 !important;
  font-size: 13px;
}
.rental-workflow .rental-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.rental-flow div {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #e6ebf2;
  background: #fff;
}
.rental-flow i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #edf5ff;
  color: #3182f6;
  font-style: normal;
  font-weight: 950;
}
.rental-flow b,
.rental-flow span {
  display: block;
}
.rental-flow span {
  margin-top: 6px;
  color: #667085;
  font-size: 13px;
}

/* ver38 메인 인덱스 2·3·4 오프닝: 화이트 기반, 컨테이너 전체영역 애니메이션 */
.bright-opening {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(360px, 1.25fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  min-height: clamp(560px, 78vh, 820px);
  padding: clamp(60px, 8vw, 112px) clamp(24px, 7vw, 104px);
  background: #fff !important;
  color: #111827;
  overflow: hidden;
  isolation: isolate;
}
.bright-opening:nth-of-type(even) {
  grid-template-columns: minmax(360px, 1.2fr) minmax(280px, .8fr);
}
.bright-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 72%) var(--my, 28%), rgba(49,130,246,.14), transparent 30%),
    linear-gradient(110deg, rgba(237,59,50,.045), transparent 35%, rgba(0,168,117,.055));
  animation: v38OpeningAura 8s ease-in-out infinite alternate;
  z-index: -2;
}
.bright-opening::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 36px;
  border: 1px solid rgba(226,232,240,.86);
  background:
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  pointer-events: none;
  animation: v38GridDrift 10s linear infinite;
  z-index: -1;
}
.bright-copy {
  position: relative;
  z-index: 4;
}
.bright-copy h2 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.28;
  letter-spacing: -.045em;
}
.bright-copy p:not(.eyebrow) {
  max-width: 560px;
  color: #5f6b7a;
  font-size: clamp(14px, 1.25vw, 17px);
}
.light-link {
  background: #f2f6ff;
  color: #1d4ed8 !important;
  border: 1px solid #dce8ff;
}
.full-animated-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(360px, 44vw, 540px);
  border-radius: 34px;
  border: 1px solid #e3eaf4;
  background: rgba(255,255,255,.78);
  box-shadow: 0 30px 90px rgba(15,23,42,.09);
  overflow: hidden;
}
.orbit-stage {
  background: linear-gradient(160deg, #ffffff, #f4f8ff);
}
.orbit-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(49,130,246,.09), transparent 32%),
    repeating-conic-gradient(from 45deg, rgba(49,130,246,.08) 0 8deg, transparent 8deg 28deg);
  animation: v38Rotate 18s linear infinite;
}
.orbit-path {
  position: absolute;
  inset: 15%;
  border: 2px dashed rgba(49,130,246,.22);
  border-radius: 50%;
  animation: v38Rotate 16s linear infinite;
}
.path-b {
  inset: 25% 12%;
  border-color: rgba(237,59,50,.20);
  animation-duration: 12s;
  animation-direction: reverse;
}
.path-c {
  inset: 8% 30%;
  border-color: rgba(0,168,117,.20);
  animation-duration: 20s;
}
.orbit-node {
  position: absolute;
  z-index: 3;
  width: 132px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 18px 38px rgba(15,23,42,.08);
  text-align: center;
  animation: v38Float 4.2s ease-in-out infinite;
}
.orbit-node b,
.orbit-node em {
  display: block;
}
.orbit-node em {
  margin-top: 6px;
  color: #3182f6;
  font-style: normal;
  font-weight: 950;
}
.node-home { left: 11%; top: 16%; }
.node-agent { right: 10%; top: 34%; animation-delay: -1s; }
.node-cash { left: 36%; bottom: 12%; animation-delay: -2s; }
.orbit-dot {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #3182f6;
  box-shadow: 0 0 0 12px rgba(49,130,246,.12);
  animation: v38DotTravel 5s ease-in-out infinite;
}
.dot-a { left: 20%; top: 52%; }
.dot-b { right: 18%; top: 18%; animation-delay: -1.4s; background: #ed3b32; }
.dot-c { left: 58%; bottom: 22%; animation-delay: -2.6s; background: #00a875; }
.dot-d { left: 45%; top: 16%; animation-delay: -3.4s; }

.lease-stage {
  background: linear-gradient(160deg, #fff, #f9fbff);
}
.lease-calendar {
  position: absolute;
  left: 10%;
  top: 13%;
  z-index: 4;
  width: min(320px, 44%);
  padding: 26px;
  border: 1px solid #e6ebf2;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 56px rgba(15,23,42,.08);
  animation: v38CalendarPop 5.2s ease-in-out infinite;
}
.lease-calendar span,
.lease-calendar strong,
.lease-calendar em {
  display: block;
}
.lease-calendar strong {
  margin: 12px 0;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -.04em;
  color: #ed3b32;
}
.lease-calendar em {
  color: #667085;
  font-style: normal;
  font-weight: 800;
}
.lease-timeline {
  position: absolute;
  left: 12%;
  right: 10%;
  bottom: 18%;
  height: 12px;
  border-radius: 999px;
  background: #e8f0ff;
  overflow: visible;
}
.lease-timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3182f6, #ed3b32, #00a875);
  transform-origin: left;
  animation: v38TimelineFill 4s ease-in-out infinite;
}
.lease-timeline i {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  border: 7px solid #3182f6;
  animation: v38Pulse 2.4s ease-in-out infinite;
}
.lease-timeline i:nth-child(1) { left: 0%; }
.lease-timeline i:nth-child(2) { left: 33%; animation-delay: -.6s; border-color: #ed3b32; }
.lease-timeline i:nth-child(3) { left: 66%; animation-delay: -1.1s; border-color: #00a875; }
.lease-timeline i:nth-child(4) { left: 100%; animation-delay: -1.6s; border-color: #111827; }
.lease-pulse {
  position: absolute;
  top: -78px;
  padding: 11px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  animation: v38Float 3.8s ease-in-out infinite;
}
.p1 { left: 3%; }
.p2 { left: 46%; animation-delay: -.8s; }
.p3 { right: 2%; animation-delay: -1.5s; }
.lease-message {
  position: absolute;
  z-index: 3;
  padding: 12px 16px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(49,130,246,.12);
  animation: v38MessageSlide 5s ease-in-out infinite;
}
.msg-a { right: 12%; top: 15%; }
.msg-b { right: 8%; top: 36%; animation-delay: -1.3s; background: #fff7ed; color: #c2410c; }
.msg-c { right: 20%; top: 57%; animation-delay: -2.6s; background: #ecfdf5; color: #047857; }

.clean-reward-stage {
  background: linear-gradient(135deg, #fff, #f8fbff);
}
.cash-counter {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(340px, 70%);
  transform: translate(-50%, -50%);
  padding: 32px;
  border-radius: 34px;
  border: 1px solid #e6ebf2;
  background: rgba(255,255,255,.94);
  text-align: center;
  box-shadow: 0 26px 70px rgba(15,23,42,.10);
  animation: v38CounterPulse 3.4s ease-in-out infinite;
}
.cash-counter span,
.cash-counter strong,
.cash-counter em {
  display: block;
}
.cash-counter strong {
  margin: 12px 0;
  color: #111827;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -.06em;
}
.cash-counter em {
  color: #667085;
  font-style: normal;
  font-weight: 900;
}
.reward-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(49,130,246,.22);
  transform: translate(-50%, -50%);
  animation: v38Wave 4s ease-out infinite;
}
.wave-b { animation-delay: -1.2s; border-color: rgba(237,59,50,.20); }
.wave-c { animation-delay: -2.4s; border-color: rgba(0,168,117,.20); }
.reward-chip,
.clean-bill {
  position: absolute;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 40px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
  font-weight: 950;
  animation: v38Float 4s ease-in-out infinite;
}
.reward-chip.c1 { left: 8%; top: 20%; }
.reward-chip.c2 { right: 12%; top: 18%; animation-delay: -.9s; }
.reward-chip.c3 { left: 15%; bottom: 18%; animation-delay: -1.8s; }
.reward-chip.c4 { right: 14%; bottom: 18%; animation-delay: -2.7s; }
.clean-bill {
  background: linear-gradient(135deg, #fffdf3, #fff2bf);
  color: #9a6b00;
  border-color: #ffe59a;
  animation-name: v38BillFly;
}
.b1 { left: 22%; top: 7%; }
.b2 { right: 25%; top: 8%; animation-delay: -1.1s; }
.b3 { left: 24%; bottom: 8%; animation-delay: -2s; }
.b4 { right: 22%; bottom: 7%; animation-delay: -3s; }

@keyframes v38OpeningAura {
  0% { --mx: 80%; --my: 18%; filter: saturate(1); }
  100% { --mx: 18%; --my: 78%; filter: saturate(1.25); }
}
@keyframes v38GridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 116px 0, 0 116px; }
}
@keyframes v38Rotate { to { transform: rotate(360deg); } }
@keyframes v38Float {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.025); }
}
@keyframes v38DotTravel {
  0%,100% { transform: translate(0,0) scale(.8); opacity: .55; }
  45% { transform: translate(42px,-34px) scale(1.15); opacity: 1; }
  70% { transform: translate(-24px,28px) scale(1); opacity: .8; }
}
@keyframes v38CalendarPop {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}
@keyframes v38TimelineFill {
  0% { transform: scaleX(.08); }
  50% { transform: scaleX(.72); }
  100% { transform: scaleX(1); }
}
@keyframes v38Pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(49,130,246,.18); }
  50% { box-shadow: 0 0 0 18px rgba(49,130,246,0); }
}
@keyframes v38MessageSlide {
  0%,100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(-22px); opacity: 1; }
}
@keyframes v38CounterPulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes v38Wave {
  0% { transform: translate(-50%, -50%) scale(.45); opacity: .48; }
  100% { transform: translate(-50%, -50%) scale(3.3); opacity: 0; }
}
@keyframes v38BillFly {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-24px) rotate(7deg); }
}

@media (max-width: 900px) {
  .bright-opening,
  .bright-opening:nth-of-type(even),
  .rental-dashboard-grid,
  .agent-rental-page .rental-dashboard-grid,
  .rental-policy-strip,
  .rental-workflow .rental-flow {
    grid-template-columns: 1fr;
  }
  .rental-form-panel {
    position: static;
  }
  .rental-status-card dl {
    grid-template-columns: 1fr;
  }
}




/* ver39: 우측 메뉴/로그인 칩/내정보 카드/게시판 글쓰기 오류 보정 */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  border: 0;
  background: rgba(15, 23, 42, 0.14);
  cursor: pointer;
}
.drawer-backdrop.open { display: block; }
.drawer { z-index: 90; pointer-events: auto; }
.drawer-head .icon-button,
[data-drawer-close] {
  position: relative;
  z-index: 95;
  cursor: pointer;
}
.auth-chip { gap: 5px; align-items: center; }
.auth-chip span { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.auth-inline-link {
  color: var(--brand);
  font-weight: 950;
  text-decoration: none;
}
.auth-inline-button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0;
  cursor: pointer;
}
.auth-inline-button:hover,
.auth-inline-link:hover { text-decoration: underline; }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.profile-grid .flow-card {
  min-width: 0;
  height: auto;
  align-self: stretch;
  display: grid;
  gap: 14px;
  align-content: start;
}
.profile-grid .flow-card label,
.profile-grid .flow-card input {
  min-width: 0;
}
.profile-grid .flow-card a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 900;
  color: #283241;
}
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.board-write-card {
  transition: opacity .22s ease, transform .22s ease, max-height .28s ease;
}
.board-write-card.is-collapsed {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
}
.board-write-card.is-open {
  opacity: 1;
  transform: translateY(0);
  max-height: 1200px;
}
.small-write-button {
  min-width: 84px;
  cursor: pointer;
}

/* ver39: 메인 인덱스 2~6번 오프닝 - 밝은 해외형 모션 레퍼런스 기반의 자체 구현 */
.opening-boost.bright-opening {
  min-height: clamp(560px, 78vh, 860px);
  padding: clamp(60px, 9vw, 112px) min(6vw, 72px);
  background: #fff;
  overflow: hidden;
}
.simple-motion-stage {
  position: relative;
  min-height: clamp(360px, 44vw, 560px);
  border: 1px solid rgba(228, 232, 238, .95);
  border-radius: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(circle at 20% 20%, rgba(237, 59, 50, .08), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(66, 182, 255, .12), transparent 34%),
    linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: 0 30px 80px rgba(30, 41, 59, .08);
  isolation: isolate;
  overflow: hidden;
}
.simple-motion-stage::before {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(237, 59, 50, .07) 48% 52%, transparent 56% 100%),
    linear-gradient(0deg, transparent 0 44%, rgba(66, 182, 255, .06) 48% 52%, transparent 56% 100%);
  background-size: 90px 90px;
  animation: stageGridFloat 14s linear infinite;
  opacity: .75;
  z-index: -1;
}
.bright-copy h2 {
  font-size: clamp(28px, 4.3vw, 40px);
  line-height: 1.38;
  letter-spacing: -0.045em;
}
.bright-copy p {
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.75;
}

/* 02: 키네틱 카드 플로우 */
.kinetic-stage {
  display: grid;
  place-items: center;
}
.soft-ring {
  position: absolute;
  width: 72%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(237,59,50,.18);
  border-radius: 999px;
  animation: softRingPulse 5.6s ease-in-out infinite;
}
.ring-b {
  width: 48%;
  border-color: rgba(66,182,255,.22);
  animation-delay: -2.2s;
}
.flow-lane {
  position: absolute;
  width: 80%;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(237,59,50,.15), transparent);
  filter: blur(.3px);
  animation: flowLane 3.8s ease-in-out infinite;
}
.lane-b {
  transform: rotate(-17deg);
  background: linear-gradient(90deg, transparent, rgba(66,182,255,.18), transparent);
  animation-delay: -1.4s;
}
.kinetic-card {
  position: absolute;
  display: grid;
  gap: 8px;
  min-width: 152px;
  padding: 18px 20px;
  border: 1px solid #e9eef5;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 48px rgba(30,41,59,.1);
  animation: kineticFloat 5s cubic-bezier(.2,.8,.2,1) infinite;
}
.kinetic-card b { font-size: 16px; color: #1f2937; }
.kinetic-card em { font-style: normal; color: var(--brand); font-weight: 900; }
.kc-a { left: 8%; top: 18%; }
.kc-b { right: 8%; top: 30%; animation-delay: -1.4s; }
.kc-c { left: 34%; bottom: 16%; animation-delay: -2.4s; }
.motion-dot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 10px rgba(237,59,50,.08);
  animation: dotTravel 4.8s ease-in-out infinite;
}
.md-a { left: 18%; top: 55%; }
.md-b { right: 20%; top: 18%; animation-delay: -1.3s; background: var(--blue); box-shadow: 0 0 0 10px rgba(66,182,255,.1); }
.md-c { right: 38%; bottom: 20%; animation-delay: -2.4s; }
.md-d { left: 46%; top: 22%; animation-delay: -3.2s; background: #24b47e; box-shadow: 0 0 0 10px rgba(36,180,126,.1); }

/* 03: 3D View 룸스캔 */
.room-stage { display: grid; place-items: center; }
.room-frame {
  position: relative;
  width: min(78%, 520px);
  aspect-ratio: 1.25/1;
  transform: perspective(900px) rotateX(58deg) rotateZ(-36deg);
  transform-style: preserve-3d;
  border: 2px solid rgba(31,41,55,.1);
  border-radius: 34px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 40px 90px rgba(30,41,59,.1);
  animation: roomHover 6s ease-in-out infinite;
}
.room-wall {
  position: absolute;
  border: 2px solid rgba(237,59,50,.2);
  border-radius: 20px;
  background: rgba(255,255,255,.42);
}
.wall-a { inset: 10% 50% 14% 10%; }
.wall-b { inset: 10% 12% 48% 52%; }
.wall-c { inset: 55% 12% 14% 52%; }
.scan-line {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(237,59,50,.8), transparent);
  box-shadow: 0 0 28px rgba(237,59,50,.28);
  animation: roomScan 3.2s ease-in-out infinite;
}
.scan-b { animation-delay: -1.6s; background: linear-gradient(90deg, transparent, rgba(66,182,255,.9), transparent); }
.room-pin {
  position: absolute;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30,41,59,.12);
  color: #1f2937;
  font-size: 13px;
  animation: roomPin 4s ease-in-out infinite;
}
.rp-a { left: 14%; top: 16%; }
.rp-b { right: 16%; top: 18%; animation-delay: -1s; }
.rp-c { right: 18%; bottom: 18%; animation-delay: -2s; }
.room-caption-card {
  position: absolute;
  right: 8%;
  bottom: 9%;
  padding: 20px 24px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 56px rgba(30,41,59,.12);
  color: var(--brand);
  font-weight: 900;
  animation: captionFloat 5s ease-in-out infinite;
}

/* 04: 타이포/리워드 */
.type-stage {
  display: grid;
  place-items: center;
}
.type-marquee {
  position: absolute;
  left: -15%;
  width: 130%;
  padding: 12px 0;
  color: rgba(31,41,55,.1);
  font-size: clamp(30px, 6vw, 78px);
  font-weight: 950;
  white-space: nowrap;
  letter-spacing: -0.05em;
  animation: typeSlide 12s linear infinite;
}
.line-1 { top: 18%; }
.line-2 { bottom: 18%; animation-direction: reverse; color: rgba(237,59,50,.12); }
.type-center-card {
  display: grid;
  gap: 8px;
  place-items: center;
  width: min(70%, 360px);
  padding: 32px 28px;
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 30px 70px rgba(30,41,59,.13);
  animation: rewardPop 3.8s ease-in-out infinite;
}
.type-center-card span { color: var(--muted); font-weight: 900; }
.type-center-card strong { font-size: clamp(30px, 5vw, 56px); color: var(--brand); letter-spacing: -0.05em; }
.type-center-card em { font-style: normal; color: #24b47e; font-weight: 900; }
.type-confetti {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 7px;
  background: var(--brand);
  animation: confettiDrift 5s ease-in-out infinite;
}
.t1{left:20%;top:20%}.t2{right:22%;top:24%;background:var(--blue);animation-delay:-1s}.t3{left:22%;bottom:19%;background:#24b47e;animation-delay:-2s}.t4{right:16%;bottom:22%;animation-delay:-3s}

/* 05: 임대 만기 버블 */
.lease-bubble-stage { display: grid; place-items: center; }
.bubble-path {
  position: absolute;
  width: 72%;
  height: 44%;
  border: 2px dashed rgba(237,59,50,.25);
  border-radius: 999px;
  animation: bubblePath 7s linear infinite;
}
.bubble-card {
  position: absolute;
  padding: 18px 22px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(30,41,59,.1);
  border: 1px solid #eef1f5;
  display: grid;
  gap: 6px;
  animation: bubbleCard 5s ease-in-out infinite;
}
.bubble-card b { font-size: 16px; color: #1f2937; }
.bubble-card em { font-style: normal; color: var(--brand); font-weight: 900; }
.bc-a { left: 12%; top: 18%; }
.bc-b { right: 12%; top: 25%; animation-delay: -1.3s; }
.bc-c { left: 34%; bottom: 18%; animation-delay: -2.4s; }
.notice-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: #fff5f4;
  color: var(--brand);
  font-weight: 950;
  box-shadow: 0 18px 40px rgba(237,59,50,.12);
  animation: noticeBubble 4.4s ease-in-out infinite;
}
.nb-a{left:30%;top:16%}.nb-b{right:30%;bottom:18%;animation-delay:-1.5s}.nb-c{right:16%;top:55%;animation-delay:-2.6s}

/* 06: 커뮤니티 라이트 */
.community-stage { display: grid; place-items: center; }
.community-orbit {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(66,182,255,.25);
  box-shadow: inset 0 0 0 36px rgba(66,182,255,.04);
  animation: communitySpin 12s linear infinite;
}
.community-chip {
  position: absolute;
  padding: 14px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #edf1f6;
  box-shadow: 0 18px 42px rgba(30,41,59,.1);
  font-weight: 950;
  animation: communityChip 4.8s ease-in-out infinite;
}
.cc-a{left:12%;top:20%;color:var(--brand)}
.cc-b{right:14%;top:23%;color:#24b47e;animation-delay:-1s}
.cc-c{left:16%;bottom:24%;color:#2563eb;animation-delay:-2s}
.cc-d{right:18%;bottom:20%;color:#7c3aed;animation-delay:-3s}
.community-heart {
  position: absolute;
  font-size: 30px;
  color: rgba(237,59,50,.3);
  animation: heartFloat 5s ease-in-out infinite;
}
.h1{top:18%;left:46%}.h2{bottom:18%;left:48%;animation-delay:-1.6s}.h3{top:48%;right:20%;animation-delay:-2.6s}

@keyframes stageGridFloat { to { transform: translate3d(90px, 90px, 0) rotate(.001deg); } }
@keyframes softRingPulse { 0%,100% { transform: scale(.9); opacity:.45 } 50% { transform: scale(1.06); opacity:.9 } }
@keyframes flowLane { 0%,100% { transform: translateX(-6%) rotate(11deg); opacity:.45 } 50% { transform: translateX(6%) rotate(11deg); opacity:1 } }
@keyframes kineticFloat { 0%,100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-18px) rotate(1deg) } }
@keyframes dotTravel { 0%,100% { transform: translate(0,0) scale(.85) } 50% { transform: translate(34px,-22px) scale(1.25) } }
@keyframes roomHover { 0%,100% { transform: perspective(900px) rotateX(58deg) rotateZ(-36deg) translateY(0) } 50% { transform: perspective(900px) rotateX(60deg) rotateZ(-33deg) translateY(-12px) } }
@keyframes roomScan { 0% { top: 10%; opacity: 0 } 15%,85% { opacity: 1 } 100% { top: 86%; opacity: 0 } }
@keyframes roomPin { 0%,100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-10px) scale(1.04) } }
@keyframes captionFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes typeSlide { to { transform: translateX(-28%); } }
@keyframes rewardPop { 0%,100% { transform: scale(.98) } 50% { transform: scale(1.04) } }
@keyframes confettiDrift { 0%,100% { transform: translate(0,0) rotate(0deg) } 50% { transform: translate(24px,-32px) rotate(170deg) } }
@keyframes bubblePath { to { transform: rotate(360deg); } }
@keyframes bubbleCard { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes noticeBubble { 0%,100% { transform: translateY(0) scale(.92) } 50% { transform: translateY(-20px) scale(1.05) } }
@keyframes communitySpin { to { transform: rotate(360deg); } }
@keyframes communityChip { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes heartFloat { 0%,100% { transform: translateY(0) rotate(-8deg); opacity:.5 } 50% { transform: translateY(-28px) rotate(8deg); opacity:1 } }

@media (max-width: 880px) {
  .opening-boost.bright-opening { grid-template-columns: 1fr; }
  .simple-motion-stage { min-height: 360px; }
  .kinetic-card { min-width: 130px; padding: 14px 16px; }
}



/* ver39: 사이트맵 조직도/페이지 연결현황 */
.sitemap-org-page {
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.org-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}
.org-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.done, .org-node.done::before { background: #24b47e; }
.status-dot.live, .org-node.live::before { background: #42b6ff; }
.status-dot.new, .org-node.new::before { background: var(--brand); }
.status-dot.guard, .org-node.guard::after { background: #f59e0b; }
.org-root-card {
  display: grid;
  place-items: center;
  gap: 5px;
  width: min(520px, 100%);
  margin: 0 auto 30px;
  padding: 24px;
  border: 1px solid #edf1f6;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(30,41,59,.08);
}
.org-root-card strong {
  font-size: clamp(24px, 3.8vw, 34px);
  color: var(--brand);
  letter-spacing: -0.04em;
}
.org-root-card span {
  color: var(--muted);
  font-weight: 900;
}
.org-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.org-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 1px;
  height: 30px;
  background: #dbe4ef;
}
.org-branch {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 20px;
  border: 1px solid #e7ecf3;
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px rgba(30,41,59,.06);
}
.org-branch::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 1px;
  height: 18px;
  background: #dbe4ef;
}
.org-branch h2 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.org-node {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 34px 10px 34px;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  background: #fff;
  color: #253042;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.org-node:hover {
  transform: translateY(-2px);
  border-color: rgba(237,59,50,.3);
  box-shadow: 0 12px 30px rgba(30,41,59,.08);
}
.org-node::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.org-node.guard::after {
  content: "권한";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.connection-board {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #e7ecf3;
  border-radius: 28px;
  background: #fff;
}
.connection-board h2 {
  margin-top: 0;
  font-size: clamp(24px, 3.6vw, 34px);
}
.connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.connection-grid article {
  padding: 18px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #edf1f6;
}
.connection-grid strong {
  color: var(--brand);
}
.connection-grid p {
  color: var(--muted);
  line-height: 1.65;
}
@media (max-width: 1024px) {
  .org-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .org-tree, .connection-grid { grid-template-columns: 1fr; }
}


/* ver40: 사이트맵 조직도 — 사용자가 제공한 조직도 이미지처럼 중앙 루트에서 가지가 내려가는 구조 */
.center-title { text-align:center; max-width: 980px; margin-inline:auto; }
.orgchart-page { overflow-x: auto; }
.orgchart-legend { justify-content: center; }
.orgchart-diagram {
  position: relative;
  min-width: 1080px;
  padding: 34px 20px 46px;
  border: 1px solid #eef1f5;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 2%, rgba(237,59,50,.08), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.org-level {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 52px;
  margin: 0 auto 48px;
}
.org-root-level::after {
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:2px;
  height:48px;
  background:#222;
}
.org-top-level::before,
.org-mid-level::before,
.org-bottom-level::before {
  content:"";
  position:absolute;
  top:-24px;
  left:9%;
  right:9%;
  height:2px;
  background:#222;
}
.org-top-level::after,
.org-mid-level::after {
  content:"";
  position:absolute;
  left:50%;
  top:-48px;
  width:2px;
  height:48px;
  background:#222;
}
.org-group {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  min-width: 250px;
}
.org-group::before {
  content:"";
  position:absolute;
  top:-24px;
  left:50%;
  width:2px;
  height:24px;
  background:#222;
}
.org-children {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding-top: 18px;
}
.org-children::before {
  content:"";
  position:absolute;
  top:0;
  bottom: 12px;
  left:50%;
  width:2px;
  background:#222;
  opacity:.78;
}
.org-children.compact {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  align-items:start;
}
.org-children.compact::before { display:none; }
.wide-group { min-width: 760px; }
.org-box {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:54px;
  min-width:150px;
  padding:12px 18px;
  border:2px solid rgba(20,24,31,.82);
  border-radius:8px;
  color:#223;
  background:#fff36b;
  box-shadow: 0 7px 0 rgba(20,24,31,.10);
  text-align:center;
  font-weight:800;
}
.org-box strong { font-size:15px; }
.org-box span { margin-top:3px; font-size:12px; color:#4d5668; font-weight:700; }
.root-box {
  min-width:190px;
  min-height:74px;
  background:#b985ff;
}
.top-box.guest { background:#ff8b3d; }
.top-box.member { background:#ff8b3d; }
.top-box.agent { background:#ff8b3d; }
.section-box { background:#43f766; }
.leaf { min-width:142px; min-height:46px; background:#ffff62; font-size:13px; }
.leaf.live { background:#a6edff; }
.leaf.new { background:#8fd9ff; }
.leaf.guard::after {
  content:"권한";
  position:absolute;
  top:-9px; right:-9px;
  padding:3px 6px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:10px;
}
.orgchart-status-board { margin-top: 28px; }

/* ver40: 메인 인덱스 오프닝 2번 이후 완전 교체 — 각 컨테이너 전체 영역에서 다른 방식으로 움직입니다. */
.opening-v40 {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(420px, 1.14fr);
  gap: clamp(30px, 6vw, 74px);
  align-items: center;
  min-height: clamp(520px, 72vh, 760px);
  margin: 0;
  padding: clamp(58px, 8vw, 92px) clamp(24px, 7vw, 88px);
  background:#fff;
  isolation:isolate;
}
.opening-v40:nth-of-type(odd) {
  grid-template-columns: minmax(420px, 1.14fr) minmax(280px, .86fr);
}
.v40-bg-blob {
  position:absolute;
  width:36vw;
  height:36vw;
  border-radius:38% 62% 51% 49%;
  filter: blur(2px);
  opacity:.12;
  background:#ed3b32;
  animation: v40Blob 12s ease-in-out infinite alternate;
}
.v40-bg-blob.b1 { left:-10vw; top:-8vw; }
.v40-bg-blob.b2 { right:-12vw; bottom:-12vw; background:#24b47e; animation-delay:-3s; }
.v40-copy { position:relative; z-index:2; max-width:530px; }
.v40-copy h2 { margin:10px 0 14px; font-size: clamp(28px, 4.2vw, 40px); line-height:1.24; letter-spacing:-.04em; }
.v40-copy p:not(.eyebrow) { font-size:15px; line-height:1.75; color:#5f6674; }
.v40-motion {
  position:relative;
  z-index:1;
  min-height:410px;
  border:1px solid #edf0f5;
  border-radius:36px;
  background:linear-gradient(135deg, #ffffff, #f9fbff);
  box-shadow: 0 32px 80px rgba(20,24,31,.10);
}

/* 02: wave flow */
.benefit-wave { overflow:hidden; }
.benefit-wave svg { position:absolute; inset:20px; width:calc(100% - 40px); height:calc(100% - 40px); }
.wave-line { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:16 22; animation: v40Dash 7s linear infinite; }
.wl1 { stroke:#ed3b32; }
.wl2 { stroke:#24b47e; animation-duration:9s; }
.wl3 { stroke:#42b6ff; animation-direction:reverse; }
.wave-card {
  position:absolute; z-index:2; display:grid; gap:6px;
  width:158px; padding:16px;
  border:1px solid #e7ecf3; border-radius:22px; background:#fff;
  box-shadow:0 18px 44px rgba(20,24,31,.11);
  animation: v40Float 5.6s ease-in-out infinite;
}
.wave-card b { font-size:16px; }
.wave-card span { color:#ed3b32; font-weight:900; }
.wc1 { left:7%; top:15%; }
.wc2 { left:39%; top:54%; animation-delay:-1.5s; }
.wc3 { right:7%; top:20%; animation-delay:-2.8s; }
.wave-particle { position:absolute; width:14px; height:14px; border-radius:50%; background:#ed3b32; animation:v40Particle 6s ease-in-out infinite; }
.p1{left:20%;top:72%;}.p2{left:50%;top:17%;animation-delay:-1.2s;background:#42b6ff}.p3{left:74%;top:66%;animation-delay:-2.4s;background:#24b47e}.p4{left:12%;top:38%;animation-delay:-3.3s;background:#ffbf28}

/* 03: scan lab */
.scan-lab { overflow:hidden; perspective:1000px; background:linear-gradient(180deg,#fff,#f4fbff); }
.scan-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(66,182,255,.13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(66,182,255,.13) 1px, transparent 1px);
  background-size:34px 34px;
  animation:v40Grid 14s linear infinite;
}
.scan-room {
  position:absolute; left:50%; top:52%; width:280px; height:220px;
  transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-35deg);
  transform-style:preserve-3d;
  animation:v40Room 7s ease-in-out infinite;
}
.room-side { position:absolute; border:2px solid #42b6ff; background:rgba(66,182,255,.08); }
.room-side.floor { inset:24px; border-radius:20px; }
.room-side.left { left:24px; top:24px; width:34px; height:170px; transform:skewY(35deg); }
.room-side.right { right:24px; top:24px; width:170px; height:34px; transform:skewX(35deg); }
.scan-beam { position:absolute; left:0; right:0; height:4px; border-radius:999px; background:#ed3b32; box-shadow:0 0 22px rgba(237,59,50,.45); animation:v40Scan 3.2s ease-in-out infinite; }
.beam-b { animation-delay:-1.6s; background:#24b47e; }
.scan-tag { position:absolute; padding:7px 10px; border-radius:999px; background:#fff; box-shadow:0 9px 20px rgba(20,24,31,.12); font-size:12px; }
.tag-a{left:18px;top:20px}.tag-b{right:28px;top:68px}.tag-c{left:92px;bottom:16px}
.scan-panel { position:absolute; right:28px; bottom:28px; display:grid; gap:4px; padding:18px 20px; border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.scan-panel strong { font-size:22px; color:#ed3b32; }

/* 04: typography */
.type-motion { overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%, #fff1f0, #fff 62%); }
.type-ribbon {
  position:absolute; left:-8%; right:-8%; height:58px; display:flex; align-items:center;
  white-space:nowrap; font-weight:1000; font-size:24px; letter-spacing:.02em; color:#ed3b32;
  border-block:1px solid rgba(237,59,50,.18);
  animation:v40Marquee 11s linear infinite;
}
.r1 { top:72px; transform:rotate(-5deg); }
.r2 { bottom:74px; color:#151d2c; animation-direction:reverse; animation-duration:13s; transform:rotate(4deg); }
.type-score { position:relative; z-index:2; display:grid; place-items:center; width:240px; height:240px; border-radius:50%; background:#fff; border:1px solid #eef1f5; box-shadow:0 28px 80px rgba(237,59,50,.16); animation:v40Pulse 2.8s ease-in-out infinite; }
.type-score span{font-size:14px;color:#697386}.type-score strong{font-size:48px;color:#ed3b32;letter-spacing:-.07em}.type-score em{font-style:normal;font-weight:900}
.type-shape { position:absolute; width:34px; height:34px; border-radius:12px; background:#ffbf28; animation:v40Shape 6s ease-in-out infinite; }
.s1{left:18%;top:20%}.s2{right:17%;top:24%;background:#42b6ff;animation-delay:-1s}.s3{left:22%;bottom:22%;background:#24b47e;animation-delay:-2s}.s4{right:24%;bottom:18%;background:#ed3b32;animation-delay:-3s}

/* 05: lease timeline */
.lease-timeline { overflow:hidden; background:linear-gradient(135deg,#fff,#fffdf5); }
.timeline-track { position:absolute; left:10%; right:10%; top:50%; height:8px; border-radius:999px; background:linear-gradient(90deg,#ed3b32,#ffbf28,#24b47e,#42b6ff); animation:v40Track 3.4s ease-in-out infinite; }
.lease-node { position:absolute; width:150px; padding:16px; border-radius:24px; background:#fff; border:1px solid #edf0f5; box-shadow:0 18px 48px rgba(20,24,31,.10); animation:v40Float 5s ease-in-out infinite; }
.lease-node b { display:block; font-size:16px; }.lease-node span { color:#6b7280; font-size:13px; }
.ln1{left:6%;top:20%}.ln2{left:32%;bottom:15%;animation-delay:-1s}.ln3{right:30%;top:18%;animation-delay:-2s}.ln4{right:6%;bottom:18%;animation-delay:-3s}
.timeline-dot { position:absolute; top:calc(50% - 10px); width:20px; height:20px; border-radius:50%; background:#fff; border:5px solid #ed3b32; animation:v40Dot 4s linear infinite; }
.td1{left:22%}.td2{left:50%;animation-delay:-1.2s}.td3{right:22%;animation-delay:-2.4s}

/* 06: community map */
.community-map-motion { overflow:hidden; background:linear-gradient(180deg,#fff,#f7fff9); }
.mini-map-grid { position:absolute; inset:30px; border-radius:30px; background:linear-gradient(90deg,rgba(36,180,126,.12) 1px,transparent 1px),linear-gradient(0deg,rgba(36,180,126,.12) 1px,transparent 1px); background-size:44px 44px; animation:v40Grid 16s linear infinite reverse; }
.map-bubble { position:absolute; z-index:2; border:0; border-radius:999px; padding:14px 18px; background:#fff; box-shadow:0 14px 38px rgba(20,24,31,.12); font-weight:1000; animation:v40Bubble 6s ease-in-out infinite; }
.mb1{left:14%;top:18%;color:#ed3b32}.mb2{right:16%;top:22%;animation-delay:-1s}.mb3{left:24%;bottom:18%;animation-delay:-2s}.mb4{right:22%;bottom:20%;animation-delay:-3s}.mb5{left:49%;top:48%;animation-delay:-4s;color:#24b47e}
.map-route { position:absolute; height:3px; width:36%; background:linear-gradient(90deg,transparent,#ed3b32,transparent); border-radius:999px; animation:v40Route 4s ease-in-out infinite; }
.route-a{left:20%;top:42%;transform:rotate(17deg)}.route-b{right:18%;bottom:38%;transform:rotate(-23deg);animation-delay:-2s;background:linear-gradient(90deg,transparent,#42b6ff,transparent)}

@keyframes v40Blob { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(40px,25px,0) scale(1.14) rotate(18deg)} }
@keyframes v40Dash { to { stroke-dashoffset:-360; } }
@keyframes v40Float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes v40Particle { 0%,100%{transform:translate(0,0) scale(.8); opacity:.45} 50%{transform:translate(65px,-44px) scale(1.4); opacity:1} }
@keyframes v40Grid { to { background-position:88px 88px; } }
@keyframes v40Room { 0%,100%{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-35deg)} 50%{transform:translate(-50%,-54%) rotateX(62deg) rotateZ(-25deg)} }
@keyframes v40Scan { 0%,100%{top:25%;opacity:.2} 50%{top:72%;opacity:1} }
@keyframes v40Marquee { from{transform:translateX(0) rotate(var(--r, 0deg))} to{transform:translateX(-38%) rotate(var(--r, 0deg))} }
@keyframes v40Pulse { 0%,100%{transform:scale(1); box-shadow:0 28px 80px rgba(237,59,50,.16)} 50%{transform:scale(1.06); box-shadow:0 38px 100px rgba(237,59,50,.28)} }
@keyframes v40Shape { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(20px,-28px) rotate(90deg)} }
@keyframes v40Track { 0%,100%{filter:saturate(1); transform:scaleX(.96)} 50%{filter:saturate(1.4); transform:scaleX(1.04)} }
@keyframes v40Dot { 0%,100%{transform:translateY(0); border-color:#ed3b32} 50%{transform:translateY(-18px); border-color:#24b47e} }
@keyframes v40Bubble { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.04)} }
@keyframes v40Route { 0%,100%{opacity:.2; transform:scaleX(.75) rotate(var(--rot,0deg))} 50%{opacity:1; transform:scaleX(1.05) rotate(var(--rot,0deg))} }

/* ver40: 우리동네지도 지도형 인터페이스 */
.parents-v40-hero {
  background: linear-gradient(135deg,#fff,#f7fbff);
}
.parent-need-summary { display:grid; gap:14px; }
.parent-need-summary article {
  padding:18px;
  border:1px solid #edf0f5;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 36px rgba(20,24,31,.08);
}
.parent-need-summary b { display:block; font-size:17px; margin-bottom:6px; }
.parent-need-summary span { color:#657084; font-size:14px; }
.parents-map-layout {
  display:grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap:22px;
  margin:28px 0;
}
.parents-needs-map {
  position:relative;
  min-height:520px;
  border:1px solid #e8eef6;
  border-radius:34px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 70px rgba(20,24,31,.08);
}
.parents-map-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(66,182,255,.18), transparent 20%),
    radial-gradient(circle at 82% 28%, rgba(36,180,126,.16), transparent 18%),
    radial-gradient(circle at 50% 78%, rgba(237,59,50,.12), transparent 22%),
    #fbfdff;
}
.road { position:absolute; background:#dbe5f1; border-radius:999px; }
.road-a { left:-8%; right:-8%; top:48%; height:24px; transform:rotate(16deg); }
.road-b { top:-6%; bottom:-4%; left:48%; width:22px; transform:rotate(-8deg); }
.road-c { left:8%; right:8%; bottom:24%; height:18px; transform:rotate(-11deg); }
.zone {
  position:absolute;
  display:grid;
  place-items:center;
  padding:12px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e6edf5;
  box-shadow:0 14px 34px rgba(20,24,31,.10);
  font-weight:900;
}
.school-zone { left:12%; top:12%; color:#ed3b32; }
.academy-zone { right:12%; top:18%; color:#176fa3; }
.park-zone { left:16%; bottom:16%; color:#24b47e; }
.hospital-zone { right:13%; bottom:20%; color:#7c3aed; }
.apt-zone { left:42%; top:42%; color:#111827; transform:scale(1.12); }
.need-pin {
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:58px; height:58px;
  border:0;
  border-radius:20px 20px 20px 6px;
  background:#ed3b32;
  color:#fff;
  font-weight:1000;
  box-shadow:0 18px 36px rgba(237,59,50,.24);
  transform:rotate(-45deg);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.need-pin::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.55); border-radius:15px 15px 15px 4px; }
.need-pin:hover,
.need-pin.active { transform:rotate(-45deg) translateY(-7px) scale(1.08); box-shadow:0 24px 50px rgba(237,59,50,.33); }
.need-pin { font-size:13px; }
.need-pin { color:transparent; }
.need-pin::before { content:attr(data-need); color:#fff; font-size:11px; width:44px; text-align:center; transform:rotate(45deg); line-height:1.1; z-index:2; }
.pin-school{left:23%;top:28%}.pin-academy{right:25%;top:34%;background:#42b6ff;box-shadow:0 18px 36px rgba(66,182,255,.25)}.pin-park{left:29%;bottom:25%;background:#24b47e}.pin-hospital{right:24%;bottom:28%;background:#7c3aed}.pin-noise{left:47%;top:18%;background:#ffbf28}.pin-community{left:52%;bottom:17%;background:#111827}
.parents-map-detail {
  position:absolute;
  left:26px; right:26px; bottom:26px;
  display:grid; gap:6px;
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid #e8eef6;
  box-shadow:0 18px 44px rgba(20,24,31,.10);
}
.parents-map-detail strong { font-size:19px; }
.parents-map-detail span { color:#566174; }
.parents-map-detail em { color:#ed3b32; font-style:normal; font-weight:900; }
.parents-checklist-panel {
  align-self:stretch;
  padding:24px;
  border:1px solid #eef1f5;
  border-radius:30px;
  background:#fff;
  box-shadow:0 20px 58px rgba(20,24,31,.08);
}
.parents-checklist-panel ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.parents-checklist-panel li { padding:14px; border-radius:18px; background:#f7f9fc; }
.parents-checklist-panel b { display:block; margin-bottom:5px; }
.parents-checklist-panel span { color:#687386; font-size:13px; }

@media (max-width: 900px) {
  .opening-v40,
  .opening-v40:nth-of-type(odd) { grid-template-columns:1fr; min-height:auto; }
  .v40-motion { min-height:340px; }
  .parents-map-layout { grid-template-columns:1fr; }
  .orgchart-diagram { min-width: 920px; }
}


/* ver40.1: 사이트맵을 조직도 이미지처럼 보이게 재구성 */
.sitemap-org-tree-page {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  overflow-x: auto;
}
.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0 28px;
  font-size: 13px;
  color: #475569;
}
.tree-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #e5edf8;
  border-radius: 999px;
  background: #fff;
}
.tree-status {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.tree-status.local { background: #4ade80; }
.tree-status.live { background: #60a5fa; }
.tree-status.new { background: #facc15; }
.tree-status.guard { background: #c084fc; }
.org-tree-wrap {
  position: relative;
  min-width: 980px;
  padding: 20px 10px 34px;
}
.org-tree-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 88px;
  width: 2px;
  height: 128px;
  background: #1f2937;
  opacity: .78;
}
.org-root-node,
.org-tier {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 34px;
}
.org-root-node { margin-bottom: 34px; }
.org-tier-main {
  margin-bottom: 44px;
}
.org-tier-main::before,
.org-tier-groups::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: #1f2937;
  opacity: .78;
}
.org-tier-main .tree-node::before,
.tree-group > .tree-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 2px;
  height: 18px;
  background: #1f2937;
  transform: translateX(-50%);
}
.tree-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 132px;
  min-height: 60px;
  padding: 12px 16px;
  border: 2px solid rgba(15, 23, 42, .72);
  border-radius: 8px;
  background: #fef08a;
  color: #172033;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 0 rgba(15, 23, 42, .08), 0 16px 34px rgba(15, 23, 42, .12);
}
.tree-node strong { font-size: 15px; line-height: 1.25; }
.tree-node span { margin-top: 4px; font-size: 11px; color: #475569; }
.node-root { min-width: 160px; background: #c084fc; color: #fff; }
.node-root span { color: rgba(255,255,255,.88); }
.node-main { background: #fb923c; }
.node-group { background: #4ade80; min-width: 150px; }
.node-leaf { background: #fef08a; min-height: 42px; min-width: 150px; padding: 9px 12px; font-size: 13px; }
.node-leaf.live { background: #bfdbfe; }
.node-leaf.new { background: #fde68a; }
.node-leaf.guard { background: #e9d5ff; }
.org-tier-groups {
  align-items: flex-start;
  gap: 26px;
}
.tree-group {
  position: relative;
  display: grid;
  place-items: center;
  gap: 20px;
  min-width: 210px;
}
.tree-children {
  position: relative;
  display: grid;
  gap: 10px;
}
.tree-children::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  bottom: 22px;
  width: 2px;
  background: rgba(31, 41, 55, .74);
  transform: translateX(-50%);
}
.tree-children .tree-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 2px;
  height: 10px;
  background: rgba(31, 41, 55, .74);
}
.sitemap-dev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.sitemap-dev-grid article {
  padding: 18px;
  border: 1px solid #e5edf8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

/* ver40.1: 메인 2~6번 오프닝을 서로 다른 밝은 모션 컨테이너로 재제작 */
.opening-new {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(26px, 5vw, 72px);
  min-height: clamp(520px, 72vh, 760px);
  margin: 34px auto;
  padding: clamp(34px, 6vw, 84px);
  border: 1px solid #e7edf7;
  border-radius: clamp(28px, 4vw, 54px);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(30, 41, 59, .08);
}
.opening-new:nth-of-type(odd) { grid-template-columns: minmax(360px, 1.1fr) minmax(280px, .9fr); }
.opening-new::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 15%, rgba(196, 229, 255, .62), transparent 22%),
    radial-gradient(circle at 78% 82%, rgba(255, 222, 128, .55), transparent 24%),
    radial-gradient(circle at 55% 22%, rgba(235, 246, 255, .9), transparent 30%);
  animation: opBackdropFloat 12s ease-in-out infinite alternate;
}
.opening-new-03,
.opening-new-05 { background: linear-gradient(135deg, #ffffff, #f8fbff); }
.opening-new-04 { background: linear-gradient(145deg, #fffef8, #f7fff9); }
.opening-new-06 { background: linear-gradient(145deg, #ffffff, #fff7fa); }
.op-copy, .op-stage { position: relative; z-index: 1; }
.op-copy .eyebrow {
  font-size: 12px;
  color: #ef4444;
  font-weight: 800;
  letter-spacing: .08em;
}
.op-copy h2 {
  margin: 10px 0 16px;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.36;
  letter-spacing: -.04em;
}
.op-copy p {
  max-width: 520px;
  color: #475569;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
}
.op-copy .opening-link {
  display: inline-flex;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}
.op-stage {
  min-height: 380px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 34px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 20px 60px rgba(15,23,42,.08);
}
.lightboard-stage { overflow: hidden; }
.lightboard-grid, .map-tile-grid, .mini-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.18) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: opGridShift 10s linear infinite;
}
.op-line-chart {
  position: absolute;
  inset: 38px;
  width: calc(100% - 76px);
  height: calc(100% - 76px);
}
.op-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 10;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: drawOpLine 4.8s cubic-bezier(.2,.8,.2,1) infinite;
}
.op-line.shadow { stroke: rgba(37,99,235,.12); stroke-width: 22; }
.op-line.main { stroke: #2563eb; }
.data-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 10px rgba(239,68,68,.1);
  animation: opDotPulse 1.8s ease-in-out infinite;
}
.d1 { left: 12%; bottom: 25%; }
.d2 { left: 36%; top: 42%; animation-delay: .2s; }
.d3 { right: 28%; top: 24%; animation-delay: .4s; }
.d4 { right: 10%; top: 12%; animation-delay: .6s; }
.benefit-ticket, .reminder-chip, .agent-card-motion {
  position: absolute;
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e5edf8;
  box-shadow: 0 18px 40px rgba(15,23,42,.1);
}
.benefit-ticket b, .benefit-ticket span { display: block; }
.benefit-ticket span { color: #ef4444; font-weight: 900; }
.t1 { left: 8%; top: 15%; animation: opCardFloat 4s ease-in-out infinite; }
.t2 { right: 12%; top: 38%; animation: opCardFloat 4.3s ease-in-out infinite .3s; }
.t3 { left: 28%; bottom: 12%; animation: opCardFloat 4.1s ease-in-out infinite .5s; }
.paper-room-stage { perspective: 1000px; overflow: hidden; }
.paper-card {
  position: absolute;
  width: 170px;
  height: 120px;
  display: grid;
  place-items: end start;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #edf7ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 22px 48px rgba(37,99,235,.12);
  transform-style: preserve-3d;
  animation: paperFlip 5s ease-in-out infinite;
}
.paper-card span { font-weight: 900; color: #1e293b; }
.pc1 { left: 12%; top: 18%; }
.pc2 { right: 16%; top: 10%; animation-delay: .3s; }
.pc3 { left: 22%; bottom: 16%; animation-delay: .6s; }
.pc4 { right: 12%; bottom: 20%; animation-delay: .9s; }
.room-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 250px;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  background: #111827;
  color: #fff;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
  animation: phoneHover 4s ease-in-out infinite;
}
.room-phone span { display:block; height: 14px; border-radius: 9px; background: #fff; opacity: .7; margin-top: 20px; }
.scan-orbit {
  position: absolute;
  border: 2px dashed rgba(239,68,68,.35);
  border-radius: 999px;
  animation: orbitSpin 8s linear infinite;
}
.so1 { inset: 70px 90px; }
.so2 { inset: 110px 140px; animation-direction: reverse; }
.neighborhood-stage { overflow: hidden; }
.map-road {
  position: absolute;
  height: 22px;
  border-radius: 999px;
  background: #dbeafe;
  transform-origin: center;
}
.mr1 { left: -5%; right: 10%; top: 46%; transform: rotate(-12deg); }
.mr2 { left: 24%; right: -8%; top: 22%; transform: rotate(24deg); }
.mr3 { left: 10%; right: 18%; bottom: 20%; transform: rotate(8deg); }
.need-bubble {
  position: absolute;
  padding: 12px 15px;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 32px rgba(15,23,42,.09);
  animation: bubblePop 3.2s ease-in-out infinite;
}
.nb1 { left: 14%; top: 18%; }
.nb2 { right: 16%; top: 18%; animation-delay: .2s; }
.nb3 { right: 12%; bottom: 22%; animation-delay: .4s; }
.nb4 { left: 18%; bottom: 18%; animation-delay: .6s; }
.nb5 { left: 44%; top: 46%; animation-delay: .8s; }
.pulse-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.32);
  animation: pinPulse 2s ease-out infinite;
}
.pp1 { left: 34%; top: 34%; }
.pp2 { right: 32%; top: 50%; animation-delay: .5s; }
.pp3 { left: 55%; bottom: 24%; animation-delay: 1s; }
.calendar-stage { display: grid; place-items: center; overflow: hidden; }
.calendar-card {
  position: relative;
  z-index: 2;
  width: 230px;
  padding: 28px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(239,68,68,.14);
  border: 1px solid #fee2e2;
  animation: calendarPulse 3.5s ease-in-out infinite;
}
.calendar-card strong { display:block; font-size: 56px; color:#ef4444; letter-spacing:-.06em; }
.calendar-card span, .calendar-card em { display:block; color:#475569; font-style:normal; }
.date-rail {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 8px;
  border-radius: 999px;
  background: #fee2e2;
  overflow: hidden;
}
.date-rail::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#ef4444,#fbbf24,#22c55e);
  transform-origin:left;
  animation: railFill 4s ease-in-out infinite;
}
.date-rail i {
  position:absolute;
  top:-8px;
  width:24px;height:24px;
  border-radius:50%;
  background:#fff;
  border:5px solid #ef4444;
}
.date-rail i:nth-child(1){left:0}
.date-rail i:nth-child(2){left:33%}
.date-rail i:nth-child(3){left:66%}
.date-rail i:nth-child(4){right:0}
.rc1 { left: 10%; top: 18%; animation: opCardFloat 4s infinite; }
.rc2 { right: 10%; top: 20%; animation: opCardFloat 4s infinite .4s; }
.rc3 { right: 20%; bottom: 17%; animation: opCardFloat 4s infinite .7s; }
.agent-card-stage { overflow:hidden; }
.agent-card-motion {
  width: 220px;
  min-height: 120px;
}
.agent-card-motion b, .agent-card-motion span, .agent-card-motion em { display:block; }
.agent-card-motion span { color:#f59e0b; font-size:20px; letter-spacing:.04em; }
.agent-card-motion em { color:#64748b; font-style:normal; }
.acm1 { left: 10%; top: 15%; animation: agentCardSlide 5s ease-in-out infinite; }
.acm2 { right: 10%; top: 35%; animation: agentCardSlide 5.5s ease-in-out infinite .3s; }
.acm3 { left: 28%; bottom: 12%; animation: agentCardSlide 5.2s ease-in-out infinite .6s; }
.agent-star {
  position:absolute;
  color:#fbbf24;
  font-size:32px;
  animation: starFloat 4s ease-in-out infinite;
}
.as1 { left: 44%; top: 18%; }
.as2 { right: 18%; bottom: 14%; animation-delay:.5s; }
.as3 { left: 18%; bottom: 34%; animation-delay:1s; }

@keyframes opBackdropFloat { to { transform: translate3d(3%, -2%, 0) scale(1.04) rotate(2deg); } }
@keyframes opGridShift { to { background-position: 44px 44px; } }
@keyframes drawOpLine { 0%,15%{stroke-dashoffset:720} 60%,100%{stroke-dashoffset:0} }
@keyframes opDotPulse { 50% { transform: scale(1.35); box-shadow: 0 0 0 22px rgba(239,68,68,0); } }
@keyframes opCardFloat { 50% { transform: translateY(-18px) rotate(-2deg); } }
@keyframes paperFlip { 0%,100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(13deg) rotateX(-6deg) translateY(-16px); } }
@keyframes phoneHover { 50% { transform: translate(-50%, -56%) rotate(1deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes bubblePop { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-14px) scale(1.06)} }
@keyframes pinPulse { 80%,100% { box-shadow: 0 0 0 28px rgba(239,68,68,0); } }
@keyframes calendarPulse { 50% { transform: translateY(-10px); box-shadow: 0 30px 100px rgba(239,68,68,.22); } }
@keyframes railFill { 0% { transform: scaleX(.08); } 70%,100% { transform: scaleX(1); } }
@keyframes agentCardSlide { 0%,100% { transform: translateX(0) translateY(0) rotate(0); } 50% { transform: translateX(24px) translateY(-20px) rotate(2deg); } }
@keyframes starFloat { 50% { transform: translateY(-20px) rotate(20deg) scale(1.25); } }

/* ver40.1: 우리동네지도 지도형 전문 게시판 */
.neighborhood-hero {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid #e5edf8;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff, #f8fbff);
}
.neighborhood-score {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 180px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15,23,42,.08);
}
.neighborhood-score strong { font-size: 56px; color:#ef4444; letter-spacing:-.06em; }
.neighborhood-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 18px;
  margin: 22px 0;
}
.neighborhood-map {
  position: relative;
  min-height: 560px;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  background: #f9fbff;
  overflow: hidden;
}
.local-map-canvas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(147,197,253,.24) 1px, transparent 1px),
    linear-gradient(rgba(147,197,253,.24) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, #fef3c7, transparent 18%),
    radial-gradient(circle at 78% 70%, #dcfce7, transparent 20%);
  background-size: 58px 58px, 58px 58px, auto, auto;
}
.local-road {
  position: absolute;
  height: 24px;
  border-radius: 999px;
  background: #dbeafe;
  box-shadow: inset 0 0 0 2px #bfdbfe;
}
.lr1 { left: -10%; right: 8%; top: 42%; transform: rotate(-10deg); }
.lr2 { left: 20%; right: -6%; top: 22%; transform: rotate(22deg); }
.lr3 { left: 6%; right: 12%; bottom: 22%; transform: rotate(8deg); }
.map-zone {
  position: absolute;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid #e2e8f0;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
}
.mz-school { left: 12%; top: 14%; }
.mz-academy { right: 12%; top: 15%; }
.mz-park { left: 16%; bottom: 16%; }
.mz-hospital { right: 14%; bottom: 18%; }
.mz-apt { left: 42%; top: 48%; }
.neighborhood-side {
  padding: 24px;
  border: 1px solid #e5edf8;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 50px rgba(15,23,42,.06);
}
.neighborhood-side li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f7;
}
.neighborhood-side b { color:#111827; }
.neighborhood-side span { color:#64748b; font-size: 13px; }

/* ver40.1: 빈 별 클릭형 별점 */
.star-rating-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}
.star-rating-field > span {
  font-weight: 800;
  color: #111827;
  margin-right: 8px;
}
.star-rating-field button {
  border: 0;
  background: transparent;
  color: #f59e0b;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform .14s ease, color .14s ease;
}
.star-rating-field button:hover,
.star-rating-field button.is-active {
  transform: scale(1.14);
  color: #f59e0b;
}
.recommend-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.recommend-agent-card {
  position: relative;
  padding: 24px;
  border: 1px solid #e5edf8;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
}
.cert-badge,
.local-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #fee2e2;
  color: #b91c1c;
}
.cert-badge img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: cover;
}
.local-badge { background:#e0f2fe; color:#0369a1; }
.recommend-agent-card strong {
  display:block;
  margin-top: 14px;
  color: #f59e0b;
  font-size: 20px;
}
.recommend-agent-card strong em { color:#111827; font-style: normal; margin-left: 8px; }
.agent-type-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.agent-type-radios label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e5edf8;
  border-radius: 999px;
  background: #fff;
}
.compact-comment-form input[type="hidden"] + label,
.compact-comment-form textarea {
  width: 100%;
}

@media (max-width: 860px) {
  .opening-new,
  .opening-new:nth-of-type(odd),
  .neighborhood-layout,
  .neighborhood-hero,
  .recommend-agent-grid,
  .sitemap-dev-grid {
    grid-template-columns: 1fr;
  }
  .org-tree-wrap { min-width: 860px; }
  .op-stage { min-height: 320px; }
}

/* ===== ver41 legal pages, sitemap status, and local agent map ===== */
.footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 10px auto;
}
.footer-policy-links a { color: inherit; font-weight: 800; text-decoration: none; }
.legal-page { max-width: 1080px; margin: 0 auto; }
.legal-page article,
.legal-warning,
.business-table,
.legal-grid a {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}
.legal-page article { padding: 22px; margin: 14px 0; }
.legal-page h2 { margin: 0 0 10px; font-size: 20px; }
.legal-page p { color: #485366; line-height: 1.75; }
.legal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.legal-grid a {
  display: grid;
  gap: 10px;
  min-height: 166px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}
.legal-grid b { font-size: 18px; }
.legal-grid span { color: #566174; line-height: 1.55; }
.legal-grid em,
.status-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.legal-grid em,
.status-badge.done { background: #24b47e; }
.status-badge.live { background: #42b6ff; }
.status-badge.guard { background: #f59e0b; }
.status-badge.new { background: #ed3b32; }
.status-badge.todo { background: #71717a; }
.legal-warning { display: grid; gap: 8px; margin-top: 18px; padding: 20px; background: #fff7f6; }
.business-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.business-table th,
.business-table td { padding: 16px 18px; border-bottom: 1px solid rgba(15, 23, 42, .08); text-align: left; }
.business-table th { width: 220px; background: #f7f9fc; color: #111827; }
.sitemap-status-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.sitemap-status-list section { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .07); }
.sitemap-status-list h2 { margin: 0 0 4px; font-size: 18px; }
.sitemap-status-list a,
.tree-node { text-decoration: none; }
.sitemap-status-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #1f2937; font-weight: 800; }
.tree-status.todo { background: #71717a; }
.tree-node small { display: block; margin-top: 6px; color: #64748b; }
.agent-map-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; align-items: stretch; }
.agent-local-map {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(135deg, #eef8ff, #fff7f6);
  border: 1px solid rgba(15, 23, 42, .08);
}
.agent-map-pin {
  position: absolute;
  z-index: 4;
  min-width: 74px;
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
  cursor: pointer;
}
.agent-map-pin.certified { background: #ed3b32; }
.agent-map-pin.local { background: #2563eb; }
.agent-map-pin[data-agent-pin="goodhome"] { left: 24%; top: 34%; }
.agent-map-pin[data-agent-pin="yangpyeong"] { left: 58%; top: 58%; }
.agent-map-pin[data-agent-pin="wirye"] { left: 70%; top: 28%; }
.agent-map-pin.active { outline: 4px solid rgba(255, 255, 255, .92); transform: translateY(-4px); }
.agent-map-detail { left: 24px; right: 24px; bottom: 24px; }
.recommend-agent-card button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #111827;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.recommend-agent-card small {
  display: inline-flex;
  width: max-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
}
.recommend-agent-card.active { outline: 3px solid rgba(237, 59, 50, .28); }
.location-note { margin-top: 10px; color: #64748b; font-weight: 800; }
.pin-agent { left: 47%; top: 42%; background: #111827; }

@media (max-width: 980px) {
  .legal-grid,
  .sitemap-status-list,
  .agent-map-layout { grid-template-columns: 1fr; }
  .business-table th { width: 132px; }
}

/* ===== ver42 login role field and seven independent index openings ===== */
.role-radio-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #e5edf8;
  border-radius: 14px;
  background: #f8fafc;
}
.role-radio-field span {
  width: 100%;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}
.role-radio-field label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}
.legal-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.legal-meta-grid article,
.legal-toc {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.legal-meta-grid article {
  padding: 16px;
}
.legal-meta-grid b,
.legal-meta-grid span {
  display: block;
}
.legal-meta-grid span {
  margin-top: 6px;
  color: #566174;
  line-height: 1.55;
}
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 22px;
  padding: 14px;
}
.legal-toc a {
  border-radius: 999px;
  padding: 8px 12px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.opening-v42 {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 5vw, 70px);
  align-items: center;
  min-height: clamp(560px, 82vh, 860px);
  padding: clamp(54px, 8vw, 110px) clamp(22px, 7vw, 92px);
  overflow: hidden;
  background: #f8fafc;
}
.opening-v42:nth-of-type(odd) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  background: #fff;
}
.op42-copy h2 {
  margin: 10px 0 14px;
  color: #101828;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: 0;
}
.op42-copy p:not(.eyebrow) {
  max-width: 560px;
  color: #526071;
  font-size: 18px;
  line-height: 1.7;
}
.op42-stage {
  position: relative;
  min-height: 430px;
  border-radius: 32px;
  background: linear-gradient(145deg, #ffffff, #eef4ff);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
  overflow: hidden;
}
.op42-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, .08);
}
.finance-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 250px;
  height: 330px;
  padding: 34px 24px;
  border-radius: 38px;
  background: #111827;
  color: #fff;
  transform: translate(-50%, -50%);
  animation: op42Float 4.2s ease-in-out infinite;
}
.finance-phone b { display: block; margin-bottom: 8px; font-size: 34px; }
.finance-phone span { color: #cbd5e1; }
.finance-phone i { display: block; height: 13px; margin-top: 22px; border-radius: 999px; background: #334155; }
.finance-phone i:nth-child(4) { width: 74%; }
.finance-phone i:nth-child(5) { width: 58%; }
.flow-card,
.task-pill,
.review-card,
.console-dashboard-stage article {
  position: absolute;
  z-index: 3;
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
  font-weight: 900;
}
.fc1 { left: 11%; top: 18%; animation: op42Pop 3.4s ease-in-out infinite; }
.fc2 { right: 10%; top: 28%; animation: op42Pop 3.4s .4s ease-in-out infinite; }
.fc3 { left: 17%; bottom: 16%; animation: op42Pop 3.4s .8s ease-in-out infinite; }
.cash-wave {
  position: absolute;
  border-radius: 999px;
  background: rgba(237, 59, 50, .12);
  animation: op42Pulse 2.4s ease-out infinite;
}
.cw1 { width: 260px; height: 260px; left: 18%; top: 18%; }
.cw2 { width: 360px; height: 360px; right: -80px; bottom: -80px; animation-delay: .5s; }
.showcase-device {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 330px;
  height: 245px;
  border-radius: 28px;
  background: #fff;
  transform: translate(-50%, -50%) perspective(900px) rotateX(8deg) rotateY(-10deg);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
}
.showcase-device span,
.showcase-device b {
  position: absolute;
  left: 28px;
}
.showcase-device span { top: 24px; color: #ed3b32; font-weight: 900; }
.showcase-device b { bottom: 28px; font-size: 30px; }
.showcase-device i { position: absolute; inset: 68px 28px 72px; border-radius: 22px; background: linear-gradient(135deg, #e0f2fe, #fee2e2); }
.room-cube {
  position: absolute;
  z-index: 4;
  min-width: 78px;
  border-radius: 18px;
  padding: 18px;
  background: #111827;
  color: #fff;
  font-weight: 900;
  animation: op42Orbit 5s ease-in-out infinite;
}
.cube1 { left: 11%; top: 17%; }
.cube2 { right: 13%; top: 18%; animation-delay: .4s; }
.cube3 { left: 18%; bottom: 18%; animation-delay: .8s; }
.cube4 { right: 18%; bottom: 16%; animation-delay: 1.2s; }
.scan-light { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.75), transparent 65%); animation: op42Scan 3.2s linear infinite; }
.map-explorer-stage { background: #eef8ff; }
.street {
  position: absolute;
  border-radius: 999px;
  background: #dbeafe;
}
.s1 { width: 84%; height: 24px; left: 8%; top: 34%; transform: rotate(-8deg); }
.s2 { width: 24px; height: 74%; left: 46%; top: 13%; transform: rotate(12deg); }
.s3 { width: 72%; height: 20px; left: 18%; bottom: 27%; transform: rotate(18deg); }
.map-explorer-stage button {
  position: absolute;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: #ed3b32;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(237, 59, 50, .22);
  animation: op42Pin 3s ease-in-out infinite;
}
.map-explorer-stage button:nth-of-type(1) { left: 18%; top: 22%; }
.map-explorer-stage button:nth-of-type(2) { left: 58%; top: 20%; animation-delay: .2s; }
.map-explorer-stage button:nth-of-type(3) { left: 35%; top: 52%; animation-delay: .4s; }
.map-explorer-stage button:nth-of-type(4) { left: 66%; top: 62%; animation-delay: .6s; }
.map-explorer-stage button:nth-of-type(5) { left: 17%; top: 70%; background: #111827; animation-delay: .8s; }
.map-popover { position: absolute; right: 10%; top: 38%; z-index: 4; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 16px 36px rgba(15,23,42,.14); }
.map-popover b,
.map-popover span { display: block; }
.map-popover span { margin-top: 6px; color: #64748b; }
.saas-calendar-stage { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 32px; background: #111827; }
.saas-sidebar { z-index: 2; display: grid; gap: 14px; align-content: start; padding-top: 24px; }
.saas-sidebar i { height: 42px; border-radius: 14px; background: #334155; }
.saas-board { z-index: 2; display: grid; align-content: center; justify-items: center; border-radius: 28px; background: #fff; }
.saas-board strong { color: #ed3b32; font-size: 72px; }
.saas-board span { color: #111827; font-size: 28px; font-weight: 900; }
.saas-board em { margin-top: 10px; color: #64748b; font-style: normal; font-weight: 800; }
.tp1 { left: 8%; bottom: 10%; }
.tp2 { right: 18%; top: 15%; }
.tp3 { right: 8%; bottom: 14%; }
.review-stack-stage { background: linear-gradient(135deg, #fff7ed, #fff); }
.review-card { width: 250px; min-height: 128px; display: grid; gap: 8px; }
.review-card b { color: #111827; }
.review-card span { color: #f59e0b; font-size: 24px; }
.review-card em { color: #64748b; font-style: normal; }
.rv1 { left: 14%; top: 16%; transform: rotate(-7deg); animation: op42Stack 4s ease-in-out infinite; }
.rv2 { right: 12%; top: 34%; transform: rotate(6deg); animation: op42Stack 4s .4s ease-in-out infinite; }
.rv3 { left: 28%; bottom: 12%; transform: rotate(-2deg); animation: op42Stack 4s .8s ease-in-out infinite; }
.policy-desk-stage { background: #f8fafc; }
.doc-stack {
  position: absolute;
  left: 12%;
  top: 17%;
  z-index: 2;
  display: grid;
  gap: 14px;
  width: 280px;
}
.doc-stack article {
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15,23,42,.1);
  font-weight: 900;
  animation: op42SlideDoc 4s ease-in-out infinite;
}
.doc-stack article:nth-child(2) { animation-delay: .2s; }
.doc-stack article:nth-child(3) { animation-delay: .4s; }
.doc-stack article:nth-child(4) { animation-delay: .6s; }
.approval-stamp {
  position: absolute;
  right: 14%;
  top: 30%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border: 10px solid #ed3b32;
  border-radius: 50%;
  color: #ed3b32;
  font-size: 30px;
  font-weight: 1000;
  line-height: 1.08;
  transform: rotate(-14deg);
  animation: op42Stamp 3.2s ease-in-out infinite;
}
.console-dashboard-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 88px 32px 32px;
  background: #0f172a;
}
.dash-top {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 28px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, #334155, #1e293b);
}
.console-dashboard-stage article {
  position: relative;
  inset: auto;
  display: grid;
  align-content: center;
  min-height: 126px;
  color: #334155;
}
.console-dashboard-stage article b { display: block; margin-top: 8px; color: #111827; font-size: 30px; }
@keyframes op42Float { 50% { transform: translate(-50%, -56%); } }
@keyframes op42Pop { 50% { transform: translateY(-12px) scale(1.04); } }
@keyframes op42Pulse { 70% { transform: scale(1.12); opacity: .42; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes op42Orbit { 50% { transform: translateY(-16px) rotate(4deg); } }
@keyframes op42Scan { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@keyframes op42Pin { 50% { transform: translateY(-10px); } }
@keyframes op42Stack { 50% { transform: translateY(-12px) rotate(0); } }
@keyframes op42SlideDoc { 50% { transform: translateX(18px); } }
@keyframes op42Stamp { 45% { transform: rotate(-14deg) scale(1.08); } }
@media (max-width: 900px) {
  .opening-v42,
  .opening-v42:nth-of-type(odd),
  .legal-meta-grid { grid-template-columns: 1fr; }
  .op42-stage { min-height: 380px; }
  .op42-copy h2 { font-size: 38px; }
}

/* ===== ver47 operational map, payment benefit flow, price updates, and index opening samples ===== */
.operational-hero {
  width: min(100% - 32px, 1180px);
  margin: 36px auto 18px;
  padding: clamp(34px, 6vw, 64px);
  border-radius: 28px;
  background: linear-gradient(135deg, #111827, #1f2937);
  color: #fff;
}
.operational-hero.agent-live { background: linear-gradient(135deg, #121826, #2f1111); }
.operational-hero.admin-live { background: linear-gradient(135deg, #101828, #123a2a); }
.operational-hero.points-live { background: linear-gradient(135deg, #1f2937, #3a1b11); }
.operational-hero h1 { margin: 8px 0 10px; color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; }
.operational-hero p:not(.eyebrow) { max-width: 760px; color: rgba(255,255,255,.78); line-height: 1.7; }
.operational-layout {
  width: min(100% - 32px, 1380px);
  margin: 0 auto 54px;
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
}
.operational-layout.list-only { grid-template-columns: minmax(320px, .8fr) minmax(360px, 1fr); }
.kakao-map-shell, .listing-live-list, .listing-detail-panel, .benefit-admin-card, .points-ledger {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}
.kakao-map-shell { overflow: hidden; }
.map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.map-toolbar span { color: #64748b; font-size: 13px; }
.kakao-map-canvas { min-height: 620px; background: #eef8ff; }
.fallback-map { position: relative; min-height: 620px; overflow: hidden; background: #eef8ff; }
.fallback-map::before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.34));
}
.fallback-map .road { position: absolute; border-radius: 999px; background: #cfe3ff; }
.fallback-map .r1 { width: 80%; height: 28px; left: 8%; top: 30%; transform: rotate(-8deg); }
.fallback-map .r2 { width: 28px; height: 76%; left: 48%; top: 11%; transform: rotate(12deg); }
.fallback-map .r3 { width: 74%; height: 22px; left: 15%; top: 66%; transform: rotate(15deg); }
.fallback-pin {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  background: #ed3b32;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(237, 59, 50, .22);
  cursor: pointer;
}
.listing-live-list {
  display: grid;
  gap: 12px;
  padding: 14px;
  max-height: 720px;
  overflow: auto;
}
.live-listing-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
}
.live-listing-card.active { border-color: #ed3b32; box-shadow: 0 12px 28px rgba(237, 59, 50, .12); }
.live-listing-card h3 { margin: 0; color: #111827; font-size: 22px; }
.live-listing-card h3 small { color: #64748b; font-size: 14px; }
.live-listing-card p { margin: 0; color: #64748b; }
.listing-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 4px 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.listing-chip.ok { background: #ecfdf5; color: #047857; }
.listing-chip.muted { background: #fef2f2; color: #b91c1c; }
.live-listing-card dl, .detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.live-listing-card dt, .detail-grid dt { color: #94a3b8; font-size: 12px; font-weight: 800; }
.live-listing-card dd, .detail-grid dd { margin: 3px 0 0; color: #111827; font-weight: 900; }
.listing-contact {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
}
.contact-visible { color: #047857; }
.contact-locked { color: #ed3b32; }
.listing-contact span { color: #64748b; font-size: 13px; }
.listing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.listing-actions button, .listing-actions a, .primary.compact {
  border: 0;
  border-radius: 12px;
  padding: 10px 13px;
  background: #f1f5f9;
  color: #111827;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.listing-actions .primary, .primary.compact, .benefit-admin-card .primary {
  background: #ed3b32;
  color: #fff;
}
.listing-detail-panel { padding: 18px; }
.listing-detail-card h2 { margin: 10px 0; color: #111827; font-size: clamp(28px, 4vw, 42px); }
.detail-title-row { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; }
.benefit-admin-card {
  width: min(100% - 32px, 760px);
  margin: 0 auto 24px;
  display: grid;
  gap: 14px;
  padding: 24px;
}
.benefit-admin-card label { display: grid; gap: 8px; color: #334155; font-weight: 900; }
.benefit-admin-card input {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
}
.points-ledger {
  width: min(100% - 32px, 1180px);
  margin: 0 auto 24px;
  padding: 22px;
}
.point-total-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #111827;
  color: #fff;
}
.point-total-card strong { font-size: clamp(30px, 5vw, 54px); }
.point-list { display: grid; gap: 10px; }
.point-list article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.point-list span { color: #ed3b32; font-weight: 900; }
.point-list em { color: #64748b; font-style: normal; }
.kakao-info { min-width: 130px; padding: 8px 10px; color: #111827; font-weight: 900; }
.opening-v43 {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr);
  gap: clamp(22px, 5vw, 76px);
  align-items: center;
  min-height: clamp(560px, 82vh, 860px);
  padding: clamp(58px, 8vw, 112px) clamp(22px, 7vw, 92px);
  background: #fff;
  overflow: hidden;
}
.opening-v43:nth-of-type(odd) { grid-template-columns: minmax(380px, 1.1fr) minmax(320px, .9fr); background: #f8fafc; }
.op43-copy h2 { margin: 8px 0 14px; color: #111827; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; letter-spacing: 0; }
.op43-copy p:not(.eyebrow) { max-width: 560px; color: #526071; font-size: 18px; line-height: 1.7; }
.op43-stage {
  position: relative;
  min-height: 470px;
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #eef4ff);
  box-shadow: 0 30px 70px rgba(15, 23, 42, .13);
  overflow: hidden;
}
.launch-stage { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff1f0, #fff 58%, #eef4ff); }
.launch-core, .brand-burst {
  z-index: 4;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #ed3b32;
  color: #fff;
  font-size: 42px;
  font-weight: 1000;
  animation: op43Core 2.8s ease-in-out infinite;
}
.launch-stage i {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(237,59,50,.18);
  border-radius: 50%;
  animation: op43Ring 3.2s ease-out infinite;
}
.launch-stage i:nth-child(2) { animation-delay: .35s; }
.launch-stage i:nth-child(3) { animation-delay: .7s; }
.launch-stage b, .laser-stage strong, .console-stage article, .cert-stage .doc, .finale-stage i {
  position: absolute;
  z-index: 5;
  border-radius: 18px;
  padding: 14px 18px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15,23,42,.14);
  color: #111827;
  font-weight: 1000;
}
.launch-stage b:nth-of-type(1) { left: 12%; top: 18%; animation: op43Float 3s ease-in-out infinite; }
.launch-stage b:nth-of-type(2) { right: 12%; top: 26%; animation: op43Float 3s .35s ease-in-out infinite; }
.launch-stage b:nth-of-type(3) { left: 23%; bottom: 16%; animation: op43Float 3s .7s ease-in-out infinite; }
.laser-stage { background: #111827; }
.laser-house { position: absolute; left: 50%; top: 50%; width: 180px; height: 150px; border: 3px solid #fff; border-top: 0; transform: translate(-50%, -35%); }
.laser-house::before { content: ""; position: absolute; left: 12px; right: 12px; top: -65px; height: 120px; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); }
.laser { position: absolute; height: 4px; width: 72%; left: 14%; background: #ed3b32; box-shadow: 0 0 28px #ed3b32; animation: op43Laser 2.6s linear infinite; }
.l1 { top: 28%; } .l2 { top: 48%; animation-delay: .35s; } .l3 { top: 68%; animation-delay: .7s; }
.laser-stage strong { right: 11%; bottom: 12%; color: #ed3b32; font-size: 28px; }
.zoom-map-stage { background: #eef8ff; }
.zoom-map-stage .road { position: absolute; border-radius: 999px; background: #cfe3ff; }
.zoom-map-stage .a { width: 90%; height: 24px; left: 5%; top: 32%; transform: rotate(-10deg); }
.zoom-map-stage .b { width: 26px; height: 78%; left: 50%; top: 8%; transform: rotate(13deg); }
.zoom-map-stage .c { width: 72%; height: 20px; left: 18%; top: 68%; transform: rotate(18deg); }
.zoom-map-stage button { position: absolute; z-index: 4; border: 0; border-radius: 999px; padding: 12px 16px; background: #ed3b32; color: #fff; font-weight: 1000; animation: op43Pin 3s ease-in-out infinite; }
.zoom-map-stage button:nth-of-type(1) { left: 18%; top: 22%; }
.zoom-map-stage button:nth-of-type(2) { right: 16%; top: 30%; animation-delay: .3s; }
.zoom-map-stage button:nth-of-type(3) { left: 42%; bottom: 18%; animation-delay: .6s; }
.zoom-map-stage article { position: absolute; right: 8%; bottom: 13%; z-index: 5; border-radius: 20px; padding: 20px; background: #fff; box-shadow: 0 18px 38px rgba(15,23,42,.15); }
.zoom-map-stage article b, .zoom-map-stage article em { display: block; }
.zoom-map-stage article em { color: #64748b; font-style: normal; }
.scan3d-stage { background: #101828; perspective: 900px; }
.room-plane { position: absolute; left: 17%; right: 17%; border: 2px solid rgba(255,255,255,.72); background: rgba(255,255,255,.06); }
.room-plane.floor { bottom: 18%; height: 190px; transform: rotateX(64deg); }
.room-plane.wall { top: 18%; height: 210px; }
.scan-beam { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(237,59,50,.58), transparent 65%); animation: op43Scan 3s linear infinite; }
.scan3d-stage b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 46px; }
.scan3d-stage i { position: absolute; width: 70px; height: 70px; border-radius: 16px; border: 2px solid #fff; animation: op43Float 3s ease-in-out infinite; }
.scan3d-stage i:nth-of-type(1) { left: 14%; top: 20%; }
.scan3d-stage i:nth-of-type(2) { right: 16%; top: 26%; animation-delay: .4s; }
.scan3d-stage i:nth-of-type(3) { left: 28%; bottom: 18%; animation-delay: .8s; }
.console-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 82px 28px 28px; background: #111827; }
.console-stage article { position: relative; inset: auto; align-self: center; min-height: 130px; display: grid; align-content: center; gap: 8px; }
.console-stage article span { color: #64748b; }
.console-stage article b { font-size: 24px; }
.unlock-ring { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 120px; height: 120px; display: grid; place-items: center; border-radius: 50%; border: 8px solid #ed3b32; color: #fff; font-weight: 1000; animation: op43Core 2.8s ease-in-out infinite; }
.cert-stage { background: #f8fafc; }
.cert-stage .doc { left: 12%; width: 260px; }
.cert-stage .d1 { top: 18%; animation: op43Doc 3s ease-in-out infinite; }
.cert-stage .d2 { top: 38%; animation: op43Doc 3s .25s ease-in-out infinite; }
.cert-stage .d3 { top: 58%; animation: op43Doc 3s .5s ease-in-out infinite; }
.cert-stage strong { position: absolute; right: 10%; top: 32%; z-index: 5; display: grid; place-items: center; width: 190px; height: 190px; border: 10px solid #ed3b32; border-radius: 50%; color: #ed3b32; font-size: 28px; transform: rotate(-14deg); animation: op43Stamp 3.2s ease-in-out infinite; }
.finale-stage { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #111827, #05070d); }
.finale-stage i { color: #ed3b32; }
.finale-stage i:nth-of-type(1) { left: 12%; top: 18%; }
.finale-stage i:nth-of-type(2) { right: 13%; top: 22%; }
.finale-stage i:nth-of-type(3) { left: 18%; bottom: 18%; }
.finale-stage i:nth-of-type(4) { right: 16%; bottom: 16%; }
.finale-stage strong { position: absolute; bottom: 32px; color: rgba(255,255,255,.2); font-size: 66px; letter-spacing: .08em; }
@keyframes op43Core { 50% { transform: scale(1.08); } }
@keyframes op43Ring { 80% { transform: scale(2.3); opacity: .12; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes op43Float { 50% { transform: translateY(-16px) scale(1.04); } }
@keyframes op43Laser { from { transform: translateX(-24%); } to { transform: translateX(24%); } }
@keyframes op43Pin { 50% { transform: translateY(-12px); } }
@keyframes op43Scan { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@keyframes op43Doc { 50% { transform: translateX(24px); } }
@keyframes op43Stamp { 45% { transform: rotate(-14deg) scale(1.08); } }
@media (max-width: 960px) {
  .operational-layout, .operational-layout.list-only, .opening-v43, .opening-v43:nth-of-type(odd) { grid-template-columns: 1fr; }
  .kakao-map-canvas, .fallback-map { min-height: 440px; }
  .live-listing-card dl, .detail-grid, .console-stage { grid-template-columns: 1fr; }
  .op43-stage { min-height: 380px; }
}

/* ===== ver47 real map fallback, agent approval, member unlock log, sitemap benefit hover ===== */
.free-real-map {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #dbeafe;
  touch-action: none;
  cursor: grab;
}
.free-real-map.is-dragging {
  cursor: grabbing;
}
.free-map-layer,
.free-map-marker-layer {
  position: absolute;
  inset: 0;
}
.free-map-layer {
  z-index: 1;
}
.free-map-marker-layer {
  z-index: 3;
  pointer-events: none;
}
.free-map-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  user-select: none;
  pointer-events: none;
}
.free-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  min-width: 118px;
  border: 0;
  border-radius: 16px;
  padding: 10px 12px;
  background: #ed3b32;
  color: #fff;
  box-shadow: 0 14px 26px rgba(237, 59, 50, .28);
  cursor: pointer;
  pointer-events: auto;
}
.free-map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #ed3b32;
  transform: translateX(-50%) rotate(45deg);
}
.free-map-pin.benefit,
.free-map-pin.benefit::after {
  background: #ed3b32;
}
.free-map-pin.paid,
.free-map-pin.paid::after {
  background: #111827;
}
.free-map-pin.verified,
.free-map-pin.verified::after {
  background: #2563eb;
}
.free-map-pin.basic,
.free-map-pin.basic::after {
  background: #64748b;
}
.free-map-pin b,
.free-map-pin span {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
}
.free-map-pin span {
  margin-top: 3px;
  color: rgba(255,255,255,.84);
  font-size: 12px;
}
.free-map-controls {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  display: flex;
  gap: 6px;
}
.free-map-controls button {
  border: 0;
  border-radius: 12px;
  padding: 8px 11px;
  background: rgba(255,255,255,.94);
  color: #111827;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(15,23,42,.16);
  cursor: pointer;
}
.free-map-attribution {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.map-state-card {
  display: grid;
  min-height: 420px;
  place-items: center;
  color: #334155;
  font-weight: 900;
}
.member-unlock-ledger,
.agent-approval-panel {
  margin-top: 18px;
}
.agent-unlock-list,
.agent-approval-list {
  display: grid;
  gap: 10px;
}
.agent-unlock-card,
.agent-approval-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}
.agent-unlock-card b,
.agent-approval-card b {
  color: #111827;
  font-size: 17px;
}
.agent-unlock-card span,
.agent-approval-card span,
.agent-unlock-card small {
  color: #64748b;
}
.agent-unlock-card em {
  color: #ed3b32;
  font-style: normal;
  font-weight: 900;
}
.agent-approval-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.agent-approval-card button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #111827;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.benefit-hover-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff1f0;
  color: #ed3b32;
  font-size: 12px;
  font-weight: 1000;
}
.benefit-hover-flow {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 20;
  display: none;
  width: min(300px, 82vw);
  transform: translateX(-50%);
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
  color: #111827;
  text-align: left;
}
.benefit-hover-flow.detailed {
  width: min(460px, 88vw);
}
.benefit-hover-badge:hover .benefit-hover-flow,
.benefit-hover-badge:focus .benefit-hover-flow,
.benefit-hover-badge:focus-within .benefit-hover-flow {
  display: grid;
  gap: 8px;
}
.benefit-hover-flow b {
  color: #ed3b32;
}
.benefit-hover-flow em {
  font-style: normal;
  color: #334155;
  line-height: 1.45;
}
.benefit-hover-flow em strong {
  display: block;
  margin-bottom: 2px;
  color: #111827;
}
.benefit-flow-link,
.benefit-flow-node {
  overflow: visible !important;
}
.readonly-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 12px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 800;
}
.paid-agent-list,
.benefit-summary-list {
  display: grid;
  gap: 10px;
}
.paid-agent-list {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}
.paid-agent-list > b {
  color: #111827;
}
.paid-agent-list article,
.benefit-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.paid-agent-list article strong,
.benefit-summary-card h3 {
  display: block;
  color: #111827;
}
.paid-agent-list article span,
.paid-agent-list article em {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-style: normal;
}
.price-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.price-edit-submit-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.price-edit-warning {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
}
.board-policy-inline {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.action-hover-tooltip {
  position: fixed;
  z-index: 999;
  max-width: min(360px, calc(100vw - 24px));
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  pointer-events: none;
}
.action-hover-tooltip[hidden] {
  display: none !important;
}
.rental-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}
.rental-inline-form[hidden] {
  display: none !important;
}
.rental-inline-form label,
.rental-inline-form textarea,
.rental-inline-form button {
  grid-column: auto;
}
.rental-inline-form label:has(textarea),
.rental-inline-form button {
  grid-column: 1 / -1;
}
.benefit-summary-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.benefit-summary-card dt {
  color: #64748b;
  font-size: 12px;
}
.benefit-summary-card dd {
  margin: 0;
  color: #111827;
  font-weight: 900;
}
.favorite-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}
.favorite-dashboard-list,
.viewed-list,
.favorite-compare-grid {
  display: grid;
  gap: 12px;
}
.favorite-dashboard-card,
.viewed-list-panel,
.favorite-compare-panel,
.favorite-compare-grid article,
.agent-contact-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}
.favorite-dashboard-card dl,
.favorite-compare-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.favorite-dashboard-card dt,
.favorite-compare-grid dt {
  color: #64748b;
  font-size: 12px;
}
.favorite-dashboard-card dd,
.favorite-compare-grid dd {
  margin: 0;
  color: #111827;
  font-weight: 900;
}
.favorite-detail,
.benefit-agent-panel {
  margin-top: 14px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}
.agent-contact-list,
.benefit-agent-panel [data-benefit-agent-list] {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.agent-contact-card strong,
.viewed-list article b {
  display: block;
  color: #111827;
}
.agent-contact-card span,
.agent-contact-card em,
.viewed-list article span,
.viewed-list article em {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-style: normal;
}
.benefit-sort-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 14px;
}
.benefit-sort-toolbar label,
.benefit-agent-panel label {
  display: inline-grid;
  gap: 6px;
  color: #475569;
  font-weight: 800;
}
.sitemap-status-page a {
  position: relative;
  overflow: visible !important;
}
.sitemap-logic-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.2;
  cursor: help;
}
.sitemap-flow-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 40;
  display: none;
  width: min(360px, 86vw);
  transform: translateX(-50%);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15,23,42,.18);
  color: #111827;
  text-align: left;
}
.sitemap-logic-badge:hover > .sitemap-flow-tooltip,
.sitemap-logic-badge:focus > .sitemap-flow-tooltip,
.sitemap-logic-badge:focus-within > .sitemap-flow-tooltip,
.sitemap-status-page a:hover .sitemap-logic-badge > .sitemap-flow-tooltip,
.sitemap-status-page a:focus-within .sitemap-logic-badge > .sitemap-flow-tooltip {
  display: grid;
  gap: 6px;
}
.sitemap-flow-tooltip b {
  color: #2563eb;
}
.sitemap-flow-tooltip em {
  color: #334155;
  font-style: normal;
  line-height: 1.45;
}
.sitemap-flow-tooltip ol {
  margin: 2px 0 0 18px;
  padding: 0;
  color: #334155;
  font-weight: 800;
  line-height: 1.45;
}
.sitemap-flow-tooltip li + li {
  margin-top: 5px;
}
@media (max-width: 960px) {
  .free-real-map { min-height: 440px; }
  .rental-inline-form,
  .benefit-summary-card dl,
  .favorite-dashboard-card dl,
  .favorite-compare-grid dl {
    grid-template-columns: 1fr;
  }
  .favorite-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .agent-approval-card { grid-template-columns: 1fr; }
}

/* ===== ver47 index landing-style opening samples ===== */
.landing-sample {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(380px, 1.08fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
  min-height: clamp(560px, 82vh, 850px);
  padding: clamp(58px, 8vw, 112px) clamp(22px, 7vw, 92px);
  background: #fff;
  overflow: hidden;
}
.landing-sample:nth-of-type(odd) {
  grid-template-columns: minmax(380px, 1.08fr) minmax(320px, .92fr);
  background: #f8fafc;
}
.landing-copy h2 {
  margin: 8px 0 14px;
  color: #111827;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: 0;
}
.landing-copy p:not(.eyebrow) {
  max-width: 560px;
  color: #526071;
  font-size: 18px;
  line-height: 1.7;
}
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
.landing-actions a,
.landing-actions span {
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 1000;
  text-decoration: none;
}
.landing-actions a {
  background: #ed3b32;
  color: #fff;
}
.landing-actions span {
  background: #f1f5f9;
  color: #334155;
}
.landing-visual {
  position: relative;
  min-height: 470px;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff, #eef4ff);
  box-shadow: 0 30px 70px rgba(15, 23, 42, .13);
  overflow: hidden;
}
.finance-landing {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 44px;
  background: #101828;
}
.finance-landing article,
.admin-landing article {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-radius: 22px;
  padding: 22px;
  background: #fff;
  color: #111827;
  font-weight: 1000;
  animation: landFloat 3.2s ease-in-out infinite;
}
.finance-landing article:nth-child(2),
.admin-landing article:nth-child(2) { animation-delay: .25s; }
.finance-landing article:nth-child(3),
.admin-landing article:nth-child(3) { animation-delay: .5s; }
.finance-landing b { color: #ed3b32; font-size: 28px; }
.map-landing [data-mini-map] {
  position: absolute;
  inset: 0;
  background: #dbeafe;
}
.map-landing i {
  position: absolute;
  border-radius: 999px;
  background: #bfdbfe;
}
.map-landing i:nth-child(1) { width: 86%; height: 26px; left: 7%; top: 32%; transform: rotate(-9deg); }
.map-landing i:nth-child(2) { width: 28px; height: 74%; left: 48%; top: 13%; transform: rotate(12deg); }
.map-landing i:nth-child(3) { width: 70%; height: 22px; left: 15%; bottom: 24%; transform: rotate(18deg); }
.map-landing button {
  position: absolute;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #ed3b32;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(237,59,50,.24);
  animation: landPin 3s ease-in-out infinite;
}
.map-landing button:nth-of-type(1) { left: 16%; top: 22%; }
.map-landing button:nth-of-type(2) { right: 14%; top: 36%; animation-delay: .35s; }
.map-landing button:nth-of-type(3) { left: 38%; bottom: 19%; animation-delay: .7s; }
.paywall-landing {
  display: grid;
  place-items: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 48%, #fff1f0, #fff 60%);
}

/* ver52: 인덱스 오프닝 2번 - 어두운 문틈에서 빛이 열리는 더블베네핏 오프닝입니다. */
.opening-door-v2 {
  position: relative;
  isolation: isolate;
  background: #000 !important;
  color: #fff;
}

.opening-door-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 36%, rgba(255, 184, 54, .28), transparent 26%),
    radial-gradient(circle at 54% 52%, rgba(237, 59, 50, .10), transparent 34%),
    #000;
  animation: doorV2SectionBright 5.2s ease-in-out infinite;
}

.opening-door-v2 .door-v2-copy h2,
.opening-door-v2 .door-v2-copy p,
.opening-door-v2 .door-v2-copy .eyebrow {
  color: #fff;
  text-shadow: 0 18px 38px rgba(0, 0, 0, .45);
}

.opening-door-v2 .door-v2-copy .eyebrow {
  color: #fbbf24;
}

.opening-door-v2 .opening-link,
.opening-door-v2 .landing-actions a {
  background: #ed3b32;
  color: #fff;
  box-shadow: 0 18px 42px rgba(237, 59, 50, .32);
}

.opening-door-v2 .landing-actions span {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .82);
}

.door-v2-stage {
  position: relative;
  min-height: clamp(430px, 58vw, 640px);
  border-radius: 32px;
  overflow: hidden;
  background: #000 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
}

.door-v2-stage::before {
  display: none;
}

.door-v2-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  transform: scale(1.08);
  animation: doorV2ImageReveal 5.2s ease-in-out infinite;
}

.door-v2-glow {
  position: absolute;
  right: 6%;
  top: 8%;
  width: 30%;
  height: 58%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 202, 78, .78), rgba(255, 181, 46, .18) 46%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: doorV2Glow 5.2s ease-in-out infinite;
}

.door-v2-beam {
  position: absolute;
  right: 8%;
  bottom: -4%;
  width: 62%;
  height: 55%;
  background: linear-gradient(110deg, rgba(255, 180, 44, .92), rgba(255, 196, 71, .46) 52%, transparent 76%);
  clip-path: polygon(66% 0, 100% 8%, 76% 100%, 0 100%);
  filter: blur(.4px);
  transform-origin: 100% 0;
  animation: doorV2Beam 5.2s ease-in-out infinite;
}

.door-v2-panel {
  position: absolute;
  right: 13%;
  top: 13%;
  width: 17%;
  height: 48%;
  border-radius: 2px;
  background: linear-gradient(100deg, #050510, #11112b 62%, #020207);
  box-shadow: inset -10px 0 0 rgba(255, 193, 64, .18), 0 0 28px rgba(0, 0, 0, .9);
  transform-origin: right center;
  animation: doorV2PanelOpen 5.2s ease-in-out infinite;
}

.door-v2-stage strong,
.door-v2-stage em {
  position: absolute;
  left: 9%;
  z-index: 4;
  color: #fff;
  text-shadow: 0 14px 34px rgba(0, 0, 0, .72);
  animation: doorV2TextIn 5.2s ease-in-out infinite;
}

.door-v2-stage strong {
  top: 40%;
  max-width: 54%;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
}

.door-v2-stage strong::first-letter {
  color: #ed3b32;
}

.door-v2-stage em {
  top: calc(40% + clamp(76px, 8vw, 118px));
  color: rgba(255, 255, 255, .84);
  font-style: normal;
  font-weight: 900;
}

@keyframes doorV2SectionBright {
  0%, 18% { filter: brightness(.68); }
  45%, 72% { filter: brightness(1.16); }
  100% { filter: brightness(.84); }
}

@keyframes doorV2ImageReveal {
  0% { opacity: .26; transform: scale(1.12) translateX(18px); filter: brightness(.44); }
  28% { opacity: .58; filter: brightness(.78); }
  56% { opacity: .98; transform: scale(1.04) translateX(0); filter: brightness(1.18); }
  100% { opacity: .76; transform: scale(1.08); filter: brightness(.88); }
}

@keyframes doorV2Glow {
  0%, 14% { opacity: .08; transform: scale(.72); }
  48%, 70% { opacity: 1; transform: scale(1.18); }
  100% { opacity: .36; transform: scale(.9); }
}

@keyframes doorV2Beam {
  0%, 16% { opacity: .04; transform: scaleX(.18) skewX(-9deg); }
  44% { opacity: .9; transform: scaleX(.82) skewX(-3deg); }
  68% { opacity: 1; transform: scaleX(1.05) skewX(0); }
  100% { opacity: .42; transform: scaleX(.58) skewX(-5deg); }
}

@keyframes doorV2PanelOpen {
  0%, 18% { opacity: 1; transform: perspective(700px) rotateY(0deg) translateX(0); }
  45%, 72% { opacity: .82; transform: perspective(700px) rotateY(-64deg) translateX(-18px); }
  100% { opacity: .92; transform: perspective(700px) rotateY(-18deg); }
}

@keyframes doorV2TextIn {
  0%, 22% { opacity: 0; transform: translateY(18px); }
  46%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: .62; transform: translateY(6px); }
}

@media (max-width: 760px) {
  .opening-door-v2,
  .opening-door-v2-index {
    grid-template-columns: 1fr !important;
  }
  .door-v2-stage {
    min-height: 420px;
    border-radius: 24px;
  }
  .door-v2-stage strong {
    left: 8%;
    top: 36%;
    max-width: 68%;
  }
}

/* ver54: 홈페이지 안의 어두운 컨테이너를 흰색 계열 UI로 통일합니다. */
.board-lounge-hero,
.board-live-panel,
.main-replica-hero,
.opening-door-v2,
.opening-door-v2::before,
.door-v2-stage,
.finance-landing,
.finance-phone,
.terminal-dashboard,
.benefit-terminal,
.lightboard-stage,
.laser-stage,
.scan3d-stage,
.console-stage,
.finale-stage,
.operational-hero,
.operational-hero.agent-live,
.operational-hero.admin-live,
.operational-hero.points-live,
.saas-calendar-stage,
.console-dashboard-stage,
.ziptier-3d-cta,
.paywall-landing,
.admin-landing,
.brand-landing {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, .08) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08) !important;
}

.board-lounge-hero::before,
.ziptier-3d-cta::before,
.hero-dark-layer {
  background: rgba(255, 255, 255, .86) !important;
}

.board-lounge-hero h1,
.board-lounge-hero p,
.board-live-panel strong,
.board-live-panel em,
.opening-door-v2 .door-v2-copy h2,
.opening-door-v2 .door-v2-copy p,
.main-replica-hero h1,
.main-replica-hero .sub,
.finance-phone b,
.finance-phone span,
.terminal-dashboard,
.benefit-terminal,
.laser-stage,
.scan3d-stage,
.console-stage,
.finale-stage,
.operational-hero h1,
.operational-hero p:not(.eyebrow),
.ziptier-3d-cta h2,
.ziptier-3d-cta p,
.ziptier-3d-cta a.secondary,
.door-v2-stage strong,
.door-v2-stage em {
  color: #111827 !important;
  text-shadow: none !important;
}

.opening-door-v2 .door-v2-copy .eyebrow,
.ziptier-3d-cta .eyebrow,
.service-ad-banner i,
.highlight-ci {
  color: #ed3b32 !important;
}

.door-v2-stage img {
  opacity: .18 !important;
  filter: brightness(1.5) contrast(.72) saturate(.72) !important;
}

.door-v2-glow,
.door-v2-beam {
  mix-blend-mode: multiply;
  opacity: .38;
}

.door-v2-panel,
.ziptier-orbit,
.finance-phone i,
.saas-sidebar i,
.terminal-top,
.unlock-ring {
  background: #f1f5f9 !important;
  color: #111827 !important;
  border-color: #e2e8f0 !important;
}

.laser-house,
.room-plane,
.scan3d-stage i,
.unlock-ring {
  border-color: #ed3b32 !important;
}

.scan3d-stage b,
.finale-stage strong {
  color: #111827 !important;
}

.locked-phone,
.open-phone,
.pay-button-motion {
  border-radius: 24px;
  padding: 22px 28px;
  background: #fff;
  color: #111827;
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  font-size: 28px;
  font-weight: 1000;
}
.pay-button-motion {
  background: #ed3b32;
  color: #fff;
  animation: landPulse 2.2s ease-in-out infinite;
}
.cert-landing {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 52px;
  background: #f8fafc;
}
.cert-landing article {
  width: 260px;
  border-radius: 20px;
  padding: 18px;
  background: #fff;
  color: #111827;
  font-weight: 1000;
  box-shadow: 0 16px 36px rgba(15,23,42,.1);
  animation: landSlide 3s ease-in-out infinite;
}
.cert-landing article:nth-child(2) { animation-delay: .25s; }
.cert-landing article:nth-child(3) { animation-delay: .5s; }
.cert-landing strong {
  position: absolute;
  right: 10%;
  top: 32%;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 10px solid #ed3b32;
  border-radius: 50%;
  color: #ed3b32;
  transform: rotate(-14deg);
}
.room-landing {
  background: #101828;
  perspective: 900px;
}
.room-landing span {
  position: absolute;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.05);
}
.room-landing span:nth-child(1) { left: 18%; right: 18%; bottom: 18%; height: 190px; transform: rotateX(64deg); }
.room-landing span:nth-child(2) { left: 18%; right: 18%; top: 18%; height: 210px; }
.room-landing span:nth-child(3) { inset: 0; border: 0; background: linear-gradient(100deg, transparent 35%, rgba(237,59,50,.58), transparent 65%); animation: landScan 3s linear infinite; }
.room-landing b {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 46px;
  transform: translate(-50%, -50%);
}
.admin-landing {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 44px;
  background: #111827;
}
.admin-landing article b { color: #047857; font-size: 28px; }
.brand-landing {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, #111827, #05070d);
}
.brand-landing strong {
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: #ed3b32;
  color: #fff;
  font-size: 48px;
  font-weight: 1000;
  animation: landPulse 2.8s ease-in-out infinite;
}
.brand-landing i {
  position: absolute;
  border-radius: 999px;
  padding: 12px 16px;
  background: #fff;
  color: #ed3b32;
  font-style: normal;
  font-weight: 1000;
}
.brand-landing i:nth-of-type(1) { left: 12%; top: 18%; }
.brand-landing i:nth-of-type(2) { right: 13%; top: 22%; }
.brand-landing i:nth-of-type(3) { left: 18%; bottom: 18%; }
.brand-landing i:nth-of-type(4) { right: 16%; bottom: 16%; }
@keyframes landFloat { 50% { transform: translateY(-12px); } }
@keyframes landPin { 50% { transform: translateY(-12px); } }
@keyframes landPulse { 50% { transform: scale(1.06); } }
@keyframes landSlide { 50% { transform: translateX(24px); } }
@keyframes landScan { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@media (max-width: 960px) {
  .landing-sample,
  .landing-sample:nth-of-type(odd) { grid-template-columns: 1fr; }
  .landing-visual { min-height: 390px; }
}

/* ===== ver47 owner price edit and automatic price-change exposure ===== */
.owner-listing-editor,
.price-change-list {
  display: grid;
  gap: 12px;
}
.owner-price-card .price-edit-form {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.owner-price-card .price-edit-form[hidden] {
  display: none !important;
}
.owner-price-card label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 900;
}
.owner-price-card input {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px 13px;
  font: inherit;
}
.price-change-card .listing-chip.ok {
  background: #ecfdf5;
  color: #047857;
}
.price-change-card .listing-chip.muted {
  background: #fff7ed;
  color: #c2410c;
}
@media (max-width: 820px) {
  .owner-price-card .price-edit-form { grid-template-columns: 1fr; }
}

/* ===== ver55 global breathing room and corrected opening 02 timing ===== */
.page-shell {
  padding-top: clamp(44px, 6vw, 82px);
  padding-bottom: clamp(72px, 8vw, 118px);
}

.page-shell > * + * {
  margin-top: clamp(34px, 5vw, 72px) !important;
}

.section,
.panel-page,
.board-lounge,
.legal-page,
.agent-shell,
.map-layout,
.operational-layout,
.listing-benefit-page,
.points-ledger,
.benefit-summary-list,
.favorite-dashboard-grid {
  margin-top: clamp(22px, 3vw, 44px);
  margin-bottom: clamp(34px, 4vw, 64px);
}

.section,
.panel-page,
.community-main-feed,
.community-side > section,
.community-bottom-grid > section,
.feed-column,
.flow-card,
.mini-card,
.welcome-card,
.listing-card,
.live-listing-card,
.favorite-dashboard-card,
.benefit-summary-card,
.board-write-card,
.board-row,
.legal-page article,
.business-table,
.property-result-card {
  padding-block: max(var(--local-pad-y, 0px), 24px);
}

.card-grid,
.flow-grid,
.community-feed-grid,
.community-bottom-grid,
.board-dashboard-grid,
.legal-grid,
.sitemap-status-list,
.favorite-dashboard-list,
.favorite-compare-grid,
.viewed-list,
.point-list,
.benefit-summary-list,
.agent-contact-list,
.listing-live-list {
  gap: clamp(18px, 2.5vw, 30px) !important;
}

.section-head,
.community-section-title,
.page-title,
.center-title {
  margin-bottom: clamp(22px, 3vw, 38px);
}

.section h2,
.panel-page h1,
.panel-page h2,
.community-section-title h2 {
  line-height: 1.18;
}

.section p,
.panel-page p,
.board-row p,
.listing-card p,
.live-listing-card p,
.favorite-dashboard-card p,
.benefit-summary-card p {
  line-height: 1.74;
}

body[data-page="메인 홈페이지"] .opening-door-v2,
.opening-door-v2 {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

body[data-page="메인 홈페이지"] .opening-door-v2::before,
.opening-door-v2::before {
  background:
    radial-gradient(circle at 78% 36%, rgba(255, 185, 47, .30), transparent 24%),
    radial-gradient(circle at 62% 54%, rgba(255, 185, 47, .12), transparent 36%),
    #000 !important;
  animation: doorV2SectionBright 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

body[data-page="메인 홈페이지"] .door-v2-stage,
.door-v2-stage {
  background: #000 !important;
  color: #fff !important;
  min-height: clamp(480px, 58vw, 680px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52) !important;
}

.opening-door-v2 .door-v2-copy {
  max-width: 620px;
}

.opening-door-v2 .door-v2-copy h2,
.opening-door-v2 .door-v2-copy p {
  color: #fff !important;
  text-shadow: 0 18px 38px rgba(0, 0, 0, .55) !important;
}

.opening-door-v2 .door-v2-copy h2 {
  line-height: 1.14;
}

.opening-door-v2 .door-v2-copy .eyebrow {
  color: #fbbf24 !important;
}

.door-v2-stage img {
  opacity: .74 !important;
  filter: brightness(.92) contrast(1.05) saturate(.98) !important;
  animation: doorV2ImageReveal 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

.door-v2-glow {
  mix-blend-mode: screen;
  opacity: 1;
  animation: doorV2Glow 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

.door-v2-beam {
  mix-blend-mode: screen;
  opacity: 1;
  transform-origin: 100% 0;
  animation: doorV2Beam 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

.door-v2-panel {
  background: linear-gradient(100deg, #050510, #11112b 62%, #020207) !important;
  color: #fff !important;
  animation: doorV2PanelOpen 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

.door-v2-stage strong,
.door-v2-stage em {
  color: #fff !important;
  text-shadow: 0 14px 34px rgba(0, 0, 0, .76) !important;
  animation: doorV2TextIn 6s cubic-bezier(.2,.72,.2,1) infinite !important;
}

.door-v2-stage strong {
  left: 8%;
  top: 34%;
  max-width: 46%;
  font-size: clamp(26px, 3.8vw, 48px);
  line-height: 1.16;
}

.door-v2-stage em {
  left: 8%;
  top: auto;
  bottom: 22%;
  max-width: 48%;
  line-height: 1.55;
}

@keyframes doorV2SectionBright {
  0%, 18% { filter: brightness(.52); }
  34% { filter: brightness(.82); }
  58%, 78% { filter: brightness(1.16); }
  100% { filter: brightness(.64); }
}

@keyframes doorV2ImageReveal {
  0%, 18% { opacity: .28; transform: scale(1.12) translateX(18px); filter: brightness(.42); }
  34% { opacity: .58; transform: scale(1.09) translateX(10px); filter: brightness(.72); }
  58%, 78% { opacity: .96; transform: scale(1.04) translateX(0); filter: brightness(1.16); }
  100% { opacity: .38; transform: scale(1.10) translateX(14px); filter: brightness(.56); }
}

@keyframes doorV2Glow {
  0%, 18% { opacity: .08; transform: scale(.72); }
  34% { opacity: .46; transform: scale(.92); }
  58%, 78% { opacity: 1; transform: scale(1.18); }
  100% { opacity: .16; transform: scale(.78); }
}

@keyframes doorV2Beam {
  0%, 18% { opacity: .04; transform: scaleX(.16) skewX(-9deg); }
  34% { opacity: .48; transform: scaleX(.52) skewX(-5deg); }
  58%, 78% { opacity: 1; transform: scaleX(1.04) skewX(0); }
  100% { opacity: .12; transform: scaleX(.22) skewX(-8deg); }
}

@keyframes doorV2PanelOpen {
  0%, 18% { opacity: 1; transform: perspective(700px) rotateY(0deg) translateX(0); }
  34% { opacity: .96; transform: perspective(700px) rotateY(-32deg) translateX(-8px); }
  58%, 78% { opacity: .82; transform: perspective(700px) rotateY(-64deg) translateX(-18px); }
  100% { opacity: .98; transform: perspective(700px) rotateY(-6deg) translateX(-2px); }
}

@keyframes doorV2TextIn {
  0%, 28% { opacity: 0; transform: translateY(18px); }
  48%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 760px) {
  .page-shell {
    padding-top: 32px;
    padding-bottom: 82px;
  }
  .section,
  .panel-page,
  .board-lounge {
    margin-bottom: 44px;
  }
  .door-v2-stage strong {
    top: 30%;
    max-width: 74%;
  }
  .door-v2-stage em {
    bottom: 18%;
    max-width: 78%;
  }
}

/* ===== ver56 container-to-container spacing only ===== */
.page-shell {
  padding-top: 34px !important;
}

.page-shell > *:first-child {
  margin-top: 0 !important;
}

.page-shell > * + * {
  margin-top: clamp(76px, 8vw, 138px) !important;
}

main.page-shell > section + section,
main.page-shell > .panel-page + .panel-page,
main.page-shell > .section + .section,
main.page-shell > .landing-sample + .landing-sample,
main.page-shell > .opening-v42 + .opening-v42,
main.page-shell > .opening-v43 + .opening-v43,
main.page-shell > .opening-new + .opening-new,
main.page-shell > .operational-layout + .operational-layout,
main.page-shell > .board-lounge + .section,
main.page-shell > .section + .board-lounge {
  margin-top: clamp(92px, 10vw, 168px) !important;
}

.board-lounge > * + *,
.community-main-feed > * + *,
.panel-page > section + section,
.section > .card-grid + .card-grid,
.section > .flow-grid + .flow-grid,
.section > .listing-grid + .listing-grid,
.section > .board-dashboard-grid + .board-dashboard-grid {
  margin-top: clamp(38px, 5vw, 76px) !important;
}

@media (max-width: 760px) {
  .page-shell {
    padding-top: 32px !important;
  }
  .page-shell > * + *,
  main.page-shell > section + section,
  main.page-shell > .panel-page + .panel-page,
  main.page-shell > .section + .section,
  main.page-shell > .landing-sample + .landing-sample,
  main.page-shell > .opening-v42 + .opening-v42 {
    margin-top: 64px !important;
  }
}

/* ===== ver58 compact container spacing and single-panel openings ===== */
.page-shell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-shell > *:first-child {
  margin-top: 0 !important;
}

.page-shell > * + *,
main.page-shell > section + section,
main.page-shell > .panel-page + .panel-page,
main.page-shell > .section + .section,
main.page-shell > .landing-sample + .landing-sample,
main.page-shell > .opening-v42 + .opening-v42,
main.page-shell > .opening-v43 + .opening-v43,
main.page-shell > .opening-new + .opening-new,
main.page-shell > .operational-layout + .operational-layout,
main.page-shell > .board-lounge + .section,
main.page-shell > .section + .board-lounge {
  margin-top: 0 !important;
}

.section,
.panel-page,
.board-lounge,
.legal-page,
.agent-shell,
.map-layout,
.operational-layout,
.listing-benefit-page,
.points-ledger,
.benefit-summary-list,
.favorite-dashboard-grid {
  margin-top: 0 !important;
  margin-bottom: 26px !important;
}

.board-lounge > * + *,
.community-main-feed > * + *,
.panel-page > section + section,
.section > .card-grid + .card-grid,
.section > .flow-grid + .flow-grid,
.section > .listing-grid + .listing-grid,
.section > .board-dashboard-grid + .board-dashboard-grid {
  margin-top: 16px !important;
}

.opening-v42:not(.opening-v42-02),
.landing-sample:not(.landing-sample-02) {
  position: relative !important;
  isolation: isolate;
  display: block !important;
  width: min(1180px, calc(100% - 36px));
  min-height: clamp(520px, 72vh, 760px);
  margin: 26px auto !important;
  padding: clamp(42px, 7vw, 88px) clamp(24px, 6vw, 76px) !important;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(237, 59, 50, .12), transparent 27%),
    radial-gradient(circle at 18% 82%, rgba(66, 182, 255, .16), transparent 28%),
    #fff !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.opening-v42:not(.opening-v42-02)::before,
.landing-sample:not(.landing-sample-02)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,255,255,.72) 44%, rgba(248,250,252,.34)),
    linear-gradient(90deg, rgba(226,232,240,.42) 1px, transparent 1px),
    linear-gradient(rgba(226,232,240,.34) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}

.opening-v42:not(.opening-v42-02)::after,
.landing-sample:not(.landing-sample-02)::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -18%;
  z-index: -1;
  width: min(620px, 58vw);
  height: min(620px, 58vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237,59,50,.14), rgba(66,182,255,.08) 45%, transparent 70%);
  animation: singleOpeningGlow 8s ease-in-out infinite alternate;
}

.opening-v42:not(.opening-v42-02) .op42-copy,
.landing-sample:not(.landing-sample-02) .landing-copy {
  position: relative;
  z-index: 3;
  max-width: min(600px, 92%);
}

.opening-v42:not(.opening-v42-02) .op42-copy h2,
.landing-sample:not(.landing-sample-02) .landing-copy h2 {
  max-width: 720px;
}

.opening-v42:not(.opening-v42-02) .op42-stage,
.landing-sample:not(.landing-sample-02) .landing-visual {
  position: absolute !important;
  inset: clamp(22px, 4vw, 48px);
  z-index: 1;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 24px;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .96;
  pointer-events: none;
}

.opening-v42:not(.opening-v42-02) .op42-stage::before,
.landing-sample:not(.landing-sample-02) .landing-visual::before {
  display: none !important;
}

.opening-v42:not(.opening-v42-02) .op42-stage > *,
.landing-sample:not(.landing-sample-02) .landing-visual > * {
  pointer-events: none;
}

.opening-v42-03 .product-showcase-stage,
.landing-sample-06 .room-landing {
  transform: translateX(24%);
}

.opening-v42-04 .map-explorer-stage,
.landing-sample-03 .map-landing {
  transform: translateX(18%);
}

.opening-v42-05 .saas-calendar-stage,
.landing-sample-07 .admin-landing {
  transform: translateX(22%);
}

.opening-v42-06 .review-stack-stage,
.landing-sample-04 .paywall-landing {
  transform: translateX(22%);
}

.opening-v42-07 .policy-desk-stage,
.landing-sample-05 .cert-landing {
  transform: translateX(24%);
}

.opening-v42-08 .console-dashboard-stage,
.landing-sample-08 .brand-landing {
  transform: translateX(22%);
}

.opening-v42:not(.opening-v42-02) .showcase-device,
.opening-v42:not(.opening-v42-02) .saas-board,
.opening-v42:not(.opening-v42-02) .review-card,
.opening-v42:not(.opening-v42-02) .doc-stack,
.opening-v42:not(.opening-v42-02) .console-dashboard-stage article,
.landing-sample:not(.landing-sample-02) .landing-visual article,
.landing-sample:not(.landing-sample-02) .locked-phone,
.landing-sample:not(.landing-sample-02) .pay-button-motion,
.landing-sample:not(.landing-sample-02) .open-phone,
.landing-sample:not(.landing-sample-02) .brand-landing strong {
  box-shadow: 0 18px 46px rgba(15,23,42,.14) !important;
}

@keyframes singleOpeningGlow {
  0% { transform: translate3d(0,0,0) scale(.92); opacity: .56; }
  100% { transform: translate3d(-8%, 8%, 0) scale(1.08); opacity: .95; }
}

@media (max-width: 960px) {
  .opening-v42:not(.opening-v42-02),
  .landing-sample:not(.landing-sample-02) {
    width: min(100% - 24px, 720px);
    min-height: 620px;
    margin: 18px auto !important;
    padding: 34px 22px !important;
  }

  .opening-v42:not(.opening-v42-02) .op42-stage,
  .landing-sample:not(.landing-sample-02) .landing-visual {
    inset: auto 12px 18px 12px;
    height: 330px;
    transform: none !important;
    opacity: .82;
  }

  .opening-v42:not(.opening-v42-02) .op42-copy,
  .landing-sample:not(.landing-sample-02) .landing-copy {
    max-width: 100%;
  }
}

/* ===== ver59 distinct opening 03-08 motion concepts ===== */
.opening-v42-03,
.landing-sample-06 {
  background:
    radial-gradient(circle at 78% 28%, rgba(66,182,255,.20), transparent 26%),
    radial-gradient(circle at 58% 70%, rgba(237,59,50,.11), transparent 30%),
    linear-gradient(135deg, #ffffff, #f4f8ff) !important;
}
.opening-v42-03 .product-showcase-stage,
.landing-sample-06 .room-landing {
  perspective: 1000px;
  transform: translateX(24%) rotateX(2deg) !important;
  animation: open59HoloDrift 7s ease-in-out infinite;
}
.opening-v42-03 .showcase-device {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,242,255,.92));
  transform: translate(-50%, -50%) perspective(900px) rotateX(9deg) rotateY(-14deg);
  animation: open59DeviceTilt 5.6s ease-in-out infinite;
}
.opening-v42-03 .showcase-device i,
.landing-sample-06 .room-landing span:nth-child(3) {
  animation: open59ScanSweep 2.8s linear infinite !important;
}
.opening-v42-03 .room-cube {
  animation: open59CubeOrbit 5.2s ease-in-out infinite;
}
.opening-v42-03 .cube2 { animation-delay: .35s; }
.opening-v42-03 .cube3 { animation-delay: .7s; }
.opening-v42-03 .cube4 { animation-delay: 1.05s; }

.opening-v42-04,
.landing-sample-03 {
  background:
    radial-gradient(circle at 82% 52%, rgba(14,165,233,.18), transparent 25%),
    linear-gradient(135deg, #ffffff, #f0f9ff) !important;
}
.opening-v42-04 .map-explorer-stage,
.landing-sample-03 .map-landing {
  transform: translateX(18%) scale(1.02) !important;
  animation: open59MapPan 8s ease-in-out infinite;
}
.opening-v42-04 .street,
.landing-sample-03 .map-landing i {
  background: linear-gradient(90deg, #bfdbfe, #dbeafe, #93c5fd);
  background-size: 220% 100%;
  animation: open59RoadFlow 3.6s linear infinite;
}
.opening-v42-04 .map-explorer-stage button,
.landing-sample-03 .map-landing button {
  animation: open59PinDrop 3.8s ease-in-out infinite !important;
}
.opening-v42-04 .map-explorer-stage button:nth-of-type(2),
.landing-sample-03 .map-landing button:nth-of-type(2) { animation-delay: .25s !important; }
.opening-v42-04 .map-explorer-stage button:nth-of-type(3),
.landing-sample-03 .map-landing button:nth-of-type(3) { animation-delay: .5s !important; }
.opening-v42-04 .map-explorer-stage button:nth-of-type(4) { animation-delay: .75s !important; }
.opening-v42-04 .map-explorer-stage button:nth-of-type(5) { animation-delay: 1s !important; }
.opening-v42-04 .map-popover {
  animation: open59Popover 4.2s ease-in-out infinite;
}

.opening-v42-05,
.landing-sample-07 {
  background:
    radial-gradient(circle at 70% 22%, rgba(34,197,94,.15), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(237,59,50,.10), transparent 26%),
    linear-gradient(135deg, #ffffff, #f7fff9) !important;
}
.opening-v42-05 .saas-calendar-stage,
.landing-sample-07 .admin-landing {
  transform: translateX(22%) !important;
  animation: open59ConsoleBreath 6.4s ease-in-out infinite;
}
.opening-v42-05 .saas-sidebar i,
.landing-sample-07 .admin-landing article {
  animation: open59StatusBlink 3.2s ease-in-out infinite;
}
.opening-v42-05 .saas-sidebar i:nth-child(2),
.landing-sample-07 .admin-landing article:nth-child(2) { animation-delay: .35s; }
.opening-v42-05 .saas-sidebar i:nth-child(3),
.landing-sample-07 .admin-landing article:nth-child(3) { animation-delay: .7s; }
.opening-v42-05 .saas-board {
  animation: open59CalendarFlip 5s ease-in-out infinite;
}
.opening-v42-05 .task-pill {
  animation: open59TaskFlow 4.8s ease-in-out infinite;
}
.opening-v42-05 .tp2 { animation-delay: .45s; }
.opening-v42-05 .tp3 { animation-delay: .9s; }

.opening-v42-06,
.landing-sample-04 {
  background:
    radial-gradient(circle at 78% 18%, rgba(245,158,11,.17), transparent 28%),
    linear-gradient(135deg, #ffffff, #fff7ed) !important;
}
.opening-v42-06 .review-stack-stage,
.landing-sample-04 .paywall-landing {
  transform: translateX(22%) !important;
  animation: open59CardStage 6.8s ease-in-out infinite;
}
.opening-v42-06 .review-card {
  transform-origin: 50% 100%;
  animation: open59ReviewCarousel 5.2s ease-in-out infinite !important;
}
.opening-v42-06 .rv1 { --r: -7deg; }
.opening-v42-06 .rv2 { --r: 6deg; }
.opening-v42-06 .rv3 { --r: -2deg; }
.opening-v42-06 .rv2 { animation-delay: .45s !important; }
.opening-v42-06 .rv3 { animation-delay: .9s !important; }
.opening-v42-06 .review-card span {
  text-shadow: 0 0 20px rgba(245,158,11,.34);
  animation: open59StarGlow 1.8s ease-in-out infinite;
}
.landing-sample-04 .locked-phone {
  animation: open59LockHide 5.4s ease-in-out infinite;
}
.landing-sample-04 .pay-button-motion {
  animation: open59PayPulse 5.4s ease-in-out infinite !important;
}
.landing-sample-04 .open-phone {
  animation: open59PhoneReveal 5.4s ease-in-out infinite;
}

.opening-v42-07,
.landing-sample-05 {
  background:
    radial-gradient(circle at 74% 30%, rgba(99,102,241,.13), transparent 25%),
    linear-gradient(135deg, #ffffff, #f8f7ff) !important;
}
.opening-v42-07 .policy-desk-stage,
.landing-sample-05 .cert-landing {
  transform: translateX(24%) !important;
  animation: open59PaperDesk 7s ease-in-out infinite;
}
.opening-v42-07 .doc-stack article,
.landing-sample-05 .cert-landing article {
  animation: open59DocFan 4.8s ease-in-out infinite !important;
}
.opening-v42-07 .doc-stack article:nth-child(2),
.landing-sample-05 .cert-landing article:nth-child(2) { animation-delay: .22s !important; }
.opening-v42-07 .doc-stack article:nth-child(3),
.landing-sample-05 .cert-landing article:nth-child(3) { animation-delay: .44s !important; }
.opening-v42-07 .doc-stack article:nth-child(4) { animation-delay: .66s !important; }
.opening-v42-07 .approval-stamp,
.landing-sample-05 .cert-landing strong {
  animation: open59StampHit 3.8s cubic-bezier(.2,.9,.2,1) infinite !important;
}

.opening-v42-08,
.landing-sample-08 {
  background:
    radial-gradient(circle at 74% 30%, rgba(237,59,50,.15), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(66,182,255,.18), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8fafc) !important;
}
.opening-v42-08 .console-dashboard-stage,
.landing-sample-08 .brand-landing {
  transform: translateX(22%) !important;
  animation: open59FinaleFloat 7s ease-in-out infinite;
}
.opening-v42-08 .dash-top {
  background: linear-gradient(90deg, #e2e8f0, #ed3b32, #e2e8f0);
  background-size: 220% 100%;
  animation: open59DashScan 2.8s linear infinite;
}
.opening-v42-08 .console-dashboard-stage article {
  animation: open59WidgetWave 4.8s ease-in-out infinite;
}
.opening-v42-08 .console-dashboard-stage article:nth-of-type(2) { animation-delay: .22s; }
.opening-v42-08 .console-dashboard-stage article:nth-of-type(3) { animation-delay: .44s; }
.opening-v42-08 .console-dashboard-stage article:nth-of-type(4) { animation-delay: .66s; }
.landing-sample-08 .brand-landing strong {
  animation: open59BrandCore 4.6s ease-in-out infinite !important;
}
.landing-sample-08 .brand-landing i {
  animation: open59BrandOrbit 5.4s ease-in-out infinite;
}
.landing-sample-08 .brand-landing i:nth-of-type(2) { animation-delay: .3s; }
.landing-sample-08 .brand-landing i:nth-of-type(3) { animation-delay: .6s; }
.landing-sample-08 .brand-landing i:nth-of-type(4) { animation-delay: .9s; }

@keyframes open59HoloDrift { 50% { transform: translateX(21%) translateY(-10px) rotateX(4deg); } }
@keyframes open59DeviceTilt {
  0%,100% { transform: translate(-50%, -50%) perspective(900px) rotateX(9deg) rotateY(-14deg) scale(1); }
  50% { transform: translate(-50%, -54%) perspective(900px) rotateX(2deg) rotateY(12deg) scale(1.04); }
}
@keyframes open59ScanSweep { from { transform: translateX(-90%) skewX(-12deg); } to { transform: translateX(90%) skewX(-12deg); } }
@keyframes open59CubeOrbit {
  0%,100% { transform: translate3d(0,0,0) rotate(0); }
  50% { transform: translate3d(18px,-24px,0) rotate(5deg) scale(1.06); }
}
@keyframes open59MapPan { 0%,100% { transform: translateX(18%) scale(1.02); } 50% { transform: translateX(15%) translateY(-8px) scale(1.06); } }
@keyframes open59RoadFlow { to { background-position: -220% 0; } }
@keyframes open59PinDrop { 0%,100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-18px) scale(1.07); } 55% { transform: translateY(0) scale(.96); } }
@keyframes open59Popover { 0%,100% { transform: translateY(10px); opacity: .78; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes open59ConsoleBreath { 50% { transform: translateX(20%) translateY(-8px) scale(1.02); } }
@keyframes open59StatusBlink { 0%,100% { filter: saturate(1); transform: translateY(0); } 50% { filter: saturate(1.45); transform: translateY(-8px); } }
@keyframes open59CalendarFlip { 0%,100% { transform: perspective(900px) rotateX(0); } 50% { transform: perspective(900px) rotateX(8deg) translateY(-8px); } }
@keyframes open59TaskFlow { 0%,100% { transform: translateX(0); opacity: .74; } 50% { transform: translateX(22px); opacity: 1; } }
@keyframes open59CardStage { 50% { transform: translateX(20%) rotate(-1deg) scale(1.02); } }
@keyframes open59ReviewCarousel { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-20px) rotate(0deg) scale(1.05); } }
@keyframes open59StarGlow { 50% { filter: brightness(1.25); transform: scale(1.05); } }
@keyframes open59LockHide { 0%,32% { opacity: 1; filter: blur(0); } 55%,100% { opacity: .38; filter: blur(2px); } }
@keyframes open59PayPulse { 0%,26% { transform: scale(.96); } 42%,70% { transform: scale(1.08); } 100% { transform: scale(.98); } }
@keyframes open59PhoneReveal { 0%,35% { opacity: .2; transform: translateY(18px); } 55%,100% { opacity: 1; transform: translateY(0); } }
@keyframes open59PaperDesk { 50% { transform: translateX(22%) rotate(1.2deg); } }
@keyframes open59DocFan { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(22px) rotate(1.8deg); } }
@keyframes open59StampHit { 0%,30%,100% { transform: rotate(-14deg) scale(1); } 44% { transform: rotate(-14deg) scale(1.16); } 54% { transform: rotate(-14deg) scale(.98); } }
@keyframes open59FinaleFloat { 50% { transform: translateX(20%) translateY(-10px) scale(1.02); } }
@keyframes open59DashScan { to { background-position: -220% 0; } }
@keyframes open59WidgetWave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes open59BrandCore { 50% { transform: scale(1.08); box-shadow: 0 24px 58px rgba(237,59,50,.22); } }
@keyframes open59BrandOrbit { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(16px,-18px,0) scale(1.05); } }

@media (max-width: 960px) {
  .opening-v42-03 .product-showcase-stage,
  .opening-v42-04 .map-explorer-stage,
  .opening-v42-05 .saas-calendar-stage,
  .opening-v42-06 .review-stack-stage,
  .opening-v42-07 .policy-desk-stage,
  .opening-v42-08 .console-dashboard-stage,
  .landing-sample-03 .map-landing,
  .landing-sample-04 .paywall-landing,
  .landing-sample-05 .cert-landing,
  .landing-sample-06 .room-landing,
  .landing-sample-07 .admin-landing,
  .landing-sample-08 .brand-landing {
    transform: none !important;
  }
}

/* ===== ver67 price-unit, non-index bright containers, and unified my-info ===== */
body:not([data-page="메인 홈페이지"]) .board-lounge-hero,
body:not([data-page="메인 홈페이지"]) .main-replica-hero,
body:not([data-page="메인 홈페이지"]) .opening-door-v2,
body:not([data-page="메인 홈페이지"]) .door-v2-stage,
body:not([data-page="메인 홈페이지"]) .finance-landing,
body:not([data-page="메인 홈페이지"]) .finance-phone,
body:not([data-page="메인 홈페이지"]) .terminal-dashboard,
body:not([data-page="메인 홈페이지"]) .benefit-terminal,
body:not([data-page="메인 홈페이지"]) .lightboard-stage,
body:not([data-page="메인 홈페이지"]) .laser-stage,
body:not([data-page="메인 홈페이지"]) .scan3d-stage,
body:not([data-page="메인 홈페이지"]) .console-stage,
body:not([data-page="메인 홈페이지"]) .finale-stage,
body:not([data-page="메인 홈페이지"]) .operational-hero,
body:not([data-page="메인 홈페이지"]) .operational-hero.agent-live,
body:not([data-page="메인 홈페이지"]) .operational-hero.admin-live,
body:not([data-page="메인 홈페이지"]) .operational-hero.points-live,
body:not([data-page="메인 홈페이지"]) .saas-calendar-stage,
body:not([data-page="메인 홈페이지"]) .console-dashboard-stage,
body:not([data-page="메인 홈페이지"]) .ziptier-3d-cta,
body:not([data-page="메인 홈페이지"]) .paywall-landing,
body:not([data-page="메인 홈페이지"]) .admin-landing,
body:not([data-page="메인 홈페이지"]) .brand-landing,
body:not([data-page="메인 홈페이지"]) .point-total-card,
body:not([data-page="메인 홈페이지"]) .room-landing,
body:not([data-page="메인 홈페이지"]) .fallback-map .map-cluster,
body:not([data-page="메인 홈페이지"]) .org-root-node,
body:not([data-page="메인 홈페이지"]) .node-root,
body:not([data-page="메인 홈페이지"]) .node-main,
body:not([data-page="메인 홈페이지"]) .node-group {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, .08) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08) !important;
}

body:not([data-page="메인 홈페이지"]) .hero-dark-layer,
body:not([data-page="메인 홈페이지"]) .board-lounge-hero::before,
body:not([data-page="메인 홈페이지"]) .opening-door-v2::before,
body:not([data-page="메인 홈페이지"]) .ziptier-3d-cta::before {
  background: rgba(255, 255, 255, .90) !important;
}

body:not([data-page="메인 홈페이지"]) .board-lounge-hero h1,
body:not([data-page="메인 홈페이지"]) .board-lounge-hero p,
body:not([data-page="메인 홈페이지"]) .opening-door-v2 .door-v2-copy h2,
body:not([data-page="메인 홈페이지"]) .opening-door-v2 .door-v2-copy p,
body:not([data-page="메인 홈페이지"]) .door-v2-stage strong,
body:not([data-page="메인 홈페이지"]) .door-v2-stage em,
body:not([data-page="메인 홈페이지"]) .finance-phone b,
body:not([data-page="메인 홈페이지"]) .finance-phone span,
body:not([data-page="메인 홈페이지"]) .scan3d-stage b,
body:not([data-page="메인 홈페이지"]) .room-landing b,
body:not([data-page="메인 홈페이지"]) .brand-landing strong,
body:not([data-page="메인 홈페이지"]) .operational-hero h1,
body:not([data-page="메인 홈페이지"]) .operational-hero p:not(.eyebrow),
body:not([data-page="메인 홈페이지"]) .point-total-card,
body:not([data-page="메인 홈페이지"]) .ziptier-3d-cta h2,
body:not([data-page="메인 홈페이지"]) .ziptier-3d-cta p {
  color: #111827 !important;
  text-shadow: none !important;
}

body:not([data-page="메인 홈페이지"]) .door-v2-stage img {
  opacity: .18 !important;
  filter: brightness(1.45) contrast(.76) saturate(.75) !important;
}

body:not([data-page="메인 홈페이지"]) .door-v2-panel,
body:not([data-page="메인 홈페이지"]) .finance-phone i,
body:not([data-page="메인 홈페이지"]) .saas-sidebar i,
body:not([data-page="메인 홈페이지"]) .terminal-top,
body:not([data-page="메인 홈페이지"]) .dash-top {
  background: #f1f5f9 !important;
  color: #111827 !important;
}

.unified-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.profile-summary-row article {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}

.profile-summary-row b,
.profile-summary-row span {
  display: block;
}

.profile-summary-row b {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 6px;
}

.profile-summary-row span {
  color: #111827;
  font-weight: 900;
  word-break: break-word;
}

.profile-menu-card,
.profile-consent-card,
.withdraw-card,
.profile-logout-card {
  scroll-margin-top: 92px;
}

.profile-menu-card a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  color: #111827;
  font-weight: 900;
  text-decoration: none;
}

.profile-menu-card a + a {
  margin-top: 8px;
}

.check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  color: #334155;
  font-weight: 900;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.profile-consent-card small {
  display: block;
  color: #64748b;
  line-height: 1.6;
}

.withdraw-card {
  border-color: #fecaca !important;
  background: #fffafa !important;
}

.profile-logout-card {
  border-color: #dbeafe !important;
  background: #f8fbff !important;
}

@media (max-width: 820px) {
  .profile-summary-row,
  .unified-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ver69: 우리동네 판단형 팝업 콘텐츠 전용 스타일 */
.modal-note {
  margin: 0 0 14px;
  color: #536173;
  line-height: 1.65;
}
.buyer-seller-toolkit {
  margin: 22px 0;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
.toolkit-head h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  color: #0f172a;
}
.toolkit-head p {
  margin: 0 0 18px;
  color: #475569;
  line-height: 1.7;
}
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.toolkit-card {
  appearance: none;
  width: 100%;
  min-height: 126px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
  color: #172554;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.toolkit-card:hover,
.toolkit-card:focus-visible {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 16px 30px rgba(37, 99, 235, .14);
  outline: none;
}
.toolkit-card b {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
}
.toolkit-card span {
  display: block;
  color: #475569;
  line-height: 1.55;
}
.insight-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.insight-modal-grid article,
.insight-modal-list p,
.insight-checklist li {
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  color: #334155;
  line-height: 1.62;
}
.insight-modal-grid h3 {
  margin: 0 0 8px;
  color: #0f172a;
}
.insight-modal-grid p,
.insight-modal-list p {
  margin: 0;
}
.insight-modal-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.insight-checklist {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-left: 22px;
}
@media (max-width: 900px) {
  .toolkit-grid,
  .insight-modal-grid {
    grid-template-columns: 1fr;
  }
  .buyer-seller-toolkit {
    padding: 18px;
    border-radius: 22px;
  }
}

/* ver69: 내정보 헤더는 드롭다운 없이 단일 진입 버튼으로 고정합니다. */
.profile-nav-item .submenu,
.profile-nav-item::after {
  display: none !important;
}
.profile-nav-item .nav-main {
  white-space: nowrap;
}

/* ver69: 일반 마이페이지형 내정보 화면입니다. 항목별 수정 버튼을 눌렀을 때만 입력 영역이 열립니다. */
.profile-summary-modern {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile-modern-card {
  display: grid;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.profile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}
.profile-section-head.compact {
  padding: 0;
  border: 0;
  background: transparent;
}
.profile-section-head h3,
.profile-section-head p {
  margin: 0;
}
.profile-section-head p {
  color: #64748b;
  line-height: 1.55;
}
.profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
}
.profile-row:last-child {
  border-bottom: 0;
}
.profile-row > div:first-child b {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 13px;
}
.profile-row > div:first-child span {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  word-break: break-word;
}
.profile-row > em {
  color: #94a3b8;
  font-size: 13px;
  font-style: normal;
  justify-self: end;
  text-align: right;
}
.profile-edit-inline[hidden] {
  display: none !important;
}
.profile-edit-inline {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fbff;
}
.profile-edit-inline label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 900;
}
.profile-edit-inline input {
  width: 100%;
}
.profile-action-grid {
  margin-top: 18px;
}
.danger-soft {
  border-color: #fecaca !important;
  color: #b91c1c !important;
  background: #fff7f7 !important;
}
@media (max-width: 900px) {
  .profile-summary-modern,
  .profile-action-grid {
    grid-template-columns: 1fr;
  }
  .profile-section-head,
  .profile-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .profile-row > em {
    justify-self: start;
    text-align: left;
  }
}

/* ver69: 우리동네지도 판단형 콘텐츠를 실제 입력형 팝업으로 사용합니다. */
.insight-live-tool {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: #f8fbff;
}
.insight-live-tool h3 {
  margin: 0;
  color: #0f172a;
}
.insight-live-tool label {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #334155;
  font-weight: 900;
}
.insight-live-tool input {
  min-width: 0;
}
.insight-live-tool small {
  color: #64748b;
}
.insight-result {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  line-height: 1.65;
}
.insight-result b,
.insight-result span {
  display: block;
}
.insight-result b {
  color: #1d4ed8;
  font-size: 1.02rem;
}
.interactive-checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.interactive-checklist input {
  width: 18px;
  height: 18px;
}
.seller-case-list p b {
  color: #1d4ed8;
}
@media (max-width: 720px) {
  .insight-live-tool label {
    grid-template-columns: 1fr;
  }
}

/* ver70: 내정보는 한 장의 계정관리 카드 안에서 순차적으로 표시합니다. 이전 profile-grid 카드가 떠 보이던 구조를 제거했습니다. */
.profile-page {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.profile-title-clean {
  margin-bottom: 26px;
}
.profile-account-card {
  width: 100%;
  margin-top: 18px;
  border-radius: 24px;
}
.profile-account-card .profile-row {
  position: static;
  width: 100%;
}
.profile-account-card .logout-row {
  background: #f8fbff;
  border-top: 1px solid #dbeafe;
}
.profile-account-card .danger-row {
  background: #fffafa;
}
.profile-account-card .profile-edit-inline small,
.profile-account-card .profile-edit-inline p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

/* ver70: 판단형 팝업 실사용 도구 */
.insight-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.insight-form-grid .full-span {
  grid-column: 1 / -1;
}
.insight-mini-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #334155;
  line-height: 1.55;
}
.complex-result-list,
.consult-agent-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.complex-result-card {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 13px 14px;
  background: #ffffff;
  cursor: pointer;
}
.complex-result-card:hover {
  border-color: #ef3f34;
  box-shadow: 0 10px 22px rgba(239,63,52,.10);
}
.complex-result-card b,
.consult-agent-card b {
  color: #0f172a;
  font-size: 15px;
}
.complex-result-card span,
.complex-result-card em,
.consult-agent-card span,
.consult-agent-card em,
.consult-agent-card small,
.consult-agent-card p {
  color: #64748b;
  font-style: normal;
  line-height: 1.5;
}
.consult-agent-card {
  display: grid;
  gap: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 15px;
  background: #fff;
}
.consult-agent-card .primary {
  justify-self: start;
  text-decoration: none;
}
.agent-consult-panel {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.agent-consult-panel h3 {
  margin: 0;
}
.empty-state {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .insight-form-grid {
    grid-template-columns: 1fr;
  }
}