/* ============================================================================
   Tracer 웹사이트 — 규칙 & 스타일 토큰 (단일 소스)
   ----------------------------------------------------------------------------
   이 파일이 /tracer 사이트의 모든 디자인 값의 기준입니다.
   여기 값을 바꾸면 tracer.css / guide.js 가 전부 따라갑니다.
   /tracer 는 nmuxlab 홈과 CSS를 공유하지 않습니다. (별도 사이트로 취급)

   단위 규칙
   - 1rem = 디자인 10px.  예) 24px → 2.4rem, 17px → 1.7rem
   - 뷰포트가 (콘텐츠 1200 + 좌우 마진) 보다 좁아지면 html font-size가 vw에
     비례해 줄어들어, rem 으로 적은 모든 값이 이미지처럼 비율 축소됨.
   - 거터·마진처럼 "고정 픽셀"이어야 하는 값만 px 로 적음.

   반응형 계획 (PC 완료 후 진행 — 지금은 PC 기준만 구현)
   - ≥ 1264   : 고정. 1rem = 10px, 콘텐츠 1200px
   - 1264~1024: 비율 축소 (rem 스케일)
   - ~1024    : 태블릿 최적화 지점 (--bp-tablet)
   - ~640     : 모바일 최적화 지점 (--bp-mobile) — 세로 태블릿보다 좁은 모든 화면

   로컬 확인
   - 배포 루트는 public/ 이므로 로컬 서버도 public/ 에서 띄울 것
     예) cd public && python3 -m http.server 3000  → http://127.0.0.1:3000/tracer/
   - YouTube 모달은 file:// 로 열면 Referer 가 없어 "Error 153" 이 남 → 반드시 http 로 띄워 확인
   - tracer 폴더 안 자산은 상대경로라 리포 루트에서 띄워도(/public/tracer/) 동작하지만,
     /favicon.svg, /privacy.html, /locale.js 같은 루트 자산은 public/ 루트에서만 보임

   다국어 길이 규칙 (레이아웃 작업 시 항상)
   - 같은 문구도 언어마다 길이가 크게 다름 (독일어·핀란드어는 영문보다 30~40% 길고, 한·중·일은 짧음)
   - 고정 폭·고정 높이·nowrap 은 피하고, 길어지면 자연스럽게 줄바꿈·확장되는 구조로 만들 것
     예) 버튼은 height 대신 min-height + 패딩, 라벨 열은 고정폭 대신 minmax(최소, max-content)
   - 제목은 넘칠 때 균형 잡힌 2줄로 떨어지게(text-wrap: balance) 하고, 긴 합성어는 hyphens: auto 로 대비
   - 카드·그리드처럼 여러 개가 나란히 있는 요소는 가장 긴 언어 기준으로 높이가 서로 맞는지 확인 (align-items: stretch)
   - 절대 1줄이어야 하는 문구는 nowrap 대신 폭 여유(최소 20%)를 확보하고, 넘치면 줄바꿈되게 둘 것

   간격 규칙
   - 그룹을 나누는 여백은 그룹 안 아이템 간격보다 커야 함 (근접성). 섹션 인트로 ↔ 첫 아이템 여백 ≥ 아이템 간격

   가운데 정렬 규칙
   - text-align: center 컨테이너 안에서 max-width 를 가진 블록은 반드시 margin-inline: auto 도 함께 줄 것
     (안 주면 박스가 왼쪽에 붙고 글자만 박스 안에서 가운데 → 왼쪽으로 쏠려 보임)
   - 그래서 전역 p max-width 는 두지 않고, 필요할 때만 .measure 사용

   가이드 오버레이
   - 키보드 `g` 로 토글 (입력창 포커스 중엔 무시). localStorage 에 상태 기억.
   - URL 에 ?guide=1 붙이면 강제 표시 (스크린샷 검증용)
   - 콘텐츠 위에 그려지지만 pointer-events: none 이라 클릭은 통과.

   영상 호스팅
   - 영상(MP4)은 Cloudflare R2 → https://media.nmuxlab.com/tracer/… 로 서빙 (Netlify 에 올리지 않음)
   - 히어로: media.nmuxlab.com/tracer/hero.mp4  (원본 ~/workspace/temp/tracer-hero.mp4, 1280x720 24fps 무음 606KB)
   - 포스터 이미지(JPG)는 용량이 작아 사이트에 포함: public/tracer/hero-poster.jpg
   - 인코딩: ffmpeg -ss 0 -t 11.3 -i src.mp4 -an -c:v libx264 -profile:v high -preset slow -crf 30
             -vf "scale=1280:-2,fps=24" -pix_fmt yuv420p -movflags +faststart out.mp4

   페이지 내 이동
   - 메뉴·버튼의 페이지 내 이동은 #해시 앵커를 쓰지 않음 (새로고침 때 그 위치로 튀는 것 방지)
     → a[data-scroll="섹션id"] 를 site.js 가 가로채 --scroll-duration 동안 ease-out 으로 이동. URL 은 바뀌지 않음
   - 링크 대상이 아직 없는 버튼은 data-todo (클릭 무시)
   - Download 버튼(a[data-appstore]) 은 Mac App Store id6785940416. apps.apple.com 은 국가 코드 없으면 무조건 /us/ 라서
     site.js 가 브라우저 언어·지역(ko-KR → /kr/, ja → /jp/ …)으로 스토어프런트를 골라 href 를 바꿈. 새 탭으로 열림

   헤더
   - 히어로 위에서는 투명(흰 글자). 헤더의 세로 중앙이 히어로 하단 라인을 지나는 순간 .nav--solid (배경 채움)
   - 헤더 치수는 전부 고정 px (--nav-*). rem 스케일 구간에서도 높이·로고·메뉴 크기 유지
   - 메뉴: Home / Features / FAQ / Contact / [EN ▾ 언어] / [Download 버튼]
   - 언어 선택은 헤더(되돌릴 수단이 눈에 띄어야 함) + 푸터 텍스트 링크. 링크에 data-lang → 선택 기억
   - 브랜드 페이지(nmuxlab.com) 이동은 푸터 NM UX Lab. 로고 링크로

   피처 섹션
   - 텍스트 5컬럼 + 빈 1컬럼 + 미디어 6컬럼, 홀수 행은 텍스트 왼쪽 / 짝수 행은 미디어 왼쪽 (CSS nth-child 로 자동)
     3:10) 박스. 포스터(f-<슬러그>-poster.jpg)를 먼저 보여주고 영상이 준비되면 바꿔 끼웁니다
   - 영상 준비되면 <video> 에 data-src="https://media.nmuxlab.com/tracer/f-<slug>.mp4" 만 추가하면 site.js 가 로드
   - 카피 원문(한글, 단일 소스): docs/tracer-structure.txt — 이 파일이 바뀌면 index.html 영문을 번역해 반영
   - 언어별 문구: docs/tracer-copy.txt (키 단위, 9개 언어). 값이 빈 언어는 영어(en)로 대체
   - App Store 버튼은 Apple 공식 배지(badge-mac-app-store.svg)를 원본 그대로 사용.
     직접 만든 버튼으로 대체하거나 색·비율·문구를 바꾸지 말 것.
     언어와 무관하게 영문 배지 하나를 씁니다 — 한국어·일본어 배지는 어순 때문에 스토어 이름이 위로 가는
     낯선 형태라, 국내외 사이트 대부분이 영문 배지를 씁니다. alt 는 페이지 언어로 씁니다.
     현지화 배지가 필요해지면: https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/<로케일>?size=250x83
   - 공유 이미지: public/tracer/og.png (1200x630, 다크 + 아이콘 + 도형 패턴). 텍스트가 없어 모든 언어가 공유.
     시안 소스는 ~/workspace/temp/og-*.html (밝은 버전·격자 버전·텍스트 버전 등)
   - 언어별 페이지는 /tracer/ 의 CSS·JS·이미지를 그대로 참조(../../tracer/…). 스타일은 복제하지 않음
   - 한글 등 라틴이 아닌 문자는 같은 굵기라도 가늘어 보임 → 한글 페이지는 Pretendard 웹폰트를 얹어 맞춤.
     그래도 얇으면 tracer.css 의 html[lang="ko"] .t-h3 등에서 font-weight 숫자만 올릴 것
   - 제목 클래스 이름은 HTML 태그와 일치시킬 것 (.t-h2 는 <h2> 에만). 이 스케일을 안 쓰는 제목은 t-* 를 붙이지 않음
   - 토큰은 "두 곳 이상에서 쓰이거나 JS 가 읽는 값"만 둡니다. 한 곳에서만 쓰는 값은 tracer.css 에 숫자로 직접 적어
     DevTools 에서 바로 읽히게 합니다 (var() 를 따라가지 않아도 되도록)
   - 주요 피처: 미디어 오른쪽 아래 "▶ Watch the video" 작은 버튼(.feature__play, data-youtube). 호버 시 하이라이트 색.
     인라인 영상 시청을 가리지 않도록 딤·가운데 재생 아이콘 없음. 영상 없는 피처는 이 버튼만 빼면 됨
   - 피처 칩(.feature__chips): 하위 기능을 문단 아래 알약형 <ul> 로 나열. 아이콘 없이 텍스트만 —
     바로 아래 서브 피처 카드(아이콘+제목+설명)와 질감이 겹치지 않게. flex-wrap 이라 항목 수·언어가 바뀌어도 안전
   - 서브 피처: 3열 카드. [영상 <YouTube ID>] 표시된 항목은 "Watch the video" 텍스트 링크 → 같은 모달
   - 모달: YouTube (youtube-nocookie), 클릭 시에만 iframe 생성. 라벨은 "Learn more" 가 아닌 "Watch the video" (영상이 열림을 그대로 말함)
   - 인라인 자동재생 루프(피처 옆)는 R2 MP4 유지 — YouTube 는 무음 자동재생 루프에 부적합. 상세 영상만 YouTube

   FAQ / 앱정보·컨택트
   - FAQ: <details> 아코디언, 8컬럼 가운데. 문구는 더미 (원문 확정 시 교체)
   - 앱정보 6컬럼 + 컨택트폼 6컬럼. 폼은 홈과 같은 Web3Forms 무료 티어(허니팟 + hCaptcha), 액세스 키 공유
   - 앱정보 값 중 미정("—")은 docs/tracer-structure.txt 에서 채우면 반영

   할 일 (TODO)
   - [ ] 앱 "영상 가이드 보기" 영상 확보 → netlify.toml 의 /guide 리다이렉트 주석 해제
         지금은 public/guide/index.html (9개 언어 임시 안내 페이지) 가 대신 뜬다.
         영상이 생기면 리다이렉트 주석을 풀고 public/guide/ 를 지우면 끝
   - [x] 피처 영상 7개 인코딩 → R2 tracer/f-<slug>.mp4 — 완료 (합계 13.8MB)
         피처 프리셋 (14개 변형 비교로 결정): crop=1404:1080:258:0 → scale=1300:1000, fps=30,
           libx264 high / veryslow / CRF 26 / yuv420p / +faststart
   - [x] 히어로 영상 hero-v3.mp4 — 완료. 1440x810 30fps 19.3초 2.40MB (VMAF 96.3)
         만드는 법: origin/1.mp4 를 2.000x, origin/2.mp4 를 2.078x 로 빠르게 (앱스토어판 실측값.
           길이 비율로 계산하면 2번이 2.188 이 나오는데, 잘라낸 뒤 배속한 것이라 5% 느려집니다)
         구간 3개를 0.4초 페이드로 잇습니다. 지정 구간이 완전 불투명하도록 페이드 몫만큼
           앞뒤를 더 잘라야 합니다 — 원본 시간 기준이므로 배속을 곱해서(0.4 x 2.0 = 0.8초).
         루프: 앞 0.4초를 "맨 뒤에" 겹칩니다. 앞에 겹치면 최초 재생에서 끝 장면이 보입니다.
           겹친 뒤 반드시 결과를 정확한 길이로 끊을 것 — xfade 를 거치며 길이가 늘어나
           겹침 구간을 벗어난 프레임이 남으면 마지막에 끝 장면으로 되돌아갑니다.
           페이드인은 마지막 프레임의 alpha 가 1 이 되도록 한 프레임 일찍 끝냅니다.
         만드는 스크립트: /tmp/kv3.sh · 소재: ~/workspace/temp/1/origin/
   - [ ] 배포 후 Google Search Console 에 https://nmuxlab.com/sitemap.xml 제출 — 사람이 직접
   - [!] public/privacy.html(옛 위치)은 지우지 말 것 — App Store 등록 정보가 아직 이 주소를 봅니다.
         다음 심사 제출 때 스토어의 개인정보처리방침 URL 을 /tracer/privacy.html 로 바꾸고,
         그 뒤에야 netlify.toml 에 /privacy.html → /tracer/privacy.html 301 을 넣고 파일을 지웁니다.
         지금은 canonical 로 중복 색인만 막아 둔 상태 (내용은 두 파일이 같아야 합니다)
   - [x] 메타데이터 OG / Twitter / canonical / hreflang — 완료
   - [x] JSON-LD (SoftwareApplication) · sitemap.xml · robots.txt — 완료
         언어를 늘릴 때 sitemap.xml 의 <url> 과 xhtml:link 도 함께 늘려야 합니다
   - [x] /kr 한글 버전 — 완료 (Pretendard 웹폰트 + 제목 굵기/크기 보정)
   - [x] 반응형 — 완료. 규칙은 tracer.css 맨 아래 "반응형" 블록 한 곳에 모아 뒀습니다
         1024~1263 은 rem 비례 축소(배치 그대로), 1023 이하부터 배치가 바뀝니다
   - [x] 9개 언어 전개 — 완료. /tracer /kr /jp /cn /tw /fr /de /it /es
         페이지는 docs/build_pages.py 가 한국어 페이지를 틀로 삼아 찍어냅니다.
         마크업을 바꿀 때는 public/kr/tracer/index.html 만 고치고 다시 돌리세요 — 9개가 함께 바뀝니다.
         언어를 늘릴 때 함께 고칠 곳: build_pages.py 의 LOCALES · public/locale.js 의 LANGS · public/sitemap.xml
   - [x] 언어 안내 — 완료. /tracer/ 에 들어온 방문자에게 자기 언어 페이지가 있다고 알리는
         작은 카드만 띄우고, 이동은 방문자가 정합니다. 자동으로 보내지 않습니다 —
         구글이 권하지 않는 방식이고, 공유된 영어 링크를 상대가 못 열게 됩니다 (locale.js 주석 참고)
   - [x] 개인정보 처리방침 — 영문 하나를 전 언어가 공유한다. 번역하지 않기로 확정
   ========================================================================== */

