/* KEZ Link — design tokens & global styles
   형제 프로젝트 kezworks-portfolio에서 토큰 유전자 계승(그레이 램프·Paperlogy+Mona·코랄·스프링·바코드/구멍선).
   신규: 다크 테마 · 역할 기반 타입 스케일(display/h1/h2/h3/body/label…) · 중앙 리딩 컬럼 폭.
   SSOT = 이 파일 :root. 스토리북 토큰 표는 token-source.ts가 이 블록을 파싱한다. */

/* ===== WEBFONTS ===== */
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('fonts/Pretendard-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* 장식 mono — Mona(픽셀, 라틴·기호 서브셋). 한글은 스택 다음 Paperlogy로 폴백 */
@font-face{font-family:'Mona';src:url('fonts/Mona10.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Mona';src:url('fonts/Mona10-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
/* ===== PRIMITIVE / color ===== */
--color-white:#FFFFFF;--color-gray-050:#F5F4F9;--color-gray-300:#D9D9D9;--color-gray-500:#A5A5A5;--color-gray-800:#656565;--color-gray-950:#1C1B20;--color-ink-rgb:101,101,101;--color-red-500:#EA5147;
/* ===== PRIMITIVE / font family ===== */
--font-title:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
--font-body:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
--font-sans:var(--font-body);
--font-ticket-body:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
--font-ticket-title:'Paperlogy',-apple-system,BlinkMacSystemFont,sans-serif;
/* Mona는 라틴 전용 서브셋 — 한글 글리프는 Paperlogy가 이어받는다 */
--font-mono:'Mona','Paperlogy',ui-monospace,'SF Mono',Menlo,monospace;
/* ===== SEMANTIC / color role ===== */
--bg-canvas:var(--color-gray-050);--grid-line:var(--color-gray-300);
/* editorial line(연필선 디바이더): 레일 --line(강) / 가로 룰 --line-soft(중) / 컬럼 --line-grid(약) — kezworks-redesign 디바이더 토큰 명칭 준거 (--line-soft는 3단 위계를 위한 이 프로젝트 확장) */
--line:rgba(var(--color-ink-rgb),.5);--line-soft:rgba(var(--color-ink-rgb),.25);--line-grid:rgba(var(--color-ink-rgb),.14);--surface:var(--color-white);--surface-sub:var(--color-gray-050);--surface-hatch:rgba(var(--color-ink-rgb),.09);
/* blueprint 면 토큰 (kezworks-redesign 준거): 카드 면은 흰 종이가 아니라 캔버스와 같은 도면지(--bg #f5f4f9)라
   카드가 "떠 있는 판"이 아니라 "테두리로 구획된 영역"으로 읽힌다. --surface-warm은 이미지 웰 밑에 까는 색. */
--surface-paper:var(--color-gray-050);--surface-warm:#E6E5EA;
/* 어두운 배경 전제로 그려진 이미지(글로우 심볼 등)용 미디어 서피스 — stack.mediaSurface:'dark'에서만 쓴다.
   투명 PNG가 그대로 비치므로 빈칸 해치 대신 단색으로 깐다 (해치면 심볼 위로 줄무늬가 올라온다) */
--surface-media-dark:var(--color-gray-950);--text-primary:var(--color-gray-800);--text-secondary:var(--color-gray-500);--accent:var(--color-red-500);
--ticket-surface:var(--color-white);--ticket-text:var(--color-gray-800);--ticket-text-dim:rgba(var(--color-ink-rgb),.55);--ticket-line:rgba(var(--color-ink-rgb),.18);--ticket-line-strong:rgba(var(--color-ink-rgb),.42);
/* ===== SEMANTIC / elevation ===== */
--elev-rest:0 2px 8px rgba(var(--color-ink-rgb),.10);--elev-hover:0 6px 20px rgba(var(--color-ink-rgb),.16);--elev-focus:0 12px 36px rgba(var(--color-ink-rgb),.22);
/* ===== SEMANTIC / radius ===== */
/* 제도 도면 언어(CardXL/CardS) 전면 적용 — 도면 위 "시트"(카드·파일·티켓·확대창·썸네일)는 전부 직각.
   레퍼런스(kezworks-redesign)도 디자인 표면은 전부 각지고 라운딩은 스크롤바·스켈레톤 같은 유틸에만 남는다.
   칩·버튼·내비게이터(HUD 유틸)만 소반경 유지 (2026-08-04 하린 지시: 야금야금 말고 토큰 차원에서 일괄). */
--radius-chip:4px;--radius-ticket:var(--radius-card);--radius-btn:6px;--radius-panel:8px;--radius-card:0;--radius-pile:0;--radius-hair:1px;--radius-nav:2px;--radius-round:50%;
/* ===== SEMANTIC / blueprint chrome (제도 도면 카드 크롬 — Card.jsx·CatalogPanel.jsx 공용) ===== */
/* 오프셋 시트 밀림 / 시트 면색(솔리드 면 쉐도우 — 하린 지시로 라인이 아니라 면) / 코너 정합 마크 한 변·돌출량 / mono 주석 바 높이 */
--bp-sheet:4px;--bp-sheet-fill:rgba(var(--color-ink-rgb),.22);--bp-mark:14px;--bp-mark-out:-7px;--bp-bar-h:18px;
/* ===== SEMANTIC / pattern ===== */
--pattern-barcode:repeating-linear-gradient(90deg,var(--ticket-text) 0 2px,transparent 2px 4px,var(--ticket-text) 4px 7px,transparent 7px 9px,var(--ticket-text) 9px 10px,transparent 10px 14px);
--pattern-hatch:repeating-linear-gradient(45deg,var(--surface-sub) 0 12px,var(--surface-hatch) 12px 24px);
/* 연필선 grain 알파 마스크 — mask-size 120px 120px로 사용. kezworks-redesign globals.css 이식. 비활성화: --line-grain: none */
--line-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='1.4' offset='0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0.07'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
/* ===== SEMANTIC / type role (weight size/line-height family) ===== */
/* 아래 두 토큰만 size가 자리 표시자다 — 나머지는 적힌 값이 그대로 그려진다.
   히어로와 존 타이틀은 크기를 뷰포트·서체 메트릭에서 런타임에 역산하기 때문이고(measureHeroEm·measureZT),
   그래서 weight·line-height·family를 여기서 바꾸면 실측 프로브와 렌더가 함께 따라온다.
   프로브가 이 토큰을 읽지 않고 서체 이름을 따로 알면 서체 교체 시 격자 정합이 무너진다 — 갈라놓지 말 것. */
--type-hero:700 96px/.94 var(--font-title);        /* size는 자리 표시 — computeD0가 뷰포트 폭에서 산출 */
--type-zone-title:600 48px/1.16 var(--font-title);
--type-zone-desc:400 .875rem/1.5rem var(--font-sans); /* 설명 1행 = 격자 1칸 */
--type-stack-title:500 14px/1.3 var(--font-sans);
--type-stack-meta:400 .875rem/1.4 var(--font-sans);
--type-stack-period:400 .875rem/1.4 var(--font-mono);
--type-card-title:500 14px/1.3 var(--font-sans);
--type-card-heading:600 14px/1.3 var(--font-sans);
--type-card-meta:400 .875rem/1.4 var(--font-sans);
--type-card-body:400 .875rem/1.6 var(--font-sans);
--type-card-title-code:500 14px/1.3 var(--font-mono);
--type-chip:400 .875rem/1.2 var(--font-mono);
--type-code:400 .875rem/1.4 var(--font-mono);
--type-lb-arrow:400 16px/1.4 var(--font-mono); /* 확대창 좌우 색인 글리프 — --type-code보다 한 단계 큰 유일한 자리 */
--type-crumb:400 .875rem/1.3 var(--font-sans);
--type-viewer-title:600 17px/1.3 var(--font-sans);
--type-chrome-link:400 .875rem/1.4 var(--font-sans);
--type-nav-meta:400 .875rem/1.3 var(--font-mono);
--type-crumb-sep:400 .875rem/1.3 var(--font-sans);
--type-cv-org:600 19px/1.24 var(--font-sans);
--type-ticket-label:400 .875rem/1.35 var(--font-ticket-body);
--type-ticket-value:400 .9375rem/1.45 var(--font-ticket-body);
--type-ticket-body:400 .9375rem/1.6 var(--font-ticket-body);
--type-ticket-title:700 2rem/1.02 var(--font-ticket-title);
--type-ticket-action:400 .9375rem/1.25 var(--font-ticket-body);
/* 직접 타이핑하는 칸은 본문 서체로 — 한 필드 안에서 영문(픽셀)·한글(본문)이 섞이지 않게 한다 */
--type-field-input:400 14px/1.5 var(--font-sans);
--type-field-body:400 14px/1.7 var(--font-sans);
--type-section-lead:400 1.25rem/1.6 var(--font-sans);
--type-field-note:400 .875rem/1.5 var(--font-mono); /* 표시 전용(입력 아님) — 픽셀 유지 */
--type-btn:600 .875rem/1 var(--font-sans);
/* ===== SEMANTIC / tracking ===== */
/* mono 대문자 라벨만 벌리고, 디스플레이 조판은 커질수록 좁힌다. font 축약형이 letter-spacing을
   담지 못해 --type-* 와 짝을 이루는 별도 토큰으로 둔다 (짝: cv-org·zone-title·hero). */
--tracking-wide:.08em;--tracking-brand:.04em;--tracking-cv-org:-.012em;--tracking-zone-title:-.02em;--tracking-hero:-.035em;
/* ===== SEMANTIC / motion ===== */
--spring-dur:.9s;--spring-ease:linear(0,.13 5.6%,.35 11.1%,.56 16.7%,.71 22.2%,.82 27.8%,.89 33.3%,.94 38.9%,.962 44.4%,.978 50%,.988 55.6%,.996 66.7%,.999 77.8%,1);
--easing:cubic-bezier(0.6,0,0.6,1); /* 디바이더 드로우 이징 — kezworks-redesign 준거 */
/* ===== KEZ LINK additions ===== */
--color-gray-100:#ECEBF1;--color-gray-900:#26252C;
--layout-wide:53.75rem;
--layout-reading:39rem;
--layout-narrow:30rem;
--layout-gutter:var(--space-4);
--section-inner-padding:25px;
--section-title-size:3rem;
--col-max:var(--layout-wide);
--measure-body:40ch;        /* 본문 줄길이 상한(한글) */
/* 24px 그리드 계열 (포트폴리오 계승) */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:72px;--space-8:96px;--space-9:144px;
--radius-pill:999px;
--type-display:700 clamp(2.75rem,6vw,4.5rem)/1.04 var(--font-title);
--type-h1:700 clamp(2rem,4vw,3rem)/1.1 var(--font-title);
--type-h2:700 clamp(1.5rem,3vw,2.25rem)/1.16 var(--font-title);
--type-h3:600 1.25rem/1.35 var(--font-title);
--type-body:400 1rem/1.7 var(--font-sans);
--type-body-lg:400 1.125rem/1.7 var(--font-sans);
--type-annotation:500 .875rem/1.5 var(--font-sans);
--type-label:600 .875rem/1.2 var(--font-body);
--type-caption:400 .875rem/1.45 var(--font-sans);
--type-pull:400 1.125rem/1.2 var(--font-mono);
--tracking-tight:-.02em;
--ink-fill:var(--color-gray-950);--on-ink:var(--color-gray-050);--on-accent:var(--color-white);
--dur-state:220ms;--ease-out:cubic-bezier(.2,.7,.3,1);--stagger:28ms;
--bg:var(--bg-canvas);
--fg:var(--text-primary);
--fg-muted:var(--text-secondary);
--fg-faint:var(--text-secondary);   /* P는 텍스트 2단계뿐 — 3단계를 지어내지 않는다 */
--line:rgba(var(--color-ink-rgb),.5); /* P 26행 그대로 */
}

:root{
  color-scheme:light;
  --ds-primary:var(--color-gray-950);--ds-secondary:var(--color-gray-800);--ds-tertiary:var(--color-red-500);--ds-neutral:var(--color-gray-050);
  --ds-background-100:var(--color-white);--ds-background-200:var(--color-gray-050);
  --ds-gray-100:#f2f2f2;--ds-gray-200:#ebebeb;--ds-gray-300:#e6e6e6;--ds-gray-400:#eaeaea;--ds-gray-500:#c9c9c9;--ds-gray-600:#a8a8a8;--ds-gray-700:#8f8f8f;--ds-gray-800:#7d7d7d;--ds-gray-900:#4d4d4d;--ds-gray-1000:#171717;
  --ds-gray-alpha-100:#0000000d;--ds-gray-alpha-200:#00000015;--ds-gray-alpha-300:#0000001a;--ds-gray-alpha-400:#00000014;--ds-gray-alpha-500:#00000036;--ds-gray-alpha-600:#0000003d;
  --ds-red-100:#ffeeef;--ds-red-300:#ffe3e4;--ds-red-700:var(--color-red-500);--ds-red-800:#d94339;
  --ds-spacing-1:4px;--ds-spacing-2:8px;--ds-spacing-2-5:10px;--ds-spacing-3:12px;--ds-spacing-4:16px;--ds-spacing-6:24px;--ds-spacing-8:32px;--ds-spacing-10:40px;--ds-spacing-16:64px;--ds-spacing-24:96px;
  --ds-radius-sm:6px;--ds-radius-md:12px;--ds-radius-lg:16px;--ds-radius-full:9999px;
  --ds-font-sans:var(--font-body);--ds-font-display:var(--font-title);--ds-font-mono:var(--font-mono);
  --ds-ease:cubic-bezier(.175,.885,.32,1.1);--ds-duration-state:150ms;--ds-duration-popover:200ms;--ds-duration-overlay:300ms;--ds-duration-emphasis:600ms;
  --ds-shadow-card:0 2px 2px rgba(0,0,0,.04);--ds-shadow-menu:0 1px 1px rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.04),0 16px 24px -8px rgba(0,0,0,.06);
  --ds-focus-ring:0 0 0 2px var(--ds-background-100),0 0 0 4px var(--color-red-500);
  --ds-type-size-14:.875rem;--ds-font-weight-medium:500;--ds-line-height-21:1.3125rem;
  --kez-header-h:120px;
  --ds-product-security-stroke-start:var(--ds-gray-alpha-500);--ds-product-security-stroke-highlight:var(--ds-gray-700);--ds-product-security-stroke-mid:var(--ds-gray-600);--ds-product-security-stroke-low:var(--ds-gray-500);
  --ds-product-nav-ink-muted:var(--ds-gray-800);--ds-product-nav-ink-active:var(--ds-gray-1000);--ds-product-nav-glow:rgba(0,0,0,.12);--ds-product-nav-indicator:var(--ds-gray-alpha-100);--ds-product-nav-glow-shadow:rgba(0,0,0,.18) 1px 1px 12px;
  --ds-product-header-stroke:linear-gradient(90deg,transparent,var(--ds-gray-alpha-500) 20%,var(--ds-gray-alpha-200) 67.19%,transparent);--ds-product-header-edge:linear-gradient(to left,var(--ds-gray-alpha-300) 20%,var(--ds-gray-alpha-300) 44%,var(--ds-gray-alpha-500) 50%,var(--ds-gray-alpha-200) 60%,var(--ds-gray-alpha-300) 63%,var(--ds-gray-alpha-300) 100%);
}

.geist-heading-48{font-family:var(--ds-font-display);font-size:3rem;font-weight:600;line-height:3.5rem;letter-spacing:-.18rem}
.geist-heading-32{font-family:var(--ds-font-display);font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:-.08rem}
.geist-heading-24{font-family:var(--ds-font-display);font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:-.06rem}
.geist-heading-20{font-family:var(--ds-font-display);font-size:1.25rem;font-weight:600;line-height:1.625rem;letter-spacing:-.025rem}
.geist-heading-16{font-family:var(--ds-font-display);font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:-.02rem}
.geist-copy-20{font-family:var(--ds-font-sans);font-size:1.25rem;font-weight:400;line-height:2rem}
.geist-copy-18{font-family:var(--ds-font-sans);font-size:1.125rem;font-weight:400;line-height:1.75rem}
.geist-copy-16{font-family:var(--ds-font-sans);font-size:1rem;font-weight:400;line-height:1.5rem}
.geist-copy-14{font-family:var(--ds-font-sans);font-size:.875rem;font-weight:400;line-height:1.25rem}
.geist-label-14{font-family:var(--ds-font-sans);font-size:.875rem;font-weight:500;line-height:1.25rem}
.geist-button-16{font-family:var(--ds-font-sans);font-size:1rem;font-weight:500;line-height:1.25rem}
.geist-button-14{font-family:var(--ds-font-sans);font-size:.875rem;font-weight:500;line-height:1.25rem}

/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--type-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}

/* 중앙 리딩 컬럼 셸 */
.kez-column{width:min(calc(100% - var(--layout-gutter)*2),var(--layout-wide));margin-inline:auto}
.kez-section{position:relative}
.kez-section--none{padding-block:0}
.kez-section--md{padding-block:var(--space-6)}
.kez-section--lg{padding-block:var(--space-7)}
.kez-section__body{width:min(100%,var(--layout-wide));margin-inline:auto;padding:var(--section-inner-padding);display:flex;flex-direction:column}
.kez-section__body--wide{max-width:var(--layout-wide)}
.kez-section__body--reading{max-width:var(--layout-reading)}
.kez-section__body--narrow{max-width:var(--layout-narrow)}
.kez-section__body--gap-sm{gap:var(--space-3)}
.kez-section__body--gap-md{gap:var(--space-4)}
.kez-section__body--gap-lg{gap:var(--space-6)}
.kez-section__body--align-stretch{align-items:stretch}
.kez-section__body--align-center{align-items:center}
.kez-footer__body{flex-flow:row wrap;justify-content:space-between;align-items:center}
.kez-rails{position:absolute;top:0;bottom:0;left:50%;width:min(100%,var(--layout-wide));transform:translateX(-50%);pointer-events:none;z-index:0}

/* ===== structural graphics — 포트폴리오 구조 유전자 이식 ===== */
.kez-sheet{position:relative;min-height:100vh;overflow-x:clip;background:var(--bg)}
.kez-peripheral-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.kez-peripheral-grid__side{position:absolute;top:0;bottom:0;width:max(0px,calc((100% - var(--layout-wide))/2));overflow:hidden}
.kez-peripheral-grid__side--left{left:0}.kez-peripheral-grid__side--right{right:0}
.kez-peripheral-grid__layer{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:24px 24px;background-position:calc(50% + 12px) 0}
/* ── 연필선 계약(포트폴리오 app.jsx 1546·1549행 이식) ──
   두께 1.5px + grain 알파마스크(120px 타일) = 연필 질감. 위계(app.jsx 406~417행):
   존 시작 룰 = --line(강) / 타이틀 하단·푸터·히어로 하단 룰 = --line-soft(중) / 콘텐츠 폭 레일 = --line-soft / 눈금 = --line-grid(약).
   긋는 모션: 레일 scaleY .8s, 룰 scaleX .9s var(--easing) — [data-draw] 시트에서 .is-drawn이 붙을 때 그어진다(스토리북 단독 렌더는 정적). */
.kez-vrail{position:absolute;top:0;bottom:0;width:1.5px;background:var(--line-soft);pointer-events:none;z-index:0;
  -webkit-mask-image:var(--line-grain);mask-image:var(--line-grain);-webkit-mask-size:120px 120px;mask-size:120px 120px;
  transform-origin:top center;transition:transform .8s var(--easing)}
.kez-sheet[data-draw] .kez-vrail:not(.is-drawn){transform:scaleY(0)}
/* 내부 스크롤은 평소 숨겨 도면의 선을 방해하지 않는다. 포인터 근접·휠·스크롤 때만
   React 리렌더 없이 kz-scrollbar-show가 붙고, 기존 선·면 토큰으로만 thumb을 그린다. */
.kz-scrollbar{scrollbar-width:none;scrollbar-color:transparent transparent}
.kz-scrollbar::-webkit-scrollbar{width:0;height:0}
.kz-scrollbar.kz-scrollbar-show{scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent}
.kz-scrollbar.kz-scrollbar-show::-webkit-scrollbar{width:8px;height:8px}
.kz-scrollbar.kz-scrollbar-show::-webkit-scrollbar-track{background:transparent}
.kz-scrollbar.kz-scrollbar-show::-webkit-scrollbar-thumb{background:var(--line-soft);border:2px solid transparent;background-clip:padding-box;border-radius:var(--radius-hair)}
/* 카드 제도 도면 크롬 — 프레임 테두리·상단 주석 바. 호버하면 테두리·주석·제목이 accent로 전환된다.
   색은 인라인이 아니라 이 클래스에만 둔다 (인라인이면 :hover가 못 이겨 !important가 필요해진다). */
/* 면 쉐도우는 별도 div가 아니라 카드 컴포지션 그룹(프레임) 자체의 box-shadow — 솔리드 오프셋 슬래브.
   내부 요소에 라인 사각형을 따로 그려 넣던 조립(2026-08-04 이전)은 그림자가 겉돌아 폐기. */
.kz-card-frame{border:1px solid var(--text-primary);box-shadow:var(--bp-sheet) var(--bp-sheet) 0 var(--bp-sheet-fill);transition:border-color 160ms ease-out}
.kz-card-frame:hover{border-color:var(--accent)}
.kz-card-bar{border-bottom:1px solid var(--line-soft);color:var(--text-secondary);transition:color 160ms ease-out,border-color 160ms ease-out}
.kz-card-frame:hover .kz-card-bar{color:var(--accent);border-bottom-color:var(--accent)}
.kz-card-frame:hover .kz-card-title{color:var(--accent)}
/* 태그 칩 — 레퍼런스 Tag(S) 그대로: 각진 1px 잉크 테두리, 본문 서체. 카드 호버 시 테두리·글자가 같이 accent로 */
.kz-tag{display:inline-flex;align-items:center;border:1px solid var(--text-primary);color:var(--text-primary);padding:1px 5px;font:var(--type-card-meta);white-space:nowrap;transition:border-color 160ms ease-out,color 160ms ease-out}
.kz-card-frame:hover .kz-tag{border-color:var(--accent);color:var(--accent)}

.kez-portfolio-zone{min-height:24rem;padding-block:var(--space-5) var(--space-4);overflow:visible}
.kez-work-sessions{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--ds-spacing-6);row-gap:var(--ds-spacing-8)}
.kez-work-sessions>.kez-portfolio-session-slot{width:18.5rem;flex:0 0 18.5rem}
.kez-sebren-portfolio{--radius-card:var(--ds-radius-lg);--surface-paper:var(--ds-background-100);--surface-warm:var(--ds-gray-100);--text-primary:var(--ds-primary);--text-secondary:var(--ds-secondary);--line-soft:var(--ds-gray-alpha-400);--bp-sheet-fill:var(--ds-gray-alpha-100);--type-stack-title:600 .875rem/1.25rem var(--ds-font-display);--type-stack-meta:400 .875rem/1.25rem var(--ds-font-sans);--type-stack-period:400 .875rem/1.25rem var(--ds-font-sans);--type-card-title:600 .875rem/1.25rem var(--ds-font-display);--type-card-heading:600 .875rem/1.25rem var(--ds-font-display);--type-card-meta:400 .875rem/1.25rem var(--ds-font-sans);--type-card-body:400 .875rem/1.25rem var(--ds-font-sans);--type-card-title-code:500 .875rem/1.25rem var(--ds-font-sans);--type-chip:400 .875rem/1.25rem var(--ds-font-sans);--type-code:400 .875rem/1.25rem var(--ds-font-sans)}
.kez-sebren-portfolio .kz-card-frame{border-color:var(--ds-gray-alpha-400);box-shadow:var(--ds-shadow-card)}
.kez-sebren-portfolio .kz-card-frame:hover{border-color:var(--ds-gray-alpha-500)}
.kez-sebren-portfolio .kz-card-title,.kez-sebren-portfolio .kez-portfolio-session__label h3{letter-spacing:-.02em}
.kez-portfolio-session-slot{position:relative;min-width:18.5rem}
.kez-portfolio-session{position:relative;width:100%;min-width:18.5rem;transition:height var(--spring-dur) var(--spring-ease);cursor:pointer}
.kez-portfolio-session[data-focused]{position:fixed;inset:0;z-index:900;min-width:0;width:100vw;isolation:isolate;transition:none}
.kez-portfolio-session[data-focused]::before{content:'';position:fixed;inset:0;z-index:0;background:rgba(245,244,249,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:kez-focus-in 220ms ease-out both}
.kez-portfolio-session[data-closing]{pointer-events:none}
.kez-portfolio-session[data-closing]::before{display:none}
.kez-portfolio-session[data-focused]>.kz-card-frame,.kez-portfolio-session[data-focused]>.kez-selection-box,.kez-portfolio-session[data-focused]>.kez-portfolio-session__label{z-index:2}
.kez-focus-backdrop{appearance:none;position:fixed;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-out}
.kez-portfolio-session__label{position:absolute;left:0;top:0;z-index:30;display:flex;flex-direction:column;gap:.125rem;pointer-events:none;transition:transform var(--spring-dur) var(--spring-ease)}
.kez-portfolio-session[data-settling] .kez-portfolio-session__label{transition:none}
.kez-portfolio-session__label h3,.kez-portfolio-session__label p{margin:0}
.kez-portfolio-session__label h3{font:var(--type-stack-title);font-family:var(--font-title)}
.kez-portfolio-session__label p:first-of-type{font:var(--type-stack-period);letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.kez-portfolio-session__label p:last-of-type{font:var(--type-stack-meta);color:var(--text-secondary)}
@keyframes boxpopA{0%{transform:scale(.8);opacity:0}27%{opacity:0}65%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes kez-focus-in{from{opacity:0}to{opacity:1}}
.kez-selection-box{position:absolute;z-index:200;pointer-events:none;transform-origin:center;will-change:transform}
.kez-selection-box--hover{animation:boxpopA .32s ease-out both}
.kez-selection-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.kez-selection-box rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3;animation:ants 12s linear infinite}
.kez-selection-box__meta{position:absolute;right:0;top:-1.5rem;font:var(--type-code);color:var(--accent);white-space:nowrap}

@media (max-width:47.99rem){
  .kez-portfolio-zone{min-height:23rem;padding-top:var(--space-4)}
  .kez-work-sessions{flex-direction:column;overflow:visible}
}
/* 풀블리드 가로 룰(hdivider): 컬럼을 뚫고 화면 끝까지. 드로우 원점은 컬럼 좌측 엣지(콘텐츠에서 시작돼 보이도록 — app.jsx ruleOrigin 이식) */
.kez-hrule{width:100vw;margin-left:calc(50% - 50vw);height:1.5px;background:var(--line);pointer-events:none;
  -webkit-mask-image:var(--line-grain);mask-image:var(--line-grain);-webkit-mask-size:120px 120px;mask-size:120px 120px;
  transform-origin:max(0px,calc(50% - var(--layout-wide)/2)) center;transition:transform .9s var(--easing)}
.kez-hrule--soft{background:var(--line-soft)}
/* edge 변형: 섹션 하단에 absolute로 붙는 폴드 경계선(히어로 하단) — 눈금 스냅 대상 아님 */
.kez-hrule--edge{position:absolute;bottom:0;left:0;margin-left:0}
.kez-sheet[data-draw] .kez-hrule:not(.is-drawn){transform:scaleX(0)}
.kez-above{position:relative;z-index:1}
.kez-section-head{position:relative;display:grid;grid-template-rows:3rem 1.5rem;width:100%}
.kez-section-head>.kez-hrule{position:absolute;left:0;top:0;margin-left:calc(50% - 50vw)}
.kez-section-head>.kez-hrule:last-child{top:auto;bottom:0}
.kez-section-head__title{position:relative}
.kez-section-head__meta{font:var(--type-zone-desc);color:var(--text-secondary);opacity:.75;text-wrap-style:balance;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.kez-section-lead{font:var(--type-section-lead)!important}
.kez-reveal-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.kez-reveal-card{min-width:0;overflow:hidden;opacity:0;transform:translateY(var(--space-4));transition:opacity var(--spring-dur) var(--spring-ease),transform var(--spring-dur) var(--spring-ease);transition-delay:calc(var(--reveal-index)*40ms)}
.kez-reveal-card-grid[data-revealed]>.kez-reveal-card{opacity:1;transform:translateY(0)}
.kez-recap-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.kez-recap-gallery__item{min-width:0;margin:0;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line-soft);border-radius:15px;background:var(--surface-warm)}
.kez-recap-gallery__item img{width:100%;height:100%;object-fit:cover}
.kez-about__intro{width:calc(50% - var(--space-3));display:flex;flex-direction:column;gap:var(--space-4)}
.kez-about__intro p{margin:0;font:var(--type-field-body);color:var(--text-secondary);text-wrap:pretty}
.kez-about__intro p:first-child{color:var(--text-primary)}
.kez-about__teaching{display:flex;flex-direction:column;gap:var(--space-3)}
.kez-about__teaching-label{font:var(--type-chip);letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.kez-about__teaching-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line-soft)}
.kez-about__teaching-item{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-right:1px solid var(--line-soft)}
.kez-about__teaching-item:last-child{border-right:0}
.kez-about__teaching-item>span{font:var(--type-chip);letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.kez-about__teaching-item h3{margin:0;font:var(--type-h3);color:var(--text-primary);text-wrap:pretty}
.kez-about__teaching-item p{margin:0;font:var(--type-card-body);color:var(--text-secondary);text-wrap:pretty}
.kez-about__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto;row-gap:var(--space-7)}
.kez-about__item{display:flex;flex-direction:column;gap:9px;padding-right:var(--space-3)}
.kez-about__item>span{font:var(--type-chip);letter-spacing:var(--tracking-wide);color:var(--text-secondary);text-transform:uppercase;white-space:nowrap}
.kez-about__item h3{margin:0;font:var(--type-cv-org);letter-spacing:var(--tracking-cv-org);color:var(--text-primary);text-wrap:pretty}
.kez-about__item p{margin:0;font:var(--type-card-body);color:var(--text-secondary);text-wrap:pretty}
.kez-about__item--1{grid-column:1/3;grid-row:1}.kez-about__item--2{grid-column:4/6;grid-row:1}
.kez-about__item--3{grid-column:2/5;grid-row:2}.kez-about__item--4{grid-column:5/7;grid-row:2}
@media (max-width:767px){
  :root{--section-title-size:2rem}
  .kez-section-head--compact{grid-template-rows:auto 1.5rem}
  .kez-section-head--compact .kez-section-head__title{height:auto!important;min-height:3rem}
  .kez-section-head--compact .kez-section-head__title>div{position:relative!important;top:0!important;white-space:normal!important;line-height:1.15!important}
  .kez-reveal-card-grid{grid-template-columns:1fr}
  .kez-recap-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kez-about__intro{width:100%}
  .kez-about__teaching-grid{grid-template-columns:1fr 1fr}
  .kez-about__teaching-item:nth-child(2){border-right:0}
  .kez-about__teaching-item:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .kez-about__grid{grid-template-columns:1fr;row-gap:var(--space-6)}
  .kez-about__item--1,.kez-about__item--2,.kez-about__item--3,.kez-about__item--4{grid-column:1;grid-row:auto}
}

/* ===== interaction layer (인라인으로 불가능한 :hover/:active/:focus 의사상태) ===== */
.kez-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:var(--type-btn);letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  border-radius:var(--radius-btn);padding:0 var(--space-4);height:44px;white-space:nowrap;text-decoration:none;
  transition:transform var(--dur-state) var(--ease-out),background var(--dur-state) var(--ease-out),border-color var(--dur-state) var(--ease-out),box-shadow var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)}
