/*
 * FOOREND — Founder Portfolio (homepage only)
 * index.html에서만 로드됩니다. global.css 다음에 옵니다.
 *
 * 설계 원칙
 *  1. 흑백과 off-white가 기본. 제품 키컬러는 Design Notes에서만 드러난다.
 *     각 챕터는 인라인 style="--accent:…"로 자기 키컬러를 넘겨받는다.
 *  2. 구분은 카드가 아니라 여백 · 얇은 선 · 타이포그래피 위계로 만든다.
 *  3. 제품 화면은 전부 같은 위계. 대표/보조 구분 없이 같은 크기·같은 기준선.
 *     잘리지 않게(contain) 두고 높이를 제한해 설명을 압도하지 않게 한다.
 *  4. 모든 섹션이 같은 좌측 정렬선(.shell)을 공유한다.
 */


/* ================================================================
   1. TOKENS
   ================================================================ */

:root {
  /* 헤더 높이 — global.css 값을 홈 기준으로 다시 잡습니다.
     .page-body 패딩과 .global-nav 높이가 이 변수를 씁니다. */
  --header-h:     76px;
  --header-h-mob: 60px;
}

body.page-home {
  --paper:    #FFFFFF;
  --paper-2:  #F7F7F4;
  --paper-3:  #F1F1ED;

  --ink:      #090909;
  --ink-2:    #171717;
  --ink-3:    #666662;

  --line:      #E2E0D9;
  --line-soft: #EDEBE4;

  /* 구분선 → 바로 아래 블록 라벨까지의 간격.
     Problem(위 구분선은 .glance의 border-bottom)과 Design Notes가
     같은 리듬을 갖도록 두 곳이 이 값 하나를 공유합니다. */
  --rule-gap: clamp(26px, 3.4vh, 38px);

  /* 기본 accent — 제품 챕터가 각자 덮어씁니다. */
  --accent:      var(--ink);
  --accent-soft: var(--paper-2);
  --accent-deep: var(--ink-2);

  /* global.css의 display 스택은 'Fraunces, Noto Serif KR'인데
     Noto Serif KR은 로드되지 않아 한글이 OS 기본 세리프로 떨어집니다.
     → 라틴은 Fraunces, 한글은 이미 로드된 Pretendard로 확정합니다. */
  --font-display: 'Fraunces', 'Pretendard Variable', 'Pretendard',
                  -apple-system, BlinkMacSystemFont, sans-serif;
  /* IBM Plex Mono에 한글이 없어, 라벨에 한글이 섞여도 깨지지 않게 보강 */
  --font-mono: 'IBM Plex Mono', 'Pretendard Variable', 'Pretendard', monospace;

  background: var(--paper);
  color: var(--ink-2);

  /* 한국어 조판 — 없으면 단어 중간에서 줄이 끊깁니다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 언어별 조판 보정 ───────────────────────────────────────────
   세 언어가 같은 CSS를 씁니다. 언어별 파일을 따로 두지 않고,
   문장 길이와 줄바꿈 규칙 차이만 여기서 최소한으로 맞춥니다.
   한국어(기본) 값은 건드리지 않습니다. */

/* 영어 — keep-all은 한국어 어절을 붙여두기 위한 규칙이라
   영어 본문에서는 기본값으로 되돌립니다. */
html[lang="en"] body.page-home {
  word-break: normal;
}

/* 일본어 — keep-all을 그대로 두면 문장 전체가 한 덩어리가 되어
   줄바꿈이 생기지 않습니다. 일본어 금則처리(line-break)를 씁니다.
   폰트는 새로 받지 않고, 시스템에 있는 일본어 서체로 fallback합니다.
   (Pretendard에는 가나·한자가 없어 글리프 단위로 자동 대체됩니다) */
html[lang="ja"] body.page-home {
  word-break: normal;
  line-break: strict;

  --font-body: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont,
               'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
               'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
  --font-display: 'Fraunces', 'Pretendard Variable', 'Pretendard',
                  'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                  'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Pretendard Variable', 'Pretendard',
               'Hiragino Sans', 'Yu Gothic', 'Meiryo', monospace;
}

/* 제품 보조명(영어 페이지의 한국어 정식 명칭, 일본어 페이지의 설명형 표기).
   .chapter-en의 대문자 변환·넓은 자간은 라틴 약어용이라 여기서 되돌립니다. */
.chapter-alt {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* sticky 헤더가 앵커 제목을 가리지 않게 */
html { scroll-padding-top: calc(var(--header-h) + 28px); }


/* ================================================================
   2. HEADER / FOOTER — 전역 컴포넌트의 시각적 무게만 낮춥니다
   ================================================================ */

body.page-home .global-nav { border-bottom-color: var(--line); }

body.page-home .brand-logo-img { height: 44px; }
body.page-home .brand-byline   { color: var(--ink-3); }

/* 보조 링크(Short Report / Newsletter / Portfolio)는 모바일 메뉴 전용.
   데스크톱에서는 헤더 우측 버튼 하나로 충분합니다. */
@media (min-width: 769px) {
  body.page-home .nav-link--secondary,
  body.page-home .nav-divider { display: none; }
}

body.page-home .nav-link.active,
body.page-home .nav-link.nav-highlight {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

body.page-home .lang-link { color: var(--ink); }
body.page-home .lang-link.lang-current { border-bottom-color: var(--ink); }

body.page-home .nav-shortreport {
  border-color: var(--line);
  color: var(--ink-2);
  border-radius: 2px;
}
body.page-home .nav-shortreport:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}

body.page-home .global-footer {
  padding-top: 48px;
  border-top-color: var(--line);
}
body.page-home .footer-logo-img { height: 30px; }
body.page-home .footer-tagline  { color: var(--ink-3); }

body.page-home .footer-links { gap: 2px 4px; margin-bottom: 22px; }

body.page-home .footer-link {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
  padding: 6px 10px;
  font-size: 12.5px;
}
body.page-home .footer-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

body.page-home .footer-bottom {
  color: var(--ink-3);
  border-top-color: var(--line);
}
body.page-home .footer-bottom a { color: var(--ink-3); }
body.page-home .footer-bottom a:hover { color: var(--ink); }


/* ================================================================
   3. LAYOUT PRIMITIVES
   ================================================================ */

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

/* 섹션 표식 */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}

.label--invert { color: rgba(255, 255, 255, 0.58); }

/* 블록 표식 — 챕터 내부(Problem, Solution, Design Notes) */
.block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* 헤드라인은 한국어 문장에 라틴 약어가 섞입니다. display 스택을 쓰면
   한 줄 안에서 세리프/산세리프가 갈려 오식처럼 보입니다.
   → 제목은 Pretendard로 통일하고 Fraunces는 순수 라틴 악센트에만. */
.section-head {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.9vw, 50px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
}

.section-intro { margin-bottom: clamp(40px, 6vh, 76px); }
.section-intro--wide { margin-bottom: clamp(28px, 4vh, 48px); }

.section-sub {
  margin-top: clamp(16px, 2.4vh, 22px);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-3);
  max-width: 50ch;
}

