/* ================================================================
   PRESALE LANDING STUDIO — 공통 디자인 시스템
   Shared base tokens. 브랜드별 오버라이드는 skins/ 폴더 참조.

   사용법:
   <link rel="stylesheet" href="../../design-system.css">
   <link rel="stylesheet" href="../../skins/힐스테이트.css">
   ================================================================ */

:root {

  /* ── Typography ──────────────────────────────────────── */
  --font-korean: 'Pretendard', 'Pretendard Variable', '맑은 고딕', 'Malgun Gothic', sans-serif;
  --font-latin:  'Poppins', 'Pretendard', sans-serif;

  --text-xs:   clamp(0.75rem,  1vw,   0.875rem);   /* 12–14px */
  --text-sm:   clamp(0.875rem, 1.2vw, 1rem);        /* 14–16px */
  --text-base: clamp(1rem,     1.5vw, 1.125rem);    /* 16–18px */
  --text-lg:   clamp(1.125rem, 2vw,   1.375rem);    /* 18–22px */
  --text-xl:   clamp(1.375rem, 2.5vw, 1.75rem);     /* 22–28px */
  --text-2xl:  clamp(1.75rem,  3vw,   2.25rem);     /* 28–36px */
  --text-3xl:  clamp(2rem,     4vw,   3rem);        /* 32–48px */
  --text-hero: clamp(2.5rem,   5vw,   4rem);        /* 40–64px */

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-base:    1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadow ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.08);
  --shadow-md:  0 4px 16px oklch(0% 0 0 / 0.12);
  --shadow-lg:  0 8px 32px oklch(0% 0 0 / 0.16);
  --shadow-xl:  0 16px 48px oklch(0% 0 0 / 0.20);

  /* ── Transition ──────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   200;
  --z-fixed:   999;

  /* ── Brand Slots (스킨 파일이 오버라이드) ────────────── */
  --brand-primary:        oklch(0.35 0.15 250);
  --brand-primary-dark:   oklch(0.25 0.15 250);
  --brand-primary-light:  oklch(0.55 0.10 250);
  --brand-primary-pale:   oklch(0.92 0.03 250);

  --brand-accent:         oklch(0.65 0.08 80);
  --brand-accent-light:   oklch(0.82 0.04 80);

  --brand-bg:             oklch(0.99 0.005 80);
  --brand-surface:        oklch(0.96 0.005 80);
  --brand-text:           oklch(0.18 0.010 250);
  --brand-muted:          oklch(0.48 0.008 250);
  --brand-border:         oklch(0.88 0.008 250);
}

/* ── 공통 Reset ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-korean);
  font-size: var(--text-base);
  color: var(--brand-text);
  background-color: var(--brand-bg);
  line-height: var(--leading-base);
  word-break: keep-all;
  overflow-wrap: break-word;
}

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

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

/* ── 공통 레이아웃 ────────────────────────────────────────── */
.section {
  padding: var(--space-24) var(--space-6);
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--brand-text);
}

/* ── 공통 컴포넌트 ────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--brand-primary);
  color: oklch(0.99 0 0);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-korean);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    transform   var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--brand-primary);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--brand-primary);
  font-family: var(--font-korean);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-outline:hover {
  background: var(--brand-primary);
  color: oklch(0.99 0 0);
}

/* 카카오톡 고정 CTA (모든 현장 공통) */
.kakao-cta {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-fixed);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #FEE500;
  color: oklch(0.18 0 0);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-korean);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.kakao-cta:hover {
  transform: translateY(-2px);
}

/* ── 이미지 슬롯 (분양 랜딩 공통 패턴) ──────────────────────────
  사용법:
    이미지 있을 때:
      <div class="img-slot img-slot--wide" data-label="단지 조감도">
        <img src="images/aerial.webp" alt="단지 조감도" loading="lazy">
      </div>
    이미지 없을 때(플레이스홀더):
      <div class="img-slot img-slot--wide" data-label="단지 조감도"></div>

  내부 img는 자동으로 object-fit:cover로 슬롯을 꽉 채움.
  이미지 없으면 data-label이 중앙에 플레이스홀더로 표시됨.
────────────────────────────────────────────────────────────────── */
.img-slot {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-surface);
  display: block;
}

.img-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 이미지 없는 슬롯: data-label을 중앙에 플레이스홀더로 표시 */
.img-slot[data-label]::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-korean);
  font-size: var(--text-sm);
  color: var(--brand-muted);
  letter-spacing: 0.12em;
  pointer-events: none;
  white-space: nowrap;
}

/* 이미지 있으면 플레이스홀더 숨김 */
.img-slot:has(> img)::after { display: none; }

/* ── 표준 비율 모디파이어 ── */
.img-slot--hero   { aspect-ratio: 16 / 9; min-height: 480px; } /* 히어로 (전체화면은 height 직접 지정) */
.img-slot--wide   { aspect-ratio: 16 / 9; }                     /* 조감도·단지배치도 */
.img-slot--std    { aspect-ratio:  4 / 3; }                     /* 위치도·일반 */
.img-slot--floor  { aspect-ratio:  3 / 4; }                     /* 평면도 (세로) */
.img-slot--square { aspect-ratio:  1 / 1; }                     /* 정방형 */

/* ── OKLCH 미지원 브라우저 폴백 ──────────────────────────── */
@supports not (color: oklch(0 0 0)) {
  :root {
    --brand-primary:       #1a1a8c;
    --brand-primary-dark:  #0d0d66;
    --brand-primary-light: #4444bb;
    --brand-bg:            #fafaf8;
    --brand-text:          #222222;
    --brand-muted:         #727272;
    --brand-border:        #dddddd;
  }
}