/*
 * MANHAW design tokens
 * 출처: 실행 계획서 plan-v2 §6-2 컬러 / §6-3 타이포 / §6-4 간격·모양·모션 / §6-6 브레이크포인트.
 * 이 파일은 값만 가진다(요소 규칙 없음). 사이트·관리자·와이어 모두 이 파일을 먼저 불러온다.
 * 대비 수치: WCAG 2.x 상대 휘도 공식으로 재계산(2026-10-18). AA = 본문 4.5 이상, 큰 글씨·아이콘 3 이상.
 * 파랑 사용처 제한(Q9): 버튼·링크·현재 위치·UP/신작/주목 배지·진행 바·최신 회차 표시·장식 모티프만.
 * 칩·탭 선택은 --ink. 파랑 면 위 글자는 --primary / --primary-strong 만.
 */

:root {
  /* ---------- 1. 브랜드·행동 색 ---------- */
  --brand-sky:      #4FB8F5; /* 장식·면 채움 전용. 흰 바탕 2.21 → 텍스트 금지 */
  --brand-blue:     #1A7CF0; /* 아이콘·진행 바·섹션 모티프. 흰 바탕 4.05 → 본문 글자·버튼 글자 금지(아이콘 3.0 기준 통과) */
  --primary:        #1668D8; /* 버튼 바탕·링크·현재 메뉴·포커스·UP 바탕. 흰 글자 5.24 AA / 종이색 위 글자 4.75 AA */
  --primary-strong: #0F5BC4; /* 버튼 hover·pressed. 흰 글자 6.34 AA */
  --primary-tint:   #E8F3FE; /* 최신 회차 줄·현재 회차(시트)·검색 강조. 위 --primary 글자 4.66 AA, --ink-2 글자 6.27 AA */

  /* ---------- 2. 글자(ink) 3단계 ---------- */
  --ink:   #0B1B2E; /* 제목·본문·완결 배지·선택 칩 바탕. 흰 17.35 / 종이색 15.70 / surface-1 16.13 AAA */
  --ink-2: #4A5A6E; /* 작가명·메뉴·톤 면 위 보조 글자. 흰 7.05 / 종이색 6.38 / surface-1 6.55 AA */
  --ink-3: #5E6B7D; /* 날짜·캡션(최저 단계). 흰 5.42 / surface-1 5.04 / 종이색 4.91 AA. 톤 면 위 사용 금지 */

  /* ---------- 3. 바탕(surface) 단계 ---------- */
  --surface-0:     #FFFFFF; /* 기본 바탕 */
  --surface-paper: #F7F3EE; /* 주목 작품 섹션·투고 페이지 면·404·톤 없는 상세 패널 (표지 실자료의 종이색) */
  --surface-1:     #F3F7FC; /* 입력창·목록 hover·이미지 자리·푸터·관리자 본문 바탕 */

  /* ---------- 4. 선 ---------- */
  --line:     #E3E8EF;              /* 구분선(장식 전용, 대비 요구 없음) */
  --hairline: rgba(11, 27, 46, .08); /* 표지·배너 1px 테두리, 흰 배지 외곽 */

  /* ---------- 5. 작품별 표지 톤 ---------- */
  --tone: var(--surface-paper); /* 작품 페이지에서 서버가 _mh_tone 값을 인라인으로 덮어쓴다 */
  --tone-panel: var(--surface-paper); /* color-mix 미지원 브라우저 대체값 */
  /* 지원 브라우저는 상세 패널 바탕 = 표지 톤 8% + 흰 92% → 밝기 92% 이상 보장.
     위 글자는 --ink / --ink-2 만(--ink-2 최악 5.9 AA). */
}
@supports (color: color-mix(in srgb, red 8%, white)) {
  :root { --tone-panel: color-mix(in srgb, var(--tone) 8%, #fff); }
}

:root {
  /* ---------- 6. 상태 ---------- */
  --success:    #0F7A55; /* 연재중 배지 글자·상태 점. 흰 5.34 / success-bg 4.74 AA */
  --success-bg: #E3F6EC;
  --danger:     #B42318; /* 삭제·오류. 흰 6.57 / danger-bg 5.75 AA */
  --danger-bg:  #FDECEA; /* (추가) 오류 알림 바탕. 계획서에 없던 관리자용 값 */
  --scrim:      rgba(11, 27, 46, .48); /* 시트·검색 전환 뒤 막 */
  /* 상태는 색만으로 전달하지 않는다: 배지·알림에는 항상 글자(또는 아이콘 + 글자)를 둔다. */

  /* ---------- 7. 뷰어 ---------- */
  --viewer-light:      #F3F5F8; /* 웹툰 뷰어 기본 바탕. --ink 15.88 / --ink-2 6.45 / --ink-3 4.96 AA */
  --viewer-dark:       #111418; /* 칸만화 기본·다크 토글 */
  --viewer-dark-text:  #E6EDF5; /* viewer-dark 위 15.65 AAA */
  --viewer-dark-sub:   #9AA6B5; /* viewer-dark 위 7.47 AA */
  --viewer-dark-card:  #1A1F26; /* 다음 화 카드 바탕(어두운 뷰어). 본문 글자 14.04 / 보조 6.70 AA */
  --viewer-dark-line:  rgba(255, 255, 255, .08);
  --viewer-bar-light:  rgba(255, 255, 255, .96);
  --viewer-bar-dark:   rgba(17, 20, 24, .96);
  --viewer-pill-bg:    rgba(17, 20, 24, .72); /* "3 / 24" 쪽 표시. 흰 글자 14/600 */
  --viewer-pill-text:  #FFFFFF;

  /* 현재 뷰어 팔레트. 뷰어 루트에 data-viewer-theme="dark" 를 주면 아래로 바뀐다.
     하위 요소는 이 변수만 읽으므로 토글 시 이미지 위치는 그대로(Q14). */
  --v-bg:    var(--viewer-light);
  --v-bar:   var(--viewer-bar-light);
  --v-text:  var(--ink);
  --v-sub:   var(--ink-2);
  --v-line:  var(--line);
  --v-card:  var(--surface-0);

  /* ---------- 8. 그림자(3곳만, 카드에는 쓰지 않는다) ---------- */
  --shadow-1:     0 1px 2px rgba(11, 27, 46, .06), 0 8px 24px rgba(11, 27, 46, .08); /* 투고 4단계 카드·칸만화 화살표 */
  --shadow-cover: 0 8px 24px rgba(11, 27, 46, .16);                                  /* 상세 표지·투고 표지 겹침 */
  --shadow-sheet: 0 -8px 32px rgba(11, 27, 46, .16);                                 /* 하단 시트·하단 고정 바 */

  /* ---------- 9. 모양 ---------- */
  --r-sm:   4px;   /* 배지·Compact 표지·회차 썸네일 */
  --r-md:   8px;   /* Feature·상세 표지·버튼·입력·모바일 배너 */
  --r-lg:   12px;  /* 투고 배너·4단계 카드·상세 패널·레일 배너·다음 화 카드·관리자 카드 */
  --r-xl:   16px;  /* 시트 위쪽 */
  --r-pill: 999px; /* 검색창·칩·쪽 표시 */

  /* ---------- 10. 간격(4px 배수) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px; /* 빈 상태 모티프 크기·큰 섹션 여백용(계획서 §6-4 는 1~9 까지 명시, 10 은 80 다음 단계로 추가) */

  --section-gap: 48px;   /* <768 (밀도상 예외) */
  --gutter: 16px;        /* <768 좌우 여백 */
  --content-max: 1200px;
  --header-h: 56px;      /* 모바일 */
  --tabs-h: 44px;
  --bar-h: 56px;         /* 뷰어 바·하단 고정 바 */
  --appbar-h: 56px;      /* 관리자 앱 바 */
  --sidenav-w: 232px;    /* 관리자 왼쪽 메뉴 */
  --hit: 44px;           /* 최소 누르는 영역 */

  /* ---------- 11. 타이포 ---------- */
  --font-sans: 'Pretendard Variable', 'Pretendard Fallback', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 크기 (모바일 기준. 768 이상에서 아래 데스크탑 값으로 교체) */
  --fs-display: 28px;  --lh-display: 1.3;  --fw-display: 700; --ls-display: -0.02em;
  --fs-h1:      24px;  --lh-h1: 1.3;       --fw-h1: 700;      --ls-h1: -0.02em;
  --fs-h2:      20px;  --lh-h2: 1.35;      --fw-h2: 700;      --ls-h2: -0.01em;
  --fs-h3:      18px;  --lh-h3: 1.4;       --fw-h3: 600;      --ls-h3: 0;
  --fs-card:    14px;  --lh-card: 1.4;     --fw-card: 600;
  --fs-body:    16px;  --lh-body: 1.7;     --fw-body: 400;
  --fs-body-s:  14px;  --lh-body-s: 1.6;   --fw-body-s: 500;
  --fs-caption: 12px;  --lh-caption: 1.4;  --fw-caption: 600;

  /* ---------- 12. 모션 ---------- */
  --dur-1: 120ms; /* 누름 */
  --dur-2: 200ms; /* 색·opacity·셰브론 */
  --dur-3: 240ms; /* 바 숨김·고정 바 등장 */
  --dur-4: 300ms; /* 표지 확대·시트 (이보다 긴 전환 없음, 스켈레톤 맥박 1.2s 만 예외) */
  --ease-out:   cubic-bezier(.2, 0, 0, 1);
  --ease-hover: cubic-bezier(.15, 0, .2, 1);
  /* 전환 속성은 transform·opacity·color·background-color 만. 속성 전체(all) 전환 금지. */

  /* ---------- 13. 브레이크포인트 (미디어쿼리는 변수를 못 쓰므로 값 고정, JS·문서용으로만 둔다) ---------- */
  --bp-sm: 360px;  /* 360~767 */
  --bp-md: 768px;  /* 768~1023 */
  --bp-lg: 1024px; /* 1024~1279 (칸만화 2장 펼침 시작) */
  --bp-xl: 1280px; /* 좌우 레일 160 시작 */
  --bp-2xl: 1440px;/* 레일 200 */
  --rail-w: 0px;   /* 1280 이상에서 160, 1440 이상에서 200 으로 교체 */
}

/* 768 이상: 타이포·여백 데스크탑 값 */
@media (min-width: 768px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-card: 16px;
    --section-gap: 64px;
    --gutter: 24px;
    --header-h: 64px;
  }
}
@media (min-width: 1024px) {
  :root { --section-gap: 80px; }
}
@media (min-width: 1280px) {
  :root { --rail-w: 160px; }
}
@media (min-width: 1440px) {
  :root { --rail-w: 200px; }
}

/* 어두운 뷰어 */
[data-viewer-theme="dark"] {
  --v-bg:   var(--viewer-dark);
  --v-bar:  var(--viewer-bar-dark);
  --v-text: var(--viewer-dark-text);
  --v-sub:  var(--viewer-dark-sub);
  --v-line: var(--viewer-dark-line);
  --v-card: var(--viewer-dark-card);
}

/* 움직임 줄이기: 모든 전환·애니메이션 0 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; --dur-4: 0s; }
}