/*
 * 블로그 디자인 토큰 — 이 블로그 한 곳의 한 벌 (블로그마다 따로 둔다)
 *
 * 원본: BlogMag (ThemeForest 22583156, Regular License) css/style.css 의 값
 *   주 색 #f75656 · 짙은 남색 #303E4B · 본문 #333 · 옅은 바탕 #f1f1f1 · Roboto / Open Sans
 * 템플릿 파일을 옮겨 쓰지 않는다 — 값과 모양만 가져온다. 템플릿은 CSS 480KB + jQuery 플러그인 10여 개라
 * 속도 목표(LCP 2.5초 · CLS 0.1)와 맞지 않는다.
 *
 * 지키는 것
 *  - 색은 여기서만 정한다. 화면 CSS 에 색 값을 직접 적지 않는다.
 *  - 배경이 있는 요소는 글자색을 반드시 함께 정한다(…-ink). 흰 바탕 흰 글자 사고 방지.
 *  - 글자에 쓰는 주 색은 대비 4.5:1 을 넘는 --accent-strong 이다. #f75656 은 선·장식에만 쓴다.
 */
:root {
  /* 주 색 */
  --accent: #f75656; /* 장식(밑줄·테두리·점) */
  --accent-strong: #d63b3b; /* 글자·버튼 바탕 — 흰 글자 대비 4.6:1 */
  --accent-strong-hover: #b92f2f;
  --accent-ink: #ffffff;
  --accent-soft: #fdeceb;
  --accent-soft-ink: #8f2323;

  /* 짙은 면(머리 띠·꼬리말·뉴스레터 띠) */
  --dark: #303e4b;
  --dark-2: #26323d;
  --dark-ink: #ffffff;
  --dark-muted: #c5ced6; /* 짙은 면 위 보조 글자 — 대비 8:1 */

  /* 글자·바탕 */
  --ink: #222a31;
  --ink-2: #444c55;
  --muted: #5f6770; /* 흰 바탕 대비 5.9:1 */
  --bg: #ffffff;
  --bg-soft: #f4f4f4;
  --bg-softer: #fafafa;
  --line: #e1e1e1;
  --line-strong: #cfd3d7;

  /* 주메뉴별 표지 색(알약) — 모두 흰 글자 대비 4.5:1 이상 */
  --tone-destinations: #1f6fb8;
  --tone-eat: #d63b3b;
  --tone-do: #2e7d32;
  --tone-plan: #6a4bc4;
  --tone-ink: #ffffff;

  /* 상태 */
  --good: #2e7d32;
  --good-soft: #e8f3e9;
  --good-soft-ink: #1e5421;
  --warn-soft: #fff4d6;
  --warn-soft-ink: #6b4e00;
  --info-soft: #e7f0fa;
  --info-soft-ink: #174f86;

  /* 사진 위 글자 그늘 */
  --shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.78) 100%);
  --shade-ink: #ffffff;

  /* 글꼴 — 템플릿과 같은 짝 */
  --font-head: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* 크기 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;

  /* 간격 눈금 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;

  /* 모서리·그림자 — 템플릿은 각진 편이다 */
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.18);

  --container: 1170px;
  --header-h: 76px;
  --header-h-small: 58px;
}