/* keelson studio — 디자인 토큰 · Rev.3
   출처: dist/*.html 에서 실제로 쓰이는 값을 뽑음. 새로 지어낸 값 없음.
   Rev.3 추가: 상태색 3, 초점 치수, 겹 순서, 자동 어둠면(data-surface="auto").
   쓰는 법: <link rel="stylesheet" href="/design-system/tokens.css"> 후 var(--k-*) */

:root {
  /* ── 종이면 (index, work, about, case, contact) ───────────── */
  --k-paper:      #F1EFEC;  /* 바탕 */
  --k-paper-sunk: #EDEAE5;  /* 살짝 눌린 면 */
  --k-ink:        #121214;  /* 본문 글자 */
  --k-ink-mid:    #3A3833;  /* 보조 글자 */
  --k-ink-faint:  #8B867E;  /* 캡션, 비활성 */
  --k-line:       #D6D1C9;  /* 경계선 */
  --k-line-soft:  #C6C0B8;  /* 더 옅은 경계선 */
  --k-card:       #FFFFFF;  /* 카드면 — 종이 위에 한 겹 뜬 판 (관리자·OS 화면) */
  --k-flare:      #FF3B14;  /* 액센트 (종이면 전용) */

  /* ── 어둠면 (resume, 사례 상세) ───────────────────────────── */
  --k-deep:       #141416;  /* 바탕 */
  --k-deep-raise: #18181B;  /* 한 겹 올린 면 */
  --k-deep-card:  #22232A;  /* 카드 */
  --k-deep-line:  #2F3034;  /* 경계선 */
  --k-deep-ink:   #F2F1EF;  /* 본문 글자 */
  --k-deep-mid:   #A9A8A4;  /* 보조 글자 */
  --k-deep-faint: #8B8A86;  /* 캡션 */
  --k-ember:      #FF6A1A;  /* 액센트 (어둠면 전용) */
  --k-ember-lit:  #FF8A4C;  /* 밝은 액센트, 링크 hover */

  /* ── 상태색 — 폼 검증·시스템 알림 전용. 장식 금지 (Rev.3) ──── */
  --k-ok:         #1B7A4A;  /* 됐다 */
  --k-warn:       #7A5600;  /* 주의 */
  --k-err:        #B7280C;  /* 오류. 액센트 주황과 헷갈리지 않게 어둡다 */
  --k-ok-deep:    #4CC38A;  /* 어둠면 값 — 아래 블록에서 갈아끼움 */
  --k-warn-deep:  #E3A63C;
  --k-err-deep:   #FF7A5C;

  /* ── 매거진 종류 색 (관리자 달력·알약 전용, 홈페이지엔 안 씀) ── */
  --k-cat-mag:    #FF6A1A;  /* 매거진(피드) */
  --k-cat-talk:   #6FA8FF;  /* 토크 릴스 */
  --k-cat-film:   #B48CFF;  /* 필름 릴스 */
  --k-cat-web:    #4FD1C5;  /* 웹·앱 */
  --k-cat-star:   #FF4FA3;  /* 스타 — 브랜드가 된 연예인 (2026-09-04) */
  --k-cat-bot:    #161616;  /* 킬슨봇 — 틱톡, 손으로 올림 (2026-09-04) */
  --k-cat-prod:   #FF3B14;  /* 킬슨 프로덕트 — K.GUIDE 릴스 (2026-09-06) */

  /* ── 글씨체 ────────────────────────────────────────────────── */
  --k-face-display: Outfit, 'Pretendard Variable', Pretendard, sans-serif;
  --k-face-body:    'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --k-face-mono:    'Space Mono', ui-monospace, monospace;

  /* ── 글씨 크기 (화면 폭 따라 늘고 줆) ───────────────────────── */
  --k-t-hero:    clamp(44px, 8vw,   120px);
  --k-t-display: clamp(38px, 6vw,   96px);
  --k-t-section: clamp(34px, 5.2vw, 76px);
  --k-t-title:   clamp(26px, 3.6vw, 54px);
  --k-t-lead:    clamp(18px, 1.9vw, 27px);
  --k-t-body:    16px;
  --k-t-small:   clamp(14.5px, 1.25vw, 18px);
  --k-t-label:   12px;

  --k-lh-display: .96;   /* 큰 제목은 바짝 */
  --k-lh-body:    1.72;  /* 한글 본문은 넉넉히 */

  --k-ls-display: -.04em;
  --k-ls-title:   -.02em;
  --k-ls-label:    .14em;  /* 대문자 라벨은 벌려야 읽힘 */

  /* ── 모양 — 이 네 값뿐. 사이 값을 만들지 않는다 ─────────────── */
  --k-r-pill:  99px;   /* 버튼 */
  --k-r-tag:   999px;  /* 뱃지 */
  --k-r-lg:    24px;   /* 카드, 이미지 면 */
  --k-r-md:    14px;   /* 문서 도판, 알림 */
  --k-r-sm:    6px;    /* 스와치, 확인칸 */
  --k-hairline: 1px;

  /* ── 여백 ──────────────────────────────────────────────────── */
  --k-gutter:  max(clamp(28px, 7vw, 120px), 50vw - 800px); /* 본문 최대 1600px */
  --k-band:    clamp(64px, 9vh, 120px);   /* 섹션 위아래 */
  --k-hero:    min(78svh, 820px);         /* 히어로 높이 — 모든 장이 같아야 한다 */
  --k-hdr-h:   66px;                     /* 헤더 높이 — 히어로가 그 밑까지 깔린다 */
  --k-hero-pad: clamp(22px, 3.4vh, 44px); /* 히어로 아래 여백 — 글은 위에서 기준을 잡는다 */
  --k-hero-top: 55%;                     /* 히어로 글이 시작하는 높이 */
  --k-gap:     clamp(18px, 2.6vw, 40px);  /* 칸 사이 */
  --k-gap-sm:  clamp(12px, 1.8vw, 24px);

  /* ── 초점 — 값을 바꾸지 말고 이름으로 부른다 (Rev.3) ─────────── */
  --k-focus-w:   2px;   /* outline 굵기 */
  --k-focus-gap: 3px;   /* outline-offset */

  /* ── 겹 순서 — 이 네 층뿐 (Rev.3) ─────────────────────────── */
  --k-z-nav:   20;   /* 붙어 다니는 머리말 */
  --k-z-over:  40;   /* 펼침 메뉴, 툴팁 */
  --k-z-modal: 60;   /* 가림막과 대화상자 */
  --k-z-toast: 80;   /* 잠깐 떴다 지는 알림 */

  /* ── 유리 — 어둠면 전용 (Rev.4). 쓰는 자리 넷뿐: 워드마크 알약, 현재 메뉴 알약,
     상단 띠, 대화상자. 카드·입력창·버튼은 불투명. backdrop-filter 는 겹칠수록 프레임을 먹는다.
     값은 또박(semoo/src/ui/tokens.css)에서 같은 어둠 바탕으로 실측한 것을 엠버로 바꿔 옮겼다. */
  --k-glass-bar:        rgba(30, 30, 34, .26);     /* 흰색이 아니라 회청. 흰색을 얹으면 회색 판이 된다 */
  --k-glass-bar-blur:   blur(14px) brightness(1.12);
  --k-glass-edge-outer: rgba(255, 255, 255, .15);
  --k-glass-edge-inner: rgba(255, 255, 255, .42);  /* 윗면 하이라이트. 없으면 그냥 반투명 사각형 */
  --k-glass-lift:       0 -8px 28px -12px rgba(0, 0, 0, .3);
  --k-glass-pill:       linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 42%, rgba(255,106,26,.12) 100%);
  --k-glass-pill-blur:  blur(12px);
  --k-glass-pill-inset: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 12px rgba(255,255,255,.1);
  --k-glass-pill-edge:  rgba(255, 255, 255, .28);
  --k-glass-pill-mask:  linear-gradient(180deg, #000 0%, transparent 55%, #000 100%);  /* 옆 테두리를 지운다. 사방 테두리는 상자로 읽힌다 */
  --k-glass-nav:        rgba(255, 255, 255, .07);
  --k-blob-blur:        60px;
  --k-panel-shadow:     0 26px 60px rgba(0, 0, 0, .45);  /* 떠 있는 판. 뒤가 균일하게 어두울 때 유일한 단서 */

  /* ── 움직임 ────────────────────────────────────────────────── */
  --k-ease:      cubic-bezier(.16, .84, .24, 1);
  --k-dur-enter: .8s;   /* 스크롤 등장 */
  --k-dur-hover: .25s;  /* 손 올렸을 때 */
  --k-rise:      14px;  /* 등장할 때 올라오는 거리 */
}

