/* PL2 - 공통 리셋 & 디자인 토큰 & 공유 컴포넌트(GNB)
   토큰 값은 피그마 @DESIGNSYSTEM 페이지(node 33:4) Foundation 변수에서 그대로 가져옴. */

/* ── 폰트 ────────────────────────────────────────────────
   피그마가 쓰는 두 스타일: Tannakone Regular Condensed(400) / Medium Condensed(500).
   파일을 fonts/ 에 넣으면 활성화되고, 없으면 조용히 폴백 스택으로 떨어진다. */
@font-face {
  font-family: "Tannakone";
  src: url("../fonts/Tannakone-RegularCondensed.woff2") format("woff2"),
    url("../fonts/Tannakone-RegularCondensed.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tannakone";
  src: url("../fonts/Tannakone-MediumCondensed.woff2") format("woff2"),
    url("../fonts/Tannakone-MediumCondensed.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Works_Detail 프롬프트 카드에서 쓰는 모노 폰트 (DM Mono). 파일 없으면 시스템 모노로 폴백. */
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Headline/Quantify/Pc (26px) 에서 쓰는 폰트. 아직 사용 페이지 없음. */
@font-face {
  font-family: "Quantify";
  src: url("../fonts/Quantify.woff2") format("woff2"),
    url("../fonts/Quantify.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 컬러 - Color/Primary */
  --pl2-yellow: #ffe100; /* Primary/Normal */
  --pl2-primary-dark: #c4e77e; /* Primary/Dark */

  /* 컬러 - Color/Neutral (피그마 스케일 그대로) */
  --pl2-black: #000000; /* Neutral/0 */
  --pl2-neutral-5: #111111;
  --pl2-neutral-10: #212121;
  --pl2-neutral-20: #303030;
  --pl2-neutral-30: #555555;
  --pl2-neutral-40: #777777;
  --pl2-neutral-50: #a6a6a6;
  --pl2-neutral-60: #c8c8c8;
  --pl2-neutral-70: #dfdfdf;
  --pl2-neutral-80: #efefef;
  --pl2-neutral-90: #f5f5f5;
  --pl2-neutral-95: #fcfcfc;
  --pl2-white: #ffffff; /* Neutral/100 */

  /* 컬러 - Color/Alpha (검정 투명도) */
  --pl2-alpha-20: rgba(0, 0, 0, 0.2);
  --pl2-alpha-60: rgba(0, 0, 0, 0.6);

  /* 히어로 영상/이미지가 로드되기 전 자리 (피그마 Video 레이어의 solid fill) */
  --pl2-gray-placeholder: #c9c9c9;

  /* 타이포 */
  /* Tannakone 은 컨덴스트 폰트다. fonts/ 에 실제 파일이 들어와 있어서(2026-08-29)
     평소엔 폴백까지 갈 일이 없지만, 로딩 실패 대비로 컨덴스트를 앞에 둔다. */
  --pl2-font-display: "Tannakone", "Avenir Next Condensed", "Arial Narrow",
    "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    sans-serif;
  --pl2-font-body: "Apple SD Gothic Neo", "Pretendard", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --pl2-font-accent: "Quantify", var(--pl2-font-display);
  --pl2-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 형태 */
  --pl2-radius: min(0.625vw, 12px);
  --pl2-shadow-card: 0 min(0.2083vw, 4px) min(1.0417vw, 20px) rgba(0, 0, 0, 0.04); /* DROP_SHADOW r20 y4 4% */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--pl2-white);
  color: var(--pl2-black);
  font-family: var(--pl2-font-body);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* 폼 요소는 UA 기본 폰트를 쓰므로 본문 폰트로 강제 */
button,
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

/* ══ GNB (모든 페이지 공유) ═══════════════════════════════
   피그마 컴포넌트: GNB/Bar (Dropdown=Off|On, Type=Default|T/W|T/B)
              + GNB/Dropdown (Select=Default|Home|Works|About|Contact)
   페이지 안에서의 위치는 각 페이지 CSS 가 잡는다 (home 은 .hm-hero 중앙).
   Type 모디파이어: 기본(노란 바) / .gnb--tw (어두운 배경 위, 흰 텍스트)
                    / .gnb--tb (밝은 배경 위, 검은 텍스트) */
.gnb {
  position: relative;
  /* 크기는 화면 폭과 상관없이 고정이다 (PC 피드백_1007).
     원래 vw 로 비례 축소했지만, 태블릿에서도 PC 와 같은 400x60 을 유지하라는 코멘트로
     GNB 안쪽 모든 치수를 px 로 되돌렸다. 모바일(599 이하)만 아래에서 따로 잡는다. */
  width: 400px; /* 400 */
  max-width: calc(100% - 40px);
  /* 드롭다운이 아래로 쓸 수 있는 높이. 기본값은 바를 화면 위(top 12)에 고정하는
     페이지 기준이다 — 패널 위쪽 12+60+12=84 와 아래 여백 12 를 합쳐 96.
     바를 화면 중앙에 두는 Home 은 index.css 가 이 값을 덮는다. */
  --gnb-drop-space: calc(100dvh - 96px);
}

.gnb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* 12 */
  height: 60px; /* 60 */
  padding-left: 24px; /* 24 */
  padding-right: 20px; /* 20 */
  position: relative;
  background: var(--pl2-yellow);
  border-radius: 12px; /* --pl2-radius 12 */
  /* PC 피드백_1015: 어두운/밝은 배경 위 가시성 — 그림자 0 4 20 검정 8% (원래 4%) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* PC 피드백_1015: 바·드롭다운에 1px 윤곽선 (세 타입 공통).
   피그마 stroke 2겹 = 흰색 그라디언트(왼쪽 위 70% → 오른쪽 아래 0%) + 흰색 10%.
   border 로는 그라디언트를 못 그려서 가상 요소에 배경을 깔고 가운데를 mask 로 뚫는다. */
.gnb-bar::after,
.gnb-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 90%),
    rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gnb-brand {
  color: var(--pl2-black);
  font-family: var(--pl2-font-display);
  font-size: 25px; /* 25 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.25px; /* 0.25 */
  white-space: nowrap;
}

.gnb-toggle {
  flex: none;
  width: 32px; /* 32 */
  height: 32px;
  background: url("icon-hamburger.svg") center /
    32px 32px no-repeat;
}

.gnb[data-dropdown="on"] .gnb-toggle {
  background-image: url("icon-x.svg");
}

/* ── 드롭다운 패널 ───────────────────────────────────────
   피그마 상세 03·04·05·06·07 에 숨겨져 있던 GNB 프레임(400x480, y=84) 스펙.
   디자인시스템 컴포넌트(GNB/Dropdown, 노랑/60px, 타입별 3종)와는 다른 안이고,
   이쪽은 타입 구분 없이 흰 글라스 패널 하나로 통일돼 있다.
   fill #ffffff@50% / radius 4 / DROP_SHADOW 0 4 20 #000@4% / GLASS:4 / 바와 간격 12.
   라운딩은 PC 피드백_0930 에서 바와 같은 12 로 바꿨다 (원래 4).
   바 자체는 열려도 제자리에 있어야 하므로 흐름에서 빼서 absolute 로 매단다. */
.gnb-panel {
  position: absolute;
  top: calc(100% + 8px); /* 8 — PC 피드백_1015 GNB 컴포넌트 간격 (원래 12) */
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 넣을 자리가 모자라면 스크롤 대신 행을 줄인다 (2026-09-04).
     피그마 비율(행 120 / 글자 110 / 행간 100)을 그대로 유지한 채 같이 작아지므로
     4개 항목이 어떤 창 높이에서도 전부 보인다.
     120px(피그마 값) / 세로 여유 중 작은 값을 고른다 — 폭으로는 줄지 않고
     창 높이가 모자랄 때만 줄어든다 (PC 피드백_1007). */
  --gnb-row: min(120px, calc(var(--gnb-drop-space) / 4));
  /* 화면 밖으로 나가지 않게 하는 마지막 안전장치.
     ⚠ overflow-y: auto 를 여기 다시 넣으면 스크롤바가 항상 생긴다 —
       행 높이 합(480)은 딱 맞지만 110px 글자의 라인박스가 8px 넘쳐서
       scrollHeight 가 488 이 되기 때문이다. 아래 overflow: hidden 을 그대로 둔다. */
  max-height: var(--gnb-drop-space);
  /* 닫힘: 위에서부터 접혀 있다가 열리면 "쓰윽" 내려온다 (모션피드백_0928, 참고 koto.com).
     display 토글은 전환이 안 되므로 visibility + clip-path 로 숨긴다.
     visibility 는 닫힐 때만 전환이 끝난 뒤에 꺼지도록 지연시킨다. */
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.7, 0, 0.84, 0),
    visibility 0s linear 0.45s;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px; /* 12 — 바와 같게 (PC 피드백_0930) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 0 4 20 검정 8% (PC 피드백_1015) */
  backdrop-filter: blur(4px); /* GLASS radius 4 근사. 블러는 스케일하지 않는다 */
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden; /* 첫/마지막 행 배경을 라운드에 맞춰 잘라낸다 */
}

.gnb[data-dropdown="on"] .gnb-panel {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* 행은 패널보다 살짝 늦게, 위에서부터 차례로 내려앉는다 */
.gnb[data-dropdown="on"] .gnb-item {
  animation: gnb-item-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.gnb[data-dropdown="on"] .gnb-item:nth-child(1) { animation-delay: 0.08s; }
.gnb[data-dropdown="on"] .gnb-item:nth-child(2) { animation-delay: 0.14s; }
.gnb[data-dropdown="on"] .gnb-item:nth-child(3) { animation-delay: 0.2s; }
.gnb[data-dropdown="on"] .gnb-item:nth-child(4) { animation-delay: 0.26s; }

@keyframes gnb-item-in {
  from {
    opacity: 0;
    translate: 0 -40%;
  }
}

/* 고정 GNB: 아래로 스크롤하면 위로 빠지고, 위로 스크롤하면 다시 내려온다 (gnb.js).
   페이지 CSS 가 transform 으로 중앙 정렬을 하므로 겹치지 않게 translate 를 쓴다. */
.gnb {
  transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gnb.is-away {
  translate: 0 calc(-100% - 24px);
  transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
  transition-duration: 0.4s;
}

.gnb-item {
  display: flex;
  align-items: center;
  /* 행 120 = 위아래 패딩 24 + 텍스트 72. 패널 480 = 120 x 4 다.
     구분선이 그 120 안에 그려져야 하므로 높이를 고정한다 (auto 면 121 이 된다). */
  flex: none; /* 패널이 max-height 로 잘릴 때 행이 눌리지 않게 */
  /* 행 높이는 --gnb-row 하나가 정하고 글자·행간이 같은 비율(60/120, 72/120)로 따라간다.
     1920 에서 120 / 60 / 72 = 피그마 컴포넌트(GNB/Dropdown/Action) 값.
     2026-08-29 에 숨은 안(110px/행간 100)을 쓰다가 디자인피드백_0918 로 되돌렸다. */
  height: var(--gnb-row, 120px);
  padding: 0 24px; /* 24 */
  border-bottom: 1px solid var(--pl2-white); /* 헤어라인은 스케일하지 않는다 */
  color: var(--pl2-neutral-10); /* #212121 */
  font-family: var(--pl2-font-display);
  font-size: calc(var(--gnb-row, 120px) * 60 / 120); /* 60 */
  font-weight: 500;
  line-height: calc(var(--gnb-row, 120px) * 72 / 120); /* 72 */
  text-decoration: none;
  white-space: nowrap;
}

.gnb-item:last-child {
  border-bottom: 0;
}

/* Hover=On: 검정 60% 배경 + 노란 글자 (#EEE021 — 토큰 노랑과 미세하게 다르다)
   현재 페이지 강조는 뺐다 (PC 피드백_0930) — 메뉴를 열었을 때는 아무것도 강조되지 않고
   마우스를 올린 행만 강조된다. aria-current 는 스크린리더용으로 HTML 에 그대로 둔다.
   키보드 사용자를 위해 :focus-visible 도 같은 강조를 준다 (마우스 클릭엔 안 뜬다). */
.gnb-item:hover,
.gnb-item:focus-visible {
  background: rgba(0, 0, 0, 0.6);
  color: #eee021;
}

/* ── 타입별 패널 색 ──────────────────────────────────────
   숨은 110px 안은 T/B(밝은 배경) 페이지 5장에만 그려져 있다. 그래서
   치수(110px / 행 120 / 간격 12 / radius 12)는 전 타입에 공용으로 쓰되,
   패널·글자 색은 각 타입에 대해 피그마가 정의해 둔 값을 쓴다.
   흰 반투명 패널을 그대로 어두운 페이지에 얹으면 #212121 글자가 묻힌다
   (실측 대비 1.12:1 — WCAG AA 4.5:1 한참 미달). */

/* Default (노란 바): 컴포넌트 GNB/Dropdown Select=* 는 불투명 노란 패널 */
:where(.gnb:not(.gnb--tw):not(.gnb--tb)) .gnb-panel {
  background: var(--pl2-yellow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:where(.gnb:not(.gnb--tw):not(.gnb--tb)) .gnb-item {
  color: var(--pl2-black);
  border-bottom-color: rgba(0, 0, 0, 0.12); /* PC 피드백_1026 GNB 시안: 검정 12% */
}

/* T/W (어두운 배경): 컴포넌트는 검정 10% + GLASS, 글자 흰색 */
:where(.gnb--tw) .gnb-panel {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

:where(.gnb--tw) .gnb-item {
  color: var(--pl2-white);
  border-bottom-color: rgba(255, 255, 255, 0.2); /* PC 피드백_1026 GNB 시안: 어두운 배경용은 흰색 20% */
}

/* 노란 패널 위에서는 검정 60% 가 올리브색으로 떠서 탁하다.
   컴포넌트 GNB/Dropdown Select=<page> 가 정의한 대로 불투명 검정 + 노랑을 쓴다. */
.gnb:not(.gnb--tw):not(.gnb--tb) .gnb-item:hover,
.gnb:not(.gnb--tw):not(.gnb--tb) .gnb-item:focus-visible {
  background: var(--pl2-black);
  color: var(--pl2-yellow);
}

/* T/B (밝은 배경) 는 숨은 안 그대로라 추가 규칙이 필요 없다.
   위 타입 규칙은 :where() 로 감싸 특이도를 0 으로 만들었다 —
   그래야 아래의 hover/현재페이지 규칙이 타입 규칙을 이긴다. */

/* ── Type=T/W : 어두운 배경 위 (fill 검정 10% + 흰 테두리 + glass) ── */
.gnb--tw .gnb-bar {
  background: rgba(0, 0, 0, 0.1);
  /* 윤곽선은 공통 ::after (PC 피드백_1015) */
  backdrop-filter: blur(20px); /* GLASS 효과 근사 */
  -webkit-backdrop-filter: blur(20px);
}

.gnb--tw .gnb-brand {
  color: var(--pl2-white);
}

.gnb--tw .gnb-toggle {
  background-image: url("icon-hamburger-white.svg");
}

.gnb--tw[data-dropdown="on"] .gnb-toggle {
  background-image: url("icon-x-white.svg");
}


/* ── Type=T/B : 밝은 배경 위 (fill 흰색 30% + glass) ────── */
.gnb--tb .gnb-bar {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* PC 피드백_1015: T/B 드롭다운도 바와 같은 흰색 30% + glass, 글자 검정, 구분선 검정 20% */
:where(.gnb--tb) .gnb-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

:where(.gnb--tb) .gnb-item {
  color: var(--pl2-black);
  border-bottom-color: rgba(0, 0, 0, 0.12); /* PC 피드백_1026 GNB 시안: 검정 12% */
}



/* ── 모바일 GNB (PC 피드백_1007, 피그마 Mo 3108:15815) ──────────
   피그마 Mo(390) 에서 바는 좌우 20 을 뺀 350x60. 안쪽 치수(높이 60 / 패딩 24·20 /
   글자 25 / 아이콘 32 / 라운드 12)는 PC 와 같고 폭만 화면에 맞춰 늘어난다.
   세로 위치는 페이지 CSS 가 잡는다 (Works 는 top 60). */
@media (max-width: 599.98px) {
  .gnb {
    width: calc(100% - 40px);
    max-width: none;
  }
}

/* ══ 맨 위로 버튼 (Works · 상세 공유, top-btn.js) ══════════════════ */
.top-btn {
  position: fixed;
  /* 화면 우측 하단에서 40, 40 (PC 피드백_0930, 피그마 Works 2869:12833 의 Liquid Glass).
     Works 와 상세 페이지가 같이 쓴다.
     콘텐츠(.wk-main)는 max-width 1920 으로 가운데 정렬되는데 버튼은 fixed 라
     1920 초과 화면에서는 화면 끝으로 달아난다 (실측: 2560 에서 콘텐츠 바깥 270px).
     그래서 좌우 여백(50vw - 960px)을 더해 카드 오른쪽 끝 기준 40 을 유지한다.
     1920 이하에서는 그 값이 0 이라 그냥 화면 우측 40 이다. */
  right: calc(max(0px, 50vw - 960px) + min(2.0833vw, 40px)); /* 40 */
  bottom: min(2.0833vw, 40px); /* 40 */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(3.125vw, 60px);
  height: min(3.125vw, 60px);
  border-radius: 50%;
  /* 노란 기가 튄다는 피드백으로 중성 화이트 글래스로 바꿨다 (PC 피드백_0930).
     피그마 렌더 실측: 흰 바탕 위에서 #F5~#FA 의 무채색 원 + 그림자.
     알파 .6 은 뒤가 비치면서도 어두운 카드 위에서 검정 화살표 대비가 AA(4.5:1)를
     넘는 값이다 (이전 노란 글래스 때 .5 에서 실측한 기준과 같은 방식). */
  background: rgba(245, 245, 245, 0.6);
  /* 블러는 스케일하지 않는다 (GNB 패널과 같은 규칙) */
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  /* 푸터 영역에 들어가면 사라진다 (top-btn.js 가 .is-away 를 붙인다) */
  transition: opacity 0.4s ease, visibility 0s linear 0s;
  /* 피그마 DROP_SHADOW 0 4 20 #000@12% + 유리 가장자리 하이라이트 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 min(0.2083vw, 4px) min(1.0417vw, 20px) rgba(0, 0, 0, 0.12);
}

/* 회전 전 23.708x14.858 → -90deg 돌려 60x60 정중앙에 온다 */
.top-btn-arrow {
  width: min(1.2348vw, 23.708px);
  height: min(0.7738vw, 14.858px);
  transform: rotate(-90deg);
}

.top-btn.is-away {
  opacity: 0;
  visibility: hidden; /* 사라진 동안 클릭·포커스되지 않게. 페이드가 끝난 뒤 꺼진다 */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* 1280 미만(태블릿·모바일)에서는 vw 로 줄이면 버튼이 손가락보다 작아진다
   (834 에서 26px). GNB 와 같이 PC 크기 60 을 그대로 쓴다 (PC 피드백_1007). */
@media (max-width: 1279.98px) {
  .top-btn {
    right: 40px;
    bottom: 40px;
    width: 60px;
    height: 60px;
  }

  .top-btn-arrow {
    width: 23.708px;
    height: 14.858px;
  }
}

@media (max-width: 599.98px) {
  .top-btn {
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)); /* 홈 인디케이터 위 */
  }
}

/* ══ 푸터 (여러 페이지 공유) ═══════════════════════════════
   피그마 About > Frame 1428752813 (2345:61393)
   = 노란 워드마크 블록 480 + 하단 바 90. 디자인시스템의 Footer(1960:7789)는 하단 바만. */
.ft {
  display: flex;
  flex-direction: column;
  /* 등장 모션 때 노란 블록이 아래에서 올라오는데, 내려가 있는 부분이 페이지 끝 밖으로
     삐져나가 문서 높이를 늘리지 않게 자른다 */
  overflow: clip;
}

/* 워드마크 블록: padding 120 상하 + content padding 24 상하 = 480 */
.ft-hero {
  display: flex;
  justify-content: center;
  padding: min(6.25vw, 120px) 0;
  background: var(--pl2-yellow);
  overflow: hidden; /* 피그마 overflow-clip — 좁은 창에서는 잘린다 */
}

.ft-hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: min(1.25vw, 24px) min(2.0833vw, 40px) min(1.25vw, 24px) min(3.3333vw, 64px);
}

.ft-wordmark {
  color: var(--pl2-black);
  font-family: var(--pl2-font-display);
  font-size: min(8.3333vw, 160px) /* 160 */;
  font-weight: 500;
  line-height: min(10vw, 192px) /* 192 */; /* 120% */
  white-space: nowrap;
}

/* 하단 바: 30+30 padding + content 30 = 90 */
.ft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(1.5625vw, 30px) min(2.0833vw, 40px);
  background: var(--pl2-yellow);
  overflow: hidden;
}

.ft-bar-left {
  display: flex;
  align-items: center;
  gap: min(1.0417vw, 20px);
}

.ft-logo {
  width: min(1.2486vw, 23.973px);
  height: min(1.5769vw, 30.276px);
}

.ft-copy {
  color: var(--pl2-neutral-10);
  font-size: min(0.8541vw, 16.399px) /* 16.399 */;
  font-weight: 400;
  line-height: min(1.0417vw, 20px) /* 20 */;
  letter-spacing: 0.04em; /* 4% */
  white-space: nowrap;
}

.ft-links {
  display: flex;
  align-items: center;
  gap: min(1.0417vw, 20px);
}

.ft-links a {
  color: var(--pl2-neutral-10);
  font-size: min(0.9855vw, 18.922px) /* 18.922 */;
  font-weight: 500;
  line-height: min(1.1979vw, 23px) /* 23 */;
  text-decoration: none;
  white-space: nowrap;
}

.ft-links a:hover {
  text-decoration: underline;
}

/* 구분선: 피그마 Line 49 (stroke #555555, 1.2615px, 길이 10.092px) */
.ft-divider {
  flex: none;
  width: min(0.0657vw, 1.2615px);
  height: min(0.5256vw, 10.092px);
  background: var(--pl2-neutral-30);
}

/* 화면에는 없지만 스크린리더에는 읽히는 텍스트 (피그마에 제목이 없는 페이지의 h1) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: min(-0.0521vw, -1px);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ══ 공통 모션 (motion.js) ════════════════════════════════
   피그마 PC 모션피드백_0928 (2836:11814).
   JS 가 켜졌을 때(html.mo-on)만 숨기므로 JS 가 없으면 콘텐츠는 그냥 보인다.
   transform 대신 translate 를 쓴다 — 페이지 CSS 의 transform 과 겹치지 않는다. */

/* ── 스크롤 등장: 아래에서 위로 쓱 붙는다 ───────────────
   .mo-out  = 숨김 상태. 화면 밖에서 붙였다 뗐다 하므로 전환 없이 즉시 바뀐다.
   .mo-anim = 등장하는 동안만 붙는 transition. 끝나면 떼서 요소 고유의 전환을 살린다.
   --mo-dir = 1 이면 아래에서, -1 이면 위에서 들어온다 (스크롤을 올릴 때). */
.mo-on .mo-reveal.mo-anim {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    translate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mo-on .mo-reveal.mo-out {
  opacity: 0;
  /* 80 — 참고 사이트보다 크게 잡아 텐션을 준다 */
  translate: 0 calc(var(--mo-dir, 1) * min(4.1667vw, 80px));
}

/* 푸터는 박스 자체는 제자리에 두고 안쪽 노란 블록들(.ft-hero + .ft-bar)을 한 몸으로
   올린다. .ft 가 overflow: clip 이라 페이지 높이가 변하지 않는다. */
.mo-on .ft.mo-reveal.mo-out {
  opacity: 1;
  translate: none;
}

.mo-on .ft.mo-reveal.mo-anim > * {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    translate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: inherit; /* motion.js 가 .ft 에 준 시차를 그대로 따른다 */
}

.mo-on .ft.mo-reveal.mo-out > * {
  opacity: 0;
  translate: 0 min(6.25vw, 120px); /* 120 — 블록이 커서 일반 콘텐츠(80)보다 길게 */
}

/* ── Home → Works 밀어 올리기 전환 (PC 피드백_0930, 피그마 슬라이드 8·9) ───────────
   떠날 때: Home 화면 전체가 위로 밀려 올라간다.
   들어올 때 (8): Works 카드가 화면 아래에서 출발해 하나씩 쏙쏙 붙는다.
     첫 화면 밖의 카드는 평소 스크롤 등장(.mo-out)이 이 규칙보다 우선한다.
   정착 (9): 카드가 모두 붙으면 메뉴바가 위에서 툭 떨어져 자리 잡는다 (back-out 이징).
     시작 시각은 motion.js 가 카드 수로 계산해 --pt-gnb-delay 로 넘긴다.
   전부 translate 를 쓴다 — 페이지 CSS 의 transform 과 겹치지 않는다. */
html.pt-push-leave .hm-hero {
  translate: 0 -100vh;
  transition: translate 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}

/* 첫 페인트(JS 전)에는 모든 카드를 아래에 둔다. JS 가 돈 뒤(.mo-reveal 이 붙은 뒤)에는
   첫 화면 카드(.is-push)만 이 규칙을 받는다 — 나머지 카드까지 100vh 아래에 붙잡아 두면
   전환이 끝나기 전 스크롤로 등장할 때 엉뚱한 위치에서 날아와 위아래로 흔들렸다. */
html.pt-push-enter .wk-card:not(.mo-reveal),
html.pt-push-enter .wk-card.is-push,
html.pt-push-enter .top-btn {
  translate: 0 100vh;
}

html.pt-push-enter .gnb {
  translate: 0 calc(-100% - min(3.125vw, 60px));
}

html.pt-push-enter.pt-push-in .wk-card.is-push {
  translate: 0 0;
  transition: translate 1s cubic-bezier(0.16, 1, 0.3, 1);
}

html.pt-push-enter.pt-push-in .gnb,
html.pt-push-enter.pt-push-in .top-btn {
  translate: 0 0;
  transition: translate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1)
    var(--pt-gnb-delay, 0.6s);
}

/* 카운팅 중 자릿수 폭이 흔들리지 않게 */
.ab-stat-num {
  font-variant-numeric: tabular-nums;
}

/* ── 페이지 전환: 노란 패널이 아래에서 덮고 → 다음 페이지에서 위로 빠진다 ── */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--pl2-yellow);
  pointer-events: none;
  translate: 0 100%;
}

/* 덮을 때는 빠르게 출발해서 감속한다 (ease-out-quart).
   원래 들어올 때와 같은 ease-in-out(0.76, 0, 0.24, 1)이었는데, 처음 0.2초 남짓 거의
   안 움직여서 누른 카드 썸네일이 0.5초쯤 그대로 보였다 (Works → 상세 피드백). */
html.pt-leave::after {
  translate: 0 0;
  pointer-events: auto; /* 덮는 동안 두 번 클릭되지 않게 */
  transition: translate 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

html.pt-enter::after {
  translate: 0 0;
}

html.pt-enter.pt-entering::after {
  translate: 0 -100%;
  transition: translate 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
  .gnb-panel,
  .gnb[data-dropdown="on"] .gnb-panel,
  .gnb {
    transition: none;
  }

  .gnb[data-dropdown="on"] .gnb-item {
    animation: none;
  }
}

/* ══ 해외 방문자 자동 번역 (PC 피드백_1015, translate.js) ══════════════
   Google 번역기가 붙이는 상단 배너·툴팁·하이라이트를 숨기고, 배너 때문에 밀리는
   body top 을 되돌린다. 위젯 자리(#pl2-translate)도 화면에 보이지 않게 둔다. */
#pl2-translate,
.goog-te-banner-frame,
iframe.skiptranslate,
body > .skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* 번역문 타이포 보정 (전 페이지 공통)
   - Google 번역은 바꾼 글을 <font> 로 감싼다. 한국어 기준 마이너스 자간이 라틴 글자를
     붙여 뭉개 보이게 하므로 번역된 글자에만 자간 0 을 준다 (원래 영어인 제목은 그대로)
   - 상세 헤더 설명은 한국어 줄 길이에 맞춰 nowrap 으로 묶어 두었는데, 번역문은 길어져
     칸을 뚫고 나가므로 다시 자동 줄바꿈시킨다 (<br> 은 translate.js 가 공백으로 바꾼다) */
html[class*="translated-"] font {
  letter-spacing: 0;
}

html[class*="translated-"] .wd-head-desc,
html[class*="translated-"] .wd-intro-desc {
  white-space: normal;
}