/* ============================================================
   디자인 시스템 — 값은 전부 여기에만 있다
   PRD 8절: 페이지마다 다른 값이 흩어지지 않게

   다른 CSS 파일은 여기 정의된 변수만 가져다 쓴다.
   색이나 여백을 고칠 일이 생기면 이 파일 한 곳만 고친다.
   ============================================================ */

:root {

  /* ── 색 ────────────────────────────────────────────────────
     작가노트에서 나온 톤이다.
     화려하지 않고 차분하게, 작품이 주인공이 되게. (PRD 3절)
     바탕은 갤러리 벽에 가까운 따뜻한 흰색.
     강조색은 「산화된 청동의 녹청색」 — 작가가 기억의 색이라 부른 그 색 */

  --c-bg:           #faf9f6;   /* 바탕 */
  --c-surface:      #ffffff;   /* 카드·입력칸 */
  --c-surface-2:    #f4f2ed;   /* 한 겹 들어간 면 */

  --c-ink:          #1c1c1a;   /* 본문 */
  --c-ink-2:        #55534e;   /* 보조 설명 */
  --c-ink-3:        #8a877f;   /* 캡션·날짜 */

  --c-line:         #e3e0d9;   /* 실선 */
  --c-line-strong:  #cdc9c0;   /* 눈에 띄어야 하는 실선 */

  --c-accent:       #4a7d72;   /* 녹청 */
  --c-accent-dark:  #3a635a;   /* 눌렀을 때 */
  --c-accent-soft:  #e9f0ee;   /* 강조 배경 */

  --c-ok:           #2f7d5d;
  --c-ok-soft:      #e7f2ec;
  --c-danger:       #a63a3a;
  --c-danger-soft:  #f8e8e8;

  /* 작품 사진 뒤에 까는 색. 확대해서 볼 때의 배경 */
  --c-viewer-bg:    #14140f;


  /* ── 글자 ──────────────────────────────────────────────────
     Pretendard 는 머리말에서 불러온다. 못 불러와도 뒤의 시스템 글꼴로 버틴다 */

  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
               system-ui, sans-serif;

  /* 작가노트처럼 긴 글에 쓴다. 읽는 속도가 느려지는 쪽이 어울린다.
     폴백에 고딕(Apple SD Gothic Neo)을 넣으면 안 된다 —
     명조가 없을 때 고딕으로 떨어져서 본문과 구분이 사라진다 */
  --font-serif: "Nanum Myeongjo", "AppleMyungjo", "바탕", Batang,
                "Noto Serif KR", Georgia, serif;

  /* 본문 16px 부터 시작한다. 관리자 화면은 여기서 한 단계 더 올린다 (PRD 5.1) */
  --fs-xs:    0.8125rem;  /* 13 — 잔글씨 */
  --fs-sm:    0.875rem;   /* 14 — 캡션 */
  --fs-base:  1rem;       /* 16 — 본문 */
  --fs-md:    1.125rem;   /* 18 */
  --fs-lg:    1.375rem;   /* 22 — 소제목 */
  --fs-xl:    1.75rem;    /* 28 — 제목 */

  /* 큰 글씨는 화면 폭에 따라 줄었다 늘었다 한다.
     휴대폰에서 제목이 석 줄로 접히지 않게 */
  --fs-2xl:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);   /* 28 → 40 */
  --fs-3xl:   clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* 36 → 56 */

  --lh-tight:  1.25;
  --lh-normal: 1.65;
  --lh-loose:  1.9;   /* 작가노트 본문 */

  --ls-tight: -0.02em;
  --ls-wide:   0.08em;  /* 작은 대문자·레이블 */


  /* ── 여백 ──────────────────────────────────────────────────
     4px 를 한 칸으로 하는 사다리. 중간값을 임의로 쓰지 않는다 */

  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */


  /* ── 모서리 ────────────────────────────────────────────────
     작품 사진에는 둥근 모서리를 주지 않는다. 그림은 네모다 */

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-full: 999px;


  /* ── 그림자 ────────────────────────────────────────────────
     거의 안 쓴다. 쓰더라도 떠 보이지 않을 만큼만 */

  --shadow-sm: 0 1px 2px rgba(28, 28, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 28, 26, 0.08);
  --shadow-lg: 0 12px 40px rgba(28, 28, 26, 0.14);


  /* ── 레이아웃 ──────────────────────────────────────────────*/

  --wrap:        1240px;  /* 목록·홈 */
  --wrap-text:   680px;   /* 작가노트처럼 읽는 글 */
  --gutter:      var(--sp-5);
  --header-h:    64px;

  /* 손가락으로 눌러야 하는 것의 최소 크기. PRD 5.1
     관리자 화면의 모든 버튼이 이 값을 밑돌지 않는다 */
  --tap:         44px;


  /* ── 움직임 ────────────────────────────────────────────────*/

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    120ms;
  --dur:         220ms;
  --dur-slow:    420ms;
}


/* 관리자 화면은 한 단계 크게 간다.
   본문 17px, 버튼과 입력칸은 손가락 기준. (PRD 5.1) */
.is-admin {
  --fs-base:  1.0625rem;  /* 17 */
  --fs-md:    1.1875rem;  /* 19 */
  --fs-lg:    1.4375rem;  /* 23 */
  --gutter:   var(--sp-4);
}


/* 움직임을 줄여 달라고 설정한 사람에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}