@import url("tokens.css?v=5");

/* ------------------------------------------------------------------
   THE HARPER v2 — 어두운 사진 위 큰 세리프 제목, 띠(band)가 어두움·밝음을 번갈아 간다.
   색·서체·버튼·모서리 값은 docs/design-system.md 그대로.
   ------------------------------------------------------------------ */

:root {
  /* 어두운 띠에서 쓰는 파생 값. 바탕은 잉크, 글자는 그라운드 */
  --on-dark: var(--color-ground);
  --on-dark-muted: rgba(250, 249, 246, 0.62);
  --on-dark-faint: rgba(250, 249, 246, 0.4);
  --on-dark-line: rgba(250, 249, 246, 0.18);
  --on-dark-line-soft: rgba(250, 249, 246, 0.1);

  /* 한글이 섞인 제목: 라틴 글자는 Cormorant Garamond, 한글은 Noto Sans KR 로 글자별 대체 */
  --font-headline: "Cormorant Garamond", "Noto Sans KR", sans-serif;

  --header-h: 72px;
  --gutter: 40px;
  --radius-card: 12px;
  --radius-btn: 6px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.016em; /* 한글 본문 자간 -1.6% */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { word-break: keep-all; overflow-wrap: normal; }
em { font-style: italic; font-synthesis: none; }

.skip-link {
  position: absolute;
  top: -64px;
  left: 0;
  background: var(--color-ink);
  color: white;
  padding: 8px 16px;
  z-index: 10000;
}
.skip-link:focus { top: 0; }

/* 폭: 본문 최대 너비 1280px(네이버 메인 기준), 가운데 정렬. 양옆 여백(--gutter)은 그 바깥에 더해진다 */
.wrap {
  max-width: calc(1280px + var(--gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 1100px) { :root { --gutter: 24px; } }
@media (max-width: 768px) { :root { --gutter: 24px; --header-h: 56px; } } /* 모바일: 좌우 여백 24px, 헤더 높이 72→64→56px */

/* ------------------------------------------------------------------
   버튼 (디자인 시스템 5장)
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.07px;
  padding: 8px 16px;
  min-height: 41px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.btn--lg { padding: 12px 28px; min-height: 49px; }
.btn--primary { background: var(--color-ink); color: white; }
.btn--primary:hover { background: #2C2925; }
.btn--accent { background: var(--color-key); color: white; }
.btn--accent:hover { background: #5E3E30; }
.btn--secondary { background: transparent; border-color: var(--gray-300); color: var(--color-ink); }
.btn--secondary:hover { background: var(--gray-50); }
.btn--outline-light { background: transparent; border-color: rgba(250, 249, 246, 0.9); color: var(--on-dark); }
.btn--outline-light:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--color-ink); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ------------------------------------------------------------------
   헤더 — 앱 미리보기 헤더와 같은 색 구성.
   코코아 바탕에 밝은 로즈 로고, 메뉴 글자는 흰색. 히어로를 벗어나면 코코아 70% + 블러.
   ------------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--color-key);
  color: var(--on-dark);
  z-index: 1000;
}
.header.scrolled {
  background: rgba(111, 74, 58, 0.85); /* --color-key 85% (기존 70%에서 +15%p) */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header__container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(1280px + var(--gutter) * 2); /* 본문(.wrap)과 같은 최대 너비. 바탕색은 화면 끝까지 */
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.header__logo { display: flex; align-items: center; height: 100%; }
/* 워드마크: Cormorant Garamond 500, 자간 넓게 */
.logo {
  font-family: var(--font-logo);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.header__logo .logo { color: var(--color-petal); transition: opacity 200ms ease; } /* 헤더에서는 코코아 위 밝은 로즈 */
@media (max-width: 768px) { .header__logo .logo { font-size: 24px; } }
.header__logo:hover .logo { opacity: 0.7; }

/* 메뉴는 KO 기준 위치에 고정. 오른쪽 버튼 길이가 바뀌어도(EN) 움직이지 않는다. */
.header__nav {
  position: absolute;
  top: 50%;
  left: calc(50% - 12px);
  transform: translate(-50%, -50%);
  display: flex;
  gap: 32px;
  align-items: center;
  white-space: nowrap;
}
.header__nav-link {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--on-dark);
  position: relative;
  padding-bottom: 4px;
  transition: color 200ms ease;
}
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--on-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}
.header__nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1000px) { .header__nav { display: none; } }

.header__actions { display: flex; align-items: center; gap: 24px; }
@media (max-width: 1000px) { .header__actions { gap: 16px; } }

.header__lang-toggle { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) { .header__lang-toggle { display: none; } }
.lang-toggle { display: inline-flex; align-items: center; gap: 8px; } /* 모바일 메뉴 안의 KO | EN */
.lang-toggle__button {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: inherit;
  opacity: 0.62;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 200ms ease;
}
.lang-toggle__button[aria-pressed="true"] { font-weight: 500; opacity: 1; }
.lang-toggle__button:hover { opacity: 0.8; }
.lang-toggle__divider { opacity: 0.3; }

/* 헤더 버튼: 코코아 바탕 위라 밝은 로즈 바탕에 잉크 글자 */
/* 헤더 버튼(데스크톱): 코코아 바탕 위라 흰 바탕에 잉크 글자 */
.header__cta { display: none; background: #fff; color: var(--color-ink); }
.header__cta:hover { background: var(--color-ground); color: var(--color-ink); }
@media (min-width: 1001px) { .header__cta { display: inline-flex; } }

.header__menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1000px) { .header__menu-toggle { display: flex; } }
.hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; }
.hamburger__line {
  width: 100%; height: 2px;
  background: var(--on-dark);
  border-radius: 1px;
  transition: all 300ms ease;
  transform-origin: 50% 50%;
}
.header__menu-toggle:hover .hamburger__line { background: var(--color-petal); }
/* 열렸을 때 X: 1·3번 선을 같은 중심으로 모아 45도 회전 */
.header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; }
.header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴: 잉크 바탕 전체 */
.mobile-menu {
  position: fixed;
  top: var(--header-h); left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--color-ink);
  color: var(--on-dark);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__content {
  height: 100%;
  padding: 24px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--on-dark);
  padding: 6px 0;
  border-bottom: 1px solid var(--on-dark-line-soft);
}
.mobile-menu__bottom {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-menu__cta { width: 100%; }

@media (max-width: 1000px) {
  .header__actions { display: none; }
}

/* ------------------------------------------------------------------
   히어로: 밝은 바탕(사진 배경색 #FBF9F5) + 왼쪽 글, 오른쪽 앱 화면 폰 사진
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #FBF9F5; /* 폰 사진의 배경색 그대로(그라운드 #FAF9F6와 거의 같다) */
  color: var(--color-ink);
  overflow: hidden;
  display: flex;
}
.hero__frame {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  grid-template-rows: 1fr auto;
  grid-template-areas: "copy visual" "foot foot";
  column-gap: clamp(48px, 6vw, 96px); /* 글 덩어리와 폰 사이 */
  padding: calc(var(--header-h) + 32px) var(--gutter) 28px;
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2); /* 본문(.wrap)과 같은 최대 너비 */
  margin: 0 auto;
}
.hero__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 레퍼런스처럼 왼쪽 세로 가운데 */
  gap: 28px;
  min-width: 0;
  justify-self: end; /* 제목·영문·태그·링크를 한 덩어리로 폰 쪽에 붙인다. 글 정렬은 왼쪽 그대로 */
}
/* 제목: 한글 두 줄(줄바꿈은 "큐레이션하는" 뒤) */
.hero__title {
  font-family: var(--font-body);
  font-size: clamp(34px, calc(3.4vw + 4px), 54px); /* 4px 키움(2px씩 두 번) */
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.03em; /* 자간 -3% */
  color: var(--color-ink);
  word-break: keep-all;
}
/* 제목 아래 작은 영문 한 줄. ‘Seoul,’ 은 잉크, 나머지(Curated by Editors)는 안틱 로즈 */
.hero__accent { color: var(--color-point); }
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gray-700);
  margin-top: -4px; /* 제목과 간격 4px 늘림 */
}
.hero__sub .hero__word { font-weight: 600; color: var(--color-ink); }
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 44px; /* 영문 한 줄과 72px 간격(묶음 gap 28px + 44px) */
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink);
  border-bottom: 1px solid var(--gray-300);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.hero__link:hover { border-color: var(--color-ink); }

