/* =========================================================
   소동물 포털 — 공통 스타일 시트
   디자인 시스템: 색상, 타이포, 레이아웃, 컴포넌트
   ========================================================= */

/* ---------- 디자인 토큰 ---------- */
:root {
  /* 브랜드(고정) — 그린 계열 + 포인트 샌드 */
  --brand:        #2f6b45;   /* 메인 그린 */
  --brand-strong: #245436;   /* 진한 그린 (제목) */
  --brand-soft:   #4caf72;   /* 밝은 그린 (호버) */
  --accent:       #e0913b;   /* 포인트 색 (버튼·배경 강조) */
  /* 글자에 쓰는 주황 — 흰 바탕에서도 읽히도록 더 진하게 잡았어요.
     밝은 주황(#e0913b)을 흰 바탕에 글자로 쓰면 대비가 2.5 밖에 안 나옵니다. */
  --accent-text:  #a86213;
  --accent-soft:  #eeae5f;

  /* ✨ 황금빛 — 「지금 보고 있는 동물」을 감싸는 ㄱ자 모서리 전용.
     ⚠️ 그린(--brand)·주황(--accent) 다음 셋째 색입니다. 아무 데나
        쓰면 화면이 어지러워져요 — 이 자리 하나에만 씁니다.
     ⚠️ 주황(--accent #e0913b)과 닮지 않게 더 누런쪽으로 잡았습니다.
        둘이 같아 보이면 모서리가 '황금' 이 아니라 그냥 주황이 돼요. */
  --gold: #c8971c;
  /* ⚠️⚠️ 한 가지 색으로는 황금이 안 됩니다 — 견자색이 돼요.
     처음에 #b58a2b 한 가지로 칠했다가 센세가 "이건 황금빛이 아닌데"
     라고 하셨습니다. 맞는 말이에요 — 금이 금처럼 보이는 것은 **금색**
     때문이 아니라 한 면 안에서 밝은 데와 짙은 데가 갈리는 **광택**
     때문입니다. 단색은 그냥 누런 칠이고, 채도를 낮추면 카키가 돼요.
     → 밝은 금 → 짙은 금 → 다시 밝은 금 으로 흐르는 띄를 씁니다.
     ⚠️ --gold 는 border-image 를 못 받는 브라우저용 대체색입니다. 지우지 마세요.
     ⚠️ 그린(--brand)·주황(--accent) 다음 셋째 색입니다. 이 자리 하나에만 씁니다. */
  --gold-sheen: linear-gradient(135deg,
      #f7e6a4 0%, #e0b93c 22%, #b8860b 48%, #f3dc93 68%, #d4af37 86%, #a9781a 100%);

  /* 카테고리 태그 색(고정) */
  --tag-rodent: #d98a3d;
  --tag-reptile: #4f9d69;
  --tag-crustacean: #4a90c2;
  --tag-isopod: #9b6cc2;

  /* 시맨틱(테마별로 바뀜) — 라이트 기본값 */
  --bg:          #fbfcfb;   /* 페이지 배경 */
  --surface:     #ffffff;   /* 카드/헤더 표면 */
  --surface-2:   #f2f6f3;   /* 옅은 표면 (썸네일 등) */
  --text:        #232a26;   /* 본문 */
  --text-muted:  #657069;   /* 보조 텍스트 — 4.5:1 대비를 넘도록 살짝 진하게 */
  --heading:     #245436;   /* 제목 */
  --line:        #e3e8e4;   /* 경계선 */
  --chip-bg:     #e7f4ec;   /* 옅은 그린 배경 (태그/칩) */
  --chip-text:   #2f6b45;
  --header-bg:   rgba(255,255,255,.88);

  --shadow-sm: 0 1px 3px rgba(20, 40, 28, .07);
  --shadow-md: 0 6px 18px rgba(20, 40, 28, .09);
  --shadow-lg: 0 14px 36px rgba(20, 40, 28, .12);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1160px;
  /* 사이트 전체가 귀여운 Jua.
     예전에 글자가 뭉쳐 보였던 진짜 원인은 폰트가 아니라 '가짜 굵게'였어요.
     Jua 는 굵기가 400 하나뿐인데 사이트 곳곳에서 600~800 을 지정해서,
     브라우저가 없는 굵기를 만들려고 획을 부풀렸던 겁니다.
     아래 font-synthesis: none 으로 그걸 막았으니 Jua 를 그대로 써도 또렷해요.
     (Gothic A1 은 Jua 에 없는 글자만 받쳐주는 예비용) */
  --font: "Jua", "Gothic A1", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  /* 브랜드·제목 — Jua: 누리의 귀여운 정체성은 여기서 유지 */
  --font-cute: "Jua", "Gothic A1", "Pretendard", sans-serif; /* 위와 동일 — 제목용 별칭 */
}

/* ---------- 다크 테마 ---------- */
:root[data-theme="dark"] {
  --bg:          #14181a;
  --surface:     #1c2225;
  --surface-2:   #232b2e;
  /* 글자를 조금 더 밝게 — 어두운 배경에서 잘 안 보인다는 의견 반영 */
  --text:        #f2f6f3;
  --text-muted:  #b3c0b8;
  --heading:     #dcf0e5;
  --line:        #2c353a;
  --chip-bg:     #23332a;
  --chip-text:   #7fc99a;
  --header-bg:   rgba(20,24,26,.82);

  /* ⚠️ 어두운 바탕에서는 황금을 밝게 올려야 보입니다.
     라이트용 #b58a2b 를 그대로 쓰면 갈색 선으로 보였어요. */
  /* ⚠️ 어두운 바탕에서는 금을 한 단 올려야 금으로 보입니다.
     라이트용 띄를 그대로 쓰면 짙은 구간이 배경에 잡아먹혀 끊긴 선으로 보였어요. */
  --gold: #f0cf74;
  --gold-sheen: linear-gradient(135deg,
      #fff4c9 0%, #f0cf74 22%, #c69320 48%, #ffeeb4 68%, #e8c76b 86%, #b8860b 100%);

  --brand:        #66c48a;
  --brand-strong: #cfeadb;
  --brand-soft:   #8ad6a8;
  --accent:       #eaa04e;
  --accent-text:  #eaa04e;   /* 어두운 바탕에서는 밝은 주황이 잘 보여요 */
  --accent-soft:  #f0b268;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .45);
}

html { transition: none; }
body, .site-header, .card, .cat-card, .list-card, .post-item, .chip, .btn, .field input, .field textarea, .field select, .modal {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}