/* bundle.css — npm run build:assets 로 생성됩니다. 직접 수정하지 마세요. */
/* tokens.css */
/* =============================================================
   tokens.css — 디자인 토큰 (단일 진실 공급원)

   ★ 색상·여백·글자크기를 다른 파일에 하드코딩하지 마세요.
     전부 여기서 정의하고 var()로 참조합니다.
     (기존 사이트들이 5px/16px/20px/70vw 혼재로 페이지마다 폭이
      달라졌던 문제가 정확히 이 규칙을 안 지켜서 생겼습니다.)

   새 사이트의 브랜드 색은 --brand-* 3줄만 바꾸면 전체에 반영됩니다.
   ============================================================= */

:root {
  /* ── 브랜드 색 (사이트마다 여기만 교체) ────────────── */
  --brand-primary:   #0b2a4a;   /* 주색 — 네비·제목·강조 */
  --brand-secondary: #1d5b8f;   /* 보조색 — 링크·아이콘 */
  --brand-accent:    #c8862b;   /* 강조색 — CTA·배지 */
  --footer-bg:       #153f42;   /* 푸터 — 메인 히어로 강물색과 같은 색 */
  --footer-accent:   #e5ba8a;   /* 푸터 제목 — 메인 모래색 */

  /* ── 파생 색 ────────────────────────────────────── */
  --color-text:        #1c1c1e;
  --color-text-muted:  #5c5f66;
  --color-text-invert: #ffffff;
  --color-bg:          #ffffff;
  --color-bg-soft:     #f5f6f8;
  --color-bg-dark:     var(--brand-primary);
  --color-border:      #e2e5ea;
  --color-border-strong:#c9ced6;
  --color-success:     #1a7f4b;
  --color-danger:      #c0392b;

  /* CTA — 전화와 예약을 색으로 구분한다(같은 색이면 선택이 느려진다) */
  --cta-call-bg:    var(--brand-primary);
  --cta-call-fg:    #ffffff;
  --cta-reserve-bg: #a34e32;   /* 노을색 — 메인 팔레트와 통일, 흰 글자 대비 약 5.9:1 (2026-10-05) */
  --cta-reserve-fg: #ffffff;
  --cta-naver-bg:   #00843c;   /* 네이버 초록(#03c75a)은 흰 글자 대비 2.25:1 — 같은 계열을 진하게 해 4.8:1 (2026-10-08 접근성 점검) */
  --cta-kakao-bg:   #fee500;
  --cta-kakao-fg:   #191600;

  /* ── 여백 ───────────────────────────────────────── */
  --page-gutter:   16px;   /* 모바일 텍스트 좌우 여백 — 전 사이트 표준 */
  --img-gutter:    16px;   /* 콘텐츠 이미지 좌우 여백 (히어로는 풀블리드 예외) */
  --section-gap:   80px;   /* 섹션 상하 패딩 */
  --container-max: 1200px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── 타이포 ─────────────────────────────────────── */
  --font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", system-ui, sans-serif;

  /* 한글은 라틴보다 시각적으로 작게 보여 본문을 17px에서 시작한다 */
  --fs-body:   17px;
  --fs-small:  15px;
  --fs-caption:13px;
  --fs-h1:     clamp(28px, 6vw, 44px);
  --fs-h2:     clamp(23px, 4.4vw, 34px);
  --fs-h3:     clamp(19px, 3.2vw, 24px);

  --lh-tight: 1.3;
  --lh-body:  1.75;   /* 한글 본문 가독성 기준 */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* 한글 제목이 조사에서 어색하게 끊기지 않도록 */
  --wordbreak: keep-all;

  /* ── 형태 ───────────────────────────────────────── */
  /* macOS 위젯을 기준으로 잡았다. 작은 칩 10px, 카드 18px, 큰 패널 24px. */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* 그림자는 넓고 옅게 — 유리가 떠 있는 느낌을 만드는 건 진한 그림자가
     아니라 넓게 퍼진 그림자다. */
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --shadow:    0 8px 28px rgba(16, 24, 40, .10);
  --shadow-lg: 0 20px 56px rgba(16, 24, 40, .18);

  /* ── 유리(frosted glass) ────────────────────────────
     ⚠ backdrop-filter는 비싸다. 카드마다 걸지 말고 큰 패널
       (헤더·메가패널·모바일 시트·CTA 바) 몇 개에만 쓴다.
       작은 카드는 --glass-solid(블러 없는 반투명)로 충분하다. */
  --glass-blur:        saturate(180%) blur(20px);
  --glass-bg:          rgba(255, 255, 255, .72);   /* 밝은 배경 위 */
  --glass-bg-strong:   rgba(255, 255, 255, .86);   /* 대비가 필요할 때 */
  --glass-solid:       rgba(255, 255, 255, .78);   /* 블러 없는 폴백 겸용 */
  --glass-border:      rgba(255, 255, 255, .55);   /* 유리 가장자리 하이라이트 */
  --glass-inner:       inset 0 1px 0 rgba(255, 255, 255, .65);

  /* 어두운 유리 (헤더·푸터처럼 브랜드색 위에 얹는 경우) */
  --glass-dark-bg:     rgba(11, 42, 74, .68);
  --glass-dark-strong: rgba(11, 42, 74, .86);
  --glass-dark-border: rgba(255, 255, 255, .16);
  --glass-dark-inner:  inset 0 1px 0 rgba(255, 255, 255, .12);

  /* 유리 뒤에 깔리는 은은한 배경. 뒤가 단색이면 블러 효과가 보이지 않는다. */
  --page-wash:
    radial-gradient(1100px 620px at 12% -8%,  rgba(29, 91, 143, .16), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,   rgba(200, 134, 43, .13), transparent 60%),
    radial-gradient(760px 620px at 50% 108%, rgba(11, 42, 74, .10),  transparent 64%);

  /* ── 레이어 ─────────────────────────────────────── */
  --z-nav:    900;
  --z-float:  950;
  --z-toast:  980;
  --z-modal: 1000;

  /* ── 크기 ───────────────────────────────────────── */
  --nav-height:  72px;
  --nav-height-scrolled: 60px;   /* 스크롤 뒤 얇은 헤더 — 헤더와 헤더 밖 오버레이가 같은 값을 쓴다 */
  --tap-min:     44px;   /* 모바일 탭 타깃 최소 크기 (접근성 기준) */
  --float-btn-h: 52px;   /* 하단 고정 띠 버튼 높이 — 띠 높이·본문 여백·맨 위로 위치가 모두 이 값을 따른다 */
  --float-tab-w: 56px;   /* 데스크톱 오른쪽 세로 탭 폭 — 탭과 토스트 위치가 함께 쓴다 */

  /* ── 모션 ───────────────────────────────────────── */
  --transition: .25s ease;
}

@media (max-width: 1024px) {
  :root {
    /* 화면 하단 여백과 토스트·맨 위로 위치가 하단 CTA 띠 높이를 따른다 (버튼 52px + 아이폰 홈 표시줄) */
    --float-cta-height: calc(var(--float-btn-h) + env(safe-area-inset-bottom, 0px));
  }
}
/* 띠를 끈 페이지(예약 폼 — $hideFloatingCta)는 띠 자리를 비우지 않는다.
   화면 폭만 보고 비우면 띠도 없는데 맨 아래에 빈 띠가 남고 맨 위로 버튼이 떠서 제출 버튼을 덮었다 (2026-10-09 플로팅 CTA 감사 2-4·3-5) */
