/* 제로덴 디자인 규격 v3 (2026-10-09) — 앱·웹·캐러셀·상세페이지가 쓰는 값은 여기 한 곳.
   숫자를 화면 파일에서 새로 정하지 말고 var(--...) 를 쓴다. 근거: research_notes/ 와 reports/ (Apple·Material·Carbon·WCAG·당근 Seed·원티드 Montage).
   원칙: 글자·아이콘은 rem(키울 수 있음), 눌리는 곳 최소·간격·여백은 px(고정, 4의 배수).
   글자 키우기: <html data-text-size="lg|xl|xxl|max"> 한 줄. 지정이 없으면 브라우저·OS 설정을 그대로 따른다.
   v1 이름(--t-body, --s-4, --page-gutter 등)은 그대로 남겨 두었다(옛 화면이 안 깨지게). */
:root {
  --text-scale: 1;
  --head-scale: 1;          /* 큰 제목은 증가분의 절반만 키운다(40px 표지가 80px 이 되는 것 방지) */

  /* ---- 색 역할: 이름이 아니라 역할로 쓴다. 브랜드 색은 --brand 한 줄만 바꾸면 된다 ---- */
  --brand:#2A7A55; --on-brand:#FFFFFF; --brand-subtle:#E3F3EA; --on-brand-subtle:#1F5F42;
  --bg:#FFFFFF; --surface:#F4F6F5; --surface-2:#E9EDEB;
  --text:#1B1F1D; --text-muted:#5B6560; --text-placeholder:#6B7570; --text-disabled:#8E9893;
  --border:#D5DBD8;            /* 구분선(장식) */
  --border-strong:#7B8681;     /* 입력창·체크박스 등 '칸의 경계' 3:1 이상 (WCAG 1.4.11) */
  --link:#1A56DB; --focus:#1A56DB;
  --danger:#B3261E; --on-danger:#FFFFFF; --danger-subtle:#FBE7E5;
  --success:#1E7A4B; --success-subtle:#E3F3EA;
  --warning:#8A5A00; --warning-subtle:#FFF4D6;
  --info:#1A56DB; --info-subtle:#E8F0FE;

  /* ---- 글자: 크기 / 줄높이(4의 배수). 8단계만, 12 아래 금지 ---- */
  --fs-caption:calc(.75rem * var(--text-scale));   --lh-caption-v3:calc(1rem * var(--text-scale));
  --fs-label:calc(.875rem * var(--text-scale));    --lh-label:calc(1.25rem * var(--text-scale));
  --fs-body:calc(1rem * var(--text-scale));        --lh-ui:calc(1.5rem * var(--text-scale));       /* 한 줄 UI 16/24 */
  --lh-read:calc(1.625rem * var(--text-scale));                                                     /* 긴 글 16/26 */
  --fs-lead:calc(1.125rem * var(--text-scale));    --lh-lead:calc(1.75rem * var(--text-scale));
  --fs-title:calc(1.25rem * var(--head-scale));    --lh-title:calc(1.75rem * var(--head-scale));   /* 20/28 */
  --fs-head:calc(1.5rem * var(--head-scale));      --lh-head:calc(2rem * var(--head-scale));       /* 24/32 */
  --fs-h1:calc(2rem * var(--head-scale));          --lh-h1:calc(2.5rem * var(--head-scale));       /* 32/40 */
  --fs-display:calc(2.5rem * var(--head-scale));   --lh-display-v3:calc(3.25rem * var(--head-scale)); /* 40/52 */
  --fs-tab:calc(.75rem * min(var(--text-scale), 1.3));    /* 탭바·배지 글자는 1.3배까지만(공간이 좁음) */
  --w-regular:400; --w-medium:500; --w-bold:700;
  --font-sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",Roboto,"Segoe UI",sans-serif;
  --measure:40em;                                    /* 한글 한 줄 40자 안팎(WCAG 1.4.8 CJK) */

  /* ---- 간격: 4의 배수 고정(px) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --gutter:16px; --col-gap:16px; --cols:4;
  --gap-section:48px;

  /* ---- 부품 크기 ---- */
  --tap-min:44px;            /* 눌리는 곳 최소: 글자가 커져도 44 고정(Apple 44, Google 48) */
  --tap-gap:8px;             /* 눌리는 것 사이 최소 간격 */
  --control-h:48px;          /* 버튼·입력창 최소 높이(글이 길면 늘어남) */
  --row-h:56px; --tabbar-h:56px;
  --icon-s:calc(1rem * var(--text-scale)); --icon-m:calc(1.25rem * var(--text-scale)); --icon-l:calc(1.5rem * var(--text-scale)); --icon-xl:calc(2rem * var(--text-scale));  /* 16 20 24 32 */
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); --shadow-2:0 4px 12px rgba(0,0,0,.12);
  --focus-ring:3px;
  --state-hover:.08; --state-pressed:.10;           /* 눌림·마우스 올림은 이 불투명도의 덮개로 */
  --dur:150ms; --ease:cubic-bezier(.2,0,0,1);

  /* ---- v1 호환 이름(옛 화면용, 값은 v1 그대로) ---- */
  --t-caption:12px; --t-small:14px; --t-body:16px; --t-lead:18px; --t-h3:20px; --t-h2:24px; --t-h1:32px; --t-display:40px;
  --lh-display:1.15; --lh-heading:1.25; --lh-body:1.6; --lh-caption:1.4;
  --ls-display:-0.03em; --ls-heading:-0.02em; --ls-body:0; --ls-caption:0;
  --page-gutter:16px; --grid-cols:4;
  --gap-text-text:8px; --gap-para:16px; --gap-text-graphic:16px;
}
/* 화면 폭: 폰 4칸(~599) · 태블릿 8칸(600~1199) · 데스크톱 12칸(1200~). Material 은 600/840/1200 이지만 열 수는 우리 기준 */
@media (min-width:600px){ :root{ --cols:8; --grid-cols:8; --gutter:24px; --page-gutter:24px; --col-gap:24px; } }
@media (min-width:1200px){ :root{ --cols:12; --grid-cols:12; --gutter:48px; --page-gutter:48px; --col-gap:24px; } }