/* 어둠면 안에서는 같은 이름이 다른 값을 가리킨다.
   <section data-surface="deep"> 처럼 감싸기만 하면 됨. */
[data-surface="deep"] {
  --k-paper:      var(--k-deep);
  --k-paper-sunk: var(--k-deep-raise);
  --k-ink:        var(--k-deep-ink);
  --k-ink-mid:    var(--k-deep-mid);
  --k-ink-faint:  var(--k-deep-faint);
  --k-line:       var(--k-deep-line);
  --k-line-soft:  var(--k-deep-line);
  --k-card:       var(--k-deep-card);
  --k-flare:      var(--k-ember);
  --k-ok:         var(--k-ok-deep);
  --k-warn:       var(--k-warn-deep);
  --k-err:        var(--k-err-deep);
}

/* 자동 어둠면 — 기기 설정을 따라간다 (Rev.3).
   <body data-surface="auto"> 로 두면 OS 가 어두울 때 알아서 넘어감. */
@media (prefers-color-scheme: dark) {
  [data-surface="auto"] {
    --k-paper:      var(--k-deep);
    --k-paper-sunk: var(--k-deep-raise);
    --k-ink:        var(--k-deep-ink);
    --k-ink-mid:    var(--k-deep-mid);
    --k-ink-faint:  var(--k-deep-faint);
    --k-line:       var(--k-deep-line);
    --k-line-soft:  var(--k-deep-line);
    --k-card:       var(--k-deep-card);
    --k-flare:      var(--k-ember);
    --k-ok:         var(--k-ok-deep);
    --k-warn:       var(--k-warn-deep);
    --k-err:        var(--k-err-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --k-dur-enter: .01ms; --k-dur-hover: .01ms; --k-rise: 0px; }
}

/* 헤더 글자 반전 — 검은 도형이 헤더 밑을 지날 때도 읽히게. 흰 글자에 difference 를 걸어 밝은 데선 먹, 어두운 데선 흰색으로 스스로 뒤집힌다.
   지금 쪽(주황)은 반전에서 뺀다 — 주황은 검정 위에서도 보인다. 헤더 자체는 isolation:isolate 라 유리(::before)와만 섞인다. */
#khdr a:not([aria-current="page"]), header.top .wm, header.hdr .wm,
header.top nav a:not([aria-current="page"]), header.hdr nav a:not([aria-current="page"]) {
  color: #fff !important; mix-blend-mode: difference; opacity: .92; }
#khdr a:not([aria-current="page"]):hover, header.top nav a:not([aria-current="page"]):hover, header.hdr nav a:not([aria-current="page"]):hover {
  color: #fff !important; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Portfolio / approved editorial mockup layout */
:root{
 --k-work-gutter:clamp(22px,4.2vw,84px);
 --k-work-band:clamp(72px,8vw,144px);
 --k-work-title:clamp(46px,8.5vw,144px);
 --k-work-intro:clamp(40px,4.3vw,68px);
 --k-work-copy:62ch;
 --k-work-phone:430px;
 --k-work-phone-stage:720px;
 --k-work-dialog:1800px;
 --k-work-ratio:3 / 2;
 --k-work-gap:clamp(32px,5vw,76px);
 --k-work-pad:clamp(24px,4vw,56px);
 --k-work-overlay:rgba(18,18,20,.92);
}

:root{--k-work-step-label:5.5em}

/* In-page administrator editing. */
:root{--k-edit-z:9200;--k-edit-height:72vh;--k-edit-touch:44px;--k-edit-checkbox:18px;--k-edit-button-pad:8px 12px;--k-edit-shadow:0 6px 32px rgba(18,18,20,.12);--k-edit-muted:.5;--k-edit-reserve:200px}

:root{--k-work-result:840px}

:root{--k-work-tall-hero:min(82vh,960px)}
:root{--k-scope-word-gap:.25em;--k-root-spread-ratio:933/661;--k-root-spread-width:112.0043%;--k-root-spread-left:-6.7524%;--k-root-spread-top:-5.7489%;--k-root-detail-ratio:605/850;--k-root-detail-width:106.4463%;--k-root-detail-left:-6.4463%;--k-device-bezel:10px;--k-device-stand:64px;--k-embed-height:740px}
/* Trim 600px of blank space from the 1284 × 2778 SHOWNY receipt visual. */
:root{--k-showny-receipt-ratio:1284/2178;--k-showny-receipt-top:-27.548209%}

:root{--k-photo-portrait-ratio:3/4;--k-photo-portrait-width:133.333333%;--k-photo-tall-ratio:9/16;--k-photo-tall-width:177.777778%;--k-photo-quarter-turn:90deg}

:root{--k-photo-card-width:66.666667%;--k-photo-card-height:150%}

/* Journey Kick: trim unused canvas beneath the actual application panels. */
:root{--k-jk-document-ratio:11/6;--k-jk-timeline-ratio:4/3;--k-jk-calendar-ratio:3/2;--k-jk-quote-ratio:3/2;}

/* Original-ratio portfolio masonry; computed positions stay in the collection. */
:root{--k-work-masonry-columns:3;--k-work-masonry-gap:48px}

:root{--k-work-zoom-headroom:104px;}

/* Original work-card values, retained for the three-column collection. */
:root{
 --k-work-card-title:clamp(19px,1.8vw,26px);
 --k-work-caption-top:14px;--k-work-caption-gap:12px;
 --k-work-number-size:15px;--k-work-meta-size:11px;--k-work-meta-gap:8px;
 --k-work-kind-size:10px;--k-work-kind-py:3px;--k-work-kind-px:8px;
 --k-work-by-top:4px;--k-work-badge-inset:16px;
 --k-work-badge-py:6px;--k-work-badge-px:11px;--k-work-badge-bg:rgba(255,255,255,.9);
 --k-work-module-icon:14px;--k-work-open-size:34px;
}

/* Desktop gallery captions: bottom shade, only on hover or keyboard focus. */
:root{
 --k-work-hover-pad:clamp(16px,1.7vw,28px);
 --k-work-hover-gap:8px;--k-work-hover-fade:56px;
 --k-work-hover-copy:14px;--k-work-hover-title:clamp(19px,1.8vw,26px);
 --k-work-hover-shade:linear-gradient(to bottom,rgba(12,12,14,0),rgba(12,12,14,.84) 32%,rgba(12,12,14,.96));
}

:root{--k-work-hover-compact-pad:12px;--k-work-hover-compact-gap:4px;--k-work-hover-compact-title:18px}


:root{--k-work-collection-leading:1.22}

:root{--k-work-nav-size:clamp(10px,1vw,15px);--k-work-nav-padding:calc(var(--k-gap-sm) / 2);--k-work-nav-gap:clamp(10px,2vw,28px);--k-work-nav-duration:280ms;--k-work-nav-ms:280}

:root{--k-work-paper:#fff}

/* A light glass surface keeps catalogue imagery visible behind the sticky menu. */
:root{
 --k-work-nav-glass:rgba(255,255,255,.64);
 --k-work-nav-blur:blur(16px) saturate(1.12);
 --k-work-nav-edge:rgba(18,18,20,.14);
}

/* Heritage sculpture keeps its native ratio in the existing hero composition. */
:root{
 --k-heritage-art-width:min(46vw,760px);
 --k-heritage-art-small-width:min(70vw,420px);
 --k-heritage-art-top:calc(var(--k-hero) * .2);
 --k-heritage-art-ratio:3/2;
}

/* Case-study width and breathing room, independent of WORK collection tokens. */
:root{
 --k-detail-content-width:1120px;
 --k-detail-media-width:1040px;
 --k-detail-portrait-width:680px;
 --k-detail-gutter:max(clamp(24px,6vw,88px),calc((100vw - var(--k-detail-content-width)) / 2));
 --k-detail-media-inset:max(var(--k-detail-gutter),calc((100vw - var(--k-detail-media-width)) / 2));
 --k-detail-section-space:clamp(80px,9vw,144px);
 --k-detail-hero-gap:clamp(32px,4vw,64px);
 --k-detail-heading-gap:clamp(32px,4.5vw,64px);
 --k-detail-scene-gap:clamp(32px,4vw,64px);
 --k-detail-gallery-gap:clamp(40px,5vw,80px);
 --k-detail-caption-gap:16px;
 --k-detail-banner-height:clamp(280px,48vw,680px);
 --k-detail-banner-width:1600px;
 --k-detail-banner-inset:clamp(16px,2.5vw,40px);
 --k-detail-intro-title:clamp(32px,4.6vw,64px);
 --k-detail-title-leading:1.12;
 --k-detail-lead:clamp(16px,1.5vw,20px);
 --k-detail-meta-value:14px;
}

/* Homepage editorial galleries: floating covers / aligned insight panels. */
:root{
 --k-editorial-space:clamp(80px,9vw,144px);
 --k-editorial-heading:clamp(52px,7.4vw,112px);
 --k-editorial-copy:34ch;
 --k-editorial-header-gap:clamp(28px,4vw,64px);
 --k-editorial-leading:1.35;
 --k-editorial-card:clamp(260px,29vw,440px);
 --k-editorial-insight-card:clamp(260px,30vw,460px);
 --k-editorial-card-mobile:72vw;
 --k-editorial-ratio:4/5;
 --k-editorial-insight-ratio:1/1;
 --k-editorial-gap:clamp(48px,8vw,144px);
 --k-editorial-insight-gap:clamp(24px,4vw,72px);
 --k-editorial-gallery-pad:clamp(72px,7vw,108px);
 --k-editorial-insight-pad:clamp(28px,3vw,48px);
 --k-editorial-caption-height:4em;
 --k-editorial-caption-floor-distance:clamp(72px,10svh,120px);
 --k-editorial-caption-floor-tilt:64deg;
 --k-editorial-caption-floor-blur:3px;
 --k-editorial-caption-floor-opacity:.28;
 --k-editorial-caption-floor-width:1.08;
 --k-editorial-ground-opacity:.22;
 --k-editorial-control:48px;
 --k-editorial-button-pad:10px 18px;
 --k-editorial-tilt-a:-4deg;
 --k-editorial-tilt-b:3deg;
 --k-editorial-tilt-c:-2deg;
 --k-editorial-tilt-d:4deg;
 --k-editorial-rise-a:-40px;
 --k-editorial-rise-b:54px;
 --k-editorial-rise-c:-26px;
 --k-editorial-rise-d:34px;
 --k-editorial-scale-b:.82;
 --k-editorial-scale-c:.94;
 --k-editorial-scale-d:.88;
 --k-editorial-perspective:1400px;
 --k-editorial-hover:1.025;
 --k-editorial-cover-title:clamp(16px,1.8vw,24px);
 --k-editorial-cover-shade:linear-gradient(180deg,transparent 50%,rgba(18,18,20,.86));
 --k-editorial-cover-shadow:0 2px 18px rgba(18,18,20,.2);
 --k-editorial-scene-pad:clamp(18px,2.4vh,32px);
 --k-editorial-scene-heading:clamp(42px,5.4vw,80px);
 --k-editorial-float-pad:clamp(36px,5vh,64px);
 --k-editorial-scene-gap:clamp(12px,2vh,24px);
 --k-editorial-pin-rise-a:-26px;--k-editorial-pin-rise-b:30px;
 --k-editorial-pin-rise-c:-18px;--k-editorial-pin-rise-d:22px;
}

/* The original raised magazine deck, opened up for legible covers. */
:root{
 --k-editorial-deck-card:clamp(260px,23vw,340px);
 --k-editorial-deck-overlap:calc((clamp(44px,6vw,96px) - var(--k-editorial-deck-card)) / 2);
 --k-editorial-deck-card-mobile:min(58vw,240px,26svh);
 --k-editorial-deck-mobile-peek:42vw;
 --k-editorial-deck-mobile-headroom:36px;
 --k-editorial-swipe-width:32px;
 --k-editorial-swipe-dot:5px;
 --k-editorial-swipe-duration:1.8s;
 --k-editorial-swipe-height:20px;
 --k-editorial-deck-lift:-80%;
 --k-editorial-deck-tilt:-26deg;
 --k-editorial-deck-raised-tilt:-14deg;
 --k-editorial-deck-mobile-tilt:-12deg;
 --k-editorial-deck-pad:calc(var(--k-editorial-deck-card) + var(--k-gap));
 --k-editorial-deck-scale:.96;
 --k-editorial-deck-enter-y:96px;
 --k-editorial-deck-stagger:.07s;
}

/* Magazine cover → introduction, preserving the original two-stage reveal. */
:root{
 --k-editorial-preview-lift:.34s;
 --k-editorial-preview-grow:.72s;
 --k-editorial-preview-cover:min(44vw,64svh,640px);
 --k-editorial-preview-cover-mobile:min(calc(100vw - var(--k-gutter) * 2),60svh);
 --k-editorial-preview-copy:36ch;
 --k-editorial-preview-title:clamp(26px,2.8vw,42px);
 --k-editorial-preview-pad:clamp(24px,4vw,64px);
 --k-editorial-preview-gap:clamp(24px,4vw,64px);
}

/* Approved ABOUT, SERVICE and studio type system. */
.studio-about,.studio-service,.studio-identity{
  --k-identity-paper:#F1EFEC;
  --k-identity-ink:#121214;
  --k-identity-flare:#FF3B14;
  --k-identity-line:#D6D1C9;
  --k-identity-face:'Keelson Sans','Pretendard Variable',sans-serif;
  --k-identity-pad:clamp(20px,2.4vw,38px);
  --k-identity-gap:clamp(26px,3vw,48px);
  --k-identity-top:clamp(72px,8vw,128px);
  --k-identity-type:clamp(64px,9.2vw,162px);
  --k-identity-title:clamp(30px,3.5vw,56px);
  --k-identity-label:10px;
  --k-identity-meta:clamp(10px,.9vw,13px);
  --k-identity-caption:clamp(14px,1.15vw,17px);
  --k-identity-arrow:26px;
  --k-identity-grid-label:21px;
  --k-identity-section-offset:100px;
  --k-identity-photo-ratio:4 / 3;
  --k-identity-tracking:.12em;
  --k-identity-compact:14px;
}
@media(max-width:760px){
  .studio-about,.studio-service,.studio-identity{--k-identity-type:clamp(78px,20vw,150px);--k-identity-title:34px;--k-identity-photo-ratio:3 / 2}
}
.studio-about,.studio-service,.studio-identity{
  --k-client-title:clamp(28px,3.1vw,48px);
  --k-client-space:clamp(34px,4vw,64px);
  --k-client-mark-height:26px;
  --k-client-mark-width:96px;
  --k-partner-mark-width:160px;
  --k-client-row:80px;
  --k-client-label:11px;
  --k-client-grid-gap:clamp(14px,1.8vw,28px);
  --k-client-paper:#FAF9F6;
  --k-client-ink:#121214;
  --k-client-rule:rgba(18,18,20,.12);
  --k-client-muted:rgba(18,18,20,.60);
}
@media(max-width:760px){
  .studio-about,.studio-service,.studio-identity{--k-client-mark-height:22px;--k-client-mark-width:76px;--k-client-row:72px;--k-client-grid-gap:16px;--k-client-label:9px}
}
.studio-about,.studio-service,.studio-identity{
 --k-face-specimen:'Keelson Sans',sans-serif; --k-face-body:'Pretendard',sans-serif;
 --k-type-gutter:clamp(24px,4.8vw,88px); --k-type-band:clamp(72px,8vw,128px);
 --k-type-hero:clamp(96px,17.2vw,270px); --k-type-heading:clamp(40px,5.5vw,84px);
 --k-type-row:clamp(30px,4.2vw,66px); --k-type-small:13px; --k-type-logo:26px;
 --k-type-touch:44px; --k-type-pad:24px; --k-type-inset:clamp(24px,4vw,64px);
 --k-type-preview:clamp(48px,7.5vw,112px); --k-type-tracking:-.03em;
 --k-type-leading:1.25; --k-type-weight:500; --k-type-glyph:clamp(150px,23vw,340px);
 --k-type-outline:2px; --k-type-space-1:8px; --k-type-space-2:16px;
 --k-type-nav:72px; --k-type-baseline:1.08; --k-type-width:1680px;
 --k-type-poster:clamp(40px,6vw,90px); --k-type-code:13px;
}

/* Shared header ember — retain the homepage's color, trail and flicker. */
:root{
 --k-header-pad:16px;
 --k-header-face-body:'Pretendard Variable',Pretendard,system-ui,sans-serif;
 --k-header-logo:19px;
 --k-header-logo-weight:600;
 --k-header-nav-weight:700;
 --k-header-current-weight:800;
 --k-header-nav-gap:clamp(12px,2vw,26px);
 --k-header-nav-tracking:.12em;
 --k-header-logo-tracking:-.03em;
 --k-header-glass:rgba(22,27,36,.26);
 --k-header-glass-shadow:inset 0 .4px 0 rgba(255,255,255,.15),inset 0 1.2px 0 rgba(255,255,255,.42),0 -8px 28px -12px rgba(0,0,0,.3);
 --k-header-ink:#fff;
 --k-header-idle-opacity:.42;
 --k-header-logo-opacity:.92;
 --k-header-mobile-size:clamp(28px,4.8svh,42px);
 --k-header-mobile-row:clamp(5px,1.05svh,9px);
 --k-header-mobile-delay-7:.36s;
 --k-header-mobile-delay-8:.41s;
 --k-fuse-color:#FF3B14;
 --k-fuse-trail:linear-gradient(90deg,rgba(255,59,20,0),rgba(255,59,20,.55) 40%,#FF3B14);
 --k-fuse-glow:0 0 6px 2px rgba(255,59,20,.75),0 0 16px 4px rgba(255,59,20,.35);
 --k-fuse-dot:5px;
 --k-fuse-offset:2px;
 --k-fuse-follow:.12s;
 --k-fuse-flicker:.18s;
 --k-fuse-pulse:scale(1.35) translateY(-.5px);
 --k-fuse-spark:2px;
 --k-fuse-spark-color:#FFB199;
 --k-fuse-spark-time:.5s;
 --k-fuse-spark-x:-10px;
 --k-fuse-spark-drift:-8px;
 --k-fuse-spark-y:-9px;
}

/* Local SEO navigation review: dimensions shared by proposal and review controls. */
:root {
  --k-preview-bar-pad: 6px var(--k-gutter);
  --k-preview-link-pad: 6px 4px;
  --k-preview-touch: 44px;
  --k-preview-gap: 8px;
  --k-preview-reserve: 108px;
  --k-preview-anchor: 90px;
  --k-preview-copy: 58ch;
  --k-preview-title-lh: 1.3;
  --k-preview-underline: 5px;
  --k-preview-case-ratio: 4 / 3;
}

:root { --k-preview-image-scale: 1.025; }

:root { --k-preview-thumb: 200px; --k-preview-thumb-mobile: 128px; }

/* Practice folio: scale, spacing and motion for the local editorial proposal. */
:root {
 --k-practice-title:clamp(42px,6.4vw,100px); --k-practice-leading:1.08;
 --k-practice-tracking:-.055em; --k-practice-columns:1.34fr 1fr;
 --k-practice-gap:clamp(28px,5vw,80px); --k-practice-head-gap:clamp(36px,5vw,72px);
 --k-practice-choice:clamp(22px,2.1vw,34px); --k-practice-choice-pad:clamp(17px,2vw,30px);
 --k-practice-ratio:1.15; --k-practice-mobile-ratio:1.35;
 --k-practice-caption:20px; --k-practice-caption-gap:16px;
 --k-practice-caption-height:108px; --k-practice-arrow:52px;
 --k-practice-reveal:850ms; --k-practice-caption-time:700ms;
 --k-practice-delay:90ms; --k-practice-ease:cubic-bezier(.22,1,.36,1);
 --k-practice-pan:12px; --k-practice-image-scale:1.045;
 --k-practice-mobile-choice:20px; --k-practice-mobile-pad:14px;
 --k-practice-rise:28px; --k-practice-offset:8px;
}

:root { --k-practice-viewport-reserve:280px; --k-practice-image-min:280px; --k-practice-mobile-image-max:260px; --k-practice-mobile-caption:76px; }

:root { --k-construction-paper:#F2F1EC; }

/* Hero-related structural assembly: draw, stack, resolve into the real work. */
:root {
 --k-assembly-duration:2200ms; --k-assembly-draw:900ms;
 --k-assembly-step:105ms; --k-assembly-lift:70px;
 --k-assembly-stroke:1.5; --k-assembly-rib-opacity:.28;
 --k-assembly-wash:.06;
}

:root {
 --k-service-title:clamp(30px,4vw,56px); --k-service-gap:24px;
 --k-service-build:clamp(128px,24vw,300px); --k-service-choice:clamp(14px,1.5vw,20px);
 --k-service-image:clamp(180px,32vw,460px);
}

:root { --k-circuit-duration:1000ms; --k-circuit-step:65ms; --k-circuit-envelope-opacity:.22; --k-circuit-envelope-dash:3 5; --k-circuit-pin-opacity:.6; --k-circuit-height:clamp(100px,14vw,170px); }

:root { --k-solid-duration:1350ms; --k-solid-unit:24px; --k-solid-perspective:800px; --k-solid-tilt-x:-22deg; --k-solid-tilt-y:-35deg; --k-solid-side:#A7270D; --k-solid-edge:#DD3E19; }

:root { --k-service-stage:clamp(200px,min(40vw,42vh),480px); --k-service-thumb:clamp(88px,12vw,140px); --k-service-thumb-height:clamp(68px,9vw,105px); }

@media(min-width:801px) and (max-height:700px) { :root { --k-service-title:36px; --k-service-gap:12px; } }

/* Service archive: physical drawers with a readable project close-up. */
:root {
 --k-cabinet-height:clamp(430px,49vw,650px);
 --k-cabinet-columns:1.2fr 1fr;
 --k-cabinet-case-width:440px;
 --k-cabinet-case-ratio:4 / 3;
 --k-cabinet-case-shift:-3%;
 --k-cabinet-reveal:680ms;
 --k-cabinet-image-radius:2px;
}
@media(max-width:800px) { :root { --k-cabinet-height:430px; --k-cabinet-case-width:380px; } }
@media(max-width:500px) { :root { --k-cabinet-height:420px; --k-cabinet-case-width:100%; } }

@media(min-width:801px) and (max-height:700px) {
 :root { --k-cabinet-height:clamp(320px,calc(100svh - 235px),440px); --k-cabinet-case-width:350px; }
}

:root { --k-drawer-label-width:420px; --k-drawer-label-height:112px; --k-drawer-label-size:36px; --k-drawer-label-inset:24px; --k-drawer-label-ink:#271208; }

:root { --k-case-flight-duration:920ms; --k-case-flight-z:40; }

/* Portfolio editorial detail — approved SENO composition, 2026-09-29. */
:root{
 --k-detail-story-space:clamp(38px,5vw,64px);
 --k-detail-story-gap:clamp(26px,4.5vw,64px);
 --k-detail-story-title:clamp(40px,6.5vw,88px);
 --k-detail-story-leading:1.02;
 --k-detail-story-copy-leading:1.6;
 --k-detail-story-copy-size:16px;
 --k-detail-story-label:80px;
 --k-detail-story-meta-gap:13px;
}