/* 산의선물 web-v2 — 방향 1 "새벽 과수원" (G1 승인 2026-07-13) */
* { margin:0; padding:0; box-sizing:border-box; }

/* 서체 2종 모두 서브셋 self-host (가변 wght·현재 페이지 글자 기준·카피 추가 시 재서브셋 필수 = assets-src/README-resubset.md) */
@font-face {
  font-family:"Noto Serif KR";
  src:url("../fonts/noto-serif-kr-subset.woff2") format("woff2");
  font-weight:200 900;
  font-display:swap;
}
@font-face {
  font-family:"Pretendard Variable";
  src:url("../fonts/pretendard-subset.woff2") format("woff2");
  font-weight:45 920;
  font-display:swap;
}

:root {
  --cream:#F4EFE3;
  --green:#2C5530;
  --green-deep:#1E3B21;
  --red:#C0392B;
  --ink:#26301F;
  --dawn:#101813;          /* 새벽 바탕 — 초록이 섞인 깊은 어둠 */
  --white-90:rgba(250,250,246,.92);
  --white-70:rgba(250,250,246,.72);
  --white-45:rgba(250,250,246,.45);
  --serif:"Noto Serif KR", "Apple SD Gothic Neo", serif;
  --sans:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
}

/* ★html에도 배경을 칠한다 — body만 칠하면 html은 투명(브라우저 기본 흰색)으로 남는다.
   모바일에서 주소창이 접히거나 스크롤이 끝에서 튕길 때(overscroll) 그 흰색이 뚫고 나와
   어두운 사이트에 흰 줄로 보인다. 섹션 사이 서브픽셀 틈에서도 같은 일이 난다.
   보스 실측 지적: "첫 페이지에서 두 번째로 넘길 때 하얀 빈 공간". */
html {
  scroll-behavior:smooth;
  background:var(--dawn);
  overscroll-behavior-y:none;   /* 끝에서 튕겨 흰 바탕이 드러나는 것 차단 */
}
body {
  font-family:var(--sans);
  background:var(--dawn);
  color:var(--white-90);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
/* 배경 이미지가 아직 안 뜬 구간에서도 어둠이 깔려 있게 — 이미지 지연 로딩 중 흰 틈 차단 */
.hero, .climb, .climb-stage, .summit, .harvest, .season { background-color:var(--dawn); }

/* ── 헤더 ───────────────────────────── */
.header {
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  background:linear-gradient(rgba(10,14,11,.42), transparent);
  transition:background .35s ease, backdrop-filter .35s ease;
}
/* 히어로를 벗어나면 헤더가 굳는다 — 고정 헤더 아래로 본문이 계속 지나가므로
   투명한 채로 두면 글자가 로고를 관통한다(모바일 실측: 꿀심 약속 목록이 로고 위에 겹침).
   패딩으로는 못 막는다 — 섹션 시작점만 밀 뿐 스크롤 중간은 그대로 지나가기 때문. */
.header.is-solid {
  background:rgba(10,14,11,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.brand img { display:block; height:34px; width:auto; }
.order-cta {
  font-size:.85rem; letter-spacing:.08em; text-decoration:none;
  color:var(--white-90); border:1px solid var(--white-45);
  padding:.66rem 1.25rem; border-radius:2px;
  transition:background .25s, color .25s, border-color .25s;
  min-height:44px; display:inline-flex; align-items:center;
}
.order-cta:hover, .order-cta:focus-visible { background:var(--white-90); color:var(--green-deep); border-color:var(--white-90); }

/* ── 고도계 (시그니처) ─────────────── */
.altimeter {
  position:fixed; right:clamp(.9rem, 2.4vw, 2.2rem); top:50%; transform:translateY(-50%);
  z-index:30; display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-variant-numeric:tabular-nums; color:var(--white-70); font-size:.72rem; letter-spacing:.14em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.alt-track {
  position:relative; width:2px; height:34vh; min-height:180px;
  background:rgba(250,250,246,.22); border-radius:1px; overflow:visible;
}
.alt-fill {
  position:absolute; left:0; bottom:0; width:100%; height:0%;
  background:linear-gradient(to top, var(--red), #E8B23A);
  border-radius:1px;
}
.alt-mark { position:absolute; left:-3px; width:8px; height:1px; background:rgba(250,250,246,.4); }
.alt-now b { font-weight:700; color:var(--white-90); font-size:.95rem; }

/* ── 히어로 (0m·새벽 과수원 영상) ──── */
.hero { position:relative; height:100vh; height:100svh; overflow:hidden; }
.hero-fallback, .hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
}
.hero-video { opacity:0; transition:opacity .9s ease; }
.hero-video.is-playing { opacity:1; }
.hero-shade {
  position:absolute; inset:0;
  background:
    /* 맨 아래를 거의 완전한 어둠까지 끌어올린다 — 다음 구간(등반)이 어둠에서 솟아오르듯 이어지게.
       이전에는 하단 .78에서 끝나 등반 이미지의 밝은 운해와 딱 부딪혔다(보스 지적: "이미지와 이미지가 매끄럽게 연결되지 않는다"). */
    linear-gradient(to top, rgba(10,14,11,.97) 0%, rgba(10,14,11,.72) 12%, rgba(10,14,11,.28) 36%, rgba(10,14,11,.08) 60%, rgba(10,14,11,.30) 100%);
}
/* 등반 배경 상단도 어둠에서 밝아오게 — 히어로 하단의 어둠과 만나 이음매가 녹는다.
   (계절 구간 .season::after의 어둠 브리지와 같은 문법 — 전환은 늘 어둠을 거친다.) */
.climb-bg::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,14,11,.96) 0%, rgba(10,14,11,.55) 7%, rgba(10,14,11,0) 20%);
}
.hero-copy {
  position:absolute; left:clamp(1.2rem, 5vw, 4rem); bottom:clamp(5.5rem, 13vh, 8.5rem);
  max-width:34rem;
}
.eyebrow {
  font-size:.78rem; letter-spacing:.22em; color:var(--white-70); margin-bottom:1.1rem;
}
.hero-copy h1 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 4.4vw, 3.4rem); line-height:1.28;
  color:var(--white-90); text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-copy .dot, .climb-close .dot { color:var(--red); }
