/* ══════════════════════════════════════════════════════════════════════════
   STOREY 골격 × KEYSTONE 타이포 — 이식본 v2 (2026-08-17)

   무엇인가: storeyarchitecture.co.uk 역설계본(design-systems/reference/storey-2026/)에서
   **기하·간격·모션만** 가져오고, **타이포와 색은 KEYSTONE 정본**을 쓰는 레이어다.
   색은 한 줄도 선언하지 않는다 — keystone/tokens.css 의 --ks-* 를 그대로 소비한다
   (METHODOLOGY §0 "값은 링크한다, 다시 쓰지 않는다").

   로드 순서: keystone/tokens.css → 이 파일.

   ── v1 → v2 변경: 타이포를 STOREY vw 스케일 → KEYSTONE px/clamp 로 되돌렸다 ──
   v1 의 vw 전면 타이포는 KEYSTONE 대표 지정 절대 룰 3개를 위반하고 있었다.

     ① 최소 사이즈 절대 룰 (10pt = 13.33px 하한, 본문 ≥ 12pt = 16px)
        → vw 라벨(1.1vw)이 1024px 에서 11.3px, 768px 에서 8.4px 로 붕괴
     ② 자간 절대 룰 (영문 UPPERCASE 라벨·워드마크·페이지번호 = 자간 0)
        → -0.03em 지정. 한글은 "0 또는 음수"라 -0.02em 은 적법하나 영문은 위반
     ③ 본문 22px 이하 (에디토리얼 밀도)
        → 1.45vw 가 1920px 에서 27.8px

   셋 다 뿌리가 같다: **vw 는 하한도 상한도 없다.** 터치 타깃이 768 에서 27px 로
   내려앉은 것과 정확히 같은 고장이다. KEYSTONE 의 px/clamp 는 바닥과 천장을
   동시에 박아 이 고장을 구조적으로 막는다.

   부수 효과: 모바일 타입 오버라이드 블록이 통째로 사라졌다. clamp 가 그 일을 한다.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════════════════
     팔레트 — Planshare 레퍼런스 컬러 시스템 (2026-08-17 지정)

     ⚠️ **정본 교체가 아니다.** `design-systems/keystone/tokens.json` 은 무수정이며,
     이 팔레트는 **이 시안 폴더 안에서만** 산다. 그래서 `--ks-*` 이름을 빼앗지 않고
     `--c-*` 라는 별도 네임스페이스를 쓴다 — `var(--ks-black)` 이 검정이 아닌 상태를
     만들면 다음 사람이 반드시 속는다.

     지정된 8색:
       #FFFFFF · #F2F2F2 · #F0F5FE · #ECF3FF · #2459C1 · #232121 · #AEAEAE · #C2C2C2
       (잉크만 지정 팔레트의 #333131 대신 #232121 — 2026-08-17 별도 지정)

     KEYSTONE 정본과의 차이는 사실상 3개다(나머지는 1~4 단위 차이):
       · 잉크    #000000 → **#232121**  순검정이 아닌 소프트 차콜 (지정 팔레트 #333131 에서 한 단 더 깊게)
       · 액센트  #3971D1 → **#2459C1**  더 깊은 블루
       · 면      #F7F7F7 → **#F2F2F2**
     ══════════════════════════════════════════════════════════════════════ */
  --c-canvas:   #FFFFFF;   /* 기본 배경 · 다크 면 텍스트 */
  --c-surface:  #F2F2F2;   /* 연회색 면 — 폼 종이·호버 면 */
  --c-tint:     #F0F5FE;   /* 블루 틴트 (연) */
  --c-tint-mid: #ECF3FF;   /* 블루 틴트 (중) */
  --c-tint-deep:#C1C8D6;   /* 블루 틴트 (진) — 2026-08-17 지정. 03 METHOD 면 */
  --c-accent:   #2459C1;   /* 액센트 블루 */
  --c-ink:      #232121;   /* 잉크 — 본문·다크 면 배경 (2026-08-17 지정: #333131 → #232121) */
  --c-muted:    #AEAEAE;   /* 3차 텍스트 · 메타 */
  --c-line:     #C2C2C2;   /* 헤어라인 */

  /* 파생 역할 — **팔레트 밖 hex 를 새로 만들지 않기 위해** color-mix 로 유도한다.
     (METHODOLOGY §0: 토큰이 역할을 못 덮으면 사람이 hex 를 만든다 → 그걸 막는다) */
  --c-body:         color-mix(in srgb, var(--c-ink) 74%, var(--c-canvas));   /* 본문 보조 */
  --c-body-strong:  color-mix(in srgb, var(--c-ink) 88%, var(--c-canvas));   /* 본문 보조 — 진한 단 */
  --c-body-on-dark: var(--c-line);                                           /* 다크 면 본문 */
  --c-line-on-dark: color-mix(in srgb, var(--c-canvas) 16%, var(--c-ink));   /* 다크 면 헤어라인 */
  --c-track:        color-mix(in srgb, var(--c-canvas) 30%, transparent);    /* 진행바 비활성 */
  /* 다크 면 위의 액센트. 원색 #2459C1 은 잉크(#232121) 위에서 대비가 2.5:1 밖에 안 나와
     10px 라벨이 읽히지 않는다. 흰색을 섞어 6:1 대로 올린 같은 계열 블루. */
  --c-accent-on-dark: color-mix(in srgb, var(--c-accent) 55%, var(--c-canvas));

  /* ══ 기하 · 간격 — STOREY (실측 그대로) ═════════════════════════════ */
  /* 상한 30px 확정 (2026-08-17). 1.3889vw 는 2160px 에서 30px 에 닿고 그 위로는 고정된다.
     **margin 과 gutter 를 같이 올린다** — 둘이 같은 값인 것이 STOREY 의 시그니처이고
     (화면 가장자리 = 그리드의 0번째 거터), 한쪽만 올리면 그 관계가 깨진다. */
  --sty-margin: clamp(16px, 1.3889vw, 30px);  /* STOREY 실측 1.3889vw(=20px@1440) + 바닥·천장 */
  --sty-gutter: clamp(16px, 1.3889vw, 30px);  /* margin 과 동일값 — 화면 가장자리가 0번째 거터 */
  --sty-cols: 12;

  /* 본문 문단 폭 상한. STOREY 는 max-width 가 없어 4K 에서 본문이 무한정 넓어진다.
     한글 본문의 가독 구간은 **25~35자/줄** — 그 위로 가면 다음 줄 첫 글자를 못 찾는다.
     34em ≈ 34자. **그리드는 full-bleed 유지** — 거기가 시그니처다. */
  --sty-measure: 34em;

  /* ── 수직 리듬 ── 여백도 clamp 로 ────────────────────────────────────
     v2 에서 타입만 clamp 로 바꿨더니 **타입과 여백이 서로 다른 축**이 됐다.
     타입은 바닥·천장이 생겼는데 여백은 vw 라 계속 커진다 — 실측 결과
     섹션패딩÷본문 비율이 768 에서 2.9배, 1920 에서 6.8배로 벌어졌다.
     같은 화면인데 위는 조밀하고 아래는 헐렁해지는 원인이 이것이다. 축을 맞춘다. */
  --sty-sec:   clamp(56px, 6vw,   104px);  /* 섹션 상하 */
  --sty-block: clamp(32px, 4.6vw,  72px);  /* 블록 간 (3단계·카드군) */
  --sty-row:   clamp(18px, 2.2vw,  34px);  /* 행 패딩 (프로그램·FAQ) */
  --sty-item:  clamp(14px, 1.6vw,  24px);  /* 항목 패딩 (REFS·리스트) */
  /* 원형 번호 배지(34px) + 배지~텍스트 간격. 02 섹션 항목 텍스트의 좌측 기준선이며,
     각 섹션 서브 카피도 이 선에 맞춰 세운다. */
  --sty-badge-offset: calc(34px + var(--sty-item) * .7);

  /* ══ 형태 — STOREY (전 요소 0 · 예외 없음) ══════════════════════════ */
  --sty-radius: 0;
  --sty-shadow: none;
  --sty-hairline: 1px;

  /* ══ 모션 — STOREY (3단 · Tailwind 기본 이징 2종) ═══════════════════ */
  --sty-dur-fast: .2s;
  --sty-dur-base: .3s;
  --sty-dur-slow: .5s;
  --sty-ease-out: cubic-bezier(0, 0, .2, 1);
  --sty-ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ══════════════════════════════════════════════════════════════════════
     타이포 — KEYSTONE 정본 (Editorial Light v2.0)

     근거 2곳:
       · 값·역할·하한  = design-systems/keystone/keystone.design.md §3.3 / §3.4 + 절대 룰
       · clamp 웹 형식 = 캠페인디렉터/2026-08-17_홈_시안_v2.html 실측 (이전 키스톤 버전)
     design.md 스케일은 1920×1080 슬라이드 캔버스 기준이라, 웹은 시안이 확립한
     clamp(하한, vw, 상한) 형식으로 옮긴다. **하한은 절대 룰 값을 그대로 박는다.**
     ══════════════════════════════════════════════════════════════════════ */

  /* ── 크기 ────────────────────────────────────────────────────────────
     하한이 전부 13.33px 이상이다. 이게 vw 스케일과의 결정적 차이다. */
  --ks-w-chrome:      13.33px;                    /* 10pt 고정 — 푸터·페이지번호·미세 메타 */
  /* 이전 시안(홈_시안_v2)은 라벨을 13px 로 썼으나, 그 값이 **절대 룰(전체 최소 10pt =
     13.33px)을 0.33px 밑돈다.** 시안 실측과 대표 직접 지정 룰이 충돌하면 룰이 이긴다 —
     육안 차이는 없고, 하한을 지키면 이 시스템에 13.33px 미만이 존재하지 않게 된다. */
  --ks-w-label:       13.33px;                    /* EN UPPERCASE 라벨·버튼 */
  /* GNB 전용 12px (2026-08-17 지정). design.md 의 "전체 최소 10pt(=13.33px)" 절대 룰과
     어긋나 보이지만 그 룰은 **PPT 1920 캔버스 좌표계** 기준이고, 웹 크롬은 다른 축이다.
     실제로 이전 키스톤 웹 버전(홈_시안_v2.html)의 GNB 로고·메뉴도 12px 이었다.
     본문 하한 16px 은 그대로 지킨다 — 12px 은 GNB 한정. */
  --ks-w-gnb:         12px;                       /* GNB 로고 · 메뉴 통일 */
  /* 숫자·영문 라벨 전용 10px (2026-08-17 지정). 12px GNB 와 같은 성격의 예외다 —
     design.md 의 10pt 하한은 PPT 캔버스 좌표계 기준이고, 여기는 **숫자와 라틴 대문자만**
     담는 마이크로 라벨이라 한글 판독 문제가 없다. 한글 본문 하한 16px 은 그대로. */
  --ks-w-micro:       10px;                       /* 섹션 번호 · EN 라벨 */
  --ks-w-sub:         14px;                       /* 섹션 서브카피 — 본문보다 한 단 아래 */
  --ks-w-body:        clamp(16px, 1.15vw, 17px);  /* 본문 — 하한 16px(12pt), 상한 22px 이하 */
  --ks-w-card-title:  clamp(18px, 1.5vw, 22px);   /* design.md Card Title 24–28 @1920 */
  --ks-w-subtitle:    clamp(22px, 2vw, 28px);     /* design.md Subtitle 26–28 · 시안 실측 */
  --ks-w-title:       clamp(24px, 2.4vw, 34px);   /* 섹션 헤드 — 4컬럼(453px@1440) 레일에 맞춘 상한 */
  --ks-w-display-kr:  clamp(30px, 4.2vw, 54px);   /* 한글 디스플레이 — 시안 h1 실측, 상한 54px */
  --ks-w-display-en:  clamp(38px, 5.6vw, 84px);   /* 영문 디스플레이 — Cover Display EN 120–140@1920 환산 */
  --ks-w-chapter-num: clamp(64px, 9vw, 132px);    /* 챕터 번호 — Chapter Number 300–360@1920 환산 */

  /* ── line-height (design.md §3.3 그대로) ────────────────────────────── */
  --ks-w-lh-label:      1.0;
  --ks-w-lh-chapter:    .95;
  --ks-w-lh-display-en: 1.05;
  --ks-w-lh-display-kr: 1.15;
  --ks-w-lh-title:      1.2;
  --ks-w-lh-subtitle:   1.4;
  --ks-w-lh-body:       1.8;    /* 웹 시안 실측 — 슬라이드 1.55 보다 넉넉하게 */

  /* ── 자간 (§3.3 자간 절대 룰 · 김미성 대표 직접 지정) ────────────────
     영문은 0. UPPERCASE 라벨·워드마크·페이지번호·데이터 라벨 전부 0이며 양수는 금지다.
     한글은 "0 또는 음수" — 본문 0, 헤딩만 -0.02em(시안 실측). */
  --ks-w-track-en:         0;
  --ks-w-track-kr:         0;
  --ks-w-track-kr-display: -0.02em;

  /* ══ 액센트 스위치 ── ✅ 2026-08-17 확정: A안 = 액센트 0 ═══════════════
     STOREY 는 액센트 컬러가 0개다. 화면의 유일한 채도가 사진이라
     어떤 프로젝트 이미지와도 충돌하지 않는다 — 그게 이 시스템의 조용함의 절반이다.
     KEYSTONE 은 Blue(#3971D1)를 유일 크로매틱으로 쓴다. 둘은 양립하지 않는다.

     **대표 결정(A안): 이 시안은 STOREY 순정으로 간다 — 액센트 0.**
     따라서 KEYSTONE "유일 크로매틱" 정책은 이 시안에 한해 적용하지 않는다.
     정본(design-systems/keystone/tokens.json)은 건드리지 않았다 — 여기서만 끈다.

     되돌릴 일이 생기면 아래 한 줄만 바꾼다. 재조립 불필요.
     소비 지점은 측정 3단계의 챕터 번호 1개소뿐이라 스위치가 화면을 흔들지 않는다.

     ⚠️ **2026-08-17 D1 뒤집힘.** Planshare 컬러 시스템 지정이 들어왔고, 그 팔레트는
     "Blue was chosen for the accent color" 를 자기 중심에 놓는다. 액센트 0 을 유지하면
     지정된 시스템의 절반만 적용하는 셈이라 액센트를 살렸다.
     액센트 0 으로 되돌리려면: var(--c-ink) */
  --sty-accent: var(--c-accent);   /* ← 팔레트 액센트. 액센트 0 복귀 시: var(--c-ink) */
}