html.no-float-cta { --float-cta-height: 0px; }

@media (min-width: 1025px) {
  :root {
    /* 데스크톱 CTA 는 오른쪽 끝 가운데 세로 탭이라 우측 하단이 비어 있다.
       맨 위로 버튼은 바닥에, 전화 재시도 토스트는 그 위에 쌓는다. */
    --float-dock-stack: calc(var(--space-5) + var(--tap-min) + var(--space-3));
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height:  60px;
    --section-gap: 48px;
    --fs-body:     16px;
  }
}

/* 투명도 줄이기를 켠 사용자에게는 유리를 불투명으로 바꾼다.
   흐릿한 배경이 읽기를 방해한다고 느끼는 사용자를 위한 OS 설정이다. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg:        #fff;
    --glass-bg-strong: #fff;
    --glass-solid:     #fff;
    --glass-border:    var(--color-border);
    --glass-inner:     none;
    --glass-dark-bg:     var(--brand-primary);
    --glass-dark-strong: var(--brand-primary);
    --glass-dark-inner:  none;
    --page-wash: none;
  }
}

/* 모션 최소화를 켠 사용자에게는 애니메이션을 걷어낸다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* base/base.css */
/* =============================================================
   base/base.css — 레이아웃·타이포·공통 유틸
   (critical-inline.css 이후에 로드됩니다. 여기 있는 것은
    첫 화면에 보이지 않아도 되는 스타일입니다.)
   ============================================================= */

/* ── 타이포 ─────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); word-break: var(--wordbreak); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { word-break: var(--wordbreak); }

.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }
.text-small   { font-size: var(--fs-small); }
.text-caption { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* 한 줄로 붙이고 싶은 어절 (예: "3,250세대") */
.nowrap { white-space: nowrap; }

/* ── 섹션 ───────────────────────────────────────────── */
.section { padding-block: var(--section-gap); }
/* 배경 wash가 비쳐 보이도록 반투명으로 얹는다 */
.section--soft { background: rgba(245, 246, 248, .62); }
.section--dark {
  background: var(--glass-dark-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-text-invert);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section--dark { background: var(--color-bg-dark); }
}

.section__head { margin-bottom: var(--space-6); text-align: center; }
.section__eyebrow {
  display: inline-block; margin-bottom: var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .12em;
  color: var(--brand-secondary); text-transform: uppercase;
}
.section__title { font-size: var(--fs-h2); }
.section__desc  { margin-top: var(--space-3); color: var(--color-text-muted); }

/* ── 그리드 ─────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ── 이미지 ─────────────────────────────────────────── */
/* 콘텐츠 이미지는 좌우 여백을 토큰으로 통일한다.
   개별 페이지에서 width:90%·max-width:70vw 같은 걸 쓰면
   페이지마다 폭이 달라진다 — 금지. */
.content-img { padding-inline: var(--img-gutter); }
.content-img img { width: 100%; border-radius: var(--radius); }

/* 종횡비를 미리 잡아 이미지 로딩 중 레이아웃이 밀리지 않게 한다 */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-16x9 > img, .ratio-4x3 > img, .ratio-1x1 > img { width: 100%; height: 100%; object-fit: cover; }

/* ── 카드 ───────────────────────────────────────────── */
/* 카드는 수가 많다. backdrop-filter를 걸면 스크롤이 눈에 띄게 무거워지므로
   블러 없이 반투명 + 가장자리 하이라이트만으로 유리 느낌을 낸다. */
.card {
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm), var(--glass-inner);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glass-inner); }
.card__body { padding: var(--space-5); }
.card__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.card__text { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ── 유리 패널 ──────────────────────────────────────── */
/* 큰 덩어리에만 쓴다. 남용하면 화면이 뿌예지고 성능도 떨어진다. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--glass-inner);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}

/* ── 배지 ───────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  background: var(--brand-accent); color: #fff;
}
.badge--soft { background: var(--color-bg-soft); color: var(--brand-primary); }

/* ── 맨 위로 ────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--space-4); z-index: var(--z-float);
  bottom: calc(var(--space-4) + var(--float-cta-height, 0px));
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%; background: rgba(28,28,30,.72); color: #fff;
  box-shadow: var(--shadow); transition: opacity var(--transition);
}
/* 데스크톱 CTA 는 오른쪽 끝 가운데 세로 탭 — 맨 위로는 우측 하단 바닥에 둔다 (토스트는 그 위 --float-dock-stack) */
@media (min-width: 1025px) {
  .to-top { right: var(--space-5); bottom: var(--space-5); }
}
/* 모바일 메뉴를 열면 어두운 덮개 위로 맨 위로만 밝게 남아, 덮개를 눌러 닫으려다 뒤 페이지만 올라갔다 (2026-10-09 감사 3-4).
   하단 띠는 메뉴에서도 전화·예약을 하라고 남기지만 맨 위로는 남길 이유가 없다 */
body:has(.nav__menu.is-open) .to-top { display: none; }

/* 인쇄 시 숨김은 print.css 한 곳에서 (media="print" 로 따로 불러온다) */

/* base/table.css */
/* =============================================================
   base/table.css — 표 (분양가·평형·공급면적)

   모바일에서 표가 화면을 밀어내지 않도록 가로 스크롤 컨테이너에
   담습니다. 표 자체를 축소하면 숫자가 읽히지 않습니다.
   ============================================================= */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: var(--page-gutter);
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--glass-inner);
}
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; }

.table-wrap th,
.table-wrap td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
  text-align: center;
  white-space: nowrap;
}
.table-wrap thead th {
  background: var(--brand-primary); color: var(--color-text-invert);
  font-weight: var(--fw-medium);
}
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:nth-child(even) { background: rgba(11, 42, 74, .035); }

/* 스크롤이 가능하다는 걸 알려주는 힌트 */
.table-hint {
  display: none; margin: var(--space-2) var(--page-gutter) 0;
  font-size: var(--fs-caption); color: var(--color-text-muted);
}
@media (max-width: 768px) { .table-hint { display: block; } }

/* components/nav.css */
/* =============================================================
   components/nav.css — 네비게이션

   뼈대(고정 위치·높이·시트 대기 상태·햄버거)는 critical-inline.css에.
   여기는 첫 페인트 이후에 필요한 상세 스타일이다.

   [구성]
     1. 헤더 공통 (로고·스크롤 상태)
     2. 메뉴 링크 (hover·활성·포커스)
     3. 전화 버튼
     4. 데스크톱 메가패널
     5. 태블릿
     6. 모바일 시트
     7. 햄버거
   ============================================================= */

/* =============================================================
   1. 헤더 공통
   ============================================================= */
.nav {
  transition: height var(--transition), background-color var(--transition), box-shadow var(--transition);
  will-change: height;
}

/* 스크롤하면 헤더를 얇게 + 살짝 진하게 — 본문 가림을 줄이고 경계를 만든다 */
.nav.is-scrolled {
  --nav-height: var(--nav-height-scrolled);
  /* 스크롤하면 본문이 헤더 뒤로 지나간다 → 유리를 더 진하게 해 글자를 지킨다 */
  background: var(--glass-dark-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .24), var(--glass-dark-inner);
}

.nav__logo {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 100%; min-height: var(--tap-min);
  transition: opacity var(--transition);
}
.nav__logo:hover { opacity: .82; }
.nav__logo-img { height: 30px; width: auto; display: block; }
.nav__logo-text {
  font-size: 18px; font-weight: var(--fw-bold);
  letter-spacing: -.02em; white-space: nowrap;
}
.nav.is-scrolled .nav__logo-img { height: 26px; }

