@charset "UTF-8";
/* ============================================================
   하조대 프론트비치 — 공통 스타일시트
   모든 페이지가 이 한 파일을 공유합니다.

   Design source : Figma "양양 하조대 프론트비치"
                   node 2:2 (A4 · 공실 밸류업 팜플렛)
   Typeface      : Noto Sans KR 단일 (400/500/600/700/800)
   Concept       : bright · clean · premium — 블랙 서페이스 미사용
   ============================================================ */

:root{
  /* ── 1. Primitive tokens ────────────────────────────────
     [F] = Figma 원본 값 / [d] = 원본에서 파생한 톤
     ------------------------------------------------------ */
  /* 텍스트 블랙 통일 — 기존 #1E2124(제목) · #3D4043(리드) 을 한 값으로 합쳤다.
     위계는 색이 아니라 크기·굵기와 --sub 로 만든다. */
  --c-ink-900:#313131;   /* [F] 전 텍스트 블랙 */
  --c-ink-500:#6D6F72;   /* [F] 보조 텍스트 */
  --c-ink-300:#93979C;   /* [d] 캡션 · 비활성 */

  --c-gold-600:#876E4B;  /* [d] 소형 텍스트 · 버튼 (WCAG AA) */
  --c-gold-500:#A18A6D;  /* [F] 브랜드 골드 — 라인 · 대형 수치 */
  --c-gold-400:#BFA786;  /* [F] 어두운 면 위 골드 */
  --c-gold-100:#F4EFE7;  /* [d] 골드 틴트 면 */

  --c-slate-800:#2E3542; /* [d] 이미지 오버레이 · hover */
  --c-slate-600:#4E5765; /* [F] CTA · 강조 패널 */

  --c-mist-200:#E1E6ED;  /* [F] 쿨 톤 밴드 */
  --c-mist-100:#EFF2F6;  /* [d] 쿨 톤 카드 */
  --c-stone-200:#E7E4DE; /* [F] 웜 톤 밴드 — 서브페이지 배너 */
  --c-stone-100:#F7F5F0; /* 웜 톤 섹션 · 하단 CTA 밴드 */
  --c-paper:#FFFFFF;

  --c-line:rgba(30,33,36,.14);   /* [F] 0.709px hairline */
  --c-line-2:rgba(30,33,36,.20); /* [F] divider */
  --c-line-warm:#D2C7BA;         /* 웜 밴드 경계선 (배너 하단 · CTA 상단) */
  --c-line-on-dark:rgba(255,255,255,.18);

  /* ── 2. Semantic tokens ───────────────────────────────── */
  --ink:var(--c-ink-900);
  --sub:var(--c-ink-500); --faint:var(--c-ink-300);
  --gold:var(--c-gold-500); --gold-dk:var(--c-gold-600);
  --gold-lt:var(--c-gold-400); --gold-pale:var(--c-gold-100);
  --slate:var(--c-slate-600); --slate-dp:var(--c-slate-800);
  --paper:var(--c-paper); --sand:var(--c-stone-100); --stone:var(--c-stone-200);
  --mist:var(--c-mist-200); --mist-lt:var(--c-mist-100);
  --line:var(--c-line); --line-2:var(--c-line-2); --line-warm:var(--c-line-warm);

  /* ── 3. Type tokens ───────────────────────────────────── */
  --sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  /* 세리프는 선별 적용 — 로고 · 히어로 스탯 수치 (Regular 400 만 로드) */
  --serif:'Noto Serif KR','Nanum Myeongjo','Batang',serif;
  /* Light(300) 은 히어로 h1 60px 전용 — 소형 텍스트에는 쓰지 않는다 */
  --w-lgt:300; --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700; --w-xbold:800;
  /* 자간 — Figma 실측: 38px/-1.14px · 18px/-0.54px · 12px/-0.36px = -.03em */
  --tr-display:-.03em; --tr-title:-.03em; --tr-body:-.02em;
  /* 라벨 자간 — Figma label .18em은 라틴 전용.
     한글이 섞이는 라벨은 자모가 벌어져 보이므로 .08em 으로 별도 운용 */
  --tr-label:.18em; --tr-label-mix:.08em;
  /* 행간 — Figma: 제목 1.2 · 본문 1.8 · 캡션 1.6 */
  --lh-display:1.2; --lh-title:1.3; --lh-tight:1.6; --lh-body:1.8;

  /* ── 4. Shape · elevation ─────────────────────────────── */
  --r-sm:4px; --r-md:8px; --r-lg:10px; --r-xl:20px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(30,33,36,.04);
  --sh-lift:0 12px 32px rgba(30,33,36,.08);
  --sh-hero:0 24px 60px rgba(46,53,66,.16);

  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden 속성이 항상 이기게 한다.
   클래스에 display 를 지정하면(.lb{display:flex} 등) 브라우저 기본
   [hidden]{display:none} 을 덮어써서, 숨긴 요소가 계속 화면에 남는다.
   .lb 는 position:fixed·inset:0 이므로 이 경우 투명한 채로 전체 클릭을 가로챈다. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:var(--lh-body);font-weight:var(--w-reg);letter-spacing:var(--tr-body);
  /* 한글 어절 단위 줄바꿈 — '있습/니다' 식 중간 분절 방지 */
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* height:auto 가 없으면 HTML 의 height 속성(예 height="1073")이 그대로 적용돼
   width:100% 와 충돌하며 비율이 깨진다. 전역에서 차단. */
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h2{font-weight:var(--w-bold);font-size:clamp(26px,3.4vw,38px);
  line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.lead{color:var(--ink);max-width:640px;margin-top:16px;font-size:16px;
  line-height:var(--lh-body);letter-spacing:var(--tr-body)}
/* index(.home) 의 섹션 리드 2개는 한 줄로 노출한다.
   실측 필요 폭 667px · 733px → 폰트 폴백(맑은 고딕은 더 넓다) 여유 포함 820px.
   콘텐츠 폭이 733px 밑으로 좁아지는 뷰포트(~780px 이하)에서는 자연히 줄바꿈된다. */
.home .lead{max-width:820px}
section{padding:96px 0}
/* 아이브로우 — Figma label: SemiBold + tracking.
   'TRACK 1 — 1,000억 원' 처럼 한글이 섞이므로 mix 자간 사용 */
.k{color:var(--gold-dk);font-size:12px;font-weight:var(--w-semi);
  letter-spacing:var(--tr-label-mix);line-height:1.4;margin-bottom:16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--slate);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}

/* ── nav ─────────────────────────────────────────────── */
.topnav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-weight:var(--w-reg);font-size:19px;letter-spacing:var(--tr-title)}
.logo em{font-style:normal;color:var(--gold)}
.menu{display:flex;gap:30px;font-size:14px;font-weight:var(--w-med);color:var(--sub)}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink);font-weight:var(--w-semi);box-shadow:inset 0 -2px 0 var(--gold)}
.nav-cta{background:var(--gold-dk);color:#fff;padding:9px 20px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:var(--w-med);letter-spacing:var(--tr-body);transition:background .2s}
.nav-cta:hover{background:var(--slate-dp)}

/* 모바일 햄버거 */
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);transition:transform .22s,opacity .18s}
/* 3줄 모두 정수 위치에 둔다. 이전에는 가운데만 19.5px(반픽셀)여서
   안티앨리어싱 위상이 달라 두께가 다르게 보였다(실측: 위·아래 27.0/38.0, 가운데 32.5). */
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.drawer{position:relative;display:none;border-top:1px solid var(--line);background:#fff}
.drawer.open{display:block}
.drawer a{display:block;padding:15px 24px;font-size:15px;color:var(--sub);border-bottom:1px solid var(--line)}
.drawer a.on{color:var(--ink);font-weight:var(--w-semi);border-left:3px solid var(--gold);padding-left:21px}
.drawer .d-cta{color:var(--gold-dk);font-weight:var(--w-semi);border-bottom:none}
@media(max-width:860px){
  .menu,.topnav .nav-cta{display:none}
  .burger{display:block}
  /* 메뉴 열림 시 메뉴 밖(드로어 아래) 영역 딤 — #000 / 60%.
     .drawer 기준 top:100% 이므로 메뉴 바로 아래부터 화면 끝까지 덮는다.
     탭하면 닫히는 처리는 nav.js 에 있다. */
  .drawer.open::after{content:"";position:absolute;top:100%;left:0;right:0;
    height:100vh;background:rgba(0,0,0,.6)}
}

/* ── hero (홈) ───────────────────────────────────────────
   Figma node 5:17 — 1920×773, 조감도 렌더 + 플랫 스크림
   ------------------------------------------------------ */
.hero{position:relative;padding:0;height:min(88vh,773px);min-height:560px;display:flex;align-items:flex-end;
  /* 마스크 크롭 y 442–1215 / 1357 → 오프셋 442 ÷ (1357−773) = 76% */
  background:url('../img/bird-eye-master.jpg') center 76%/cover no-repeat;background-color:var(--slate-dp)}
/* Figma: rgba(0,0,0,.5) 단일 스크림 — 렌더를 눌러 타이포를 세운다 */
.hero:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.hero-in{position:relative;width:100%;max-width:1120px;margin:0 auto;padding:100px 24px 0}
/* h1 — 60px / 1행 Light 300 (-.05em) + 2행 Bold 700 (-.03em) · 행간 73/60 · 행간격 4px */
.hero h1{font-size:clamp(32px,4.4vw,60px);line-height:1.217;color:#fff}
.hero h1 .l1{display:block;font-weight:var(--w-lgt);letter-spacing:-.05em}
.hero h1 em{display:block;margin-top:4px;font-style:normal;
  font-weight:var(--w-bold);letter-spacing:var(--tr-display)}
.hero h1 .hl{color:var(--gold-lt)}
/* h1 이 50px 아래로 내려가면 Light 300 은 획이 죽는다 → Regular 로 승격 */
@media(max-width:1100px){
  .hero h1 .l1{font-weight:var(--w-reg);letter-spacing:var(--tr-display)}
}
.hero .h-sub{margin-top:15px;font-size:clamp(15px,1.6vw,18px);font-weight:var(--w-reg);
  /* 520px — Figma 텍스트 폭 509px, '…서피비치 / 사이,' 로 끊기게 */
  line-height:var(--lh-body);letter-spacing:var(--tr-display);color:#fff;max-width:520px}
.hero-card{margin-top:44px;background:rgba(255,255,255,.96);border:1px solid var(--line);
  border-bottom:3px solid var(--gold);border-radius:var(--r-lg);padding:28px 8px;
  display:grid;grid-template-columns:repeat(4,1fr);text-align:center;box-shadow:var(--sh-hero);transform:translateY(50%)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);
  font-weight:var(--w-reg);letter-spacing:var(--tr-display);line-height:1.25;
  font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:4px;font-size:13px;color:var(--sub);line-height:var(--lh-tight)}
.stat+.stat{border-left:1px solid var(--line)}
@media(max-width:720px){.hero-card{grid-template-columns:repeat(2,1fr);gap:18px 0;transform:translateY(38%)}
.stat:nth-child(3){border-left:none}}
/* 조감도 주석 — 스탯 카드 바로 위 (카드가 hero 밖으로 50% 걸치므로 흐름 배치) */
.hero-note{margin-top:16px;text-align:right;font-size:12px;color:#E7EBF0;opacity:.92;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-note+.hero-card{margin-top:12px}
@media(max-width:720px){.hero-note{text-align:left}}

/* ── 서브페이지 헤더 ─────────────────────────────────── */
body.sub{padding-top:var(--nav-h)}
/* 웜 톤 라이트 밴드 (#E7E4DE) — 쿨 그라디언트에서 플랫 웜으로 교체 */
.subhead{background:var(--stone);
  color:var(--ink);padding:60px 0 60px;position:relative;overflow:hidden}
.subhead:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line-warm)}
.subhead .k{color:var(--gold-dk)}
.subhead h1{font-weight:var(--w-bold);font-size:clamp(28px,4vw,44px);
  line-height:var(--lh-display);letter-spacing:var(--tr-display);color:var(--ink)}
/* 제목 내 키워드 강조. 히어로는 어두운 사진 위라 --gold-lt,
   배너는 밝은 웜 면(#E7E4DE) 위라 --gold 를 쓴다. */
.subhead h1 .hl{color:var(--gold)}
.subhead .lead{color:var(--ink);max-width:720px}

/* ── track (홈) ──────────────────────────────────────── */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
#tracks{padding-top:190px}
.track{border:1px solid var(--line);border-radius:var(--r-md);padding:34px 30px;background:var(--paper);
  display:flex;flex-direction:column;box-shadow:var(--sh-card);transition:border-color .2s,box-shadow .2s,transform .2s}
.track:hover{border-color:var(--gold);box-shadow:var(--sh-lift);transform:translateY(-2px)}
.track .no{color:var(--gold-dk);font-size:12px;font-weight:var(--w-semi);letter-spacing:var(--tr-label)}
.track h3{font-family:var(--serif);font-size:21px;font-weight:var(--w-semi);
  letter-spacing:var(--tr-title);line-height:var(--lh-title);margin:12px 0 4px}
.track .price{font-size:30px;font-weight:var(--w-bold);color:var(--gold);margin:14px 0 8px;
  letter-spacing:var(--tr-display);line-height:1.2;font-variant-numeric:tabular-nums}
.track p{font-size:14.5px;color:var(--sub);flex:1;line-height:var(--lh-body)}
.track a{margin-top:22px;font-size:14px;font-weight:var(--w-semi);border-top:1px solid var(--line);padding-top:16px;transition:color .2s}
.track a:hover{color:var(--gold-dk)}
@media(max-width:860px){.tracks{grid-template-columns:1fr}#tracks{padding-top:170px}}

/* ── bulk 본문 섹션 ──────────────────────────────────────
   화이트 배경. 재착색이 필요할 때 이 한 줄만 바꾸면 되도록 클래스는 남겨 둔다.
   (h2 / .lead 색 오버라이드는 기본값과 같아져 제거) */
.tone{background:var(--paper)}
.permits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.permit{border:1px solid var(--line);border-radius:var(--r-md);padding:26px;background:var(--paper);box-shadow:var(--sh-card)}
.permit b{font-family:var(--serif);font-size:18px;font-weight:var(--w-semi);
  color:var(--ink);letter-spacing:var(--tr-title)}
.permit .d{font-size:14px;color:var(--ink);margin-top:6px;line-height:var(--lh-tight)}
.permit .s{font-size:13px;color:var(--sub);margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.bulk-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;margin-top:56px;align-items:start}
.spec{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.spec th{color:var(--gold-dk);text-align:left;font-weight:var(--w-semi);padding:12px 6px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.spec td{padding:12px 6px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.pf{border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--r-md);
  padding:30px;background:var(--paper);box-shadow:var(--sh-card)}
.pf h4{font-size:18px;font-weight:var(--w-bold);color:var(--ink);letter-spacing:var(--tr-title);margin-bottom:14px}
.pf li{font-size:14.5px;color:var(--sub);margin:10px 0 10px 18px;line-height:var(--lh-body)}
@media(max-width:860px){.permits{grid-template-columns:1fr}.bulk-grid{grid-template-columns:1fr}}

/* ── 섹션 배경 톤 ─────────────────────────────────────── */
.sand{background:var(--sand)}   /* #F7F5F0 웜 라이트 */
.stone{background:var(--stone)} /* #E7E4DE 웜 미디엄 */
/* 웜 미디엄 위에서는 카드를 화이트로 띄운다 (.sand 와 같은 처리). */
.stone .acc{background:#fff;border:1px solid var(--line)}
/* #E7E4DE 위에 직접 놓이는 보조 텍스트는 --sub(#6D6F72) 가 3.97:1 로 AA 미달.
   밴드 위에서는 --ink 로 올리고, 위계는 크기·굵기로 유지한다.
   (화이트 카드 안의 --sub 는 5.5:1 이므로 그대로 둔다) */
.stone .ph-cap,
.stone .step span{color:var(--ink)}

/* ── lots ────────────────────────────────────────────── */
.lot-table{width:100%;border-collapse:collapse;margin-top:44px;background:#fff;font-size:15px;
  font-variant-numeric:tabular-nums;box-shadow:var(--sh-card)}
.lot-table th{background:var(--mist);color:var(--slate);font-weight:var(--w-semi);
  padding:14px 16px;text-align:left;font-size:13px;letter-spacing:.02em}
.lot-table td{padding:15px 16px;border-bottom:1px solid var(--line)}
.lot-table tr:last-child td{background:var(--gold-pale);font-weight:var(--w-bold)}
.lot-table .num{font-weight:var(--w-semi);text-align:right}
.lot-table tr:last-child .num{color:var(--gold-dk)}
.use{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.use-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px;box-shadow:var(--sh-card)}
.use-card h4{font-size:18px;font-weight:var(--w-bold);letter-spacing:var(--tr-title);margin-bottom:10px}
.use-card p{font-size:14.5px;color:var(--sub);line-height:var(--lh-body)}
.t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:720px){
  .use{grid-template-columns:1fr}
  /* min-width:520px 를 제거해 가로 스크롤을 없앤다.
     소재지 칸은 어절 단위로 줄바꿈되고, 면적·매각가는 한 토큰이라
     폰트와 좌우 패딩을 줄여 360px 화면에서도 4열이 다 들어가게 한다. */
  .lot-table{font-size:12.5px}
  .lot-table th{font-size:11.5px;letter-spacing:0;padding:9px 6px}
  .lot-table td{padding:9px 6px}
  /* 'Site A' · '1,001억 원' 같은 값이 쪼개지지 않게 첫 열과 수치 열은 줄바꿈 금지.
     줄바꿈은 소재지 칸에서만 일어난다. */
  .lot-table td:first-child,.lot-table .num{white-space:nowrap}
}

/* ── houses ──────────────────────────────────────────── */
.tabs{display:flex;gap:8px;margin:40px 0 0;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:#fff;padding:10px 26px;font-size:14.5px;cursor:pointer;
  border-radius:var(--r-pill);font-family:var(--sans);font-weight:var(--w-med);
  letter-spacing:var(--tr-body);color:var(--sub);transition:border-color .2s,color .2s,background .2s}
.tab:hover{border-color:var(--gold);color:var(--ink)}
.tab.on{background:var(--gold-pale);border-color:var(--gold);color:var(--gold-dk);font-weight:var(--w-semi)}
.parcels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.parcel{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff;box-shadow:var(--sh-card)}
.parcel b{font-size:17px;font-weight:var(--w-bold);letter-spacing:var(--tr-title)}
.parcel span{display:block;font-size:13.5px;color:var(--sub);margin-top:3px;line-height:var(--lh-tight)}
.parcel .st{display:inline-block;margin-top:12px;font-size:12px;font-weight:var(--w-med);color:var(--gold-dk);
  border:1px solid var(--gold);border-radius:var(--r-pill);padding:2px 12px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.step{border-top:2px solid var(--gold);padding-top:16px}
.step b{font-size:16px;font-weight:var(--w-bold);display:block;letter-spacing:var(--tr-title)}
.step span{font-size:13.5px;color:var(--sub);line-height:var(--lh-tight)}
@media(max-width:860px){.parcels{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}}

/* ── asset ───────────────────────────────────────────── */
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:46px;align-items:start}
.land{width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  font-variant-numeric:tabular-nums;box-shadow:var(--sh-card)}
.land th{background:var(--mist);color:var(--slate);padding:11px 12px;text-align:left;font-weight:var(--w-semi);font-size:13px}
.land td{padding:10px 12px;border-bottom:1px solid var(--line)}
.land tr:last-child td{background:var(--gold-pale);font-weight:var(--w-bold)}
.cond li{margin:0 0 14px 0;list-style:none;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:15px;line-height:var(--lh-tight)}
.cond b{display:block;font-size:12px;color:var(--gold-dk);font-weight:var(--w-semi);letter-spacing:var(--tr-label-mix);margin-bottom:4px}
.access{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.acc{background:var(--mist-lt);border-radius:var(--r-md);padding:24px 22px}
.acc b{font-family:var(--serif);font-size:20px;font-weight:var(--w-semi);display:block;
  letter-spacing:var(--tr-title)}
.acc span{font-size:13.5px;color:var(--sub);line-height:var(--lh-tight)}
.sand .acc{background:#fff;border:1px solid var(--line)}
@media(max-width:860px){.asset-grid{grid-template-columns:1fr}.access{grid-template-columns:repeat(2,1fr)}}

/* ── contact ─────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:46px;align-items:start}
form{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:36px;box-shadow:var(--sh-card)}
label{display:block;font-size:13.5px;font-weight:var(--w-semi);margin:18px 0 6px;letter-spacing:var(--tr-body)}
label:first-child{margin-top:0}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  font-family:var(--sans);font-size:15px;letter-spacing:var(--tr-body);background:var(--sand);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;background:#fff}
textarea{min-height:110px;resize:vertical;line-height:var(--lh-body)}
.submit{margin-top:26px;width:100%;background:var(--gold-dk);color:#fff;border:none;padding:16px;
  font-size:15.5px;font-weight:var(--w-semi);letter-spacing:var(--tr-body);border-radius:var(--r-sm);
  cursor:pointer;font-family:var(--sans);transition:background .2s}
.submit:hover{background:var(--slate-dp)}
.form-note{font-size:12.5px;color:var(--faint);margin-top:12px;line-height:var(--lh-tight)}
.form-done{display:none;margin-top:16px;padding:14px 16px;background:var(--gold-pale);border-left:3px solid var(--gold);font-size:14px;color:var(--gold-dk)}
/* 강조 패널 — Figma CTA #4E5765 (블랙 대체) */
.office{background:var(--slate);color:#F4F6F8;border-radius:var(--r-md);padding:36px}
.office h4{font-size:21px;font-weight:var(--w-bold);color:#fff;letter-spacing:var(--tr-title)}
.office .co{color:var(--gold-lt);font-size:12px;font-weight:var(--w-semi);letter-spacing:var(--tr-label);margin-bottom:12px}
.office p{font-size:14.5px;color:rgba(255,255,255,.82);margin-top:16px;line-height:var(--lh-body)}
.office .tel-label{margin-top:22px;font-size:12px;font-weight:var(--w-semi);letter-spacing:var(--tr-label-mix);color:var(--gold-lt)}
.office .tel{font-size:28px;font-weight:var(--w-bold);color:#fff;margin-top:4px;display:block;
  letter-spacing:var(--tr-title);font-variant-numeric:tabular-nums}
.office .tel:hover{color:var(--gold-lt)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ── 공통 이미지 · 갤러리 ────────────────────────────── */
/* 사업지 사진 — Figma node 5:30: 콘텐츠 폭 1072px · 원본 비율 · radius 20px */
.ph{width:100%;height:auto;border-radius:var(--r-xl);display:block}
.ph-cap{font-size:12.5px;color:var(--sub);margin-top:10px;line-height:var(--lh-tight)}
.bird-wrap{margin-top:48px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px}
.gal figure{margin:0}
/* 갤러리 격자는 높이를 통일한다.
   원본 8장 중 7장이 1.398~1.4175 인데 site-c-villa 만 1.5945(1400×878) 라
   같은 폭에서 12.5% 낮게 보였다. 지배 비율 1500/1060 으로 고정하고 cover 로 채운다.
   → bird-eye-master · site-plan(배치도)은 비율이 같아 무손실,
     나머지는 1% 미만, site-c-villa 만 좌우 5.6% 씩 잘린다. */
.gal .ph{aspect-ratio:1500/1060;object-fit:cover}
@media(max-width:720px){.gal{grid-template-columns:1fr}}

/* ── 사진 전체보기 라이트박스 ────────────────────────────
   .ph-zoom 은 lightbox.js 가 런타임에 붙인다 → JS 미동작 시 확대 커서 없음
   ------------------------------------------------------ */
.ph-zoom{cursor:zoom-in}
.ph-zoom:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* #000 오퍼시티 90% */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:64px 24px;background:rgba(0,0,0,.9);opacity:0;transition:opacity .18s ease}
.lb.on{opacity:1}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
/* 세로 짧은 화면에서 캡션까지 들어가도록 여백·캡션 높이를 뺀 값으로 제한 */
.lb-img{display:block;width:auto;height:auto;max-width:min(1600px,92vw);
  max-height:min(78vh,calc(100vh - 200px));border-radius:var(--r-xl);background:#141414}
.lb-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;
  max-width:760px;text-align:center;font-size:13.5px;line-height:var(--lh-tight);
  letter-spacing:var(--tr-body);color:rgba(255,255,255,.88)}
.lb-n{font-size:12px;color:var(--gold-lt);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.lb-n:empty{display:none}
/* 검정 배경 위에서는 테두리가, 밝은 사진 위에서는 어두운 면이 버튼을 규정한다.
   (좁은 화면에서 화살표가 사진 위에 겹치므로 양쪽 모두 대응해야 한다) */
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.38);
  border-radius:var(--r-pill);background:rgba(0,0,0,.45);color:#fff;
  font-family:var(--sans);line-height:1;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.lb-btn:hover{background:rgba(255,255,255,.16);border-color:var(--gold-lt);color:var(--gold-lt)}
.lb-btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.lb-x{top:20px;right:24px;font-size:26px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:24px}
.lb-next{right:24px}
/* 화살표는 CSS 로 그린 셰브론. 폰트 글리프(‹ ›)는 baseline 탓에
   원 중심보다 4.5px 아래로 렌더돼 정렬이 맞지 않았다(실측).
   회전 후 도형이 가로 중심선에 대해 대칭이라 세로 중앙이 정확히 맞는다. */
.lb-prev::before,.lb-next::before{content:"";display:block;width:11px;height:11px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor}
.lb-prev::before{transform:rotate(45deg)}
.lb-next::before{transform:rotate(-135deg)}
@media(max-width:720px){
  .lb{padding:56px 12px}
  .lb-img{max-width:96vw;max-height:min(64vh,calc(100vh - 190px))}
  .lb-btn{width:42px;height:42px}
  .lb-x{top:12px;right:12px;font-size:23px}
  .lb-prev,.lb-next{font-size:26px}
  .lb-prev{left:12px}
  .lb-next{right:12px}
}

/* ── 하단 CTA 밴드 ───────────────────────────────────── */
/* 웜 라이트 밴드 (#F7F5F0) — 경계선 없음 */
.cta-band{background:var(--sand);padding:64px 0}
.cta-in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h3{font-size:clamp(21px,2.6vw,27px);font-weight:var(--w-bold);
  letter-spacing:var(--tr-display);line-height:var(--lh-title);color:var(--ink)}
.cta-band p{font-size:14.5px;color:var(--sub);margin-top:8px;line-height:var(--lh-tight)}
/* 라이트 밴드 위 버튼 — 골드 다크 면 + 흰 텍스트 (4.8:1, WCAG AA).
   .submit 과 동일한 처리 → 라이트 서페이스의 주 버튼은 한 가지로 통일. */
.btn-gold{background:var(--gold-dk);color:#fff;padding:15px 34px;border-radius:var(--r-sm);
  font-size:15px;font-weight:var(--w-semi);letter-spacing:var(--tr-body);white-space:nowrap;
  transition:background .2s}
.btn-gold:hover{background:var(--slate-dp)}

/* ── 이전 / 다음 페이지 ──────────────────────────────── */
.pager{max-width:1120px;margin:0 auto;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.pager a{padding:26px 24px;font-size:14.5px;color:var(--sub);transition:background .2s,color .2s}
.pager a:hover{background:var(--sand);color:var(--ink)}
.pager a span{display:block;font-size:11px;font-weight:var(--w-semi);color:var(--gold-dk);letter-spacing:var(--tr-label);margin-bottom:6px}
.pager a+a{border-left:1px solid var(--line);text-align:right}
.pager .wrap-l{max-width:1120px;margin:0 auto}
@media(max-width:600px){.pager{grid-template-columns:1fr}.pager a+a{border-left:none;border-top:1px solid var(--line);text-align:left}}

/* ── footer ──────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:38px 0 46px;font-size:13px;color:var(--sub)}
footer .f-logo{font-family:var(--serif);font-weight:var(--w-reg);color:var(--ink);
  font-size:16px;margin-bottom:12px;letter-spacing:var(--tr-title)}
footer .f-logo em{font-style:normal;color:var(--gold)}

/* 사업위치 · 분양 문의 */
.f-site{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;font-size:14px;color:var(--sub)}
.f-site .f-tel{color:var(--ink);font-weight:var(--w-med)}
.f-site .f-tel a{font-size:17px;font-weight:var(--w-bold);color:var(--gold-dk);
  letter-spacing:var(--tr-title);margin-left:6px;font-variant-numeric:tabular-nums}
.f-site .f-tel a:hover{color:var(--ink)}

.f-nav{margin:18px 0 20px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.f-nav a:hover{color:var(--ink)}

/* 면책 문구 */
.disc{margin:0;padding:0;list-style:none;line-height:1.85;color:var(--faint)}
.disc li{position:relative;padding-left:15px}
.disc li:before{content:"※";position:absolute;left:0;opacity:.7}

/* 법인 정보 · 카피라이트 */
.f-corp{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--sub);line-height:1.9}
.f-corp i{font-style:normal;margin:0 8px;opacity:.45}
.f-corp a{color:var(--sub)}
.f-corp a:hover{color:var(--ink)}
.f-copy{margin-top:12px;font-size:12px;color:var(--faint);letter-spacing:.06em}
@media(max-width:600px){.f-corp i{display:none}.f-corp span{display:block}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .burger span{transition:none}
  .track,.track:hover{transition:none;transform:none}
  .lb{transition:none}
}