/* 하단바 버튼 전용 세리프 — 마루부리(배민 마루 부리). Pretendard 와 같은
   방식으로 로컬에 미러링해서 외부 폰트 CDN 호출 없이 로드한다. */
@font-face {
  font-family: 'MaruBuri';
  src: url('assets/vendor/fonts/maruburi/MaruBuri-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'MaruBuri';
  src: url('assets/vendor/fonts/maruburi/MaruBuri-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ===== BRAND · 메인 #02254B (Deep Navy) =====
     브랜드 기준색. 다크면(헤더·상담 패널·CTA)과 밝은배경 위 텍스트 양쪽에 쓴다.
     900 딥톤 / 800 밝은배경 텍스트 / 700·600 hover·라인 / 400·200·100·050 틴트 면 */
  --brand: #02254B;
  --brand-900: #010f1e;
  --brand-800: #02254B;
  --brand-700: #0b3867;
  --brand-600: #2e5884;
  --brand-400: #8ba2ba;
  --brand-200: #c9d5e2;
  --brand-100: #eaeff4;
  --brand-050: #f5f8fa;

  /* ===== ACCENT · 서브 #F7F7F7 (Soft White) ===== */
  --accent: #F7F7F7;
  --accent-h: #e4e7ea;
  --accent-d: #02254B;
  --accent-soft: #b8c5d0;
  --accent-pale: #eff1f4;

  /* 골드 CTA 스킨 — 서브내비 '빠른문의' 칩과 하단바 '로얄층 선점하기' 가 공유한다.
     한쪽만 바꾸면 통일이 깨지므로 반드시 이 변수를 고칠 것. 어두운 부분
     없이 전체적으로 밝게 — 가장 어두운 지점도 진한 브라운이 아니라 밝은
     골드(#e6bf4d) 선에서 멈춘다. */
  --cta-gold: linear-gradient(135deg, #e6bf4d 0%, #ffe9a8 25%, #fff8e0 45%, #ffd700 58%, #fff8e0 72%, #ffe9a8 88%, #e6bf4d 100%);
  --cta-gold-ink: #2b1e00;
  --cta-shine: linear-gradient(115deg,
      transparent 35%,
      rgba(255, 255, 255, .85) 48%,
      rgba(255, 255, 255, .85) 52%,
      transparent 65%);
  /* 골드 CTA 그림자 — 네온 펄스는 정신없다는 피드백으로 제거, 고정된
     은은한 그림자만 남긴다 */
  --cta-shadow: 0 4px 14px rgba(74, 50, 8, .35);

  /* 하단바 전용 — 금속 명판(플레이트) 느낌. 브러시드 메탈 결을
     repeating-linear-gradient 로 반복시켜 광택 밴드를 낸다.
     왼쪽 실버 / 오른쪽 골드, 둘 다 같은 구조를 공유. */
  --cta-gold-metal: repeating-linear-gradient(100deg,
      #d4af37 0%,
      #fff8e0 9%,
      #ffd700 18%,
      #fff2b0 27%,
      #d4af37 36%);
  --cta-silver-metal: repeating-linear-gradient(100deg,
      #9aa3ab 0%,
      #f5f7f8 9%,
      #c9d0d6 18%,
      #ffffff 27%,
      #9aa3ab 36%);
  --cta-silver-ink: #1a2230;

  /* ===== NEUTRAL · 네이비 기운 중성색 ===== */
  --ink: #12202f;
  --sub: #55616e;
  --muted: #8e97a0;
  --paper: #ffffff;
  --bg: #F7F7F7;
  --surface: #eceef1;
  --line: #e3e6ea;
  --line-d: #cfd5db;

  /* ===== ICON (브랜드 컬러 고정 SVG) ===== */
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302254B'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  --icon-phone-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F7F7F7'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  --icon-phone-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302254B'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");

  /* ===== HEADER — 네이비 배경 + 흰 글자 ===== */
  --header-bg: rgba(2, 37, 75, .94);
  --header-bg-solid: var(--brand);
  --header-ink: var(--accent);

  /* ===== ELEVATION ===== */
  --shadow-sm: 0 2px 10px rgba(2, 37, 75, .07);
  --shadow-md: 0 10px 26px rgba(2, 37, 75, .16);
  --shadow-lg: 0 20px 44px rgba(2, 37, 75, .16);

  --radius: 3px;
  --radius-md: 6px;
  --maxw: 1180px;
  --shell: 768px;
  --cta-h: 60px;
  /* script.js 가 로드되자마자 실측치로 즉시 덮어쓴다(syncFixedSizes 참고) —
     여기 숫자는 JS 실행 전 첫 페인트가 크게 안 튀도록 잡아두는 근사치일
     뿐이라, 실제 header 높이와 정확히 같을 필요는 없다. 스티키 서브내비는
     제거했으므로 --subnav-h 는 더 이상 쓰지 않는다. */
  --header-h: 50px;
  /* 전체 폰트를 Pretendard 로 통일 — serif/display/brush 이름은 남기고
     전부 --sans 를 가리키게 해서 사용처를 일일이 고치지 않아도 되게 했다 */
  --sans: 'Pretendard Variable', 'Pretendard', 'Nanum Gothic', 'NanumGothic', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --serif: var(--sans);
  --display: var(--sans);
  --brush: var(--sans);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 5.14vw, 40px);
}

section {
  padding: 120px 0;
}

.html.js .reveal,
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   섹션 전체를 감싸는 뼈대 (헤더/CTA 바 사이 본문 영역)
   ============================================================ */
.blocks {
  padding: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 30px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .13em;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: .25s;
  font-family: var(--sans);
}

.btn::after {
  content: "→";
  font-family: var(--serif);
  font-size: 15px;
  transition: transform .25s;
}

.btn:hover::after {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--accent);
  color: var(--brand);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 18px 38px;
}

.btn-primary:hover {
  background: var(--accent-h);
  color: var(--brand);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* 스크롤해도 사라지지 않고 항상 고정 — 높이(padding)도 항상 동일하게
     유지해 본문 padding-top 이 흔들리지 않는다. */
  padding: 18px 0;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(2, 37, 75, .1);
}

@keyframes quick-cta-shine {

  0%,
  15% {
    background-position: 130% 130%;
  }

  55%,
  100% {
    background-position: -30% -30%;
  }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 스티키 서브내비를 걷어내고 대신 로고 왼쪽에 넣은 햄버거 메뉴.
   페이지가 각 섹션별로 분리된 뒤에는 앵커 스크롤이 아니라 실제
   페이지 이동 링크를 담는다(메인/체크포인트/입지환경/커뮤니티/평면도). */
.hamburger {
  position: absolute;
  left: clamp(16px, 5.14vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 101;
}

.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--header-ink);
  transition: transform .25s, opacity .2s;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 헤더 오른쪽 "빠른문의" 골드 칩 — 스티키 서브내비가 없어진 뒤에도
   헤더 자체에 남겨 항상 보이게 한다. 글리터는 뺐고, 사선 하이라이트만.
   컨테이너 여백 무시하고 화면 젤 오른쪽 끝에 딱 붙인다 — .container/.nav
   패딩 바깥, header(고정 컨테이닝 블록) 기준으로 배치. */
.header-cta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 9px 12px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: var(--cta-gold-ink);
  font-weight: 800;
  font-size: clamp(16px, 4.6vw, 20px);
  background: var(--cta-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: var(--cta-shadow);
}

.header-cta::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  background: var(--icon-phone) center/contain no-repeat;
  position: relative;
  z-index: 2;
}

.header-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cta-shine);
  background-size: 220% 220%;
  background-position: 130% 130%;
  animation: quick-cta-shine 3s ease-in-out infinite;
}

.side-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(2, 37, 75, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.side-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: min(78vw, 320px);
  background: #fff;
  box-shadow: 8px 0 30px rgba(2, 37, 75, .2);
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu-close {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 8px;
}

.side-menu-links {
  display: flex;
  flex-direction: column;
}

.side-menu-links a {
  padding: 15px 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.side-menu-links a.active {
  color: var(--brand);
  font-weight: 800;
}

body.menu-open {
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--header-ink);
  transition: .4s;
}

.logo-mark {
  flex: none;
  width: 25px;
  height: 30px;
  object-fit: cover;
  border-radius: 6px;
}

.logo-text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width:600px) {
  .logo-text {
    font-size: 15px;
  }

  /* 왼쪽 햄버거 + 오른쪽 빠른문의 칩이 차지하는 폭만큼 로고 중앙정렬
     영역을 안쪽으로 눌러서 좁은 화면에서 서로 겹치지 않게 한다.
     모바일에서는 빠른문의 칩 자체를 작게 줄여서(아래 .header-cta 참고)
     현장명이 잘리지 않도록 예약 폭도 줄였다.
     뒤쪽의 무조건부 .container 재선언(같은 우선순위, 늦은 순서라 이김)을
     이기려고 .container.nav 복합 선택자로 우선순위를 한 단계 올린다. */
  .container.nav {
    padding: 0 84px 0 50px;
  }

  .logo-text {
    max-width: 46vw;
  }

  .header-cta {
    gap: 4px;
    padding: 6px 9px;
    font-size: 13px;
  }

  .header-cta::before {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   로얄층 선점하기 — 상담 신청폼 (상·하단 2곳 공용).
   메인컬러(#02254B) 다크면 + 서브컬러(#F7F7F7) 솔리드 구성
   ============================================================ */
.contact {
  background: var(--brand);
  color: var(--accent);
  position: relative;
  padding: 44px 0;
}

.contact .c-head {
  margin-bottom: 20px;
}

.contact .c-head::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--accent);
  margin-bottom: 18px;
}

.contact .c-head h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.25;
  color: var(--accent);
}


.contact .c-head p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--accent);
}

