/* =========================================================================
   STED — screen.css
   Hand-authored (no build step).
   Measurements are exact Figma values, scaled with --u so the 1920 (PC) /
   393 (mobile) artboards reproduce proportionally at any viewport width.
   calc(N * var(--u)) == "N design px".
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
    --black: #000000;
    --white: #ffffff;
    --yellow: #ffd700;            /* Figma value (not #FFD000) */

    --fg: var(--black);
    --bg: var(--white);

    --font-en: "Bricolage Grotesque", "Apple SD Gothic Neo", sans-serif;
    --font-kr: "Apple SD Gothic Neo", sans-serif;

    /* design px unit (PC artboard). Capped at 1px: above 1920 the design
       stops scaling — type/sizes stay at Figma values. */
    --u: min(calc(100vw / 1920), 1px);
    /* text unit: same as --u — ALL type scales proportionally with the
       viewport (dfy.co.kr 방식, 2026-07-16 확정 — 고정 텍스트는 이 디자인과 안 맞음).
       Kept as a separate var in case reading-size type needs decoupling later. */
    --t: var(--u);
    /* side margin: always 50 design px — beyond 1920 it stays 50px and the
       content area stretches with the browser (type stays fixed via --u cap). */
    --margin: calc(50 * var(--u));

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 767px) {
    :root {
        --u: calc(100vw / 393);   /* mobile artboard */
        --t: var(--u);            /* mobile: text scales with the artboard */
        --margin: calc(20 * var(--u));
    }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    margin: 0;
    overflow-x: clip;              /* off-canvas doodle tails must not scroll */
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-en);
    font-size: calc(18 * var(--t));
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "opsz" 14, "wdth" 100;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* <picture> must not add an inline box */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* MO 전용 줄바꿈 (Figma 모바일 프레임의 고정 2줄 카피 재현) */
.br-mo { display: none; }
@media (max-width: 767px) { .br-mo { display: inline; } }

/* =========================================================================
   Navigation — black text over hero / white pages (all pages)
   PC: s_logo 80×25 @(50,50) · menu 18 SemiBold, right-aligned to 1870 @top52
   MO: s_logo 60×19 @(20,26) · yellow pill "menu" 70×30 r19 @(303,20)
   ========================================================================= */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    color: var(--black);
    /* dfy.co.kr-style: hides on scroll down, returns on scroll up (main.js) */
    transition: transform .3s var(--ease);
}
.site-nav.is-hidden { transform: translateY(-100%); }
.site-nav__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* Nav sizes are FIXED real px on desktop (ref. dfy.co.kr) — they don't
       shrink with the browser; only the mobile breakpoint switches design. */
    padding: 25px var(--margin) 0;
}
.site-nav__logo { display: block; }
.site-nav__logo svg { width: 80px; height: 25px; display: block; }
.site-nav__menu { margin-top: 2px; }
.site-nav__menu ul { display: flex; gap: 30px; }
.site-nav__menu a {
    font-weight: 500;   /* Figma menu 컴포넌트 실측 (Bricolage Medium, 2026-07-16) */
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;   /* WORK ABOUT STORY (2026-07-16 확정) */
}
.site-nav__menu .nav-current a {
    text-decoration: underline;
    text-decoration-thickness: .1em;
    text-underline-position: from-font;
}
.site-nav__burger { display: none; }

/* Mobile overlay — Figma 3-main-mo_menu selected (1695:1145):
   top 500px khaki (#736E4E) panel + black 80% below (page shows through) ·
   items 40 Regular lh1.35 yellow, centered, from y149, gap 20 ·
   current page underlined (6%) · "close" pill replaces "menu" @(right 20, top 20) */
.site-nav__overlay {
    position: fixed; inset: 0; z-index: 200;
    background: #736e4e;   /* 2026-07-17 리디자인: 카키 풀스크린 (딤 폐기) */
}
/* 모바일 메뉴 인터랙션 (2026-07-17 v3 — 리디자인 반영):
   열림 = 오버레이 전체가 위→아래 슬라이드 0.6s cubic-bezier(.4,0,0,1) (dfy layer--2)
   + 메뉴명 마스크 롤 (OH 스태거) · 닫힘 = dfy처럼 디졸브 아웃 0.3s ·
   메뉴명 클릭 = 오버레이가 위로 접힌 뒤 이동 (커튼, 기존 유지) */
html.js-anim .site-nav__overlay {
    transform: translateY(-100%);
    transition: transform .6s cubic-bezier(.4, 0, 0, 1);
}
html.js-anim .site-nav__overlay.is-open { transform: translateY(0); }
html.js-anim .site-nav__overlay.is-closing {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, 0, 1);   /* dfy close-ani */
}
html.js-anim .site-nav__close { z-index: 3; }   /* 메뉴 레이어(나중 형제)가 덮지 않도록 항상 위 */

/* 페이지 퇴장 와이프 (2026-07-18, ref. dfy /work 썸네일 클릭):
   하단→상단으로 카키 레이어가 덮으며(0.6s .4,0,0,1) 이동 —
   완전히 덮인 뒤 이동해 도착 커버(카키)와 무단절 연결. 요소는 main.js 생성 */
html.js-anim .page-leave {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg);   /* 2026-07-18: 썸네일 전환은 화이트 (메뉴 전환은 카키 유지) */
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.4, 0, 0, 1);
    pointer-events: none;
}
html.js-anim .page-leave.is-up { transform: translateY(0); }
/* 화이트 도착 변형 (썸네일 전환): 커버 화이트 + 첫 화면 콘텐츠가
   기존 위치보다 살짝(60) 아래에서 커튼과 함께 올라오며 등장 */
html.js-anim.is-arriving.is-arriving-white::before { background: var(--bg); }   /* 카키 규칙보다 높은 특이성 */
/* 화이트 변형은 커튼 없이 즉시 사라짐 (2026-07-18 — 커튼+슬라이드 중복이 과해서):
   덮인 화이트가 0.25s로 걷히고 콘텐츠 슬라이드 업만 남음 */
html.js-anim.is-arriving.is-arriving-white.is-arrived::before {
    /* 커버·페이지 배경이 같은 화이트 → 사라지는 모션 없이 즉시 제거
       (페이드가 오히려 이미지 위에서 번쩍임으로 보였음) — 콘텐츠
       슬라이드 업만 등장 모션으로 남음 */
    display: none;
}
html.js-anim.is-arriving-white .site-main {
    transform: translateY(calc(60 * var(--u)));
}
html.js-anim.is-arriving-white.is-arrived .site-main {
    transform: translateY(0);
    transition: transform .9s cubic-bezier(.16, 1, .35, 1);
}

/* 페이지 도착 커버 (2026-07-17) — 메뉴 클릭 이동 시 새 문서가 첫 페인트부터
   카키로 시작 (화이트 플래시 방지), 로드 후 인트로 커튼과 동일하게 걷힘 */
html.js-anim.is-arriving::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 400;
    background: #736e4e;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
html.js-anim.is-arriving.is-arrived::before {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);   /* 아래→위 커튼 (인트로와 동일) */
    transition: clip-path .5s cubic-bezier(.4, 0, 0, 1);
    pointer-events: none;
}
html.js-anim .site-nav__overlay-menu li { overflow: hidden; }
html.js-anim .site-nav__overlay-menu li a {
    display: inline-block;   /* 인라인엔 transform 무시 (빅로고 때와 같은 함정) */
    transform: translateY(102%);
}
/* 메뉴명·하단 텍스트는 레이어가 완전히 덮인 뒤(0.6s) 등장 (dfy 순서, 2026-07-17) */
html.js-anim .site-nav__overlay.is-open .site-nav__overlay-menu li a {
    transform: translateY(0);
    transition: transform 1s cubic-bezier(.16, 1, .35, 1) .65s;   /* 2026-07-18 통일 */
}
html.js-anim .site-nav__overlay.is-open .site-nav__overlay-menu li:nth-child(2) a { transition-delay: .6925s; }
html.js-anim .site-nav__overlay.is-open .site-nav__overlay-menu li:nth-child(3) a { transition-delay: .735s; }
/* 하단 STED, STARTED. — dfy mheader__bot 실측: opacity .8s (.15,.85,.45,1) 딜레이 .93s */
html.js-anim .site-nav__overlay-tag { opacity: 0; }
html.js-anim .site-nav__overlay.is-open .site-nav__overlay-tag {
    opacity: 1;
    transition: opacity .8s cubic-bezier(.15, .85, .45, 1) .93s;
}
.site-nav__overlay::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(500 * var(--u));
    background: #736e4e;
}
.site-nav__overlay[hidden] { display: none; }
/* 2026-07-17 리디자인 (1695:1145 재실측): 좌측 정렬 x21 · 첫 항목 y355 ·
   피치 48 (40px lh1.0 + 갭 8) · 언더라인 없음 · 로고/하단 태그라인 추가 */
.site-nav__overlay-logo {
    position: absolute;
    left: calc(20 * var(--u));
    top: calc(26 * var(--u));
    color: var(--yellow);   /* 2026-07-17 디자인 확인: 옐로우 로고 */
    z-index: 2;
}
.site-nav__overlay-logo svg {
    width: calc(60 * var(--u));
    height: calc(19 * var(--u));
    display: block;
}
.site-nav__overlay-menu {
    /* 메뉴 블록은 뷰포트 세로 가운데 (Figma: 블록 중심 423 ≈ 프레임 중심 426) */
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(21 * var(--u));
}
.site-nav__overlay-menu li + li { margin-top: calc(8 * var(--u)); }
.site-nav__overlay-menu a {
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: 1;
    color: var(--yellow);
    text-transform: uppercase;   /* Figma 1695:1161-1163 — close 필은 소문자 유지 */
}
.site-nav__overlay-tag {
    position: absolute;
    left: calc(21 * var(--u));
    bottom: calc(20 * var(--u));
    z-index: 2;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1;
    color: var(--yellow);
    text-transform: uppercase;
}
.site-nav__close {
    position: absolute; top: calc(20 * var(--u)); right: var(--margin);
    z-index: 1;    /* overlay-menu(later sibling)가 덮지 않도록 */
    background: var(--yellow); color: var(--black);
    border-radius: calc(19 * var(--u));
    width: calc(70 * var(--u)); height: calc(30 * var(--u));
    display: grid; place-items: center;
    font-weight: 500; font-size: calc(16 * var(--t)); line-height: 1.35;
}

@media (max-width: 767px) {
    .site-nav__inner { padding-top: calc(20 * var(--u)); }
    .site-nav__logo svg { width: calc(60 * var(--u)); height: calc(19 * var(--u)); margin-top: calc(6 * var(--u)); }
    .site-nav__menu { display: none; }
    .site-nav__burger {
        display: grid; place-items: center;
        background: var(--yellow);
        border-radius: calc(19 * var(--u));
        width: calc(70 * var(--u)); height: calc(30 * var(--u));
        font-weight: 500; font-size: calc(16 * var(--t)); line-height: 1.35;
    }
}

/* =========================================================================
   Intro splash (home) — 2026-07-18 리디자인 (Figma 1-main-pc 2363:1062 →
   1-main-pc-01 2363:1072 실측) / MO는 기존 디자인(1695:730) 유지
   PC: 옐로우 풀스크린 · ©2026 우상단 50px Regular (ls -1px) ·
       CREATIVE/CONSULTANCY 260px Regular lh1.0 — 시작 x254/-270에서
       서로 교차하며 x27로 자동 정렬 (1.6s, .16,1,.35,1)
   상단 로딩바: OH 프리로더 라인 실측 — 0→58% (0.7s) → 100% (0.9s~1.5s),
   ease (.76,0,.24,1). 바가 다 차면 t=1.6s 커튼 퇴장(dfy clip-path 0.5s)
   ========================================================================= */
