/* ============================================================
   designpaca 소개 페이지 — 디자인 토큰
   프리셋: dark-instrument  ·  컨셉: 검사대 위의 물체

   다크를 "멋있어서" 고르지 않았다. 제품이 CLI 이고 사용자가 이
   화면을 터미널 옆에 두고 본다. 프리셋이 요구하는 근거다.

   유리는 액자에만 쓴다. 액자 안은 3D, 액자 밖은 글자 —
   R2(lusion.co) 실측에서 가져온 원리다. 둘을 겹치면 3D 는 얼룩이
   되고 글자는 대비를 잃는다. 실제로 한 번 그렇게 만들었다.

   전체 결정 근거는 design.md.
   ============================================================ */

:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-size: 0.9375em;

  /* ---- 바탕: 잉크. 순흑이 아니다 --------------------------- */
  --surface:        #0B0E12;
  --surface-raised: #11151B;
  --surface-sunken: #070A0D;
  /* 밝은 밴드 하나. 규칙으로 정의된 반전이다 */
  --surface-inverse: #F4F2EC;

  --ink:               #ECEFF2;  /* 15.9:1 */
  --ink-muted:         #98A2AE;  /* 7.1:1 */
  --ink-inverse:       #14181E;
  --ink-muted-inverse: #565E68;

  --line:        #222932;
  --line-strong: #39424E;
  --line-inverse: #D8D4CA;

  /* 강조: 시안 틸. 유리 너머에서도 살아남는 채도 */
  --accent:             #4FD6C4;  /* 잉크 위 10.4:1 */
  --accent-ink:         #04211D;
  --accent-inverse:     #0E7A6E;
  --accent-ink-inverse: #FFFFFF;
  /* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다.
     보라기를 뺐다 — #6E7BFF 는 R 이 높아 보라-파랑으로 읽히고,
     그것이 antipatterns.md 의 슬롭 지문이자 dark-instrument 가
     "어두운 배경일수록 빠지기 쉬운 함정"으로 지목한 색이다. */
  --glow-2: #3D7BD6;

  /* ---- 유리 ------------------------------------------------
     유리는 액자에만 쓴다. 헤더 · 검사대 프레임 · 게이트 배지.
     콘텐츠 카드에는 쓰지 않는다 — 유리는 무언가를 담을 때만
     의미가 있고, 아무 데나 바르면 그냥 반투명한 상자다.
     (R2 lusion.co 실측: 3D 를 액자에 가두고 텍스트는 액자 밖에 둔다) */
  --glass-tint:   rgb(255 255 255 / 0.045);
  --glass-tint-2: rgb(255 255 255 / 0.085);
  --glass-edge:   rgb(255 255 255 / 0.14);
  --glass-blur:   22px;
  --glass-sat:    150%;
  /* 안쪽 위 모서리에 닿는 빛. 유리 두께를 만든다 */
  --glass-hi:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 0 rgb(255 255 255 / 0.05);
  /* 표면 반사와 테두리 광. 값이 아니라 토큰으로 둬야 밝은 밴드에서
     같은 자리를 뒤집을 수 있다 (하드 게이트 #1) */
  --glass-sheen: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.10) 0%,
    rgb(255 255 255 / 0.02) 22%,
    transparent 55%
  );
  /* 테두리 광.
     conic-gradient 를 쓰면 납작한 형태(예: 1180x54 헤더)에서 각도가 급변해
     변마다 광이 뚝 끊긴다 — 실제로 헤더 아래쪽만 절반 밝았다.
     선형으로 바꾸면 네 변이 같은 그라디언트를 공유해 테두리를 따라 이어진다. */
  --glass-rim: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.34) 0%,
    rgb(255 255 255 / 0.10) 26%,
    rgb(255 255 255 / 0.06) 58%,
    rgb(255 255 255 / 0.28) 100%
  );
  /* 테두리에서 아주 얕게 번지는 빛. 강조색을 실어 유리가 차갑게만 보이지 않게 한다 */
  --glass-bloom: 0 0 22px -8px color-mix(in oklab, var(--accent) 42%, transparent);
  --core-hi: inset 0 1px 0 rgb(255 255 255 / 0.06);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
  --shadow-3: 0 6px 16px rgb(0 0 0 / 0.45), 0 32px 80px rgb(0 0 0 / 0.6);
  --inset-hi: var(--glass-hi);

  /* ---- 형태 ------------------------------------------------
     두 종류뿐이다. 하드 게이트 #3 은 3종부터 실패로 본다.

     3px  — 요소. R1 zed.dev 실측에서 border-radius 2px 가 621회로
            압도적이었다. 개발자 도구는 각져야 정밀해 보인다
     14px — 액자. R2 lusion.co 가 3D 캔버스를 감싼 값이 15px 이다

     pill(999px) 을 없앴다. 계기판에 알약은 없다. */
  --radius-sm: 3px;
  --radius-frame: 14px;

  /* ---- 웨이트 ----------------------------------------------
     세 개뿐이다. 코드 곳곳에 500·560·600·620·660 이 흩어져 있었고
     그것이 이 페이지의 SSOT 가 깨진 가장 큰 자리였다.

     R1(zed.dev) 모바일 실측: font-weight 400 이 832회, 나머지 전부 합쳐 12회다.
     위계를 웨이트로 만들지 않는다 — 크기와 색으로 만든다.
     가변폰트는 660 같은 중간값도 그려주지만, 표준 축(400/500/600)을 벗어나면
     힌팅이 흐려지고 폴백 폰트에서는 아예 다른 굵기로 떨어진다. */
  --weight-body:   400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* ---- 컨트롤 ----------------------------------------------
     버튼처럼 생긴 것은 전부 이 값을 쓴다. 예외를 만들지 마라.
     R1 실측: Download / Clone 두 버튼이 h36·pad-x10·r4·w400·14px 로
     픽셀 단위까지 같았다. 우리는 높이도 패딩도 웨이트도 제각각이었다. */
  --control-h:     2.75rem;      /* 44px — 터치 타깃 */
  --control-h-sm:  2.25rem;      /* 36px — 헤더 등 조밀한 자리 */
  --control-pad-x: var(--space-3);

  /* ---- 간격 ------------------------------------------------
     작은 값은 고정, 큰 값만 화면에 반응한다.
     고정으로 두면 모바일에서 섹션 상하 112px 이 그대로 들어가
     화면 높이의 26% 를 여백이 먹는다. 실제로 그랬다. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --space-6: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  --space-7: clamp(3.5rem, 1.9rem + 4.6vw, 7rem);
  --space-8: clamp(5rem, 2.6rem + 6.8vw, 10rem);

  /* 좌우 여백. R1(zed.dev) 모바일 실측이 32px 이었다 — 우리는 24px 였다.
     모바일 전 구간 32px 을 깔고 넓은 화면에서만 40px 까지 연다. */
  --gutter: clamp(2rem, 1.4rem + 1.8vw, 2.5rem);

  /* 배경 격자의 한 칸. 간격 스케일에서 가져온다 —
     장식용 격자가 아니라 이 페이지가 실제로 쓰는 눈금이어야
     "모든 값이 토큰에서 나온다"는 주장이 배경에서도 성립한다. */
  --grid-cell: var(--space-6);

  /* main 칼럼 바깥의 여유 폭(wide 트랙). 넓은 화면에서 제목과 넓은 블록이
     본문보다 밖으로 나갈 자리를 만든다.
     이 값을 고정으로 두면 모바일에서도 좌우 80px 씩 살아남아, 390px 화면에서
     본문이 x=112 부터 시작하고 폭이 278px 로 줄어든다 — 제목이 네 줄로 접힌다.
     좁은 화면에서는 0 으로 닫는다. */
  --wide-pad: clamp(0rem, -3.7rem + 15.2vw, 10rem);

  /* 헤더가 차지하는 높이. 떠 있는 헤더라 문서 흐름에서 빠져 있고,
     그래서 히어로 상단 여백과 앵커 목적지가 이 값을 알아야 한다.
     간격 토큰을 clamp 로 바꾸는 순간 이 관계가 끊겨 h1 이 헤더 뒤로
     들어갔다 — 값이 아니라 관계를 토큰으로 둬야 하는 이유다. */
  --header-h: calc(var(--space-3) + var(--space-2) * 2 + var(--control-h-sm));

  /* ---- 모션 ------------------------------------------------ */
  --dur-instant: 120ms;
  --dur-quick:   280ms;
  --dur-normal:  560ms;
  --dur-slow:    900ms;

  --ease-out:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
}

