/* ═══════════════════════════════════════════════════════════════════════════
   HANUL — 스킨 피트니스 (가상 브랜드 디자인 템플릿)

   값의 정본은 디자인 초안 v1 이다:
   docs/requirements/_inbox/hanul-design-v1/HANUL.dc.html
   초안은 인라인 style 한 벌이라 여기서 클래스로 옮겼다. 색·크기·간격·모션 값은
   초안 그대로이고, 바꾼 것은 세 가지뿐이다 — 이유를 각 자리에 주석으로 남겼다:
     ① 대비가 모자란 조합을 다른 토큰으로 (아래 "색" 표)
     ② 동작하지 않는 상거래 요소는 hover 상태를 지운다 (눌러도 아무 일도 없으므로)
     ③ 고정 높이 → min-height (한국어 문구가 길어져도 잘리지 않게)

   모래(#f6f1ea) 위의 먹(#2a2622) · 모서리 0 · 그림자 0 · 1px 선.
   라이트 고정이다 (갤러리 전체가 라이트 고정이라 테마 토글이 없다).

   색 — 어디에 쓸 수 있는지는 대비가 정한다 (배경 #f6f1ea 기준):
     #2a2622 먹      13.4:1  전부
     #5b4f47 본문     7.0:1  전부. 모래면(#e9dccf) 위 5.9:1 도 통과
     #7a6659 보조     4.8:1  작은 글자 OK. 단 모래면 위에서는 4.0:1 이라 쓰지 않는다
     #9c8a7d 흐림     2.9:1  글자로 쓰지 않는다 — 선·비활성 막대에만 (어두운 면 위에서는 4.5:1 라 OK)
     #b07a63 포인트   3.2:1  글자로 쓰지 않는다 — 면·선·큰 숫자(≥24px)에만
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f6f1ea;
  --ink: #2a2622;
  --prose: #5b4f47;
  --sub: #7a6659;
  --faint: #9c8a7d;
  --sand: #e9dccf;
  --accent: #b07a63;
  --apricot: #e6cfc3;

  /* 어두운 면(철학·푸터) 전용 */
  --on-dark: #d9cfc6;
  --on-dark-strong: #f6f1ea;
  --accent-dark: #c9a893;

  --line: rgba(42, 38, 34, 0.1);
  --line-mid: rgba(42, 38, 34, 0.14);
  --line-strong: rgba(42, 38, 34, 0.3);
  --line-dark: rgba(246, 241, 234, 0.15);
  --line-dark-strong: rgba(246, 241, 234, 0.4);

  --font-display: "Libre Caslon Text", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;

  --text-hero: clamp(2.125rem, 5.4vw, 5.25rem);
  --text-h1: clamp(2.125rem, 4.6vw, 4.25rem);
  --text-h1-us: clamp(2.125rem, 5vw, 4.75rem);
  --text-h2: clamp(1.75rem, 3.4vw, 3rem);
  --text-h2-dark: clamp(1.875rem, 3.6vw, 3.375rem);
  --text-num: clamp(3.5rem, 9vw, 9.375rem);
  --text-lede: clamp(1.25rem, 2vw, 1.75rem);
  --text-price: 1.75rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-label: 0.75rem;
  --text-micro: 0.6875rem; /* 초안 값. 짧은 라틴 대문자 라벨에만 쓴다 */

  --page-x: clamp(16px, 3vw, 40px);
  --section-y: clamp(56px, 8vw, 120px);
  --header-h: 64px;
  --dur: 320ms;
}

/* ── 바탕 ─────────────────────────────────────────────────────────────────── */

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