/* 메인 첫 화면은 헤더가 투명이라 흰 글자·아이콘이 밝은 슬라이드(하늘·물빛) 위에서 묻혔다 — 대비 2.1~3.4:1 (2026-10-08 접근성 점검).
   사진을 덮어 어둡게 하는 대신(10/6 "어둡다"로 거절) 글자·아이콘 둘레에만 그림자를 둔다. 스크롤하면 짙은 유리가 깔리므로 끈다. */
.page-home .nav:not(.is-scrolled) .nav__logo-text {   /* 10/8 점검에서 빠졌던 단지명 — 밝은 하늘 위 1.9:1 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .4);
}
@media (max-width: 1024px) {   /* PC 전화 버튼은 흰색으로 꽉 채워(3절) 그림자가 필요 없다 */
  .page-home .nav:not(.is-scrolled) .nav__tel svg {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .8)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
  }
}
.page-home .nav:not(.is-scrolled) .nav__toggle[aria-expanded="false"] .nav__toggle-bar {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 4px rgba(0, 0, 0, .6);
}
@media (min-width: 1025px) {   /* 모바일 메뉴 글자는 흰 시트 위의 짙은 글자라 데스크톱에서만 */
  .page-home .nav:not(.is-scrolled) .nav__link {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .4);
  }
  .page-home .nav:not(.is-scrolled) .nav__ico svg {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .8)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
  }
}

/* 어두운 헤더 위에서는 기본 포커스 링이 묻힌다 — 네비 전용으로 다시 지정 */
.nav a:focus-visible,
.nav button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   2. 메뉴 링크
   ============================================================= */
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__row { display: flex; align-items: center; }

