/* =======================================================
   Creativeflow – Base CSS  v0.2.1
   Palette: Cavendish Yellow (#FFE01B) × Monotone
   Grid  : 8-Point  (spacing: 8 / 16 / 24 …)
======================================================= */

/* =======================================================
   BASE  v0.3   (Reset · Tokens · Utilities)
   Palette: Cavendish Yellow (#FFE01B) × Monotone
======================================================= */

/* ---------- 0. Reset -------------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0
}
html{
  font-size:16px;
  scrollbar-gutter: stable;
}
img{
  max-width:100%;
  display:block
}
a{
  text-decoration:none;
  color:inherit
}

/* ---------- 1. Web Fonts (Variable 단일 선언) -------- */
@font-face{
  font-family:"Pretendard";
  src:url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:100 700;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans KR";
  src:url("../fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype");
  font-weight:100 700;
  font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight:300 800;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-Regular.woff") format("woff");
  font-weight:400 700;
  font-display:swap;
}


/* ---------- 2. CSS Variables ----------------------- */

:root{
  /* Colors */
  --c-pink     : #FF4084;     /* primary accent */
  --c-pink-100 : rgba(255,64,132,0.3);     /* sub accent */
  --c-black    : #111111;     /* neutral text */
  --c-gray-100 : #F8F8F8;
  --c-gray-200 : #efefef;
  --c-gray-300 : #D1D1D1;
  --c-gray-400 : #B0B0B0;
  --c-gray-500 : #909090;
  --c-gray-600 : #6E6E6E;
  --c-gray-700 : #5A5A5A;
  --c-gray-800 : #39352C;
  --c-white    : #FFFFFF;
  --c-error    : #FF5858;

  /* Typography */
  --ff-display : "Pretendard", "Playfair Display", system-ui, sans-serif;
  --ff-body    : "Inter", "Noto Sans KR", sans-serif;
  --ff-mono    : "Space Grotesk", monospace;
  --ff-en      : "Montserrat", sans-serif;

  /* Sizing & Radius */
  --radius-lg  : 24px;
  --shadow-sm  : 0 4px 12px rgba(0,0,0,.08);

  /* Grid */
  --g-unit     : 8px;
}

/* ---------- 3. Global Styles ----------------------- */

body{ 
  font-family:var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.01em;     
  color:var(--c-black);
  background:var(--c-white);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 4. Utilities --------------------------- */
.text-center{
  text-align:center
}


/* ---------- Hero Gradient Themes -------------------- */
/* ① 라벤더-플럼 (책 표지 계열) */
.hero.theme-1{
  /* 배경 그라디언트: 왼쪽 위 연한 라벤더 → 오른쪽 아래 깊은 플럼 */
  background: linear-gradient(135deg,
              #735494 0%,  /* 플럼(#735494)         */
              #9d7bbb 40%,    /* 모브(#9D7BBB)         */
              #bea0d3 75%,    /* 라일락 (#BEA0D3)      */
              #d8c4e4 100%);  /* 밝은 라벤더 (#D8C4E4) */

  /* 텍스트·이미지 가독성용 반투명 보라 오버레이 */
  --overlay: linear-gradient(to top,
                rgba(73, 36,120,.55)  0%,   /* 플럼+남색 */
                rgba(73, 36,120,.35) 40%,
                rgba(73, 36,120,.10) 70%,
                transparent          100%);
}


/* ② 코발트 → 스카이블루 1-컬러 버전 */
.hero.theme-2{
  /* 배경 그라디언트 – 한 계열만 사용 */
  background: linear-gradient(135deg,
              #0b5697 0%,     /* 코발트 블루 */
              #166fb1 35%,    /* 미들 블루 */
              #3c8bc8 70%,    /* 라이트 블루 */
              #9ed0f0 100%);  /* 스카이 블루 */

  /* 오버레이도 같은 계열로 통일 */
  --overlay: linear-gradient(to top,
                rgba(11, 54, 151, .50) 0%,   /* 코발트 · 50% */
                rgba(11, 54, 151, .30) 40%,
                rgba(11, 54, 151, .08) 75%,
                transparent            100%);
}



/* 3 따뜻한 베이지(4평 원룸 커버) ─ single-tone */
.hero.theme-3{
  /* 배경 : 왼쪽 위 짙은 우드-베이지 → 오른쪽 아래 밝은 크림 */
  background: linear-gradient(135deg,
              #c3a076 0%,    /* Deep Beige  */
              #d5bfa5 40%,   /* Mid Beige   */
              #e6d5c0 75%,   /* Light Beige */
              #f4ece2 100%); /* Cream       */

  /* 가독성용 동일 계열 오버레이 */
  --overlay: linear-gradient(to top,
                rgba(125, 94, 60, .50) 0%,   /* #7D5E3C @50% */
                rgba(125, 94, 60, .30) 40%,
                rgba(125, 94, 60, .08) 75%,
                transparent          100%);
}


/* ④ 오렌지 */
.hero.theme-4{
  background:linear-gradient(135deg,#FF7B8A 0%,#FF9F55 100%);
  --overlay:linear-gradient(to top,
      rgba(140,40,0,.55)   0%,
      rgba(140,40,0,.35)  40%,
      rgba(140,40,0,.10)  70%,
      transparent         100%);
}

/* 5 딥 퍼플 → 매지컬 바이올렛  (환상의 숲 커버) – 단일 퍼플 계열 */
.hero.theme-5{
  /* 배경 그라디언트: 어두운 미드나이트 퍼플 → 밝은 바이올렛 */
  background:linear-gradient(135deg,
              #2d1140 0%,    /* 미드나이트 퍼플 (#2D1140) */
              #47205d 25%,   /* 다크 퍼플 (#47205D)       */
              #6a3590 55%,   /* 로얄 퍼플 (#6A3590)      */
              #9442b5 80%,   /* 브라이트 퍼플 (#9442B5)  */
              #bc64d2 100%); /* 라이트 바이올렛 (#BC64D2)*/

  /* 가독성 & 심도용 동일 계열 오버레이 */
  --overlay:linear-gradient(to top,
              rgba(46, 18, 77, .50) 0%,   /* #2E124D @50% */
              rgba(46, 18, 77, .30) 40%,
              rgba(46, 18, 77, .08) 75%,
              transparent           100%);
}

/* 6 민트-그린 (스윗미! 커버)  ─ 단일 계열 */
.hero.theme-6{
  /* 배경: 위쪽 짙은 민트 → 아래쪽 밝은 파스텔 민트 */
  background:linear-gradient(135deg,
              #5aa9a3 0%,    /* 다크 민트 (#5AA9A3) */
              #7ac1ba 35%,   /* 미들 민트 (#7AC1BA) */
              #9fd4cb 70%,   /* 라이트 민트 (#9FD4CB) */
              #c4e6de 100%); /* 파스텔 민트 (#C4E6DE) */

  /* 동일 계열 딥-민트 오버레이(가독성·깊이감) */
  --overlay:linear-gradient(to top,
              rgba(50,120,115,.45) 0%,   /* #327873 @ 45 % */
              rgba(50,120,115,.25) 40%,
              rgba(50,120,115,.08) 75%,
              transparent          100%);
}