/* ─────────────────────────────────────────────────────────────
   플릭(Flick) 디자인 토큰 — 색·글꼴·간격·둥글기·그림자·모션을 이 파일 한 곳에서 관리
   콘셉트: 손바닥 문고본 (종이 · 먹 · 연필 · 괘선 · 군청 책갈피)
   ───────────────────────────────────────────────────────────── */

/* 고운바탕이 로딩되기 전/실패 시 쓰는 대체 명조 (글자가 사라졌다 나타나는 깜빡임 방지: display=swap + 시스템 명조) */
@font-face {
  font-family: "Gowun Batang Fallback";
  src: local("AppleMyungjo"), local("Apple Myungjo"), local("NanumMyeongjo"), local("Noto Serif KR"), local("Batang");
  font-display: swap;
}

:root {
  /* ── 원색 팔레트 (모드와 무관한 고정값: 읽기 화면 테마가 직접 참조) ── */
  --c-paper-l: #F6F6F3;   --c-paper-d: #141519;
  --c-sheet-l: #FFFFFF;   --c-sheet-d: #1C1D22;
  --c-ink-l: #1E2024;     --c-ink-d: #ECEBE6;
  --c-pencil-l: #5C6068;  --c-pencil-d: #9A9CA3;
  --c-faint-l: #8A8D94;   --c-faint-d: #74777E;
  --c-rule-l: #E2E3DF;    --c-rule-d: #2B2D33;
  --c-wash-l: #EDEEEA;    --c-wash-d: #24262C;
  --c-accent-l: #3346D3;  --c-accent-d: #8E9BFF;
  --c-sepia-paper: #F3EBD9; --c-sepia-sheet: #F9F3E5; --c-sepia-ink: #3D3022;
  --c-sepia-pencil: #85704F; --c-sepia-rule: #E2D5B8; --c-sepia-wash: #EBE0C6; --c-sepia-accent: #8A5A22;
  --c-star: #E7A417;
  --c-danger-l: #C93A3A;  --c-danger-d: #FF8A80;
  --c-warn-bg-l: #FBF1D3; --c-warn-bg-d: #3A3220; --c-warn-ink-l: #6B5208; --c-warn-ink-d: #F1D488;

  /* ── 의미 토큰 (라이트) ── */
  --paper: var(--c-paper-l);        /* 바탕 */
  --sheet: var(--c-sheet-l);        /* 카드·패널 지면 */
  --ink: var(--c-ink-l);            /* 본문 */
  --pencil: var(--c-pencil-l);      /* 보조 글자 */
  --faint: var(--c-faint-l);        /* 더 옅은 메타 */
  --rule: var(--c-rule-l);          /* 괘선·테두리 */
  --wash: var(--c-wash-l);          /* 옅은 채움(트랙, 스켈레톤) */
  --accent: var(--c-accent-l);      /* 군청: 포인트 1색 */
  --accent-ink: #FFFFFF;            /* 군청 위 글자 */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --danger: var(--c-danger-l);
  --danger-ink: #FFFFFF;            /* 위험(빨강) 버튼 위 글자 */
  --warn-bg: var(--c-warn-bg-l);
  --warn-ink: var(--c-warn-ink-l);
  --star: var(--c-star);
  --shimmer: rgb(255 255 255 / 0.6);
  --scrim: rgb(20 21 25 / 0.45);

  /* ── 장르 표지 (배경 / 글자) ── */
  --g-romance: #F2C4CE;  --g-romance-ink: #6B2A3A;
  --g-fantasy: #C9D3F5;  --g-fantasy-ink: #27337A;
  --g-sf: #B7E3DC;       --g-sf-ink: #15514A;
  --g-mystery: #2F3B52;  --g-mystery-ink: #DCE3F0;
  --g-thriller: #4A3F3A; --g-thriller-ink: #EADBD2;
  --g-horror: #1F2422;   --g-horror-ink: #C7D1C9;
  --g-drama: #EBD9A6;    --g-drama-ink: #5A4410;
  --g-comedy: #F6D84C;   --g-comedy-ink: #4A3A00;
  --g-daily: #D3E6C4;    --g-daily-ink: #2F4F1E;
  --g-default: #D9DBD6;  --g-default-ink: #2E3136;

  /* ── 글꼴 ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-serif: "Gowun Batang", "Gowun Batang Fallback", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", serif;
  --tracking-serif: -0.01em;        /* 명조 제목·첫 문장 자간 */

  /* ── 글자 크기 (1.25배 체계) ── */
  --fs-12: 0.75rem;   /* 12 */
  --fs-13: 0.8125rem; /* 13 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-16: 1rem;      /* 16 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-25: 1.5625rem; /* 25 */
  --fs-31: 1.9375rem; /* 31 */
  --lh-ui: 1.55;
  --lh-reading: 1.9;

  /* ── 간격 (4px 단위) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --gutter: 20px;          /* 좌우 여백: 헤더·본문·카드·목록·푸터가 모두 이 값 하나를 씀 */
  --content-max: 640px;
  --touch: 44px;           /* 최소 터치 영역 */

  /* ── 둥글기 (위계별) ── */
  --r-xs: 4px;    /* 라벨 */
  --r-sm: 8px;    /* 입력·칩 안쪽 */
  --r-md: 12px;   /* 카드·패널 */
  --r-lg: 20px;   /* 시트·다이얼로그 */
  --r-pill: 999px;
  --r-cover: 3px 6px 6px 3px; /* 문고본 표지: 책등 쪽이 살짝 각짐 */

  /* ── 그림자 ── */
  --shadow-cover: 0 1px 0 rgb(0 0 0 / 0.04), 0 6px 14px -8px rgb(20 21 25 / 0.35);
  --shadow-pop: 0 10px 30px -10px rgb(20 21 25 / 0.28), 0 2px 6px rgb(20 21 25 / 0.06);
  --shadow-sheet: 0 -8px 30px -12px rgb(20 21 25 / 0.3);

  /* ── 모션 (transform·opacity만 움직임) ── */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 살짝 튀는 피드백용 */
  --stagger: 40ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--c-paper-d);
    --sheet: var(--c-sheet-d);
    --ink: var(--c-ink-d);
    --pencil: var(--c-pencil-d);
    --faint: var(--c-faint-d);
    --rule: var(--c-rule-d);
    --wash: var(--c-wash-d);
    --accent: var(--c-accent-d);
    --accent-ink: #141519;
    --danger: var(--c-danger-d);
    --danger-ink: #141519;
    --warn-bg: var(--c-warn-bg-d);
    --warn-ink: var(--c-warn-ink-d);
    --shimmer: rgb(255 255 255 / 0.06);
    --scrim: rgb(0 0 0 / 0.6);

    /* 장르 표지: 같은 계열, 명도만 낮춤 */
    --g-romance: #5A3A42;  --g-romance-ink: #F2D3DA;
    --g-fantasy: #343C5E;  --g-fantasy-ink: #D3DAF7;
    --g-sf: #24463F;       --g-sf-ink: #BDE6DF;
    --g-mystery: #2A3448;  --g-mystery-ink: #C9D2E4;
    --g-thriller: #3E3430; --g-thriller-ink: #E0CFC5;
    --g-horror: #1A1E1C;   --g-horror-ink: #AEBBB1;
    --g-drama: #5A4C27;    --g-drama-ink: #F0E3BE;
    --g-comedy: #5E5220;   --g-comedy-ink: #F7E68F;
    --g-daily: #33452A;    --g-daily-ink: #D6EAC8;
    --g-default: #2E3036;  --g-default-ink: #D9DBD6;

    --shadow-cover: 0 1px 0 rgb(255 255 255 / 0.03), 0 6px 14px -8px rgb(0 0 0 / 0.7);
    --shadow-pop: 0 12px 32px -10px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.3);
  }
}

/* "동작 줄이기"를 켠 사람에게는 모든 애니메이션·전환을 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}