.form {
  position: relative;
  z-index: 1;
}

.form .field {
  margin-bottom: 8px;
}

.form label.fl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  transition: border-color .18s, box-shadow .18s;
}

.form input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.form input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(247, 247, 247, .5);
}

.form .agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.6;
  color: var(--accent);
  margin: 10px 2px 12px;
  font-weight: 400;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.form .agree input {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form .agree .box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(247, 247, 247, .6);
  border-radius: 3px;
  background: transparent;
  position: relative;
  transition: .15s;
}

.form .agree:hover .box {
  border-color: var(--accent);
}

.form .agree input:checked+.box {
  background: var(--accent);
  border-color: var(--accent);
}

.form .agree input:checked+.box::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form .agree input:focus-visible+.box {
  outline: 2px solid rgba(247, 247, 247, .8);
  outline-offset: 2px;
}

.contact-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(247, 247, 247, .32);
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
  transition: border-color .18s, background-color .18s;
}

.contact-tel:hover {
  border-color: var(--accent);
  background: rgba(247, 247, 247, .1);
}

.contact-tel .ct-label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--accent);
  white-space: nowrap;
}

.contact-tel .ct-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  white-space: nowrap;
}

.contact-tel .ct-num::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: var(--icon-phone-a) center/contain no-repeat;
}

.done-panel {
  position: relative;
  z-index: 1;
  padding: 40px 24px 36px;
  text-align: center;
  background: rgba(247, 247, 247, .09);
  border-radius: var(--radius-md);
}

.done-panel h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.03em;
}

.done-panel p {
  margin: 12px 0 24px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--accent);
}

.form .btn::after,
.done-panel .btn::after {
  content: none;
}

.form .btn,
.done-panel .btn {
  width: 100%;
  justify-content: center;
  padding: 15px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: var(--radius-md);
}

