/* ============================================================
   03. 모바일 디자인 토큰  ―  "작은 화면에서의 크기·간격"
   ------------------------------------------------------------
   여기에는 '값'만 있습니다. 레이아웃 규칙(display, flex 등)은
   절대 여기에 쓰지 않습니다. 그건 20-components.css 담당입니다.

   덕분에 모바일 화면을 손보는 일 = 이 파일의 숫자만 바꾸는 일.
   ============================================================ */

/* ---------- 태블릿 (1024px 이하) ---------- */
@media (max-width: 1024px) {
  [data-site="머니콜"] {
    --fs-display: 40px;
    --fs-h1:      34px;
    --fs-h2:      34px;
    --fs-h3:      24px;
    --fs-stat:    40px;
    --fs-hero-stat: 52px;
    /* ★ --fs-hero-title 은 여기서 건드리지 않습니다.
       02 파일에서 clamp 로 폭에 따라 스르르 줄게 해뒀는데,
       여기서 40px 로 고정하면 그 구간(850~1024px)에서 계단이 생깁니다. */

    --section-y:  80px;
    --gap-grid:   20px;
    --grid-cols:  2;
    --card-p:     26px;
  }
}

/* ---------- 모바일 (768px 이하) ---------- */
@media (max-width: 768px) {
  [data-site="머니콜"] {
    /* 글자 */
    --fs-display: 30px;
    --fs-h1:      26px;
    --fs-h2:      26px;
    --fs-h3:      20px;
    --fs-h4:      17px;
    --fs-stat:    30px;
    --fs-lead:    17px;
    --fs-body:    16px;
    --fs-hero-stat: 42px;
    --fs-hero-title: 30px;
    /* 모바일 본문·설명글은 15px 미만 금지 (중장년 가독성) */
    --fs-sm:      15px;
    --fs-xs:      12px;   /* 캡션·주석 전용 */
    --fs-label:   15px;
    --lh-tight:   1.35;
    --lh-normal:  1.5;

    /* 레이아웃 */
    --container-x: 18px;
    --section-y:   56px;
    --gap-grid:    14px;
    --grid-cols:   1;
    --reviews-cols: 2;   /* 좁은 화면에서 3장은 너무 작아집니다 */

    /* 모양 — 화면이 좁으면 곡률을 줄여야 답답해 보이지 않습니다 */
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --shadow-2:  0 1px 6px rgba(var(--shadow-rgb), .06);
    --shadow-3:  0 6px 18px rgba(var(--shadow-rgb), .09);

    /* 부품 */
    --header-h:     60px;
    --logo-h:       28px;
    --btn-h:        54px;   /* 손가락 터치 최소 44px 이상 유지 */
    --btn-px:       20px;

    --btn-fs:       19px;
    --card-p:       20px;
    --float-size:   56px;
    --float-offset: 16px;
    --page-hero-h:  120px;
    --stat-p:       20px;

    /* 모션 — 좁은 화면에서는 한 단계 짧고 덜 움직입니다.
       ★ 화면이 작으면 같은 거리도 훨씬 크게 느껴집니다.
       ★ 손가락은 마우스보다 성격이 급합니다. 기다리는 느낌이 나면 안 됩니다.
       ★ 마우스가 없으니 --lift(떠오름)는 쓸 일이 없어 0 으로 둡니다. */
    --dur-base:  .28s;
    --dur-slow:  .45s;
    --dur-enter: .56s;
    --stagger:   50ms;
    --lift:      0px;
  }
}

/* ---------- 후기 카드 장수 : 폰(≤560px)은 1장 크게 ----------
   ★ 401~768px(넓은 폰)에서 2장이 들어가면 카드가 좁아져 내용이 뭉개집니다.
     그래서 폰 폭(≤560px)에서는 한 장을 크게(1.2장) 보여주고,
     그보다 넓은 화면(태블릿 등)에서만 2장을 씁니다.
   ★ 이 한 줄만 따로 둡니다. 폰트·여백 같은 다른 값은 아래 400px 블록에서 관리합니다. */
@media (max-width: 560px) {
  [data-site="머니콜"] { --reviews-cols: 1.2; }
}

/* ---------- 소형 모바일 (400px 이하 / 갤럭시 폴드 등) ---------- */
@media (max-width: 400px) {
  [data-site="머니콜"] {
    --fs-display:  27px;
    --fs-h1:       24px;
    --fs-h2:       24px;
    --fs-hero-stat: 36px;
    --fs-hero-title: 27px;
    --container-x: 14px;
    --reviews-cols: 1.2;   /* 한 장을 크게, 다음 장이 살짝 걸쳐 보이게 */

    --btn-fs:      19px;
    --btn-px:      16px;
    --card-p:      16px;
  }
}

/* ---------- 애니메이션 최소화를 켠 사용자 ----------
   ★ 어지럼증·멀미가 있는 분들이 기기 설정에서 켜는 항목입니다.
     "취향"이 아니라 접근성 요구입니다. 임의로 지우지 마세요.
   ★ 시간을 0 으로 만들면 움직임 없이 결과 화면만 즉시 나타납니다.
     기능이 사라지는 게 아니라 "이동 과정"만 없애는 것입니다.
   ★ 튕기는 곡선도 직선으로 바꿉니다. 시간이 0 이라 티는 안 나지만,
     혹시 어디서 시간을 따로 준 곳이 있어도 튀지 않게 하는 안전장치입니다. */
@media (prefers-reduced-motion: reduce) {
  [data-site="머니콜"] {
    --dur-instant: 0s;
    --dur-fast:  0s;
    --dur-base:  0s;
    --dur-slow:  0s;
    --dur-enter: 0s;
    --stagger:   0ms;
    --lift:      0px;
    --press:     1;
    --ease-spring: linear;
  }
}