html {
  font-family: var(--font-sans);
  /* 한국어 줄바꿈 품질은 이 둘에서 갈린다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

::selection {
  background: var(--apricot);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) ease;
}

a:hover {
  color: var(--accent);
}

s {
  color: var(--sub);
  font-size: var(--text-small);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  font-size: var(--text-small);
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.section {
  padding: var(--section-y) var(--page-x);
}

.eyebrow {
  font-size: var(--text-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sub);
}

.label {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.micro {
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lede {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--prose);
}

.measure {
  max-width: 38ch;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* 필터 칩이 카드를 숨길 때 쓴다. li 는 기본이 list-item 이라 한 번 못 박아 둔다. */
[hidden] {
  display: none !important;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 사진 ─────────────────────────────────────────────────────────────────────
   에셋이 들어왔다(2026-09-23). 사진은 전부 한 방식으로 붙는다 — **칸이 비율을 정하고
   사진은 그 칸을 덮는다**(cover). 사진마다 다른 규칙을 두면 폭이 바뀔 때마다 어긋난다.
   `width`/`height` 는 내려받기 전에도 자리를 잡으라고 적는다 (CLS 0 을 위해). */

.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 사진이 오기 전 한 박자는 모래색이다 — 흰 칸이 번쩍이지 않게. */
  background: var(--sand);
}

/* 칸이 절대 위치(히어로·철학·세트·Us 풀블리드)면 사진도 그 칸을 절대 위치로 덮는다. */
.shot-fill {
  position: absolute;
  inset: 0;
}

/* 4:5 칸 — 제품·제형 사진. 높이는 비율이 정하므로 100% 를 되돌린다. */
.shot-4x5 {
  aspect-ratio: 4 / 5;
  height: auto;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 0;
  font-family: inherit;
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  transition:
    background var(--dur) ease,
    color var(--dur) ease,
    border-color var(--dur) ease;
}

.btn-solid {
  background: var(--ink);
  color: var(--bg);
}

a.btn-solid:hover {
  background: var(--accent);
  color: var(--bg);
}

.btn-outline {
  padding: 0 24px;
  border: 1px solid rgba(42, 38, 34, 0.4);
}

a.btn-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-on-dark {
  border: 1px solid var(--line-dark-strong);
  color: var(--on-dark-strong);
}

a.btn-on-dark:hover {
  background: var(--bg);
  color: var(--ink);
}

/* 동작하지 않는 상거래 버튼 — 담기·결제·구독.
   hover 를 일부러 주지 않는다: 반응하는 것처럼 보이면 눌러 보게 되고, 눌러도 아무 일이
   없다. 모양(먹 면)은 초안 그대로 두어 디자인은 보여 주고, 커서와 바로 아래 한 줄이
   동작하지 않음을 말한다 (hover 로만 알려 주면 터치 기기에서는 알 길이 없다). */
.btn[disabled] {
  cursor: not-allowed;
}

.demo-note {
  font-size: var(--text-small);
  color: var(--sub);
}

/* ── 헤더 ─────────────────────────────────────────────────────────────────── */

.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--page-x);
  background: rgba(246, 241, 234, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42, 38, 34, 0.08);
}

.hd-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

.hd-nav a[aria-current="page"] {
  color: var(--ink);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* 마지막 글자의 자간까지 세어 가운데를 맞춘다 */
  line-height: 1;
}