.kez-btn--lg{height:52px;padding:0 var(--space-5);font-size:1rem}
.kez-btn--full{width:100%}
.kez-btn--primary{background:var(--ink-fill);color:var(--on-ink)}
/* pill = 캡슐(999px). --radius-round(50%)는 정사각 요소 전용 — 넓은 버튼에 쓰면 타원이 된다 */
.kez-btn--secondary{background:transparent;color:var(--fg);border-color:var(--line);border-radius:var(--radius-pill)}
.kez-btn--ghost{background:transparent;color:var(--fg-muted)}
.kez-btn:active{transform:translateY(1px) scale(.99)}
@media (hover:hover){
  .kez-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--elev-hover)}
  .kez-btn--secondary:hover{border-color:var(--fg);transform:translateY(-1px)}
  .kez-btn--ghost:hover{color:var(--fg)}
}
/* 카드/행 리프트 */
.kez-lift{transition:transform var(--dur-state) var(--ease-out),box-shadow var(--dur-state) var(--ease-out),background var(--dur-state) var(--ease-out)}
@media (hover:hover){.kez-lift:hover{transform:translateY(-2px);box-shadow:var(--elev-hover)}}
.kez-lift:active{transform:translateY(0)}
.kez-ticket{--ticket-surface:#fff;--ticket-text:var(--color-gray-800);--ticket-text-dim:rgba(var(--color-ink-rgb),.55);--ticket-line:rgba(var(--color-ink-rgb),.18);--ticket-line-strong:rgba(var(--color-ink-rgb),.52);width:min(100%,30rem);position:relative;display:flex;flex-direction:column;background:transparent;color:var(--ticket-text);font:var(--type-ticket-body)}
.kez-ticket__face{position:relative;display:flex;flex-direction:column;background:var(--ticket-surface);box-shadow:var(--elev-focus);overflow:hidden;transform-origin:center bottom;transition:transform .62s cubic-bezier(.22,.9,.24,1),clip-path .2s ease-out}
.kez-ticket__face>*{position:relative;z-index:1}
.kez-ticket__eyebrow{margin:0;padding:14px 18px;border-bottom:1px solid var(--ticket-line);color:var(--ticket-text-dim);font:var(--type-ticket-value)}
.kez-ticket__meta{display:grid;grid-template-columns:1fr 1.15fr 1.25fr .5fr;border-bottom:1px solid var(--ticket-line);padding:15px 18px 13px;gap:12px}
.kez-ticket__meta>div,.kez-ticket__footer>div,.kez-ticket__stub>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.kez-ticket__meta strong,.kez-ticket__footer strong,.kez-ticket__stub strong{font:var(--type-ticket-value);white-space:nowrap}
.kez-ticket__artwork{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff}
.kez-ticket__artwork img{width:100%;height:100%;object-fit:cover}
.kez-ticket__message{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:20px 18px;border-top:1px solid var(--ticket-line);border-bottom:1px solid var(--ticket-line)}
.kez-ticket__destination p{margin:7px 0 0;font:var(--type-ticket-body)}
.kez-ticket__destination .kez-ticket__sub{color:var(--ticket-text-dim);font:var(--type-ticket-label)}
.kez-ticket__slogan{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px}
.kez-ticket__slogan strong{font:var(--type-ticket-title);letter-spacing:-.035em}
.kez-ticket__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-bottom:1px solid var(--ticket-line)}
.kez-ticket__rows>div{min-width:0;padding:13px 12px;border-right:1px solid var(--ticket-line)}
.kez-ticket__rows>div:last-child{border-right:0}
.kez-ticket__rows dt,.kez-ticket__rows dd{margin:0}
.kez-ticket__rows dd{margin-top:5px;font:var(--type-ticket-value);overflow-wrap:anywhere}
.kez-ticket__footer{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:14px 18px 16px}
.kez-ticket__barcode{width:132px;height:32px;background:var(--pattern-barcode);opacity:.92}
.kez-ticket__seam{appearance:none;position:relative;width:100%;height:2rem;margin-block:-1rem;padding:0;z-index:4;border:0;background:transparent;color:inherit;cursor:pointer}
.kez-ticket__seam::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--ticket-line-strong)}
.kez-ticket__seam:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.kez-ticket__seam:disabled{cursor:default}
.kez-ticket__notch{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--bg);transform:translateY(-50%);transition:opacity 180ms var(--ease-out)}
.kez-ticket__notch--left{left:-9px}.kez-ticket__notch--right{right:-9px}
.kez-ticket__ants{position:absolute;left:0;top:50%;width:100%;height:8px;transform:translateY(-50%);transition:opacity 180ms var(--ease-out);pointer-events:none}
.kez-ticket__ants line{stroke:var(--ticket-text);stroke-width:2;stroke-dasharray:5 4;animation:ants 1.4s linear infinite}
.kez-ticket__tear-label{position:absolute;right:12px;bottom:calc(50% + .75rem);padding:3px 6px;background:var(--ticket-surface);color:var(--ticket-text);font:var(--type-ticket-label);letter-spacing:var(--tracking-wide);white-space:nowrap;transition:opacity 180ms var(--ease-out),transform 260ms var(--spring-ease)}
.kez-ticket__reveal{position:relative;z-index:1;display:grid;grid-template-rows:0fr;background:transparent;opacity:0;transition:grid-template-rows .62s cubic-bezier(.22,.9,.24,1),opacity .3s ease .12s}
.kez-ticket__reveal-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2)}
.kez-ticket__reveal-inner p{margin:0;color:var(--fg-muted);font:var(--type-ticket-label);letter-spacing:var(--tracking-wide)}
.kez-ticket__reveal .kez-btn{font:var(--type-ticket-action)}
.kez-ticket__stub{appearance:none;width:100%;min-height:112px;padding:16px 18px;background:var(--ticket-surface);color:var(--ticket-text);border:0;box-shadow:var(--elev-focus);display:grid;grid-template-columns:1fr 1.4fr;gap:18px;text-align:left;cursor:pointer;transform-origin:center top;transition:transform .62s cubic-bezier(.22,.9,.24,1),opacity .42s var(--ease-out),clip-path .2s ease-out}
.kez-ticket__stub-action{align-items:flex-end;text-align:right}.kez-ticket__stub-action strong{color:var(--accent)}
.kez-ticket__stub-barcode{display:block;width:100%;height:20px;background:var(--pattern-barcode)}
.kez-ticket.is-torn .kez-ticket__face{transform:translateY(-24px) rotate(-.35deg);clip-path:polygon(0 0,100% 0,100% 99%,94% 100%,88% 98.5%,82% 100%,76% 98.5%,70% 100%,64% 98.5%,58% 100%,52% 98.5%,46% 100%,40% 98.5%,34% 100%,28% 98.5%,22% 100%,16% 98.5%,10% 100%,4% 98.5%,0 100%)}
.kez-ticket.is-torn .kez-ticket__reveal{grid-template-rows:1fr;opacity:1}
.kez-ticket.is-torn .kez-ticket__reveal-inner{padding:24px 12px 20px}
.kez-ticket.is-torn .kez-ticket__stub{transform:translateY(24px) rotate(1.2deg);clip-path:polygon(0 5%,7% 0,14% 5%,21% 0,28% 5%,35% 0,42% 5%,49% 0,56% 5%,63% 0,70% 5%,77% 0,84% 5%,91% 0,100% 5%,100% 100%,0 100%);pointer-events:none}
.kez-ticket.is-torn .kez-ticket__notch{opacity:0}
.kez-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;padding-block:clamp(7rem,10vh,9rem)}
@media (max-width:520px){
  .kez-ticket__meta{grid-template-columns:1fr 1fr;padding:12px 14px;gap:10px 16px}
  .kez-ticket__message{padding:16px 14px;gap:18px}
  .kez-ticket__rows{grid-template-columns:1fr;padding:0 14px}
  .kez-ticket__rows>div{display:grid;grid-template-columns:4.75rem 1fr;align-items:baseline;border-right:0;border-bottom:1px solid var(--ticket-line);padding:9px 0}
  .kez-ticket__rows>div:last-child{border-bottom:0}
  .kez-ticket__rows dd{margin-top:0;text-align:right}
  .kez-ticket__footer{padding:12px 14px 14px}.kez-ticket__barcode{width:88px;height:26px}
  .kez-ticket__stub{min-height:104px;padding:14px;grid-template-columns:.8fr 1.2fr;gap:10px}
  .kez-ticket__stub-action>span:first-child{display:none}.kez-ticket__stub-action strong{white-space:normal;text-align:right}
  .kez-hero{padding-block:7rem}
}
/* 가로 스크롤 트랙 — 얇은 스크롤바(있음을 알리되 시끄럽지 않게) */
.kez-hscroll{scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;-webkit-overflow-scrolling:touch}
.kez-hscroll::-webkit-scrollbar{height:6px}
.kez-hscroll::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:var(--radius-pill)}
.kez-hscroll::-webkit-scrollbar-track{background:transparent}
/* 링크 밑줄 슬라이드 */
.kez-ulink{position:relative;color:inherit}
.kez-ulink__external{margin-left:.125rem}
.kez-ulink::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-state) var(--ease-out)}
@media (hover:hover){.kez-ulink:hover::after{transform:scaleX(1)}}

