@charset "utf-8";

/* ================================================================
   보험로그 디자인 토큰
   - 값 출처: assets/css/pc.txt(PC Figma 값) + 시안 MO 픽셀 실측(doc/design-analysis.json)
   - 반응형 글자·여백은 390px(MO) → 1440px(PC) 사이를 직선으로 잇는 clamp.
     --fluid 는 390px 화면에서 0, 1440px 화면에서 1px 이 되는 길이라서
     "MO값 + 차이 × var(--fluid)" 로 쓰면 된다.
   - 브레이크포인트(미디어쿼리에서 숫자로 씀): 768px · 1024px · 1280px
   ================================================================ */
:root {
  --fluid: calc((100vw - 390px) / 1050);

  /* ---------- 색상 ---------- */
  --primary: #007bff;
  --primary-10: rgba(0, 123, 255, 0.1);
  --primary-5: rgba(0, 123, 255, 0.05);

  --gray-a1: #0d1c2d;
  --gray-a2: rgba(13, 28, 45, 0.8);
  --gray-a3: rgba(13, 28, 45, 0.5);
  --gray-a4: rgba(13, 28, 45, 0.16);
  --gray-a5: rgba(13, 28, 45, 0.08);
  --fill-elevated: #f2f4f7;
  --white: #ffffff;

  /* 카테고리 팔레트 (-1 글자 / -5 배경 20%) */
  --coral-1: #f75d42;
  --coral-5: rgba(247, 93, 66, 0.2);
  --teal-1: #00b8f2;
  --teal-5: rgba(0, 184, 242, 0.2);
  --orange-1: #ff8e28;
  --orange-5: rgba(255, 142, 40, 0.2);
  --green-1: #108d4d;
  --green-5: rgba(86, 222, 152, 0.2);
  --purple-1: #a33eff;
  --purple-5: rgba(163, 62, 255, 0.2);

  /* 광고 영역 */
  --ad-bg: #f2f7fd;
  --ad-border: #dbe3ed;
  --ad-title: #131f3b;
  --ad-caption: #707a8c;
  --ad-aside-bg: #f2f4f7;
  --ad-aside-border: #9dacc2;
  --ad-aside-title: #39485a;
  --ad-aside-desc: #69788c;

  /* ---------- 글꼴 ---------- */
  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --fs-caption: 12px;
  --fs-body2: 14px;
  --fs-title3: 16px;
  --fs-title2: 18px;
  --fs-title1: 20px;
  --fs-body1: clamp(14px, calc(14px + 2 * var(--fluid)), 16px);          /* 히어로 카테고리·설명, 기사 날짜 */
  --fs-article: clamp(16px, calc(16px + 2 * var(--fluid)), 18px);        /* 기사 본문 */
  --fs-ad-title: clamp(18px, calc(18px + 2 * var(--fluid)), 20px);       /* 광고 배너 제목 */
  --fs-heading: clamp(20px, calc(20px + 4 * var(--fluid)), 24px);        /* 섹션 제목 */
  --fs-h2: clamp(18px, calc(18px + 6 * var(--fluid)), 24px);             /* 기사 소제목 */
  --fs-empty: clamp(20px, calc(20px + 6 * var(--fluid)), 26px);          /* 검색결과 없음 */
  --fs-hero-title: clamp(20px, calc(20px + 12 * var(--fluid)), 32px);    /* 히어로 제목 */
  --fs-article-title: clamp(24px, calc(24px + 8 * var(--fluid)), 32px);  /* 기사 제목 */
  --fs-tag-lg: clamp(12px, calc(12px + 4 * var(--fluid)), 16px);         /* 기사 상단 태그 */

  /* ---------- 레이아웃 ---------- */
  --inner-max: 1440px;
  --gutter: clamp(10px, 4.1026vw, 32px);                       /* section 좌우 여백 (390에서 16) */
  --inset: clamp(0px, calc(16 * var(--fluid)), 16px);          /* PC에서만 16 들어가는 요소 */
  --header-h: 96px;                                            /* MO 탭 있는 헤더 / PC 74 */

  /* 세로 리듬 (MO가 더 큰 값은 줄어드는 clamp) */
  --page-top: 24px;
  --section-gap: clamp(24px, calc(32px - 8 * var(--fluid)), 32px);
  --title-to-list: clamp(8px, calc(20px - 12 * var(--fluid)), 20px);
  --list-gap: 16px;
  --footer-mt: clamp(40px, calc(40px + 40 * var(--fluid)), 80px);

  /* ---------- 모서리 ---------- */
  --radius-sm: 8px;    /* 태그, 입력창, 번호 뱃지 */
  --radius-ad: 10px;   /* 광고 배너 */
  --radius-btn: 12px;  /* 버튼 */
  --radius-lg: 16px;   /* 카드, 박스, 히어로 */
  --radius-pill: 999px;

  --transition: 0.2s ease;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 74px;
  }
}