/* ---- 라이트 선호: 유리를 얇게 하고 바탕을 올린다 --------------
   테마를 뒤집지 않는다. 이 페이지는 어두운 유리가 주제다.
   다만 라이트를 쓰는 사람에게 대비를 조금 더 준다. */
@media (prefers-color-scheme: light) {
  :root {
    --surface:        #12161C;
    --surface-raised: #181D25;
    --glass-tint:   rgb(255 255 255 / 0.07);
    --glass-tint-2: rgb(255 255 255 / 0.11);
    --glass-edge:   rgb(255 255 255 / 0.18);
  }
}

/* ---- 타입: 한국어판 --------------------------------------- */
[lang="ko"] {
  --font-sans: "Pretendard Variable", Pretendard,
               "KO Fallback Win", "KO Fallback Mac", system-ui, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.328rem;
  --step-2: 1.660rem;
  --step-3: 2.076rem;
  --step-4: 2.595rem;
  /* 페이지에서 가장 큰 글자. 히어로가 아니라 수치 섹션이 쓴다 —
     히어로의 힘은 타이포가 아니라 검사대 액자에서 나온다 */
  --display: clamp(3rem, 1.2rem + 7.2vw, 7rem);

  --leading-tight:  1.06;
  --leading-normal: 1.7;
  --measure: 33em;

  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.08em;

  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---- 타입: 영어판 ------------------------------------------ */
[lang="en"] {
  --font-sans: "Switzer", "EN Fallback", system-ui, -apple-system, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --display: clamp(2.8rem, 1rem + 7vw, 6.6rem);

  --leading-tight:  0.98;
  --leading-normal: 1.55;
  --measure: 65ch;

  --tracking-display: -0.04em;
  --tracking-body: 0;
  --tracking-label: 0.08em;
}

/* ---- 밝은 밴드: 규칙으로 정의된 단 한 번의 반전 --------------
   사용처는 조판 섹션 하나뿐이다. 한글이 종이 위에 있어야 하는
   주장을 하는 자리라 거기서만 바탕이 밝아진다. */
.band-inverse {
  --surface:       var(--surface-inverse);
  --surface-raised: #ECE8DE;
  --surface-sunken: #E2DED3;
  --ink:           var(--ink-inverse);
  --ink-muted:     var(--ink-muted-inverse);
  --line:          var(--line-inverse);
  --line-strong:   var(--ink-muted-inverse);
  --accent:        var(--accent-inverse);
  --accent-ink:    var(--accent-ink-inverse);
  --glass-tint:   rgb(20 24 30 / 0.04);
  --glass-tint-2: rgb(20 24 30 / 0.07);
  --glass-edge:   rgb(20 24 30 / 0.12);
  --glass-hi:     inset 0 1px 0 rgb(255 255 255 / 0.8);
  --inset-hi:     var(--glass-hi);
  /* 밝은 밴드에서는 테두리 광의 방향이 뒤집힌다. 흰빛 대신 그림자로 이어붙인다 */
  --glass-rim: linear-gradient(
    100deg,
    rgb(20 24 30 / 0.16) 0%,
    rgb(20 24 30 / 0.05) 26%,
    rgb(20 24 30 / 0.04) 58%,
    rgb(20 24 30 / 0.14) 100%
  );
  --glass-bloom: 0 0 18px -10px color-mix(in oklab, var(--ink) 30%, transparent);
  background: var(--surface);
  color: var(--ink);
}
