/* leesuzy.com 시제품 — DESIGN.md 토큰을 그대로 옮긴 스타일 */

/* 서체 (2026-10-08 수지): 영문·한글 모두 Pretendard 하나. Pretendard는 각 페이지 <head>의 CDN으로 불러옴 */

:root {
  /* Color — 팔레트 (2026-10-05 수지 디자인 시스템 컬러 차트) */
  --color-blue-400: #619FFB;  --color-blue-300: #A5C0E6;  --color-blue-200: #C1D5F2;  --color-blue-100: #EFF5FF;  /* Primary (10-05 수지: Blue는 이 4개만) */
  --color-brown-100: #B0A482; --color-yellow-100: #F5F693;                                                        /* Secondary */
  --color-red-600: #F90030;   --color-red-200: #FFACB2;   --color-red-100: #FFEDEF;                               /* System */
  --color-white: #FFFFFF;                                                                                          /* Common */
  --color-grey-900: #171F29;  --color-grey-800: #303D4C;  --color-grey-700: #4B5969;  --color-grey-600: #687685;  --color-grey-500: #8995A2;
  --color-grey-400: #AFB8C2;  --color-grey-300: #D0D6DD;  --color-grey-200: #E6E8EB;  --color-grey-100: #F3F4F6;  --color-grey-50: #F9FAFB;

  /* Color — 역할 (화면에서는 이 이름만 씀) */
  --color-fg: var(--color-grey-900);        /* 이전 #000000 */
  --color-fg-muted: var(--color-grey-600);  /* 이전 #666666 */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-grey-100);  /* 이전 #F1F1F1 */
  --color-border: var(--color-grey-200);    /* 이전 12% 검정 */
  --color-glass: rgba(255, 255, 255, 0.3);  /* White 30% — 홈 내비·키워드 반투명 배경 */

  /* Font */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Type scale: size / leading / tracking */
  /* 한 가지 크기 (2026-10-08 수지: 영문·한글 통합, 기준 = 한글 크기). 영문도 이 크기 그대로 */
  --text-hero: 72px;       --leading-hero: 130%;       --tracking-hero: -0.03em;
  --text-display: 40px;      --leading-display: 130%;      --tracking-display: -0.02em;  /* 10-05: 44 → 40 */
  --text-heading-1: 26px;    --leading-heading-1: 130%;    --tracking-heading-1: -0.015em;
  --text-heading-2: 20px; --leading-heading-2: 180%; --tracking-heading-2: -0.01em;
  --text-body-1: 18px;     --leading-body-1: 180%;     --tracking-body-1: -0.01em;
  --text-body-2: 16px;       --leading-body-2: 180%;       --tracking-body-2: -0.005em;
  --text-label: 14px;      --leading-label: 180%;      --tracking-label: 0em;
  --text-caption: 13px;    --leading-caption: 180%;    --tracking-caption: 0em;

  /* Radius */
  --radius-link: 4px;
  --radius-card: 6px;
  --radius-full: 9999px;

  /* Layout */
  --container-page: 1840px;
  --container-text: 720px;
  --layout-margin: 40px;
  --layout-section: 120px;
  --layout-gutter: 24px;
  --layout-nav: 80px; /* 10-08 수지: 60 → 80 (휴대폰 내비는 64) */
  --nav-height: var(--layout-nav);
}

@media (max-width: 767px) {
  :root {
    --layout-margin: 16px;
    --layout-section: 64px;
    --layout-gutter: 16px;
    --nav-height: 56px;
    --text-display: 28px;
    --text-heading-1: 22px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page {
  width: 100%;
  max-width: calc(var(--container-page) + var(--layout-margin) * 2); /* 콘텐츠 1840 + 좌우 여백 */
  margin: 0 auto;
  padding: 0 var(--layout-margin);
}

/* Type helpers */
.t-display-kr { font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-display-en { font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-heading-1-kr, .t-heading-kr { font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--text-heading-1); line-height: var(--leading-heading-1); letter-spacing: var(--tracking-heading-1); }
.t-heading-2-en, .t-sub-en { font-family: var(--font-sans); font-size: var(--text-heading-2); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); }
.t-body-1-kr, .t-body-l-kr { font-size: var(--text-body-1); line-height: var(--leading-body-1); letter-spacing: var(--tracking-body-1); }
.t-body-2-kr, .t-body-kr { font-size: var(--text-body-2); line-height: var(--leading-body-2); letter-spacing: var(--tracking-body-2); }
.t-label { font-family: var(--font-sans); font-size: var(--text-label); line-height: var(--leading-label); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.muted { color: var(--color-fg-muted); }

/* Top Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--nav-height);
  background: var(--color-bg);
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__mark { font-family: var(--font-sans); font-size: var(--text-heading-2); letter-spacing: var(--tracking-heading-2); line-height: 1; }
.nav__mark .word { display: inline-block; line-height: 0.8; }
.nav__menu { display: flex; gap: 32px; }
.nav__menu a { color: var(--color-fg-muted); transition: color 200ms ease; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: var(--color-fg); }

/* Home 히어로: 처음에는 nav의 ( Suzy )를 숨기고 큰 워드마크를 보여 줌 (투명도는 main.js가 조절) */
.has-hero .nav__mark .paren,
.has-hero .nav__mark .word { opacity: 0; }

.hero {
  position: relative;
  height: 100vh; min-height: 640px;
}
.wordmark {
  position: fixed; z-index: 30;
  top: var(--nav-height); left: var(--layout-margin);
  margin: 0 0 0 -0.04em;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(120px, 20.83vw, 400px); /* 1920에서 400px, 1440에서 300px */
  line-height: 0.8;
  letter-spacing: -0.035em;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}
.is-docked .wordmark { visibility: hidden; }

.hero__intro {
  position: absolute; left: var(--layout-margin); right: var(--layout-margin); bottom: 40px;
  display: grid;
  grid-template-columns: 22% 18% minmax(0, 1fr); /* 1920에서 404 / 330 / 나머지 */
  gap: var(--layout-gutter);
  align-items: start;
}
.hero__meta { font-family: var(--font-sans); font-size: var(--text-heading-2); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); }
.hero__statement { max-width: 960px; margin: 0; }

@media (max-width: 1023px) {
  .hero__intro { grid-template-columns: 1fr 1fr; }
  .hero__statement { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; }
}
@media (max-width: 767px) {
  .hero__meta { font-size: 16px; }
}

/* Section Header */
.section-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--color-border);
}

/* Work grid 2-1-2 */
.work { padding-top: 80px; }
.grid { display: flex; flex-direction: column; gap: 80px; margin-top: 40px; }
.grid__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gutter); }
.grid__row--full { grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .grid { gap: 56px; }
  .grid__row { grid-template-columns: 1fr; gap: 56px; }
}

.card { display: flex; flex-direction: column; gap: 20px; transition: opacity 200ms ease; }
@media (hover: hover) {
  .grid:has(.card:hover) .card:not(:hover) { opacity: 0.4; }
}
.card__thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  background: var(--color-bg-muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.grid__row--full .card__thumb { aspect-ratio: 16 / 9; }
.card__info { display: flex; flex-direction: column; gap: 8px; }
.card__title { font-family: var(--font-sans); font-size: var(--text-heading-2); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); }
.card__summary { max-width: var(--container-text); }
.card__meta { padding-top: 4px; }

/* 목업 자리 */
.mock-browser {
  width: 72%; aspect-ratio: 8 / 5;
  background: var(--color-bg); border-radius: var(--radius-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.mock-browser::before {
  content: ''; height: 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 15px 12px, var(--color-border) 3.5px, transparent 4px),
    radial-gradient(circle at 28px 12px, var(--color-border) 3.5px, transparent 4px),
    radial-gradient(circle at 41px 12px, var(--color-border) 3.5px, transparent 4px);
}
.mock-phone {
  height: 83%; aspect-ratio: 180 / 370;
  background: var(--color-bg); border-radius: 26px;
}
.mock-label { margin: auto; }

/* Footer */
.footer { padding-top: 160px; padding-bottom: 40px; }
.footer__closing { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.footer__bottom {
  margin-top: 120px; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--color-border);
}
.footer__links { display: flex; gap: 32px; }

.btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--text-label);
  transition: opacity 200ms ease, background-color 200ms ease;
}
.btn--primary { background: var(--color-fg); color: var(--color-bg); }
.btn--primary:hover { opacity: 0.8; }
.btn--secondary { border: 1px solid var(--color-border); }
.btn--secondary:hover { background: var(--color-bg-muted); }

/* 일반 페이지(상세·About·Info): nav가 처음부터 보임 */
.content { padding-top: calc(var(--nav-height) + 80px); }