.hero__visual {
  grid-area: visual;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 폰은 글 쪽(왼쪽)으로 */
  min-width: 0;
  min-height: 0;
}
/* 정사각형 목업 사진: 모서리 둥글게 */
.hero__phone {
  width: min(100%, calc(100svh - var(--header-h) - 110px), 640px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
}

.hero__foot {
  grid-area: foot;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.hero__meta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.hero__meta--right { text-align: right; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__frame {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "copy" "foot"; /* 모바일은 사진 먼저, 그 아래 글 */
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 20px;
    row-gap: 32px;
  }
  .hero__copy { justify-content: flex-start; gap: 20px; justify-self: stretch; }
  .hero__link { margin-top: 20px; } /* 모바일 gap 20px + 20px = 40px (영문 한 줄과 인스타그램 링크 사이) */
  .hero__title { font-size: clamp(30px, calc(7vw + 4px), 36px); }
  .hero__sub { font-size: 20px; margin-top: 0; }
  .hero__visual { justify-content: center; }
  .hero__phone { width: min(100%, 420px); border-radius: 20px; }
  .hero__foot { margin-top: 0; }
  .hero__meta--right { display: none; }
}
@media (max-width: 768px) {
  .hero__phone { width: 100%; } /* 사진도 글과 같은 좌우 여백(24px)까지 넓힘 */
  .hero__link { margin-bottom: 40px; } /* 인스타그램 링크 아래 40px 더 */
  .header__menu-toggle { margin-right: -10px; } /* 44px 터치 영역 안 아이콘(24px)의 오른쪽 끝을 좌우 여백에 맞춤 */
}

/* ------------------------------------------------------------------
   띠(band)와 공통 머리글
   ------------------------------------------------------------------ */
.band {
  padding: 112px 0;
  background: var(--color-ground);
  color: var(--color-ink);
}
.band--alt { background: var(--gray-50); }
.band--dark { background: var(--color-ink); color: var(--on-dark); }
@media (max-width: 768px) { .band { padding: 72px 0; } }

/* 왼쪽 작은 이름표 + 오른쪽 큰 문장 */
.split {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr);
  gap: 24px 48px;
  align-items: start;
}
.split__body { max-width: 880px; }
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: 20px; }
}