.intro {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--yellow);
    color: var(--black);
    font-weight: 400;                   /* 2026-07-18: Regular (Figma) */
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path .5s cubic-bezier(.4, 0, 0, 1);   /* dfy 커튼 */
}
.intro.is-done {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);   /* 아래변이 위로 접혀 올라감 */
    pointer-events: none;
}
/* 인트로 동안 로고·메뉴 숨김 (nav는 별도 스태킹이라 z-index만으론 안 덮임) */
body.intro-active .site-nav { visibility: hidden; }
/* 상단 로딩바 (ref. OH .preloader_line) */
.intro__bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
}
.intro__bar i {
    display: block;
    height: 100%;
    background: #736E4E;    /* 2026-07-18: 블랙 → 카키 */
    transform: translateX(-100%);
    transition: transform .7s cubic-bezier(.76, 0, .24, 1);   /* OH ease-transition */
}
.intro.is-load1 .intro__bar i { transform: translateX(-42%); }   /* 58% */
.intro.is-load2 .intro__bar i { transform: translateX(0); transition-duration: .6s; }
.intro__year {
    position: absolute;
    top: calc(37 * var(--u));           /* cap-top 50 보정 (50px lh1.2) */
    right: var(--margin);
    font-size: calc(50 * var(--u));
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
/* 타이포 — 최종 위치(x27) 고정, 등장은 마스크 롤 (2026-07-20 B안 확정 —
   A안 좌우 교차 슬라이드 폐기, 코드는 aede0da~360ddcd 참조) */
.intro__word {
    position: absolute;
    left: calc(27 * var(--u));
    font-size: calc(260 * var(--u));
    line-height: 1;
}
/* 하단 앵커: Figma baseline 812/1030 → 라인박스 bottom 환산 (박스하단 = baseline+46.8) */
.intro__word--creative { bottom: calc(221 * var(--u)); }
.intro__word--consultancy { bottom: calc(3 * var(--u)); }
/* 마스크 롤 (전 텍스트 공통 — OH 스크롤 리빌 스펙) */
.intro__year, .intro__word { overflow: hidden; }
.intro__roll {
    display: block;
    transform: translateY(102%);
    transition: transform 1s cubic-bezier(.16, 1, .35, 1);
}
.intro.is-in .intro__roll { transform: translateY(0); }
@media (max-width: 767px) {
    /* MO 기존 레이아웃 (1695:730) — 2026-07-18 두께 변경: SemiBold → Regular
       (base 400 상속). 롤은 공통 규칙 사용 */
    .intro__year, .intro__word { font-size: calc(50 * var(--u)); line-height: 1; }
    .intro__year { top: calc(7 * var(--u)); right: auto; left: var(--margin); line-height: 1.2; }
    .intro__word { left: var(--margin); right: auto; }
    .intro__word--creative { bottom: calc(59 * var(--u)); }
    .intro__word--consultancy { bottom: calc(11.5 * var(--u)); }
}

/* =========================================================================
   엔트런스 애니메이션 (2026-07-17 — oharchitecture.com.au 실측 재현)
   html.js-anim = JS 구동·모션 허용 시에만 (default.hbs 인라인 스크립트).
   body.is-entered 가 트리거 — 홈은 인트로 디졸브 시점(t=1.6s), 그 외 즉시.
   - 로고: 마스크 롤 y120%→0, 1s cubic-bezier(.16,1,.35,1), +0.1s
   - GNB 아이템: y200%→0, 동일 이즈, +0.2s부터 스태거 0.0625
   - 히어로 빅로고: 인트로 빅타이포와 동일 롤 (y102%→0, .875s (.83,0,.17,1))
   - 카드 리빌(IntersectionObserver, 90% 진입 1회): 커버 페이드 .6s +
     이미지 scale 1.05→1 1.2s (.16,1,.35,1)
   ========================================================================= */
/* 로고/GNB — dfy.co.kr 방식 (2026-07-17 변경): 위에서 아래로 드롭 + 페이드,
   1s cubic-bezier(.15,.85,.45,1), 딜레이 .28s부터 스태거 .13 (dfy CSS 실측값).
   위치·마크업은 그대로, 등장 효과만. */
html.js-anim .site-nav__logo svg,
html.js-anim .site-nav__menu li a,
html.js-anim .site-nav__burger {
    opacity: 0;
    transform: translateY(-30px);
    transition:
        transform 1s cubic-bezier(.15, .85, .45, 1) .28s,
        opacity 1s cubic-bezier(.15, .85, .45, 1) .28s;
}
html.js-anim .site-nav__menu li a { display: block; }
/* 2026-07-17: 메뉴 스태거(.41/.54) 제거 — 전 항목 동시 등장 (.28s) */
html.js-anim .hero__logo { overflow: hidden; }
html.js-anim .hero__logo--pc,
html.js-anim .hero__logo--mo {
    transform: translateY(102%);
    /* 커튼(0.5s)이 다 걷힌 뒤 롤 시작 — 인트로 하단 카피처럼 무지에서 롤 등장 (2026-07-17) */
    transition: transform 1s cubic-bezier(.16, 1, .35, 1) .5s;   /* 2026-07-18 통일 */
}
html.js-anim body.is-entered .site-nav__logo svg,
html.js-anim body.is-entered .site-nav__menu li a,
html.js-anim body.is-entered .site-nav__burger { opacity: 1; transform: translateY(0); }
html.js-anim body.is-entered .hero__logo--pc,
html.js-anim body.is-entered .hero__logo--mo { transform: translateY(0); }
/* 히어로 로고: MO에서 --pc는 display none이지만 transform 무해 */

/* 페이지 헤드라인 롤 (2026-07-17) — 인트로 빅타이포와 동일 모션.
   대상: 홈 STEADY,INSPIRED. / Work·Story 인트로 / About 히어로 (t-roll 마크업).
   트리거: 엔트런스(is-entered) + 뷰포트 진입(is-revealed, IO) 둘 다 충족 시
   — 상단 헤드라인은 로드 직후, 홈(폴드 아래)은 스크롤 도달 시 1회 */
html.js-anim .t-roll { overflow: hidden; }
html.js-anim .t-roll__in {
    display: block;
    transform: translateY(102%);
    transition: transform 1s cubic-bezier(.16, 1, .35, 1);   /* 2026-07-18 통일 */
}
html.js-anim body.is-entered .t-roll.is-revealed .t-roll__in { transform: translateY(0); }

/* 호버 롤 (2026-07-17, ref. OH 링크 호버) — 텍스트가 위로 롤아웃되며
   아래에서 복제가 올라옴. 마크업(스택 2벌)은 main.js가 생성 (js-anim 시에만).
   복제 행은 absolute(top 100%)라 요소 높이에 영향 없음 — 필/버튼 레이아웃 유지 */
/* 마스크 = 스택(높이 한 줄), 이동 = 행 — 필처럼 텍스트보다 큰 요소에서도
   복제가 비치지 않음 (2026-07-17 Story 탭 수정) */
.hover-roll__stack {
    position: relative;
    display: block;
    overflow: hidden;
}
.hover-roll__stack > span {
    display: block;
    transition: transform .45s cubic-bezier(.16, 1, .35, 1);
}
.hover-roll__stack > span + span {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
.hover-roll:hover .hover-roll__stack > span,
.hover-roll:focus-visible .hover-roll__stack > span { transform: translateY(-100%); }
/* 푸터 Back to top: 화살표는 스택 밖(버튼 flex 자식) — 버튼의 gap 10이 그대로 적용됨 */

/* 카드 리빌 (2026-07-18, ref. wolffolins.com/work — 옐로우 커버 전환 삭제):
   카드 전체(이미지+캡션)가 아래에서 살짝(40px) 올라오며 정렬 —
   페이드 없음 (화이트 번쩍임 제거, 이동 모션만). 뷰포트 진입 1회 */
html.js-anim .featured__item,
html.js-anim .work-list__item,
html.js-anim .news-list__item {
    transform: translateY(calc(40 * var(--u)));
    transition: transform .9s cubic-bezier(.16, 1, .35, 1);
}
html.js-anim .featured__item.is-revealed,
html.js-anim .work-list__item.is-revealed,
html.js-anim .news-list__item.is-revealed {
    transform: translateY(0);
}
/* About 그룹 리빌 (2026-07-21): 콘텐츠가 그룹 단위(섹션 헤드 묶음·사진·통계 등)로
   카드 리빌과 동일 모션으로 등장 — data-rev-group 동기화는 main.js */
html.js-anim .a-rev {
    transform: translateY(calc(60 * var(--u)));   /* 2026-07-21: 40 → 60 (About만, 카드 리빌은 40 유지) */
    transition: transform .9s cubic-bezier(.16, 1, .35, 1);
}
html.js-anim .a-rev.is-revealed { transform: translateY(0); }
/* About 이미지 패럴랙스 래퍼 (main.js 삽입) — 리빌(.a-rev)과 transform 분리 */
.aplx { display: block; }

/* 썸네일 이미지 패럴랙스 (2026-07-18, ref. bymonolog — 스크롤에 살짝 위아래).
   main.js가 이미지를 .plx 래퍼로 감싸고 래퍼만 translate — 이미지 자체의
   hover 줌·리빌 keyframes와 충돌 없음. 오버스캔 ±6%, 이동 ±5% */
html.js-anim .plx {
    display: block;
    position: relative;
    height: 112%;
    top: -6%;
    will-change: transform;
}

/* =========================================================================
   히어로 핀 + 화이트 커버 (2026-07-17 — 홈 히어로·About KV, PC/MO 공통)
   히어로가 상단에 고정(sticky)되고, 뒤따르는 .page-cover(화이트 패널)가
   스크롤과 함께 위로 덮으며 올라옴 (ref. oharchitecture.com.au 히어로).
   flow-root: 첫 자식 margin-top이 커버 밖으로 collapse되어 히어로가
   비쳐 보이는 것 방지 (푸터 sticky 때와 같은 함정).
   ========================================================================= */
/* 컴파운드 선택자: 뒤에 오는 .hero { position: relative } 를 이기기 위함 */
.hero.hero--pin,
.about-kv.about-kv--pin { position: sticky; top: 0; }
/* 히어로 틴트 (2026-07-17, ref. house.paisana.studio — 커버가 덮을수록 점점 진해짐.
   paisana는 히어로 이미지 opacity를 scrub으로 0까지 → 동일한 인상을 오버레이로 재현.
   진행도(--tint)는 main.js가 커버-히어로 겹침 비율로 계산 (15% 데드존 후 선형).
   컬러 = 화이트 확정 (2026-07-20 — ?tint=yellow 비교 파라미터 제거) */
.hero--pin::after,
.about-kv--pin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    opacity: var(--tint, 0);
    pointer-events: none;
    z-index: 2;
}
.page-cover {
    position: relative;
    background: var(--bg);
    display: flow-root;
}

/* =========================================================================
   Site main sits above sticky footer (home reveal)
   ========================================================================= */
.site-main { position: relative; z-index: 1; background: var(--bg); }

/* =========================================================================
   Hero (home) — illustration 1920×1080 + yellow G_logo
   PC: logo 1820×494 @(50,536) → bottom 50 · MO: 353×378 @(20,444) → bottom 30
   ========================================================================= */
.hero {
    position: relative;
    height: 100svh;
    min-height: calc(700 * var(--u));
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* 히어로 배경 영상 (2026-07-21, 보드 커스텀 설정) — 이미지 위 레이어,
   URL 미설정 시 요소 자체가 없어 일러스트로 폴백 */
.hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.hero__bg-video--mo { display: none; }
@media (max-width: 767px) {
    .hero__bg-video--pc { display: none; }
    .hero__bg-video--mo { display: block; }
}
.hero__logo {
    position: absolute;
    /* 3-main-pc 재실측 (2026-07-26): 1580×428 @x170, bottom 50 (구 1820×494 @x50) */
    left: calc(170 * var(--u)); right: calc(170 * var(--u));
    bottom: calc(50 * var(--u));
    /* 1920 캡 (2026-07-19): 와이드 모니터에서도 디자인 폭 이상 커지지 않게 */
    max-width: calc(1580 * var(--u));
    margin-inline: auto;
}
.hero__logo svg { width: 100%; height: auto; display: block; }
/* 스팬을 블록으로 — 인라인엔 transform이 안 먹어 엔트런스 롤이 무시됨 (2026-07-17 버그픽스) */
.hero__logo--pc { display: block; }
.hero__logo--mo { display: none; }
@media (max-width: 767px) {
    /* 2-main-mo 재실측 (2026-07-26): 313×336 @x40, bottom 40 (구 353×378 @x20/30) */
    .hero__logo {
        left: calc(40 * var(--u)); right: calc(40 * var(--u));
        bottom: calc(40 * var(--u));
    }
    .hero__logo--pc { display: none; }
    .hero__logo--mo { display: block; }
}

/* =========================================================================
   Message (Our Ambition)
   PC: gap 200 above · label 30 Medium · headline 140 SemiBold lh1.35
       KR 34 Apple SD SemiBold lh1.4, w1145 right-aligned · gap 30
   MO: gap 100 · label 16 · headline 65 lh1.0 · KR 16 Medium w270 · gap 20
   ========================================================================= */
.ambition {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: calc(200 * var(--u)) var(--margin) 0;
}
.ambition__head { width: 100%; }
.ambition__label {
    font-weight: 500;
    font-size: calc(30 * var(--t));
    line-height: 1.3;
}
.ambition__lead {
    font-weight: 500;   /* 2026-07-18: 600 → 500 (전체 헤드라인 통일) */
    font-size: calc(140 * var(--u));
    line-height: 1;                     /* 2026-07-15 재실측: 1.35 → 1.0 */
    letter-spacing: 0;
    margin-top: calc(30 * var(--u));    /* 20 → 30 */
}
.ambition__sub {
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: calc(34 * var(--u));
    line-height: 1;                     /* 1.4 → 1.0 */
    /* 2026-07-18: 시작점을 FEATURED WORKS의 WORKS(x675)에 정렬 (PC 전용) */
    align-self: flex-start;
    margin-left: calc(675 * var(--u));
    margin-top: calc(40 * var(--u));    /* 30 → 40 */
}
@media (max-width: 767px) {
    .ambition { margin-top: calc(100 * var(--u)); }
    .ambition__label { font-size: calc(16 * var(--t)); }
    .ambition__lead { font-size: calc(65 * var(--u)); line-height: 1; margin-top: calc(10 * var(--u)); }
    /* 2026-07-18: MO는 좌우 가운데 정렬 (우측 w270 폐기) */
    .ambition__sub { font-weight: 500; font-size: calc(16 * var(--t)); width: auto; margin-top: calc(20 * var(--u)); align-self: center; text-align: center; margin-left: 0; }
}

/* =========================================================================
   Featured works (home) — 6 fixed cards, 2-col stagger (exact Figma geometry)
   Section top divider at y1786 · heading 60 SemiBold bottom-aligned @1894
   Grid origin y1944 · container 1820×3007
   L col x0:   1 @0 895×600 · 3 @1103.55 760×506 · 5 @2258 895×600
   R col x925: 2 @0 895×900 · 4 @1129 895×900 · 6 @2258 760×700
   Caption: 20 below image · (0N) Light 26 + title Medium 26, gap 10
   ========================================================================= */
.featured {
    margin: calc(200 * var(--u)) var(--margin) 0;  /* 2026-07-15: 180 → 200 */
    border-top: 1px solid var(--black);
    padding-bottom: calc(200 * var(--u));   /* gap to footer (Figma 4951→5151) */
}
.featured__title {
    position: relative;
    margin-top: calc(30 * var(--u));
    font-weight: 600;
    font-size: calc(60 * var(--u));
    line-height: 1.3;
    text-transform: uppercase;
}
.featured__title-works { position: absolute; left: 37.088%; top: 0; }   /* 675/1820 */
.featured__grid {
    position: relative;
    margin-top: calc(50 * var(--u));
    aspect-ratio: 1820 / 2998;       /* 2026-07-21 재실측: 3007 → 2998 (행 정렬 통일) */
}
.featured__item { position: absolute; }
/* Figma geometry as % of the 1820×2998 container — 2026-07-21 재실측:
   행 시작 통일 (r2 = 1126, r3 = 2252 — 캡션 아래 로우 갭 180 균일) */
.featured__item:nth-child(1) { left: 0;        top: 0;        width: 49.1758%; }
.featured__item:nth-child(2) { left: 50.8242%; top: 0;        width: 49.1758%; }
.featured__item:nth-child(3) { left: 0;        top: 37.5584%; width: 41.7582%; }
.featured__item:nth-child(4) { left: 50.8242%; top: 37.5584%; width: 49.1758%; }
.featured__item:nth-child(5) { left: 0;        top: 75.1167%; width: 49.1758%; }
.featured__item:nth-child(6) { right: 0;       top: 75.1167%; width: 41.7582%; }  /* 우측 정렬 (Figma x1060→1820) */
.featured__item:nth-child(1) .featured__media { aspect-ratio: 895 / 600; }
.featured__item:nth-child(2) .featured__media { aspect-ratio: 895 / 900; }
.featured__item:nth-child(3) .featured__media { aspect-ratio: 760 / 506; }
.featured__item:nth-child(4) .featured__media { aspect-ratio: 895 / 900; }
.featured__item:nth-child(5) .featured__media { aspect-ratio: 895 / 600; }
.featured__item:nth-child(6) .featured__media { aspect-ratio: 760 / 700; }
.featured__item:nth-child(n+7) { display: none; }          /* hard cap at 6 */

.featured__media { overflow: hidden; background: #eee; }
.featured__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.featured__link:hover .featured__img { transform: scale(1.03); }
.featured__cap {
    display: flex;
    gap: calc(10 * var(--u));
    margin-top: calc(20 * var(--u));
    font-size: calc(26 * var(--t));
    line-height: 1;                     /* 2026-07-15: 1.1 → 1.0 (PC) */
}
.featured__num { font-weight: 300; white-space: nowrap; }
.featured__name { font-weight: 500; }

/* Mobile: single column flow (per 2026-07 revision):
   heading → first card 40 · uniform card gap 80 · Figma per-item widths/
   offsets and ratios kept · caption gap 15 · 16px */
@media (max-width: 767px) {
    .featured { margin-top: calc(100 * var(--u)); padding-bottom: calc(100 * var(--u)); }
    .featured__title { margin-top: calc(20 * var(--u)); font-size: calc(35 * var(--u)); }
    .featured__title-works { position: static; margin-left: .35em; }
    .featured__title-s { display: none; }        /* MO heading: FEATURED WORK */
    .featured__grid { margin-top: calc(40 * var(--u)); height: auto; }
    .featured__item { position: static; margin-bottom: calc(80 * var(--u)); }
    .featured__item:last-child { margin-bottom: 0; }
    .featured__item:nth-child(1) { margin-left: 0;                   width: calc(300 * var(--u)); }
    .featured__item:nth-child(2) { margin-left: calc(53 * var(--u)); width: calc(300 * var(--u)); }
    .featured__item:nth-child(3) { margin-left: calc(27 * var(--u)); width: calc(300 * var(--u)); }
    .featured__item:nth-child(4) { margin-left: 0;                   width: calc(300 * var(--u)); }
    .featured__item:nth-child(5) { margin-left: calc(13 * var(--u)); width: calc(340 * var(--u)); }
    .featured__item:nth-child(6) { margin-left: calc(27 * var(--u)); width: calc(300 * var(--u)); }
    .featured__item:nth-child(1) .featured__media { aspect-ratio: 300 / 200; }
    .featured__item:nth-child(2) .featured__media { aspect-ratio: 300 / 420; }
    .featured__item:nth-child(3) .featured__media { aspect-ratio: 300 / 200; }
    .featured__item:nth-child(4) .featured__media { aspect-ratio: 300 / 420; }
    .featured__item:nth-child(5) .featured__media { aspect-ratio: 340 / 220; }
    .featured__item:nth-child(6) .featured__media { aspect-ratio: 300 / 320; }
    .featured__cap { gap: calc(10 * var(--u)); margin-top: calc(15 * var(--u)); font-size: calc(16 * var(--t)); line-height: 1.1; }
}

/* =========================================================================
   OPEN 임시 런치 페이지 (2026-07-25, Figma open-pc 2579:825 / open-mo 2581:936)
   PC (2026-07-31 배치 변경 재실측): 일러/영상 350×573 가로 중앙(@x785) +
   카피 30px 일러 아래 30(@y1683, 텍스트+캐럿 그룹 중앙), 섹션 h833. GNB 숨김(로고만).
   MO (2026-07-26 재실측): 일러 280×458 @x57, 카피 20px 한 줄 중앙 @y478, 섹션 h618.
   카피 = 타이핑 모션 + 캐럿 블링크 (PC h26 / MO h18, 텍스트 뒤 14px — Vector 92 실측).
   ========================================================================= */
/* 오픈 기간 = 로고만: PC GNB + MO menu 필 모두 숨김 (2026-07-25 확정 — 미완성 페이지 접근 차단) */
body:has(.open-page) .site-nav__menu,
body:has(.open-page) .site-nav__burger { display: none; }
.open-wait {
    position: relative;
    margin: 0 var(--margin);
    height: calc(833 * var(--u));
}
.open-wait__media {
    position: absolute;
    /* Figma @x785 = 가로 중앙 — 와이드 브라우저(--u 1px 캡)에서도 뷰포트 중앙 유지 */
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: calc(350 * var(--u));
    height: calc(573 * var(--u));
    overflow: hidden;
}
.open-wait__img,
.open-wait__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.open-wait__copy {
    position: absolute;
    left: 0; right: 0;
    top: calc(603 * var(--u));     /* 1683 − 1080 (일러 하단 + 30) */
    text-align: center;
    font-weight: 400;
    font-size: calc(30 * var(--u));
    line-height: 1;
    white-space: nowrap;
    /* 텍스트 자체를 일러 라인(뷰포트 중앙)에 정렬 — 캐럿+갭 폭만큼 선보정해
       캐럿은 우측 돌출 (2026-07-31, 사용자 지시: 라인 기준 센터) */
    padding-left: calc(16 * var(--u));
}
/* 캐럿 — 텍스트 입력 커서 연출 (타이핑 중 = 고정, 완료 후 = 블링크 반복) */
.open-wait__caret {
    display: inline-block;
    width: max(calc(2 * var(--u)), 1.5px);
    height: calc(26 * var(--u));
    margin-left: calc(14 * var(--u));
    background: currentColor;
    vertical-align: calc(-2 * var(--u));
    animation: open-caret-blink 1.06s steps(1, end) infinite;
}
.open-wait__copy.is-typing .open-wait__caret { animation: none; opacity: 1; }
@keyframes open-caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .open-wait__caret { animation: none; }
}
@media (max-width: 767px) {
    .open-wait { height: calc(618 * var(--u)); }
    .open-wait__media {
        left: calc(37 * var(--u));     /* Figma 57 − margin 20 */
        transform: none;
        width: calc(280 * var(--u));
        height: calc(458 * var(--u));
    }
    .open-wait__copy {
        left: 0; right: 0;
        top: calc(478 * var(--u));  /* 1330 − 852 */
        font-size: calc(20 * var(--u));
        /* 텍스트 중앙 + 캐럿 우측 돌출 선보정은 베이스(padding-left 16) 상속 */
    }
    .open-wait__caret {
        height: calc(18 * var(--u));
        vertical-align: calc(-1.5 * var(--u));
    }
}

/* =========================================================================
   Footer — yellow full redesign (Figma 3-main-pc-test 2403:1844, 2026-07-20).
   PC: 상단 마퀴 h180 @top103 — STED/STARTED 272 SemiBold(cap-trim) +
   썸네일 320×180, 갭 [워드→50→이미지→90→워드] · 디바이더 bottom161 ·
   3컬럼 라벨 top439 (Contact x50 / Links x747 / Follow Us x1107),
   내용 bottom30, 18px · STED © 18 SemiBold 우하단 bottom30.
   MO: 마퀴 PC×(393/1920) 비례 축소 (전용 디자인 없음 — 확인 대기) ·
   디바이더 top166 · 세로 스택 14px (라벨 top 199/294/369) · © bottom20.
   모션 = betteroff.studio/work 실측: 좌 드리프트 ww/1500 px/frame(lerp .1),
   썸네일 0.5s 하드컷 순환, 뷰포트 밖 정지 (main.js).
   ========================================================================= */
.site-footer {
    /* 언더 리빌 (2026-07-17, ref. studio-kiln 푸터): 뷰포트 하단에 고정된 채
       콘텐츠(.site-main, z1·불투명)가 위로 벗겨지며 드러남 — 히어로 커버의 반대 */
    position: sticky;
    bottom: 0;
    z-index: 0;
    background: var(--yellow);
    color: var(--black);
    height: calc(550 * var(--u));
    overflow: hidden;
}
/* 마퀴 STED [썸네일] STARTED (Figma 2403:1846~1864 실측) —
   2026-07-20 B안 확정, A안(Let's Get 워드마크)은 제거 */
.site-footer__marq {
    position: absolute;
    top: calc(93 * var(--u));      /* 2026-07-21 재조정: 83 → 93 */
    left: 0; right: 0;
    height: calc(200 * var(--u));  /* 220 → 200 (썸네일 320×200) */
    /* 가로만 클립 — 세로는 라운드 글리프(S·D) 오버슈트(캡 위/베이스라인 아래
       ~4px)가 잘리지 않게 open (행 기준선은 cap-trim으로 이미 정렬됨) */
    overflow-x: clip;
    overflow-y: visible;
    white-space: nowrap;
    user-select: none;
}
.site-footer__marq-track {
    display: flex;
    height: 100%;
    will-change: transform;
}
.site-footer__marq-seg {
    flex: none;
    display: flex;
    align-items: flex-end;
    height: 100%;
    /* JS 없을 때(정적)의 시작 여백 = Figma x50 */
    padding-left: calc(50 * var(--u));
}
.site-footer__marq-word {
    display: block;
    font-weight: 400;               /* 2026-07-20 재실측: SemiBold → Regular */
    font-size: calc(240 * var(--u));    /* 2026-07-20 사이즈 변경: 272 → 240 */
    line-height: 1;
    /* cap-trim (Figma text-box-trim 재현): lh1 라인박스에서 베이스라인은
       하단에서 0.169em 위 (Bricolage 메트릭 비율 — em 단위라 크기 무관) →
       베이스라인 = 행 하단. 240px 캡(158.4)은 행(180)보다 작아져 세로 중앙
       (위/아래 11) — 행 하단에서 11u 올림 (Figma: 캡 top114, 행 103~283) */
    margin-bottom: calc(21 * var(--u) - 0.169em);  /* 행 200, 캡 158 → 하단 21 (2026-07-21) */
    margin-right: calc(30 * var(--u));   /* 2026-07-20: 40 → 30 */
}
.site-footer__marq-img {
    position: relative;
    flex: none;
    width: calc(320 * var(--u));
    height: 100%;
    margin-right: calc(30 * var(--u));   /* 2026-07-20: 40 → 30 */
    overflow: hidden;
}
.site-footer__marq-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 스택: 활성 1장만 표시 (0.5s 하드컷 — main.js가 is-on 토글, 기본 첫 장) */
html.js-anim .site-footer__marq-img img { visibility: hidden; }
html.js-anim .site-footer__marq-img img.is-on { visibility: visible; }
html:not(.js-anim) .site-footer__marq-img img:first-child ~ img { visibility: hidden; }
.site-footer__rule {
    position: absolute;
    left: var(--margin); right: var(--margin);
    bottom: calc(161 * var(--u));
    border-top: 1px solid var(--black);
}
/* 컬럼: 라벨 top439 + 내용 bottom30 — 양끝 앵커를 space-between으로 재현 */
.site-footer__col {
    position: absolute;
    top: calc(439 * var(--u));
    bottom: calc(30 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    white-space: nowrap;
}
.site-footer__col--contact { left: var(--margin); }
.site-footer__col--links { left: calc(747 * var(--u)); }
.site-footer__col--follow { left: calc(1107 * var(--u)); }
.site-footer__label {
    font-weight: 600;
    font-size: calc(18 * var(--t));
    line-height: 1.2;
    text-transform: uppercase;
}
.site-footer__lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 400;
    font-size: calc(18 * var(--t));
    line-height: 1.2;
    text-transform: uppercase;
}
.site-footer__copy {
    position: absolute;
    right: var(--margin);
    bottom: calc(30 * var(--u));
    font-weight: 600;
    font-size: calc(18 * var(--t));
    line-height: 1;
    white-space: nowrap;
}
/* 푸터 링크 호버 = 밑줄 드로우 (2026-07-19, ref. betteroff.studio .uline 실측:
   scaleX 0→1, 진입 origin left·이탈 origin right, .75s cubic-bezier(.19,1,.22,1),
   두께 .05em/최소 1px) — hover-roll 대신 적용 */
.site-footer__lines a { position: relative; }
.site-footer__lines a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: .05em;
    min-height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}
.site-footer__lines a:hover::after,
.site-footer__lines a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (max-width: 767px) {
    /* 2026-07-20 재실측 (Figma 4-main-mo-test 2442:629): h480 → 492 */
    .site-footer { height: calc(492 * var(--u)); }
    /* 마퀴 MO (Figma 4-main-mo-test 2026-07-20 재실측): 행 top40 h100 —
       130 Regular cap-trim(캡 86, 행 중앙 위/아래 7) + 썸네일 180×100, 갭 20/20 */
    .site-footer__marq {
        top: calc(35 * var(--u));      /* 2026-07-21 재조정: 28 → 35 */
        height: calc(110 * var(--u));  /* 124 → 110 (썸네일 180×110) */
    }
    .site-footer__marq-seg { padding-left: calc(20 * var(--u)); }
    .site-footer__marq-word {
        font-size: calc(130 * var(--u));    /* 150 → 130 */
        margin-bottom: calc(12 * var(--u) - 0.169em);  /* 행 110, 캡 86 → 하단 12 (2026-07-21) */
        margin-right: calc(20 * var(--u));
    }
    .site-footer__marq-img {
        width: calc(180 * var(--u));
        margin-right: calc(20 * var(--u));  /* 40 → 20 */
    }
    .site-footer__rule { bottom: auto; top: calc(178 * var(--u)); }
    /* 세로 스택 — Figma 절대 top: 라벨 199/294/369 · 내용 +10 · 이메일 주소밑 +4 */
    .site-footer__col {
        left: var(--margin); right: var(--margin);
        bottom: auto;
        display: block;
        white-space: normal;
    }
    .site-footer__col--contact { top: calc(211 * var(--u)); }
    .site-footer__col--links { top: calc(306 * var(--u)); }
    .site-footer__col--follow { top: calc(381 * var(--u)); }
    .site-footer__label { font-size: calc(14 * var(--t)); line-height: 1.1; }
    .site-footer__lines { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--t)); line-height: 1.1; }
    .site-footer__address { max-width: calc(294 * var(--u)); }
    .site-footer__email { margin-top: calc(5 * var(--u)); }
    .site-footer__copy {
        right: auto;
        left: var(--margin);
        bottom: calc(20 * var(--u));
        font-size: calc(14 * var(--t));
        line-height: 1.1;
    }
}