.hd-bag {
  justify-self: end;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

/* 모바일은 2열 — 워드마크를 왼쪽으로 보내고 메뉴를 오른쪽에 모은다.
   3열을 유지하면 390px 에서 가운데 워드마크가 양쪽 메뉴에 눌려 찌그러진다. */
@media (max-width: 719px) {
  .hd {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .wordmark {
    order: -1;
    font-size: 1.125rem;
    /* 글자 높이는 18px 이다. 이 사이트의 홈 링크이므로 판을 44px 로 넓힌다. */
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .hd-nav {
    justify-content: flex-end;
    /* 이 사이트의 주 메뉴다. 11px·19px 짜리 글자는 읽기도 누르기도 모자랐다(실측).
       12px 으로 올리고 좌우 8px 을 덧대 44px 판을 만든다 — 셋을 합쳐도 161px 이라
       워드마크(104px)와 같은 줄에 358px 안에 들어간다. */
    gap: 6px;
    font-size: var(--text-label);
    margin-right: -8px; /* 마지막 항목의 덧댄 여백만큼 되돌려 글자를 오른쪽 끝에 맞춘다 */
  }

  .hd-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
  }

  .hd-bag {
    display: none; /* 메뉴와 같은 줄에 넣으면 390px 에서 줄바꿈이 난다 — 푸터에 같은 정보가 있다 */
  }
}

/* ── 히어로 ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* 초안은 height 고정이었다. 한국어 문구가 길어지면 잘려서 min-height 로 바꿨다. */
  min-height: min(92vh, 880px);
  display: flex;
  overflow: hidden;
  background: var(--sand);
}

/* 히어로만 767px 에서 갈라진다. 다른 모바일 규칙(헤더·철학·담기)의 기준은 719px 인데,
   저것들은 "메뉴가 한 줄에 들어가는가"가 기준이고 히어로는 "세로 화면인가"가 기준이다.
   720~767px 은 세로로 긴 작은 태블릿 — 거기서도 16:9 는 폭이 잘리므로 모바일 편성을 쓴다. */
@media (max-width: 767px) {
  /* 첫 화면을 채운다. 이전에는 min(125vw, 78svh) = 390px 폭에서 487px 이라 844px 화면의
     절반만 찼다 — 아래가 보이는 대신 히어로가 작아 첫인상이 약했다(사용자 피드백 2026-09-23).
     헤더를 뺀 나머지를 전부 준다. 원본이 16:9 라 폭은 크게 잘리지만, 잘리는 쪽은
     인물이 없는 배경이다 (아래 .hero-clip 의 object-position 이 정한다).
     560px 을 바닥으로 두는 이유: 그보다 짧으면 문구·버튼·챕터(합 ~500px)가 사진을 다 덮는다. */
  .hero {
    /* 바닥값을 640 으로 뒀더니 첫 화면이 ~590px 인 폰(주소창·툴바가 큰 브라우저)에서 챕터 라벨이
       화면 밖으로 잘렸다(사용자 실기기 2026-09-23). 히어로는 **첫 화면에 정확히 맞추고**, 짧은 화면은
       아래 높이 미디어쿼리가 문구를 단계적으로 줄여 대응한다. 520 은 320×568 급 옛 기기만 위한 바닥이다. */
    min-height: max(520px, 92vh); /* svh 를 모르는 브라우저용 — 바로 아래 줄이 정본 */
    min-height: max(520px, calc(100svh - var(--header-h)));
    /* 문구 블록(.hero-inner)을 내용 높이만큼만 바닥에 앉힌다 — 덮개를 그 블록에 붙이기 위해서다(아래). */
    align-items: flex-end;
  }
}

/* 영상 세 편이 같은 칸에 겹쳐 있고, 지금 편만 보인다. */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 인물·제품이 프레임 오른쪽 위쪽에 있다. 문구는 왼쪽 아래라 서로 비키게 둔다. */
  object-position: 70% 40%;
  opacity: 0;
  transition: opacity 600ms ease;
  background: var(--sand);
}

.hero-clip[data-current] {
  opacity: 1;
}

/* 세로 화면에서는 16:9 한 편의 **폭 28%만** 남는다(390×780 기준). 세로는 딱 맞게 덮이므로
   Y 는 아무것도 바꾸지 못하고(어떤 높이에서도 높이가 꽉 찬다), X 하나가 "얼굴이 보이느냐"를
   정한다. 데스크톱 값(70%)으로는 세 편 모두 얼굴이 왼쪽으로 치우쳐 한쪽이 잘렸다.
   74% 는 68·72·76·84 를 편마다 찍어 비교해 고른 값이다 — 세 편 모두 얼굴이 들어오고
   각 편의 소품(스포이트·화장솜·브러시)도 프레임에 남는다. 포스터는 같은 <video> 라 저절로 같다. */
@media (max-width: 767px) {
  .hero-clip {
    object-position: 74% 50%;
  }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(246, 241, 234, 0.92) 0%,
    rgba(246, 241, 234, 0.55) 34%,
    rgba(246, 241, 234, 0) 62%
  );
}