/* Case Study */
.cs-header { display: flex; flex-direction: column; gap: 32px; }
.cs-header__title { margin: 0; }
.cs-header__summary { max-width: var(--container-text); margin: 0; }
.cs-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-gutter);
  padding-top: 20px; border-top: 1px solid var(--color-border);
}
.cs-meta dt { margin: 0 0 8px; }
.cs-meta dd { margin: 0; }
@media (max-width: 767px) { .cs-meta { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

.cs-image {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--color-bg-muted); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
}
.cs-chapter { margin-top: var(--layout-section); display: flex; flex-direction: column; gap: 40px; }
.cs-chapter__text { display: flex; flex-direction: column; gap: 16px; max-width: var(--container-text); }
.cs-chapter__title { margin: 0; }
.cs-chapter__body { margin: 0; }
.cs-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--layout-gutter); max-width: 960px; }
.cs-numbers strong { display: block; font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.cs-credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px var(--layout-gutter); padding-top: 20px; border-top: 1px solid var(--color-border); }
.cs-credits dt { margin: 0 0 4px; }
.cs-credits dd { margin: 0; }
.cs-pager { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.cs-pager a:hover .card__title { opacity: 0.6; }

/* About · Info */
.doc-section { margin-top: var(--layout-section); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
.doc-section:first-of-type { margin-top: 0; }
.doc-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.doc-item { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--layout-gutter); padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.doc-item p { margin: 0; max-width: var(--container-text); }
@media (max-width: 767px) {
  .doc-section, .doc-item { grid-template-columns: 1fr; gap: 12px; }
}

/* 시제품 안내 띠 */
.proto-note {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  padding: 8px 12px; border-radius: var(--radius-full);
  background: var(--color-fg); color: var(--color-bg);
  font-size: 12px; line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ───────── v2 (2026-10-04 전면 수정) ───────── */
:root {
  --color-cover: var(--color-yellow-100); /* Yellow-100 #F5F693 (10-05 수지 수정) */
  --color-line: var(--color-grey-900);    /* 이전 #000000 */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-40: 40px;
  --space-48: 48px; /* 10-05 추가 */
  --space-52: 52px;
  --space-72: 72px; /* 10-05 추가 */
  --space-80: 80px;
  --text-title: 114px; --leading-title: 130%; --tracking-title: -0.02em;
}

/* 헤더: 좌우 40, 높이 60 */
.site-header {
  height: var(--layout-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--layout-margin);
  background: var(--color-bg);
}
.site-header__logo { font-family: var(--font-sans); font-size: var(--text-heading-2); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); }

/* 홈: 3단 프레임, 화면 끝까지 */
.panels {
  display: flex;
  height: calc(100vh - var(--layout-nav)); min-height: 560px;
  border-top: 1px solid var(--color-line);
}
.panel {
  flex: 1 1 0; display: block;
  background: var(--color-bg-muted) center / cover no-repeat;
}
.panel + .panel { border-left: 1px solid var(--color-line); }

/* 상세: 표지 */
.cover {
  position: relative;
  height: 100vh; min-height: 720px;
  background: var(--color-cover);
}
.cover__role { position: absolute; top: 40px; right: var(--layout-margin); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: var(--text-body-1); line-height: var(--leading-label); }
.cover__role-label { padding-bottom: 4px; border-bottom: 1px solid var(--color-fg); }
.cover__summary { position: absolute; top: 43%; left: var(--layout-margin); margin: 0; max-width: 720px; font-size: var(--text-body-1); line-height: var(--leading-body-2); letter-spacing: var(--tracking-body-1); }
.cover__title { position: absolute; left: var(--layout-margin); bottom: 44px; margin: 0; font-weight: var(--font-weight-light); font-size: min(var(--text-title), 5.94vw); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.cover__home { position: absolute; top: 40px; left: var(--layout-margin); font-family: var(--font-sans); font-size: var(--text-heading-2); line-height: var(--leading-heading-2); }

/* 상세: 본문 챕터 (서브타이틀 → 메인 타이틀 → 본문 → 도식 이미지) */
.detail { display: flex; flex-direction: column; gap: var(--layout-section); padding: var(--layout-section) var(--layout-margin) 0; }
.chapter { display: flex; flex-direction: column; gap: 40px; }
.chapter__text { display: flex; flex-direction: column; gap: 16px; max-width: var(--container-text); }
.chapter__sub { display: flex; gap: 24px; font-size: var(--text-body-1); line-height: var(--leading-label); }
.chapter__title { margin: 0; }
.chapter__body { margin: 0; padding-top: 8px; font-size: var(--text-body-1); line-height: var(--leading-body-1); letter-spacing: var(--tracking-body-1); }
.chapter__image { width: 100%; aspect-ratio: 1840 / 1035; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; }
.credits { display: flex; flex-direction: column; gap: 24px; }
.credits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-gutter); padding-top: 20px; border-top: 1px solid var(--color-fg); margin: 0; }
.credits__grid dt { margin: 0 0 8px; }
.credits__grid dd { margin: 0; font-size: var(--text-body-1); line-height: var(--leading-body-1); }
.pager { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 20px 0 var(--layout-section); border-top: 1px solid var(--color-fg); }
.pager a { display: flex; flex-direction: column; gap: 12px; }
.pager a:last-child { align-items: flex-end; text-align: right; }
.pager a:hover .t-display-kr { opacity: 0.6; }
.site-header .nav__menu { font-size: var(--text-body-2); line-height: var(--leading-label); } /* 2026-10-04 수지 수정: 메뉴 16px → 10-08 영문 기준 EN Body 2 (17) */
.site-header__logo { font-size: 16px; line-height: var(--leading-label); letter-spacing: 0; } /* 2026-10-04 수지 수정: ( Suzy ) 16px */

/* 홈 슬라이드 (2026-10-04): 3칸 보이기, 5장 무한 반복 */
.slider {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--layout-nav)); min-height: 560px;
  border-top: 1px solid var(--color-line);
}
.slider__track {
  display: flex; height: 100%;
  transform: translateX(-1px); /* 맨 왼쪽 칸의 왼쪽 선을 화면 밖으로 */
  will-change: transform;
}
.slider__track.is-moving { transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1); }
.slide {
  flex: 0 0 calc((100% + 1px) / 3);
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--color-line);
  background: var(--color-bg-muted) center / cover no-repeat;
}
.slide__placeholder { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-fg-muted); }
/* 슬라이드 수동 조작 (2026-10-04) */
.slider { cursor: grab; touch-action: pan-y; user-select: none; }
.slider:active { cursor: grabbing; }
.slide { -webkit-user-drag: none; }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px; border: 0; border-radius: var(--radius-full);
  background: var(--color-glass); color: var(--color-fg);
  font-family: var(--font-sans); font-size: 20px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 200ms ease, background-color 200ms ease;
}
.slider__arrow--prev { left: var(--layout-margin); }
.slider__arrow--next { right: var(--layout-margin); }
.slider:hover .slider__arrow, .slider__arrow:focus-visible { opacity: 1; }
.slider__arrow:hover { background: var(--color-bg); }
/* 포커스 테두리 전부 없음 (2026-10-04 수지 결정: 비주얼 우선) */
*:focus, *:focus-visible { outline: none; }
.slide { cursor: pointer; }
/* 화면 아래 파란 가로선(스크롤 막대) 방지 — 2026-10-04
   1) 스크롤 막대 자체를 그리지 않음  2) 좌우로 밀리거나 튕기지 않음  3) 슬라이드 띠는 코드로만 이동 */
html, body { overscroll-behavior: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .slider::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { overflow-x: hidden; }
.slider { overflow: clip; overscroll-behavior: none; scrollbar-width: none; }

/* 홈 슬라이드 v3 (2026-10-05 수지 Paper 수정): 칸 사이 선 삭제 → 바깥 여백 16 + 칸 사이 16
   1920×1080에서 칸 한 장 = 618.67 × 987 */
.slider { padding: var(--space-16); }
.slider__track { gap: var(--space-16); transform: none; }
.slide { flex: 0 0 calc((100% - 2 * var(--space-16)) / 3); border-left: 0; }

/* 홈 v4 (2026-10-05, 참고: character.studio): 가운데 떠 있는 반투명 내비 + 사진 화면 꽉 채움 + 사진 왼쪽 아래 키워드 */
.site-header--float {
  position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 10;
  height: 40px; padding: 0 4px 0 16px; gap: 40px; justify-content: flex-start;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  border-radius: 8px;
}
.site-header--float .nav__menu { display: flex; align-items: center; gap: 2px; }
.site-header--float .nav__menu a { padding: 4px 8px; border-radius: 6px; color: var(--color-fg-muted); transition: color 200ms ease; }
.site-header--float .nav__menu a[aria-current="page"], .site-header--float .nav__menu a:hover { color: var(--color-fg); }
.site-header--float ~ .slider { height: 100vh; border-top: 0; }
.slide { position: relative; }
.slide__keyword {
  position: absolute; left: 12px; bottom: 12px;
  padding: 8px 14px; border-radius: 6px;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  font-family: var(--font-sans); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption);
  color: var(--color-fg); pointer-events: none;
}

/* 홈 v4.1 (2026-10-05 수지 Paper 수정): 로고 삭제, 메뉴만 오른쪽 위(위·오른쪽 32), 메뉴 사이 12, 흰 반투명 배경
   키워드: 흰 글자 · Medium 500 */
.site-header--float { left: auto; right: 32px; transform: none; padding: 0 16px; gap: 0; }
.site-header--float .nav__menu { gap: var(--space-12); }
.slide__keyword { color: var(--color-white); font-weight: 500; }

/* 등장 효과 — rennancorreia.com/aduela 와 똑같이 (2026-10-05 v4)
   상세 표지 글만, 열 때 한 번: 아래 40px → 제자리, 투명 → 불투명
   곡선 = Framer 스프링(mass 3.1 · stiffness 180 · damping 60) 계산값 → 0.26초에 절반, 0.7초에 90%, 1.75초에 끝 */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition-property: opacity, transform; transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .reveal { transition-duration: 1.75s; transition-timing-function: linear(0, 0.101 4.2%, 0.271 8.3%, 0.43 12.5%, 0.561 16.7%, 0.664 20.8%, 0.743 25%, 0.804 29.2%, 0.85 33.3%, 0.886 37.5%, 0.913 41.7%, 0.933 45.8%, 0.949 50%, 0.961 54.2%, 0.97 58.3%, 0.977 62.5%, 0.983 66.7%, 0.987 70.8%, 0.99 75%, 0.992 79.2%, 0.994 83.3%, 0.996 87.5%, 1 100%); }
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* 홈 v4.2 (2026-10-05 수지 Paper 수정): 바깥 여백·칸 사이 16 → 8 (칸 629.33 × 1064), 비활성 메뉴 Grey-500 */
.slider { padding: var(--space-8); }
.slider__track { gap: var(--space-8); }
.slide { flex-basis: calc((100% - 2 * var(--space-8)) / 3); }
.site-header--float .nav__menu a { color: var(--color-grey-500); }
.site-header--float .nav__menu a[aria-current="page"], .site-header--float .nav__menu a:hover { color: var(--color-fg); }

/* 홈 사진 hover 블러 (2026-10-05, 참고: chromadigital.framer.website)
   사진과 글 사이에 흐림 막(backdrop-filter blur 10px)을 두고, 마우스를 올리면 0.4초에 나타남
   → 사진만 흐려지고 키워드 이름표는 그대로 또렷함 */
.slide::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.slide:hover::before { opacity: 1; }
.slide__keyword { z-index: 1; }
.slide { overflow: hidden; } /* 흐림이 칸 밖으로 번지지 않게 */
@media (hover: none) { .slide::before { display: none; } } /* 터치 기기에서는 끔 */