/* 제품 섹션 상단의 작은 선언 문장 */
.section-aside {
  margin-top: clamp(26px, 4vh, 40px);
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-3);
}

/* 2열 — About, FOOREND */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.prose {
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 58ch;
}
.prose p + p { margin-top: 20px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* 본문 링크 */
.text-link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.text-link:hover { border-bottom-color: var(--ink); color: var(--ink); }

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: clamp(24px, 3.4vh, 34px);
}

/* 버튼 — 선 하나로 끝냅니다 */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 24px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

.btn-line--solid { background: var(--ink); color: var(--paper); }
.btn-line--solid:hover { background: var(--ink-2); border-color: var(--ink-2); }

.btn-line--invert {
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--paper);
}
.btn-line--invert:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.dot { color: var(--line); margin: 0 8px; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ================================================================
   4. HERO — 타이포그래피와 여백만
   ================================================================ */

/* 제목부터 아이콘 클러스터까지가 첫 화면에 들어오도록 한 칼럼으로 세웁니다.
   높이는 채우되(min-height) 고정하지 않아, 짧은 화면에서는 내용이 잘리지 않고
   자연스럽게 늘어납니다. */
.hero {
  display: flex;
  flex-direction: column;
  /* 세로 여백은 전부 vh 기준 clamp — 화면이 낮아질수록 같이 줄어들어
     제목부터 아이콘까지가 첫 화면에 남습니다. */
  padding: clamp(28px, 4.5vh, 88px) 0 clamp(28px, 4vh, 76px);
  /* 헤더는 sticky라 흐름 높이를 차지하고, .page-body가 같은 값을 padding으로
     한 번 더 둡니다. 첫 화면에 남는 높이는 그래서 헤더 높이의 두 배를 뺀 값입니다. */
  min-height: calc(100vh - var(--header-h) * 2);
  min-height: calc(100svh - var(--header-h) * 2);
}

.hero > .shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(18px, 3vh, 40px);
}