@media (max-width: 767px) {
  /* 세로에서는 문구가 영상 **위에** 얹힌다. 예전에는 이 덮개를 히어로 바닥에서 560px 위부터
     깔았는데, 실제 iOS Safari 는 주소창 때문에 svh 가 660~700 이라 히어로가 600px 안팎이 되고
     덮개가 얼굴까지 올라와 영상이 통째로 뿌옇게 보였다(사용자 실기기 스크린샷, 2026-09-23).
     헤드리스 844px 에서는 안 보이던 문제다. 그래서 덮개를 히어로가 아니라 **문구 블록**(.hero-inner)에
     붙인다 — 화면이 길든 짧든 문구가 앉는 자리만 덮고 그 위 영상은 그대로 둔다.
     여기 남는 것은 반투명 헤더와 사진의 경계용 띠 하나뿐이다. */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(246, 241, 234, 0.18) 0, rgba(246, 241, 234, 0) 72px);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 5vw, 72px);
  padding-top: calc(var(--header-h) + 24px);
}

@media (max-width: 767px) {
  /* 히어로 바닥 = 화면 바닥이다. 챕터 막대가 가장자리에 붙으면 누르기 어렵다.
     덮개는 이 블록의 배경이다(위 .hero-scrim 주석). 블록 위쪽 120px 은 ::before 로 서서히
     들어가서 경계선이 생기지 않는다. 얼굴이 블록 위에 오도록 문구 사이 간격도 데스크톱보다 좁다 —
     블록 높이를 ~370px 로 눌러야 640px 히어로에서 얼굴 자리 270px 이 남는다. */
  .hero-inner {
    padding-top: 12px;
    padding-bottom: 32px;
    /* 사용자 조정(2026-09-23 2차): 덮개를 더 짧고 옅게 — 위 0.42 → 아래 0.82, 페더 72px.
       먹(#2a2622) 제목·버튼은 가장 밝은 프레임(흰 탱크톱, 휘도 ~0.85) 위에서도 6:1 이상이고,
       본문(--prose)은 0.82 모래면 위에서 5:1 안팎이라 이 값이 읽히는 하한 근처다. */
    background: linear-gradient(
      180deg,
      rgba(246, 241, 234, 0.42) 0,
      rgba(246, 241, 234, 0.7) 72px,
      rgba(246, 241, 234, 0.82) 100%
    );
  }

  .hero-inner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 72px;
    background: linear-gradient(180deg, rgba(246, 241, 234, 0) 0, rgba(246, 241, 234, 0.42) 100%);
    pointer-events: none;
  }

}

/* 히어로의 eyebrow 만 --sub 대신 --prose 다. 이 파일 맨 위 대비표의 규칙 그대로다 —
   #7a6659 는 모래면 위에서 4.0:1 이라 쓰지 않는다. 그라디언트가 덮인 사진은 모래면과 같다.
   (자리표시자 위에서는 문제가 없었다. 사진이 들어오고 나서 드러난 것이다.) */
.hero .eyebrow {
  color: var(--prose);
}

.hero-title {
  font-size: var(--text-hero);
  line-height: 1.04;
  max-width: 13ch;
}

.hero-lead {
  margin-top: 22px;
  max-width: 38ch;
  color: var(--prose);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* 챕터 — 영상 세 편의 진행 막대. 막대가 차면 다음 편으로 넘어간다. */
.chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}

.chapter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 120px;
  /* 보이는 것은 막대 2px + 라벨 16px = 26px 뿐이다. 손가락에는 44px 이 필요하므로
     위아래로 9px 을 덧대고 같은 만큼 음수 마진으로 되돌린다 — 모양은 그대로, 판만 커진다. */
  padding: 9px 0;
  margin: -9px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--sub);
}

.chapter[aria-current="true"] {
  color: var(--ink);
}

.chapter-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(42, 38, 34, 0.18);
  overflow: hidden;
}

.chapter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 0.2s linear;
}