/* =========================================================================
   Page intro (Work) — Figma 1695:498 / 1695:851
   PC: top 240, centered · EN 140 SemiBold uppercase lh1.1 (2 lines) · gap 60
       KR 34 Apple SD SemiBold lh1.4 centered · 180 below to grid
   MO: top 110 · EN 50 lh1.0 left · gap 12 · KR 16 Medium w270 right-aligned
       · 100 below to grid
   ========================================================================= */
.page-intro {
    display: flex;
    flex-direction: column;
    /* unified intro spacing (2026-07-11): top 200 · EN↔KR 60 · bottom 180 */
    margin: calc(200 * var(--u)) var(--margin) calc(180 * var(--u));
}
.page-intro__lead {
    width: 100%;
    text-align: left;              /* EN copy: full-width, LEFT (Figma) */
    font-weight: 500;   /* 2026-07-18: 600 → 500 (전체 헤드라인 통일) */
    font-size: calc(155 * var(--u));   /* 2026-07-11: 140 → 155 */
    line-height: 1;                    /* lh 1.1 → 1.0 */
    text-transform: uppercase;
}
.page-intro__sub {
    align-self: center;            /* KR copy: block centered in viewport */
    text-align: left;              /* …but the text itself is left-aligned */
    font-family: var(--font-kr);
    font-weight: 600;
    margin-top: calc(30 * var(--u));   /* 2026-07-11: 60 → 30 */
    font-size: calc(34 * var(--u));
    line-height: 1.2;    /* 2026-07-15 실측: 1.4 → 1.2 */
}
.page-intro__lead .br-pc { display: block; }
@media (max-width: 767px) {
    .page-intro {
        /* 2026-07-17 재실측 (6-work-mo/9-news-mo): KR 카피 → 하단 콘텐츠 80 */
        margin: calc(110 * var(--u)) var(--margin) calc(80 * var(--u));
    }
    .page-intro__lead { font-size: calc(50 * var(--u)); line-height: 1; }
    .page-intro__lead .br-pc { display: none; }
    .page-intro__sub {
        /* 2026-07-16 Figma 변경: 우측 블록(w270) → 가운데 정렬 hug (1695:853 x80 w193) */
        align-self: center;
        text-align: left;
        font-weight: 600;          /* 2026-07-16 재실측: Apple SD SemiBold */
        margin-top: calc(12 * var(--u));
        font-size: calc(16 * var(--t));
    }
}