/* 상담 제출 버튼 — 고정 골드 바탕 + 기울어진 하이라이트가 훑고 지나가는
   반짝임(::before) + 테두리를 따라 도는 회전 광택(.spin-border/.spin-mask).
   글리터·네온 펄스는 정신없다는 피드백으로 제거, 고정 그림자만. */
.form .btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--cta-gold);
  color: var(--cta-gold-ink);
  border-color: #e6bf4d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: var(--cta-shadow);
  animation: btn-bob 2.6s ease-in-out infinite;
}

.form .btn-primary>span:last-child {
  position: relative;
  z-index: 1;
}

/* 회전하는 테두리 광택 — 바깥쪽 conic-gradient 링을 돌리고, 그 위를
   버튼과 같은 골드 그라데이션으로 다시 덮어(spin-mask) 테두리 두께만큼만
   빛이 새어나오게 만든다. 버튼 자체 background 는 이 mask 뒤에 가려진다. */
.form .btn-primary .spin-border {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.form .btn-primary .spin-border::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      transparent 300deg,
      #fff8dc 330deg,
      #fffef0 345deg,
      #fff8dc 355deg,
      transparent 360deg);
  animation: spin-border-rotate 2.4s linear infinite;
}

.form .btn-primary .spin-mask {
  position: absolute;
  inset: 3.5px;
  border-radius: calc(var(--radius-md) - 2px);
  background: var(--cta-gold);
  pointer-events: none;
}

@keyframes spin-border-rotate {
  to {
    transform: rotate(360deg);
  }
}

.form .btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 11%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 253, 245, .92) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: btn-sheen 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.form .btn-primary:hover {
  color: #2b1e00;
}

.form .btn-primary:active {
  animation: none;
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .18),
    0 3px 8px rgba(140, 100, 0, .3);
}

@keyframes btn-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes btn-sheen {
  0% {
    left: -28%;
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
  }

  33% {
    left: 116%;
  }

  100% {
    left: 116%;
  }
}

/* 상담 제출 버튼의 애니메이션 3종(둥실거림·회전 광택·하이라이트 스윕)을
   한 곳에서 정지 — 이전엔 두 블록으로 나뉘어 중복돼 있던 걸 합쳤다.
   스윕(::before)만 opacity:0 으로 완전히 숨긴다 — 정지된 채로 남으면
   버튼 위에 비스듬한 빛줄기가 고정으로 걸려 있는 것처럼 보이기 때문. */
@media (prefers-reduced-motion: reduce) {
  .form .btn-primary {
    animation: none;
  }

  .form .btn-primary .spin-border::before {
    animation: none;
  }

  .form .btn-primary::before {
    animation: none;
    opacity: 0;
  }
}

/* 상담 폼(#contact-top / #contact 둘 다)을 밝은 면으로 반전 — 메인
   페이지 폼(#contact)도 다른 페이지(#contact-top)와 같은 배색을 쓴다 */
#contact-top,
#contact {
  background: linear-gradient(180deg, #FFFBF2 0%, #FAEFD8 100%);
  color: var(--brand);
}

#contact-top .c-head::before,
#contact .c-head::before {
  background: #C9A257;
}

#contact-top .c-head h2,
#contact .c-head h2 {
  color: var(--brand);
}

#contact-top .c-head p,
#contact .c-head p {
  color: #6B6153;
}

#contact-top .form input,
#contact .form input {
  border-color: rgba(2, 37, 75, .72);
}

#contact-top .form input:focus,
#contact .form input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(2, 37, 75, .14);
}

#contact-top .form .agree,
#contact .form .agree {
  color: #5C5446;
}

#contact-top .form .agree .box,
#contact .form .agree .box {
  border-color: rgba(2, 37, 75, .72);
  background: #fff;
}

#contact-top .form .agree:hover .box,
#contact .form .agree:hover .box {
  border-color: var(--brand);
}

#contact-top .form .agree input:checked+.box,
#contact .form .agree input:checked+.box {
  background: var(--brand);
  border-color: var(--brand);
}

#contact-top .form .agree input:checked+.box::after,
#contact .form .agree input:checked+.box::after {
  border-color: #fff;
}

#contact-top .form .agree input:focus-visible+.box,
#contact .form .agree input:focus-visible+.box {
  outline-color: rgba(2, 37, 75, .55);
}

#contact-top .contact-tel,
#contact .contact-tel {
  border-color: rgba(2, 37, 75, .72);
}

#contact-top .contact-tel:hover,
#contact .contact-tel:hover {
  border-color: var(--brand);
  background: rgba(2, 37, 75, .04);
}

#contact-top .contact-tel .ct-label,
#contact .contact-tel .ct-label {
  color: #6B6153;
}

#contact-top .contact-tel .ct-num,
#contact .contact-tel .ct-num {
  color: var(--brand);
}

#contact-top .contact-tel .ct-num::before,
#contact .contact-tel .ct-num::before {
  background-image: var(--icon-phone);
}

#contact-top .done-panel,
#contact .done-panel {
  background: rgba(255, 255, 255, .72);
  border: 1px solid #EFE2C8;
}

#contact-top .done-panel h3,
#contact .done-panel h3 {
  color: var(--brand);
}

#contact-top .done-panel p,
#contact .done-panel p {
  color: #5C5446;
}

#contact-top .done-panel .btn-primary,
#contact .done-panel .btn-primary {
  background: var(--brand);
  color: var(--accent);
  border-color: var(--brand);
}

#contact-top .done-panel .btn-primary:hover,
#contact .done-panel .btn-primary:hover {
  background: var(--brand-700);
  color: var(--accent);
  border-color: var(--brand-700);
}

/* 상시 노출 액션 — 전화 / 로얄층 선점하기.
   .fab.accent(로얄층 선점 원형 버튼)는 아래 "모바일 전용 레이아웃"
   구간의 `.floating .fab:not(.top) { display:none; }` 에 의해 항상
   숨김 처리된다 — 이 사이트가 데스크톱에서도 모바일 셸 폭 그대로
   렌더되고, 그 대신 하단 고정바(.mobile-bar)의 CTA 가 같은 역할을
   하기 때문이다. 데스크톱 전용 넓은 레이아웃을 다시 도입할 때를
   대비해 스타일은 남겨두되, 실제로 보이진 않는다는 점을 알아둘 것. */