.chapter-label {
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  /* 390px 에서는 셋이 폭을 똑같이 나눈다. 고정 폭이면 "03 Eye & Lash" 만 두 줄이 된다. */
  .chapter {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* 모바일 히어로 문구 — 한 단계 작게(사용자 조정 2026-09-23). 블록이 ~310px 로 줄어 영상이 그만큼
   더 보인다. **이 블록은 위의 .hero-title·.hero-lead·.hero-cta·.chapters 기본 규칙보다 뒤에 있어야
   한다** — 특이성이 같아 순서가 우선순위다(앞에 뒀다가 조용히 무시된 적이 있다).
   본문 14px 은 이 템플릿 본문의 하한이다(--text-micro 는 짧은 라틴 라벨 전용). */
@media (max-width: 767px) {
  .hero .eyebrow {
    font-size: var(--text-micro);
    letter-spacing: 0.2em;
  }

  .hero-title {
    margin-top: 6px;
    font-size: 1.75rem;
    line-height: 1.1;
  }

  .hero-lead {
    margin-top: 12px;
    max-width: 32ch;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .hero-cta {
    margin-top: 18px;
  }

  .chapters {
    margin-top: 22px;
  }
}

/* 화면 높이에 따라 문구를 더 줄인다 — 기기별로 값을 관리하지 않기 위한 장치다.
   ≤720px(주소창 있는 iOS Safari 대부분): 블록 ~285px. ≤600px: 본문 문장을 접어 ~225px.
   어느 높이에서도 챕터 라벨이 첫 화면 안에 들어와야 한다(검증: 590·654·700·844). */
@media (max-width: 767px) and (max-height: 720px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .hero-lead {
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .hero-cta {
    margin-top: 14px;
  }

  .chapters {
    margin-top: 16px;
  }

  .hero-inner {
    padding-bottom: 24px;
  }
}

@media (max-width: 767px) and (max-height: 600px) {
  .hero-lead {
    display: none;
  }
}

/* ── 마키 ─────────────────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  gap: 56px;
  padding-right: 56px;
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sub);
  animation: hnMarquee 40s linear infinite;
}

@keyframes hnMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ── 섹션 머리 ─────────────────────────────────────────────────────────────── */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}

.section-head h1,
.section-head h2 {
  font-size: var(--text-h2);
  line-height: 1.1;
}

.section-note {
  font-size: var(--text-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ── 제품 카드 ────────────────────────────────────────────────────────────────
   마우스를 올리면 제품 사진이 제형(texture) 사진으로 넘어간다. 두 장이 같은 칸에
   겹쳐 있고 불투명도와 배율만 바뀐다 — 초안(HANUL.dc.html)의 imgScale/texOpacity 를
   그대로 CSS transition 으로 옮긴 것이다. */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

/* 카드 전체가 링크 하나다 — 사진·이름·가격이 같은 곳으로 가는데 링크를 셋으로 쪼개면
   스크린 리더가 같은 목적지를 세 번 읽는다. */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

a.pcard:hover {
  color: inherit;
}

.pcard-frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}

.pcard-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.5s ease,
    transform 1.2s ease;
}

.pcard-layer-tex {
  opacity: 0;
  transform: scale(1.08);
}

.pcard:hover .pcard-layer-base,
.pcard:focus-visible .pcard-layer-base {
  opacity: 0;
  transform: scale(1.06);
}

.pcard:hover .pcard-layer-tex,
.pcard:focus-visible .pcard-layer-tex {
  opacity: 1;
  transform: scale(1);
}

/* 단계 배지. 자리표시자 위에서는 먹색 글자 그대로였지만 사진 위에서는 읽히지 않았다
   (머리카락·중간톤에 그대로 묻혔다 — 2026-09-23 스크린샷으로 확인).
   `mix-blend-mode: difference` 는 사진에 따라 대비가 정해져 4.5:1 을 보장하지 못한다.
   그래서 오른쪽 아래 제형 배지와 **같은 모래색 띠**를 깐다 — 어떤 사진 위에서도 11:1 이상이고,
   카드 안의 배지 둘이 한 벌로 읽힌다. */
.pcard-step {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(246, 241, 234, 0.9);
  color: var(--ink);
}

.pcard-texbadge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(246, 241, 234, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease;
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pcard:hover .pcard-texbadge,
.pcard:focus-visible .pcard-texbadge {
  opacity: 1;
}

.pcard-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pcard-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.pcard-price {
  font-size: var(--text-small);
  color: var(--sub);
  white-space: nowrap;
}

.pcard-sub {
  margin-top: -8px;
  font-size: var(--text-small);
  color: var(--sub);
}

/* ── 철학 (어두운 2열) ────────────────────────────────────────────────────── */

.philosophy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  background: var(--ink);
  color: var(--on-dark-strong);
}

.phil-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: clamp(48px, 7vw, 110px) clamp(20px, 4vw, 72px);
}

.phil-body .eyebrow {
  color: var(--accent-dark);
}

.phil-body h2 {
  font-size: var(--text-h2-dark);
  line-height: 1.1;
}

.phil-body em {
  font-style: italic;
  color: var(--apricot);
}

.phil-list {
  display: grid;
  gap: 18px;
  max-width: 44ch;
  color: var(--on-dark);
  line-height: 1.7;
}

.phil-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
}

.phil-list li:last-child {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px;
}

.phil-list strong {
  padding-top: 5px;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-strong);
}