.nav__link {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  height: var(--nav-height); padding-inline: var(--space-4);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: #fff;
  transition: color var(--transition);
}
.nav__link:hover { color: #fff; }

/* 밑줄은 중앙에서 퍼진다. 링크 폭만큼 잡아두고 scaleX로 여닫아야
   레이아웃이 흔들리지 않는다(width 애니메이션은 리플로우를 부른다). */
.nav__link::after {
  content: '';
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--brand-accent);
  transform: scaleX(0);
  transition: transform .22s ease;
  will-change: transform;
}
.nav__link:hover::after { transform: scaleX(.45); }
.nav__link.is-active { color: #fff; }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__ico { display: inline-flex; flex: none; opacity: .9; }
.nav__hot { display: none; }          /* 모바일 전용 */
.nav__sub-toggle { display: none; }   /* 모바일 전용 */

/* 방문예약 — 모바일 메뉴에서만 HOT 배지로 강조한다 */
.nav__item.is-hot .nav__link { font-weight: var(--fw-bold); }

/* =============================================================
   3. 전화 버튼
   ============================================================= */
.nav__tel {
  display: flex; align-items: center; gap: 7px; flex: none;
  min-height: var(--tap-min); padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.nav__tel:hover {
  background: var(--brand-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.nav__tel:active { transform: none; }
.nav__tel svg { flex: none; }

/* PC: 전화는 1순위 전환이라 헤더에서 가장 먼저 보여야 한다. 반투명(흰 14%)이면 메인의 밝은 하늘 위에서
   알약이 사라져(2.7:1) 메뉴보다 약했다 → 흰색으로 꽉 채우고 남색 글자(14.5:1). 투명·남색 헤더 어디서나 같다.
   모바일은 아이콘 원 그대로 — 하단 고정 띠가 전화 버튼 역할을 한다. (2026-10-08 시각 우선순위 점검) */
@media (min-width: 1025px) {
  .nav__tel {
    background: #fff; border-color: #fff;
    color: var(--brand-primary);
  }
  .nav__tel:hover { background: #fff; }
}

/* =============================================================
   4. 데스크톱 — 메가패널
   ============================================================= */
@media (min-width: 1025px) {
  .nav__menu { margin-left: auto; margin-right: var(--space-4); }
  .nav__sub { display: none; }   /* 모바일용 개별 목록은 숨김 */

  /* 데스크톱은 오른쪽 고정 CTA에 방문예약 경로가 있으므로 상단 네비에서는 중복 노출하지 않는다. */
  .nav__item.is-hot { display: none; }

  .nav__mega {
    position: absolute; inset: var(--nav-height) 0 auto 0;
    /* 불투명으로 둔다. 86% 유리였을 때 서브페이지 흰 배경의 짙은 본문 글자가 비쳐
       "조경" 옆에 뒤 문장의 마침표가 "."처럼 찍혀 보였다 (2026-10-08). */
    background: var(--brand-primary);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-dark-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .34), var(--glass-dark-inner);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav__mega { background: var(--brand-primary); }
  }

  /* 메뉴 영역에 들어왔을 때만 연다.
     .nav 전체를 대상으로 하면 로고나 전화번호에 마우스를 스치기만 해도
     패널이 펼쳐져 본문을 가린다. 패널 자신도 hover 대상에 포함해야
     메뉴 → 패널로 마우스를 옮기는 도중에 닫히지 않는다. */
  .nav__menu.is-mega-open .nav__mega { opacity: 1; visibility: visible; transform: none; }

  .nav__mega-grid {
    display: grid;
    /* 열을 넓게 펴지 말고 고정 폭으로 좌측부터 채운다.
       1fr로 균등 분배하면 항목 사이가 지나치게 벌어져 훑기 어렵다. */
    grid-template-columns: repeat(auto-fit, minmax(0, 190px));
    /* 메뉴가 오른쪽에 있으므로 패널도 오른쪽에 맞춘다.
       가운데 정렬하면 메뉴와 어긋나 어느 메뉴의 하위인지 읽히지 않는다. */
    justify-content: end;
    gap: 0;
    max-width: var(--container-max); margin-inline: auto;
    padding: var(--space-6) var(--page-gutter) var(--space-7);
  }
  .nav__mega-col {
    padding-inline: var(--space-5);
    border-left: 1px solid rgba(255, 255, 255, .08);
  }
  .nav__mega-col:first-child { border-left: 0; }

  .nav__mega-title {
    margin-bottom: var(--space-4);
    font-size: var(--fs-small); font-weight: var(--fw-bold);
    color: #fff;
  }
  .nav__mega-col.is-active .nav__mega-title { color: var(--brand-accent); }

  .nav__mega-col ul { display: flex; flex-direction: column; gap: 1px; }
  .nav__mega-col li a {
    position: relative;
    display: flex; align-items: center; min-height: 38px;
    padding-left: 12px;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, .70);
    transition: color var(--transition), transform var(--transition);
  }
  /* 항목 앞 점 — 현재 위치와 hover를 같은 언어로 표시한다 */
  .nav__mega-col li a::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 4px; height: 4px; margin-top: -2px;
    border-radius: 50%;
    background: var(--brand-accent);
    opacity: 0; transform: scale(.5);
    transition: opacity var(--transition), transform var(--transition);
  }
  .nav__mega-col li a:hover { color: #fff; transform: translateX(3px); }
  .nav__mega-col li a:hover::before { opacity: .7; transform: none; }
  .nav__mega-col li a.is-active { color: var(--brand-accent); font-weight: var(--fw-bold); }
  .nav__mega-col li a.is-active::before { opacity: 1; transform: none; }

  /* 패널이 열릴 때 열이 차례로 올라온다 */
  .nav__menu:hover .nav__mega-col,
  .nav__mega:hover .nav__mega-col { animation: mega-col-in .28s ease both; }
  .nav__mega-col:nth-child(2) { animation-delay: .04s; }
  .nav__mega-col:nth-child(3) { animation-delay: .08s; }
  .nav__mega-col:nth-child(4) { animation-delay: .12s; }
}

@keyframes mega-col-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   5. 태블릿 — 메뉴는 남기되 폭을 줄인다
   ============================================================= */
@media (min-width: 1025px) and (max-width: 1200px) {
  .nav__link { padding-inline: var(--space-3); font-size: var(--fs-caption); }
  .nav__link::after { left: var(--space-3); right: var(--space-3); }
  .nav__tel { padding: 9px 12px; }
  .nav__logo-text { font-size: 16px; }
}

/* =============================================================
   6. 모바일 — 좌측 시트 + 오버레이
   ============================================================= */
@media (max-width: 1024px) {
  .nav__mega { display: none; }

  .nav__menu {
    color: var(--color-text);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    z-index: var(--z-nav);
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--color-border); }

  .nav__link {
    flex: 1; height: auto; min-height: 56px;
    padding: 14px var(--page-gutter);
    font-size: var(--fs-body); font-weight: var(--fw-bold);
    color: var(--color-text);
  }
  /* 데스크톱용 밑줄은 끄고 좌측 바로 바꾼다 */
  .nav__link::after {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto; border-radius: 0;
    transform: scaleY(0); transform-origin: center;
    transition: transform .2s ease;
  }
  .nav__link:hover::after { transform: scaleY(0); }
  .nav__link.is-active::after { transform: scaleY(1); }
  .nav__link.is-active { color: var(--brand-primary); }

  .nav__ico { color: var(--brand-accent); }
  .nav__item.is-hot .nav__link { color: var(--color-text); }

  /* 작은 화면일수록 "지금 눌러야 할 것"이 눈에 띄어야 한다 */
  .nav__hot {
    display: inline-block; margin-left: auto;
    padding: 3px 10px; border-radius: var(--radius-pill);
    /* 강조색(#c8862b) 바탕은 11px 흰 글자 3.04:1 로 기준 미달 → PC 알약·하단 띠 방문예약과 같은 노을색 5.7:1 (2026-10-08 네브바 감사 #3) */
    background: var(--cta-reserve-bg); color: var(--cta-reserve-fg);
    font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .04em;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cta-reserve-bg) 45%, transparent);
  }

  .nav__sub-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 56px; min-height: 56px; flex: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: color var(--transition), background var(--transition);
  }
  .nav__sub-toggle:hover { background: var(--color-bg-soft); color: var(--color-text); }
  /* ⚠ 버튼 전체를 돌리면 왼쪽 구분선까지 돌아가 회색 상자로 보인다 — 화살표 아이콘만 돌린다 (2026-10-07) */
  .nav__sub-toggle svg { transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
  .nav__sub-toggle[aria-expanded="true"] { color: var(--brand-primary); }
  .nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
  /* 펼친 그룹은 제목도 브랜드색 — 어느 그룹의 하위인지 한눈에 */
  .nav__item.is-expanded > .nav__row > .nav__link { color: var(--brand-primary); }

  /* 하위 목록은 기본 접힘 — 한 화면에 상위 메뉴가 모두 보이게.
     display 를 끄고 켜면 툭 나타나므로 높이를 펼친다. 닫힌 동안은 visibility 로 포커스·스크린리더에서 뺀다. */
  .nav__sub {
    display: block;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: rgba(11, 42, 74, .045);
    border-top: 0 solid var(--color-border);
    transition: max-height .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .26s;
  }
  .nav__sub.is-open {
    max-height: 420px;   /* 하위 항목 최대 6개 × 44px + 여유. 항목을 늘리면 이 값도 늘릴 것 */
    visibility: visible;
    border-top-width: 1px;
    transition: max-height .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }
  .nav__sub.is-open li { animation: sub-in .24s ease both; }
  .nav__sub.is-open li:nth-child(2) { animation-delay: .03s; }
  .nav__sub.is-open li:nth-child(3) { animation-delay: .06s; }
  .nav__sub.is-open li:nth-child(4) { animation-delay: .09s; }
  .nav__sub.is-open li:nth-child(5) { animation-delay: .12s; }
  .nav__sub.is-open li:nth-child(6) { animation-delay: .15s; }
  .nav__sub li a {
    position: relative;
    display: flex; align-items: center; min-height: var(--tap-min);
    padding: 10px var(--page-gutter) 10px calc(var(--page-gutter) + 26px);
    font-size: var(--fs-small); color: var(--color-text);   /* 흐린 회색은 햇빛 아래 휴대폰에서 안 읽힌다 */
    transition: color var(--transition), background var(--transition);
  }
  .nav__sub li a::before {
    content: '';
    position: absolute; left: var(--page-gutter); top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--color-border-strong);
    transition: background var(--transition), transform var(--transition);
  }
  .nav__sub li a:hover { color: var(--color-text); background: rgba(0, 0, 0, .03); }
  .nav__sub li a.is-active { color: var(--brand-primary); font-weight: var(--fw-bold); }
  .nav__sub li a.is-active::before { background: var(--brand-accent); transform: scale(1.4); }

  /* 좁은 화면에서 로고 이미지와 단지명을 나란히 두면 헤더 폭을 다 먹어
     전화·햄버거가 밀린다. 이미지가 있으면 텍스트는 접는다. */
  .nav__logo-img { height: 24px; }
  .nav__logo:has(.nav__logo-img) .nav__logo-text { display: none; }
  .nav__logo-text { font-size: 16px; }

  /* :has() 미지원 브라우저 폴백 — 텍스트를 줄여 넘침만 막는다 */
  @supports not selector(:has(*)) {
    .nav__logo-text {
      max-width: 38vw; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
  }

  /* 전화번호는 숫자를 감추고 아이콘만 — 폭을 로고에 양보한다 */
  .nav__tel {
    width: var(--btn-h-sm); height: var(--btn-h-sm);   /* 48px — 1순위 전환 버튼이라 엄지 크기로 (2026-10-08) */
    justify-content: center; padding: 0;
  }
  .nav__tel:hover { transform: none; }
  .nav__tel-num { display: none; }

  .nav__overlay {
    position: fixed; inset: var(--nav-height) 0 0 0;
    background: rgba(0, 0, 0, .5);   /* zeronine.pe.kr 과 같이 어둡게만 — 흐림 없음 */
    z-index: calc(var(--z-nav) - 1);
    animation: nav-fade .22s ease both;
  }
  /* 오버레이는 헤더 밖이라 스크롤 뒤 얇아진 헤더를 몰랐다 — 769~1024 에서 헤더(60) 밑 12px 가 어둡지 않고 눌렸다 (2026-10-08 네브바 감사 #5) */
  .nav.is-scrolled ~ .nav__overlay { --nav-height: var(--nav-height-scrolled); }
}

@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sub-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__sub.is-open, .nav__sub-toggle svg { transition: none; }
  .nav__sub.is-open li { animation: none; }
}

/* =============================================================
   7. 햄버거
   ============================================================= */