.hero-title {
  font-family: var(--font-body);
  font-size: clamp(38px, 6.4vw, 84px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ink);
}

.hero-kr {
  margin-top: clamp(18px, 2.8vh, 36px);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--ink);
}

.hero-lede {
  margin-top: clamp(14px, 2.2vh, 28px);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 50ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.6vh, 48px);
}

/* ── Hero 제품 아이콘 클러스터 ──────────────────────────────────
   아래 Products 섹션의 예고편. 제목보다 강해지면 안 되므로 작게 두고,
   조금 띄우고 살짝 엇갈리게 놓아 네 개가 한 덩어리로 읽히게 합니다.
   home.js가 채우지 못하면 :empty로 흔적 없이 사라집니다. */
.hero-icons {
  --icon-size: 70px;
  --icon-gap: 10px;   /* 아이콘 사이 간격 */

  display: flex;
  align-items: center;
  gap: var(--icon-gap);
  list-style: none;
  margin-top: auto;                     /* Hero 아래쪽에 붙습니다 */
  padding: clamp(22px, 3.6vh, 56px) 0 0;
}

.hero-icons:empty { display: none; }

/* 2~3px만 어긋나게 — 양 끝은 기준선에 두어 실루엣이 흔들리지 않게 합니다 */
.hero-icon:nth-child(2) { transform: translateY(-3px); }
.hero-icon:nth-child(3) { transform: translateY(3px); }

.hero-icon-link {
  display: block;
  border-radius: 16px;
  transition: transform 0.2s ease;
}

.hero-icon-link img {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 16px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.hero-icon-link:hover { transform: translateY(-3px); }

/* 올라온 아이콘이 옆 아이콘에 가리지 않게 */
.hero-icon-link:hover,
.hero-icon-link:focus-visible { position: relative; z-index: 1; }


/* ================================================================
   5. ABOUT — 텍스트만. 인물 사진도 대체 그래픽도 두지 않습니다.
   ================================================================ */

.about {
  padding: clamp(64px, 10vh, 120px) 0;
  border-top: 1px solid var(--line);
}


/* ================================================================
   6. PRODUCTS — 케이스 스터디 챕터
   Header → At a Glance → Problem/Solution → Screens → Design Notes
   ================================================================ */

.products {
  padding: clamp(64px, 10vh, 120px) 0 0;
  border-top: 1px solid var(--line);
}

.chapter { padding: clamp(52px, 7.5vh, 88px) 0 clamp(60px, 8.5vh, 100px); }
.chapter + .chapter { border-top: 1px solid var(--line); }

/* ── A. Product Header ─────────────────────────────────────────── */
.chapter-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 3vh, 30px);
}