.phil-body .btn {
  align-self: flex-start;
}

.phil-shot {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

/* 가로(16:9) 사진이 세로로 긴 칸에 들어간다 — 어디를 남길지는 칸이 정한다.
   이 사진은 손과 제품이 오른쪽에 있다. */
.phil-shot .shot {
  object-position: 70% 50%;
}

@media (max-width: 719px) {
  .phil-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── 4단계 ───────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* 2열일 때만 붙어 있는다. 1열에서는 왼쪽 열이 아니라 **목록 바로 위**라, 붙으면
   "THE SKIN FITNESS SYSTEM / 4단계" 가 스크롤 내내 01·02 항목을 덮는다
   (390px 실측: 붙은 뒤 900px 동안 겹침, 사용자 스크린샷과 같음).
   `.steps` 가 2열이 되는 폭은 약 667px 이라 그 위에서만 켠다. */
@media (min-width: 700px) {
  .steps-sticky {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.big4 {
  margin-top: 12px;
  font-size: var(--text-num);
  line-height: 0.95;
}

.big4 span {
  font-size: 0.32em;
  vertical-align: top;
  margin-left: 0.2em;
  letter-spacing: 0;
}

.steps-sticky p {
  margin-top: 18px;
  max-width: 34ch;
  color: var(--prose);
}

.step-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--line-mid);
}

.step-n {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--accent); /* 22px 은 3:1 기준 미달이라 글자 자체가 정보를 지지 않게 한다 —
                            같은 번호가 바로 옆 라벨(Step 01 · Cleanse)에 글로 있다 */
}

.step-body {
  display: grid;
  gap: 8px;
}

.step-body .label {
  letter-spacing: 0.2em;
  color: var(--sub);
}

.step-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  /* 글자 높이 24px → 판 44px. 챕터 막대와 같은 수법(덧대고 되돌리기)이라 줄 간격은 그대로다. */
  padding: 10px 0;
  margin: -10px 0;
}

.step-body p {
  color: var(--prose);
}

/* ── Shop ─────────────────────────────────────────────────────────────────── */

.shop-head h1 {
  font-size: var(--text-h1);
  line-height: 1.05;
}

.shop-head .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap; /* 칩은 줄바꿈으로 흘린다 — 한 줄에 가두면 라벨이 잘린다 */
  gap: 10px;
}

.chip {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur) ease,
    color var(--dur) ease,
    border-color var(--dur) ease;
}

.chip:hover {
  border-color: var(--ink);
}