/* =========================================================================
   Work list — 10-pattern repeating grid (Figma 1695:417 exact)
   PC: 3 cols of 590, gutters 25, row gap 180. Pattern per decade:
     row1: [1] 590×700 · [2] span2 1205×900
     row2: [3] 590×700 · [4] 590×700 · [5] 590×450
     row3: [6] span2, media 910×900 · (320 gap) · [7] 590×700
     row4: [8] 590×450 · [9] 590×700 · [10] 590×700
   Caption: 20 below image, (0N) Light 26 + title Medium 26.
   MO: single column 353×250 cards, gap 80, caption 15/16px.
   ========================================================================= */
.work-list { margin: 0 var(--margin); padding-bottom: calc(200 * var(--u)); }
.work-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(180 * var(--u)) calc(25 * var(--u));
    align-items: start;
}
.work-list__item:nth-child(10n+1) { grid-column: 1; }
.work-list__item:nth-child(10n+2) { grid-column: 2 / span 2; }
.work-list__item:nth-child(10n+3) { grid-column: 1; }
.work-list__item:nth-child(10n+4) { grid-column: 2; }
.work-list__item:nth-child(10n+5) { grid-column: 3; }
.work-list__item:nth-child(10n+6) { grid-column: 1 / span 2; }
.work-list__item:nth-child(10n+7) { grid-column: 3; }
.work-list__item:nth-child(10n+8) { grid-column: 1; }
.work-list__item:nth-child(10n+9) { grid-column: 2; }
.work-list__item:nth-child(10n)   { grid-column: 3; }
.work-list__item:nth-child(10n+1) .work-list__media { aspect-ratio: 590 / 700; }
.work-list__item:nth-child(10n+2) .work-list__media { aspect-ratio: 1205 / 900; }
.work-list__item:nth-child(10n+3) .work-list__media { aspect-ratio: 590 / 700; }
.work-list__item:nth-child(10n+4) .work-list__media { aspect-ratio: 590 / 700; }
.work-list__item:nth-child(10n+5) .work-list__media { aspect-ratio: 590 / 450; }
.work-list__item:nth-child(10n+6) .work-list__media { width: calc(910 / 1205 * 100%); aspect-ratio: 910 / 900; }
.work-list__item:nth-child(10n+7) .work-list__media { aspect-ratio: 590 / 700; }
.work-list__item:nth-child(10n+8) .work-list__media { aspect-ratio: 590 / 450; }
.work-list__item:nth-child(10n+9) .work-list__media { aspect-ratio: 590 / 700; }
.work-list__item:nth-child(10n)   .work-list__media { aspect-ratio: 590 / 700; }
.work-list__media { overflow: hidden; background: #eee; }
.work-list__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-list__link:hover .work-list__img { transform: scale(1.03); }
.work-list__cap {
    display: flex;
    gap: calc(10 * var(--u));
    margin-top: calc(20 * var(--u));
    font-size: calc(26 * var(--t));
    line-height: 1.1;
}
.work-list__num { font-weight: 300; white-space: nowrap; }
.work-list__name { font-weight: 500; }
@media (max-width: 767px) {
    .work-list { padding-bottom: calc(100 * var(--u)); }
    .work-list__grid { grid-template-columns: 1fr; gap: calc(80 * var(--u)); }
    /* :nth-child(n) matches every item at the same specificity as the PC
       10n+k rules, and this block comes later — forces the single column */
    .work-list__item:nth-child(n) { grid-column: 1; }
    /* :nth-child(n) matches the PC 10n+k media rules' specificity so the
       width override on item 6 (span-2 card) is also reset on mobile */
    .work-list__item:nth-child(n) .work-list__media { width: 100%; aspect-ratio: 353 / 250; }
    .work-list__cap { margin-top: calc(15 * var(--u)); font-size: calc(16 * var(--t)); }
}

/* =========================================================================
   News — Figma 1695:270 (PC) / 1695:907 (MO)
   Header: "N Results" 30 Regular → divider (+30) → outline pill tabs (+30):
     h60 r34 px30, 20 Regular, gap 14. Grid +60 below tabs.
   Grid: 3 cols 560, gutter 70, row gap 120.
   Card: image 560×600 → badge +20 → title +20 (Apple SD Medium 26 lh1.1).
   ========================================================================= */
.news-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--black);
    border-radius: calc(34 * var(--u));
    padding: calc(10 * var(--u)) calc(20 * var(--u));
    font-family: var(--font-en);
    font-weight: 400;
    font-size: calc(16 * var(--t));
    line-height: 1.2;
}
.news-list { margin: 0 var(--margin); padding-bottom: calc(200 * var(--u)); }
.news-list__count {
    font-weight: 400;
    font-size: calc(30 * var(--t));
    line-height: 1.2;
}
.news-list__head { border-bottom: 0; }
.news-list__tabs {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));           /* 2026-07-15: 14 → 10 */
    margin-top: calc(30 * var(--u));
    padding-top: calc(30 * var(--u));
    border-top: 1px solid var(--black);
    flex-wrap: wrap;
}
.news-list__tab {
    display: inline-flex;
    align-items: center;
    height: calc(60 * var(--u));
    padding: 0 calc(30 * var(--u));
    border: 1px solid var(--black);
    border-radius: calc(34 * var(--u));
    font-weight: 400;
    font-size: calc(20 * var(--t));
    line-height: 1.2;
    transition: background .2s, color .2s;
}
.news-list__tab.is-active { background: var(--black); color: var(--white); }
.news-list__grid {
    margin-top: calc(60 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(120 * var(--u)) calc(70 * var(--u));
}
.news-list__item[hidden] { display: none; }
.news-list__media { aspect-ratio: 560 / 600; overflow: hidden; background: #eee; }
.news-list__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-list__link:hover .news-list__img { transform: scale(1.03); }
.news-list__link .news-badge { margin-top: calc(20 * var(--u)); }
.news-list__name {
    margin-top: calc(20 * var(--u));
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: calc(26 * var(--t));
    line-height: 1.1;
}
@media (max-width: 767px) {
    /* 2026-07-16 재실측 (1695:950/943): 카운터 16 · 탭 h37 · 그리드 mt50 gap80 ·
       이미지 353×380 · 캡션 = 타이틀(좌 w260, 16 Medium lh1.4) + 뱃지(우, 12px) 한 줄 */
    .news-badge { font-size: calc(14 * var(--t)); padding: calc(10 * var(--u)) calc(20 * var(--u)); }
    .news-list { padding-bottom: calc(100 * var(--u)); }
    .news-list__count { font-size: calc(16 * var(--t)); }
    .news-list__tabs { gap: calc(8 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(20 * var(--u)); }
    .news-list__tab { height: calc(37 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: calc(14 * var(--t)); }
    .news-list__grid { margin-top: calc(50 * var(--u)); grid-template-columns: 1fr; gap: calc(80 * var(--u)); }
    .news-list__link { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .news-list__media { width: 100%; aspect-ratio: 353 / 380; }
    .news-list__link .news-badge {
        order: 2;
        margin: calc(15 * var(--u)) 0 0 auto;
        font-size: calc(12 * var(--t));
        padding: calc(6 * var(--u)) calc(12 * var(--u));
    }
    .news-list__name {
        order: 1;
        width: calc(260 * var(--u));
        margin-top: calc(15 * var(--u));
        font-size: calc(16 * var(--t));
        line-height: 1.4;
    }
}

/* =========================================================================
   News detail — Figma 1695:1293 (PC) / 1695:972 (MO)
   PC: hero 1820×900 @155 → badge +100 → title +20 (Apple SD SemiBold 60
       lh1.4) → date +30 (26 Medium) → body +80, 1200 centered
   MO: hero 353×200 @90 → badge +40 → title 36 lh1.3 → date 16 → body
   ========================================================================= */
.news-detail__hero {
    margin: calc(110 * var(--u)) var(--margin) 0;   /* 2026-07-11: 155 → 110 */
    aspect-ratio: 1820 / 900;
    overflow: hidden;
    background: #eee;
}
.news-detail__hero img { width: 100%; height: 100%; object-fit: cover; }
.news-detail__head { margin: calc(100 * var(--u)) var(--margin) 0; }
.news-detail__title {
    margin-top: calc(20 * var(--u));
    font-family: var(--font-kr);
    font-weight: 700;                   /* 2026-07-16 실측: Bold */
    font-size: calc(60 * var(--u));
    line-height: 1.2;                   /* 2026-07-15: 1.4 → 1.2 */
    max-width: calc(800 * var(--u));    /* Figma w800 */
}
.news-detail__date {
    display: block;
    margin-top: calc(30 * var(--u));
    font-weight: 500;
    font-size: calc(26 * var(--t));
    line-height: 1.1;
}
.news-detail__body {
    width: calc(1200 * var(--u));
    /* right-aligned to the 50px margin (Figma view frame x670→1870) */
    margin: calc(100 * var(--u)) var(--margin) 0 auto;  /* 2026-07-15: 80 → 100 */
    padding-bottom: calc(200 * var(--u));
    font-family: var(--font-kr);
    /* 2026-07-16 실측: 22 Regular lh1.5 (Figma 1695:1317) */
    font-size: calc(22 * var(--t));
    line-height: 1.5;
}
/* Figma 본문은 문단 간 여백 없이 연속 — 줄간격만으로 리듬 */
.news-detail__body p { margin: 0; }
/* 서브헤딩: 40 Bold lh1.0, 위 80 · 아래 30 (Figma 2588→2668→2738) */
.news-detail__body h2,
.news-detail__body h3 {
    font-weight: 700;
    font-size: calc(40 * var(--u));
    line-height: 1;
    margin: calc(80 * var(--u)) 0 calc(30 * var(--u));
}
/* 본문 이미지: 위 60 · 아래 80 (서브헤딩 상단 마진과 겹침 시 80) */
.news-detail__body figure.kg-card { margin: calc(60 * var(--u)) 0 calc(80 * var(--u)); }
@media (max-width: 767px) {
    .news-detail__hero { margin-top: calc(90 * var(--u)); aspect-ratio: 353 / 200; }
    .news-detail__head { margin-top: calc(40 * var(--u)); }
    .news-detail__title { margin-top: calc(20 * var(--u)); font-size: calc(36 * var(--u)); line-height: 1.2; }   /* 2026-07-16 재실측 (1695:994) */
    .news-detail__date { margin-top: calc(20 * var(--u)); font-size: calc(16 * var(--t)); }
    .news-detail__body { width: auto; margin: calc(50 * var(--u)) var(--margin) 0; padding-bottom: calc(100 * var(--u)); font-size: calc(16 * var(--t)); }
    .news-detail__body h2,
    .news-detail__body h3 { font-size: calc(24 * var(--t)); margin: calc(50 * var(--u)) 0 calc(20 * var(--u)); }
    .news-detail__body figure.kg-card { margin: calc(50 * var(--u)) 0; }
}

/* =========================================================================
   Work detail — Figma 1695:513 (PC) / 1695:1009 (MO)
   PC: hero 1820×1020 @155 · +100 title 110 SemiBold uppercase lh1.1 (max 1400)
       · +100 project info · +100 body images (gap 30)
   MO: hero 353×200 @90 · +30 title 40 · meta 16px stacked · images gap 20
   ========================================================================= */
.work-detail__hero {
    margin: calc(110 * var(--u)) var(--margin) 0;   /* 2026-07-11: 155 → 110 */
    aspect-ratio: 1820 / 1020;
    overflow: hidden;
    background: #eee;
}
.work-detail__hero-img { width: 100%; height: 100%; object-fit: cover; }
.work-detail__title {
    margin: calc(100 * var(--u)) var(--margin) 0;
    max-width: calc(1400 * var(--u));
    font-weight: 600;
    font-size: calc(110 * var(--u));
    line-height: 1.1;
    text-transform: uppercase;
}
.work-detail__body { margin: calc(100 * var(--u)) var(--margin) 0; padding-bottom: calc(400 * var(--u)); }  /* 2026-07-15: 200 → 400 */
@media (max-width: 767px) {
    .work-detail__hero { margin-top: calc(90 * var(--u)); aspect-ratio: 353 / 200; }
    .work-detail__title { margin-top: calc(30 * var(--u)); max-width: none; font-size: calc(40 * var(--u)); }
    .work-detail__body { margin-top: calc(30 * var(--u)); padding-bottom: calc(100 * var(--u)); }
}

/* ---- Project Meta snippet (.work-info — snippets/project-meta.html) ----
   PC meta: 2 cols 860/860 gap 100, each border-top; labels 22 SemiBold
   uppercase @+20 (Year x0 / Industry x138 inline), values 26 Regular @+79.
   Overview: full-width border-top @+80, text @+80: KR (Apple SD Medium 22
   lh1.5) / EN (Bricolage Regular 22 lh1.5), 860/860.
   MO: stacked 16px; two meta rows; overview KR lh1.5 → EN lh1.4, gap 40. */
.gh-content .work-info { margin-bottom: calc(100 * var(--u)); }
.gh-content .work-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(100 * var(--u));
}
.gh-content .work-meta__col { border-top: 1px solid var(--black); }
.gh-content .work-meta__col:first-child { display: flex; gap: calc(138 * var(--u)); }
.gh-content .work-meta__item h4 {
    margin: calc(20 * var(--u)) 0 0;
    font-weight: 600;
    font-size: calc(22 * var(--t));
    line-height: 1.3;
    text-transform: uppercase;
}
.gh-content .work-meta__item p {
    margin: calc(30 * var(--u)) 0 0;
    font-weight: 400;
    font-size: calc(26 * var(--t));
    line-height: 1.2;
}
.gh-content .work-meta .sep { font-weight: 200; }
.gh-content .work-overview {
    margin-top: calc(80 * var(--u));
    border-top: 1px solid var(--black);
    padding-top: calc(80 * var(--u));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(100 * var(--u));
}
.gh-content .work-overview p { margin: 0 0 1em; font-size: calc(22 * var(--t)); line-height: 1.5; }
.gh-content .work-overview p:last-child { margin-bottom: 0; }
.gh-content .work-overview__kr { font-family: var(--font-kr); font-weight: 500; }
.gh-content .work-overview__en { font-weight: 400; }
@media (max-width: 767px) {
    .gh-content .work-info { margin-bottom: calc(100 * var(--u)); }
    .gh-content .work-meta { grid-template-columns: 1fr; gap: calc(20 * var(--u)); }
    .gh-content .work-meta__col:first-child { gap: calc(82 * var(--u)); }
    .gh-content .work-meta__item h4 { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--t)); }
    .gh-content .work-meta__item p { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--t)); line-height: 1.3; }
    .gh-content .work-overview {
        margin-top: calc(40 * var(--u));
        padding-top: calc(40 * var(--u));
        grid-template-columns: 1fr;
        gap: calc(40 * var(--u));
    }
    .gh-content .work-overview p { font-size: calc(16 * var(--t)); }
    .gh-content .work-overview__en p { line-height: 1.4; }
}