.hero-copy .sub {
  margin-top:1.15rem; font-size:clamp(.92rem, 1.4vw, 1.02rem);
  line-height:1.85; color:var(--white-70);
}
.hero-cue {
  position:absolute; right:clamp(1.2rem, 5vw, 4rem); bottom:clamp(1.4rem, 4vh, 2.6rem);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--white-70); font-size:.74rem; letter-spacing:.18em;
  padding:.5rem; min-height:44px;
}
.cue-label { color:var(--white-90); font-weight:600; }
.cue-line { width:1px; height:42px; background:linear-gradient(var(--white-70), transparent); position:relative; overflow:hidden; }
.cue-line::after {
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--red); animation:cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop { 0%{top:-40%} 55%{top:100%} 100%{top:100%} }
.cue-hint { font-size:.68rem; letter-spacing:.12em; }

/* 히어로 진입 리빌 (~1s·CSS만·from-only라 reduced-motion 시 최종 상태) */
@media (prefers-reduced-motion: no-preference) {
  .eyebrow        { animation:rise .8s .15s cubic-bezier(.22,.8,.36,1) both; }
  .hero-copy h1   { animation:rise .9s .3s  cubic-bezier(.22,.8,.36,1) both; }
  .hero-copy .sub { animation:rise .9s .5s  cubic-bezier(.22,.8,.36,1) both; }
  .hero-cue       { animation:fadeIn 1s .9s both; }
  @keyframes rise   { from { opacity:0; transform:translateY(26px); } }
  @keyframes fadeIn { from { opacity:0; } }
}