.eyebrow {
  display: block;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--gray-500);
  padding-top: 0.6em;
}
.eyebrow--light { color: var(--on-dark-muted); }

.statement {
  font-family: var(--font-headline);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.statement em { font-style: italic; font-synthesis: none; } /* 한글은 가짜 기울임 없이 바로 세움, 라틴만 진짜 이탤릭 */
/* 영문일 때 섹션 제목은 모두 Noto Sans로(국문은 한글이 이미 Noto Sans KR로 보인다) */
html:lang(en) .statement { font-family: var(--font-body); }
.statement--xl { font-size: clamp(44px, 6vw, 88px); line-height: 1.1; }
.statement__aside {
  margin-top: 24px;
  max-width: 560px;
  font-size: 18px; /* 제목 아래 보조 문장(About·Area)과 티어 설명(.tier__more)은 같은 단계: 18px · 300 · 1.75 */
  font-weight: 300;
  line-height: 1.75;
  color: var(--gray-700);
}
.band--dark .statement__aside { color: var(--on-dark-muted); }
/* About 소개: 라벨 없이 왼쪽부터 시작, 보조 문장은 한 줄로 */
.about__intro .statement__aside { max-width: none; }
@media (max-width: 768px) { .statement__aside { font-size: 16px; } } /* 모바일은 보조 문장·티어 설명 모두 16px */

/* ------------------------------------------------------------------
   About: 숫자 + 가치
   ------------------------------------------------------------------ */
.values {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
.value__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 4px; /* 번호와 간격 20px 줄임 */
}
.value__index {
  display: block;
  font-family: var(--font-display);
  font-size: 38px; /* 4px씩 두 번 키움 */
  font-style: italic;
  color: var(--on-dark-faint);
  margin-bottom: -4px; /* 제목과 간격: 4px에서 8px 더 좁힘(숫자 줄 높이 안쪽으로 당김) */
}
.value__title { font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 1.4; }
.value__desc { margin-top: 4px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--on-dark-muted); }