/* 내비 회색 글자 multiply (2026-10-05 수지 Paper 수정): Grey-500 80% + 곱하기 혼합 → 뒤 사진 색과 섞여 자연스럽게 보임 */
.site-header--float .nav__menu a:not([aria-current="page"]) { color: color-mix(in srgb, var(--color-grey-500) 80%, transparent); mix-blend-mode: multiply; }
.site-header--float .nav__menu a:not([aria-current="page"]):hover { color: var(--color-fg); mix-blend-mode: normal; }

/* 상세페이지 내비 (2026-10-05): 노란 표지에서는 숨기고, 표지를 지나 아래로 내려가면 홈과 같은 내비가 나타남. 현재 위치 Work = 검정 */
.site-header--float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-header--float { transition: opacity 0.3s ease, visibility 0s linear 0s; }
.site-header--float.is-hidden { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }

/* 상세 v2 (2026-10-05 수지 Paper 수정)
   ① 표지 오른쪽 위: 역할 + 기간 나란히(사이 40). 항목명 굵기 600 · 밑줄 1.6px
   ② 표지 다음 브랜드 이미지 구역: 화면 꽉(1920×1080), 가운데 로고 260×77
   ③ 챕터: 화면 폭 전체, 배경 Grey-100, 안쪽 여백 40, 글–이미지 사이 40. 구역 사이 간격 없음 */
