/* ipsae(잎새) — 디자인 시스템 정본. 페이지는 이 파일을 <link> 로 읽고 style.css 는 var() 만 쓴다.
 * 이름은 Tailwind 4 @theme 이름공간, 선언은 :root (브라우저는 @theme 블록을 읽지 않는다 — lessons #73).
 * 구조: 회녹색 틀(canvas) 위에 초록빛 흰 판(paper). 초록(leaf)은 선·글자·작은 이름표에만 — 면이 되지 않는다(#52). */
:root {
  /* 색 — 바탕 */
  --color-canvas: #dadcd8;        /* 페이지 틀. 판 사이·바깥으로만 보인다 */
  --color-paper: #fcfdfb;         /* 게시판 판·머리 2층 — "초록빛 흰" */
  --color-paper-sunk: #f2f5f1;    /* 공지 줄·표 머리·입력 바탕·인용 */
  /* 색 — 글자 */
  --color-ink: #18211b;           /* 본문·제목·글쓰기 단추 면 */
  --color-ink-soft: #3a453d;      /* 본문 보조(댓글 본문 등) */
  --color-muted: #56625a;         /* 메타(글쓴이·날짜·조회) — 판·틀 모두 4.5:1 이상 */
  --color-on-ink: #fcfdfb;        /* 잉크 면 위 글자 */
  /* 색 — 선 */
  --color-line: #e1e6e0;          /* 판 안 줄 구분 */
  --color-line-strong: #c3cbc2;   /* 판 테두리·표 머리 아랫선 */
  /* 색 — 강조 (hue 130° 잎 초록) */
  --color-leaf: #2b6e3a;          /* 댓글 수·선택 탭 밑줄·링크 hover·추천 누름 */
  --color-leaf-deep: #1f5530;     /* 이름표 글자·hover 진하게 */
  --color-leaf-soft: #e4eee1;     /* 이름표 바탕 — 높이 20px 칩에만 */
  /* 색 — 의미 */
  --color-water: #2b6587;         /* 물 주기 배지 글자·물방울 */
  --color-water-soft: #e3edf3;    /* 물 주기 배지 바탕 */
  --color-alert: #a8432c;         /* 오류 문구·신고·필수 표시 */
  --color-focus: #1f5530;         /* 포커스 링 */

  /* 서체 */
  --font-display: "Do Hyeon", "Pretendard Variable", sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-num: "Pretendard Variable", Pretendard, sans-serif; /* tabular-nums 로 쓴다 */

  /* 글자 크기 — 본문 15px 기준 커뮤니티 밀도 */
  --text-xs: 0.75rem;     /* 12 — 이름표·배지 */
  --text-sm: 0.8125rem;   /* 13 — 메타 줄 */
  --text-base: 0.9375rem; /* 15 — 목록 제목·본문 */
  --text-md: 1rem;        /* 16 — 글 본문(상세)·입력 */
  --text-lg: 1.125rem;    /* 18 — 판 제목(Pretendard 700)·머리 탭(Do Hyeon) */
  --text-xl: 1.375rem;    /* 22 — 구간 제목(Do Hyeon) */
  --text-2xl: 1.625rem;   /* 26 — 인사 줄·글 제목(상세)·통계 숫자 */
  --text-3xl: 2.125rem;   /* 34 — 게시판 이름(Do Hyeon) */
  --text-wordmark: 1.875rem; /* 30 — 워드마크 "잎새" */
  --text-line-tight: 1.25;
  --text-line-ui: 1.45;
  --text-line-body: 1.75;

  /* 간격 — 4 단위 */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-gutter: clamp(1rem, 2.4vw, 1.5rem);  /* 판 사이 틈·바깥 여백 — margin·gap 에만(#50) */
  --spacing-row: 3rem;          /* 목록 한 줄 최소 높이 48 */
  --spacing-row-m: 4rem;        /* 모바일 두 줄 목록 64 */
  --spacing-thumb: 3.5rem;      /* 목록 썸네일 56 */
  --spacing-container: 75rem;   /* 1200 */
  --spacing-aside: 21.25rem;    /* 오른쪽 곁칸 340 (1280+) */
  --spacing-aside-narrow: 18.75rem; /* 1024~1279 곁칸 300 */
  --spacing-rail: 13.75rem;     /* 게시판 왼쪽 게시판 목록 220 */
  --spacing-tier1: 2rem;        /* 머리 1층 공지 띠 32 */
  --spacing-tier2: 4rem;        /* 머리 2층 주 내비 64 */
  --spacing-tabs-m: 2.75rem;    /* 모바일 게시판 탭 줄 44 */

  /* 모서리 */
  --radius-tag: 3px;      /* 이름표·말머리 */
  --radius-sm: 4px;       /* 단추·입력 */
  --radius-md: 8px;       /* 판 */
  --radius-photo: 6px;    /* 썸네일·사진 */
  --radius-full: 999px;   /* 아바타 원·물방울만 — 용기에는 쓰지 않는다 */

  /* 그림자 — 거의 없음 */
  --shadow-panel: 0 1px 0 rgb(24 33 27 / 0.04);
  --shadow-pop: 0 8px 24px rgb(24 33 27 / 0.10);  /* 펼침 메뉴·토스트만 */

  /* 움직임 */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}