/* ============================================================
   Storage Medic·Nits 제품 페이지 — 예전 제품 스타일 위에 coden 의 글꼴과 모양을 얹는 다리.

   두 페이지는 릴리스 사실(버전·체크섬·크기)을 담고 Nits 승격 스크립트가 직접 고치므로
   본문 마크업과 제품 스타일은 그대로 두고, 이 파일을 맨 뒤에 불러 겉모양만 맞춘다.
   헤더·앱 메뉴 막대·푸터는 chrome.css 가 맡는다.
   제품 스타일의 토큰(--ink, --accent 등)은 제품마다 뜻이 달라서 여기서 바꾸지 않는다.
   ============================================================ */

:root {
  --sans: var(--cd-font-sans);
  --mono: var(--cd-font-mono);
}
/* Nits 페이지는 제품 스타일이 글꼴을 직접 정하므로 같은 선택자로 한 번 더 덮는다 */
body.product-page,
body.product-nits.nits-editorial { font-family: var(--cd-font-sans); }

/* ------------------------------------------------------------ 폭
   본문 폭과 양옆 여백을 coden 의 wrap 에 맞춰 헤더·앱 메뉴 막대·푸터와 같은 세로선에서 시작하게 한다.
   제품 스타일이 좁은 화면마다 --cx-gutter 를 다시 정하지만, 이 파일이 뒤에 오므로 이 값이 이긴다. */
body.product-storage-medic,
body.product-nits {
  --cx-wrap: calc(var(--cd-wrap) - 2 * var(--cd-gutter));
  --cx-gutter: var(--cd-gutter);
}

/* ------------------------------------------------------------ 첫 화면
   제품 색은 첫 화면에만 남기고, 제목은 coden 처럼 굵고 좁게 쓴다. 버튼은 coden 의 알약 모양. */
body.product-storage-medic .cx-hero,
body.product-nits .cx-hero { padding-top: clamp(40px, 5vw, 64px); }
body.product-storage-medic .editorial-title,
html[lang="en"] body.product-storage-medic .editorial-title,
body.product-nits .cx-title {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.048em;
}
body.product-storage-medic :is(.cx-btn-solid, .cx-btn-glass),
body.product-nits :is(.cx-btn-solid, .cx-btn-glass) { border-radius: 999px; font-weight: 750; }

/* ------------------------------------------------------------ 구획 제목 */
body.product-storage-medic .cx-section-head h2,
body.product-nits .cx-section-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-wrap: balance;
}