/* ============================================================
   /post/ 토큰 — 랜딩(src/app/globals.css)에서 가져오고 목록에 필요한 것만 더한다.
   더한 값에는 [목록] 표시를 남긴다.
   ============================================================ */
:root {
  /* ---- 색: 랜딩 그대로 ---- */
  --bg: #03050f;
  --text: #f0f4ff;
  --text-2: #a8b4d0;
  --text-3: #5a6a8a;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #002fff;
  --accent-2: #0050ff;
  --accent-3: #3399ff;

  /* [목록] 유리 —
     0.72 로 깔았더니 뒤 성운이 안 비쳐 "판때기"로 읽혔다. 유리는 재질이
     아니라 '뒤가 비치는 정도'로 읽힌다. 투명도를 올리고, 대신 가장자리
     반사와 안쪽 하이라이트로 두께를 만든다. */
  /* 바탕은 검정이 아니라 '파랑을 머금은 어두움'이다. 순검정으로 두면 뒤가
     검정인 구간에서 판이 배경에 녹아 평면이 된다 — 유리는 제 색이 있어야 한다. */
  /* 가장자리 — 랜딩 globals.css 의 .glass-edge 와 같은 값이다 */
  --glass-edge-shadow:
    inset calc(2px * var(--edge-scale, 1)) calc(2px * var(--edge-scale, 1)) 0
      calc(-2px * var(--edge-scale, 1)) oklch(1 0 0 / 0.45),
    inset calc(-2px * var(--edge-scale, 1)) calc(-2px * var(--edge-scale, 1))
      calc(4px * var(--edge-scale, 1)) calc(-4px * var(--edge-scale, 1)) oklch(1 0 0 / 0.5),
    inset 0 0 0 1px oklch(1 0 0 / 0.07);
  --glass-tint: rgba(19, 27, 51, 0.55);
  --glass-tint-hi: rgba(27, 37, 66, 0.66);   /* 호버 — 살짝 차오른다 */
  --glass-blur: 18px;
  --glass-sat: 165%;
  /* 표면에 비스듬히 떨어지는 빛. 위-왼쪽이 밝고 아래로 갈수록 죽는다. */
  --glass-sheen: linear-gradient(152deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 34%, rgba(255,255,255,0) 58%, rgba(255,255,255,.055));
  /* 위에서 아래로 떨어지는 빛. 판이 '서 있다'는 인상을 만든다. */
  --glass-fall: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 34%, rgba(255,255,255,0) 100%);
  /* 판의 두께 — 안쪽 윗선(빛)·아랫선(반사)·아래 그늘, 바깥 그림자(뜬 높이) */
  --glass-depth: inset 0 1px 0 rgba(255,255,255,.17), inset 0 -1px 0 rgba(255,255,255,.05),
                 inset 0 -26px 44px -30px rgba(0,0,0,.85), 0 16px 40px -14px rgba(0,0,0,.66);
  --glass-depth-hi: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.07),
                 inset 0 -26px 44px -30px rgba(0,0,0,.8), 0 24px 56px -16px rgba(0,0,0,.72);

  /* ---- 여백: 랜딩 그대로 ---- */
  --gutter: clamp(20px, 5vw, 72px);
  --sec-y: clamp(48px, 9vw, 132px);
  --gap-label: clamp(14px, 2.2vw, 32px);
  --gap-lead: clamp(12px, 1.7vw, 24px);
  --gap-action: clamp(24px, 3.4vw, 48px);
  --measure: 1240px;

  /* ---- 타이포: 랜딩 사다리 그대로 ---- */
  --t-display: clamp(32px, 5.2vw, 64px);
  --t-h2: clamp(26px, 3.4vw, 42px);
  --t-h3: clamp(18px, 2.1vw, 24px);
  --t-lead: clamp(16px, 1.7vw, 21px);
  --t-sub: clamp(14px, 1.25vw, 17px);
  --t-body: clamp(15px, 1.3vw, 16px);
  --t-eyebrow: clamp(12px, 1.05vw, 13px);
  --t-cap: clamp(12px, 1vw, 12.5px);

  /* [목록] 카드 제목 — 랜딩과 같은 --t-body 다. 한 단계 올려 뒀었는데,
     같은 카드가 두 화면에서 다른 크기로 서면 같은 카드로 안 읽힌다. */
  --t-card-title: var(--t-body);
  /* [목록] 큰 카드 제목. 보통 카드(16)와 섹션 제목(24) 사이. */
  /* 큰 카드 제목. 레일 제목(--t-body 16)과 확실히 갈려야 '큰 카드'로 읽힌다. */
  --t-card-title-hero: clamp(22px, 2.4vw, 32px);

  --lh-display: 1.26;
  --lh-head: 1.24;
  --lh-body: 1.72;
  --lh-sub: 1.6;
  --lh-eyebrow: 1;

  /* [목록] 카드 규격. 랜딩 PostCard(360×293)와 같은 값이다 — 목록에서만
     다른 카드를 쓸 이유가 없다. 높이를 못 박는 이유도 랜딩과 같다:
     제목 길이에 따라 날짜가 오르내리면 카드마다 리듬이 달라진다. */
  --card-h: 400px;        /* 랜딩 CARD_H. 사진 180 + 여백 20 + 제목 두 줄 + 여백 20 + 날짜 줄 + 여백 20 */
  --card-thumb-h: 180px;
  --card-pad: 20px;
  --card-radius: 20px;

  --dur-1: 0.18s;   /* [목록] 호버 */
  --dur-2: 0.35s;   /* [목록] 리빌 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 639px) {
  :root {
    --t-display: clamp(26px, 8.2vw, 32px);
    --card-h: 372px;
    --card-thumb-h: 168px;
    --card-pad: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0.01s; --dur-2: 0.01s; }
}