/* 열면 ✕ 대신 왼쪽 화살표(←) — 메뉴가 왼쪽에서 나오므로 "이쪽으로 닫힌다"를 보여준다 (zeronine.pe.kr 과 같은 동작, 2026-10-07) */
.nav__toggle-bar {
  transition: transform .3s ease;
  will-change: transform;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: rotate(-45deg) translateY(3px) scaleX(.6);
  transform-origin: left center;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateX(-3px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: rotate(45deg) translateY(-3px) scaleX(.6);
  transform-origin: left center;
}

/* components/float-cta.css */
/* =============================================================
   components/float-cta.css — 하단 고정 CTA + 전화 재시도 토스트
   ============================================================= */

/* engle.co.kr 과 같은 구조 (2026-10-07 영구님 지시, 색·문구는 moodelhouse 그대로)
   · 모바일·태블릿(≤1024): 화면 하단을 꽉 채운 띠 — 방문예약 60 : 전화 40 (2026-10-09 영구님: 1순위는 방문예약)
   · 데스크톱(≥1025): 화면 오른쪽 끝 가운데에 붙은 세로 글씨 탭 — 본문 폭을 차지하지 않는다
   높이·폭은 tokens.css --float-btn-h · --float-tab-w 한 곳에서 바꾼다 (본문·푸터 하단 여백, 맨 위로·토스트 위치가 따라간다) */
.float-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-float);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--brand-primary);   /* 아이폰 홈 표시줄 여백까지 같은 색으로 채운다 */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .18);
}

.float-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--float-btn-h);
  padding: 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #fff;
}
.float-btn__ico { width: 22px; height: 22px; flex: none; }
.float-btn--call    { background: var(--cta-call-bg);    color: var(--cta-call-fg); }
.float-btn--reserve { background: var(--cta-reserve-bg); color: var(--cta-reserve-fg); }
/* 1순위(방문예약)를 크기로 드러낸다 — 반반일 땐 밝은 구간에서 남색 전화가 더 무거워 보였다 (플로팅 CTA 감사 1-1·4-1).
   색·순서는 그대로(10/7 지시), 예약은 엄지가 닿기 쉬운 오른쪽. 데스크톱 탭은 아래 미디어쿼리의 flex:none 이 덮는다 */
.float-btn--reserve { flex-grow: 1.5; }
.float-btn--naver  { background: var(--cta-naver-bg); }
.float-btn--kakao   { background: var(--cta-kakao-bg);   color: var(--cta-kakao-fg); }
.float-btn:active { filter: brightness(.94); }

/* 상담 버튼이 붙으면 4개가 되므로 글자를 줄인다 */
.float-cta--chat .float-btn { font-size: var(--fs-caption); gap: 5px; }
.float-cta--chat .float-btn__ico { width: 18px; height: 18px; }

@media (min-width: 1025px) {
  .float-cta {
    inset: 50% 0 auto auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 4px;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .float-btn {
    flex: none;
    flex-direction: column;
    gap: var(--space-2);
    width: var(--float-tab-w);
    min-height: 0;
    padding: 14px 0;
    border-radius: 12px 0 0 12px;
    font-size: 18px;
    letter-spacing: .06em;
    box-shadow: -4px 4px 24px rgba(0, 0, 0, .22);
  }
  .float-btn__label { writing-mode: vertical-rl; text-orientation: mixed; }
  .float-cta--chat .float-btn { font-size: var(--fs-small); }
  /* PC 탭에는 전화를 두지 않는다 (2026-10-09 플로팅 CTA 감사 1-3, 영구님 3안).
     PC 는 tel: 을 눌러도 통화가 안 되고(앱 선택 창만 뜬다) 번호도 보이지 않았다 — 번호는 고정 네브바가 늘 보여준다.
     탭이 하나로 줄어 방문예약이 PC 플로팅의 유일한 행동이 된다. */
  .float-btn--call { display: none; }
}
@media (min-width: 1025px) and (hover: hover) {
  .float-btn { transition: transform .18s ease, filter .18s ease; }
  .float-btn:hover { transform: translateX(-3px); filter: brightness(1.08); }
}

/* ── 전화 재시도 토스트 ─────────────────────────────── */
/* 전화 버튼을 눌렀는데 짧은 시간 안에 페이지로 돌아온 사용자에게만
   노출된다 (= 통화가 연결되지 않았을 가능성이 높은 사용자). */
.call-toast {
  position: fixed; z-index: var(--z-toast);
  left: var(--page-gutter); right: var(--page-gutter);
  bottom: calc(var(--float-cta-height, 0px) + var(--space-3));
  padding: var(--space-4);
  background: rgba(28, 28, 30, .82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: toast-in .3s ease both;
}
.call-toast__msg { font-size: var(--fs-small); line-height: 1.6; }
.call-toast__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.call-toast__btn { flex: 1; }   /* 모양은 components/button.css (.btn--sm .btn--primary) */
.call-toast__close { width: var(--tap-min); height: var(--tap-min); color: rgba(255,255,255,.7); font-size: 16px; }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 1025px) {
  /* 오른쪽 끝 세로 탭 왼쪽에 띄운다 — 낮은 화면에서 탭 아래쪽과 겹치지 않게 */
  .call-toast { left: auto; right: calc(var(--float-tab-w) + var(--space-5)); bottom: var(--float-dock-stack); max-width: 340px; }
}

/* components/footer.css */
/* =============================================================
   components/footer.css — 푸터
   ============================================================= */

.footer {
  margin-top: var(--section-gap);
  padding-block: var(--space-7);
  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: var(--fs-small);
}
.footer a { color: #fff; }
/* 모바일은 하단 고정 CTA에 가리지 않도록 여백을 더 준다 */
@media (max-width: 1024px) {
  .footer { padding-bottom: calc(var(--space-7) + var(--float-cta-height, 0px)); }
}

.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ── 사이트맵 ───────────────────────────────────────── */
.footer__sitemap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 768px) { .footer__sitemap { grid-template-columns: repeat(2, 1fr); } }

.footer__col-title {   /* h2 → p (2026-10-08 SEO) — 제목 태그 줄간격을 그대로 이어받게 */
  margin-bottom: var(--space-2);
  line-height: var(--lh-tight);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--footer-accent);
}
/* 링크 탭 영역을 44px로 확보한다 — 모바일에서 오터치를 줄이는 최소 기준.
   글자만 두면 23px 남짓이라 손가락으로 정확히 누르기 어렵다. */
.footer__col a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-caption);
  opacity: 1;
  transition: opacity var(--transition);
}
.footer__col a:hover { opacity: 1; text-decoration: underline; }

/* ── 사업 정보 ──────────────────────────────────────── */
.footer__info { padding-top: var(--space-6); }
.footer__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--footer-accent); margin-bottom: var(--space-3); }

.footer__address,
.footer__hours,
.footer__company {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-style: normal; font-size: var(--fs-caption); line-height: 1.9;
}
.footer__address a {
  min-height: var(--tap-min); display: inline-flex; align-items: center;
  font-weight: var(--fw-bold); color: #fff;
}
.footer__hours { margin-top: var(--space-2); }
.footer__company { margin-top: var(--space-2); }