/* =========================================================================
   Page + Koenig content cards
   Ghost mapping: image card = full content width (1단) · gallery card =
   images share the row equally (2단/3단, gap 30) · mobile: all stack (1단).
   ========================================================================= */
.page { max-width: calc(1200 * var(--u)); margin: 0 auto; padding: calc(155 * var(--u)) var(--margin) calc(160 * var(--u)); }
.page__title { font-weight: 600; font-size: calc(72 * var(--u)); margin-bottom: calc(40 * var(--u)); }

.gh-content > * { margin-bottom: 1.5em; }
.gh-content img { width: 100%; }
.gh-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
/* wide = 본문 컬럼보다 한 단계 넓게 (gscan 필수 클래스) */
.gh-content .kg-width-wide { width: calc(100% + 2 * var(--margin) + 100 * var(--u)); margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.gh-content figure.kg-card,
.gh-content .kg-embed-card,
.gh-content .kg-video-card { margin: calc(30 * var(--u)) 0; }
.gh-content .kg-gallery-container { display: flex; flex-direction: column; gap: calc(30 * var(--u)); }
.gh-content .kg-gallery-row { display: flex; gap: calc(30 * var(--u)); }
.gh-content .kg-gallery-image { flex: 1 1 0; min-width: 0; }
.gh-content .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
/* 실제 Ghost 런타임 대응 (2026-07-19): 위 figure.kg-card 마진 shorthand가
   width 클래스의 margin-left:50%를 0으로 덮고, Ghost가 주입하는 cards.min.css
   (우리 CSS 뒤에 로드)가 갤러리에 자체 마진을 얹음 — specificity를 올려 명시 재선언 */
.gh-content figure.kg-width-full,
.gh-content figure.kg-width-wide {
    min-width: 0;
    margin: calc(30 * var(--u)) 0 calc(30 * var(--u)) 50%;
    transform: translateX(-50%);
}
.gh-content figure.kg-width-full { width: 100vw; max-width: none; }
.gh-content figure.kg-width-wide { width: calc(100% + 2 * var(--margin) + 100 * var(--u)); max-width: 100vw; }
.gh-content .kg-gallery-card .kg-gallery-container { max-width: none; margin: 0; }
.gh-content .kg-gallery-card .kg-gallery-row:not(:first-of-type) { margin: 0; }
.gh-content .kg-gallery-card .kg-gallery-image:not(:first-of-type) { margin: 0; }
@media (max-width: 767px) {
    .gh-content figure.kg-card,
    .gh-content .kg-embed-card,
    .gh-content .kg-video-card { margin: calc(20 * var(--u)) 0; }
    .gh-content .kg-gallery-container,
    .gh-content .kg-gallery-row { gap: calc(20 * var(--u)); }
    /* mobile: every image stacks full-width (1단) */
    .gh-content .kg-gallery-row { flex-direction: column; }
    .gh-content .kg-gallery-image { flex: none; width: 100%; }
    /* MO에서도 figure.kg-card 20u 마진이 margin-left:50%를 덮지 않게 재선언 */
    .gh-content figure.kg-width-full,
    .gh-content figure.kg-width-wide { margin: calc(20 * var(--u)) 0 calc(20 * var(--u)) 50%; }
}

/* =========================================================================
   About — Figma 8-about-pc (2102:557) / 8-about-mo (2102:427), 2026-07-15
   재실측. White hero (연노랑 폐기) · KV 1920×1000 · 섹션 = 좌측 레일 라벨(x50)
   + 본문 컬럼(x410) · 헤드라인 90 Medium lh1.0 (첫 줄 들여쓰기) · KR 26
   Medium lh1.3 · For Life 풀블리드 카키(#736E4E)+옐로우 · Team 일러스트가
   푸터에 딱 붙음(PC flush / MO 29px 겹침).
   ========================================================================= */

/* Hero — white bg · EN 155 SemiBold ×2줄 · KR 34 SemiBold 중앙 블록 */
.about-hero {
    display: flex;
    flex-direction: column;
    padding: calc(220 * var(--u)) var(--margin) calc(180 * var(--u));
}
.about-hero__lead {
    font-weight: 500;   /* 2026-07-18 Figma 변경: SemiBold 600 → Medium 500 (우선 About만) */
    font-size: calc(155 * var(--u));
    line-height: 1;
    text-transform: uppercase;
}
.about-hero__sub {
    align-self: center;            /* centered block, left-aligned text */
    text-align: left;
    margin-top: calc(30 * var(--u));
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: calc(34 * var(--u));
    line-height: 1.3;    /* 2026-07-16 재실측: h88 = lh1.3 (About만 1.3) */
}

/* Key visual — full bleed (PC 1920×1000 / MO 393×250, separate crops) */
.about-kv { aspect-ratio: 1920 / 1000; overflow: hidden; }
.about-kv img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Section shell: rail label + 90px lead -------------------------- */
.about-sec {
    position: relative;
    margin: 0 var(--margin);
}
.about-sec__label {
    position: absolute;
    left: 0;
    font-weight: 500;
    font-size: calc(20 * var(--t));
    line-height: 1;
    text-transform: uppercase;
}
.about-sec__label--lg {                 /* SERVICE / TEAM (Figma 22 SemiBold) */
    font-weight: 600;
    font-size: calc(22 * var(--t));
    line-height: 1.3;
}
.about-sec__lead {
    font-weight: 500;
    font-size: calc(90 * var(--u));
    line-height: 1;
    text-transform: uppercase;
}
.about-sec__kr {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: calc(26 * var(--t));
    line-height: 1.3;
}

/* ---- Positioning ------------------------------------------------------ */
.about-positioning { margin-top: calc(200 * var(--u)); }        /* KV → lead */
.about-positioning .about-sec__label { top: calc(34 * var(--u)); }
.about-positioning .about-sec__lead { text-indent: calc(172 * var(--u)); }
.about-positioning__kr {
    position: absolute;
    top: calc(16 * var(--u));
    right: 0;
}
.about-positioning__doodle {
    position: absolute;
    /* 2026-08-01 일러 교체 재실측 (2630:1399): 443×493 @top102, right 0 */
    top: calc(102 * var(--u));
    right: 0;
    width: calc(443 * var(--u));
    pointer-events: none;
}
.about-values {
    margin-top: calc(100 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, calc(350 * var(--u)));
    column-gap: calc(20 * var(--u));
    min-height: calc(225 * var(--u));
}
.about-values__item {
    position: relative;
    border-top: 1px solid var(--black);
    padding-left: calc(40 * var(--u));   /* 라인 → 텍스트 들여쓰기 (Figma 가이드 40) */
}
/* vertical rules in the 20px gutters (Figma x410/x780, +15 h210) */
.about-values__item:nth-child(1)::after,
.about-values__item:nth-child(2)::after {
    content: "";
    position: absolute;
    right: calc(-10 * var(--u));
    top: calc(15 * var(--u));
    height: calc(210 * var(--u));
    width: 1px;
    background: var(--black);
}
.about-values__item--mo { display: none; }      /* Figma MO에만 존재 */
.about-values__item h3 {
    margin-top: calc(40 * var(--u));
    font-weight: 500;
    font-size: calc(30 * var(--t));
    line-height: 1;
    text-transform: uppercase;
}
.about-values__item p {
    margin-top: calc(20 * var(--u));
    font-family: var(--font-kr);
    font-weight: 400;
    font-size: calc(20 * var(--t));
    line-height: 1.4;
}
.about-positioning__imgs {
    margin-top: calc(150 * var(--u));
    margin-left: calc(360 * var(--u));
    display: flex;
    align-items: flex-end;         /* 두 이미지 하단 정렬 (Figma) */
    gap: calc(170 * var(--u));
}
.about-positioning__img1 { width: calc(730 * var(--u)); aspect-ratio: 730 / 600; object-fit: cover; }
.about-positioning__img2 { width: calc(268 * var(--u)); aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- Numbers ----------------------------------------------------------- */
.about-numbers { margin-top: calc(415 * var(--u)); }
.about-numbers .about-sec__label { top: calc(35 * var(--u)); }
.about-numbers .about-sec__lead {
    margin-left: calc(360 * var(--u));
    text-indent: calc(59 * var(--u));
}
.about-numbers .about-sec__kr {
    margin: calc(60 * var(--u)) 0 0 calc(360 * var(--u));
}
.about-numbers__doodle {
    position: absolute;
    /* 2026-08-01 일러 교체 재실측 (2630:1426): 225×223 @left190, top −157 */
    left: calc(190 * var(--u));
    top: calc(-157 * var(--u));
    width: calc(225 * var(--u));
    pointer-events: none;
}
.about-stats {
    margin: calc(80 * var(--u)) 0 0 calc(360 * var(--u));
    display: grid;
    grid-template-columns: repeat(2, calc(500 * var(--u)));
    column-gap: calc(20 * var(--u));
}
.about-stats__cell {
    position: relative;
    border-top: 1px solid var(--black);
    height: calc(240 * var(--u));
    padding-top: calc(94 * var(--u));
}
/* center rule in the 20px gutter (Figma x920, +15 h210) */
.about-stats__cell:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: calc(-10 * var(--u));
    top: calc(15 * var(--u));
    height: calc(210 * var(--u));
    width: 1px;
    background: var(--black);
}
.about-stats__label {
    font-family: var(--font-kr);
    font-weight: 400;
    font-size: calc(20 * var(--t));
    line-height: 1.3;
}
/* 우열 라벨은 라인에서 60 들여쓰기 (Figma x990 = 930+60) */
.about-stats__cell:nth-child(even) .about-stats__label { padding-left: calc(60 * var(--u)); }
.about-stats__num {
    position: absolute;
    top: calc(48 * var(--u));
    font-weight: 500;
    font-size: calc(120 * var(--u));
    line-height: 1.2;
    white-space: nowrap;
}
/* Figma: 좌열 숫자는 우측에서 60 들여옴, 우열은 라인 끝에 정렬 */
.about-stats__cell:nth-child(odd)  .about-stats__num { right: calc(60 * var(--u)); }
.about-stats__cell:nth-child(even) .about-stats__num { right: 0; }
.about-stats__num .about-stats__unit {
    position: absolute;
    right: 0;
    top: calc(120 * var(--u));
    font-weight: 400;
    font-size: calc(20 * var(--t));
    line-height: 1.2;
}
/* STED [photo] STARTED. wordplay row */
.about-numbers__img {
    position: relative;
    margin: calc(135 * var(--u)) 0 0 calc(360 * var(--u));
    width: calc(600 * var(--u));
}
.about-numbers__img img { width: 100%; aspect-ratio: 600 / 750; object-fit: cover; }
.about-numbers__word {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
    font-size: calc(20 * var(--t));
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.about-numbers__word--l { right: calc(100% + 60 * var(--u)); }
.about-numbers__word--r { left: calc(100% + 60 * var(--u)); }

/* ---- Service ------------------------------------------------------------ */
.about-service { margin-top: calc(300 * var(--u)); }
.about-service .about-sec__label { top: calc(31 * var(--u)); }
.about-service .about-sec__lead { text-indent: calc(177 * var(--u)); }
.about-service__kr {
    position: absolute;
    top: calc(16 * var(--u));
    right: 0;
}
.about-service__doodle {
    position: absolute;
    /* 2026-08-01 일러 교체 재실측 (2630:2090): 280×455 @top135, right 98 */
    top: calc(135 * var(--u));
    right: calc(98 * var(--u));
    width: calc(280 * var(--u));
    pointer-events: none;
}
.about-svc {
    margin: calc(150 * var(--u)) 0 0 calc(360 * var(--u));
    width: calc(820 * var(--u));
}
.about-svc__block + .about-svc__block { margin-top: calc(100 * var(--u)); }
.about-svc__block h3 {
    font-weight: 600;
    font-size: calc(40 * var(--u));
    line-height: 1.2;
}
.about-svc__cols {
    margin-top: calc(30 * var(--u));
    display: grid;
    grid-template-columns: calc(400 * var(--u)) calc(400 * var(--u));
    column-gap: calc(20 * var(--u));
}
.about-svc__cols ul {
    position: relative;
    border-top: 1px solid var(--black);
    padding-top: calc(40 * var(--u));
    min-height: calc(225 * var(--u));
}
.about-svc__cols ul:last-child:not(:first-child) { padding-left: calc(40 * var(--u)); }
.about-svc__cols ul:first-child::after {
    content: "";
    position: absolute;
    right: calc(-10 * var(--u));
    top: calc(15 * var(--u));
    height: calc(210 * var(--u));
    width: 1px;
    background: var(--black);
}
.about-svc__cols ul li {
    font-weight: 400;
    font-size: calc(30 * var(--t));
    line-height: 1.2;
}
.about-svc__cols .sep { font-weight: 200; }
.about-svc__cols--full { grid-template-columns: 1fr; }
.about-svc__cols--full ul { min-height: 0; }
.about-svc__cols--full ul:first-child::after { content: none; }

/* ---- For Life — full-bleed khaki + yellow -------------------------------- */
/* (2026-07-17: 언더 리빌·샌드위치 인터랙션 폐기 — 일반 플로우 섹션.
   네비 화이트 반전만 유지) */
/* (2026-07-18: For/Life 스플릿·노트 롤 폐기 — 정적 표시) */
.site-nav__logo,
.site-nav__menu li a { transition: color .3s; }
body.nav-invert .site-nav__logo,
body.nav-invert .site-nav__menu li a { color: var(--white); }
.about-life {
    margin-top: calc(250 * var(--u));
    background: #736e4e;
    color: var(--yellow);
    padding: calc(100 * var(--u)) 0 calc(150 * var(--u));
}
.about-life__in {
    width: calc(1920 * var(--u));   /* --u capped → 1920px, centered past cap */
    margin: 0 auto;
}
.about-life__head {
    position: relative;
    height: calc(100 * var(--u));
}
.about-life__for,
.about-life__life {
    font-weight: 500;
    font-size: calc(100 * var(--u));
    line-height: 1;
}
.about-life__for { display: inline-block; margin-left: calc(402 * var(--u)); }
.about-life__life { position: absolute; left: calc(1338 * var(--u)); top: 0; }
.about-life__note {
    position: absolute;
    left: calc(757 * var(--u));
    top: calc(39 * var(--u));
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: calc(22 * var(--t));
    line-height: 1;
}
.about-life__cols {
    position: relative;
    margin: calc(50 * var(--u)) 0 0 calc(410 * var(--u));
    display: grid;
    grid-template-columns: calc(280 * var(--u)) calc(800 * var(--u));
    column-gap: calc(20 * var(--u));
    min-height: calc(175 * var(--u));
}
.about-life__cols::before {          /* vertical rule (Figma x700, +15 h160) */
    content: "";
    position: absolute;
    left: calc(290 * var(--u));
    top: calc(15 * var(--u));
    height: calc(160 * var(--u));
    width: 1px;
    background: var(--yellow);
}
.about-life__col { border-top: 1px solid var(--yellow); }
.about-life__col--app { padding-left: calc(47 * var(--u)); }
.about-life__col h3 {
    margin-top: calc(50 * var(--u));
    font-weight: 500;
    font-size: calc(30 * var(--t));
    line-height: 1;
}
.about-life__col p {
    margin-top: calc(20 * var(--u));
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: calc(20 * var(--t));
    line-height: 1.3;
}
.about-life__img {
    display: block;
    margin: calc(77 * var(--u)) auto 0;
    width: calc(1440 * var(--u));
    aspect-ratio: 1440 / 700;
    object-fit: cover;
}
.about-life__desc {
    margin: calc(80 * var(--u)) 0 0 calc(410 * var(--u));
    display: grid;
    grid-template-columns: calc(450 * var(--u)) calc(650 * var(--u));
}
.about-life__desc h3 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: calc(30 * var(--t));
    line-height: 1.2;
}
.about-life__desc p {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: calc(22 * var(--t));
    line-height: 1.5;
}

/* ---- Team (2026-07-22 재실측 2444:380 — 명단 폐기, STED/Partnership 2컬럼 + ×마크) --
   PC: 섹션 h650, STED 40 @x410 · ×마크 @x601 y+9 · Partnership 40 @x712 ·
   역할 리스트 22 lh1.3 @top60 · 일러스트 1068×504 @x410 top146 (하단 = 푸터 맞닿음) */
.about-team {
    margin-top: calc(300 * var(--u));
    display: flow-root;   /* 일러 margin-top 146의 컬랩스 방지 — 높이 = 콘텐츠 (영상 비율 대응) */
}
.about-team .about-sec__label { top: 0; }
.about-team__info { position: absolute; left: calc(360 * var(--u)); top: 0; }
.about-team__col h3 {
    font-weight: 600;
    font-size: calc(40 * var(--t));
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.about-team__names { font-weight: 400; }
.about-team__col p {
    margin-top: calc(20 * var(--u));    /* 리스트 top 60 − h3 40 */
    font-weight: 400;
    font-size: calc(22 * var(--t));
    line-height: 1.3;
    /* 2026-07-22 사용자 확정: 역할 리스트는 원문 케이스 (uppercase 제거) */
    white-space: nowrap;
}
.about-team__col--partner { position: absolute; left: calc(302 * var(--u)); top: 0; }
.about-team__mark {
    position: absolute;
    left: calc(191 * var(--u));
    top: calc(9 * var(--u));
    width: calc(21.4 * var(--u));
    height: calc(21.2 * var(--u));
    display: block;
}
.about-team__ill {
    display: block;
    /* 2026-08-18 라인업 v3 재실측 (2810:272): 1440×498 @x341 top152 (하단 = 푸터 맞닿음).
       박스 고정 + object-fit cover(하단 기준) — 소스 비율 미세차를 Figma 박스에 맞춤 */
    margin: calc(152 * var(--u)) 0 0 calc(291 * var(--u));
    width: calc(1440 * var(--u));
    height: calc(498 * var(--u));
    object-fit: cover;
    object-position: center bottom;
}
/* Team 영상 (2026-07-22, 보드 커스텀 설정) — 이미지와 동일 박스, cover 크롭 */
.about-team__ill--mo { display: none; }
/* 영상이 설정된 브레이크포인트에선 폴백 스틸 숨김 (2026-08-02 —
   영상 첫 연결 때 스틸+영상 중복 노출 버그 수정. 각 브레이크포인트별 판정) */
.about-team:has(.about-team__ill--video.about-team__ill--pc) img.about-team__ill { display: none; }

/* About: beyond 1920 the content column stays at the 1920-design width and
   centers in the browser (type/alignment unchanged — --u is already capped). */
@media (min-width: 1921px) {
    .about-sec {
        width: 1820px;
        margin-left: auto;
        margin-right: auto;
    }
    /* rail labels stay pinned at the browser's left margin (50px),
       independent of the centered content column */
    .about-sec__label {
        left: calc(50px - (100vw - 1820px) / 2);
    }
    /* KR copy + illustration cards stay pinned at the browser's RIGHT margin
       (50px), independent of the centered column (2026-07-15 지시) */
    .about-positioning__kr,
    .about-positioning__doodle,
    .about-service__kr {
        right: calc(50px - (100vw - 1820px) / 2);
    }
    .about-service__doodle {
        right: calc(148px - (100vw - 1820px) / 2);   /* 컬럼 기준 98 + 마진 50 */
    }
}

@media (max-width: 767px) {
    /* Hero — EN 50 (natural 3-line wrap) · KR 16 SemiBold right block */
    .about-hero { padding: calc(110 * var(--u)) var(--margin) calc(80 * var(--u)); }
    .about-hero__lead { font-size: calc(50 * var(--u)); }
    .about-hero__lead .br-pc { display: none; }
    .about-hero__sub {
        /* 2026-07-16 Figma 변경: 우측 블록 → 가운데 hug (2102:496 x94 w165) — PC와 동일하게 center */
        margin-top: calc(20 * var(--u));
        font-size: calc(16 * var(--t));
        line-height: 1.2;
    }
    .about-kv { aspect-ratio: 393 / 250; }

    /* Section shell — label 14 Medium 위로 스택 · lead 32 SemiBold · KR 16 */
    .about-sec__label,
    .about-sec__label--lg {
        position: static;
        display: block;
        margin-bottom: calc(24 * var(--u));
        font-weight: 500;
        font-size: calc(14 * var(--t));
        line-height: 1.3;
    }
    .about-sec__lead {
        margin-left: 0;
        font-weight: 500;   /* 2026-07-18: 600 → Medium 500 (헤드라인 통일, PC와 동일) */
        font-size: calc(32 * var(--u));
        text-indent: 0;
    }
    .about-sec__kr {
        position: static;
        margin: calc(20 * var(--u)) 0 0;
        font-size: calc(16 * var(--t));
        line-height: 1.4;
    }

    /* Positioning */
    .about-positioning { margin-top: calc(80 * var(--u)); }
    /* PC 첫 줄 들여쓰기 규칙(.about-positioning .about-sec__lead)과 동일
       특이성으로 맞춰야 모바일에서 이김 (nth-child 함정과 같은 패턴) */
    .about-positioning .about-sec__lead { text-indent: 0; }
    .about-positioning__kr { position: static; margin: calc(20 * var(--u)) 0 0; }
    .about-positioning__doodle {
        position: static;
        /* 2026-08-01 일러 교체 (2630:2104): 234×260, KR 아래 20 유지 */
        margin-top: calc(20 * var(--u));
        width: calc(234 * var(--u));
    }
    .about-values {
        margin-top: calc(41 * var(--u));
        grid-template-columns: repeat(2, calc(160 * var(--u)));
        column-gap: calc(20 * var(--u));
        row-gap: calc(15 * var(--u));
        min-height: 0;
    }
    .about-values__item {
        min-height: calc(145 * var(--u));
        padding-left: 0;   /* 2026-07-16 재실측 (2102:476): 좌열은 라인 시작점에 플러시 */
    }
    /* 우열은 라인에서 +20 (디바이더에서 30) — Figma 가이드 20/30/19 (2026-07-16 재확인) */
    .about-values__item:nth-child(even) { padding-left: calc(20 * var(--u)); }
    .about-values__item:nth-child(1)::after,
    .about-values__item:nth-child(3)::after {
        content: "";
        position: absolute;
        right: calc(-10 * var(--u));
        top: calc(15 * var(--u));
        height: calc(130 * var(--u));
        width: 1px;
        background: var(--black);
    }
    .about-values__item:nth-child(2)::after { content: none; }
    .about-values__item--mo { display: block; }     /* 4번째 항목은 MO 전용 */
    .about-values__item h3 { margin-top: calc(30 * var(--u)); font-size: calc(18 * var(--t)); line-height: 1.2; }
    .about-values__item p { margin-top: calc(17 * var(--u)); font-size: calc(14 * var(--t)); }
    .about-positioning__imgs { margin: calc(100 * var(--u)) 0 0; gap: 0; }
    .about-positioning__img1 { width: 100%; aspect-ratio: 353 / 288; }
    .about-positioning__img2 { display: none; }

    /* Numbers */
    .about-numbers { margin-top: calc(130 * var(--u)); }
    .about-numbers .about-sec__lead { margin-left: 0; text-indent: 0; }
    .about-numbers .about-sec__kr { margin: calc(20 * var(--u)) 0 0; }
    .about-numbers__doodle {
        position: static;
        margin: calc(46 * var(--u)) 0 0 calc(33 * var(--u));   /* 2026-08-01 일러 교체 재실측 */
        width: calc(235 * var(--u));
    }
    .about-stats {
        margin: calc(60 * var(--u)) 0 0;
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .about-stats__cell {
        height: calc(139 * var(--u));
        padding-top: calc(48 * var(--u));
    }
    .about-stats__cell:last-child { border-bottom: 1px solid var(--black); }
    .about-stats__cell:nth-child(odd)::after { content: none; }
    .about-stats__label { font-size: calc(16 * var(--t)); line-height: 1.4; }
    /* 2026-07-16 재실측 (2102:525-528): MO 라벨은 전부 좌측 플러시 (PC 우열 +60 들여쓰기 없음)
       — nth-child(even) PC 규칙을 이기려면 동급 특이성 필요 (nth-child 함정) */
    .about-stats__cell:nth-child(n) .about-stats__label { padding-left: 0; }
    /* 4행(3줄 라벨)만 rule+37 — 나머지는 +48 (Figma y3023 vs 2617/2756/2895) */
    .about-stats__cell:nth-child(4) { padding-top: calc(37 * var(--u)); }
    .about-stats__num {
        top: calc(25 * var(--u));
        font-size: calc(80 * var(--u));
        line-height: 1;
    }
    .about-stats__cell:nth-child(odd) .about-stats__num,
    .about-stats__cell:nth-child(even) .about-stats__num { right: calc(10 * var(--u)); }
    .about-stats__num .about-stats__unit { top: calc(70 * var(--u)); font-size: calc(16 * var(--t)); }
    .about-numbers__img {
        margin: calc(130 * var(--u)) 0 0;
        width: 100%;
    }
    .about-numbers__img img { width: calc(315 * var(--u)); aspect-ratio: 315 / 394; }
    /* MO: STED/STARTED. 세로쓰기, 이미지 우측 상/하단 정렬 */
    .about-numbers__word {
        writing-mode: vertical-rl;
        transform: none;
        font-size: calc(16 * var(--t));
    }
    .about-numbers__word--l { left: auto; right: 0; top: 0; }
    .about-numbers__word--r { left: auto; right: 0; top: auto; bottom: 0; }

    /* Service */
    .about-service { margin-top: calc(130 * var(--u)); }
    .about-service .about-sec__lead { text-indent: 0; }
    .about-service__kr { position: static; margin: calc(20 * var(--u)) 0 0; }
    .about-service__doodle {
        position: static;
        margin: calc(20 * var(--u)) 0 0 calc(34 * var(--u));   /* 2026-08-01 일러 교체 재실측 */
        width: calc(160 * var(--u));
    }
    .about-svc { margin: calc(60 * var(--u)) 0 0; width: 100%; }
    .about-svc__block + .about-svc__block { margin-top: calc(50 * var(--u)); }
    .about-svc__block h3 { font-size: calc(22 * var(--t)); }
    .about-svc__cols {
        margin-top: calc(20 * var(--u));
        grid-template-columns: calc(166 * var(--u)) calc(167 * var(--u));
        column-gap: calc(20 * var(--u));
    }
    .about-svc__cols ul { padding-top: calc(20 * var(--u)); min-height: calc(125 * var(--u)); }
    /* PC 규칙(ul:last-child:not(:first-child) 40)과 동급 특이성으로 재정의 (specificity 함정)
       2026-07-17 재실측: 텍스트 x197 = 디바이더+20 → 컬럼 패딩 21 → 11 */
    .about-svc__cols ul + ul,
    .about-svc__cols ul:last-child:not(:first-child) { padding-left: calc(11 * var(--u)); }
    .about-svc__cols ul:first-child::after {
        top: calc(15 * var(--u));
        height: calc(110 * var(--u));
    }
    .about-svc__cols ul li {
        font-size: calc(14 * var(--t));
        line-height: 1.4;
        white-space: nowrap;   /* Figma 리스트는 한 줄 고정 (3D Modeling & Videos 등 — 2026-07-16) */
    }
    .about-svc__cols--full { grid-template-columns: 1fr; }
    .about-svc__cols--full ul { padding-left: 0; }

    /* For Life */
    .about-life {
        margin-top: calc(100 * var(--u));
        padding: calc(50 * var(--u)) 0 calc(80 * var(--u));
    }
    .about-life__in { width: 100%; }
    .about-life__head { height: calc(42 * var(--u)); }
    .about-life__for {
        margin-left: var(--margin);
        font-weight: 600;
        font-size: calc(42 * var(--u));
    }
    .about-life__for::after { content: " Life"; }   /* MO: "For Life" 한 덩어리 */
    .about-life__life { display: none; }
    .about-life__note {
        /* 우측 마진에 정렬 (Figma x260 w114 → 우변 374) — br-mo 2줄 고정 */
        left: auto;
        right: calc(19 * var(--u));
        top: calc(7 * var(--u));
        font-weight: 400;
        font-size: calc(12 * var(--t));
        line-height: 1.3;
        white-space: nowrap;
    }
    .about-life__cols {
        margin: calc(40 * var(--u)) var(--margin) 0;
        grid-template-columns: calc(166 * var(--u)) calc(167 * var(--u));
        column-gap: calc(20 * var(--u));
        min-height: calc(110 * var(--u));
    }
    .about-life__cols::before {
        left: calc(176 * var(--u));
        top: calc(15 * var(--u));
        height: calc(95 * var(--u));
    }
    .about-life__col--app { padding-left: calc(21 * var(--u)); }
    .about-life__col h3 {
        margin-top: calc(30 * var(--u));
        font-size: calc(18 * var(--t));
        line-height: 1.2;
    }
    .about-life__col p {
        margin-top: calc(10 * var(--u));
        font-weight: 400;
        font-size: calc(12 * var(--t));
    }
    .about-life__img {
        margin: calc(50 * var(--u)) var(--margin) 0;
        width: calc(353 * var(--u));
        aspect-ratio: 353 / 172;
    }
    .about-life__desc {
        margin: calc(40 * var(--u)) var(--margin) 0;
        grid-template-columns: 1fr;
    }
    .about-life__desc h3 { font-size: calc(22 * var(--t)); line-height: 1.3; }
    .about-life__desc p { margin-top: calc(20 * var(--u)); font-weight: 400; font-size: calc(16 * var(--t)); }

    /* Team (2026-07-22 재실측 2102:428 — 세로 스택, 케이스 원문 유지) */
    .about-team { margin-top: calc(100 * var(--u)); }
    .about-team .about-sec__label {
        position: absolute;             /* MO 플로우 라벨이 아래 절대좌표를 밀지 않게 */
        top: 0; left: 0;
        font-weight: 600;
        font-size: calc(22 * var(--t));
        line-height: 1.2;
        margin-bottom: 0;
    }
    .about-team__info { position: static; }
    .about-team__col h3 {
        font-size: calc(20 * var(--t));
        line-height: 1.2;
        text-transform: none;          /* Figma MO: 원문 케이스 그대로 */
    }
    .about-team__col--sted { position: absolute; left: 0; top: calc(56 * var(--u)); }
    .about-team__col--partner { position: absolute; left: 0; top: calc(193 * var(--u)); }
    .about-team__names { display: block; }   /* MO: 괄호 명단 줄바꿈 */
    .about-team__col p {
        margin-top: calc(12 * var(--u));    /* 리스트 top 92 − (h3 top 56 + 24) */
        font-size: calc(14 * var(--t));
        line-height: 1.4;
        text-transform: none;
    }
    .about-team__col--partner p { margin-top: calc(14 * var(--u)); }  /* 255 − (193+48) */
    .about-team__mark { left: 0; top: calc(152 * var(--u)); }
    .about-team__ill {
        /* 2026-08-18 라인업 MO 재실측 (2812:299): 풀블리드 393×165 @섹션top335
           (하단 = 푸터 맞닿음). 라벨 abs(top0)라 마진 = 335 그대로 */
        margin: calc(335 * var(--u)) calc(-20 * var(--u)) 0;
        width: calc(393 * var(--u));
        height: calc(165 * var(--u));
        max-width: none;
    }
    /* MO 스틸 숨김 판정은 MO 영상 기준 (PC 영상만 있으면 MO는 스틸 유지) */
    .about-team:has(.about-team__ill--video.about-team__ill--pc) img.about-team__ill { display: block; }
    .about-team:has(.about-team__ill--video.about-team__ill--mo) img.about-team__ill { display: none; }
    .about-team__ill--pc { display: none; }
    video.about-team__ill--mo { display: block; }
}