/* ============================================================
   NOVA Cosmetics — Site Styles
   Derived from 이엘온가족치과 tokens, adapted to a lighter
   "botanical luxury beauty" palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Thin.otf') format('opentype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }

:root {
  /* Brand — softened forest → sage/moss, better for beauty */
  --brand-50:  #F1F6F1;
  --brand-100: #E0ECE1;
  --brand-200: #BFD7C1;
  --brand-300: #8FB895;
  --brand-400: #5F9468;
  --brand-500: #3E7248;   /* mid */
  --brand-600: #2F5637;
  --brand-700: #1E3A2F;   /* deep — rare, used for type accent */
  --brand-800: #152B22;

  /* Gold, kept */
  --gold-50:  #FBF7EE;
  --gold-100: #F5EDD6;
  --gold-200: #EADA9C;
  --gold-300: #D9C06A;
  --gold-400: #C8A645;
  --gold-500: #B8923A;
  --gold-600: #9A7A2D;

  /* Blush accent — subtle warm pink, specific to beauty */
  --blush-50:  #FDF5F1;
  --blush-100: #F9E6DC;
  --blush-200: #F0CAB7;
  --blush-300: #E2A88B;
  --blush-400: #C98264;

  /* Cream neutrals — lighter than original */
  --cream-0:   #FFFFFF;
  --cream-50:  #FDFBF5;   /* page bg */
  --cream-100: #F8F4EA;
  --cream-150: #F2EDDF;
  --cream-200: #ECE6D3;
  --cream-300: #D8D2BE;

  --ink-900: #141311;
  --ink-800: #272522;
  --ink-700: #3E3C38;
  --ink-600: #625F5A;
  --ink-500: #8B8884;
  --ink-400: #B5B2AC;
  --ink-300: #DEDBD5;

  --bg:         var(--cream-50);
  --bg-soft:    var(--cream-100);
  --bg-deep:    var(--brand-700);
  --text:       var(--ink-900);
  --text-muted: var(--ink-600);
  --border:     var(--cream-200);

  --font-display: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
  --font-body:    'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;

  --container: 1440px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 10px rgba(20,19,17,.04);
  --shadow-md: 0 8px 32px rgba(20,19,17,.06);
  --shadow-lg: 0 20px 60px rgba(20,19,17,.09);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ── Utility type ── */
.overline {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand-500);
}
.serif { font-family: var(--font-display); font-weight: 200; letter-spacing: -0.035em; }
.italic { font-style: normal; font-weight: 500; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.btn-primary:hover { background: var(--brand-800); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,58,47,.25); }
.btn-gold { background: var(--gold-500); color: #fff; border-color: var(--gold-500); }
.btn-gold:hover { background: var(--gold-600); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(184,146,58,.3); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--ink-900); }
.btn-outline:hover { background: var(--ink-900); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); padding: 10px 0; }
.btn-ghost .arrow { transition: transform 0.3s var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(6px); }