.footer__disclaimer {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-caption); line-height: 1.8;
}
/* 처리방침 링크는 다른 글과 구분되게 굵게 (개인정보 처리방침 작성지침 — 쉽게 확인할 수 있게 표시) */
.footer__links { margin-top: var(--space-4); font-size: var(--fs-caption); }
.footer__links a { min-height: var(--tap-min); display: inline-flex; align-items: center; font-weight: var(--fw-bold); color: #fff; }
.footer__copy { margin-top: var(--space-2); font-size: var(--fs-caption); }

/* components/form.css */
/* =============================================================
   components/form.css — 예약 폼

   ★ 클래스명은 공용 예약 엔진(shared/includes/reservation/page.php)이
     출력하는 마크업을 그대로 따릅니다. 임의로 바꾸면 스타일이 통째로
     빠지므로, 엔진 마크업이 바뀌지 않는 한 이름을 유지하세요.

   [전환 관점에서 지킨 것]
   · 입력칸 48px 이상 — 모바일 오터치 감소
   · font-size 16px 이상 — iOS Safari가 16px 미만이면 화면을 확대해버려
     사용자가 폼 위치를 잃는다
   · 에러는 폼 상단이 아니라 눈에 띄는 색 블록으로 — 모바일에서 놓치지 않게
   ============================================================= */

/* 폼 전체를 유리 카드에 담는다 — macOS 시트처럼 배경 위에 떠 있게 */
.form-wrap {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--glass-inner);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .form-wrap { background: var(--glass-bg-strong); }
}
@media (max-width: 560px) {
  /* 좁은 화면에서는 카드 여백이 입력 폭을 갉아먹는다 */
  .form-wrap {
    margin-inline: var(--page-gutter);
    padding-inline: var(--space-4);
  }
}

.rsv-banner { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: var(--space-5); }
.rsv-page-title { font-size: var(--fs-h2); text-align: center; margin-bottom: var(--space-2); }
.rsv-page-subtitle { text-align: center; color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-6); }

.form-group { margin-bottom: var(--space-5); }
.form-group > label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.required { color: var(--color-danger); margin-left: 3px; }
.optional { color: var(--color-text-muted); font-weight: var(--fw-normal); font-size: var(--fs-caption); }

.form-control {
  width: 100%; min-height: 48px;
  padding: 12px var(--space-4);
  /* ⚠ 입력칸은 반투명으로 두지 않는다. 뒤 배경이 비치면 입력한 글자가
     읽기 어려워지고, 어디까지가 입력 영역인지도 흐려진다. */
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit; font-size: 16px; color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px rgba(29,91,143,.16);
  outline: none;
}
.form-control[aria-invalid="true"] { border-color: var(--color-danger); }
textarea.form-control { min-height: 110px; resize: vertical; }

/* 날짜 + 시간을 나란히 */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .form-row { grid-template-columns: 1fr; } }

.form-error {
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-danger); border-radius: var(--radius-sm);
  background: #fdecea; color: #8c2318;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}

/* ── 개인정보 동의 ──────────────────────────────────── */
.form-check-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.form-check-input { width: 22px; height: 22px; flex: none; accent-color: var(--brand-secondary); }
/* 체크박스는 시각적으로 22px로 두되, 라벨이 탭 영역을 44px로 넓힌다.
   체크박스 자체를 44px로 키우면 폼이 조잡해지고, 라벨을 안 키우면
   모바일에서 동의 체크가 잘 안 눌려 제출 직전에 이탈한다. */
.form-check-label {
  display: flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-small); line-height: 1.6; cursor: pointer;
}

.form-privacy { margin-bottom: var(--space-5); }
.form-privacy-disclosure {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-caption); color: var(--color-text-muted);
}
.form-privacy-disclosure summary { cursor: pointer; font-weight: var(--fw-medium); }
.form-privacy-table { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-size: var(--fs-caption); }
.form-privacy-table th, .form-privacy-table td { padding: 8px; border: 1px solid var(--color-border); text-align: left; }

/* ── 제출 ───────────────────────────────────────────── */
.btn-submit {
  width: 100%; min-height: 54px; margin-top: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--cta-reserve-bg); color: var(--cta-reserve-fg);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  transition: filter var(--transition);
}
.btn-submit:hover { filter: brightness(1.06); }
.btn-submit[disabled] { opacity: .55; cursor: not-allowed; }

/* ── 완료 화면 ──────────────────────────────────────── */
.rsv-complete {
  display: grid; grid-template-columns: var(--tap-min) minmax(0, 1fr);
  column-gap: var(--space-3);
  max-width: 560px; margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  text-align: left;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--glass-inner);
}
@media (max-width: 560px) { .rsv-complete { margin-inline: var(--page-gutter); } }
.rsv-complete__check {
  grid-column: 1; grid-row: 1 / span 2;
  width: var(--tap-min); height: var(--tap-min); margin: 0;
  color: var(--color-success);
}
.check-circle__ring { stroke: currentColor; fill: none; stroke-width: 2; }
.check-circle__tick { stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rsv-complete__title { grid-column: 2; align-self: end; font-size: var(--fs-h3); line-height: var(--lh-tight); }
.rsv-complete__lead {
  grid-column: 2; align-self: start;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted); font-size: var(--fs-caption); line-height: 1.55;
}
.rsv-complete__coupon {
  display: flex; align-items: center; justify-content: center;
  width: min(560px, calc(100% - (var(--page-gutter) * 2)));
  margin: var(--space-3) auto 0; padding: var(--space-3) var(--space-5);
  border: 1px dashed var(--brand-accent); border-radius: var(--radius);
  background: #fff8ec; color: var(--brand-primary); font-weight: var(--fw-bold);
}
.rsv-complete__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

.reservation-summary {
  grid-column: 1 / -1;
  margin: var(--space-5) 0 0; padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.reservation-summary > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.reservation-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.reservation-summary dt {
  display: block; margin-bottom: var(--space-1);
  color: var(--color-text-muted); font-size: var(--fs-caption); line-height: var(--lh-tight);
}
.reservation-summary dd {
  display: block; margin: 0;
  color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-tight);
}
.reservation-summary__heading { font-size: var(--fs-h3); margin-bottom: var(--space-3); }

/* ── 오시는 길 ──────────────────────────────────────── */
.directions-box {
  max-width: 560px; margin: var(--space-3) auto 0; padding: var(--space-4);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  background: var(--glass-bg); box-shadow: var(--shadow), var(--glass-inner);
  text-align: left;
}
.directions-box__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.directions-box__map {
  width: 100%; height: auto; aspect-ratio: 492 / 434; object-fit: cover;
  border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-3);
}
.directions-box__address { margin: 0; font-size: var(--fs-caption); color: var(--color-text-muted); }
.rsv-directions-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.rsv-directions-nav__link {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding-inline: var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-decoration: none;
}
.rsv-directions-nav__link::before {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; font-size: 11px; font-weight: 800;
}
.rsv-directions-nav__link--naver { background: var(--cta-naver-bg); color: var(--color-text-invert); }
.rsv-directions-nav__link--naver::before { content: "N"; background: var(--color-text-invert); color: var(--cta-naver-bg); }
.rsv-directions-nav__link--kakao { background: var(--cta-kakao-bg); color: var(--cta-kakao-fg); }
.rsv-directions-nav__link--kakao::before { content: "K"; background: var(--cta-kakao-fg); color: var(--cta-kakao-bg); }
@media (max-width: 560px) {
  .directions-box { margin-inline: var(--page-gutter); }
  .directions-box__map { margin-bottom: var(--space-4); }
  .directions-box__address { font-size: var(--fs-body); }
  .rsv-directions-nav { margin-top: var(--space-4); }
}

/* 공용 엔진이 쓰는 숨김 클래스 (.sr-only와 동일 역할) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* components/subpage.css */
/* =============================================================
   components/subpage.css — 하위 페이지 10개 공통
   (사업안내·단지안내·세대안내 하위. 마크업은 includes/subpage.php)

   여백은 --page-gutter / --img-gutter 토큰만 쓴다 (README §3).
   ============================================================= */