.chapter-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}

.chapter-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ink-3);
}

.chapter-name {
  font-family: var(--font-body);
  font-size: clamp(30px, 3.7vw, 50px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
}

.chapter-en {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.chapter-status {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--ink-2);
}

.chapter-status--soon { color: var(--ink-3); }

.chapter-tagline {
  margin-top: clamp(20px, 2.8vh, 28px);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--ink);
}

.chapter-desc {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 56ch;
}

/* 성과 — 배지가 아니라 타이포로 세웁니다 */
.proof {
  margin-top: clamp(20px, 2.8vh, 26px);
  padding-left: 16px;
  border-left: 2px solid var(--ink);
}

.proof strong {
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--ink);
}

/* ── B. At a Glance — 카드가 아니라 얇은 메타데이터 행 ─────────── */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 22px clamp(20px, 2.6vw, 38px);
  margin-top: clamp(32px, 4.6vh, 48px);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.glance dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.glance dd {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── C/D. Problem · Solution — 이미지 없이 텍스트 2열 ───────────── */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  /* .glance의 border-bottom이 Problem 위 구분선 역할을 합니다.
     Design Notes(.chapter-block)의 padding-top과 같은 값을 씁니다. */
  margin-top: var(--rule-gap);
}

.ps p {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 46ch;   /* 열이 넓어져도 행 길이가 늘어지지 않게 */
}

/* 문단이 둘 이상인 경우에만 생기는 간격 */
.ps p + p { margin-top: 14px; }

/* ── E. Product Screens — 전부 같은 크기, 같은 기준선 ───────────
   대표/보조 구분 없음. 회전 · 겹침 · 목업 프레임 없음. */
.gallery {
  /* 기기 프레임 치수는 여기 한 곳에서만 정합니다.
     데스크톱은 높이를 정하고 폭을 파생시키고,
     모바일(아래 미디어쿼리)은 폭을 정하고 높이를 파생시킵니다. */
  --frame: 8px;              /* 베젤 두께 */
  --screen-ar: 0.52;         /* 화면 가로/세로 비 — 캡처 대부분이 0.49~0.57 */
  --device-h: clamp(340px, 30vw, 420px);
  --device-w: calc((var(--device-h) - var(--frame) * 2) * var(--screen-ar) + var(--frame) * 2);

  display: flex;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(36px, 5.2vh, 60px);
}

/* 모든 기기가 같은 크기 — 대표 화면을 따로 키우지 않습니다 */
.shot {
  flex: 0 0 auto;
  width: var(--device-w);
}

/* CSS로만 만든 가벼운 기기 프레임. 외부 목업 이미지 없음.
   회전 · 겹침 · 원근 · 3D · 강한 그림자 없음. */
.device {
  display: block;            /* <span>이라 기본이 inline — 반드시 필요 */
  width: 100%;
  height: var(--device-h);
  padding: var(--frame);
  background: #1A1A1A;
  border-radius: 26px;
  overflow: hidden;
}

.device img {
  width: 100%;
  height: 100%;
  /* contain — 캡처가 잘리지도, 비율이 왜곡되지도 않습니다.
     비율이 다른 캡처는 화면 안에서 위아래 여백을 갖습니다. */
  object-fit: contain;
  object-position: center;
  background: #FFFFFF;
  border-radius: 18px;
}

.shot figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* ── F. Design Notes — 제품 키컬러가 드러나는 유일한 자리 ───────── */
.chapter-block {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 36px);
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: var(--rule-gap);   /* Problem 위 간격과 동일 */
  border-top: 1px solid var(--line);
}

