/**
 * OpenSE 부동산 플랫폼 v4
 * CSS Variables - Design Tokens
 * Primary: #00a8e8 (Sky Blue)
 * Secondary: #003459 (Deep Navy)
 * Based on shadcn/ui design system
 */

:root {
  /* ── Brand Colors ─────────────────────────── */
  --primary:          #00a8e8;
  --primary-hover:    #0096d4;
  --primary-light:    rgba(0, 168, 232, 0.08);
  --secondary:        #003459;
  --secondary-hover:  #002a47;

  /* ── Neutral / Surface ─────────────────────── */
  --background:       #f8fafc;
  --surface:          #ffffff;
  --surface-hover:    #f1f5f9;
  --border:           #e2e8f0;
  --border-focus:     #00a8e8;

  /* ── Text ─────────────────────────────────── */
  --text-primary:     #0f172a;
  --text-secondary:   #64748b;
  --text-muted:       #94a3b8;
  --text-on-primary:  #ffffff;

  /* ── Status ───────────────────────────────── */
  --success:          #10b981;
  --warning:          #f59e0b;
  --error:            #ef4444;
  --info:             #3b82f6;

  /* ── Badge - 거래유형 ─────────────────────── */
  --badge-sale:       #00a8e8;   /* 매매 */
  --badge-rent:       #003459;   /* 전세 */
  --badge-monthly:    #f59e0b;   /* 월세 */
  --badge-new:        #10b981;   /* 분양 */

  /* ── Layout ───────────────────────────────── */
  --max-width:        1260px;
  --header-height:    64px;
  --sidebar-width:    340px;
  --content-width:    820px;
  --radius-sm:        4px;
  --radius:           6px;
  --radius-lg:        8px;
  --radius-xl:        12px;

  /* ── Shadow ───────────────────────────────── */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.05);
  --shadow:           0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:        0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:        0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);

  /* ── Typography ───────────────────────────── */
  --font-family:      'Noto Sans KR', 'Inter', -apple-system, sans-serif;
  --font-size-xs:     12px;
  --font-size-sm:     14px;
  --font-size-base:   16px;
  --font-size-md:     17px;
  --font-size-lg:     18px;
  --font-size-xl:     22px;
  --font-size-2xl:    28px;
  --font-size-3xl:    36px;

  /* ── Spacing ──────────────────────────────── */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
}

/* ── Base Reset ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Material Symbols ───────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Focus Visible ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Responsive breakpoints 참고 (Tailwind) ─── */
/* sm:  640px  | md: 768px | lg: 1024px | xl: 1280px */
/* 사이드바: xl 이상에서만 표시 (xl:block) */

/* ── Utility: Container ─────────────────────── */
.v4-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-4);
}

/* ── Utility: Sticky Header Offset ─────────── */
.v4-main {
  min-height: calc(100vh - var(--header-height) - 160px);
}