/* ── 페이지 머리 ────────────────────────────────────── */
.subhead {
  padding-top: var(--space-7);
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.subhead__eyebrow {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .12em;
  color: var(--brand-secondary);
}
.subhead__title { margin-top: var(--space-2); font-size: var(--fs-h1); color: var(--brand-primary); }
.subhead__lead { max-width: 640px; margin: var(--space-3) auto 0; color: var(--color-text-muted); }

/* 형제 탭 — 모바일에서 넘치면 가로 스크롤 (줄바꿈하면 탭 높이가 들쭉날쭉) */
.subtabs { margin-top: var(--space-6); }
.subtabs__list {
  display: flex; justify-content: center; gap: var(--space-1);
  padding-inline: var(--page-gutter);
  overflow-x: auto; scrollbar-width: none; list-style: none;
}
.subtabs__list::-webkit-scrollbar { display: none; }
.subtabs__link {
  display: flex; align-items: center; min-height: var(--tap-min);
  padding: 0 var(--space-4); white-space: nowrap;
  font-weight: var(--fw-medium); color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
}
.subtabs__link:hover { color: var(--brand-primary); }
.subtabs__link[aria-current="page"] { color: var(--brand-primary); font-weight: var(--fw-bold); border-bottom-color: var(--brand-accent); }
@media (max-width: 768px) { .subtabs__list { justify-content: flex-start; } }

/* ── 본문 블록 ──────────────────────────────────────── */
.subsection { padding-block: var(--space-8); }
.subsection + .subsection { padding-top: 0; }
.subsection__title { font-size: var(--fs-h2); color: var(--brand-primary); }
.subsection__desc { margin-top: var(--space-2); color: var(--color-text-muted); }
.subsection__head { margin-bottom: var(--space-5); }

.lead-img { margin-top: var(--space-6); padding-inline: var(--img-gutter); }
.lead-img img { width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 1233px) { .lead-img { max-width: var(--container-max); margin-inline: auto; padding-inline: 0; } }

/* 크게 보기 도면 */
.zoomfig { margin: 0; }
.zoomfig__link { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: #fff; }
.zoomfig__link img { width: 100%; height: auto; display: block; }
.zoomfig__hint {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(11, 42, 74, .82); color: #fff; font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.zoomfig figcaption { margin-top: var(--space-2); }

/* 표 — 정의형 (항목 | 내용) */
.spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--brand-primary); }
.spec th, .spec td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.spec th { width: 32%; background: var(--color-bg-soft); font-weight: var(--fw-bold); color: var(--brand-primary); white-space: nowrap; }
@media (max-width: 480px) { .spec th { width: 36%; white-space: normal; } .spec th, .spec td { padding: var(--space-3); } }

/* 숫자 표는 우측 정렬로 자릿수를 맞춘다 */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap td.num, .table-wrap th.num { text-align: right; }

/* 타입 링크(84A 등 → 평면도) — 글자만 누르면 27×21px 라 휴대폰에서 작다. 칸 전체(약 88×51)를 누르는 영역으로, 모양은 그대로 (2026-10-08 접근성 점검) */
.table-wrap tbody th[scope="row"] { position: relative; }
.table-wrap tbody th[scope="row"] > a::after { content: ""; position: absolute; inset: 0; }

/* 기능 카드 (이미지 + 글) */
.feature { display: flex; flex-direction: column; }
.feature__img img { width: 100%; height: auto; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; display: block; }
.feature .card__body { flex: 1; }

/* 시설 목록 — 번호 + 이름 + 설명 */
.facility { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: repeat(2, 1fr); list-style: none; counter-reset: fac; }
.facility li { position: relative; padding-left: 40px; counter-increment: fac; }
.facility li::before {
  content: counter(fac); position: absolute; left: 0; top: 2px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  background: var(--brand-primary); color: #fff; font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.facility strong { display: block; color: var(--brand-primary); }
.facility span { font-size: var(--fs-small); color: var(--color-text-muted); }
@media (max-width: 768px) { .facility { grid-template-columns: 1fr; } }

/* 수치 칩 (평면도 타입 요약) */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.chip { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-bg-soft); }
.chip__label { display: block; font-size: var(--fs-caption); color: var(--color-text-muted); }
.chip__value { display: block; margin-top: 2px; font-weight: var(--fw-bold); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.chip--accent { background: var(--brand-primary); }
.chip--accent .chip__label { color: rgba(255, 255, 255, .75); }
.chip--accent .chip__value { color: #fff; }

/* ── 탭 패널 (평면도·실내모습·커뮤니티) ──────────────
   JS(tabs.js)가 없으면 패널이 전부 펼쳐진 채로 보인다 — 내용이 숨지 않게. */
.tabs__list {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5); list-style: none;
}
.tabs__btn {
  min-height: var(--tap-min); min-width: 64px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: #fff; color: var(--color-text); font: inherit; font-weight: var(--fw-medium); cursor: pointer;
}
.tabs__btn:hover { border-color: var(--brand-primary); }
.tabs__btn[aria-selected="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: var(--fw-bold); }
.tabs__btn:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.no-js .tabs__list { display: none; }
/* 스크립트 사용 중이면 tabs.js 가 돌기 전부터 첫 패널만 보인다 — 펼쳤다 접으며 화면이 밀리지 않게 (감사 8.1a) */
html:not(.no-js) [data-tabs]:not(.js-tabs) .tabs__panel ~ .tabs__panel { display: none; }
html:not(.no-js) [data-tabs]:not(.js-tabs) .tabs__btn:first-child { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: var(--fw-bold); }
.tabs__panel + .tabs__panel { margin-top: var(--space-7); }
.js-tabs .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs__panel-title { font-size: var(--fs-h3); color: var(--brand-primary); margin-bottom: var(--space-4); }

/* 긴 세로 이미지(평면도·실내 합성컷)는 너무 넓게 펴지 않는다 */
.tall-img { max-width: 860px; margin-inline: auto; }

/* ── 주소 카드 (오시는 길) ───────────────────────────── */
.place-card { padding: var(--space-5); }
.place-card__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--brand-accent); }
.place-card__addr { margin-top: var(--space-1); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--brand-primary); }
.place-card__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
/* 지도 버튼 모양은 components/button.css (.btn--sm .btn--naver/.btn--kakao) */

/* 보조 버튼(공고문 PDF 등) 모양은 components/button.css (.btn--line) */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* 상태 표시 (분양 일정 종료 등) */
.status-box {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  border-left: 4px solid var(--brand-accent); background: rgba(200, 134, 43, .08);
}
.status-box strong { color: var(--brand-primary); }

/* ── 유의사항 ───────────────────────────────────────── */
.notes { margin-top: var(--space-6); list-style: none; font-size: var(--fs-caption); color: var(--color-text-muted); }
.notes li { position: relative; padding-left: 1.1em; }
.notes li + li { margin-top: 4px; }
.notes li::before { content: "※"; position: absolute; left: 0; }

/* ── 마감 CTA ───────────────────────────────────────── */
.subcta__hours { margin-top: var(--space-3); color: rgba(255, 255, 255, .8); }
.subcta__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; max-width: 440px; margin: var(--space-5) auto 0; }
.subcta .btn { flex: 1 1 160px; }   /* 모양은 components/button.css */