@media (max-width: 1000px) {
  .values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .values { margin-top: 48px; grid-template-columns: 1fr; gap: 48px; } /* 설명 끝과 다음 사진 사이 20px 늘림 */
  .value__image { margin-bottom: -10px; } /* 사진과 번호 사이: 6px 좁힌 데서 8px 더 좁힘 */
}

/* Spots 영역: 한글과 섞여 쓰는 숫자·영문(1:1, 1박, VIP, K-)도 세리프 대신 한글 서체(Noto Sans KR)로 */
#spots .statement,
#area .statement,
#partners .statement,
#contact .statement, /* 성수·한남·압구정 · 파트너 · 협업 문의 제목도 Spots 제목과 같은 서체·크기·굵기 */
#spots .tier__name,
#spots .picks__title,
#spots .pick__title { font-family: var(--font-body); }

/* ------------------------------------------------------------------
   Spots: 티어 목록
   ------------------------------------------------------------------ */
.tiers {
  margin-top: 80px;
  border-top: 1px solid var(--gray-200);
}
.tier {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center; /* 영문 이름(DISCOVER…)이 글줄 아래로 처지지 않게 세로 가운데 */
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--gray-200);
  transition: padding-left 300ms ease;
}
.tier:hover { padding-left: 8px; }
/* 위: 한글 설명을 크게(주), 아래: 영문 이름을 작게(부) */
.tier__name {
  font-family: var(--font-headline);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tier__desc {
  font-family: var(--font-display);
  font-size: 20px; /* 2px 키움 */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.tier-badge {
  justify-self: end;
  font-family: var(--font-body);
  font-size: 12px; /* 2px 키움 */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-powder);
  color: var(--color-ink);
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.5;
  align-self: center;
}
.tier-badge--upcoming { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-500); }
/* 오픈한 티어(DISCOVER·DAY DROP): 설명 한 줄 + 앱 목업. 목업 상자는 영문 이름 칸 시작점부터 오른쪽 끝까지 */
.tier--open { grid-template-areas: "n d b" "m s s"; row-gap: 20px; align-items: start; }
.tier--open:hover { padding-left: 0; }
.tier--open .tier__name { grid-area: n; align-self: center; }
.tier--open .tier__desc { grid-area: d; align-self: center; }
.tier--open .tier-badge { grid-area: b; }
.tier__more { grid-area: m; font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--gray-700); } /* .statement__aside 와 같은 단계 */
.tier__price { display: block; margin-top: 4px; font-size: 16px; font-weight: 300; color: var(--gray-500); } /* 가격은 한 단계 작고 연하게 */
.br-pc { display: inline; }
.tier__shot {
  grid-area: s;
  height: 288px; /* 기기 위 2/3만 보이게: 위 여백 20px + 기기 높이(402px)의 2/3 */
  padding-top: 20px;
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--gray-100);
  border-radius: 16px;
  overflow: hidden; /* 기기 아래 1/3은 잘림 */
}
.tier__shot img { width: 200px; height: auto; filter: drop-shadow(0 16px 28px rgba(58, 54, 47, 0.16)); }
@media (max-width: 768px) {
  .tiers { margin-top: 48px; }
  .tier { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "d d"; gap: 6px 16px; padding: 20px 0; }
  /* 선과 글자 사이를 위아래 똑같이(약 23px). 영문 이름(CAPSULE 등)은 줄 높이 안에 아래 빈 곳이 5.5px 더 있어 아래 여백을 그만큼 줄이고,
     목업 상자로 끝나는 티어는 위쪽 한글 글자와 같은 거리가 되게 아래 여백을 3px 늘린다 */
  .tier:not(.tier--open) { padding-bottom: 14.5px; }
  .tier--open { padding-bottom: 23px; }
  .tier:hover { padding-left: 0; }
  .tier__name { grid-area: n; }
  .tier__desc { grid-area: d; font-size: 17px; }
  .tier-badge { grid-area: b; }
  .tier--open { row-gap: 6px; grid-template-areas: "n b" "d d" "m m" "s s"; }
  .tier--open .tier__more, .tier--open .tier__shot { margin-top: 10px; }
  .tier__more { font-size: 16px; }
  .tier__price { font-size: 14px; }
  .br-pc { display: none; } /* 모바일은 화면 폭에 맞춰 알아서 줄바꿈 */
  .tier__shot { height: 269px; } /* 20px + 기기 높이(374px)의 2/3 */
  .tier__shot img { width: 186px; }
}