/* ── 레이아웃 브레이크포인트 ── 640 → **1024** (v2 가독성 감사에서 이동) ──
   STOREY 는 브레이크포인트가 640 하나뿐이다. 그 값을 그대로 쓰면 641~1024 구간이
   12컬럼을 유지하는데, 본문 블록이 span 4 로 눌려 **15자/줄**까지 좁아진다(768 실측).
   한글이 그 폭이면 두 어절마다 줄이 꺾여 읽기가 급격히 나빠진다.
   브레이크포인트 **개수는 그대로 1개** — 값만 1024 로 옮겨 태블릿을 6컬럼 쪽에 붙였다. */
@media (max-width: 1024px) {
  :root {
    --sty-cols: 6;
    /* 타입·measure 오버라이드 없음.
       · 타입은 clamp 가 하한까지 책임진다 (v1 의 5줄짜리 모바일 타입 블록 = vw 의 부채).
       · measure 를 여기서 none 으로 껐더니 768 에서 본문이 **46자/줄**로 튀었다.
         6컬럼 전폭이 34em 보다 넓기 때문이다. 상한은 전 구간에서 유지한다 —
         화면이 34em 보다 좁으면 어차피 화면이 이긴다. */
  }
}

/* ── 그리드 프리미티브 (STOREY .layout-grid 원문 그대로) ──────────────── */
.sty-grid {
  display: grid;
  align-content: start;   /* 남는 세로 공간을 트랙에 분배하지 않는다 — 섹션 하단 여백이 튀는 원인 */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sty-gutter);
  padding-inline: var(--sty-margin);
}
@media (max-width: 1024px) {
  .sty-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}