/* 초안의 36px 은 마우스 기준이다. 손가락에는 44px — 칩은 줄바꿈으로 흘러서 키워도 안전하다. */
@media (max-width: 719px) {
  .chip {
    height: 44px;
  }
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.chip-count {
  margin: 0 0 24px;
  font-size: var(--text-small);
  color: var(--sub);
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shop-card .btn {
  height: 44px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
}

.set {
  margin-top: var(--section-y);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  background: var(--sand);
}

.set-shot {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}

/* 세트 사진은 병이 더 오른쪽에 몰려 있다 — 철학 칸(70%)보다 조금 더 오른쪽을 남긴다. */
.set-shot .shot {
  object-position: 75% 50%;
}

.set-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px);
}

.set-body h2 {
  font-size: var(--text-h2);
  line-height: 1.1;
}

.set-body p {
  max-width: 40ch;
  color: var(--prose);
}

/* 모래면 위에서는 보조색(#7a6659)이 4.0:1 이라 본문색으로 내린다. */
.set-body .demo-note,
.set-body s {
  color: var(--prose);
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-price);
}

.size {
  font-size: var(--text-small);
  color: var(--sub);
}

.grid-cards + .demo-note {
  display: block;
  margin-top: 24px;
}

.set-body .btn {
  align-self: flex-start;
}

/* ── Us ───────────────────────────────────────────────────────────────────── */

.us-head {
  padding: clamp(48px, 8vw, 120px) var(--page-x) clamp(40px, 6vw, 80px);
  max-width: 1100px;
}

.us-head h1 {
  margin-top: 16px;
  font-size: var(--text-h1-us);
  line-height: 1.05;
}

.us-full {
  position: relative;
  min-height: min(70vh, 640px);
  overflow: hidden;
}

/* 390px 에서 591px 이면 16:9 사진의 폭 37% 만 남아 얼굴이 프레임 오른쪽에서 잘렸다
   (2026-09-23 실측). 칸을 낮춰 덜 확대하고, 얼굴이 있는 오른쪽을 남긴다 —
   철학 칸(70%)·세트 칸(75%)과 같은 방식이다. */
@media (max-width: 767px) {
  .us-full {
    min-height: min(60svh, 480px);
  }

  .us-full .shot {
    object-position: 68% 50%;
  }
}

.us-cols {
  padding: clamp(48px, 8vw, 120px) var(--page-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px);
}

.us-lede {
  font-family: var(--font-display);
  font-size: var(--text-lede);
  line-height: 1.45;
  text-wrap: pretty;
}

.us-body {
  display: grid;
  gap: 22px;
  color: var(--prose);
  line-height: 1.8;
}

.stats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line-mid);
  padding-top: 20px;
}

.stats dt {
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: var(--ink);
}

.stats dd {
  margin-top: 4px;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

.tex-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2px;
  padding: 0 var(--page-x) var(--section-y);
}

/* ── 제품 상세 ────────────────────────────────────────────────────────────── */

.pdp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.pdp-media {
  display: grid;
  gap: 2px;
  background: var(--sand);
  align-content: start;
}

.pdp-info {
  align-self: start;
  display: grid;
  gap: 24px;
  padding: clamp(32px, 5vw, 80px) clamp(20px, 4vw, 72px);
  max-width: 640px;
}

/* 사진 옆에 붙어 따라오는 건 **사진 옆에 있을 때**만 뜻이 있다. `.pdp` 는 420px 두 칸이
   들어가는 840px 부터 2열이다 — 스크롤바를 감안해 860px 부터 켠다.
   1열에서는 정보가 사진 아래로 내려가 붙을 자리가 없고, 내용이 화면보다 길어
   아무 일도 하지 않으면서 겹침 위험만 남는다. */
@media (min-width: 860px) {
  .pdp-info {
    position: sticky;
    top: var(--header-h);
  }
}

.crumb {
  /* Shop 으로 돌아가는 유일한 길이다 — 글자는 12px 이라도 판은 44px 이어야 한다. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub);
}

.pdp-info h1 {
  font-size: clamp(2rem, 3.8vw, 3.5rem);
}

.pdp-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--prose);
}

.pdp-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 수량 조절 — 표현만 남긴다. 담기가 없으니 셀 것도 없다. */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  height: 52px;
  color: var(--sub);
}