/* 에디터 픽 */
.picks { margin-top: 96px; }
.picks__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.picks__title {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.picks__grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pick {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--gray-100);
  color: var(--on-dark);
}
.pick[hidden] { display: none; }
.pick img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pick::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(58, 54, 47, 0.85) 0%, rgba(58, 54, 47, 0.2) 45%, rgba(58, 54, 47, 0) 70%);
  pointer-events: none;
}
/* 에디터 픽 카드는 링크가 아니라 hover 확대 없음 */
.pick__text { position: absolute; left: 20px; right: 20px; z-index: 1; }
.pick__text { bottom: 20px; display: flex; flex-direction: column; gap: 10px; } /* 제목과 설명 사이 2px 늘림 */
.pick__title {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.pick__sub {
  font-size: 15px; /* 3px 키움 */
  font-weight: 400; /* 300에서 한 단계 두껍게 */
  line-height: 1.45;
  color: var(--on-dark-muted);
}
.picks__more {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink);
  border-bottom: 1px solid var(--gray-300);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.picks__more:hover { border-color: var(--color-ink); }
@media (max-width: 1000px) { .picks__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .picks { margin-top: 64px; }
  .picks__grid { grid-template-columns: 1fr; gap: 12px; }
  .pick__text { left: 24px; right: 24px; bottom: 24px; } /* 사진 안 글자 여백 20→24px */
  .pick__title { font-weight: 400; } /* 제목 한 단계 두껍게(300→400) */
}

/* ------------------------------------------------------------------
   Process
   ------------------------------------------------------------------ */
.steps {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--on-dark-line);
}
.step {
  padding: 32px 24px 36px 0;
  border-right: 1px solid var(--on-dark-line-soft);
}
.step:not(:first-child) { padding-left: 24px; }
.step:last-child { border-right: none; }
.step__label {
  font-size: 14px; /* 2px 키움 */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.step__title { margin-top: 8px; font-family: var(--font-body); font-size: 37px; /* 40px에서 3px 줄임 */ font-weight: 500; line-height: 1.3; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: none; }
  .step:nth-child(n+3) { border-top: 1px solid var(--on-dark-line-soft); }
  .step:nth-child(3) { padding-left: 0; }
}
@media (max-width: 768px) {
  .steps { margin-top: 56px; grid-template-columns: 1fr; }
  .step { padding: 24px 0; border-right: none; border-bottom: 1px solid var(--on-dark-line-soft); border-top: none; }
  .step:not(:first-child) { padding-left: 0; }
  .step:last-child { border-bottom: none; }
}

/* ------------------------------------------------------------------
   Focus Area
   ------------------------------------------------------------------ */
.districts {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.district {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--gray-100);
  color: var(--on-dark);
}
.district img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.district:hover img { transform: scale(1.04); }
.district::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(58, 54, 47, 0.88) 0%, rgba(58, 54, 47, 0.15) 50%, rgba(58, 54, 47, 0) 75%);
  pointer-events: none;
}
.district__text {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
}
/* 글자 스타일은 에디터 픽 카드(.pick__title · .pick__sub)와 같게 */
.district__name {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.district__desc { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--on-dark-muted); }