/* 카드 안 번호 배지 다음 제목 간격 */
.card__body > .badge + .card__title { margin-top: var(--space-3); }
.spacer { height: var(--space-4); }
.directions-img img, .page-directions .grid img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.mt-6 { margin-top: var(--space-6); }

/* ── 자주 묻는 질문 (/faq) ─────────────────────────────── */
/* <details> 펼침 — 스크립트 없이 동작하고 접힌 답도 HTML 에 남아 검색엔진이 읽는다 */
.faq-list { max-width: 860px; margin-inline: auto; border-top: 2px solid var(--brand-primary); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__q {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--tap-min) + var(--space-4)); padding: var(--space-3) var(--space-1);
  cursor: pointer; list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; margin-right: var(--space-2);
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--transition);
}
.faq-item[open] > .faq-item__q::after { transform: rotate(-135deg) translateY(-3px); }
.faq-item__no { flex: none; font-weight: var(--fw-bold); color: var(--brand-accent); font-size: var(--fs-small); min-width: 2.2em; }
.faq-item__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--brand-primary); line-height: 1.5; }
.faq-item__q:hover .faq-item__title { color: var(--brand-secondary); }
.faq-item__a { padding: 0 var(--space-1) var(--space-5) calc(2.2em + var(--space-3) + var(--space-1)); color: var(--color-text); }
.faq-item__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.faq-item__links a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--brand-primary);
}
.faq-item__links a:hover { border-color: var(--brand-primary); }
@media (max-width: 768px) {
  .faq-item__a { padding-left: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) { .faq-item__q::after { transition: none; } }

/* ── 분양소식 (/news · /news/{slug}) ───────────────────── */
.news-list { max-width: 860px; margin-inline: auto; border-top: 2px solid var(--brand-primary); }
.news-list__item { border-bottom: 1px solid var(--color-border); }
.news-list__link { display: block; padding: var(--space-5) var(--space-1); }
.news-list__link:hover .news-list__title { color: var(--brand-secondary); }
.news-list__date { font-size: var(--fs-caption); color: var(--color-text-muted); }
.news-list__title { margin-top: var(--space-1); font-size: var(--fs-h3); color: var(--brand-primary); line-height: 1.45; }
.news-list__summary { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-text-muted); }
.subhead__eyebrow a { color: inherit; }
.news-article__title { max-width: 760px; margin-inline: auto; line-height: 1.4; }
.news-article__date { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-text-muted); }
.news-article { max-width: 760px; margin-inline: auto; }
.news-article > p + p { margin-top: var(--space-4); }
.news-article__h2 { margin-top: var(--space-7); font-size: var(--fs-h3); color: var(--brand-primary); }
.news-article__h2 + p, .news-article__h2 + .news-article__list { margin-top: var(--space-3); }
.news-article__list { margin-top: var(--space-3); padding-left: 1.2em; list-style: disc; }
.news-article__list li + li { margin-top: var(--space-2); }
.news-article__links { margin-top: var(--space-6); }

/* 실내모습 — 공식 VR 새 창 링크 */
.vr-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── 개인정보처리방침 (/privacy) — 글 폭은 분양소식 본문과 같게 ── */
.policy { max-width: 760px; margin-inline: auto; }
.policy__h2 { margin-top: var(--space-7); font-size: var(--fs-h3); color: var(--brand-primary); }
.policy__list { margin-top: var(--space-3); padding-left: 1.2em; list-style: disc; }
.policy__list li + li { margin-top: var(--space-2); }
.policy__list a { font-weight: var(--fw-bold); text-decoration: underline; }
.policy .table-wrap { margin: var(--space-3) 0 0; }
.policy .table-wrap table { min-width: 0; }               /* 2·3열 표는 모바일 폭에 들어간다 */
.policy .table-wrap--wide table { min-width: 560px; }   /* 국외 이전 4열 표만 가로 스크롤 */
.policy .table-wrap th, .policy .table-wrap td { white-space: normal; text-align: left; vertical-align: top; }
.policy .table-hint { margin-top: var(--space-3); }

/* ── 홍보영상 (/business/video) — 16:9 고정이라 플레이어가 뜰 때 화면이 밀리지 않는다 ── */
.video-embed { max-width: 1120px; margin-inline: auto; background: #000; }
.video-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.video-embed__summary { max-width: 1120px; margin: var(--space-4) auto 0; font-weight: var(--fw-bold); color: var(--brand-primary); text-align: center; }
.page-video .notes { max-width: 1120px; margin-inline: auto; text-align: center; }
.page-video .notes li { padding-left: 0; }
.page-video .notes li::before { position: static; margin-right: 4px; }   /* 가운데 정렬이라 ※ 를 문장 앞에 붙인다 */

/* components/button.css */
/* =============================================================
   components/button.css — 버튼 공통 (2026-10-08 통일)

   상담(방문예약)·전화·보조 버튼이 파일 5곳에 따로 정의돼 있던 것을 모았다.
   크기·색은 여기서만 바꾼다. 클릭 집계는 data-track 이라 클래스와 무관하다.

   [크기]  모바일 최소 48px — 구글 터치 권장 크기. 애플 기준(44px)보다 넉넉하게.
     .btn        52px  기본 (하위 페이지 마감 CTA·공고문 PDF 등)
     .btn--lg    56px  메인 첫 화면·평형·견본주택의 전화·예약 한 쌍
     .btn--sm    48px  지도·안내 토스트처럼 좁은 자리
   [종류]
     .btn--primary  상담(방문예약) — 노을색
     .btn--outline  밝은 배경 위 전화
     .btn--on-dark  어두운 배경 위 전화
     .btn--line     보조 (공고문·청약홈 등)
     .btn--naver / .btn--kakao  지도 앱
   [제외]  하단 고정 막대(float-btn)는 PC 세로 탭 구조가 달라 따로 둔다(52px).
           예약 제출(btn-submit)은 공용 예약 엔진 화면이라 다른 사이트와 함께 움직인다(54px).
   ============================================================= */
:root {
  --btn-h-sm: 48px;
  --btn-h:    52px;
  --btn-h-lg: 56px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn svg { flex: none; }
.btn--lg { min-height: var(--btn-h-lg); padding: 12px 26px; }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--space-4); font-size: var(--fs-small); }

.btn--primary { background: var(--cta-reserve-bg); color: var(--cta-reserve-fg); }
.btn--outline { border: 1px solid var(--river-ink, var(--brand-primary)); color: var(--river-ink, var(--brand-primary)); }
.btn--on-dark { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.btn--line    { border: 2px solid var(--brand-primary); color: var(--brand-primary); }
.btn--line:hover { background: var(--brand-primary); color: #fff; }
.btn--naver   { background: var(--cta-naver-bg); color: #fff; }
.btn--kakao   { background: var(--cta-kakao-bg); color: var(--cta-kakao-fg); }

/* 하위 페이지로 이어지는 '자세히 보기' — 글자 밑줄 + 화살표. 보이는 높이는 44px 그대로, 누르는 영역만 위아래 2px씩 넓혀 48px */
.link-more {
  position: relative;
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding-block: 8px; border-bottom: 1px solid #97a6a0;
  font-size: 14px; font-weight: var(--fw-bold); color: var(--river-ink, var(--brand-primary));
}
.link-more::before { content: ""; position: absolute; inset: -2px 0; }
.link-more::after { content: "→"; margin-left: var(--space-2); transition: transform var(--transition); }
.link-more:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}