.cover__meta { position: absolute; top: 40px; right: var(--layout-margin); display: flex; align-items: flex-start; gap: var(--space-40, 40px); }
.cover__meta .cover__role { position: static; }
.cover__role-label { font-weight: 600; border-bottom-width: 1.6px; }
.brand { position: relative; height: 100vh; min-height: 560px; background: var(--color-grey-900) center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.brand__logo { width: 260px; height: 77px; object-fit: contain; mix-blend-mode: screen; } /* 로고 파일이 검정 바탕이라 screen으로 검정을 지움 */
.detail { gap: 0; padding: 0; }
.chapter { background: var(--color-grey-100); padding: var(--space-40, 40px); gap: 40px; }
.chapter__image { background: var(--color-bg-muted); }
.detail > .credits { padding: var(--layout-section) var(--layout-margin) 0; }
.detail > .pager { margin: var(--layout-section) var(--layout-margin) 0; }


/* 상세 챕터 v3 (2026-10-05 수지 Paper 수정) — 한 화면(1920×1080) 크기
   위 80 · 좌우 40 · 아래 40, 글 묶음과 이미지 사이 80
   ① 구분 줄: "배경"(16 · 굵기 600) + 서브타이틀(16), 둘 다 Grey-900, 사이 24
   ② 52 아래 → 제목(폭 880, Display 40 · 굵기 500 · Blue-400) + 80 + 본문(16, 행간 170% · 자간 -1%)
   ③ 이미지 자리 1840×700, 흰 바탕 */
.chapter { padding: var(--space-80, 80px) var(--space-40, 40px) var(--space-40, 40px); gap: var(--space-80, 80px); }
.chapter__text { max-width: none; gap: var(--space-52, 52px); }
.chapter__sub { font-size: var(--text-body-2); line-height: var(--leading-label); color: var(--color-grey-900); gap: 24px; }
.chapter__category { font-weight: 600; }
.chapter__row { display: flex; align-items: flex-start; gap: var(--space-80, 80px); }
.chapter__title { width: 880px; flex-shrink: 0; font-weight: 500; color: var(--color-blue-400); word-break: keep-all; }
.chapter__body { flex: 1; padding-top: 8px; font-size: var(--text-body-2); line-height: var(--leading-body-1); letter-spacing: var(--tracking-body-1); word-break: keep-all; }
.chapter__image { aspect-ratio: auto; height: 700px; background: var(--color-bg); }

/* 상세페이지 내비 (2026-10-05 수지): 미선택 메뉴 = White #FFFFFF. 흰색은 multiply면 사라져서 혼합 없이 그대로 */
.site-header--detail .nav__menu a:not([aria-current="page"]),
.site-header--detail .nav__menu a:not([aria-current="page"]):hover { color: var(--color-white); mix-blend-mode: normal; }

/* 상세 v4 (2026-10-05 수지 Paper 수정)
   ① 브랜드 로고 220×65 (투명 PNG 원본이라 혼합 효과 필요 없음)
   ② 챕터: 위 72 · 좌우 40 · 아래 40, 배경 Grey-100
   ③ 제목과 본문을 위아래로(사이 52). 본문은 수지가 나눈 3줄 그대로
   ④ 이미지 1840×500, Grey-100 바탕, 이미지는 칸 안에 맞춰(contain) 가운데 */
.brand__logo { width: 220px; height: 65px; mix-blend-mode: normal; }
.chapter { padding-top: var(--space-72, 72px); background: var(--color-grey-100); }
.chapter__row { flex-direction: column; gap: var(--space-52, 52px); }
.chapter__body { flex: none; padding-top: 0; }
.chapter__image { height: 500px; background: var(--color-grey-100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chapter__image img { width: 100%; height: 100%; object-fit: contain; }

/* 상세 내비 글자색 자동 전환 (2026-10-05 수지 A안): 밝은 구역 = 메인과 같음(회색 + multiply), 어두운 구역 = 미선택 메뉴 흰색 */
.site-header--float.is-on-dark .nav__menu a:not([aria-current="page"]),
.site-header--float.is-on-dark .nav__menu a:not([aria-current="page"]):hover { color: var(--color-white); mix-blend-mode: normal; }
.site-header--float .nav__menu a { transition: color 0.3s ease; }

/* 시디즈 상세 전체 흐름 (2026-10-05 Paper → 시제품)
   ① 기본 챕터 도식: 원본 크기(1배) 오른쪽 정렬, 화면이 좁으면 줄어듦
   ② screen: AS 신청 화면 1920×1080 화면 꽉, 바탕 #F5F5F5(Paper 값)
   ③ feature(핵심 화면 1~3, 프로세스): Blue-100 바탕, 제목(880) 왼쪽 + 오른쪽 '설계 포인트'(672) 또는 본문(817), 양 끝 정렬, 아래 1840 화면 */
.chapter__figure { display: flex; }
.chapter__figure--end { justify-content: flex-end; }
.chapter__figure img { display: block; max-width: 100%; height: auto; }
.screen { background: #F5F5F5; }
.screen img { display: block; width: 100%; height: auto; }
.chapter--feature { background: var(--color-blue-100); }
.chapter--feature .chapter__row { flex-direction: row; justify-content: space-between; gap: var(--space-52, 52px); }
.chapter--feature .chapter__title { flex-shrink: 1; }
.chapter__point { width: 672px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.chapter__point-label { font-size: var(--text-body-2); line-height: var(--leading-label); font-weight: 600; color: var(--color-grey-900); }
.chapter__body--wide { width: 817px; flex-shrink: 0; }

/* 상세 표지 작은 글자 18 → 16 (2026-10-06 수지): 역할·기간 항목명과 값, 소개 2줄 모두 Body 2(16px). 줄 간격·자간은 그대로 */
.cover__role, .cover__summary { font-size: var(--text-body-2); }

/* 브랜드 로고 220×65 → 180×53 (2026-10-06 수지 Paper 수정) */
.brand__logo { width: 180px; height: 53px; }

/* 상세 하단 구조 여백 (2026-10-06 수지 Paper 수정)
   ① 브랜드 사진 아래 80 → 챕터 묶음. 묶음 좌우 80, 챕터·화면 사이 80 (사이는 흰 바탕)
   ② 챕터 폭 = 화면 - 160 (1920에서 1760), 안쪽 여백은 그대로(위 72 · 좌우 40 · 아래 40)
   ③ AS 신청 화면: 1760×1080 칸(#F5F5F5), 이미지는 비율 그대로 칸 안에 맞춤
   ④ 핵심 화면 이미지: 1680×(654·625) 칸 안에 비율 그대로 맞춤 (Paper: contain) */
.detail { display: flex; flex-direction: column; gap: var(--space-80, 80px); padding: var(--space-80, 80px) var(--space-80, 80px) 0; }
.screen { aspect-ratio: 1760 / 1080; display: flex; align-items: center; justify-content: center; }
.screen img { width: 100%; height: 100%; object-fit: contain; }
.chapter__figure--box { width: 100%; }
.chapter__figure--box img { width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* 시디즈 상세 v5 (2026-10-06 수지 Paper 정리)
   ① 챕터 카드(회색·파란 바탕) 없앰 → 흰 바탕. 챕터 묶음 위 80 · 좌우 80, 챕터 사이 160
   ② 챕터 = 글(구분 줄 → 52 → 제목 → 52 → 본문) → 80 → 이미지 칸(폭 꽉 · 높이 500/600/700 · Grey-100, 이미지 cover)
   ③ 제목 색 Blue-400 → Grey-900
   ④ AS 신청 화면 칸 1760×990 (#F5F5F5), 이미지 contain */
.detail { gap: 160px; padding: var(--space-80, 80px) var(--space-80, 80px) 200px; } /* 10-07 수지: 상세 마지막 여백 200 */
.chapter, .chapter--feature { background: none; padding: 0; gap: var(--space-80, 80px); }
.chapter__title { color: var(--color-grey-900); }
.chapter__image { width: 100%; height: auto; background: var(--color-grey-100); overflow: hidden; display: block; }
.chapter__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.screen { aspect-ratio: 1760 / 990; background: #F5F5F5; }

/* 설계 포인트: Figma에서 줄을 직접 나눈 글(CUSTOM+ · OMS · 까사미아)은 칸 폭을 글 길이에 맞춤 (10-06) */
.chapter__point--auto { width: auto; flex-shrink: 0; }
.chapter__point--auto .chapter__body { white-space: nowrap; }
.chapter--feature .chapter__title { flex: 1 1 auto; width: auto; min-width: 0; }

/* 브랜드 구역 임시 로고 글자 (10-06): 로고 파일이 없는 프로젝트 — 180×53 자리에 흰 글자 */
.brand__logo-text { color: var(--color-white); font-family: var(--font-sans); font-size: 40px; font-weight: 500; letter-spacing: 0.02em; line-height: 53px; }

/* Work 페이지 (2026-10-07, Paper `Work — Desktop 1920`)
   위 200 · 좌우 80: "Work"(EN Display 44 · Light) + 오른쪽 개수(16 · Grey-500), 아래 맞춤
   80 아래 카드 3칸(칸 사이 24) × 줄 사이 80, 맨 아래 200
   카드 = 사진(3:4, Grey-100 바탕, cover) → 20 → 프로젝트명(KR Heading 2 · 20) → 8 → 역할 · 기간(Label 14 · Grey-500)
   마우스를 올린 카드만 또렷하고 나머지는 40% (DESIGN.md 프로젝트 목록 규칙) */
.works { padding: 200px var(--space-80, 80px) 200px; display: flex; flex-direction: column; gap: var(--space-80, 80px); }
.works__head { display: flex; align-items: flex-end; justify-content: space-between; }
.works__title { margin: 0; font-family: var(--font-sans); font-size: var(--text-display); font-weight: var(--font-weight-light); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--color-fg); }
.works__count { margin: 0; font-family: var(--font-sans); font-size: var(--text-body-2); line-height: var(--leading-label); color: var(--color-grey-500); }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--layout-gutter); row-gap: var(--space-80, 80px); }
.work-card { display: flex; flex-direction: column; gap: 20px; transition: opacity 0.3s ease; }
.work-card__thumb { aspect-ratio: 3 / 4; background: var(--color-bg-muted); overflow: hidden; }
.work-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-card__text { display: flex; flex-direction: column; gap: 8px; }
.work-card__name { margin: 0; font-family: var(--font-sans); font-size: var(--text-heading-2); font-weight: var(--font-weight-regular); line-height: var(--leading-heading-2); letter-spacing: var(--tracking-heading-2); color: var(--color-fg); word-break: keep-all; }
.work-card__meta { margin: 0; font-family: var(--font-sans); font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-grey-500); }
@media (hover: hover) { .works__grid:has(.work-card:hover) .work-card:not(:hover) { opacity: 0.4; } }
@media (max-width: 1023px) { .works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .works { padding: 120px var(--layout-margin-mobile, 16px) 120px; } .works__grid { grid-template-columns: 1fr; } }

/* 홈 슬라이드 v5 (2026-10-07 수지 Paper 수정)
   ① 키워드 = 프로젝트 이름, KR 13 · 500. 사진 밝기에 따라 두 종류: 기본(어두운 사진) 흰 30% + 흰 글자 / light(밝은 사진) 흰 50% + Grey-900
   ② 알러빗 칸(3번째): 바탕 #F5F5F5, 가운데 검정 앱 아이콘 250×250(둥글기 54.69, 그림자 12.77 12.77 38.3 10%), 흰 '알러빗' 179×57 · 키워드 Grey-200 + Grey-900 */
.slide__keyword { font-family: var(--font-sans); }
.slide[data-tone="light"] .slide__keyword { background: color-mix(in srgb, var(--color-white) 50%, transparent); color: var(--color-grey-900); }
.slide[data-tone="solid"] .slide__keyword { background: var(--color-grey-200); color: var(--color-grey-900); }
.slide--allerbit { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
.slide__icon { position: relative; z-index: 0; width: 250px; height: 250px; border-radius: 54.69px; background: #000; box-shadow: 12.77px 12.77px 38.3px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.slide__icon img { width: 178.72px; height: 57.45px; transform: translate(-0.47px, 5.21px); }
/* Works 알러빗 카드 (10-07 수지): 사진 대신 홈 슬라이드와 같은 앱 아이콘 배너 (#F5F5F5 + 검정 아이콘 250) */
.work-card__thumb--icon { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }

/* Works 페이지 v2 (2026-10-07 수지 Paper 수정)
   ① 위 320, "Works" = 72(--text-hero) · Regular 400 · 자간 -3% · 행간 130%, 개수 "6 프로젝트"
   ② 제목 줄 → 카드 40, 사진 → 이름 24, 역할·기간 줄 없음
   ③ hover = 홈 사진과 똑같이: 마우스 올린 카드 사진만 흐림 막(blur 10px)이 0.4초에 나타남, 다른 카드는 그대로 (40% 흐리게 하던 것 삭제) */
.works { padding-top: 320px; gap: var(--space-40, 40px); }
.works__title { font-size: var(--text-hero); font-weight: var(--font-weight-regular); } /* 10-08: KR Hero 72 → 영문 기준 EN Hero 78 */
.work-card { gap: var(--space-24, 24px); }
.works__grid:has(.work-card:hover) .work-card:not(:hover) { opacity: 1; }
.work-card__thumb { position: relative; }
.work-card__thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.work-card:hover .work-card__thumb::after { opacity: 1; }
@media (hover: none) { .work-card__thumb::after { display: none; } }
@media (max-width: 767px) { .works { padding-top: 120px; } }

/* 홈 hover v2 (2026-10-07 수지 Paper `Home — Desktop 1920 / Hover`)
   평소: 키워드 이름표 없음 (사진만). hover: 흐림 막(blur 10px)과 함께 카드 위쪽 안쪽 24에 프로젝트 이름(KR 16 · 행간 180%) + 오른쪽 화살표 32
   글자·화살표 색: 어두운 사진 흰색 / 밝은 바탕(data-tone light·solid) Grey-900 */
.slide__keyword { display: none; }
.slide::before { z-index: 1; } /* 알러빗 아이콘까지 흐려지게 */
.slide__hover {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16, 16px);
  padding: var(--space-24, 24px);
  color: var(--color-white);
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.slide[data-tone="light"] .slide__hover, .slide[data-tone="solid"] .slide__hover { color: var(--color-grey-900); }
.slide__hover-text { font-family: var(--font-sans); font-size: var(--text-body-2); line-height: var(--leading-label); word-break: keep-all; }
.slide__arrow { flex-shrink: 0; width: 32px; height: 32px; }
.slide:hover .slide__hover { opacity: 1; }
@media (hover: none) { .slide__hover { opacity: 1; } } /* 터치 기기: hover가 없어 이름이 항상 보이게 */

/* 내비 v3 (2026-10-07 수지 Paper): 현재 페이지 글자 Medium 500. 홈 내비 배경 흰색 70% */
.site-header--float .nav__menu a[aria-current="page"] { font-weight: 500; }
.site-header--float.site-header--home { background: color-mix(in srgb, var(--color-white) 70%, transparent); }

/* Works v3 (2026-10-07 수지 Paper): 제목 줄 → 카드 32, 사진 → 이름 16, 이름 KR 16 (행간 180%) */
.works { gap: var(--space-32, 32px); }
.work-card { gap: var(--space-16, 16px); }
.work-card__name { font-size: var(--text-body-2); }

/* hover 글자색 v2 (10-07 수지): 기본 흰색, data-ink="dark" → Grey-900 (알러빗 · OMS). CUSTOM+ · 까사미아도 흰색 */
.slide[data-tone="light"] .slide__hover, .slide[data-tone="solid"] .slide__hover { color: var(--color-white); }
.slide[data-ink="dark"] .slide__hover { color: var(--color-grey-900); }

/* Works hover 화살표 (10-07 수지): 홈과 같은 화살표만 — 흐림과 함께 사진 위쪽 오른쪽(안쪽 24)에 0.4초로 나타남 */
.work-card__arrow {
  position: absolute; top: var(--space-24, 24px); right: var(--space-24, 24px); z-index: 2;
  width: 32px; height: 32px; color: var(--color-white);
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;
}
.work-card__thumb[data-ink="dark"] .work-card__arrow { color: var(--color-grey-900); }
.work-card:hover .work-card__arrow { opacity: 1; }
.work-card__thumb--icon .slide__icon { position: relative; z-index: 0; }

/* 10-07 수지 Paper v3
   ① 내비 메뉴 사이 12 → 16. Works 페이지 내비 배경: 흰 바탕에서 잘 안 보여 Grey-300 30%
   ② LETUS(상세 준비 중): 클릭 안 됨 · hover 효과 없음 · 왼쪽 아래 Coming Soon 태그(흰 20% + 흐림, 흰 글자 · 홈 13 / Works 14, 홈 12 · Works 24 안쪽)
   ③ 알러빗 홈 칸 배경 #F5F5F5 → Grey-200 */
.site-header--float .nav__menu { gap: var(--space-16, 16px); }
.site-header--works { background: color-mix(in srgb, var(--color-grey-300) 30%, transparent); }
.slide[data-soon] { cursor: default; }
.slide[data-soon]::before { display: none; }
.slide__soon, .work-card__soon {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 8px 14px; border-radius: 6px;
  background: color-mix(in srgb, var(--color-white) 20%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  font-family: var(--font-sans); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); /* 10-08: Pretendard 하나로 통일 */
  color: var(--color-white); pointer-events: none;
}
.work-card__soon { left: var(--space-24, 24px); bottom: var(--space-24, 24px); font-size: var(--text-label); }
.work-card--soon { cursor: default; }
.work-card--soon .work-card__thumb::after { display: none; }
.slide--allerbit { background: var(--color-grey-200); }

/* 내비 v4 (2026-10-07 수지 Paper)
   홈: 배경 흰색 50% (비활성 메뉴 Grey-400은 잘 안 보여 수지 요청으로 Grey-500 80%로 되돌림)
   그 외(Works · About · 상세): 배경 Grey-200 50%, 비활성 메뉴 Grey-500 80% + 곱하기 (기존) */
.site-header--float { background: color-mix(in srgb, var(--color-grey-200) 50%, transparent); }
.site-header--float.site-header--home { background: color-mix(in srgb, var(--color-white) 50%, transparent); }

/* 홈 Mobile 375 (2026-10-07, Paper `Home — Mobile 375`)
   ① 내비: 같은 상자, 위·오른쪽 16
   ② 사진 칸: 바깥·칸 사이 8, 칸 폭 = 화면 − 72 (375에서 303) → 다음 사진이 오른쪽에 56 보임. 높이 화면 꽉
   ③ hover가 없어 이름 + 화살표를 항상 표시, 흐림 없음. 내비와 겹치지 않게 카드 아래쪽(안쪽 16), 글자 14 · 화살표 24
   ④ 알러빗 아이콘 250 → 200 (둥글기 43.75, 글자 80%) */
@media (max-width: 767px) {
  .site-header--float { top: 16px; right: 16px; }
  .site-header--float ~ .slider { height: 100vh; height: 100dvh; }
  .slide { flex: 0 0 calc(100% - 56px); } /* 트랙(화면 − 16) − 56 = 375에서 303 */
  .slide::before { display: none; }
  .slide__hover { inset: auto 0 0 0; align-items: flex-end; padding: var(--space-16, 16px); gap: var(--space-12, 12px); opacity: 1; }
  .slide__hover-text { font-size: var(--text-label); }
  .slide__arrow { width: 24px; height: 24px; }
  .slide__icon { width: 200px; height: 200px; border-radius: 43.75px; }
  .slide__icon img { width: 142.98px; height: 45.96px; transform: translate(-0.38px, 4.17px); }
}
/* 홈 Mobile 375 v2 (10-07 수지): 내비 가운데, CUSTOM+ 이름·화살표 Grey-900(밝은 바닥이라 흰 글자가 약해서 — 모바일만) */
@media (max-width: 767px) {
  .site-header--float { left: 50%; right: auto; transform: translateX(-50%); }
  .slide[data-ink-mobile="dark"] .slide__hover { color: var(--color-grey-900); }
}

/* Works Mobile 375 (2026-10-08, Paper `Works — Mobile 375`) — 홈 모바일 원칙: 이름·화살표 항상 표시, 흐림 없음, 내비 가운데
   ① 위 120 · 좌우 16 · 아래 120, 제목 ( Works ) 72 그대로 → 32 → 카드 1칸(사진 3:4, 375에서 343×457) · 카드 사이 48
   ② 사진 → 16 → 이름(KR 16) + 오른쪽 화살표 24(Grey-900). 사진 위 hover 화살표·흐림은 끔
   ③ LETUS Coming Soon 태그: 왼쪽 아래 16. 알러빗 아이콘 200(홈 모바일 규칙 그대로) */
.work-card__arrow-m { display: none; }
@media (max-width: 767px) {
  .works { padding: 120px var(--layout-margin-mobile, 16px) 120px; gap: var(--space-32, 32px); }
  .works__grid { row-gap: var(--space-48, 48px); }
  .work-card__text { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-12, 12px); }
  .work-card__arrow-m { display: block; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2.4px; color: var(--color-grey-900); }
  .work-card__arrow, .work-card__thumb::after { display: none; }
  .work-card__soon { left: var(--space-16, 16px); bottom: var(--space-16, 16px); }
}

/* 상세 Mobile 375 (2026-10-08, Paper `Project — Mobile 375 (시디즈 예시)` · `/ 이미지 크게 보기`)
   수지 선택: 이미지 = 폭에 맞춰 축소 + 누르면 크게 · 글자 = 표지 40 · 챕터 제목 26 · 본문 16 · 직접 나눈 본문 줄바꿈은 무시 · 브랜드 사진 화면 꽉
   ① 표지 375×화면 높이: 역할·기간 오른쪽 위(위 24 · 오른쪽 16, 사이 24) / 소개 왼쪽 16 · 위 43% / 제목 KR Display 40 · Light · 왼쪽 16 · 아래 24
   ② 브랜드 사진 화면 꽉, 로고 2/3 크기(시디즈 180 → 120)
   ③ 챕터 묶음 위 64 · 좌우 16 · 아래 120, 챕터 사이 96. 구분 줄 → 24 → 제목(26 · 500) → 24 → 본문 → 40 → 이미지
   ④ 핵심 화면: 제목 → 24 → 설계 포인트(위아래로 쌓기)
   ⑤ 이미지·화면 장표 오른쪽 아래에 '크게 보기' 표시(28 상자 · 흰 70%) → 누르면 .zoom */
@media (max-width: 767px) {
  .cover { height: 100vh; height: 100dvh; min-height: 600px; }
  .cover__meta { top: var(--space-24, 24px); right: var(--layout-margin-mobile, 16px); gap: var(--space-24, 24px); }
  .cover__summary { left: var(--layout-margin-mobile, 16px); right: var(--layout-margin-mobile, 16px); max-width: none; word-break: keep-all; }
  .cover__title { left: var(--layout-margin-mobile, 16px); right: var(--layout-margin-mobile, 16px); bottom: var(--space-24, 24px); font-size: 40px; word-break: keep-all; } /* 40 = KR Display. 맨 위 v1 모바일 규칙이 토큰을 28로 줄여 두어 숫자로 씀 */
  br.soft { display: none; }

  .brand { height: 100vh; height: 100dvh; min-height: 0; }
  .brand__logo, .brand__logo-text { zoom: 0.6667; }

  .detail { gap: 96px; padding: var(--space-64, 64px) var(--layout-margin-mobile, 16px) var(--space-120, 120px); }
  .chapter, .chapter--feature { gap: var(--space-40, 40px); }
  .chapter__text { gap: var(--space-24, 24px); }
  .chapter__sub { gap: var(--space-16, 16px); }
  .chapter__category { flex-shrink: 0; }
  .chapter__row, .chapter--feature .chapter__row { flex-direction: column; gap: var(--space-24, 24px); }
  .chapter__title.t-display-kr { width: auto; font-size: 26px; /* 26 = KR Heading 1 (v1 모바일 규칙이 토큰을 22로 줄여 두어 숫자로) */ line-height: var(--leading-heading-1); letter-spacing: var(--tracking-heading-1); }
  .chapter__point, .chapter__body--wide { width: auto; }
  .chapter__point--auto .chapter__body { white-space: normal; }

  .chapter__image, .screen { position: relative; cursor: zoom-in; }
  .chapter__image::after, .screen::after {
    content: ''; position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 6px;
    background: color-mix(in srgb, var(--color-white) 70%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='%23171F29' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat;
    pointer-events: none;
  }
  .chapter__image:not(:has(img))::after { display: none; } /* (예시) 빈 칸 */
  .credits__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .pager { flex-direction: column; align-items: stretch; }
}

/* 이미지 크게 보기 (휴대폰): 흰 바탕 전체 화면, 이미지 폭 1200(옆으로 밀기), 닫기 = 내비와 같은 반투명 상자 40 */
.zoom { position: fixed; inset: 0; z-index: 1000; background: var(--color-bg); }
.zoom__scroll { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.zoom__scroll img { display: block; flex-shrink: 0; width: 1200px; max-width: none; height: auto; margin: auto 0; background: var(--color-grey-100); } /* 투명 도식도 페이지 칸처럼 Grey-100 위에 */
.zoom__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--color-grey-900);
  background: color-mix(in srgb, var(--color-grey-200) 50%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
}
.zoom__hint { position: absolute; left: 0; right: 0; bottom: 32px; margin: 0; text-align: center; font-family: var(--font-sans); font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-grey-600); pointer-events: none; }

/* ===== 10-08 수지: 내비 · 홈 v5 · 마우스 dot · 페이지 이동 (레퍼런스 humanastudio.com 일부 참고) ===== */

/* 내비 v5 (수지 Paper `Home — Desktop 1920`): 전 페이지 같은 바. 높이 80 · 좌우 40, 왼쪽 ( Suzy ) · 오른쪽 Home, Works, Info
   글자 26(Heading 1 크기) · 자간 -1% · Red-600 · 400, 메뉴 사이 12, 쉼표는 마지막 메뉴 빼고 자동
   맨 위에서는 투명, 스크롤하면(.is-scrolled) 흰색 50% + 흐림(이전 홈 내비와 같은 값) */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 80px; padding: 0 var(--space-40, 40px);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: var(--text-heading-1); font-weight: 400;
  line-height: var(--leading-label); letter-spacing: var(--tracking-heading-2);
  color: var(--color-red-600);
  background: transparent;
  transition: background-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}
.site-nav a { color: inherit; }
.site-nav__menu { display: flex; gap: var(--space-12, 12px); }
.site-nav__menu a:not(:last-child)::after { content: ','; }
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--color-white) 50%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
}
.site-nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
@media (max-width: 767px) {
  .site-nav { height: 64px; padding: 0 var(--layout-margin-mobile, 16px); font-size: var(--text-heading-2); }
  .site-nav__menu { gap: var(--space-8, 8px); }
}

/* 홈 v5: 내비 80 → 320 → 문장(56 · 행간 130% · 자간 -1% · Red-600) → 320 → 사진 3칸(바깥·사이 8, 높이 화면 꽉)
   휴대폰: 내비 64 → 120 → 문장 32 → 120 → 사진 1칸 + 옆 살짝(기존 모바일 슬라이드) */
.home__hero { padding: 400px var(--space-40, 40px) 0; }
.home__title { margin: 0; font-family: var(--font-sans); font-size: 56px; font-weight: 400; line-height: var(--leading-heading-1); letter-spacing: var(--tracking-heading-2); color: var(--color-red-600); }
.home .slider { margin-top: 320px; height: 100vh; border-top: 0; }
@media (max-width: 767px) {
  .home__hero { padding: 184px var(--layout-margin-mobile, 16px) 0; }
  .home__title { font-size: 32px; }
  .home__title br { display: none; }
  .home .slider { margin-top: 120px; height: 100vh; height: 100dvh; }
}

/* 마우스 dot (레퍼런스와 같은 크기·움직임): 지름 약 9px 점이 마우스를 따라옴(ui.js), 빠르게 움직이면 작아짐
   프로젝트 사진 위 = 'open' 이름표가 점에서 펼쳐짐 / 내비 글자 위 = 화살표 상자. 색은 레퍼런스처럼 20가지 중 무작위
   휴대폰·태블릿(폭 1023 이하 또는 마우스 없음)에서는 없음 */
.cursor { position: fixed; inset: 0; z-index: 1001; pointer-events: none; }
.cursor__pos { position: absolute; left: -6px; top: -10px; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; }
.cursor__outer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; will-change: transform; }
.cursor__dot { position: relative; top: -3px; width: 10px; height: 10px; overflow: visible; z-index: 6; display: block; transform-origin: 5px 5px; }
.cursor__dot circle { fill: var(--color-grey-900); transition: fill 0.3s ease; } /* 10-08 수지: Red-600 → Grey-900 */
.cursor__open {
  position: absolute; left: -15px; top: 50%; transform: translateY(-50%); z-index: 5;
  padding: 10px 15px 10px 30px; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}
.cursor__bg { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 100%; border-radius: 4px; transition: width 0.1s cubic-bezier(0.23, 1, 0.32, 1); }
.cursor__text { position: relative; z-index: 2; display: block; opacity: 0; font-family: var(--font-sans); font-size: 16px; line-height: 16px; color: #000; transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1); }
.cursor.is-open .cursor__open { opacity: 1; }
.cursor.is-open .cursor__open .cursor__bg { width: 100%; transition: width 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.1s; }
.cursor.is-open .cursor__text { opacity: 1; transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.2s; }
.cursor__arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  display: block; padding: 12px 15px; border-radius: 4px; line-height: 16px; /* 레퍼런스와 같은 41×40 */
  opacity: 0; transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}
.cursor.is-arrow .cursor__arrow { opacity: 1; transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
@media (max-width: 1023px), (hover: none) { .cursor { display: none; } }

/* 페이지 이동 (수지: 버퍼링 동안 dot이 화면 가운데에서 숨쉬듯 1 ↔ 1.8배)
   떠날 때: 흰 막이 0.3초에 덮이고 마우스 dot이 가운데로 미끄러져 가서 회색(Grey-600)으로 숨쉬기 → 다음 페이지
   도착: 같은 막 + 가운데 dot으로 시작, 페이지(사진·글꼴)가 준비되면 0.2초 뒤 0.3초에 걷힘. dot은 다시 빨강으로 마우스를 따라감
   (레퍼런스는 회색 막만 0.3초. 가운데 dot은 수지 요청으로 추가) */
.page-transition {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: var(--color-bg); opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.page-transition.is-in { opacity: 1; pointer-events: all; animation: pt-safety 0.3s ease 5s forwards; } /* ui.js가 안 돌아도 5초 뒤엔 걷힘 */
@keyframes pt-safety { to { opacity: 0; pointer-events: none; } }
.page-transition__dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--color-grey-600); animation: dot-breathe 1.4s ease-in-out infinite; }
.page-transition.has-cursor .page-transition__dot { opacity: 0; } /* PC: 마우스 dot이 그 자리를 대신함 */
.cursor.is-loading .cursor__dot circle { fill: var(--color-grey-600); }
.cursor.is-loading .cursor__dot { animation: dot-breathe 1.4s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .page-transition__dot, .cursor.is-loading .cursor__dot { animation: none; } }

/* 10-08 수지 Paper `Home — Desktop 1920` v6 (+ 참고 superkeen.studio)
   ① 내비 글자 Grey-900 (빨강 → 검정 계열). 메뉴 쉼표는 글자 밖(밑줄에 안 들어감), 마우스 올리면 글자 아래 2px 선(Grey-900)
   ② 홈 = 한 화면: 내비 80 … 프로젝트 이름 자리(48 · 행간 130% · 자간 -1%, 두 줄 높이 비워 둠) → 40 → 사진 줄(1080에서 574, 좌우·아래 8)
      처음엔 이름 자리가 비어 있고, 사진에 마우스를 올리면 그 프로젝트 이름이 바로 나타남(home.js). 사진 흐림은 그대로, 사진 안 이름·화살표는 PC에서 없앰
   ③ Coming Soon 태그: 사진 왼쪽 아래 끝에 붙임, 각진 모서리, 안쪽 4×12 */
.site-nav { color: var(--color-grey-900); }
.site-nav__menu a:not(:last-child)::after { content: none; }
.site-nav__item { display: flex; align-items: flex-start; }
.site-nav__menu a { display: block; border-bottom: 2px solid transparent; }
.site-nav__menu a:hover { border-bottom-color: currentColor; }

.home { height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; }
.home__hero { padding: 0 var(--space-40, 40px); margin-bottom: var(--space-40, 40px); min-height: calc(48px * 1.3 * 2); display: flex; align-items: flex-end; }
.home__title { font-size: 48px; line-height: var(--leading-heading-1); letter-spacing: var(--tracking-heading-2); color: var(--color-grey-900); white-space: pre-line; }
.home .slider { margin-top: 0; height: calc(100vh - 506px); min-height: 320px; padding: 0 var(--space-8, 8px) var(--space-8, 8px); }
.home .slide__hover { display: none; }
.home .slide__soon { left: 0; bottom: 0; border-radius: 0; padding: var(--space-4, 4px) var(--space-12, 12px); }

/* 휴대폰: 마우스가 없어 이름 자리는 숨기고, 사진 줄이 내비 아래 화면을 채움. 사진 안 이름·화살표 항상 표시(모바일 원칙) */
@media (max-width: 767px) {
  .home { height: auto; display: block; }
  .home__hero { display: none; }
  .home .slider { margin-top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 0; padding: var(--space-8, 8px); }
  .home .slide__hover { display: flex; }
}

/* 10-08 수지 (Paper `Home — Desktop 1920 / Hover`)
   ① 마우스 dot · 'open' 이름표 삭제 → 페이지 이동 때 가운데 dot은 모든 기기에서 화면 가운데 dot(.page-transition__dot)으로
   ② 홈 사진 hover: 흐림(blur 10px)은 그대로 + 사진 오른쪽 위(안쪽 12)에 ↗ 화살표 88×88이 흐림과 함께 0.4초에 나타남
      색 기본 흰색, data-ink="dark"(알러빗 · OMS)는 Grey-900. 휴대폰은 기존처럼 사진 아래 이름 + → 화살표 */
.cursor { display: none !important; }
.page-transition.has-cursor .page-transition__dot { opacity: 1; }
.slide__go {
  position: absolute; top: var(--space-12, 12px); right: var(--space-12, 12px); z-index: 2;
  width: 88px; height: 88px; color: var(--color-white);
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;
}
.slide[data-ink="dark"] .slide__go { color: var(--color-grey-900); }
@media (hover: hover) { .slide:hover .slide__go { opacity: 1; } }
@media (max-width: 767px), (hover: none) { .slide__go { display: none; } }

/* Works hover 화살표 v2 (10-14 수지): 홈 사진과 똑같이 ↗ 88 · 오른쪽 위 안쪽 12 (색·0.4초 나타남은 그대로) */
.work-card__arrow { top: var(--space-12, 12px); right: var(--space-12, 12px); width: 88px; height: 88px; }

/* 휴대폰 임시 안내 (10-14 수지, Paper `Mobile 375 — PC 접속 안내 (임시)`): 모바일 작업 전까지 폭 767 이하에서는 이 화면만.
   Info 모바일과 같은 자리 — 내비 64(로고만) · 위 120 · 좌우 16, ( PC Only ) 72 → 32 → 안내 16 → 24 → 주소 + 주소 복사 */
.pc-only { display: none; }
@media (max-width: 767px) {
  html:has(.pc-only), body:has(.pc-only) { overflow: hidden !important; height: 100%; }
  .pc-only {
    display: flex; flex-direction: column; gap: var(--space-32, 32px);
    position: fixed; inset: 0; z-index: 2000; overflow: auto;
    padding: 120px var(--layout-margin-mobile, 16px);
    background: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans);
  }
  .pc-only__nav {
    position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center;
    padding-inline: var(--layout-margin-mobile, 16px);
    font-size: var(--text-heading-2); letter-spacing: var(--tracking-heading-2); line-height: var(--leading-label);
  }
  .pc-only__title { margin: 0; font-size: var(--text-hero); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
  .pc-only__msg { display: flex; flex-direction: column; gap: var(--space-24, 24px); }
  .pc-only__msg p { margin: 0; font-size: var(--text-body-2); letter-spacing: var(--tracking-body-2); line-height: var(--leading-body-2); word-break: keep-all; }
  .pc-only__addr { display: flex; align-items: center; gap: var(--space-16, 16px); }
  .pc-only__copy {
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit;
    color: var(--color-fg-muted); text-decoration: underline; text-underline-offset: 4px;
  }
}

/* 상세 장표 v6 (10-14 수지 Paper, 상세 5개 공통): 챕터·화면 하나하나가 화면 폭 꽉 × 1920:1080 장표
   ① 챕터 묶음 바깥 여백·장표 사이 간격 없앰 (이전: 좌우 80 · 사이 160 · 아래 200)
   ② 챕터 = 폭 꽉, 안쪽 여백 80, 최소 높이 1080(1920 기준, 화면 폭에 비례). 내용이 넘치면 넘친 만큼만 길어짐
   ③ 화면 장표 = 폭 꽉 × 1920:1080, 이미지는 칸 안에 맞춤(#F5F5F5)
   휴대폰(767 이하)은 'PC로 접속' 안내 화면이라 해당 없음 */
@media (min-width: 768px) {
  .detail { gap: 0; padding: 0; }
  .chapter, .chapter--feature { padding: var(--space-80, 80px); min-height: 56.25vw; box-sizing: border-box; }
  .screen { aspect-ratio: 1920 / 1080; }
}

/* 홈 v7 (10-22 수지, 참고 cameronplatter.com · Paper `Home — Desktop 1920 (v7 시안 …)`)
   ① 내비 바 → 위 큰 글자 덩어리: '( Suzy ) — Product design, Key visual' / 'Home, About, Projects', 오른쪽 끝 ↑
      Pretendard 400 · 73(1920 기준, 화면 폭에 비례 = 3.8vw) · 행간 90% · Grey-900, 위 5 · 좌우 11 (참고 사이트 값)
      메뉴 hover = 기존처럼 글자 아래 2px 밑줄(쉼표 제외)
   ② 사진 줄: 좌우·아래 11, 사진 사이 8 (참고 사이트 값). 사진 높이는 그대로(1080에서 566)
   ③ 사진 위 프로젝트 이름(hover)도 왼쪽 11에 맞춤. 슬라이드 · hover 흐림 · ↗ · 페이지 이동 등 효과는 그대로 */
@media (min-width: 768px) {
  .home-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24, 24px);
    padding: 5px 11px 0;
    font-family: var(--font-sans); font-size: 3.8vw; font-weight: 400; line-height: 0.9; letter-spacing: -0.01em;
    color: var(--color-grey-900);
  }
  .home-head a { color: inherit; text-decoration: none; }
  .home-head__line { margin: 0; }
  .home-head__menu { display: flex; gap: 0.25em; }
  .home-head__menu a { border-bottom: 2px solid transparent; }
  .home-head__menu a:hover { border-bottom-color: currentColor; }
  .home__hero { padding: 0 11px; }
  .home .slider { height: calc(100vh - 503px); padding: 0 11px 11px; }
}