/* 글자 키우기 5단계. 큰 제목은 증가분의 절반만 */
:root[data-text-size="lg"]  { --text-scale:1.15; --head-scale:1.075; }
:root[data-text-size="xl"]  { --text-scale:1.3;  --head-scale:1.15; }
:root[data-text-size="xxl"] { --text-scale:1.5;  --head-scale:1.25; }
:root[data-text-size="max"] { --text-scale:2;    --head-scale:1.5; }

/* 어두운 화면(자동). 강제로 밝게: <html data-theme="light"> */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --brand:#6FD0A0; --on-brand:#0B1A12; --brand-subtle:#16301F; --on-brand-subtle:#BFEBD2;
  --bg:#121513; --surface:#1B1F1D; --surface-2:#262B28;
  --text:#ECF0EE; --text-muted:#A5AFA9; --text-placeholder:#9AA49F; --text-disabled:#6B7570;
  --border:#333936; --border-strong:#8A948F; --link:#8AB4FF; --focus:#8AB4FF;
  --danger:#F2B8B5; --on-danger:#3A0B08; --danger-subtle:#3A1B19; --success:#7FD6A6; --success-subtle:#16301F;
  --warning:#F0C46A; --warning-subtle:#3A2F12; --info:#8AB4FF; --info-subtle:#1B2A44; } }
/* 대비 높이기를 켠 사용자: 선과 연한 글을 진하게 */
@media (prefers-contrast:more){ :root{ --border:var(--border-strong); --text-muted:var(--text); --text-placeholder:var(--text-muted); } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

html{ font-size:100%; -webkit-text-size-adjust:100%; }   /* 100% = 브라우저·OS 글자 크기 설정을 따름(px 로 고정하지 말 것) */
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-ui);
      letter-spacing:var(--ls-body); word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3{ letter-spacing:var(--ls-heading); margin:0 0 var(--s-3); text-wrap:balance; }   /* 제목은 줄 길이를 고르게 */
p,li,.help{ text-wrap:pretty; }   /* 끝줄에 낱말 하나만 남거나 한 글자가 매달리는 것을 브라우저가 줄여 줌 */
p{ margin:0 0 var(--gap-para); }
.read{ max-width:var(--measure); line-height:var(--lh-read); }       /* 긴 글 */
.num{ font-variant-numeric:tabular-nums; }                          /* 가격·시간·표의 숫자 */
img,svg,video{ max-width:100%; display:block; }
:focus-visible{ outline:var(--focus-ring) solid var(--focus); outline-offset:2px; }