/* ── 등반 1구간 (0→250m·핀 스크럽) ── */
.climb { position:relative; background:var(--dawn); }
.climb-stage { position:relative; height:100vh; height:100svh; overflow:hidden; }
.climb-bg { position:absolute; inset:0; display:block; }
.climb-bg img {
  /* ★transform은 GSAP가 단독 소유 — CSS translate를 함께 쓰면 이중 합성된다.
     여기서 translateX(-50%)를 쓰고 GSAP도 xPercent:-50을 주면 합쳐져 -100%가 되어
     이미지가 화면 밖으로 반쯤 밀려난다(768폭에서 화면 우측 절반이 빈 어둠으로 실측·저지 적발).
     회차 52에 y축에서 같은 결함을 고쳤는데 x축에 남아 있었다 — 중앙 정렬은 transform이 아니라
     margin으로 잡는다(margin %는 부모 폭 기준이므로 width:110%의 절반인 -5%가 정중앙). */
  position:absolute; left:0; top:0; width:110%; height:auto;
  margin-left:-5%;
  will-change:transform;
}
.mist { position:absolute; inset:-10% -5%; pointer-events:none; will-change:transform, opacity; }
.mist-a { background:linear-gradient(168deg, transparent 30%, rgba(216,226,222,.16) 52%, transparent 74%); }
.mist-b { background:linear-gradient(190deg, transparent 42%, rgba(216,226,222,.10) 60%, transparent 82%); }
.climb-stage::after {  /* 판독 보조 어둠 */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(10,14,11,.55) 0%, rgba(10,14,11,.22) 45%, rgba(10,14,11,.08) 100%);
}
.climb-steps { position:absolute; inset:0; z-index:2; }
.step {
  position:absolute; left:clamp(1.2rem, 6vw, 5rem); top:50%; transform:translateY(-50%);
  max-width:30rem;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.35rem, 2.7vw, 2.15rem); line-height:1.62;
  color:var(--white-90); text-shadow:0 2px 20px rgba(0,0,0,.5);
  opacity:0;
}
.step strong { font-weight:700; color:#F2C94C; }
.s3 strong { color:#EFB6A5; }
.climb-close {
  position:absolute; left:0; right:0; bottom:clamp(1.6rem, 6vh, 3.4rem); z-index:4;
  text-align:center; font-family:var(--serif); font-size:clamp(1rem, 1.8vw, 1.3rem);
  color:var(--white-90); opacity:0; text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* 어둠 브리지 — 핀 사이 이음매를 "고개를 넘는 순간"으로 (데스크톱 전용) */
.bridge {
  position:absolute; inset:0; z-index:3; background:var(--dawn);
  opacity:0; pointer-events:none; will-change:opacity;
}
.bridge-c2 { opacity:1; }   /* 등반 2는 어둠에서 시작해 봄이 밝아온다 */

/* ── 등반 2구간 (250→500m·계절 크로스페이드) ── */
.seasons .climb-stage { background:var(--dawn); }
.season { position:absolute; inset:0; margin:0; opacity:0; }
.season.sn-spring { opacity:1; }              /* 시작 레이어 */
.season img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; will-change:transform, opacity;
}
.season .scap {
  position:absolute; left:clamp(1.2rem, 6vw, 5rem); bottom:clamp(4.2rem, 12vh, 7rem); z-index:2;
  max-width:30rem; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.35rem, 2.6vw, 2.05rem); line-height:1.6;
  color:var(--white-90); text-shadow:0 2px 20px rgba(0,0,0,.55);
  opacity:0;
}
.season .scap strong { font-weight:700; color:#EFB6A5; }
.scap-sub { display:block; margin-top:.7rem; font-family:var(--sans); font-size:.85rem; letter-spacing:.06em; color:var(--white-70); }
.season-intro {
  position:absolute; left:0; right:0; top:44%; z-index:4; text-align:center;  /* 브리지(z3) 위 */
  font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  color:var(--white-90); text-shadow:0 2px 20px rgba(0,0,0,.5); opacity:0;
}
.seasons .climb-stage::after { background:linear-gradient(to top, rgba(10,14,11,.42) 0%, rgba(10,14,11,.06) 40%, rgba(10,14,11,.18) 100%); }

/* ── 정상 (꿀심) ───────────────────── */
.summit { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:center; }
.summit-fallback, .summit-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.summit-video { opacity:0; transition:opacity .9s ease; }
.summit-video.is-playing { opacity:1; }
.summit-shade {
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,12,4,.72) 0%, rgba(20,12,4,.38) 46%, rgba(20,12,4,.06) 75%);
}
.summit-copy { position:relative; z-index:2; padding:6rem clamp(1.2rem, 6vw, 5rem); max-width:36rem; }
.summit-copy h2 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 3.4vw, 2.7rem); line-height:1.42;
  color:var(--white-90); margin-top:1rem; text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.promises { list-style:none; margin-top:2.2rem; display:grid; gap:1.05rem; }