.floating {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fab {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--accent);
  border: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 10px 26px rgba(2, 37, 75, .34);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  transition: .25s;
}

.fab:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 30px rgba(2, 37, 75, .42);
}

.fab.accent {
  position: relative;
  background: var(--accent);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(2, 37, 75, .34);
  border: 1px solid var(--line-d);
}

.fab.accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  animation: fabPulse 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
  pointer-events: none;
}

@keyframes fabPulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

  70% {
    transform: scale(1.5);
    opacity: 0
  }

  100% {
    transform: scale(1.5);
    opacity: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .fab.accent::before {
    animation: none;
  }
}

.site-foot {
  background: var(--brand-100);
  border-top: 1px solid var(--line);
  padding: 26px 0 30px;
}

.site-foot .foot-body {
  font-size: 12px;
  line-height: 1.65;
  color: var(--sub);
  letter-spacing: -.01em;
}

.site-foot .foot-name {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--brand-800);
}

/* 맨 위로 — 예전엔 화면 우측 하단에 붙어 스크롤을 따라다니는 플로팅
   버튼(.floating .fab.top)이었지만, 이제 푸터 안에 고정된 일반 버튼으로
   옮겼다. 스크롤해도 따라오지 않고 푸터 위치에 그대로 있다. */
.foot-top {
  text-align: center;
  margin-top: 20px;
}

.foot-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* 하단바 버튼 1개 — 짙은 남색 명판(모눈 텍스처) + 굵은 브러시드 골드
   테두리. 버튼은 하나(링크 하나)지만 가운데 얇은 골드 세로선으로 나눠
   두 칸처럼 보이게 한다 — 왼쪽 "서울 신축 최저가", 오른쪽 "로얄층
   선점하기". 테두리는 실제 border 대신 2겹 배경(padding-box 안쪽 채우기
   + border-box 골드 그라데이션)으로 만든다. 글자는 span 에 별도로 골드
   그라데이션 + background-clip: text 를 적용한다. */
.mobile-bar .mb-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  gap: 0;
  border-radius: clamp(10px, 2vw, 16px);
  border: clamp(5px, 1.6vw, 8px) solid transparent;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px) padding-box,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px) padding-box,
    linear-gradient(var(--brand), var(--brand)) padding-box,
    linear-gradient(135deg, #7a6608 0%, #ffdf3d 22%, #fff9c4 42%, #ffe135 58%, #d4af00 75%, #7a6608 100%) border-box;
  animation: cta-pop 1.6s ease-in-out infinite;
}

.mobile-bar .mb-cta .mb-half {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 10px 6px;
}

.mobile-bar .mb-cta .mb-half:first-child {
  border-right: 2px solid #e8c765;
}

/* 버튼이 눈에 띄도록 은은하게 커졌다 작아지며 골드 빛 외곽 글로우가
   함께 맥동한다 — 하단 고정바라 지나치기 쉬우니 시선을 끌어야 한다. */
@keyframes cta-pop {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 225, 53, .5), var(--cta-shadow);
  }

  50% {
    transform: scale(1.035);
    box-shadow: 0 0 20px 7px rgba(255, 225, 53, .85), var(--cta-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bar .mb-cta {
    animation: none;
    box-shadow: var(--cta-shadow);
  }
}

.mobile-bar .mb-cta .mb-half span {
  font-family: 'MaruBuri', var(--sans);
  font-size: clamp(13px, 4.3vw, 19px);
  font-weight: 800;
  white-space: nowrap;
}

/* "로얄층" — 골드 그라데이션 글자 */
.mobile-bar .mb-cta span.g {
  background: linear-gradient(180deg, #fff9c4 0%, #ffe135 45%, #d4af00 55%, #ffdf3d 75%, #fff9c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

/* "선점하기" — 흰색 글자 + 그림자 */
.mobile-bar .mb-cta span.w {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* 헤더 '빠른문의' 칩과 같은 사선 하이라이트 — 키프레임도 그대로 공유한다. */
.mobile-bar .mb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cta-shine);
  background-size: 220% 220%;
  background-position: 130% 130%;
  animation: quick-cta-shine 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .header-cta::after,
  .mobile-bar .mb-cta::after {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   ★ 신규 섹션 — 기존에는 sec2~sec9 통이미지로만 채워져 있던 8개
   섹션을 실제 텍스트·선·도형(HTML+CSS)으로 재구성한 부분.
   사진이 필요한 자리는 전부 .photo 로 비워두고, 아래 스크립트의
   PHOTOS{} 객체에 경로만 넣으면 자동으로 채워지도록 만들었다.
   ============================================================ */

/* 사진 자리표시자 — PHOTOS[key] 가 비어 있으면 점선 박스 + 라벨,
   채워지면 실제 사진으로 자동 전환된다 */
.photo {
  position: relative;
  background: var(--surface) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line-d);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px;
  overflow: hidden;
}

.photo.has-photo {
  border-color: transparent;
}

.photo.has-photo .ph-label {
  display: none;
}

/* 코너 리본 — "Point" / "선착순". 피그마 원본은 띠가 아니라 모서리를
   통째로 덮는 삼각형이라, clip-path 로 실제 삼각형을 채우고 그 위에
   문구를 대각선으로 얹는다. */
.corner-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(220px, 32vw, 260px);
  height: clamp(140px, 20.5vw, 165px);
  pointer-events: none;
  z-index: 2;
}

.corner-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fffbe0 0%, #ffd66a 35%, #e7b93f 70%, #cf9a2e 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .25), inset 0 0 24px rgba(255, 246, 210, .55);
}

/* 삼각형을 가로지르며 한 방향으로만 쓸고 지나가는 골드 하이라이트 —
   반복 시작 지점(130%)이 삼각형 밖(투명 구간)에 있어 되감기가 눈에
   띄지 않고, linear + 중간 정지 구간 없이 일정한 속도로 흐른다 */
.corner-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(115deg,
      transparent 30%,
      rgba(255, 253, 235, .95) 48%,
      rgba(255, 253, 235, .95) 52%,
      transparent 70%);
  background-size: 300% 300%;
  background-position: 130% 130%;
  animation: ribbon-shine 2.6s linear infinite;
  pointer-events: none;
}