.area-map { margin-top: 20px; }
.area-map__frame {
  height: 440px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
/* 핀: 물방울 모양 분홍 핀 + 이름 알약 라벨. 색은 타일이 아니라 핀에만 적용한다 */
.map-marker-wrapper { position: relative; overflow: visible; }
.map-pin {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  background: #E07A89;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(58, 54, 47, 0.35);
}
.map-pin::after { /* 핀 가운데 흰 점 */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #fff;
}
.map-pin__label {
  position: absolute; left: 40px; top: 15px;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-ink); /* 잉크(검정 계열) */
  box-shadow: 0 2px 8px rgba(58, 54, 47, 0.25);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: #fff;
}
/* 팝업: MapLibre 기본 모양을 지우고 흰 카드로 */
.map-popup .maplibregl-popup-content { background: white; border-radius: 6px; padding: 8px 28px 8px 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); border: none; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-ink); line-height: 1.4; }
.map-popup .maplibregl-popup-tip { border-top-color: white; }
.map-popup .maplibregl-popup-close-button { font-size: 16px; color: var(--gray-500); padding: 2px 8px; }
.map-popup .maplibregl-popup-close-button:hover { background: transparent; color: var(--color-ink); }
.maplibregl-map { font-family: var(--font-body); background: var(--gray-50); }
#area-map .maplibregl-canvas:focus { outline: none; }
/* 기본 컨트롤은 얇고 조용하게. 출처 표기는 그대로 둔다 */
#area-map .maplibregl-ctrl-group { border-radius: 6px; box-shadow: 0 1px 4px rgba(58, 54, 47, 0.15); background: #fff; }
#area-map .maplibregl-ctrl-group button { width: 30px; height: 30px; }
#area-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--gray-200); }
#area-map .maplibregl-ctrl-bottom-right { margin: 0 12px 12px 0; }
#area-map .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, 0.7); color: var(--gray-700); font-size: 10px; font-family: var(--font-body); padding: 2px 6px; }
#area-map .maplibregl-ctrl-attrib a { color: var(--gray-700); }
#area-map .maplibregl-ctrl-bottom-left { margin: 0 0 0 0; }
.area-map__fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 14px; color: var(--gray-700);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .districts { margin-top: 48px; grid-template-columns: 1fr; gap: 12px; }
  .district { aspect-ratio: 4 / 3; }
  .district__text { left: 28px; right: 28px; bottom: 28px; } /* 사진 안 글자 여백 24→28px */
  .district__name { font-weight: 400; } /* 제목 한 단계 두껍게(300→400) */
  .area-map { margin-top: 12px; }
  .area-map__frame { height: 320px; }
}

/* ------------------------------------------------------------------
   Partners
   ------------------------------------------------------------------ */
.partners {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.partner-tile {
  aspect-ratio: 3 / 2;
  background: white;
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.partner-tile p {
  text-align: center;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.62;
}
@media (max-width: 1000px) { .partners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .partners { margin-top: 28px; gap: 12px; } } /* 모바일: 파트너 제목과 로고 사이 40→28px */

/* ------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.contact__info { display: flex; flex-direction: column; gap: 32px; }
.contact__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 8px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.form__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-dark-muted);
  transition: color 200ms ease;
}
.form__field:focus-within .form__label { color: var(--on-dark); }

/* 어두운 바탕 입력칸: 밑줄 하나만 둔다. 초점이 가면 밑줄이 왼쪽에서 밝게 차오른다 */
.form__input {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  padding: 2px 0 14px; /* 위 여백 10px→2px: 라벨과 입력 글자 사이 16px→8px */
  border: none;
  border-radius: 0;
  color: var(--on-dark);
  background: transparent;
  width: 100%;
  border-bottom: 1px solid var(--on-dark-line);
  transition: border-color 200ms ease;
}
.form__field::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.form__field:focus-within::after { transform: scaleX(1); }
.form__input::placeholder { color: var(--on-dark-faint); opacity: 1; }
.form__input:focus { outline: none; }
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--color-ink) inset;
  transition: background-color 9999s ease-out;
}
.form__textarea { min-height: 96px; resize: none; overflow: hidden; }
.form__select {
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FAF9F6' stroke-width='1.2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  padding-right: 32px;
}
.form__select option { color: var(--color-ink); background: white; }