/* 홈 v7 수정 (10-22 수지 Paper `Home — Desktop 1920 (v7 시안 …)` 직접 수정)
   ① 화면 바깥 여백 12(위·좌우·아래), 큰 글자 덩어리 → 24 → 사진 줄이 남은 높이를 모두 채움(1080에서 888)
   ② 큰 글자 색 Grey-900 (빨강 · 초록 시도 후 수지가 되돌림), 두 줄 사이 12
   ③ 사진 사이 12. 사진 위 프로젝트 이름(hover) 자리는 Paper에서 빠짐 → 숨김 */
@media (min-width: 768px) {
  .home { height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-24, 24px); padding: var(--space-12, 12px); }
  .home-head { position: static; padding: 0; flex-shrink: 0; color: var(--color-grey-900); } /* 10-22 수지: #FF3B45 → #00EB5A → 다시 Grey-900 */
  .home-head__text { display: flex; flex-direction: column; gap: var(--space-12, 12px); }
  .home__hero { display: none; }
  .home .slider { flex: 1 1 auto; height: auto; min-height: 0; padding: 0; }
  .home .slider__track { gap: var(--space-12, 12px); }
  .home .slide { flex-basis: calc((100% - 2 * var(--space-12, 12px)) / 3); }
}

/* 홈 큰 글자 메뉴 인터랙션 (10-22 수지, 참고 cameronplatter.com)
   ① 링크에 마우스를 올리면 글자가 오른쪽으로 기울어짐(이탤릭) — Pretendard엔 이탤릭이 없어 브라우저가 기울인 모양을 만듦. 효과 없이 바로
   ② 현재 페이지 메뉴 = 글자 폭만큼 밑줄(쉼표 제외), 두께 = 글자 획 두께(Pretendard 400 세로획 0.086em → 73에서 약 6.3px)
   (이전: 마우스를 올리면 2px 밑줄 → 삭제) */
