@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============================================================
   군자역 DS빌딩 임대 랜딩 — 아키텍처 매거진 톤
   모노크롬 · 대형 사진 · 얇은 타이포 · 여백
   ============================================================ */

:root {
  --ink: #14161a;
  --ink-soft: #3d4249;
  --muted: #83888f;
  --line: #d9d6d1;
  --paper: #f2f1ee;
  --paper-2: #e7e5e1;
  --white: #ffffff;
  --accent: #14161a;

  --w-max: 1280px;
  --pad-x: clamp(20px, 5vw, 72px);
  --space-sec: clamp(80px, 11vw, 176px);

  --t-eyebrow: 11px;
  --t-body: clamp(15px, 1.05vw, 17px);
  --t-lead: clamp(17px, 1.5vw, 21px);
  --t-h3: clamp(20px, 1.8vw, 26px);
  --t-h2: clamp(28px, 4vw, 54px);
  --t-h1: clamp(34px, 6vw, 82px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  font-size: var(--t-body);
  line-height: 1.85;
  word-break: keep-all;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- GNB ---------- */
.gnb {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.gnb.is-stuck {
  background: rgba(242, 241, 238, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.gnb__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-size: 16px;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.gnb.is-stuck .brand { text-shadow: none; }
.brand span { font-weight: 300; opacity: 0.7; }
.gnb.is-stuck .brand { color: var(--ink); }

.gnb__nav {
  display: none;
  gap: clamp(32px, 3.4vw, 54px);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.gnb.is-stuck .gnb__nav { text-shadow: none; }
.gnb.is-stuck .gnb__nav { color: var(--ink-soft); }
.gnb__nav a { padding: 4px 0; border-bottom: 1px solid transparent; }
.gnb__nav a:hover { border-bottom-color: currentColor; }

.gnb__cta {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gnb__cta:hover { background: var(--white); color: var(--ink); }
.gnb.is-stuck .gnb__cta { border-color: var(--ink); color: var(--ink); background: transparent; text-shadow: none; }
.gnb.is-stuck .gnb__cta:hover { background: var(--ink); color: var(--paper); }

@media (min-width: 900px) { .gnb__nav { display: flex; } }

/* ---------- 히어로 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0c0d0f;
}
/* 히어로 슬라이드 — 크로스페이드 + 슬로우 줌(켄번스) */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center 56%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s ease-in-out;
  will-change: opacity, transform;
}
.hero__slide.is-active {
  opacity: 1;
  animation: kenburns 9s linear forwards;
}
/* 첫 장만 즉시 로드한다. 나머지 3장(약 1.2MB)은 첫 화면 성능을 갉아먹으므로
   JS가 로드 완료 후 .is-loaded 를 붙일 때 받아온다. */
.hero__slide--1 { background-image: url('img/hero-rooftop-dusk.jpg');
 background-image: image-set(url('img/hero-rooftop-dusk.webp') type('image/webp'), url('img/hero-rooftop-dusk.jpg') type('image/jpeg')); }
.hero__slides.is-loaded .hero__slide--2 { background-image: url('img/facade-night.jpg');
 background-image: image-set(url('img/facade-night.webp') type('image/webp'), url('img/facade-night.jpg') type('image/jpeg')); }
.hero__slides.is-loaded .hero__slide--3 { background-image: url('img/rooftop-terrace.jpg');
 background-image: image-set(url('img/rooftop-terrace.webp') type('image/webp'), url('img/rooftop-terrace.jpg') type('image/jpeg')); }
.hero__slides.is-loaded .hero__slide--4 { background-image: url('img/floor-interior.jpg');
 background-image: image-set(url('img/floor-interior.webp') type('image/webp'), url('img/floor-interior.jpg') type('image/jpeg')); }
.hero__slide--2 { background-position: center 40%; }
.hero__slide--4 { background-position: center 50%; }

@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* 히어로 팩트 줄 — 슬라이드가 바뀌어도 고정. 첫 화면에서 "더 볼 게 있다"를 알리는 장치.
   🚨 가격을 못 쓰는 동안 **확정된 사실**로 스크롤 동기를 만든다(2026-08-20 이탈 분석). */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* 알약 형태 — 사진 위에서 문장보다 훨씬 먼저 읽힌다(더헤븐 랜딩에서 검증된 형태).
   🚨 금색을 쓰지 않는다 — 이 현장은 모노크롬 아키텍처 톤이라 색을 넣으면 톤이 깨진다. */
.hero__facts li {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(12, 13, 15, 0.28);
  backdrop-filter: blur(6px);
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

/* 스크롤 유도 — CTA와 경쟁하지 않게 작고 낮은 대비로 둔다 */
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
}
.hero__more::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
@media (max-width: 899px) {
  .hero__facts { font-size: 12.5px; gap: 6px; margin: 14px 0 18px; }
  .hero__facts li { padding: 8px 13px; }
  .hero__more { font-size: 13px; margin-top: 12px; }
}

/* 슬라이드 인디케이터 */
/* ⚠️ 모바일은 하단 고정바(58px)가 깔리므로 그 위로 올린다 */
.hero__dots {
  position: absolute;
  left: var(--pad-x);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  gap: 6px;
}
.hero__dots button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.hero__dots button::after {
  content: "";
  width: 30px;
  height: 2px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.4s var(--ease);
}
.hero__dots button.is-on::after { background: rgba(255, 255, 255, 0.98); }
/* 정지 버튼은 화면에서 숨긴다(디자인을 해친다).
   접근성상 필요하므로 제거하지 않고, 키보드 포커스가 오면 그때만 드러낸다. */
.hero__pause {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.hero__pause:focus-visible {
  position: static;
  width: auto;
  height: 44px;
  padding: 0 12px;
  margin-left: 10px;
  clip: auto;
  overflow: visible;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
@media (min-width: 900px) {
  .hero__dots { bottom: clamp(14px, 2vw, 28px); }
}

/* 히어로 음영 — 히어로 **전체**를 덮되 위·오른쪽으로 완전히 0까지 페이드한다.
   🚨 예전엔 `.hero__inner::before`에 radial-gradient를 깔았는데,
      요소 폭(`right:18%`)에서 **그라디언트가 0에 닿기 전에 잘려** 사진 위에 세로 직선 경계가 생겼고
      (2026-08-21에 빨간색으로 칠해 확인), 위쪽 소제목은 음영 밖이라 밝은 하늘에 그대로 노출됐다.
      → 음영은 **잘리지 않는 전체 레이어**에 깔고, 가장자리에서 alpha 0에 도달시켜야 경계가 안 보인다. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 7, 9, 0.78) 0%, rgba(6, 7, 9, 0.50) 26%, rgba(6, 7, 9, 0.22) 46%, rgba(6, 7, 9, 0.06) 62%, rgba(6, 7, 9, 0) 76%),
    linear-gradient(to right, rgba(6, 7, 9, 0.44) 0%, rgba(6, 7, 9, 0.22) 26%, rgba(6, 7, 9, 0.06) 50%, rgba(6, 7, 9, 0) 68%);
}
@media (max-width: 899px) {
  /* 모바일은 카피가 폭 전체를 쓰므로 가로 방향 음영을 더 넓고 고르게 */
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(6, 7, 9, 0.80) 0%, rgba(6, 7, 9, 0.56) 30%, rgba(6, 7, 9, 0.30) 52%, rgba(6, 7, 9, 0.08) 70%, rgba(6, 7, 9, 0) 84%),
      linear-gradient(to right, rgba(6, 7, 9, 0.30) 0%, rgba(6, 7, 9, 0.14) 40%, rgba(6, 7, 9, 0) 70%);
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(56px, 8vw, 104px);
  color: var(--white);
}
.hero__eyebrow {
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 26px rgba(0, 0, 0, 0.6);
}
/* 사진 전환에 맞춰 카피도 교체된다 — 겹쳐 두고 페이드 */
.hero__copies { display: grid; }
.hero__copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}
.hero__copy.is-active { opacity: 1; transform: none; pointer-events: auto; }

.hero__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72), 0 0 44px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hero__title strong { font-weight: 700; }
.hero__sub {
  font-size: var(--t-lead);
  font-weight: 500;
  color: #ffffff;
  max-width: 46ch;
  margin-bottom: 38px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.btn--ghost:hover { background: var(--white); color: var(--ink); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--block { width: 100%; }

.hero__scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(56px, 8vw, 104px);
  z-index: 2;
  display: none;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 900px) { .hero__scroll { display: block; } }

/* ---------- 상태 스트립 ---------- */
.strip {
  background: var(--ink);
  color: var(--paper);
}
.strip__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 44px) var(--pad-x);
  display: grid;
  gap: 22px 40px;
  grid-template-columns: repeat(2, 1fr);
}
.strip__item dt {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 241, 238, 0.5);
  margin-bottom: 8px;
}
.strip__item dd {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 860px) { .strip__inner { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 섹션 공통 ---------- */
.sec { padding-block: var(--space-sec); }
/* 갤러리와 문의는 둘 다 어두운 섹션이라 사이 여백이 한 덩어리로 보인다.
   갤러리 아래는 바짝 붙이고, 이어지는 문의 섹션 위쪽에 숨통을 준다. */
#gallery { padding-bottom: clamp(30px, 3.4vw, 54px); }
#gallery + .sec { padding-top: clamp(64px, 7vw, 112px); }
.sec--tight { padding-block: clamp(60px, 8vw, 120px); }
.sec--dark { background: var(--ink); color: var(--paper); }
.sec--dark .eyebrow { color: rgba(242, 241, 238, 0.5); }
.sec--paper2 { background: var(--paper-2); }

.sec__head { margin-bottom: clamp(38px, 5vw, 68px); }
.sec__index {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.sec__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--muted);
}
.sec__rule { flex: 1; height: 1px; background: var(--line); }
.sec--dark .sec__rule { background: rgba(242, 241, 238, 0.22); }

.sec__title {
  font-size: var(--t-h2);
  font-weight: 200;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 32ch; /* 20ch였을 때 마지막 단어가 홀로 줄바꿈됐다 */
  text-wrap: balance;
}
.sec__title strong { font-weight: 600; }
.sec__lead {
  margin-top: 22px;
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 52ch;
}
.sec--dark .sec__lead { color: rgba(242, 241, 238, 0.8); }

/* ---------- 매거진 그리드 ---------- */
.mag {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  /* 사진 + 설명: 설명이 사진 위쪽 라인에 맞아야 시선이 갈린다.
     예전엔 align-items:end 라 텍스트가 아래로 떨어지고 위가 텅 비었다. */
  .mag--2 { grid-template-columns: 1.25fr 1fr; align-items: start; }
  /* 사진 두 장: 같은 폭·같은 비율로 두어 아래 라인이 어긋나지 않게 한다 */
  .mag--offset { grid-template-columns: 1fr 1fr; align-items: start; }
}
.mag + .mag { margin-top: clamp(30px, 4vw, 60px); }

figure.shot { margin: 0; }
figure.shot img {
  width: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}
.shot--tall img { aspect-ratio: 3 / 4; }
.shot--wide img { aspect-ratio: 3 / 2; }
.shot--panorama img { aspect-ratio: 16 / 9; }
figcaption {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.sec--dark figcaption { color: rgba(242, 241, 238, 0.5); }

/* 사진 위 저작자 표기 — 우하단에 작게 얹는다 */
figure.shot { position: relative; }
.shot__credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
figure.shot figcaption ~ .shot__credit { bottom: 44px; }

.hero__credit {
  position: absolute;
  right: var(--pad-x);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 3;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
@media (min-width: 900px) {
  .hero__credit { bottom: clamp(18px, 2.2vw, 32px); }
}

/* ---------- 특징 리스트 ---------- */
.points { display: grid; gap: 26px; margin-top: 0; }
.points li { border-top: 1px solid var(--line); padding-top: 18px; }
.points li:first-child { border-top: 0; padding-top: 0; }
.sec--dark .points li { border-top-color: rgba(242, 241, 238, 0.22); }
.points h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.points p { color: var(--ink-soft); }
.sec--dark .points p { color: rgba(242, 241, 238, 0.76); }

/* ---------- 층별 조건표 ---------- */
.plan { border-top: 1px solid var(--line); }
.plan__row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 4px 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.plan__floor {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.plan__use { font-weight: 600; margin-bottom: 4px; }
.plan__desc { color: var(--ink-soft); font-size: 15px; }
.plan__cond {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tagline {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--white);
}
.plan__note {
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- 조건 문의 유도 블록 ----------
   숫자를 못 주는 항목을 감추지 않고 드러내서 "물어봐야 알겠다"로 넘긴다 */
.cond {
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(26px, 3vw, 40px);
  background: var(--ink);
  color: var(--paper);
}
.cond__title {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.cond__list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(242, 241, 238, 0.2);
}
.cond__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(242, 241, 238, 0.2);
}
.cond__list span { font-size: 15px; color: rgba(242, 241, 238, 0.68); }
.cond__list b {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* 임대 조건 표 — 2026-09-02 조건 공개. 값은 index.html의 표가 원본이고 여기선 표현만 다룬다. */
.rent {
  overflow-x: auto;                      /* 좁은 화면에서 표만 가로로 스크롤 — 페이지는 안 밀린다 */
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(242, 241, 238, 0.2);
}
.rent__t {
  width: 100%;
  min-width: 560px;                      /* 이보다 좁으면 줄바꿈이 지저분해져 스크롤로 넘긴다 */
  border-collapse: collapse;
  text-align: left;
}
.rent__t th,
.rent__t td {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid rgba(242, 241, 238, 0.2);
  vertical-align: top;
}
.rent__t thead th {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(242, 241, 238, 0.6);
  padding-top: 0;
}
.rent__t tbody th {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: 1%;
  padding-right: 22px;
}
.rent__t td { font-size: 15px; color: rgba(242, 241, 238, 0.88); }
.rent__t td em {
  font-style: normal;
  color: rgba(242, 241, 238, 0.6);       /* 테라스는 보조 정보 — 전용면적과 시각적으로 구분 */
}
.rent__t td b {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rent__t tbody tr:last-child th,
.rent__t tbody tr:last-child td { border-bottom: 0; }
.rent__t--roof th,
.rent__t--roof td { background: rgba(242, 241, 238, 0.05); }

.cond__note {
  margin-top: 22px;
  font-size: 14px;
  color: rgba(242, 241, 238, 0.7);
}
.cond__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.cond .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.cond .btn--outline { background: transparent; border-color: rgba(242, 241, 238, 0.5); color: var(--paper); }
.cond .btn--outline:hover { background: var(--paper); color: var(--ink); }

@media (min-width: 760px) {
  .cond__list { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .cond__list li:nth-last-child(-n+1) { border-bottom: 0; }
}
@media (min-width: 760px) {
  .plan__row { grid-template-columns: 120px 1fr 380px; align-items: center; }
  .plan__cond { grid-column: auto; margin-top: 0; justify-content: flex-end; }
}

/* ---------- 입지 ---------- */
.loc { display: grid; gap: clamp(24px, 3vw, 46px); }
/* ⚠️ 항공 사진 원본이 세로(4:5)라 그대로 두면 화면을 다 잡아먹는다 — 정사각으로 줄인다 */
.loc .shot img { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .loc { grid-template-columns: 0.78fr 1fr; align-items: center; }
}
.loc__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.loc__list div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.loc__list dt { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.loc__list dd { margin: 0; font-weight: 500; }

/* ---------- 갤러리 (벤토 구성) ---------- */
/* 모든 타일이 같은 비율 = 한 줄 안에서 높이가 어긋나지 않는다.
   큰 타일(gal__a)만 2×2 칸을 차지하고, 비율 대신 칸을 가득 채운다. */
.gal {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
.gal figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gal img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }

@media (min-width: 900px) {
  .gal { grid-template-columns: repeat(4, 1fr); }
  .gal__a {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto; /* 두 칸·두 줄을 그대로 채운다 */
  }
}

/* ---------- 층별 평면 ----------
   미끼는 공개(임대 대상 층 4장), 전 층 PDF는 문의 뒤에 연다 */
.plans { margin-top: clamp(30px, 4vw, 52px); }
.plans__head { margin-bottom: 26px; }
.plans__title {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.plans__sub { color: var(--ink-soft); font-size: 15px; }
.plans__grid {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
.plans__grid figure { margin: 0; }
.plans__grid img {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
}
.plans__grid figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
@media (min-width: 900px) { .plans__grid { grid-template-columns: repeat(4, 1fr); } }

.plans__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
}
.plans__note { font-size: 14px; color: var(--muted); }
.plans__cta .btn--done { background: transparent; color: var(--ink); }

/* ---------- 가치 스택 ---------- */
.value { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 760px) { .value { grid-template-columns: repeat(3, 1fr); } }
.value li {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 26px 24px;
}
.value b { display: block; font-size: var(--t-h3); font-weight: 500; margin-bottom: 8px; }
.value p { color: var(--ink-soft); font-size: 15px; }

/* ---------- 문의 ---------- */
.contact { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 980px) { .contact { grid-template-columns: 1fr 1.05fr; } }

.manager {
  border: 1px solid rgba(242, 241, 238, 0.24);
  padding: clamp(24px, 3vw, 34px);
}
.manager__name {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.manager__name strong { font-weight: 600; }
.manager__role { font-size: 13px; letter-spacing: 0.1em; color: rgba(242, 241, 238, 0.56); margin-bottom: 22px; }
.manager__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(242, 241, 238, 0.4);
  padding-bottom: 6px;
}
.manager__note { margin-top: 22px; font-size: 14px; color: rgba(242, 241, 238, 0.68); }

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 12px; letter-spacing: 0.12em; color: rgba(242, 241, 238, 0.6); text-transform: uppercase; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 241, 238, 0.24);
  border-radius: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--paper);
  background: rgba(255, 255, 255, 0.09);
}
.field select option { color: #14161a; }
.field--half { display: grid; gap: 14px; }
@media (min-width: 560px) { .field--half { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(242, 241, 238, 0.72);
  line-height: 1.6;
}
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--paper); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

.form__status { min-height: 22px; font-size: 14px; }
.form__status.is-ok { color: #8fd3a8; }
.form__status.is-err { color: #f0a3a3; }

/* ---------- 푸터 ---------- */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 64px) clamp(96px, 10vw, 64px);
  font-size: 13px;
  color: var(--muted);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer__brand { font-size: 13px; letter-spacing: 0.24em; font-weight: 700; color: var(--ink); }
.footer__links { display: flex; gap: 18px; }
.footer__links a { text-decoration: underline; text-underline-offset: 3px; }
.footer p { margin-bottom: 4px; }
.footer__credit { margin-top: 16px; font-size: 12px; color: #a3a7ac; }

/* ---------- 모바일 하단 바 ---------- */
.mobar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid rgba(242, 241, 238, 0.16);
  padding-bottom: env(safe-area-inset-bottom); /* 아이폰 홈 인디케이터 회피 */
}
.mobar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}
.mobar a + a { background: var(--paper); color: var(--ink); }
@media (min-width: 900px) { .mobar { display: none; } }

/* 🚨 모바일 하단 3중 겹침 보정 (2026-08-16 실측·수정)
   iPhone 390×844에서 실제로 이렇게 겹쳐 있었다.
     슬라이드 인디케이터  y 722~766
     전화 문의 버튼       y 732~788   ← 34px 겹침
   인디케이터가 위(z-index:3)라 `elementFromPoint`가 인디케이터를 집었다 —
   즉 **전화 문의 버튼의 왼쪽 절반이 눌리지 않았다.** 임대 광고에서 전화가 주 문의 채널이라 치명적이다.
   인디케이터를 고정바 바로 위에 붙이고, 히어로 CTA를 그 위로 밀어 올려 세 요소를 층으로 분리한다. */
@media (max-width: 899px) {
  .hero__inner { padding-bottom: 130px; }
  .hero__dots,
  .hero__credit { bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* 페이지 최하단에서 고정바가 푸터를 59px 덮던 문제도 같이 해소한다.
     바 높이(59px)에 여유 16px을 더한다 — 딱 맞추면 기기별 1~16px이 남아 잘린다(실측). */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- 등장 모션 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* ⚠️ 슬라이드의 켄번스는 여기서 끈다(JS도 첫 장만 남긴다) */
  .hero__slide { transition: none; }
  .hero__slide.is-active { animation: none; transform: scale(1.04); }
}

/* 키보드 포커스 표시 — 폼 outline 을 없앤 대신 공통 규칙을 둔다 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.sec--dark a:focus-visible,
.sec--dark button:focus-visible,
.sec--dark input:focus-visible,
.sec--dark select:focus-visible,
.sec--dark textarea:focus-visible,
.hero a:focus-visible {
  outline-color: #ffffff;
}

/* 고정 GNB 에 제목이 가리지 않도록 */
section[id] { scroll-margin-top: 88px; }

/* 본문 바로가기 */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- 인쇄 ---------- */
@media print {
  .gnb, .mobar, .hero__scroll { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

.form__status a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.footer__agency { margin-top: 2px; color: #9aa0a6; }
.footer__agency:first-of-type { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* 대행사명은 자사 사이트로 — 푸터 본문과 같은 톤을 유지하고 밑줄로만 링크임을 알린다. */
.footer__agency a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__agency a:hover,
.footer__agency a:focus-visible { color: var(--paper); }

/* ── 07 영상 ─────────────────────────────────────────── */
/* 원본이 9:16 세로라 aspect-ratio를 고정해 로딩 중 레이아웃이 밀리지 않게 한다. */
.vids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  max-width: 880px;
  margin: 0 auto;
}
.vid { margin: 0; }
.vid video {
  width: 100%;
  /* height:auto 가 없으면 HTML의 height="1920" 속성이 그대로 먹어 aspect-ratio가 무시된다
     (2026-08-15에 이걸로 영상이 세로 1920px로 늘어나 포스터 위아래가 검게 떴다). */
  height: auto;
  aspect-ratio: 9 / 16;
  display: block;
  background: #0d0f12;
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(20, 22, 26, 0.16);
}
.vid__cap {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.vid__cap strong { color: var(--ink); font-weight: 600; }

/* ── 08 FAQ ──────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.faq__i summary::-webkit-details-marker { display: none; }
/* +/− 는 텍스트가 아니라 두 개의 선으로 그린다 — 폰트에 따라 모양이 흔들리지 않게. */
.faq__i summary::before,
.faq__i summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--muted);
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.faq__i summary::after { transform: rotate(90deg); }
.faq__i[open] summary::after { opacity: 0; transform: rotate(0deg); }
.faq__i p {
  padding: 0 40px 22px 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.85;
}
.faq__i a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

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

/* 섹션 리드 아래 영상 버튼 — 텍스트 링크는 눈에 안 띄어 버튼으로 올렸다(2026-08-15).
   주 CTA(짙은 채움)와는 구분되게 외곽선 + 재생 아이콘으로 "영상"임을 즉시 알린다. */
.sec__more { margin-top: 22px; }
.sec__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 13px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background 0.24s var(--ease), color 0.24s var(--ease);
}
/* 재생 삼각형은 border 로 그린다 — 폰트 글리프(▶)는 기기마다 크기·정렬이 틀어진다. */
.sec__more a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.sec__more a:hover { background: var(--ink); color: var(--paper); }