.form__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form__submit { padding-left: 32px; padding-right: 24px; }
.form__confirmation { font-size: 13px; color: var(--on-dark); }
.form__confirmation--error { color: var(--color-point); }
.form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 1000px) {
  .contact { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .contact__form { gap: 28px; }
  .form__row { grid-template-columns: 1fr; gap: 28px; }
  .form__input { font-size: 16px; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__submit { width: 100%; }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.footer {
  background: var(--color-ground);
  color: var(--color-ink);
  padding: 88px 0 40px;
  border-top: 1px solid var(--gray-200);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.footer__wordmark {
  font-family: var(--font-logo);
  font-size: clamp(20px, 3.5vw, 52px); /* 이전 크기의 절반 */
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 0.9;
  display: block;
}
.footer__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer__column-title { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a { font-size: 15px; font-weight: 300; color: var(--color-ink); transition: color 200ms ease; }
.footer__links a:hover { color: var(--color-key); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 300;
  color: var(--gray-500);
}
@media (max-width: 768px) {
  .footer { padding: 64px 0 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}

/* ------------------------------------------------------------------
   스크롤 등장
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pick img, .district img { transition: none; }
}

/* ------------------------------------------------------------------
   한국어 글자 자간 -4% (영어 화면은 그대로)
   한글이 보이는 요소만 덮어쓴다. 영문만 쓰는 곳(워드마크, 메뉴, 날짜·라벨 등)은 원래 값을 둔다.
   ------------------------------------------------------------------ */
html:lang(ko) body { letter-spacing: -0.04em; }
/* body 값을 그대로 물려받으면 16px 기준 px(-0.64px)로 고정된다. 자기 글자 크기 기준 -4%가 되게 요소마다 다시 계산한다.
   :where 로 우선순위를 0으로 둬서, 자간을 따로 정한 요소(영문 라벨 등)는 원래 값을 지킨다 */
:where(html:lang(ko) body *) { letter-spacing: -0.04em; }
html:lang(ko) .btn { letter-spacing: -0.04em; }
html:lang(ko) .hero__title { letter-spacing: -0.04em; }
html:lang(ko) .tier__name { letter-spacing: -0.04em; }
html:lang(ko) .tier-badge { letter-spacing: -0.04em; }
html:lang(ko) .step__label { letter-spacing: -0.04em; }
html:lang(ko) .pick__title { letter-spacing: -0.04em; }
html:lang(ko) .district__name { letter-spacing: -0.04em; }
html:lang(ko) .form__label { letter-spacing: -0.04em; }
html:lang(ko) .statement { letter-spacing: -0.04em; }

/* ------------------------------------------------------------------
   헤더·푸터 메뉴의 영문 글자 자간 -1% (KO·EN 화면, 모바일·데스크톱 모두)
   헤더 메뉴(About~Contact)·KO/EN 버튼, 모바일 메뉴, 푸터 Menu·Social 제목과 링크.
   협업 문의 버튼은 영어 화면에서만 영문(Partner with us)이라 영어 화면에만 준다.
   워드마크 THE HARPER는 로고라 원래 자간(0.08em)을 그대로 둔다.
   ------------------------------------------------------------------ */
.lang-toggle__button,
.footer__column-title,
.footer__links a,
html:lang(en) .header__cta,
html:lang(en) .mobile-menu__cta { letter-spacing: -0.01em; }
/* 헤더 메뉴 About~Contact(모바일 메뉴 같은 항목 포함)와 히어로 ‘Seoul, Curated by Editors’ 는 자간 0%.
   안쪽 글자(span)에 한국어 -4% 규칙이 직접 붙지 않게 자식까지 0 으로 둔다 */
.header__nav-link, .header__nav-link *,
.mobile-menu__link, .mobile-menu__link *,
.hero__sub, .hero__sub * { letter-spacing: 0; }