/* ============================================================
   꽃별 (Kkotbyeol) — 공용 스타일
   - 계절 팔레트 4종: base / point-1 / point-2 / pop★ / ink
     ⚠️ 아래 HEX 값은 목업 기반 제안값입니다 (아직 확정 아님)
   - 비율 규칙: base ≥ 60% · point 합 ≤ 30% · pop < 10%
   - 순수 #000/#fff 금지 — ink와 크림이 대신함
   - 크림 #F6F0E4 는 Studio Y와 유일하게 공유하는 중립색
   ============================================================ */

@font-face { font-family:'Griun Fromsol'; src:url('../assets/fonts/griun-fromsol-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nanum Square'; src:url('../assets/fonts/nanum-square-300.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'SCDream'; src:url('../assets/fonts/scdream-400.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'SCDream'; src:url('../assets/fonts/scdream-700.otf') format('opentype'); font-weight:700; font-display:swap; }
/* Noto Serif KR (본문용) — 자체 호스팅. 한글 subset과 라틴 subset을 unicode-range로 분리
   (Google Fonts 링크는 이 환경/오프라인에서 로드 실패해 serif로 폴백되던 문제 → 자체 호스팅으로 전환) */
@font-face {
  font-family:'Noto Serif KR'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/noto-serif-kr-korean-400.woff2') format('woff2');
  unicode-range:U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family:'Noto Serif KR'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/noto-serif-kr-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;
}

:root{
  --cream:#F6F0E4;                 /* 공유 중립색 */
  --shadow:rgba(58,46,38,.16);

  /* 계절 도트 등에서 계절 무관하게 참조할 때 쓰는 고정값 */
  --spring-ref:#E8A0B4;
  --summer-ref:#6FA8C4;
  --autumn-ref:#C1654A;
  --winter-ref:#8B9DC9;
}

/* ---------- 계절 팔레트 (html 요소에 .season-* 부여) ---------- */
.season-spring{
  --base:#F8F1E9; --p1:#E8A0B4; --p2:#AECBA4; --pop:#E0507A; --ink:#463229;
}
.season-summer{
  --base:#F4F1E3; --p1:#6FA8C4; --p2:#9CC3AB; --pop:#1F7A9E; --ink:#33393B;
}
.season-autumn{
  --base:#F7EFE0; --p1:#C1654A; --p2:#D9A05B; --pop:#D0421B; --ink:#3B2A20;
}
.season-winter{
  --base:#F3F1E9; --p1:#8B9DC9; --p2:#B9C6D9; --pop:#4A5FA5; --ink:#2E3345;
}

/* ---------- 기본 ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--base, var(--cream));
  color:var(--ink, #3A2E26);
  font-family:'SCDream', sans-serif;
  transition:background .6s ease, color .6s ease;
}
.wrap{ max-width:1000px; margin:0 auto; padding:28px 24px 90px; }

a{ color:inherit; }
button{ font-family:inherit; }

/* 손글씨(이모션 레이어) / 정보 레이어 */
.hand{ font-family:'Griun Fromsol', cursive; font-weight:400; }
.info{ font-family:'Nanum Square', sans-serif; font-weight:300; }

/* ---------- 내비게이션 ---------- */
nav.top{ display:flex; align-items:center; justify-content:space-between; padding:8px 4px 30px; gap:16px; flex-wrap:wrap; }
nav.top .logo{ font-family:'Griun Fromsol', cursive; font-size:30px; text-decoration:none; display:flex; align-items:baseline; gap:8px; }
nav.top .logo .star{ font-size:14px; color:var(--pop); }
.navlinks{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:13px; }
.navlinks a{ text-decoration:none; opacity:.72; }
.navlinks a:hover{ opacity:1; }
.navlinks a.active{ opacity:1; font-weight:700; }

/* ---------- 종이 카드 공통 ---------- */
.paper{
  background:var(--cream);
  box-shadow:0 8px 18px var(--shadow);
  padding:16px 18px;
}

/* 워시테이프 조각 */
.tape{
  position:absolute; width:74px; height:22px;
  background:var(--p1); opacity:.55;
  transform:rotate(-6deg);
  clip-path:polygon(2% 0, 98% 4%, 100% 96%, 0 100%);
}
.tape.t2{ background:var(--p2); transform:rotate(5deg); }

/* 찢어진 종이 가장자리 */
.torn{
  clip-path:polygon(0 3%, 4% 0, 23% 1.5%, 45% 0, 68% 2%, 88% .5%, 100% 3%,
                    99% 30%, 100% 55%, 98.5% 78%, 100% 97%,
                    82% 99%, 60% 97.5%, 38% 100%, 16% 98%, 0 100%,
                    1% 70%, 0 40%);
}

/* ---------- 코너 스탬프 (손그림 꽃/별) ---------- */
.stamp{ position:absolute; opacity:.65; pointer-events:none; }
.stamp path, .stamp circle, .stamp line{ stroke:var(--ink); }

/* ---------- 버튼 ---------- */
.btn-pop{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'SCDream'; font-weight:700; font-size:13px;
  background:var(--pop); color:var(--cream);
  border:none; padding:12px 22px; border-radius:999px;
  cursor:pointer; text-decoration:none;
}
.btn-pop:hover{ opacity:.88; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'SCDream'; font-size:13px;
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); padding:11px 20px; border-radius:999px;
  cursor:pointer; text-decoration:none; opacity:.8;
}
.btn-ghost:hover{ opacity:1; }

/* ---------- 구분선 / 섹션 제목 ---------- */
.divider{ border:none; border-top:1px dashed var(--ink); opacity:.25; margin:44px 0; }
.section-title{ font-family:'Griun Fromsol', cursive; font-size:32px; font-weight:400; margin:0 0 6px; }
.section-sub{ font-size:13px; opacity:.6; margin:0 0 24px; }

/* ---------- 계절 표시 (푸터/헤더의 작은 안내) ---------- */
.season-note{ font-size:11px; opacity:.55; display:inline-flex; align-items:center; gap:6px; }
.season-note .sw{ width:8px; height:8px; border-radius:50%; background:var(--p1); display:inline-block; }

/* ---------- 태그 칩 ---------- */
.tag{
  font-family:'SCDream'; font-size:13px;
  background:transparent; border:1px solid var(--ink);
  padding:7px 14px; border-radius:999px; cursor:pointer;
}
.tag.spring{ border-color:var(--spring-ref); color:var(--spring-ref); }
.tag.summer{ border-color:var(--summer-ref); color:var(--summer-ref); }
.tag.autumn{ border-color:var(--autumn-ref); color:var(--autumn-ref); }
.tag.winter{ border-color:var(--winter-ref); color:var(--winter-ref); }
.tag.on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

/* ---------- 푸터 ---------- */
footer.site{
  margin-top:70px; padding-top:26px;
  border-top:1px dashed var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  font-size:12px; opacity:.85;
}
footer.site .hand{ font-size:18px; }

/* ---------- 모바일 ---------- */
@media (max-width:720px){
  .wrap{ padding:20px 16px 70px; }
  nav.top{ padding-bottom:20px; }
  .navlinks{ gap:16px; font-size:12px; flex-wrap:wrap; }
}