/*
  약수부부 링크 허브 디자인 토큰 v3 (2026-10-25, 애플 회색 체계)
  v1(주황 바탕) 반려 뒤 레퍼런스대로 다시 잡았습니다: 밝은 바탕, 흰 카드, 브랜드색은 포인트만.
  근거: docs/analysis/patterns.md, ref-03 인포크(#e9f4f3 바탕, 흰 카드 12px), ref-04 리틀리(#FBEFEA 바탕, 버튼색 하나)
  v3: 바탕, 카드, 글자, 선, 눌림색, 알약 모서리, 자간을 apple.com 실측값으로 바꿨습니다(docs/references/ref-05-apple.md).
  다른 계정에 재활용할 때는 "테마" 네 줄만 바꿉니다.
*/
/* 대체 글꼴 보정: Pretendard 실측 ascent 1950, descent 494 (2048 단위), 한글 폭 0.864em. Apple SD Gothic Neo 한글 폭 0.865em 이라 size-adjust 는 100% */
@font-face {
  font-family: "YaksuSans Fallback";
  src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular"), local("Malgun Gothic"), local("Noto Sans KR");
  size-adjust: 100%;
  ascent-override: 95.2%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}
:root {
  /* 테마 */
  --theme-bg: #F5F5F7;      /* 페이지 바탕: 애플 회색 */
  --theme-surface: #FFFFFF; /* 카드, 버튼 바탕 */
  --theme-ink: #1D1D1F;     /* 글자, 주 버튼 (애플 기본 글자) */
  --theme-accent: #FD7214;  /* 포인트: 프로필 테두리, 태그 점, 주 버튼 화살표. 넓은 면에는 쓰지 않습니다 */

  /* 파생 색 */
  --c-bg: var(--theme-bg);
  --c-surface: var(--theme-surface);
  --c-ink: var(--theme-ink);
  --c-accent: var(--theme-accent);
  --c-on-ink: var(--theme-surface);
  --c-ink-muted: #6E6E73;   /* 애플 보조 글자 */
  --c-ink-faint: #86868B;   /* 애플 옅은 글자 */
  --c-line: #E8E8ED;        /* 애플 선 */
  --c-line-strong: color-mix(in srgb, var(--theme-ink) 16%, transparent);
  --c-sunk: #EDEDF2;        /* 애플 눌림 회색 */
  --c-ink-press: #18181A;   /* 애플 먹색 눌림 */
  --c-accent-soft: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface));
  --c-scrim: color-mix(in srgb, var(--theme-ink) 50%, transparent);
  --c-outside: #E8E8ED;     /* 데스크톱에서 페이지 바깥 */

  /* 글꼴 */
  /* YaksuSans 는 빌드가 만든 화면 글자 서브셋(site/fonts, @font-face 는 index.html 인라인). 없는 글자는 Pretendard(어드민의 CDN)나 보정된 시스템 글꼴로 넘어갑니다 */
  --font-sans: "YaksuSans", "Pretendard Variable", Pretendard, "YaksuSans Fallback", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --w-text: 500;
  --w-strong: 650;
  --w-head: 700;

  /* 글자 크기 (390px 기준) */
  --fs-meta: 13px;
  --fs-small: 15px;
  --fs-body: 16px;
  --fs-name: 20px;
  --fs-title: 17px;
  --fs-head: 22px;

  --lh-tight: 1.3;
  --lh-text: 1.45;
  --ls-head: -0.022em;
  --ls-text: -0.01em;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --gutter: var(--sp-5);
  --gap-block: var(--sp-3);
  --gap-section: var(--sp-10);
  --max: 440px;

  /* 크기 */
  --touch-min: 48px;
  --h-btn: 56px;
  --h-product: 80px;
  --thumb: 56px;
  --avatar: 96px;
  --h-float: 52px;

  /* 모서리 */
  --r-btn: 980px;           /* 애플 알약 */
  --r-card: 18px;
  --r-thumb: 10px;
  --r-pill: 999px;

  /* 그림자: 카드는 아주 옅게(리틀리 실측 0 10px 24px .04). 글자 그림자는 쓰지 않습니다 */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--theme-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--theme-ink) 4%, transparent);
  --shadow-float: 0 6px 20px color-mix(in srgb, var(--theme-ink) 18%, transparent);
  --shadow-sheet: 0 -8px 32px color-mix(in srgb, var(--theme-ink) 14%, transparent);

  /* 움직임 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms;
  --t-fast: 200ms;
  --t-enter: 380ms;
  --t-sheet: 320ms;
  --stagger: 40ms;

  /* 안전 영역 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}