.chapter-notes .block-label {
  margin-bottom: 0;
  padding-top: 3px;
  color: var(--accent);
  /* 주황·테라코타 원색은 흰 배경에서 4.5:1을 넘지 못합니다.
     (color-mix 미지원 브라우저는 앞줄 원색으로 떨어집니다) */
  color: color-mix(in srgb, var(--accent) 80%, #000);
}

.note {
  padding: 16px 20px;
  border-left: 2px solid var(--accent);
  border-left-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: 0 8px 8px 0;
}

.note + .note { margin-top: 14px; }

.note-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.note-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 3px;
  background: var(--accent);
}

.note-body {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 62ch;
}


/* ================================================================
   7. FOOREND — 인사이트 엔진
   ================================================================ */

.foorend {
  padding: clamp(64px, 10vh, 120px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

/* 제품 챕터의 앱 아이콘과 같은 역할 — 섹션의 주인을 먼저 보여줍니다.
   테두리·그림자·배경 패널 없이 원본 비율 그대로. */
.foorend-mark {
  width: clamp(150px, 15vw, 200px);
  height: auto;
  object-fit: contain;
  margin-bottom: clamp(20px, 2.8vh, 28px);
  /* 원본 JPEG의 흰 배경이 off-white 섹션 위에서 흰 사각형으로 보입니다.
     multiply로 흰 배경만 바탕에 녹이고 검은 타원과 글자는 그대로 남깁니다.
     (크롭이나 리터칭 없이 원본 비율 유지) */
  mix-blend-mode: multiply;
}

/* 채널 규모 — 큰 통계 섹션이 아니라 작은 3열 정보 행 */
.channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(30px, 4.4vh, 42px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.channels dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.channels dd {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.reports { margin-top: clamp(48px, 7vh, 80px); }

.report-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.report-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "cat   date"
    "title date";
  gap: 5px 20px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.report-list a:hover { opacity: 0.55; }

/* 번역 페이지 전용 — 리포트 본문이 한국어임을 알리는 작은 주석 */
.report-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}

.rp-cat   { grid-area: cat;   font-size: 11.5px; color: var(--ink-3); }
.rp-title { grid-area: title; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.rp-date  {
  grid-area: date;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
}

/* ── Instagram (Behold) — FOOREND를 보조하는 콘텐츠 ─────────────
   위젯 내부는 Shadow DOM이라 직접 제어할 수 없습니다.
   바깥 wrapper로 폭과 최대 높이만 잡습니다. scale 변형은 쓰지 않습니다. */
.ig { margin-top: clamp(48px, 7vh, 80px); }

.ig-frame {
  max-width: 960px;
  margin: 18px auto 0;
  max-height: 560px;
  overflow: hidden;
}

.ig-frame behold-widget { display: block; }

/* 위젯이 가운데 정렬이므로 라벨과 링크도 같은 축에 맞춥니다 */
.ig .block-label   { text-align: center; }
.ig .inline-links  { justify-content: center; }


/* ================================================================
   8. SELECTED WORK — 프로젝트 인덱스
   ================================================================ */

.work {
  padding: clamp(64px, 10vh, 120px) 0;
  border-top: 1px solid var(--line);
}

.index-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.index-list a,
.index-list .ix-static {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 68px 20px;
  grid-template-areas:
    "cat main year go"
    "cat sub  year go";
  gap: 5px 24px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.index-list a:hover { opacity: 0.55; }

.ix-cat {
  grid-area: cat;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 5px;
}

.ix-main {
  grid-area: main;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

.ix-sub {
  grid-area: sub;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.ix-year {
  grid-area: year;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: right;
  padding-top: 5px;
}

.ix-go {
  grid-area: go;
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
  padding-top: 4px;
}


/* ================================================================
   9. CONTACT
   ================================================================ */

.contact {
  background: var(--ink);
  padding: clamp(72px, 11vh, 124px) 0;
}

.contact-title {
  font-family: var(--font-body);
  font-size: clamp(30px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--paper);
}

/* 좁은 화면에서 "WORK / TOGETHER!"로 갈라지지 않고
   "Let’s / WORK TOGETHER!"로만 접히게 합니다. */
.contact-title .nowrap { white-space: nowrap; }

.contact-lede {
  margin-top: clamp(20px, 3vh, 28px);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.6);
  max-width: 54ch;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(28px, 4vh, 40px);
}

.chips li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--ink-2);
}

.chips--invert li {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
}

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: clamp(34px, 5vh, 50px);
}

.contact-mail {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
  overflow-wrap: anywhere;
}
.contact-mail:hover { color: var(--paper); border-bottom-color: var(--paper); }

.contact a:focus-visible { outline-color: rgba(255, 255, 255, 0.65); }


/* ================================================================
   10. MOTION — 짧은 fade-up 한 번. 그 외 모션 없음.
   home.js가 <html>에 .js-reveal을 붙일 때만 숨김이 적용되므로,
   스크립트 로드에 실패해도 내용이 사라지지 않습니다.
   ================================================================ */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .report-list a,
  .index-list a,
  .text-link,
  .btn-line,
  .contact-mail { transition: none; }

  .hero-icon-link { transition: none; }
  .hero-icon-link:hover { transform: none; }

  html { scroll-behavior: auto; }
}


/* ================================================================
   11. RESPONSIVE
   ================================================================ */

/* ── 1024px ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .chapter-block { grid-template-columns: 130px minmax(0, 1fr); }
}

/* ── 820px — 화면 갤러리를 가로 스크롤로 전환 ────────────────── */
@media (max-width: 820px) {
  .hero-icons { --icon-size: 62px; --icon-gap: 9px; }

  .ps-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ps p { max-width: 56ch; }

  .chapter-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .chapter-notes .block-label { padding-top: 0; }

  /* 가로 스크롤은 이 컨테이너 안에서만 발생합니다.
     모든 기기는 여전히 같은 크기 — 대표/보조 구분 없음.
     폭을 화면의 약 73%로 잡고 높이를 파생시킵니다.
     다음 화면 일부가 보여 스크롤 가능함을 알립니다. */
  .gallery {
    --device-w: min(73vw, 292px);
    --device-h: calc((var(--device-w) - var(--frame) * 2) / var(--screen-ar) + var(--frame) * 2);

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
  }

  .shot { scroll-snap-align: start; }
}

/* ── 768px — 모바일 ──────────────────────────────────────────── */
@media (max-width: 768px) {
  html { scroll-padding-top: calc(var(--header-h-mob) + 20px); }

  .hero { min-height: calc(100vh - var(--header-h-mob) * 2); }
  .hero { min-height: calc(100svh - var(--header-h-mob) * 2); }

  body.page-home .brand-logo-img { height: 36px; }

  .index-list a,
  .index-list .ix-static {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-areas:
      "cat  year"
      "main main"
      "sub  sub";
    gap: 4px 16px;
    padding: 18px 0;
  }
  .ix-cat  { padding-top: 0; }
  .ix-year { padding-top: 0; }
  .ix-go   { display: none; }

  .ig-frame { max-height: 480px; }
}

/* ── 560px — 소형 모바일 ────────────────────────────────────── */
@media (max-width: 560px) {
  .hero-icons { --icon-size: 54px; --icon-gap: 8px; }

  .glance { gap: 18px 20px; }

  .chapter-icon { width: 44px; height: 44px; }

  .channels {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .channels .channel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
  }
  .channels .channel + .channel { border-top: 1px solid var(--line); }
  .channels dt { margin-bottom: 0; }
  .channels dd { font-size: 20px; }

  .hero-cta .btn-line,
  .contact-cta .btn-line { flex: 1 1 auto; }

  .note { padding: 14px 16px; }
}

/* ── 380px — 가장 좁은 화면 ─────────────────────────────────── */
@media (max-width: 380px) {
  .hero-icons { --icon-size: 48px; --icon-gap: 6px; }

  .glance { grid-template-columns: minmax(0, 1fr); }

  .gallery { --device-w: 74vw; }
}