@media (min-width: 768px) {
  .home-head a:hover { font-style: italic; }
  .home-head__menu a, .home-head__menu a:hover { border-bottom: 0; }
  .home-head__menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.086em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
}

/* 10-22 수지: 현재 페이지 밑줄 두께 1px 줄임(획 두께 − 1 = 73에서 약 5.3px). 홈에서는 Home 밑줄 숨김(윗줄 '—'과 겹쳐 꽉 차 보여서), About · Projects는 그 페이지에서 밑줄 */
@media (min-width: 768px) {
  .home-head__menu a[aria-current="page"] { text-decoration-thickness: calc(0.086em - 1px); }
  .home-head__menu a[aria-current="page"][href="index.html"] { text-decoration: none; }
}

/* 홈 v7 (10-22 수지 Paper 수정 3): 글자 'Key visual' · ↑ 삭제, 글자 색 핑크 #F2A1E5(팔레트 밖 — Paper 값 그대로), 큰 글자 ↔ 사진 48 */
@media (min-width: 768px) {
  .home { gap: var(--space-48, 48px); }
  .home-head { color: #F2A1E5; }
}

/* 10-22 수지 Paper 수정 4: 큰 글자 색 #FF303F(빨강, 팔레트 밖 — Paper 값 그대로) · 사진 hover ↗ 화살표도 같은 색(전부, 알러빗 · OMS 포함)
   About(info.html) · Projects(work.html)에도 홈과 같은 큰 글자 메뉴 + 화면 여백 위 · 좌우 · 아래 12, 메뉴 → 48 → 내용 */
@media (min-width: 768px) {
  .home-head { color: #FF303F; }
  .slide__go, .slide[data-ink="dark"] .slide__go,
  .work-card__arrow, .work-card__thumb[data-ink="dark"] .work-card__arrow { color: #FF303F; }
  .page-shell { min-height: 100vh; display: flex; flex-direction: column; gap: var(--space-48, 48px); padding: var(--space-12, 12px); }
  .page-shell .works { padding: 0; }
}

/* 10-22 수지 Paper 수정 5
   Projects: '( Projects )' 제목 삭제(메뉴 → 48 → 카드), 메뉴 오른쪽 끝 ↑(맨 위로, 메뉴와 같은 글자 · 색), 카드 사진 616:832
   About: 'Coming Soon'(괄호 없음) · 72 · #FF303F, 메뉴 → 120 → 글자 */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 768px) {
  .work-card__thumb { aspect-ratio: 616 / 832; }
  .page-shell--about { gap: var(--space-120, 120px); }
  .about__title { color: #FF303F; }
}

/* 10-22 수지: '( Suzy )'는 링크 없는 글자(눌러도 이동 없음, hover 이탤릭 없음) — 메뉴 Home · About · Projects만 링크 · 이탤릭
   (처음엔 .home-head__logo:hover로 막았지만 '.home-head a:hover'가 더 강해서 안 먹혔음 → 링크 자체를 글자로 바꿈) */

/* 10-22 수지: ↗ = 레퍼런스(cameronplatter) 메뉴 오른쪽 ↑ 아이콘을 45° 돌린 모양 그대로
   레퍼런스 ↑(73px 글자 기준): 세로 57 · 폭 42 · 선 5.3 · 머리 날개 약 26 → 같은 비율로 ↗
   크기도 레퍼런스처럼 메뉴 글자(3.8vw)에 맞춰 화면 폭에 따라 커지고 작아짐: 1920에서 88(선 5.3), 1512에서 약 69(선 4.2) */
@media (min-width: 768px) {
  .slide__go, .work-card__arrow { width: 4.583vw; height: 4.583vw; }
}

/* 페이지 이동 로딩 v2 (10-22 수지, 참고 loading-ui.com 'Text shimmer'): 가운데 회색 dot 숨쉬기 → 'Thinking' 글자 위로 빛이 왼쪽으로 지나감
   20 · #FF303F(메뉴 색). 바탕 글자 = 같은 색 55%, 빛 = 같은 색 100%, 빛 폭 = 글자 수 × 2(8자 → 16px), 2초 일정한 속도로 반복 (참고 코드 값 그대로)
   흰 막이 덮이고 걷히는 동작(ui.js)은 그대로 */
.page-transition__text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 1.2; white-space: nowrap;
  color: #FF303F;
  --spread: 16px;
  --base-color: color-mix(in oklab, currentColor 55%, transparent);
  background-image: linear-gradient(90deg, transparent calc(50% - var(--spread)), currentColor, transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color));
  background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: pt-shimmer 2s linear infinite;
}
@keyframes pt-shimmer { from { background-position: 100% center, 0 0; } to { background-position: 0% center, 0 0; } }
@media (prefers-reduced-motion: reduce) { .page-transition__text { animation: none; } }

/* 10-22 수지: 로딩 글자 20 → 26(Heading 1 크기), 바탕 글자 진하게(#FF303F 100%) · 지나가는 빛은 연하게(Red-200 #FFACB2) — 참고 코드와 반대 방향 */
.page-transition__text {
  font-size: 40px; font-weight: 500; /* 10-23 수지: 32 → 48 → 40 / 10-22: 26 → 28 → 32, 굵기 400 → 500(Medium, 'Medium 이상 안 씀' 규칙의 예외 — 수지 요청) */
  --spread: 16px;
  --base-color: #FF303F;
  background-image: linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--color-red-200, #FFACB2), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color));
}

/* 상세 페이지 내비 v6 (10-23 수지, 참고 cynthiajego.com/work — header: 배경 없음 + mix-blend-mode: difference)
   구조(높이 80 · 좌우 40 · 26px · '( Suzy )' / Home, About, Projects · 표지 위 숨김 · hover 밑줄)는 그대로
   ① 스크롤해도 배경 · 흐림 없음
   ② 'difference' 혼합: 아래 내용과 색을 빼서 보여 줌 → 흰 바탕 위에서는 메뉴 빨강(#FF303F), 사진 · 어두운 곳 위에서는 반대색(청록 계열)으로 바뀌어 항상 읽힘
      그래서 글자 실제 색은 빨강의 반대색 #00CFC0 (흰색 − #FF303F) */
.site-nav, .site-nav.is-scrolled {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #00CFC0; mix-blend-mode: difference;
}

/* 상세 내비 v6.1 (10-23 수지): 흰 바탕 위에서는 정확한 빨강 #FF303F(혼합 없음), 아래로 이미지 · 글자가 지나갈 때만 반전 혼합
   혼합은 '( Suzy )'와 메뉴를 따로 켜고 끔(project.html 스크립트가 .is-mix를 붙임). 이를 위해 둘을 각각 화면에 고정(내비 묶음은 자리만)
   위치 · 크기는 그대로: 높이 80 안 세로 가운데, 왼쪽 · 오른쪽 40 */
@media (min-width: 768px) {
  .site-nav, .site-nav.is-scrolled { display: contents; mix-blend-mode: normal; color: #FF303F; }
  .site-nav__logo, .site-nav__menu {
    position: fixed; top: 0; z-index: 100; height: 80px; display: flex; align-items: center;
    color: #FF303F; mix-blend-mode: normal;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }
  .site-nav__logo { left: var(--space-40, 40px); }
  .site-nav__menu { right: var(--space-40, 40px); }
  .site-nav.is-hidden .site-nav__logo, .site-nav.is-hidden .site-nav__menu { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}

/* 페이지 이동 v3 (10-23 수지, 참고 cynthiajego.com — #transition, GSAP clip-path)
   떠날 때: 빨간 화면(#FF303F)이 위에서 아래로 내려와 덮음 0.8초 → 0.7초에 다음 페이지로
   도착: 빨간 화면이 덮인 채 시작 → 준비되면 0.3초 뒤 아래에서 위로 걷힘 0.8초
   곡선 = 참고 사이트 power4.inOut ≈ cubic-bezier(0.77, 0, 0.175, 1). 가운데 'Thinking'은 흰 글자 + 연분홍 빛 */
.page-transition {
  background: #FF303F; opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.page-transition.is-in { opacity: 1; clip-path: inset(0 0 0 0); animation: pt-safety-clip 0s linear 5s forwards; }
@keyframes pt-safety-clip { to { clip-path: inset(0 0 100% 0); pointer-events: none; } } /* ui.js가 안 돌아도 5초 뒤엔 걷힘 */
.page-transition__text { --base-color: #FFFFFF; color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .page-transition { transition: none; } }

/* 10-23 수지: 상세 표지(연노랑)와 빨간 화면이 어울리지 않아 → 내려오는 화면은 흰색, 'Thinking'은 다시 빨강(#FF303F) + 연분홍 빛. 내려오고 올라가는 움직임은 그대로 */
.page-transition { background: #FFFFFF; }
.page-transition__text { --base-color: #FF303F; color: #FF303F; }

/* 10-23 수지: 상세 내비 혼합(반전) 취소 — 스크롤할 때 색이 바뀌어 눈이 피로함 → 항상 #FF303F, 배경 없음은 그대로 */

/* 홈 사진 hover v8 (10-23 수지 Paper `Home — Desktop 1920 (v8 시안, 참고 cameronplatter)`, Panel 1 = hover 예시)
   마우스를 올린 칸: 사진 위로 흰 카드가 덮임(오른쪽 빨간 선 1px · 안쪽 12)
   오른쪽 위 ↗ 88(선 5 · 화살 70.7) + 아래 프로젝트 이름(48 · Medium 500 · 행간 125% · 자간 -1% · #FF303F) — 크기는 화면 폭에 비례(1920 기준)
   이전 hover(사진 흐림 + 사진 위 ↗)는 숨김. Coming Soon(LETUS)은 hover 없음 그대로 */
.slide__card { display: none; }
@media (min-width: 768px) and (hover: hover) {
  .home .slide::before, .home .slide__go { display: none !important; }
  .slide__card {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    padding: var(--space-12, 12px); background: #FFFFFF; border-right: 1px solid #FF303F;
    opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;
  }
  .slide:hover .slide__card { opacity: 1; }
  .slide__card-go { width: 4.583vw; height: 4.583vw; flex-shrink: 0; color: #FF303F; }
  .slide__card-name { align-self: stretch; font-family: var(--font-sans); font-size: 2.5vw; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: #FF303F; word-break: keep-all; white-space: nowrap; } /* 줄은 Paper처럼 2줄로 고정(직접 나눈 줄만) */
}

/* 10-23 수지: Projects 카드 hover도 홈과 같은 흰 카드(↗ 선 5 + 이름 48 · 500 · 빨강) — 이전 흐림 + 사진 위 ↗는 숨김 */
@media (min-width: 768px) and (hover: hover) {
  .work-card__thumb::after, .work-card__arrow { display: none !important; }
  .work-card:hover .slide__card { opacity: 1; }
}
/* ✱ 커서 (10-23 수지): 빨간 별표 #FF303F · 선 5 · 40(1920 기준, 화면 폭 비례), 원래 마우스 화살표는 숨김 */
.star-cursor { display: none; }
.has-star-cursor, .has-star-cursor * { cursor: none !important; }
.has-star-cursor .star-cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none;
  width: 2.083vw; height: 2.083vw; margin: -1.042vw 0 0 -1.042vw; color: #FF303F; opacity: 0; transition: opacity 0.2s;
}
.has-star-cursor .star-cursor.is-on { opacity: 1; }

/* 10-23 수지: ✱ 커서 40 → 56(1920 기준, 선 굵기는 5px 그대로) */
.has-star-cursor .star-cursor { width: 2.917vw; height: 2.917vw; margin: -1.458vw 0 0 -1.458vw; }
/* 10-23 수지: 상세 내비 — 스크롤하면 흰 50% + 흐림 배경 다시(예전 v5). 화면 폭 바 하나로 되돌림(혼합용으로 나눴던 로고 · 메뉴 고정 해제), 글자는 #FF303F 그대로 */
@media (min-width: 768px) {
  .site-nav, .site-nav.is-scrolled { display: flex; color: #FF303F; }
  .site-nav__logo, .site-nav__menu { position: static; height: auto; z-index: auto; }
  .site-nav.is-scrolled {
    background: color-mix(in srgb, var(--color-white) 50%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  }
}

/* 10-23 수지: ✱ 커서 56 → 72(선 5px 그대로) */
.has-star-cursor .star-cursor { width: 3.75vw; height: 3.75vw; margin: -1.875vw 0 0 -1.875vw; }
/* 상세 내비 (10-23 수지 Paper `Project Header — Desktop 1920 (상세 내비)` 수정)
   글자 26 → 36 · Regular → Medium 500 (높이 80 · 좌우 40 · 메뉴 사이 12 · #FF303F · 스크롤 배경은 그대로)
   메뉴 hover 밑줄 2 → 3px, 쉼표까지 포함(Paper에서 'About,' 전체 아래 밑줄) */
@media (min-width: 768px) {
  .site-nav { font-size: 36px; font-weight: 500; }
  .site-nav__menu a, .site-nav__menu a:hover { border-bottom: 0; }
  .site-nav__item { border-bottom: 3px solid transparent; }
  .site-nav__item:has(a:hover) { border-bottom-color: currentColor; }
}

/* 10-23 수지 Paper: hover 카드 오른쪽 빨간 선 1 → 5px (1920 기준, ↗ · ✱처럼 화면 폭에 비례) — 홈 · Projects 공통 */
@media (min-width: 768px) and (hover: hover) { .slide__card { border-right-width: 0.2605vw; } /* 0.2604vw는 브라우저가 4.5px로 내림 → 조금 올림 */ }

/* 10-23 수지: 모든 큰 글자 메뉴 73 → 72 (1920 기준, 화면 폭 비례 3.75vw) */
@media (min-width: 768px) { .home-head { font-size: 3.75vw; } }
/* 상세 내비 v8 (10-23 수지, C안): About과 같은 큰 글자 메뉴 한 줄 — Home, About, Projects 72 · 400 · 행간 90% · #FF303F, 화면 위 · 좌우 12
   표지 위에서는 숨김(그대로) → 표지를 지나면: 아래로 내리면 위로 숨고, 위로 올리면 나타남(0.4초). 나타날 땐 흰 50% + 흐림 배경
   메뉴 hover = 이탤릭, 현재 Projects = 글자 폭 밑줄(홈과 같은 규칙) */
@media (min-width: 768px) {
  .site-nav.site-nav--big, .site-nav.site-nav--big.is-scrolled {
    display: flex; align-items: flex-start; height: auto; padding: 12px; gap: 0;
    font-family: var(--font-sans); font-size: 3.75vw; font-weight: 400; line-height: 0.9; letter-spacing: -0.01em; color: #FF303F;
    background: color-mix(in srgb, var(--color-white) 50%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0s;
  }
  .site-nav--big.is-away { transform: translateY(-100%); }
  .site-nav--big a:hover { font-style: italic; }
  .site-nav--big .home-head__menu { display: flex; gap: 0.25em; }
}

/* 10-23 수지 Paper 수정: hover 카드 이름 48 → 56(1920 기준, 2.917vw) · CUSTOM+ 3줄('퍼시스 B2B / 주문품 설계 시스템 구축: / CUSTOM+')
   상세 내비 안쪽 여백 위아래 12 → 20 (좌우 12 그대로) */
@media (min-width: 768px) and (hover: hover) { .slide__card-name { font-size: 2.917vw; } }
@media (min-width: 768px) { .site-nav.site-nav--big, .site-nav.site-nav--big.is-scrolled { padding: 20px 12px; } }

/* 10-23 수지: hover 카드 ↗ 화살표 잠시 숨김(코드는 그대로 보관 — 다시 보이려면 이 줄만 지우면 됨) */
.slide__card-go { visibility: hidden; }

/* 10-23 수지: hover 카드 오른쪽 빨간 선도 잠시 숨김(보관 — 다시 보이려면 이 줄만 지우면 됨) */
@media (min-width: 768px) and (hover: hover) { .slide__card { border-right-color: transparent; } }

/* Projects 카드 hover v2 (10-23 수지): 흰 카드 · 흐림 · ↗ 없이, 사진이 칸 안에서 부드럽게 조금 커짐(1 → 1.06, 0.8초 감속) — 칸 밖으로는 안 넘침 */
@media (min-width: 768px) and (hover: hover) {
  .work-card__thumb { overflow: hidden; }
  .work-card__thumb > img, .work-card__thumb--icon .slide__icon { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
  .work-card:not(.work-card--soon):hover .work-card__thumb > img,
  .work-card:not(.work-card--soon):hover .work-card__thumb--icon .slide__icon { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .work-card__thumb > img { transition: none; } }

/* 10-23 수지 Paper `Projects — Desktop 1920 (v7 …)` 수정 + 홈 v8 Coming Soon
   ① Projects 카드: 사진 → 12 → 이름 20(Heading 2) · #FF303F · 자간 -1% · 행간 180%. 페이지 아래 여백 200
   ② Coming Soon 태그(홈 · Projects): Grey-900 바탕 · 흰 'COMING SOON' 대문자 14 · 500 · 안쪽 8×14 · 사진 왼쪽 아래 끝에 붙음 · 각진 모서리 */
@media (min-width: 768px) {
  .work-card { gap: var(--space-12, 12px); }
  .work-card__name { font-size: var(--text-heading-2, 20px); line-height: var(--leading-heading-2, 1.8); letter-spacing: var(--tracking-heading-2, -0.01em); color: #FF303F; }
  .page-shell:has(.works__grid) { padding-bottom: 200px; }
  .work-card__soon, .home .slide__soon {
    left: 0; bottom: 0; border-radius: 0; padding: 8px 14px;
    background: var(--color-grey-900); -webkit-backdrop-filter: none; backdrop-filter: none;
    font-family: var(--font-sans); font-size: var(--text-label, 14px); font-weight: 500; line-height: var(--leading-caption, 1.8); letter-spacing: 0;
    text-transform: uppercase; color: var(--color-white);
  }
}