/* ===== KEYFRAMES (포트폴리오 계승) ===== */
@keyframes ants{to{stroke-dashoffset:-70}}
@keyframes flyx{0%{left:2%;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:98%;opacity:0}}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media (prefers-reduced-motion:reduce){
  /* harness-allow(H4): prefers-reduced-motion 접근성 리셋 — 모든 컴포넌트 인라인/클래스 애니메이션을 무조건 이겨야 하는 표준 관용구(WCAG 2.3.3). 증상 패치 아님. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.kez-above{display:flex;flex-direction:column;position:relative;z-index:1}
.kez-section-group{display:flex;flex-direction:column;position:relative}
.gk-text--title{font-family:var(--font-title)}
.gk-text--body{font-family:var(--font-body)}
.kez-section-head{display:flex;flex-direction:column;gap:var(--ds-spacing-2);width:100%}
.kez-section-head>.kez-hrule{position:relative;left:auto;top:auto;bottom:auto;margin-left:calc(50% - 50vw);flex:none}
.kez-section-head__title{position:relative;height:auto;margin:0;font:var(--type-zone-title);letter-spacing:var(--tracking-zone-title);color:var(--text-primary);text-wrap:balance}
.kez-section-head__meta{min-height:1.5rem}
.kez-section-head--center{align-items:center;text-align:center}
.kez-header{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none}
.kez-header__rail{display:flex;align-items:center;justify-content:center;height:var(--kez-header-h);padding:0 var(--ds-spacing-4)}
.kez-header__glass{display:inline-flex;border-radius:var(--ds-radius-full);background:rgba(255,255,255,.76);backdrop-filter:saturate(1.35) blur(18px);-webkit-backdrop-filter:saturate(1.35) blur(18px);pointer-events:auto;transition:box-shadow var(--ds-duration-state) var(--ease-out)}
.kez-header[data-elevated=true] .kez-header__glass{box-shadow:var(--ds-shadow-menu)}
.kez-header__capsule{position:relative;display:inline-flex;align-items:center;height:auto;border:1px solid var(--ds-product-security-stroke-start);border-radius:var(--ds-radius-full);overflow:hidden;z-index:1;transition:box-shadow var(--ds-duration-state) var(--ease-out)}
.kez-header__capsule::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:100%;z-index:-1;border-radius:inherit;background-image:var(--ds-product-header-edge);background-size:200%;background-position:62% 0;transition:background-position-x var(--ds-duration-emphasis)}
.kez-header__glass .kez-header__capsule::after{display:none}
.kez-header__nav-stroke{position:absolute;top:-1px;left:32px;width:90%;height:1px;z-index:-1;background:var(--ds-product-header-stroke);pointer-events:none}
.kez-header__nav-track{position:relative;display:flex;align-items:center;width:fit-content;height:auto;overflow:hidden;border-radius:inherit;padding:12px 20px;gap:4px;background:transparent}
.kez-header__logo{display:flex;align-items:center;min-height:44px;color:var(--ds-primary);font:700 1.25rem/1 var(--font-title);letter-spacing:-.03em}
.kez-header__spacer{width:120px;flex:0 0 120px}
.kez-header__nav-list{display:flex;align-items:center;gap:0;margin:0 24px 0 0;padding:0;list-style:none}
.kez-header__nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;height:36px;border-radius:var(--ds-radius-full);padding:0 20px;color:var(--ds-product-nav-ink-muted);font-family:var(--font-body);font-size:var(--ds-type-size-14);font-weight:var(--ds-font-weight-medium);line-height:var(--ds-line-height-21);white-space:nowrap;transition:color var(--ds-duration-state)}
.kez-header__nav-link:hover,.kez-header__nav-link:focus-visible{color:var(--ds-product-nav-ink-active);text-shadow:var(--ds-product-nav-glow-shadow)}
.kez-header__nav-link:focus-visible{outline:2px solid var(--ds-product-security-stroke-highlight);outline-offset:0}
.kez-header .kez-header__cta{position:relative;z-index:1;border-radius:var(--ds-radius-full)}
.kez-header .kez-header__portfolio{position:relative;z-index:1;border-radius:var(--ds-radius-full);flex-shrink:0;margin-left:calc(var(--ds-spacing-2-5) - var(--ds-spacing-1));white-space:nowrap}
.kez-header__nav-glow,.kez-header__nav-indicator{position:absolute;top:10px;opacity:0;pointer-events:none;border-radius:inherit;transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1),opacity var(--ds-duration-state) ease}
.kez-header__nav-glow{height:calc(100% - 20px);background:var(--ds-product-nav-glow);filter:blur(32px)}
.kez-header__nav-indicator{height:calc(100% - 20px);background:var(--ds-product-nav-indicator)}
.kez-header__nav-glow.is-visible,.kez-header__nav-indicator.is-visible{opacity:1}
.kez-header__sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.kez-header__offset{height:calc(var(--kez-header-h) + 1px)}
.kez-hero .kez-section__body{gap:var(--ds-spacing-6)}
.gk-surface{display:flex;flex-direction:column;min-width:0;background:var(--ds-background-100);border:1px solid var(--ds-gray-alpha-400);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-card);overflow:hidden;color:var(--ds-primary)}
.gk-surface--subtle{background:var(--ds-background-200)}
.gk-surface--secondary{background:var(--ds-gray-100)}
.gk-surface--pad-none{padding:0}.gk-surface--pad-sm{padding:var(--ds-spacing-3)}.gk-surface--pad-md{padding:var(--ds-spacing-6)}.gk-surface--pad-lg{padding:var(--ds-spacing-8)}
.gk-surface--interactive{transition:background-color var(--ds-duration-state) var(--ds-ease),border-color var(--ds-duration-state) var(--ds-ease),transform var(--ds-duration-state) var(--ds-ease)}
.gk-surface--interactive:hover{background:var(--ds-gray-100);border-color:var(--ds-gray-alpha-500)}
.gk-surface--interactive:active{transform:scale(.995)}
.gk-surface__header{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-spacing-3);font:var(--type-label);color:var(--ds-secondary)}
.gk-surface__body{min-width:0;font-family:var(--ds-font-sans)}
.gk-text-group{display:flex;flex-direction:column;gap:var(--ds-spacing-2);min-width:0}.gk-text-group--center{align-items:center;text-align:center}.gk-text-group--end{align-items:flex-end;text-align:right}
.gk-stack{display:flex;min-width:0}.gk-stack--column{flex-direction:column}.gk-stack--row{flex-direction:row}.gk-stack--wrap{flex-wrap:wrap}.gk-stack--gap-none{gap:0}.gk-stack--gap-xs{gap:var(--ds-spacing-1)}.gk-stack--gap-sm{gap:var(--ds-spacing-2)}.gk-stack--gap-md{gap:var(--ds-spacing-4)}.gk-stack--gap-lg{gap:var(--ds-spacing-6)}.gk-stack--align-center{align-items:center}.gk-stack--align-start{align-items:flex-start}.gk-stack--align-stretch{align-items:stretch}.gk-stack--align-baseline{align-items:baseline}
.gk-description{display:flex;flex-direction:column;gap:var(--ds-spacing-1);margin:0;min-width:0}.gk-description--right{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--ds-spacing-3)}.gk-description dt{margin:0;color:var(--ds-secondary);font:var(--type-label)}.gk-description dd{margin:0;color:var(--ds-primary);font:var(--type-body)}
.gk-note{display:flex;align-items:flex-start;gap:var(--ds-spacing-2);width:100%;padding:var(--ds-spacing-3) var(--ds-spacing-4);border-radius:var(--ds-radius-md);border:1px solid transparent;font:var(--type-annotation)}.gk-note--secondary{background:var(--ds-gray-100);border-color:var(--ds-gray-400)}.gk-note--accent{background:var(--ds-red-100);border-color:var(--ds-red-300)}.gk-note__body{flex:1;min-width:0}.gk-note__icon{flex:none;color:var(--accent)}
.gk-collapse-group{display:flex;flex-direction:column}.gk-collapse{border-bottom:1px solid var(--ds-gray-alpha-400)}.gk-collapse-group>.gk-collapse:first-child{border-top:1px solid var(--ds-gray-alpha-400)}.gk-collapse__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-spacing-3);width:100%;padding:var(--ds-spacing-4) var(--ds-spacing-1);border:0;background:transparent;color:var(--ds-primary);text-align:left;cursor:pointer}.gk-collapse__trigger:focus-visible{outline:0;border-radius:var(--ds-radius-sm);box-shadow:var(--ds-focus-ring)}.gk-collapse__chevron{transition:transform var(--ds-duration-state) var(--ds-ease)}.gk-collapse__trigger[aria-expanded=true] .gk-collapse__chevron{transform:rotate(180deg)}.gk-collapse__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ds-duration-state) var(--ds-ease)}.gk-collapse__panel[data-open=true]{grid-template-rows:1fr}.gk-collapse__panel>div{overflow:hidden;min-height:0}.gk-collapse__panel[data-open=true]>div{padding-bottom:var(--ds-spacing-4)}
.gk-tabs{display:inline-flex;align-items:center;padding:var(--ds-spacing-1);background:var(--ds-gray-100);border-radius:var(--ds-radius-md)}.gk-tabs button{height:2rem;padding:0 var(--ds-spacing-3);border:0;border-radius:var(--ds-radius-sm);background:transparent;color:var(--ds-secondary);font:var(--type-annotation);cursor:pointer}.gk-tabs button[aria-selected=true]{background:var(--ds-background-100);color:var(--ds-primary);box-shadow:var(--ds-shadow-card)}
.gk-badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:var(--ds-radius-full);padding:.125rem var(--ds-spacing-2);border:1px solid var(--ds-gray-alpha-400);font-family:var(--ds-font-sans)}.gk-badge--accent{border-color:var(--accent);background:var(--ds-red-100)}.gk-badge--filled{border-color:transparent;background:var(--ds-gray-100)}
.kz-tag{border-color:var(--ds-gray-alpha-500);border-radius:var(--ds-radius-sm);padding:.125rem var(--ds-spacing-2);font:var(--type-annotation);background:var(--ds-background-100)}
.kez-ticket__field{font:var(--type-ticket-label);letter-spacing:var(--tracking-wide);color:var(--ticket-text-dim);text-transform:uppercase;white-space:nowrap}
.kez-about__teaching{gap:0}.kez-about__teaching-header{padding:var(--ds-spacing-4) var(--ds-spacing-6);border-bottom:1px solid var(--ds-gray-alpha-400)}.kez-about__teaching-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:0}.kez-about__teaching-item{border:0;border-radius:0;box-shadow:none}.kez-about__teaching-copy,.kez-about__experience-copy{gap:var(--ds-spacing-2)}.kez-about__grid{display:grid}.kez-about__item{padding-right:var(--ds-spacing-6)}
.kez-proof__track-region{margin-top:var(--ds-spacing-6)}.kez-proof__lanes{width:max-content;flex:none}.kez-proof__row{width:max-content;flex-wrap:nowrap}.kez-proof__item{flex:none;width:clamp(15rem,32vw,21.25rem)}.kez-proof__photo-card{margin:0}.kez-proof__media{height:min(34svh,18.75rem)}.kez-proof__caption{padding:var(--ds-spacing-3) var(--ds-spacing-4)}.kez-proof__review-card{display:flex}
.kez-reveal-card__surface{height:100%}.kez-recap-panel,.kez-course-card{gap:var(--ds-spacing-4)}.kez-recap-points,.kez-audience-list,.kez-course-points{margin:0;padding:0;list-style:none}.kez-course-card .kez-btn{align-self:stretch}
.kez-contact__eyebrow{align-self:stretch}.kez-contact__intro{max-width:var(--layout-reading)}.kez-contact__channels{justify-content:center}.kez-cta-block{width:fit-content}.kez-review-card{width:100%;height:100%}.kez-review-card--empty{justify-content:center;align-items:center;border-style:dashed}.kez-review-card__content{height:100%}.kez-review-card__author{margin-top:auto}
.kez-media-frame{position:relative;display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.kez-media-frame--fill{height:100%}.kez-media-frame--rounded{border-radius:var(--ds-radius-lg)}.kez-media-frame--loading,.kez-media-frame--empty{background:var(--pattern-hatch)}.kez-media-frame__image{width:100%;height:100%;object-fit:cover}.kez-media-frame__placeholder{padding:var(--ds-spacing-2) var(--ds-spacing-3);border:1px solid var(--ds-gray-alpha-400);border-radius:var(--ds-radius-sm);background:var(--ds-background-100)}
.kez-app-row{display:flex;flex-direction:row;align-items:center;gap:var(--ds-spacing-3);padding:var(--ds-spacing-3)}.kez-app-row--empty{padding-block:var(--ds-spacing-3)}.kez-app-row__content{flex:1}.kez-app-row__heading{justify-content:space-between}.kez-app-row__meta{flex:none}.kez-role-row{justify-content:space-between;padding-block:var(--ds-spacing-2)}.kez-role-row__identity{min-width:0}.kez-book-card__content{padding:var(--ds-spacing-4)}.kez-writing-link{justify-content:space-between;padding-block:var(--ds-spacing-3);border-bottom:1px solid var(--ds-gray-alpha-400)}.kez-writing-link--empty{color:var(--ds-secondary)}
.kez-timeline__list{width:100%}.kez-timeline-item{align-items:stretch}.kez-timeline-item__marker{flex:none;width:4rem}.kez-timeline-item__node{flex:none;width:.5625rem;height:.5625rem;border-radius:var(--ds-radius-full);background:var(--ds-gray-1000)}.kez-timeline-item__line{flex:1;width:1px;background:var(--ds-gray-alpha-400)}.kez-timeline-item__content{flex:1;padding-bottom:var(--ds-spacing-6)}
.kez-dots{width:100%}.kez-dots__dot{display:block;width:.5rem;height:.5rem;padding:0;border:0;border-radius:var(--ds-radius-full);background:var(--ds-gray-500);cursor:pointer}.kez-dots__dot.is-active{background:var(--ds-gray-1000)}.kez-photo-carousel{width:100%}.kez-photo-carousel__track{display:flex;width:100%;height:min(58vw,30rem);gap:var(--ds-spacing-4);overflow-x:auto;scroll-snap-type:x mandatory}.kez-photo-carousel__item{flex:none;width:85%;height:100%;scroll-snap-align:center}.kez-photo-carousel__item--empty{width:100%}
.kez-btn{height:2.5rem;padding:0 var(--ds-spacing-3);gap:var(--ds-spacing-2);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:500 .875rem/1.25rem var(--ds-font-sans);transition:background-color var(--ds-duration-state) var(--ds-ease),border-color var(--ds-duration-state) var(--ds-ease),color var(--ds-duration-state) var(--ds-ease),filter var(--ds-duration-state) var(--ds-ease)}
.kez-btn--sm{height:2rem;padding-inline:.375rem}.kez-btn--lg{height:3rem;padding-inline:.875rem;font-size:1rem}.kez-btn--primary{background:var(--ds-gray-1000);color:var(--ds-background-100);border-color:var(--ds-gray-1000)}.kez-btn--secondary{background:var(--ds-background-100);color:var(--ds-gray-1000);border-color:var(--ds-gray-alpha-400);border-radius:var(--ds-radius-sm)}.kez-btn--ghost{background:transparent;color:var(--ds-gray-1000);border-color:transparent}.kez-btn:hover{transform:none;box-shadow:none}.kez-btn--primary:hover{filter:brightness(.9)}.kez-btn--secondary:hover{background:var(--ds-gray-100);border-color:var(--ds-gray-alpha-500)}.kez-btn--ghost:hover{background:var(--ds-gray-alpha-100)}.kez-btn:active{transform:none;filter:brightness(.8)}.kez-btn:focus-visible{outline:0;box-shadow:var(--ds-focus-ring)}.kez-btn__icon{display:inline-flex;align-items:center;justify-content:center}.kez-btn__label{display:inline-flex;align-items:center}
@media (max-width:47.99rem){.geist-heading-48{font-size:2.5rem;line-height:3rem;letter-spacing:-.12rem}.gk-surface--pad-md{padding:var(--ds-spacing-4)}.gk-surface--pad-lg{padding:var(--ds-spacing-6)}}
@media (max-width:60rem){:root{--kez-header-h:98px}.kez-header__offset{height:calc(var(--kez-header-h) + 12px)}}
@media (max-width:37.5rem){.kez-header__nav-list,.kez-header__spacer{display:none}}
@media (max-width:26.25rem){.kez-header__nav-track{padding-inline:12px}.kez-header__logo{display:none}.kez-header .kez-header__portfolio{margin-left:0}.kez-header__nav-link{padding:0 12px}}
@media (max-width:21.25rem){:root{--kez-header-h:126px}.kez-header__nav-track{flex-direction:column}.kez-header__offset{height:calc(var(--kez-header-h) + 12px)}}
@media (prefers-reduced-motion:reduce){.kez-header__capsule,.kez-header__capsule::after,.kez-header__nav-link,.kez-header__nav-glow,.kez-header__nav-indicator{transition:none}}