@keyframes ribbon-shine {
  0% {
    background-position: 130% 130%;
  }

  100% {
    background-position: -30% -30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corner-ribbon::after {
    animation: none;
    display: none;
  }
}

.corner-ribbon span {
  position: absolute;
  top: 30%;
  left: 10%;
  transform: rotate(-33.7deg);
  transform-origin: left center;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 40px);
  letter-spacing: .01em;
  color: #4a3208;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

/* 금색 그라데이션 텍스트 — 다크 네이비 배경 위 강조 문구 */
.gold-text {
  background: linear-gradient(180deg, #fff6d8 0%, #e9c46a 55%, #cfa94e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 두꺼운 구분선 */
.divider-thick {
  height: 4px;
  background: var(--brand);
}

/* 서브타이틀 바 — 다크 네이비 바탕 + 화이트 텍스트 (.hl 로 부분 강조)
   피그마 실측: 컨테이너 폭 전체를 채우는 사각 바, 텍스트는 왼쪽 정렬 */
.subbar {
  display: block;
  margin: 18px 0 0;
  width: 100%;
  padding: 12px 20px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 400;
  line-height: 1.5;
}

.subbar .hl {
  color: #f0cf6e;
}

/* 섹션 대제목 — Pretendard Black 웨이트로 포스터 타이틀 느낌을 낸다.
   피그마 실측 기준 모든 대제목 크기를 이 값 하나로 통일한다
   (개별 섹션에서 font-size 를 다시 지정하지 않는다) */
.disp-h2 {
  font-family: var(--display);
  font-weight: 900;
  text-align: center;
  letter-spacing: -.03em;
  font-size: clamp(42px, 13.2vw, 102px);
  line-height: 1.15;
}


.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.5%;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  font-size: clamp(10px, 2.7vw, 11px);
  letter-spacing: -.01em;
  color: #f2ead8;
}

/* ---------- 03 · 체크 포인트 (10항목 · 색상별 배지) ----------
   피그마 "체크포인트" 컴포넌트 스펙을 그대로 이식 (1080px 프레임 기준
   값을 768px 셸 폭으로 환산: ×0.7111, 모바일은 vw 로 비례). 숫자
   배지만 디자인 그대로 세리프(Crimson Text)를 쓰고, 나머지는 Pretendard. */
.check-sec {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  padding: 60px 0 56px;
}

.check-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 45% at 50% 0%, rgba(255, 255, 255, .1), transparent 70%);
}

/* 체크포인트 바로 아래 퀵링크 버튼 3개 — 입지환경/커뮤니티/평면도로
   바로 이동. 각각 다른 색의 글로시 3D 버튼(상단 유리질 하이라이트 +
   우하단으로 살짝 어긋난 그림자로 눌린 듯한 입체감). 피그마 "Frame 125"
   원본 스펙(1080×387, 즉 row 폭:높이 ≈ 1080:387)을 그대로 비율로 유지해
   큼직하게 — aspect-ratio 로 폭이 늘어나면 높이도 같이 커진다. */
.quicklink-row {
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 1vw, 8px);
  background: var(--brand);
  padding: 0;
  aspect-ratio: 1080 / 387;
}

.quicklink {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 10px);
  border-radius: clamp(10px, 2vw, 16px);
  border: 2px solid rgba(0, 0, 0, .18);
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 6px 0 rgba(60, 20, 10, .35), 0 8px 18px rgba(0, 0, 0, .3);
}

.quicklink::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 40% at 50% 8%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
}