:root {
  /* ---------- 레이아웃 / 그리드 ---------- */
  --content: 120rem;            /* 콘텐츠 최대 너비 1200px (rem 이라 축소 구간에서 함께 줄어듦) */
  --margin: 32px;               /* 화면 가장자리 최소 여백 — 고정 px */
  --cols: 12;                   /* 컬럼 수 */
  --gutter: 24px;               /* 거터 — 고정 px (축소 구간에서도 유지) */
  --bp-fixed: 1264px;           /* = 1200 + 32*2. 이 이상에서 1rem = 10px 고정 */
  --bp-tablet: 1024px;          /* 태블릿 최적화 지점 (반응형 단계에서 사용) */
  --bp-mobile: 640px;           /* 이 이하는 모바일 레이아웃. site.js 도 읽어 히어로 배경 영상을 끔
                                   (배경 장식이라 좁은 화면에선 포스터로 충분하고 데이터도 아낍니다) */

  /* ---------- 색 ---------- */
  --bg: #FFFFFF;                /* 배경 */
  --bg-alt: #F9F9FB;            /* 보조 배경 (섹션 교차·카드) */
  --fg: #1D1D1F;                /* 전경(본문·제목) */
  --fg-secondary: #6E6E73;      /* 보조 텍스트 */
  --fg-tertiary: #747479;      /* 보조 중 가장 옅은 단계. 흰 배경 대비 4.65:1 —
                                  WCAG AA 본문 기준(4.5)을 넘깁니다. 애플이 쓰는 #86868B 는 3.62 로 미달이라 낮췄습니다 */
  --accent: #2472E6;            /* 하이라이트 — Tracer 아이콘 블루에서 추출 */
  --accent-hover: #1A5FD0;
  --divider: rgba(0, 0, 0, 0.10);
  --gradient-start: #022640;    /* 그라디언트 텍스트 (.t-gradient — 섹션 대제목) */
  --gradient-end: #5786AB;
  --gradient-angle: 90deg;
  --hero-fg: #FFFFFF;           /* 히어로 위 텍스트 */
  --hero-fg-secondary: rgba(255, 255, 255, 0.80);
  --guide: rgba(255, 59, 48, 0.10);   /* g 키 가이드 오버레이 채움 */

  /* ---------- 폰트 ---------- */
  /* Apple.com 방식: Apple 기기는 시스템 SF Pro, 그 외 OS 는 Inter(웹폰트)로 대체 */
  /* 라틴 문자 전용 앞머리. 아래 언어별 스택의 맨 앞에 공통으로 들어갑니다.
     여기에 generic(sans-serif)을 넣지 않는 것이 중요합니다 — generic 은 모든 글자를 받아버려서,
     뒤에 오는 CJK 폰트가 영영 쓰이지 않습니다. generic 은 각 스택의 맨 끝에만 둡니다. */
  --font-latin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial;
  --font-sans: var(--font-latin), sans-serif;

  /* 언어별 스택 — 구조는 모두 같습니다: [라틴] → [그 언어의 CJK 폰트] → generic
     라틴을 앞에 두는 이유: CJK 폰트도 알파벳 자형을 갖고 있어서, 앞에 두면 영문까지 그 폰트로
     그려집니다(Windows 에서 Tracer·macOS·GIF 가 유고딕으로 나옴). Apple 도 같은 순서를 씁니다.
     macOS 는 첫 항목 -apple-system 이 lang 속성을 보고 알아서 갈라 줍니다 — 실측 확인:
     ja→Hiragino Sans, zh-Hans→PingFang SC, zh-Hant→PingFang TC. 뒤 항목은 Windows·Linux 용입니다. */

  /* 한국어 — apple.com 한국어는 SF Pro KR 을 웹폰트로 씁니다(Apple 전용). 같은 구조를 만들려고
     Pretendard(SIL OFL)를 얹었습니다. Apple SD Gothic Neo·맑은 고딕은 웹폰트를 못 받았을 때의 대비책. */
  --font-sans-ko: var(--font-latin), "Pretendard Variable", Pretendard,
                  "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* 일본어 — Windows 의 유고딕(Yu Gothic) Regular 는 너무 가늘게 렌더링되는 것으로 알려져 있어,
     일본 웹에서 관례적으로 쓰는 "Yu Gothic Medium" 을 먼저 둡니다. Meiryo 는 구형 Windows 대비. */
  --font-sans-ja: var(--font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                  "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  /* 중국어 — 간체와 번체를 반드시 나눕니다. 같은 한자라도 자형이 달라서(直·骨 등)
     번체 사용자에게 간체 자형을 보여주면 바로 어색함이 드러납니다.
     Windows 기본은 간체 微软雅黑(YaHei), 번체 微軟正黑體(JhengHei) 입니다. */
  --font-sans-zh-hans: var(--font-latin), "PingFang SC", "Hiragino Sans GB",
                       "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-sans-zh-hant: var(--font-latin), "PingFang TC", "Microsoft JhengHei",
                       "Noto Sans TC", sans-serif;

  /* ---------- 본문 타이포 ----------
     제목(.t-h1 / .t-h2 / .t-h3 / .eyebrow)의 크기·행간·자간·굵기는 tracer.css 의
     해당 클래스에 숫자로 직접 적혀 있습니다. 한 곳에서만 쓰는 값이라 토큰으로 두면 확인만 번거로워집니다.
     아래 셋은 여러 곳에서 재사용하므로 토큰으로 유지합니다. */
  --t-intro-size: 2.1rem;       /* 21px  인트로 문단 */
  --t-body-size: 1.7rem;        /* 17px  본문 */
  --t-body-lh: 1.4706;
  --t-body-ls: -0.022em;
  --t-body-w: 400;
  --t-caption-size: 1.2rem;     /* 12px  캡션·작은 버튼 */

  /* ---------- 간격 ---------- */
  --space-section: 12rem;       /* 섹션 상하 여백 120px */
  --space-block: 6.4rem;        /* 섹션 내 블록 간격 64px */
  --space-stack: 2.4rem;        /* 제목-본문 등 세로 스택 24px */
  --radius: 1.2rem;             /* 카드·이미지 모서리 12px */

  /* ---------- 헤더 (전부 고정 px — rem 축소 구간에서도 크기 유지) ---------- */
  --nav-height: 48px;
  --nav-icon-size: 24px;
  --nav-link-size: 12px;
  --nav-btn-height: 28px;

  /* ---------- 피처 섹션 (교차 레이아웃) ---------- */
  --media-ratio: 13 / 10;       /* 피처 영상 비율 */
  --media-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --feature-gap: 20rem;         /* 피처 행 사이 간격 200px */
  --feature-text-cols: 5;       /* 텍스트 컬럼 수 */
  --feature-gap-cols: 1;        /* 텍스트–미디어 사이 빈 컬럼 (1컬럼 + 거터 2개 = 126px) */
  --feature-media-cols: 6;      /* 미디어 컬럼 수  → 5 + 1 + 6 = 12 */
  --sub-icon-size: 4.8rem;      /* 서브 피처 아이콘 원 지름 48px */
  --faq-cols: 8;                /* FAQ 가 차지하는 컬럼 수 */
  --input-border-focus: #2472E6;

  /* ---------- 모션 ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.25s;
  --scroll-duration: 280;       /* 메뉴 클릭 시 스크롤 시간(ms). site.js 가 읽음 */
}