.promises li { display:grid; grid-template-columns:7.2rem 1fr; gap:.9rem; align-items:baseline; }
.promises b { font-size:.92rem; letter-spacing:.06em; color:#F2C94C; font-weight:700; }
.promises span { font-size:.92rem; line-height:1.75; color:var(--white-90); text-shadow:0 1px 12px rgba(0,0,0,.5); }

/* ── 하산 (후기·신뢰) ──────────────── */
.harvest { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.harvest-bg { position:absolute; inset:0; }
.harvest-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.harvest-shade { position:absolute; inset:0; background:rgba(14,11,6,.5); }
.harvest-copy { position:relative; z-index:2; max-width:46rem; text-align:center; padding:6rem 1.4rem; }
.harvest-copy blockquote {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.3rem, 2.6vw, 2.05rem); line-height:1.7;
  color:var(--white-90); text-shadow:0 2px 22px rgba(0,0,0,.55);
}
.harvest-copy .who { margin-top:1.3rem; font-size:.82rem; letter-spacing:.08em; color:var(--white-70); }
.creds {
  list-style:none; margin-top:2.6rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
}
.creds li {
  font-size:.8rem; letter-spacing:.05em; color:var(--white-90);
  border:1px solid rgba(250,250,246,.35); border-radius:2rem;
  padding:.55rem 1.05rem; background:rgba(10,14,11,.35); backdrop-filter:none;
}
.creds b { color:#F2C94C; font-weight:700; }

/* ── 도착 (구매) ───────────────────── */
.order { background:linear-gradient(#0F1713, #0C120E); padding:7rem clamp(1.2rem, 6vw, 5rem) 6rem; }
.order-head { text-align:center; max-width:40rem; margin:0 auto; }
.order-head h2 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.5; color:var(--white-90); margin-top:1rem;
}
.order-cards {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.3rem;
  max-width:64rem; margin:3.4rem auto 0;
}
.ocard { background:rgba(250,250,246,.045); border:1px solid rgba(250,250,246,.12); border-radius:4px; overflow:hidden; }
.ocard img { width:100%; height:230px; object-fit:cover; display:block; filter:saturate(.9) contrast(.98) brightness(.93); }
.ocard h3 { font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--white-90); padding:1.15rem 1.2rem .35rem; }
.ocard p { font-size:.85rem; line-height:1.75; color:var(--white-70); padding:0 1.2rem 1.3rem; }
.order-big-cta {
  display:block; width:fit-content; margin:3.2rem auto 0;
  font-size:1rem; letter-spacing:.1em; text-decoration:none; font-weight:700;
  color:#14100A; background:#F2C94C; padding:1.05rem 2.4rem; border-radius:2px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.order-big-cta:hover, .order-big-cta:focus-visible { transform:translateY(-2px); box-shadow:0 14px 34px rgba(242,201,76,.22); }
.order-note { text-align:center; margin-top:1.1rem; font-size:.78rem; letter-spacing:.06em; color:var(--white-45); }

.footer {
  background:#0C120E; padding:2.2rem clamp(1.2rem, 5vw, 4rem) 2.6rem;
  font-size:.8rem; line-height:1.9; color:var(--white-70);
}
/* 푸터 링크 — 문장 속 인라인 링크는 높이가 글줄만큼(15px)밖에 안 돼 손가락으로 누르기 어렵다.
   WCAG 2.2 SC 2.5.8(AA)은 24×24px 최소를 요구한다. 인라인 링크의 표준 처방 = 세로 패딩으로 눌리는 면적 확보
   (줄 간격을 해치지 않도록 inline-block + 음수 마진 없이 padding만). */
.footer a {
  color:var(--white-90);
  display:inline-block;
  padding:.42rem .1rem;   /* 위아래 여유로 탭 높이 24px+ 확보 */
  min-height:24px;
}
.footer .fine { font-size:.72rem; margin-top:.4rem; color:rgba(250,250,246,.62); }

/* ── 모바일 (핀 없이 순차 리빌·기획서 §5) ── */
@media (max-width:760px) {
  .altimeter { right:.7rem; }
  .alt-track { height:22vh; min-height:120px; }
  .hero-copy { bottom:10.5rem; right:1.2rem; }
  /* 히어로 크롭 — 사과만 꽉 차면 "해발 500m 고산"이라는 서사가 죽는다.
     원경(운해·산맥)이 상단에 남도록 가로는 중앙 쪽으로, 세로는 위쪽을 살린다. */
  .hero-fallback, .hero-video { object-position:58% 32%; }
  .hero-cue { right:auto; left:1.2rem; bottom:1.2rem; align-items:flex-start; }
  .cue-line { height:28px; }
  .climb-stage { height:auto; overflow:visible; }
  /* ★가로 오버플로 차단 — 배경 이미지가 min-width:115%로 뷰포트를 넘어서므로
     담는 상자가 반드시 잘라내야 한다(없으면 페이지가 좌우로 밀린다·실측 557px vs 390px). */
  .climb-bg { position:sticky; top:0; height:100svh; overflow:hidden; }
  .climb-bg img { left:50%; top:50%; width:auto; height:115%; min-width:115%; transform:translate(-50%,-50%); }
  .climb-steps { position:relative; inset:auto; padding:22svh 0; }
  .step {
    position:relative; top:auto; transform:none; opacity:1;
    margin:0 auto 62svh 1.4rem; width:fit-content; max-width:calc(100% - 4.6rem);
    background:rgba(10,14,11,.52); padding:1.15rem 1.35rem; border-radius:3px;
  }
  .step:last-child { margin-bottom:0; }
  .climb-close { position:relative; bottom:auto; opacity:1; padding:3rem 0 3.6rem; }
  .mist { display:none; }
  .bridge { display:none; }   /* 모바일 = 핀 없음·브리지 불요 */

  /* 등반 2 — 핀 없이 계절 순차 스택 */
  .seasons .climb-stage { height:auto; }
  .season { position:relative; inset:auto; opacity:1; height:100svh; overflow:hidden; }
  .season img { position:absolute; }
  /* ★계절 이음매 = 어둠 브리지의 모바일판 (데스크톱은 핀+브리지로 한 장씩 보여주지만
     모바일은 스택이라 두 계절이 한 화면에 반반으로 걸린다 — 위아래 끝을 어둠으로 녹여 경계를 지운다.
     회차 52에 보스가 지적한 "250m 반반 화면"과 같은 결함의 모바일 재발분.) */
  .season::after {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(to bottom,
      rgba(10,14,11,.92) 0%, rgba(10,14,11,.30) 14%,
      rgba(10,14,11,0) 34%, rgba(10,14,11,0) 62%,
      rgba(10,14,11,.34) 84%, rgba(10,14,11,.92) 100%);
  }
  /* ★카피는 자기 계절 이미지의 세로 중앙에 둔다.
     하단(bottom)에 두면 스크롤이 전환 구간에 들어섰을 때 카피만 화면 위에 남고
     화면 대부분은 이미 다음 계절 그림이 된다 — "천천히 여물고,"(여름) 아래에 붉은 사과(가을)가
     붙는 결함으로 실측됐다(저지 적발). 중앙에 두면 카피와 그림이 늘 함께 움직여 짝이 어긋나지 않는다. */
  .season .scap {
    opacity:1; left:1.4rem; right:auto; bottom:auto; top:50%; transform:translateY(-50%);
    max-width:calc(100% - 4.6rem);
    background:rgba(10,14,11,.52); padding:1.05rem 1.25rem; border-radius:3px; width:fit-content;
    z-index:2;
  }
  .season-intro { position:relative; top:auto; opacity:1; padding:3.4rem 1.4rem 2.6rem; order:-1; }
  .seasons .climb-stage { display:flex; flex-direction:column; }
  .seasons .climb-stage::after { display:none; }
  .c2-close { position:relative; }

  .summit { min-height:auto; }
  /* ★제목이 헤더 로고와 겹침 방지 — 헤더가 position:fixed라 어떤 콘텐츠든 그 아래를 지나간다.
     데스크톱은 여백이 넓어 안 겹쳤을 뿐이고, 모바일에선 첫 줄이 로고 위로 올라탔다(실측). */
  .summit-copy { padding:7.5rem 1.4rem 5rem; }
  .promises li { grid-template-columns:1fr; gap:.25rem; }
  .order-cards { grid-template-columns:1fr; max-width:26rem; }
  /* 주문 섹션 첫 카드도 헤더에 물리지 않도록 */
  .order { padding-top:6.5rem; }
}

/* ── reduced-motion: 전부 즉시 표시 ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .step, .climb-close, .season .scap, .season-intro { opacity:1 !important; transform:none !important; }
  .step { position:relative; transform:none; top:auto; margin:12vh clamp(1.2rem,6vw,5rem); }
  .climb-stage { height:auto; }
  .climb-bg { position:sticky; top:0; height:100vh; }
  .seasons .climb-stage { display:flex; flex-direction:column; }
  .season { position:relative; inset:auto; opacity:1 !important; height:88vh; }
  .season-intro { position:relative; top:auto; padding:3rem 1.4rem; order:-1; }
  .seasons .climb-stage::after { display:none; }
  .c2-close { position:relative; }
  .bridge { display:none; }
  .summit-video, .hero-video { display:none; }
  .cue-line::after { animation:none; }
}