.quicklink .ql-title {
  position: relative;
  font-size: clamp(22px, 8vw, 40px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
  letter-spacing: -.02em;
}

.quicklink .ql-sub {
  position: relative;
  font-size: clamp(13px, 4.6vw, 22px);
  font-weight: 700;
  color: #fff;
  opacity: .92;
}

.quicklink.ql-orange {
  background: linear-gradient(180deg, #ffd45e 0%, #f7a613 55%, #e08a00 100%);
}

.quicklink.ql-green {
  background: linear-gradient(180deg, #a6e06a 0%, #5cb82e 55%, #3f9016 100%);
}

.quicklink.ql-blue {
  background: linear-gradient(180deg, #6fa3e0 0%, #3d6fc4 55%, #274d96 100%);
}

/* 메인 화면 체크포인트 배경에만 은은한 점박이 반짝임 — 카드 뒤 어두운
   남색 배경을 대각선 마스크가 한 번 쓸고 지나간 뒤 3초 멈췄다가 반복
   (갤러리 3번 이미지의 .sparkle-pass 와 같은 원리, 더 큰 타일로 넓은
   섹션에 맞춤). checkpoint.html 쪽은 그대로 둔다. */
.check-sec--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><circle cx='20' cy='30' r='1.3' fill='white' fill-opacity='0.6'/><circle cx='110' cy='70' r='1' fill='white' fill-opacity='0.45'/><circle cx='170' cy='35' r='1.5' fill='white' fill-opacity='0.55'/><circle cx='55' cy='130' r='1' fill='white' fill-opacity='0.5'/><circle cx='150' cy='160' r='1.4' fill='white' fill-opacity='0.55'/><circle cx='200' cy='120' r='0.9' fill='white' fill-opacity='0.45'/><circle cx='25' cy='190' r='1' fill='white' fill-opacity='0.5'/></svg>");
  background-repeat: repeat;
  background-size: 220px 220px;
  -webkit-mask-image: linear-gradient(115deg, transparent 36%, #000 47%, #000 53%, transparent 64%);
  mask-image: linear-gradient(115deg, transparent 36%, #000 47%, #000 53%, transparent 64%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: 150% 150%;
  mask-position: 150% 150%;
  animation: sparkle-pass-sweep 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .check-sec--home::before {
    animation: none;
    display: none;
  }
}

/* 은은한 펄(진주빛) 광택 — 흰색·연분홍·연하늘·민트가 섞인 부드러운
   빛무리가 배경 위를 아주 천천히 흘러 지나가며 자개/펄 느낌을 낸다.
   점박이 반짝임(::before)과 달리 재생-정지 없이 끊임없이 이어진다. */
.pearl-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(28px);
  opacity: .55;
  mix-blend-mode: soft-light;
}

.pearl-glow::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg at 50% 40%,
      rgba(255, 255, 255, .55),
      rgba(255, 214, 240, .5),
      rgba(214, 229, 255, .5),
      rgba(214, 255, 247, .5),
      rgba(255, 244, 214, .5),
      rgba(255, 255, 255, .55));
  animation: pearl-drift 18s linear infinite;
}

@keyframes pearl-drift {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pearl-glow::before {
    animation: none;
  }
}

.check-head {
  position: relative;
  z-index: 1;
  text-align: center;
}

.check-head .eyebrow {
  color: #fff;
  font-weight: 500;
  font-size: clamp(18px, 6.2vw, 47px);
  letter-spacing: -.02em;
  margin-top: 34px;
}

.check-head h2 {
  font-weight: 700;
  margin-top: 4px;
  background: linear-gradient(90deg, #fffbed 0%, #ffdd31 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.check-list {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.85vw, 14px);
}

.check-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1vw, 6px);
  text-align: center;
  background: #fff;
  border-radius: clamp(12px, 1.85vw, 15px);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(20, 44, 72, .14);
  min-height: clamp(84px, 16.7vw, 128px);
  padding: clamp(14px, 3.2vw, 20px) 7%;
}

.check-item .num {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(52px, 12.6vw, 97px);
  height: clamp(40px, 7.5vw, 58px);
  border-radius: clamp(12px, 1.85vw, 15px) 0 clamp(12px, 1.85vw, 15px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Crimson Text', var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 4.5vw, 33px);
  letter-spacing: -.02em;
}

.check-item .txt {
  font-weight: 800;
  font-size: clamp(21px, 6.5vw, 44px);
  color: #142c48;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.check-item .sub {
  font-size: clamp(11px, 2.4vw, 17px);
  color: #142c48;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* 01~10번을 무지개(빨주노초파남보) 순서로 부드럽게 이어지도록 색상환을
   0°~300° 구간에서 균등 분할(각 33.3°씩)했다 — 인접 항목끼리 색상환
   바로 옆 색이라 "빨강 다음 초록" 같은 급격한 전환이 생기지 않는다 */
.check-item.c1 .num {
  background: linear-gradient(90deg, hsl(0, 75%, 22%) 0%, hsl(0, 80%, 45%) 53.365%, hsl(0, 75%, 22%) 100%);
}

.check-item.c2 .num {
  background: linear-gradient(90deg, hsl(33, 75%, 22%) 0%, hsl(33, 80%, 45%) 53.365%, hsl(33, 75%, 22%) 100%);
}

.check-item.c3 .num {
  background: linear-gradient(90deg, hsl(67, 75%, 22%) 0%, hsl(67, 80%, 45%) 53.365%, hsl(67, 75%, 22%) 100%);
}

.check-item.c4 .num {
  background: linear-gradient(90deg, hsl(100, 75%, 22%) 0%, hsl(100, 80%, 45%) 53.365%, hsl(100, 75%, 22%) 100%);
}

.check-item.c5 .num {
  background: linear-gradient(90deg, hsl(133, 75%, 22%) 0%, hsl(133, 80%, 45%) 53.365%, hsl(133, 75%, 22%) 100%);
}

.check-item.c6 .num {
  background: linear-gradient(90deg, hsl(167, 75%, 22%) 0%, hsl(167, 80%, 45%) 53.365%, hsl(167, 75%, 22%) 100%);
}

.check-item.c7 .num {
  background: linear-gradient(90deg, hsl(200, 75%, 22%) 0%, hsl(200, 80%, 45%) 53.365%, hsl(200, 75%, 22%) 100%);
}

.check-item.c8 .num {
  background: linear-gradient(90deg, hsl(233, 75%, 22%) 0%, hsl(233, 80%, 45%) 53.365%, hsl(233, 75%, 22%) 100%);
}

.check-item.c9 .num {
  background: linear-gradient(90deg, hsl(267, 75%, 22%) 0%, hsl(267, 80%, 45%) 53.365%, hsl(267, 75%, 22%) 100%);
}

.check-item.c10 .num {
  background: linear-gradient(90deg, hsl(300, 75%, 22%) 0%, hsl(300, 80%, 45%) 53.365%, hsl(300, 75%, 22%) 100%);
}

/* ---------- 03-b · 체크 포인트 — 메인 화면 전용 카드 레이아웃 (피그마 시안)
   checkpoint.html(햄버거 메뉴)은 위 세로형·중앙정렬 디자인을 그대로 쓰고,
   이 블록은 index.html 의 .check-sec--home 안에서만 카드 모양을 가로형
   (좌측 전체높이 숫자 배지 + 우측 좌측정렬 텍스트)으로 덮어쓴다. 숫자별
   무지개 그라데이션 색상(c1~c10 .num, 색상환 0°~300° 균등분할)은 위 규칙을
   그대로 재사용 — 배지 모양만 바뀌고 색 규칙은 동일하다. */
/* 메인 화면은 코너 리본("Point")을 없앴기 때문에, 리본과 겹치지 않게
   비워뒀던 상단 여백(eyebrow margin-top 34px)이 더 이상 필요 없다 —
   섹션 자체 padding-top 도 함께 줄인다. */
.check-sec--home {
  padding-top: 14px;
}

.check-sec--home .check-head {
  margin-bottom: 12px;
}

.check-sec--home .check-list {
  margin-top: 12px;
}

/* 캡션(.sub)을 없애고 타이틀(.txt)만 남긴 만큼 카드 높이·리스트 간격도
   함께 줄여서 빈 여백이 생기지 않게 한다. */
.check-sec--home .check-item {
  display: grid;
  grid-template-columns: clamp(64px, 12.3vw, 104px) 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: stretch;
  text-align: left;
  padding: 0;
  gap: 0;
  min-height: clamp(56px, 11vw, 84px);
}

.check-sec--home .check-list {
  gap: clamp(6px, 1.1vw, 9px);
}

/* 피그마 시안의 화살표/깃발 모양 — 배지 우측 가장자리 전체가 중앙에서
   뾰족하게 모이는 형태(원본 SVG path 를 clip-path 폴리곤으로 재현).
   왼쪽 모서리만 카드와 같은 반지름으로 둥글게 남기고, 오른쪽은 78%
   지점부터 100% 지점(세로 중앙)까지 한 점으로 좁아진다. */
.check-sec--home .check-item .num {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border-top-left-radius: clamp(12px, 1.85vw, 15px);
  border-bottom-left-radius: clamp(12px, 1.85vw, 15px);
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
  font-size: clamp(26px, 5.6vw, 42px);
}

.check-sec--home .check-item .txt {
  grid-column: 2;
  grid-row: 1 / 3;
  text-align: left;
  white-space: normal;
  padding: 0 clamp(14px, 3vw, 20px);
}

.check-sec--home .check-item .sub {
  display: none;
}

/* 메인 화면 전용 숫자 배지 색상 — 01(빨강)부터 10(보라)까지 색상환
   0°~300° 를 9등분해 순서대로 배치한 무지개 규칙(레드→오렌지→옐로→
   그린→민트→시안→블루→인디고→퍼플→바이올렛). 2단 그라데이션(0% 어두운
   색 → 53.365% 밝은 색, 이후 100%까지 밝은 색 유지)은 그대로 유지한다. */
.check-sec--home .check-item.c1 .num {
  background: linear-gradient(90deg, hsl(0, 75%, 22%) 0%, hsl(0, 80%, 45%) 53.365%, hsl(0, 80%, 45%) 100%);
}

.check-sec--home .check-item.c2 .num {
  background: linear-gradient(90deg, hsl(33, 75%, 22%) 0%, hsl(33, 80%, 45%) 53.365%, hsl(33, 80%, 45%) 100%);
}

.check-sec--home .check-item.c3 .num {
  background: linear-gradient(90deg, hsl(67, 75%, 22%) 0%, hsl(67, 80%, 45%) 53.365%, hsl(67, 80%, 45%) 100%);
}

.check-sec--home .check-item.c4 .num {
  background: linear-gradient(90deg, hsl(100, 75%, 22%) 0%, hsl(100, 80%, 45%) 53.365%, hsl(100, 80%, 45%) 100%);
}

.check-sec--home .check-item.c5 .num {
  background: linear-gradient(90deg, hsl(133, 75%, 22%) 0%, hsl(133, 80%, 45%) 53.365%, hsl(133, 80%, 45%) 100%);
}

.check-sec--home .check-item.c6 .num {
  background: linear-gradient(90deg, hsl(167, 75%, 22%) 0%, hsl(167, 80%, 45%) 53.365%, hsl(167, 80%, 45%) 100%);
}

.check-sec--home .check-item.c7 .num {
  background: linear-gradient(90deg, hsl(200, 75%, 22%) 0%, hsl(200, 80%, 45%) 53.365%, hsl(200, 80%, 45%) 100%);
}

.check-sec--home .check-item.c8 .num {
  background: linear-gradient(90deg, hsl(233, 75%, 22%) 0%, hsl(233, 80%, 45%) 53.365%, hsl(233, 80%, 45%) 100%);
}

.check-sec--home .check-item.c9 .num {
  background: linear-gradient(90deg, hsl(267, 75%, 22%) 0%, hsl(267, 80%, 45%) 53.365%, hsl(267, 80%, 45%) 100%);
}

.check-sec--home .check-item.c10 .num {
  background: linear-gradient(90deg, hsl(300, 75%, 22%) 0%, hsl(300, 80%, 45%) 53.365%, hsl(300, 80%, 45%) 100%);
}


/* ---------- 04 · 입지환경 ---------- */
.loc-sec {
  background: var(--paper);
  padding: 64px 0;
}

.loc-sec h2 {
  color: var(--brand);
}

.loc-sec .divider-thick {
  margin-top: 28px;
}

/* 피그마 실측 비율: 사진이 카드 폭의 ~32%, 세로가 더 짧은 5:4 비율로
   본문 세로폭(사진+3줄 불릿)에 맞춰 훨씬 크게 들어간다 */
.loc-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 3vw, 20px);
  padding: 28px 0;
  border-bottom: 1px dashed var(--line-d);
}

.loc-row:last-of-type {
  border-bottom: none;
}

.loc-row .photo {
  flex: 0 0 32%;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  font-size: 9.5px;
}

.loc-row .col {
  flex: 1;
  min-width: 0;
}

.loc-row .col h3 {
  color: var(--brand);
  font-size: clamp(18px, 5.2vw, 21px);
  font-weight: 800;
}

.loc-row .col ul {
  margin-top: 10px;
  padding-left: 18px;
}

.loc-row .col li {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}

.loc-row .col li:last-child {
  margin-bottom: 0;
}

.loc-row .col li b {
  color: var(--brand);
}

.loc-caption {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

/* 디자인이 촘촘히 얽힌 구간(커뮤니티·평면도)은 코드로 재조립하지 않고
   통이미지를 그대로 넣는다 — assets/*.jpg 로 교체 가능 */
.block-img img,
.block-img video {
  display: block;
  width: 100%;
  height: auto;
}

/* 히어로 갤러리 이미지 중 애니메이션 webp(예: assets/2/1.webp)는 이미지
   자체에 내장된 반짝임을 1회만 재생한 뒤 정지 프레임(N-rest.*)으로 3초간
   멈추고 다시 재생을 반복한다. 재생/정지 전환은 script.js 의 attachSparkle
   가 담당 — 애니메이션 webp는 네이티브로는 끊김 없이 무한 반복되기 때문에
   중간에 정지 구간을 넣으려면 JS로 src를 바꿔치기해야 한다. */

/* 정적 이미지(jpg/png 등) 위에 얹는 반짝이 오버레이 — 작은 점(sparkle)
   패턴이 대각선 띠 마스크를 타고 한 번 은은하게 지나간 뒤(전체 주기의
   1/4) 나머지 3/4(3초) 동안은 화면 밖에서 멈췄다가 다시 지나가길
   반복한다. script.js 가 .sparkle-pass 클래스를 붙인 블록에 적용된다. */
.sparkle-pass {
  position: relative;
  overflow: hidden;
}

.sparkle-pass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><circle cx='15' cy='20' r='1.2' fill='white' fill-opacity='0.7'/><circle cx='70' cy='45' r='0.9' fill='white' fill-opacity='0.5'/><circle cx='120' cy='25' r='1.4' fill='white' fill-opacity='0.65'/><circle cx='40' cy='90' r='1' fill='white' fill-opacity='0.55'/><circle cx='100' cy='110' r='1.3' fill='white' fill-opacity='0.6'/><circle cx='145' cy='90' r='0.8' fill='white' fill-opacity='0.5'/><circle cx='20' cy='140' r='1' fill='white' fill-opacity='0.55'/><circle cx='90' cy='150' r='1.5' fill='white' fill-opacity='0.65'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
  -webkit-mask-image: linear-gradient(115deg, transparent 36%, #000 47%, #000 53%, transparent 64%);
  mask-image: linear-gradient(115deg, transparent 36%, #000 47%, #000 53%, transparent 64%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: 150% 150%;
  mask-position: 150% 150%;
  animation: sparkle-pass-sweep 4s ease-in-out infinite;
}

@keyframes sparkle-pass-sweep {
  0% {
    -webkit-mask-position: 150% 150%;
    mask-position: 150% 150%;
  }

  25% {
    -webkit-mask-position: -50% -50%;
    mask-position: -50% -50%;
  }

  100% {
    -webkit-mask-position: -50% -50%;
    mask-position: -50% -50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle-pass::after {
    animation: none;
    display: none;
  }
}


/* ---------- 07 · 평면도 ---------- */

/* 타입별 미니 필터 버튼 — 누르면 해당 타입 이미지만 남기고 나머지는 숨김.
   좌우 스크롤 없이 줄바꿈해서 전체 버튼이 한 화면에 다 보이게 한다.
   네모(각진) 그리드로 붙여서 버튼 사이 간격 없이 누르기 편하게 — 테두리는
   각 버튼의 inset box-shadow 로 그려서 인접 버튼과 겹치지 않는다. */
.plan-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  margin: 18px 0;
  border: 1px solid var(--line-d);
}

.plan-filter button {
  padding: 13px 4px;
  border: none;
  box-shadow: inset -1px -1px 0 var(--line-d);
  background: #fff;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.plan-filter button:hover {
  background: var(--brand-050);
  color: var(--brand);
}

.plan-filter button.active {
  background: var(--brand);
  color: var(--accent);
}

.plan-notes {
  margin-top: 32px;
  list-style: none;
}

.plan-notes li {
  position: relative;
  padding-left: 14px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 6px;
}

.plan-notes li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* ---------- 08 · 사업개요 ---------- */
.overview-sec {
  background: var(--bg);
}

.overview-head {
  text-align: center;
  padding: 50px 0 0;
}

.overview-head h2 {
  color: var(--brand);
}

.overview-sec .divider-thick {
  margin: 26px 0 0;
}

.overview-table {
  padding-bottom: 60px;
}

.overview-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--line-d);
}

.overview-row:last-child {
  border-bottom: none;
}

.overview-row .k {
  flex: none;
  width: clamp(78px, 24vw, 108px);
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 12px 6px;
  border-radius: 8px;
  font-weight: 800;
  font-size: clamp(12px, 3.4vw, 16px);
}

.overview-row .v {
  font-size: clamp(13px, 3.6vw, 15px);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}

/* ============================================================
   모바일 전용 레이아웃 (반응형 없음)
   ============================================================ */
html {
  background: var(--brand-100);
  scroll-padding-bottom: calc(var(--cta-h) + 16px);
}

body {
  max-width: var(--shell);
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 60px rgba(2, 37, 75, .18);
  padding-top: var(--header-h);
  padding-bottom: calc(var(--cta-h) + 16px);
}

header,
.mobile-bar {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: var(--shell);
  transform: translateX(-50%);
}

.floating {
  right: max(14px, calc(50% - var(--shell) / 2 + 14px));
  bottom: calc(var(--cta-h) + 16px);
}

section {
  padding: 80px 0;
}

.container {
  /* 피그마 1080px 프레임 기준 좌우 여백 비율(55.5px / 1080 ≈ 5.14vw)을
     그대로 유지 — 고정 px 이면 좁은 폰에서 여백 비중이 달라져 줄바꿈
     기준이 피그마와 어긋난다 */
  padding: 0 clamp(16px, 5.14vw, 40px);
}

.mobile-bar {
  display: flex;
}

.floating .fab:not(.top) {
  display: none;
}