.qty button {
  width: 44px;
  height: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.125rem;
  color: inherit;
  cursor: not-allowed;
}

.qty-value {
  width: 28px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink);
}

.pdp-buy .btn {
  flex: 1;
  height: 52px;
  min-width: 220px;
}

@media (max-width: 719px) {
  /* 수량 옆에 두면 "장바구니에 담기 · 62,000원" 이 두 줄로 접힌다. 한 줄을 통째로 준다. */
  .pdp-buy .btn {
    flex: 1 1 100%;
  }
}

.acc {
  display: grid;
  border-top: 1px solid var(--line-mid);
}

.acc details {
  border-bottom: 1px solid var(--line-mid);
}

.acc summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc summary .sign {
  color: var(--sub);
}

.acc details[open] summary .sign::after {
  content: "−";
}

.acc summary .sign::after {
  content: "+";
}

.acc p {
  margin-bottom: 20px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--prose);
}

.others {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.others .label {
  letter-spacing: 0.2em;
  color: var(--sub);
}

.others-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.others-grid a {
  display: grid;
  gap: 8px;
  font-size: var(--text-label);
  line-height: 1.4;
}

/* ── 푸터 ─────────────────────────────────────────────────────────────────── */

.ft {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(48px, 6vw, 80px) var(--page-x) 32px;
  display: grid;
  gap: 48px;
}

.ft a {
  color: var(--on-dark);
}

.ft a:hover {
  color: var(--on-dark-strong);
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
}

.ft-col {
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: var(--text-small);
}

.ft-brand {
  gap: 16px;
}

.ft-brand .wordmark {
  font-size: 1.75rem;
  color: var(--on-dark-strong);
}

.ft-brand p {
  max-width: 30ch;
  line-height: 1.7;
}

.ft-col .micro {
  color: var(--faint); /* 어두운 면 위 4.5:1 */
  letter-spacing: 0.2em;
}

/* 모바일에서 푸터는 1열이다 — 링크 아홉 개가 23px 높이로 12px 씩 떨어져 세로로 쌓인다.
   줄 간격을 줄이고 그만큼 링크에 덧대면, 자리는 그대로인데 판만 44px 이 된다.
   `nav.ft-col` 로 좁힌 이유: 브랜드 칸(gap 16px)과 뉴스레터 칸에는 링크가 없다. */
@media (max-width: 719px) {
  .ft-grid nav.ft-col {
    gap: 0;
  }

  .ft-grid nav.ft-col .micro {
    margin-bottom: 6px;
  }

  .ft-grid nav.ft-col a {
    display: block;
    padding: 11px 0; /* 23px 글자 + 22px = 45px */
  }
}

.ft .demo-note {
  color: var(--faint);
}

/* 뉴스레터 — <form> 도 <input> 도 없다. 같은 모양의 정적 표현이다
   (CSP 의 form-action 이 none 이고 보낼 곳도 없다). */
.ft-news-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(246, 241, 234, 0.35);
  padding: 10px 0;
}

.ft-news-field {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--faint);
}

.ft-news-btn {
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-strong);
}

.ft-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(246, 241, 234, 0.12);
  padding-top: 20px;
  font-size: var(--text-label);
  color: var(--faint);
}

/* 갤러리로 돌아가는 링크 — 21px 짜리 한 줄이라 덧대서 판을 44px 로 만든다. */
.ft-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;
}

/* 가상 브랜드 고지 — 이 사이트에서 가장 중요한 한 줄이다. 마지막에, 그러나 읽히게. */
.ft-notice {
  max-width: 78ch;
  color: var(--on-dark);
  line-height: 1.7;
}

/* ── 모션을 원하지 않는 사람 ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .chapter-fill {
    transition: none;
  }

  .pcard-layer,
  .pcard-texbadge,
  .hero-clip,
  .btn,
  a {
    transition: none;
  }
}