/* ============================================================
   연담 緣談 YEONDAM — Vancouver Premium Matchmaking
   main.css  ·  design tokens + hero + section scaffold
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand — sampled from the 연담 logo */
  --ink:        #1B2436;
  --ink-soft:   #3B465C;
  --ink-mute:   #6B7488;
  --red:        #B0392C;   /* 행동 유도(CTA) 전용 */
  --red-deep:   #8E2A20;
  --gold:       #E3C68F;   /* 샴페인 — 어두운 배경·영상 위 */
  --gold-deep:  #A9895C;   /* 같은 계열의 진한 금색 — 크림 배경 위 */
  --cream:      #FEFCF7;
  --cream-deep: #F6F1E7;
  --paper:      #FBF6E8;   /* 02 섹션 — 조금 더 따뜻한 종이색 */
  --night:      #0B1E33;   /* 03 섹션 — 저녁 남색 */
  --sand:       #F2EADD;   /* 04 섹션 — 상담실 벽의 따뜻한 아이보리 */
  --bronze:     #8C6B43;   /* 04 섹션 강조 — 모래빛 위에서 읽히는 청동색 */
  --line:       rgba(27,36,54,.14);

  /* 영상 위에 얹는 글자색 — 순백 대신 따뜻한 아이보리 */
  --ivory:      #F4ECE0;
  --ivory-en:   #E8DAC4;

  /* type
     고운바탕에는 한자 글리프가 없습니다. 스택 2순위의 본명조가
     緣談만 받아내므로, 한글은 고운바탕 · 한자는 본명조로 고정됩니다.
     (순서를 바꾸거나 본명조를 빼면 기기마다 한자 모양이 달라집니다) */
  --serif-kr: "Gowun Batang", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --serif-en: "Cormorant Garamond", Georgia, serif;
  --sans-kr:  "Noto Sans KR", Pretendard, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --shell: 1240px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans-kr);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;      /* proper Korean line-breaking */
  overflow-wrap:break-word;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* ============================================================
   3. NAV — transparent over hero, solid on scroll
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.15rem var(--gut);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav::before{                            /* readability scrim over video */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(12,17,28,.55), rgba(12,17,28,0));
  transition:opacity .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(254,252,247,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.75rem;
}
.nav.is-stuck::before{opacity:0;}

/* 로고 잠금 — 연담 緣談 │ YEONDAM / 결혼정보회사
   로고 이미지를 쓰지 않고 글자로 짰습니다. 영문판을 만들 때도 그대로 쓰고,
   영상 위(투명 내비)와 크림 배경(스크롤 후) 두 상태에서 색만 바뀝니다. */
.nav__brand{display:flex;align-items:center;gap:.62rem;line-height:1;}
.nav__lock{display:flex;align-items:baseline;gap:.45rem;}
.nav__mark{
  font-family:var(--serif-kr); font-size:1.45rem; font-weight:700;
  letter-spacing:.06em; color:var(--ivory);
}
.nav__hanja{font-family:var(--serif-kr);font-size:.9rem;color:var(--gold);letter-spacing:.1em;}

/* 세로 구분선 */
.nav__bar{
  width:1px;height:1.6rem;flex:none;
  background:rgba(244,236,224,.34);
  transition:background .45s var(--ease);
}
.nav__id{display:flex;flex-direction:column;gap:.3rem;}
.nav__en{
  font-family:var(--serif-en);font-size:.72rem;font-weight:500;
  letter-spacing:.26em;color:var(--gold);
}
.nav__kind{
  font-family:var(--serif-kr);font-size:.66rem;
  letter-spacing:.13em;color:rgba(244,236,224,.8);
}

.nav.is-stuck .nav__mark{color:var(--ink);}
.nav.is-stuck .nav__hanja{color:var(--red);}
.nav.is-stuck .nav__bar{background:rgba(27,36,54,.2);}
.nav.is-stuck .nav__en{color:var(--red);}
.nav.is-stuck .nav__kind{color:var(--ink-soft);}

.nav__menu{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.nav__link{
  position:relative; font-size:.9rem; letter-spacing:.02em;
  color:rgba(244,236,224,.9); padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .35s var(--ease);
}
.nav__link:hover::after{width:100%;}
.nav__link[aria-current="page"]{color:var(--gold);}
.nav__link[aria-current="page"]::after{width:100%;}
.nav.is-stuck .nav__link[aria-current="page"]{color:var(--red);}
.nav.is-stuck .nav__link{color:var(--ink-soft);}
.nav.is-stuck .nav__link:hover{color:var(--red);}

.nav__lang{font-size:.75rem;letter-spacing:.14em;color:rgba(244,236,224,.62);}
.nav.is-stuck .nav__lang{color:var(--ink-mute);}
.nav__lang b{color:var(--ivory);font-weight:600;}
.nav.is-stuck .nav__lang b{color:var(--ink);}

.nav__cta{
  font-size:.85rem; letter-spacing:.02em; padding:.6rem 1.2rem;
  border:1px solid rgba(244,236,224,.5); border-radius:999px; color:var(--ivory);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.nav__cta:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory);}
.nav.is-stuck .nav__cta{background:var(--red);border-color:var(--red);color:#fff;}
.nav.is-stuck .nav__cta:hover{background:var(--red-deep);border-color:var(--red-deep);}

.nav__burger{display:none;width:26px;height:16px;position:relative;flex:none;}
.nav__burger span{position:absolute;left:0;right:0;height:1.5px;background:var(--ivory);transition:.3s var(--ease);}
.nav__burger span:nth-child(1){top:0;}
.nav__burger span:nth-child(2){top:7px;}
.nav__burger span:nth-child(3){top:14px;}
.nav.is-stuck .nav__burger span{background:var(--ink);}

/* ============================================================
   4. HERO — full-bleed video
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;            /* svh = no jump when the mobile URL bar hides */
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}

/* -- 4a. media layer -- */
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media video,
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 55%;   /* keeps the couple in frame when cropped */
}

/* -- 4b. scrims: gradients tuned to this specific frame -- */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero__scrim--copy{             /* left column legibility */
  background:linear-gradient(100deg,
    rgba(14,20,32,.78) 0%,
    rgba(14,20,32,.62) 26%,
    rgba(14,20,32,.28) 48%,
    rgba(14,20,32,0)   68%);
}
.hero__scrim--vert{             /* nav top + fade into next section */
  background:linear-gradient(to bottom,
    rgba(10,14,24,.34) 0%,
    rgba(10,14,24,0)   26%,
    rgba(10,14,24,0)   58%,
    rgba(10,14,24,.52) 100%);
}
.hero__grain{                   /* faint grain: premium feel, kills sky banding */
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("grain.svg");
  background-size:180px;
}

/* -- 4c. copy -- */
.hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding:0 var(--gut);
}
.hero__copy{max-width:37rem;color:var(--ivory);}

.hero__eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--serif-kr);
  font-size:clamp(.78rem,1.05vw,.92rem);
  letter-spacing:.22em;
  color:rgba(244,236,224,.82);
  margin-bottom:1.9rem;
}
.hero__eyebrow::before{content:"";width:2.6rem;height:1px;background:var(--gold);flex:none;}
.hero__eyebrow em{font-style:normal;color:var(--gold);font-size:1.08em;}

/* the brand lockup is the headline: 연담 緣談 stacked over YEONDAM */
.hero__title{
  font-family:var(--serif-kr);
  font-weight:400;
  line-height:1;
  margin-bottom:1.1rem;
}
.hero__title-kr{
  display:block;
  font-size:clamp(3.5rem, 8.9vw, 7.6rem);
  font-weight:700;                        /* 고운바탕의 최대 굵기 */
  letter-spacing:0;
  color:var(--ivory);
  text-shadow:0 3px 44px rgba(8,12,20,.5);
}
.hero__title-kr em{                       /* 緣談 — 본명조로 넘어가므로 굵기를 따로 낮춥니다 */
  font-style:normal; color:var(--gold);
  font-weight:400;
  font-size:.4em; letter-spacing:.12em;
  margin-left:.28em; vertical-align:baseline;
}
.hero__title-en{
  display:block;
  font-family:var(--serif-en); font-weight:400;
  font-size:clamp(1.1rem, 2.45vw, 2.05rem);
  letter-spacing:.58em;
  text-indent:.58em;                      /* offsets the trailing letter-space */
  color:var(--ivory-en);
  margin-top:.95rem;
}

.hero__sub{
  font-size:clamp(.92rem,1.25vw,1.05rem);
  letter-spacing:.16em;
  color:rgba(244,236,224,.76);
}

.hero__rule{width:3.2rem;height:1px;background:rgba(227,198,143,.45);margin:2rem 0 1.6rem;}

.hero__tagline{
  font-family:var(--serif-kr);
  font-size:clamp(1.22rem,2.15vw,1.8rem);
  line-height:1.62;
  color:rgba(246,239,230,.95);
  text-shadow:0 2px 26px rgba(8,12,20,.4);
}
.hero__tagline .accent{font-weight:700;}

.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.6rem;}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;
  font-size:.94rem;letter-spacing:.02em;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 12px 34px rgba(176,57,44,.34);}
.btn--primary:hover{background:var(--red-deep);}
.btn--ghost{border:1px solid rgba(244,236,224,.45);color:var(--ivory);}
.btn--ghost:hover{background:rgba(244,236,224,.12);border-color:var(--ivory);}

/* -- 4d. scroll cue -- */
.hero__cue{
  /* left edge lines up with 연담, so the cue never sits on top of the couple */
  position:absolute; z-index:3; bottom:2.1rem;
  left:max(var(--gut), calc(50% - (var(--shell) / 2) + var(--gut)));
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  font-size:.66rem; letter-spacing:.3em; color:rgba(244,236,224,.62);
}
.hero__cue i{display:block;width:1px;height:44px;background:rgba(244,236,224,.28);position:relative;overflow:hidden;}
.hero__cue i::after{
  content:"";position:absolute;left:0;width:1px;height:16px;background:var(--ivory);
  animation:cue 2.3s var(--ease) infinite;
}
@keyframes cue{
  0%{top:-16px;opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{top:44px;opacity:0}
}

/* -- 4e. video control -- */
.hero__vidctrl{
  position:absolute; z-index:3; right:var(--gut); bottom:2.1rem;
  display:flex; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.16em; color:rgba(244,236,224,.66);
  padding:.55rem 1rem; border:1px solid rgba(244,236,224,.24); border-radius:999px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.hero__vidctrl:hover{border-color:rgba(244,236,224,.6);color:var(--ivory);}

/* -- 4f. entrance choreography -- */
.reveal{opacity:0;transform:translateY(22px);}
.hero.is-ready .reveal{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.hero.is-ready .reveal:nth-child(1){transition-delay:.15s}
.hero.is-ready .reveal:nth-child(2){transition-delay:.32s}
.hero.is-ready .reveal:nth-child(3){transition-delay:.46s}
.hero.is-ready .reveal:nth-child(4){transition-delay:.58s}
.hero.is-ready .reveal:nth-child(5){transition-delay:.70s}
.hero.is-ready .reveal:nth-child(6){transition-delay:.84s}

/* ---------- 5. Hero responsive ---------- */

/* tablet / small laptop */
@media (max-width:1024px){
  .nav__menu .nav__link{display:none;}
  .nav__burger{display:block;}
  .hero__copy{max-width:30rem;}
}

/* phones — copy sits in the sky, the couple stays visible below it */
@media (max-width:640px){
  .nav__lang,.nav__cta{display:none;}
  .nav{padding-block:1rem;}

  .hero{align-items:flex-start;}
  .hero__inner{padding-top:5.6rem;}
  .hero__copy{max-width:100%;}

  .hero__scrim--copy{
    background:linear-gradient(to bottom,
      rgba(14,20,32,.60) 0%,
      rgba(14,20,32,.46) 36%,
      rgba(14,20,32,.16) 58%,
      rgba(14,20,32,0)   72%);
  }
  .hero__scrim--vert{
    background:linear-gradient(to bottom,
      rgba(10,14,24,.30) 0%, rgba(10,14,24,0) 40%,
      rgba(10,14,24,0) 74%, rgba(10,14,24,.46) 100%);
  }

  .hero__eyebrow{margin-bottom:1.25rem;letter-spacing:.16em;}
  .hero__eyebrow::before{width:1.6rem;}
  .hero__title{margin-bottom:.9rem;}
  .hero__title-kr{font-size:clamp(3rem,15vw,4rem);}
  .hero__title-en{font-size:clamp(.95rem,3.6vw,1.2rem);letter-spacing:.42em;
    text-indent:.42em;margin-top:.75rem;}
  .hero__rule{margin:1.5rem 0 1.15rem;}
  .hero__tagline{font-size:clamp(1.15rem,5vw,1.5rem);line-height:1.6;}
  /* 2026-09-18: 폰에서도 데스크톱과 같은 두 개의 알약 버튼을 왼쪽에 나란히 둡니다
     (전에는 붉은 버튼이 화면 폭을 가득 채우고 가운데 정렬이었습니다 — 사용자 요청으로 뺌) */
  .hero__actions{margin-top:1.7rem;gap:.6rem .7rem;justify-content:flex-start;}
  .hero__actions .btn{padding:.74rem 1.35rem;font-size:.88rem;}
  .hero__actions .btn--primary{box-shadow:0 10px 26px rgba(176,57,44,.3);}

  .hero__cue{display:none;}
  .hero__vidctrl{top:auto;bottom:1.4rem;right:1.25rem;padding:.45rem .8rem;font-size:.62rem;}
}
/* 낮은 창 — 노트북 화면이나 윈도우 배율 125~150% 환경
   히어로 글자 크기는 화면 '너비'만 보고 정해집니다. 그래서 창이 옆으로 넓고
   위아래로 낮으면 글 덩어리가 세로로 넘쳐, 위로는 내비게이션과
   아래로는 SCROLL 표시와 겹칩니다. 낮은 창에서만 글자와 간격을 함께 줄이고,
   SCROLL 표시도 같이 줄여 자리를 만듭니다.
   (높이가 넉넉한 화면에서는 아무것도 바뀌지 않습니다) */
@media (min-width:641px){
  .hero{padding-block:6rem 7rem;}    /* 내비 자리와 SCROLL 자리를 미리 비워 둡니다 */
}

@media (min-width:641px) and (max-height:820px){
  .hero__eyebrow{margin-bottom:1.25rem;}
  .hero__title{margin-bottom:.8rem;}
  .hero__title-kr{font-size:clamp(3.2rem,7vw,5.9rem);}
  .hero__title-en{font-size:clamp(1.05rem,2vw,1.62rem);margin-top:.7rem;}
  .hero__rule{margin:1.4rem 0 1.1rem;}
  .hero__tagline{font-size:clamp(1.15rem,1.75vw,1.55rem);}
  .hero__actions{margin-top:1.8rem;}
}

@media (min-width:641px) and (max-height:700px){
  .hero{padding-block:5.6rem 5.5rem;}
  .hero__eyebrow{margin-bottom:1rem;}
  .hero__title-kr{font-size:clamp(3.1rem,5.5vw,5rem);}
  .hero__title-en{font-size:clamp(1rem,1.74vw,1.46rem);margin-top:.6rem;}
  .hero__rule{margin:1.15rem 0 .95rem;}
  .hero__tagline{font-size:clamp(1.1rem,1.55vw,1.4rem);}
  .hero__actions{margin-top:1.5rem;}
  .btn{padding:.82rem 1.7rem;}
  /* SCROLL 표시도 한 단계 낮춰 글 덩어리와 부딪히지 않게 합니다 */
  .hero__cue{bottom:1.6rem;gap:.5rem;}
  .hero__cue i{height:30px;}
  .hero__cue i::after{animation-name:cue-short;}
  .hero__vidctrl{bottom:1.6rem;}
}
@keyframes cue-short{
  0%{top:-14px;opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{top:30px;opacity:0}
}

@media (min-width:641px) and (max-height:560px){
  .hero{padding-block:5rem 3.2rem;}
  .hero__title-kr{font-size:clamp(2.75rem,4.8vw,4.1rem);}
  .hero__tagline{font-size:1.1rem;}
  .hero__actions{margin-top:1.2rem;}
  .hero__cue{display:none;}          /* 더 낮으면 스크롤 표시는 자리를 양보합니다 */
}


/* ============================================================
   6. SECTION SCAFFOLD — the rest of the homepage, blocked out
   ============================================================ */
.sec{padding:clamp(4.5rem,9vw,8.5rem) var(--gut);}
.sec--tight{padding-block:clamp(3rem,5.5vw,5rem);}   /* 이웃 섹션과 높이를 맞출 때 */
.sec__shell{max-width:var(--shell);margin-inline:auto;}
.sec--cream{background:var(--cream-deep);}
.sec--ink{background:var(--ink);color:var(--cream);}

.sec__no{
  font-family:var(--serif-en);font-size:.8rem;letter-spacing:.4em;
  color:var(--red);margin-bottom:1rem;
}
.sec--ink .sec__no{color:var(--gold);}
.sec__title{
  font-family:var(--serif-kr);font-weight:400;
  font-size:clamp(1.65rem,3.1vw,2.5rem);line-height:1.5;margin-bottom:1rem;
}
.sec__lede{max-width:44rem;color:var(--ink-soft);font-size:1.02rem;}
.sec__lede + .sec__lede{margin-top:.9rem;}
.sec__lede b{font-weight:700;color:var(--ink);}
/* 상담료 — 상자 없이 본문 흐름 그대로. 금액만 굵게,
   plus tax 는 한 단계 작게 아래로 내립니다. */
.price{
  font-weight:700;color:var(--ink);white-space:nowrap;
}
.price small{
  font-size:.72em;font-weight:500;letter-spacing:.02em;
  color:var(--ink-mute);
  vertical-align:-.12em;margin:0 .16em 0 .26em;   /* 뒤따르는 한글과 붙지 않게 */
}
/* 어두운 상담 안내 띠(.tail) 위에서는 색을 뒤집습니다 */
.tail .price{color:var(--ivory);}
.tail .price small{color:rgba(244,236,224,.55);}
/* 05 섹션 — '가입비 무료' 처럼 한눈에 들어와야 하는 짧은 표시 */
.tag{
  display:inline-block;vertical-align:.02em;margin-right:.7rem;
  font-family:var(--sans-kr);font-size:.95rem;font-weight:700;letter-spacing:.01em;
  color:var(--red);background:rgba(176,57,44,.13);
  border:1px solid rgba(176,57,44,.5);border-radius:999px;
  padding:.4rem 1.05rem;white-space:nowrap;
  box-shadow:0 2px 12px rgba(176,57,44,.12);
}

/* 가입비 무료 — 제목 아래 한 줄로 세운 배지.
   화면에 들어오면 살짝 튀어오르고, 한 번 빛이 지나갑니다.
   눌리는 버튼으로 오해되지 않도록 solid 붉은색은 쓰지 않았습니다. */
.freetag{margin:.4rem 0 1.2rem;}
.tag--lg{
  position:relative;overflow:hidden;isolation:isolate;
  /* 본문 고딕 대신 제목과 같은 고운바탕 — 배지가 스티커처럼 보이지 않게 */
  font-family:var(--serif-kr);
  font-size:1.12rem;font-weight:700;
  letter-spacing:.07em;text-indent:.07em;   /* 자간이 붙는 만큼 왼쪽으로 밀어 가운데 맞춤 */
  color:var(--red-deep);                    /* 획이 가는 세리프라 색을 한 단계 진하게 */
  background:rgba(176,57,44,.1);
  border:1.5px solid rgba(176,57,44,.55);
  padding:.56rem 1.4rem;margin-right:0;
  box-shadow:0 3px 16px rgba(176,57,44,.14);
  opacity:0;transform:scale(.94);
}
.tag--lg i{position:relative;z-index:1;font-style:normal;}   /* 빛이 글자 위를 덮지 않게 */
.rise.is-in .tag--lg{animation:tagpop .75s var(--ease) .1s forwards;}
@keyframes tagpop{
  0%{opacity:0;transform:scale(.94)}
  62%{opacity:1;transform:scale(1.035)}
  100%{opacity:1;transform:scale(1)}
}

/* 한 번만 지나가는 빛 */
.tag--lg::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(104deg,
    transparent 32%, rgba(255,255,255,.8) 50%, transparent 68%);
  transform:translateX(-125%);
}
.rise.is-in .tag--lg::after{animation:tagsheen 1.4s var(--ease) .8s 1;}
@keyframes tagsheen{
  from{transform:translateX(-125%)} to{transform:translateX(125%)}
}

/* 마우스를 올려두는 동안에는 같은 빛이 천천히 되풀이됩니다.
   ::after(등장용)와 겹치지 않게 별도의 ::before 를 씁니다.
   기본 상태에는 animation 이 없으므로 마우스를 떼면 그 자리에서 멈추고
   왼쪽 화면 밖으로 조용히 되돌아갑니다 (되돌아오는 빛이 보이지 않습니다). */
.tag--lg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(104deg,
    transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
  transform:translateX(-125%);
}
@media (hover:hover){
  .tag--lg:hover::before{animation:tagsheen-loop 3s var(--ease) infinite;}
}
@keyframes tagsheen-loop{
  0%{transform:translateX(-125%)}
  47%{transform:translateX(125%)}
  100%{transform:translateX(125%)}   /* 남은 시간은 쉼 — 계속 번쩍이지 않게 */
}

@media (prefers-reduced-motion: reduce){
  .tag--lg{opacity:1;transform:none;animation:none;}
  .tag--lg::after,
  .tag--lg:hover::before{display:none;animation:none;}
}
.sec--ink .sec__lede{color:rgba(254,252,247,.72);}

/* placeholder blocks so the page arrangement is visible while we build */
.slot{
  margin-top:2.6rem;border:1px dashed var(--line);border-radius:4px;
  padding:2rem;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:rgba(255,255,255,.4);
}
.sec--ink .slot{border-color:rgba(254,252,247,.2);background:rgba(255,255,255,.03);}
.slot__card{
  border:1px solid var(--line);border-radius:3px;padding:1.4rem;
  min-height:8.5rem;display:flex;flex-direction:column;gap:.5rem;
  background:var(--cream);
}
.sec--ink .slot__card{border-color:rgba(254,252,247,.14);background:rgba(255,255,255,.04);}
.slot__card b{font-family:var(--serif-kr);font-weight:700;font-size:1.02rem;}
.slot__card span{font-size:.86rem;color:var(--ink-mute);line-height:1.7;}
.sec--ink .slot__card span{color:rgba(254,252,247,.6);}

/* ============================================================
   6b. 하위 페이지 헤더 — 히어로와 같은 색·질감, 높이만 낮춤
   ============================================================ */
.phero{
  position:relative;min-height:clamp(22rem,54svh,30rem);
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink);isolation:isolate;
}
.phero__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
}
.phero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(14,20,32,.80) 0%, rgba(14,20,32,.56) 34%,
                            rgba(14,20,32,.20) 62%, rgba(14,20,32,.04) 100%),
    linear-gradient(to bottom, rgba(10,14,24,.42) 0%, rgba(10,14,24,0) 34%,
                               rgba(10,14,24,.30) 78%, rgba(10,14,24,.58) 100%);
}
.phero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("grain.svg");background-size:180px;
}
.phero__inner{
  position:relative;z-index:3;width:100%;max-width:var(--shell);
  margin-inline:auto;padding:0 var(--gut) clamp(2.75rem,5vw,4rem);
  color:var(--ivory);
}
.phero__eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--serif-kr);font-size:.82rem;letter-spacing:.2em;
  color:rgba(244,236,224,.8);margin-bottom:1.15rem;
}
.phero__eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--gold);flex:none;}
.phero__eyebrow em{font-style:normal;color:var(--gold);}
.phero__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.28;
  color:var(--ivory);text-shadow:0 3px 40px rgba(8,12,20,.5);
}
.phero__d{
  margin-top:1.15rem;max-width:34rem;
  font-size:clamp(.95rem,1.3vw,1.06rem);line-height:1.85;
  color:rgba(244,236,224,.84);
}

/* 빵부스러기 */
.crumb{
  font-size:.78rem;letter-spacing:.06em;color:rgba(244,236,224,.6);
  margin-bottom:1.4rem;
}
.crumb a{border-bottom:1px solid rgba(244,236,224,.28);}
.crumb a:hover{color:var(--gold);border-color:var(--gold);}
.crumb span{margin:0 .5rem;opacity:.5;}

/* 하위 페이지 맨 아래 — 상담으로 유도 */
.tail{
  background:var(--ink);color:var(--ivory);
  padding:clamp(3.5rem,7vw,5.5rem) var(--gut);text-align:center;
}
.tail__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5;margin-bottom:1rem;
}
.tail__d{color:rgba(244,236,224,.7);font-size:.98rem;margin-bottom:2rem;}
.tail .btn--primary{box-shadow:0 12px 34px rgba(176,57,44,.3);}

/* 사진 띠 — 어두운 띠 대신 밝은 사진 위에 먹색 글자 (/about/ 등).
   사진은 통째로 깔고, 글자가 놓이는 가운데만 아이보리 타원으로 눌러 읽히게 합니다. */
.tail--photo{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(20rem,38vw,28rem);
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);color:var(--ink);
  padding:clamp(3.4rem,6.5vw,5rem) var(--gut);
}
.tail__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
  transform:translateY(var(--py,0)) scale(1.08);   /* 시차로 밀릴 여유 */
}
.tail--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 78% at 50% 52%, rgba(255,253,248,.84) 0%, rgba(255,253,248,.6) 55%, rgba(255,253,248,0) 100%),
    linear-gradient(to bottom, rgba(254,252,247,.55), rgba(254,252,247,0) 28%, rgba(254,252,247,0) 72%, rgba(254,252,247,.3));
}
.tail__inner{position:relative;z-index:2;max-width:42rem;}
.tail--photo .tail__t{color:var(--ink);margin-bottom:1.1rem;}
.tail--photo .tail__d{
  font-family:var(--serif-kr);font-size:clamp(.98rem,1.4vw,1.06rem);line-height:1.9;
  color:var(--ink-soft);margin-bottom:0;
}
.tail--photo .tail__d + .tail__d{margin-top:.5rem;}
.tail--photo .tail__d + .btn{margin-top:2rem;}
.tail--photo .price{color:var(--ink);}
.tail--photo .price small{color:var(--ink-mute);}   /* 어두운 띠용 아이보리를 되돌립니다 */

/* ============================================================
   7. 홈 본문 섹션 01–04
   ============================================================ */

/* 스크롤 등장 — 섹션 공통 */
.rise{opacity:0;transform:translateY(26px);}
.rise.is-in{opacity:1;transform:none;
  transition:opacity .95s var(--ease), transform .95s var(--ease);}
.rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s}
.rise.d3{transition-delay:.24s} .rise.d4{transition-delay:.32s}
.rise.d5{transition-delay:.40s}

/* 위로 밀어 올리지 않고 서서히 나타나기만 — 선이 그어지는 동작을 방해하지 않습니다 */
.rise--fade{transform:none;}
/* 아무 효과 없이 is-in 만 받는 용도 (곡선 그리기 신호) */
.rise--cue{opacity:1;transform:none;}

/* ---------- 01 · 연담이 하는 일 ---------- */
.intro{
  display:grid;gap:clamp(2.25rem,4.5vw,4.25rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  align-items:center;
}
.intro__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.85rem,3.8vw,2.95rem);line-height:1.5;
  letter-spacing:-.012em;margin-bottom:1.6rem;
}
.intro__d{color:var(--ink-soft);font-size:1.02rem;max-width:32rem;}

.intro__fig{
  margin:0;border-radius:4px;overflow:hidden;
  box-shadow:0 22px 55px rgba(27,36,54,.16);
}
.intro__fig img{width:100%;height:auto;}

@media (max-width:820px){
  .intro{grid-template-columns:1fr;gap:2.25rem;}
  .intro__d{max-width:100%;}
}
/* ============================================================
   03 · 누구를 위한 곳인가
   위쪽은 저녁빛 밴쿠버 파노라마, 아래쪽은 짙은 남색.
   카드는 테두리 없이 — 사진만 얹고 글자는 배경 위에 두어
   섹션 바탕에 그대로 녹아들게 했습니다.
   ============================================================ */
.jour{
  position:relative;overflow:hidden;
  background:var(--night);
  padding-block:0 clamp(2.5rem,4.4vw,4rem);
}

/* 파노라마 — 위쪽에 깔고 아래로 갈수록 배경색으로 사라집니다 */
.jour__bg{
  position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(20rem,34vw,30rem);
  background:url("/assets/img/jour-bg.jpg") center top/cover no-repeat;
}
.jour__bg::after{
  content:"";position:absolute;inset:0;
  background:
    /* 글자가 놓이는 왼쪽을 눌러 읽히게 */
    linear-gradient(100deg, rgba(11,30,51,.92) 0%, rgba(11,30,51,.72) 32%,
                            rgba(11,30,51,.28) 62%, rgba(11,30,51,.05) 100%),
    /* 아래쪽은 섹션 배경색으로 완전히 넘어갑니다 */
    linear-gradient(to bottom, rgba(11,30,51,.45) 0%, rgba(11,30,51,0) 26%,
                               rgba(11,30,51,.55) 72%, var(--night) 100%);
}

/* .sec + .sec__shell 과 같은 폭이어야 다른 섹션과 왼쪽 선이 맞습니다
   (배경 사진은 전면이라 여백을 섹션이 아니라 이 안쪽 상자가 갖습니다) */
.jour__inner{
  position:relative;z-index:1;
  max-width:calc(var(--shell) + 2 * var(--gut));
  margin-inline:auto;padding-inline:var(--gut);
}

/* ---------- 머리글 ---------- */
.jour__top{
  padding-top:clamp(2.75rem,5vw,4.6rem);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) auto;
  gap:clamp(1.25rem,3vw,3rem);align-items:end;
}
.jour .sec__no{color:var(--gold);}
.jour__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.38;
  letter-spacing:-.015em;color:var(--ivory);margin-top:.3rem;
  text-shadow:0 2px 26px rgba(6,14,26,.5);
}
.jour__d{
  font-size:clamp(.88rem,1.05vw,.97rem);line-height:1.95;
  color:rgba(244,236,224,.8);max-width:30rem;padding-bottom:.3rem;
}

.jour__nav{display:flex;gap:.6rem;padding-bottom:.3rem;}
.jour__btn{
  width:2.7rem;height:2.7rem;border-radius:50%;
  border:1px solid rgba(244,236,224,.3);background:transparent;
  display:grid;place-items:center;color:rgba(244,236,224,.75);
  transition:border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.jour__btn svg{width:1rem;height:1rem;}
.jour__btn:hover{border-color:var(--gold);color:var(--gold);}
.jour__btn[disabled]{opacity:.25;pointer-events:none;}

/* ---------- 카드 레일 ---------- */
.jour__rail{
  margin-top:clamp(2rem,4vw,3.6rem);
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(206px,1fr);
  gap:clamp(1rem,2vw,1.9rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.jour__rail::-webkit-scrollbar{display:none;}

/* 카드 — 상자가 아니라 사진 + 글자. 배경과 경계가 없습니다 */
.jcard{
  display:block;scroll-snap-align:start;color:var(--ivory);
  transition:transform .45s var(--ease);
}
.jcard__ph{
  position:relative;display:block;
  aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  margin-bottom:clamp(.9rem,1.5vw,1.2rem);
}
.jcard__ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.jcard__ph::after{                    /* 아래 모서리를 배경색으로 흘려보냅니다 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(11,30,51,.12) 0%, rgba(11,30,51,0) 45%, rgba(11,30,51,.62) 100%);
}

.jcard__t{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.3;
  color:var(--ivory);margin-bottom:.7rem;
}
.jcard__t::after{                     /* 이름 옆 짧은 금색 선 */
  content:"";flex:1;max-width:2.6rem;height:1px;background:rgba(227,198,143,.55);
  transition:max-width .45s var(--ease), background .45s var(--ease);
}
.jcard__lead{
  font-size:clamp(.83rem,.98vw,.9rem);line-height:1.6;font-weight:500;
  color:var(--ivory);margin-bottom:.5rem;
}
.jcard__d{
  font-size:clamp(.76rem,.9vw,.82rem);line-height:1.75;
  color:rgba(244,236,224,.62);
}

@media (hover:hover){
  .jcard:hover{transform:translateY(-4px);}
  .jcard:hover .jcard__ph img{transform:scale(1.06);}
  .jcard:hover .jcard__t::after{max-width:4.2rem;background:var(--gold);}
}
.jcard:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px;}

@media (max-width:900px){
  .jour__top{grid-template-columns:1fr;align-items:start;gap:1.1rem;}
  .jour__nav{display:none;}          /* 손가락으로 밀면 되므로 감춥니다 */
  .jour__d{max-width:46rem;padding-bottom:0;}
  .jour__bg{height:clamp(17rem,44vw,24rem);}
}
@media (max-width:560px){
  .jour__rail{grid-auto-columns:minmax(74%,1fr);}
}


/* ============================================================
   02 · 연담의 핵심 — 왼쪽 문장 + 오른쪽 2×2 카드
   배경은 벚꽃 사진을 채도·대비를 낮춰 아주 옅게 깐 것입니다.
   ============================================================ */
.core{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding-block:clamp(3.5rem,6.8vw,6.2rem);
}

/* 벚꽃 배경 — 위아래를 종이색으로 덮어 이웃 섹션과 부드럽게 이어집니다 */
.core__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 62% — 위쪽 가지가 제목을 가로지르지 않도록 아래쪽 무리를 보여줍니다 */
  background:url("/assets/img/blossom-bg.jpg") center 62%/cover no-repeat;
  opacity:.46;
}
.core__bg::after{
  content:"";position:absolute;inset:0;
  background:
    /* 글자가 놓이는 가운데 띠를 한 번 더 종이색으로 덮습니다 */
    linear-gradient(to bottom,
      transparent 0%, rgba(251,246,232,.4) 30%,
      rgba(251,246,232,.4) 70%, transparent 100%),
    linear-gradient(to bottom,
      var(--paper) 0%, rgba(251,246,232,.42) 15%,
      rgba(251,246,232,.32) 80%, var(--paper) 100%);
}
.core .sec__shell{position:relative;z-index:1;}

/* ---------- 2단 배치 ---------- */
.core__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);
  gap:clamp(2rem,4.5vw,4.5rem);
  align-items:start;
}

/* ---------- 왼쪽: 제목과 문장 ---------- */
.core__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.24;
  letter-spacing:-.015em;color:var(--ink);
  margin:.3rem 0 clamp(1.5rem,2.6vw,2.1rem);
}
.core__rule{
  width:2.6rem;height:1px;background:var(--gold-deep);
  margin-bottom:clamp(1.3rem,2.2vw,1.8rem);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--ease) .15s;
}
.core.is-in .core__rule{transform:scaleX(1);}

.core__claim{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.15rem,1.75vw,1.42rem);line-height:1.6;
  color:var(--ink);margin-bottom:.95rem;
}
.core__desc{
  font-size:clamp(.9rem,1.05vw,.97rem);line-height:1.95;
  color:var(--ink-soft);max-width:26rem;
}

.core__sig{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  font-family:var(--serif-en);
  font-size:.72rem;letter-spacing:.28em;
  color:var(--gold-deep);line-height:2.1;
}
.core__sig b{display:block;font-weight:400;color:var(--ink-mute);}

/* ---------- 오른쪽: 2×2 카드 ---------- */
.core__cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,2.6vw,2.4rem) clamp(1.5rem,2.8vw,2.6rem);
}
.core__card{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(.85rem,1.4vw,1.15rem);
  align-content:start;
}

.core__icon{
  grid-row:1 / span 2;
  width:2.75rem;height:2.75rem;flex:none;
  border:1px solid rgba(176,57,44,.26);border-radius:11px;
  display:grid;place-items:center;color:var(--red);
  background:rgba(254,252,247,.5);
  transition:border-color .35s var(--ease), background .35s var(--ease),
             transform .35s var(--ease);
}
.core__icon svg{width:1.3rem;height:1.3rem;}

.core__n{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.26em;
  color:var(--red);align-self:start;padding-top:.15rem;
}
.core__it{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.4;
  color:var(--ink);margin-top:.3rem;
}
.core__id{
  grid-column:2;margin-top:.7rem;
  font-size:clamp(.86rem,1vw,.93rem);line-height:1.9;color:var(--ink-soft);
}

@media (hover:hover){
  .core__card.is-in:hover{transform:translateY(-3px);transition-duration:.4s;}
  .core__card:hover .core__icon{
    border-color:rgba(176,57,44,.55);
    background:rgba(176,57,44,.06);
    transform:scale(1.05);
  }
}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .core__grid{grid-template-columns:1fr;gap:clamp(2rem,4vw,2.75rem);}
  .core__desc{max-width:46rem;}
  .core__sig{margin-top:1.6rem;}
}
@media (max-width:620px){
  .core__cards{grid-template-columns:1fr;gap:1.7rem;}
  .core__it br{display:none;}
  .core__bg{opacity:.4;}
}

/* ---------- 02 · 네 가지 원칙 (하위 페이지 공용) ---------- */
.pillars{
  margin-top:clamp(2.5rem,4.5vw,3.75rem);
  display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.pillar{padding:2.1rem 1.75rem 0 0;border-right:1px solid var(--line);}
.pillar:last-child{border-right:0;padding-right:0;}
.pillar:not(:first-child){padding-left:1.75rem;}
.pillar__n{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.3em;
  color:var(--red);display:block;margin-bottom:.9rem;
}
.pillar__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.5;margin-bottom:.65rem;
  min-height:3em;        /* 두 줄짜리 제목(03)이 있어도 본문 시작선을 맞춥니다 */
}
.pillar__d{font-size:.9rem;line-height:1.85;color:var(--ink-soft);}

/* ---------- 03 · 누구를 위한 곳인가 (어두운 배경) ---------- */
.paths__t{
  font-family:var(--serif-kr);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.52;max-width:24ch;
}
.paths__t b{font-weight:700;color:var(--gold);}
.paths{
  margin-top:clamp(2.75rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid rgba(254,252,247,.18);
}
.path{padding:1.9rem 1.4rem 0 0;border-right:1px solid rgba(254,252,247,.14);}
.path:last-child{border-right:0;padding-right:0;}
.path:not(:first-child){padding-left:1.4rem;}
.path__t{
  font-family:var(--serif-kr);font-weight:700;font-size:1.12rem;
  color:var(--gold);margin-bottom:.55rem;
}
.path__lead{
  font-size:.9rem;line-height:1.7;font-weight:500;
  color:var(--cream);margin-bottom:.45rem;
}
.path__d{font-size:.86rem;line-height:1.8;color:rgba(254,252,247,.68);}

/* ---------- 04 · 연담의 만남 ----------
   섹션에 들어오면: 회색 선 위로 붉은 선이 왼쪽부터 차오르고,
   붉은 선이 지나갈 때마다 그 단계의 점이 차례로 채워집니다. */
.flow{
  margin-top:clamp(2.5rem,4.5vw,3.5rem);position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2.25rem);
}
.flow::before,
.flow::after{content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;}
.flow::before{background:var(--line);}                     /* 바탕 선 */
.flow::after{                                              /* 차오르는 붉은 선 */
  background:var(--red);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.8s var(--ease) .25s;
}
.flow.is-in::after{transform:scaleX(1);}

.step4{position:relative;padding-top:2.9rem;}
.step4::before,
.step4::after{
  content:"";position:absolute;left:0;top:.72rem;width:.7rem;height:.7rem;border-radius:50%;
}
.step4::before{                                            /* 테두리 점 */
  background:var(--cream);border:1px solid var(--red);
  transition:transform .35s var(--ease);
}
.step4::after{                                             /* 채워지는 점 */
  background:var(--red);transform:scale(0);
  transition:transform .45s var(--ease);
}
.flow.is-in .step4:nth-child(1)::after{transform:scale(1);transition-delay:.35s;}
.flow.is-in .step4:nth-child(2)::after{transform:scale(1);transition-delay:.8s;}
.flow.is-in .step4:nth-child(3)::after{transform:scale(1);transition-delay:1.25s;}
.flow.is-in .step4:nth-child(4)::after{transform:scale(1);transition-delay:1.7s;}

@media (hover:hover){
  .step4:hover::before{transform:scale(1.35);}
  .step4:hover .step4__t{color:var(--red);}
}

.step4__n{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.3em;
  color:var(--red);display:block;margin-bottom:.7rem;
}
.step4__t{
  font-family:var(--serif-kr);font-weight:700;font-size:1.28rem;margin-bottom:.6rem;
  transition:color .3s var(--ease);
}
.step4__lead{
  font-family:var(--serif-kr);font-size:1.04rem;line-height:1.6;
  color:var(--ink);margin-bottom:.5rem;
}
.step4__d{font-size:.9rem;line-height:1.8;color:var(--ink-soft);}

.more{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(2.25rem,4vw,3rem);
  font-size:.92rem;color:var(--red);
  border-bottom:1px solid rgba(176,57,44,.35);padding-bottom:.3rem;
  transition:gap .3s var(--ease),border-color .3s var(--ease);
}
.more:hover{gap:1rem;border-color:var(--red);}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pillar:nth-child(2n){border-right:0;padding-right:0;}
  .pillar:nth-child(n+3){border-top:1px solid var(--line);margin-top:1.9rem;}
  .paths{grid-template-columns:repeat(2,minmax(0,1fr));}
  .path:nth-child(2n){border-right:0;padding-right:0;}
  .path:nth-child(n+3){border-top:1px solid rgba(254,252,247,.14);margin-top:1.7rem;}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.25rem;}
  .flow::before,.flow::after{display:none;}
  .step4{padding-top:0;border-top:1px solid var(--line);padding-top:1.5rem;}
  .step4::before,.step4::after{display:none;}
}
@media (max-width:560px){
  .pillar__t{min-height:0;}          /* 한 줄로 쌓이면 높이를 맞출 필요가 없습니다 */
  .pillar__t br{display:none;}
  .pillars,.paths{grid-template-columns:1fr;}
  .pillar,.path{border-right:0;padding-right:0;padding-left:0;}
  .pillar:not(:first-child){border-top:1px solid var(--line);margin-top:1.7rem;padding-left:0;}
  .path:not(:first-child){border-top:1px solid rgba(254,252,247,.14);margin-top:1.5rem;padding-left:0;}
  .flow{grid-template-columns:1fr;}
}

/* ============================================================
   04 · 연담의 만남 — 세로 타임라인 + 스크롤 진행선
   배경은 상담실 사진을 그대로 깔고, 글자가 놓이는 왼쪽만 밝게 눌렀습니다.
   진행선은 스크롤에 맞춰 --p (0~1) 가 커지며 위에서 아래로 차오르고,
   선이 지나간 단계의 점이 하나씩 채워집니다 (main.js 6d).
   /membership/ 이 아직 쓰는 .flow · .step4 은 건드리지 않았습니다.
   ============================================================ */
.meet{
  position:relative;overflow:hidden;
  background:var(--sand);
  padding-block:clamp(3.4rem,6vw,5.6rem);
}
.meet__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/img/meet-bg.jpg") center 46%/cover no-repeat;
}
/* 사진은 그대로 두고, 글자가 놓이는 왼쪽만 밝게 눌러 읽히게 합니다.
   전체를 베이지로 덮지 않으므로 오른쪽 방 사진은 원래 색으로 보입니다. */
.meet__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,253,248,.95) 0%,  rgba(255,253,248,.94) 32%,
      rgba(255,253,248,.88) 52%, rgba(255,253,248,.62) 70%,
      rgba(255,253,248,.2) 86%,  rgba(255,253,248,0) 100%),
    /* 위아래 가장자리만 섹션 색으로 부드럽게 넘깁니다 */
    linear-gradient(to bottom,
      var(--sand) 0%, rgba(242,234,221,0) 10%,
      rgba(242,234,221,0) 90%, var(--sand) 100%);
}
.meet .sec__shell{position:relative;z-index:1;}
.meet .sec__no{color:var(--bronze);}
.meet__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.4;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:0;
}

/* ---------- 세로 타임라인 ---------- */
.mflow{
  --p:0;                       /* main.js 6d 가 스크롤에 맞춰 0 → 1 로 올립니다 */
  position:relative;list-style:none;
  margin:clamp(2.8rem,5vw,4.2rem) 0 0;padding:0;
}
.mflow::before,
.mflow::after{
  content:"";position:absolute;left:.42rem;top:.85rem;bottom:0;width:1px;
  /* 마지막 단계 아래에서 선이 끊기지 않고 사라지도록 */
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
}
.mflow::before{background:rgba(140,107,67,.26);}          /* 바탕 선 */
.mflow::after{                                            /* 차오르는 선 */
  left:.3575rem;width:2px;                    /* 점 가운데(.42rem)에 맞춘 2px */
  background:linear-gradient(to bottom,var(--bronze),rgba(140,107,67,.62));
  transform:scaleY(var(--p));transform-origin:top center;
}

.mstep{
  position:relative;padding:0 0 clamp(1.6rem,2.6vw,2.3rem) 3rem;
  display:grid;grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);
  gap:clamp(.4rem,2vw,2rem);align-items:baseline;
}
.mstep:last-child{padding-bottom:0;}

/* 점 — 테두리는 늘 보이고, 진행선이 지나갈 때 안쪽이 채워집니다 */
.mstep::before,
.mstep::after{content:"";position:absolute;border-radius:50%;}
.mstep::before{
  left:0;top:.42rem;width:.85rem;height:.85rem;
  background:var(--sand);border:1px solid rgba(140,107,67,.45);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.mstep::after{
  left:.235rem;top:.655rem;width:.38rem;height:.38rem;
  background:var(--bronze);transform:scale(0);
  transition:transform .45s var(--ease);
}
.mstep.is-on::before{border-color:var(--bronze);transform:scale(1.08);}
.mstep.is-on::after{transform:scale(1);}

.mstep__h{display:flex;align-items:baseline;gap:.65rem;}
.mstep__n{
  font-family:var(--serif-en);font-size:.8rem;letter-spacing:.3em;
  color:var(--bronze);opacity:.6;transition:opacity .4s var(--ease);
}
.mstep.is-on .mstep__n{opacity:1;}
.mstep__t{font-family:var(--serif-kr);font-weight:700;font-size:1.2rem;color:var(--ink);}
.mstep__lead{
  font-family:var(--serif-kr);font-size:1.02rem;line-height:1.7;
  color:var(--ink);margin-bottom:.3rem;
}
.mstep__d{
  /* 설명도 앞줄과 같은 서체·크기 — 색만 한 단계 옅게 해서 순서를 알립니다 */
  font-family:var(--serif-kr);font-size:1.02rem;line-height:1.7;
  color:var(--ink-soft);
}

/* 크림 배경용 붉은 링크를 모래빛에 맞춘 것 */
.more--warm{color:var(--bronze);border-bottom-color:rgba(140,107,67,.35);}
.more--warm:hover{border-color:var(--bronze);}

@media (max-width:820px){
  .mstep{grid-template-columns:1fr;gap:.5rem;padding-left:2.4rem;}
  .mstep__h{margin-bottom:.15rem;}
}

/* ============================================================
   7b. 하위 페이지 본문 부품
   ============================================================ */

/* 세로 타임라인 — 소개 절차 7단계 */
.vflow{margin-top:clamp(2.25rem,4vw,3.25rem);position:relative;}
.vstep{
  position:relative;padding:0 0 2.4rem 3.6rem;
  border-left:1px solid var(--line);margin-left:.45rem;
}
.vstep:last-child{padding-bottom:0;border-left-color:transparent;}
.vstep::before{
  content:"";position:absolute;left:-.45rem;top:.32rem;
  width:.85rem;height:.85rem;border-radius:50%;
  background:var(--cream);border:1px solid var(--red);
}
.vstep.on::before{background:var(--red);}
.vstep__n{
  font-family:var(--serif-en);font-size:.76rem;letter-spacing:.3em;
  color:var(--red);display:block;margin-bottom:.5rem;
}
.vstep__t{font-family:var(--serif-kr);font-weight:700;font-size:1.22rem;margin-bottom:.55rem;}
.vstep__d{font-size:.95rem;line-height:1.9;color:var(--ink-soft);max-width:44rem;}
.sec--cream .vstep::before{background:var(--cream-deep);}

/* 항목 나열 — 가입 안내, 확인 범위 등 */
.deflist{margin-top:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--line);}
.deflist__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:1rem clamp(1.5rem,3vw,3rem);
  padding:1.6rem 0;border-bottom:1px solid var(--line);
}
.deflist__k{font-family:var(--serif-kr);font-weight:700;font-size:1.06rem;}
.deflist__v{font-size:.95rem;line-height:1.9;color:var(--ink-soft);}
.deflist__v ul{margin:.5rem 0 0;padding:0;list-style:none;}
.deflist__v li{position:relative;padding-left:.95rem;margin-bottom:.3rem;}
.deflist__v li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:4px;height:1px;background:var(--gold-deep);
}

/* 고지 박스 */
.note{
  margin-top:clamp(2rem,3.5vw,2.75rem);
  border:1px solid var(--line);border-left:2px solid var(--gold-deep);
  border-radius:3px;padding:1.4rem 1.6rem;
  background:rgba(227,198,143,.09);
}
.note h4{
  font-family:var(--serif-kr);font-weight:700;font-size:1rem;margin-bottom:.6rem;
}
.note p{font-size:.89rem;line-height:1.9;color:var(--ink-soft);}
.note p + p{margin-top:.7rem;}

/* ---------- 연담 소개 — 다섯 장의 이야기 (/about/) ----------
   한 장 = 사진을 바닥에 통째로 깔고 그 위에 글.
   글이 놓이는 왼쪽만 아이보리로 눌러 읽히게 하고, 오른쪽은 사진 그대로 둡니다
   (홈 04 섹션과 같은 방식). 사진은 스크롤에 따라 아주 천천히 밀립니다. */
.chap{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream);
  min-height:clamp(26rem,46vw,38rem);
  display:flex;align-items:center;
}
.chap + .chap{border-top:1px solid rgba(255,253,248,.7);}   /* 사진과 사진 사이 가는 밝은 선 */

.chap__media{position:absolute;inset:0;z-index:0;}
.chap__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 50%;
  transform:translateY(var(--py,0)) scale(1.07);   /* 시차로 밀릴 여유 */
}
.chap__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,253,248,.94) 0%,  rgba(255,253,248,.92) 30%,
    rgba(255,253,248,.84) 50%, rgba(255,253,248,.55) 68%,
    rgba(255,253,248,.16) 84%, rgba(255,253,248,0) 100%);
}
.chap--alt .chap__media::after{                   /* 짝수 장은 아주 살짝 더 눌러 리듬을 줍니다 */
  background:linear-gradient(100deg,
    rgba(250,246,238,.95) 0%,  rgba(250,246,238,.93) 30%,
    rgba(250,246,238,.86) 50%, rgba(250,246,238,.58) 68%,
    rgba(250,246,238,.18) 84%, rgba(250,246,238,0) 100%);
}

/* 왼쪽 여백에 장 번호, 오른쪽에 글 */
.chap__inner{
  position:relative;z-index:1;width:100%;
  max-width:calc(var(--shell) + 2 * var(--gut));
  margin-inline:auto;
  padding:clamp(3.2rem,6vw,5.2rem) var(--gut);
  display:grid;
  grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);
  column-gap:clamp(1rem,3vw,2.6rem);
}
.chap__no{
  grid-column:1;grid-row:1;
  font-family:var(--serif-en);font-weight:400;line-height:1;
  font-size:clamp(2rem,4vw,3.1rem);letter-spacing:.02em;
  font-variant-numeric:lining-nums;   /* 숫자를 대문자 높이로 — 01 이 OI 로 보이지 않게 */
  color:var(--gold-deep);opacity:.75;
}
.chap__t{
  grid-column:2;grid-row:1;
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.5;
  letter-spacing:-.015em;color:var(--ink);
}
/* 제목 아래 실선 — 화면에 들어오면 왼쪽부터 그어집니다 */
.chap__rule{
  grid-column:2;grid-row:2;max-width:34rem;
  height:1px;background:rgba(27,36,54,.22);
  margin-top:clamp(1.2rem,2.2vw,1.8rem);
  transform:scaleX(0);transform-origin:left center;
}
.chap__rule.is-in{transform:scaleX(1);transition:transform 1.2s var(--ease) .25s;}

.chap__body{
  grid-column:2;grid-row:3;
  max-width:40rem;margin-top:clamp(1.3rem,2.4vw,1.9rem);
}
/* 본문은 전부 같은 서체·크기 — 첫 문단만 다르게 두지 않습니다 */
.chap__body p{
  font-family:var(--serif-kr);font-size:1.1rem;line-height:1.85;color:var(--ink);
}
.chap__body p + p{margin-top:1.15rem;}
/* 세 줄로 끊어 읽는 단락 — 원문 줄바꿈을 그대로 살렸습니다 */
.chap__stanza{
  line-height:2;
  border-left:1px solid rgba(169,137,92,.55);
  padding-left:clamp(1rem,2vw,1.6rem);
}

@media (max-width:760px){
  .chap{min-height:0;}
  /* 좁은 화면에서는 글이 화면 전체를 쓰므로 사진 전체를 옅게 덮습니다 */
  .chap__media::after,
  .chap--alt .chap__media::after{background:rgba(255,253,248,.86);}
  .chap__inner{grid-template-columns:1fr;padding-block:clamp(2.6rem,7vw,3.4rem);}
  .chap__no{grid-row:1;margin-bottom:.4rem;}
  .chap__t{grid-column:1;grid-row:2;}
  .chap__rule{grid-column:1;grid-row:3;}
  .chap__body{grid-column:1;grid-row:4;}
  .chap__t br{display:none;}     /* 좁은 화면에서는 자연스럽게 흘려보냅니다 */
}

@media (max-width:640px){
  .deflist__row{grid-template-columns:1fr;gap:.6rem;}
  .vstep{padding-left:2.5rem;}
}

/* ============================================================
   8. 05 · 무료 상담 신청 — 폼 · 연락처 · 지도
   ============================================================ */
.consult{
  margin-top:clamp(2.5rem,5vw,3.75rem);
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
}

/* ---------- 폼 ---------- */
/* input 은 size 속성 때문에 고유 최소너비를 갖습니다. 그리드 칸의 기본값인
   min-width:auto 와 만나면 칸이 화면보다 넓어지므로 0 으로 내려줍니다. */
.consult > *,
.form__row > *{min-width:0;}
.field input,.field select,.field textarea{min-width:0;}

.form__row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr;}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem;}
.field label{font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft);}
.field label em{font-style:normal;color:var(--red);margin-left:.15em;}
.field .opt{color:var(--ink-mute);font-size:.78rem;margin-left:.3em;}

.field input,
.field select,
.field textarea{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);border-radius:3px;
  padding:.8rem .9rem;width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.75;}
.field select{appearance:none;background-image:none;cursor:pointer;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(169,137,92,.16);
}
.field input:user-invalid,
.field textarea:user-invalid{border-color:var(--red);}

/* 해당하는 항목 — 알약 모양 복수 선택 (홈 03 섹션의 다섯 갈래와 같은 항목입니다)
   체크박스는 화면에서 감추고 옆의 <span> 을 눌러 고르게 했습니다.
   키보드로도 고를 수 있도록 :focus-visible 테두리를 남겨 둡니다. */
.field__lab{font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft);}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{position:relative;display:inline-flex;}
.chip input{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  opacity:0;pointer-events:none;
}
.chip span{
  display:inline-block;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--cream);
  font-size:.9rem;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease);
}
.chip span:hover{border-color:var(--gold-deep);color:var(--ink);}
.chip input:checked + span{
  border-color:var(--red);color:var(--red);
  background:rgba(176,57,44,.07);
}
.chip input:focus-visible + span{
  outline:2px solid var(--gold-deep);outline-offset:2px;
}


/* 스팸 봇 함정 — 화면에서 완전히 치우되 자동입력은 유도합니다 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.check{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.86rem;line-height:1.75;color:var(--ink-soft);
  margin:.4rem 0 1.6rem;cursor:pointer;
}
.check input{margin-top:.35rem;flex:none;width:1rem;height:1rem;accent-color:var(--red);}
.check em{font-style:normal;color:var(--red);}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;}
.form__note{font-size:.8rem;color:var(--ink-mute);}
.form__status{
  margin-top:1.1rem;font-size:.9rem;line-height:1.75;
  padding:.85rem 1rem;border-radius:3px;display:none;
}
.form__status.is-ok{display:block;background:rgba(169,137,92,.13);
  border:1px solid rgba(169,137,92,.4);color:#6E5730;}
.form__status.is-err{display:block;background:rgba(176,57,44,.08);
  border:1px solid rgba(176,57,44,.35);color:var(--red-deep);}
.btn[disabled]{opacity:.55;pointer-events:none;}

/* ---------- 연락처 + 지도 ---------- */
.contact{
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:clamp(1.5rem,2.5vw,2rem);
}
.contact__h{
  font-family:var(--serif-kr);font-weight:700;font-size:1.2rem;
  margin-bottom:1.35rem;
}
.contact__list{margin:0 0 1.6rem;display:grid;gap:1.05rem;}
.contact__list li{display:grid;grid-template-columns:3.6rem 1fr;gap:.75rem;align-items:start;}
.contact__k{
  font-size:.76rem;letter-spacing:.1em;color:var(--gold-deep);
  padding-top:.2rem;
}
.contact__v{font-size:.92rem;line-height:1.75;color:var(--ink-soft);}
.contact__v a{border-bottom:1px solid var(--line);transition:border-color .25s var(--ease);}
.contact__v a:hover{border-color:var(--gold-deep);}

.map{
  position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;
  background:var(--cream-deep);border:1px solid var(--line);
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.contact .more{margin-top:1.25rem;font-size:.86rem;}

@media (max-width:900px){
  .consult{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr;gap:0;}
  .form__foot .btn{width:100%;justify-content:center;}
  .map{aspect-ratio:3/2;}
}

/* ============================================================
   9. 푸터
   ============================================================ */
.foot{
  background:var(--ink);color:rgba(254,252,247,.62);
  padding:clamp(3.25rem,6vw,5rem) var(--gut) 2rem;font-size:.86rem;
}
.foot__shell{
  max-width:var(--shell);margin-inline:auto;
  display:grid;gap:2.5rem clamp(2rem,5vw,4rem);
  grid-template-columns:1.4fr 1fr 1.2fr;
}
.foot__brand img{width:200px;filter:brightness(0) invert(1);opacity:.9;}
.foot__tag{margin-top:1.1rem;font-size:.84rem;color:rgba(254,252,247,.55);}

.foot__col h4{
  font-family:var(--serif-kr);font-weight:700;font-size:.98rem;
  color:var(--cream);margin-bottom:1.05rem;
}
.foot__col a,.foot__col p{
  display:block;font-size:.86rem;line-height:1.9;color:rgba(254,252,247,.62);
  transition:color .25s var(--ease);
}
.foot__col a:hover{color:var(--gold);}
.foot__col p{margin-bottom:.5rem;}

.foot__legal{
  max-width:var(--shell);margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top:1.75rem;border-top:1px solid rgba(254,252,247,.14);
  font-size:.78rem;line-height:1.9;color:rgba(254,252,247,.42);
}
.foot__copy{margin-top:1rem;}
.foot__legal a{border-bottom:1px solid rgba(254,252,247,.22);}
.foot__legal a:hover{color:var(--gold);}

@media (max-width:820px){
  .foot__shell{grid-template-columns:1fr 1fr;}
  .foot__brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .foot__shell{grid-template-columns:1fr;gap:2rem;}
}

/* ============================================================
   신원 확인 — 확인 항목 카드 아홉 장 (/verify/)
   질문지 PART A ~ I 를 3×3 카드로. 카드 = 왼쪽 정사각 사진 + 번호·제목·설명.
   화면에 들어오면 줄 순서대로 떠오르고(.rise + nth-child 지연),
   마우스를 올리면 카드가 살짝 들리며 사진이 천천히 커지고 제목 밑에 금선이 그어집니다.
   ============================================================ */
.vgrid{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding:clamp(3.6rem,7vw,6rem) var(--gut) clamp(4rem,7.5vw,6.5rem);
}
/* 바탕 — 흐린 꽃 사진(verify-grid-bg.jpg)을 통째로 깔고,
   아래 가장자리를 크림색으로 풀어 맨 아래 꽃 띠(.vcta)로 이어지게 합니다 */
.vgrid__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/img/verify-grid-bg.jpg") center/cover no-repeat;
}
.vgrid__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(251,246,232,.35) 0%, rgba(251,246,232,.08) 18%,
    rgba(251,246,232,.08) 72%, rgba(246,241,231,.75) 92%, var(--cream-deep) 100%);
}
.vgrid__shell{position:relative;z-index:1;max-width:var(--shell);margin-inline:auto;}

/* ---------- 머리글 ---------- */
.vgrid__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.4rem,4.5vw,3.6rem);}
.vgrid__eyebrow{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.1rem;
}
.vgrid__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:1rem;
}
.vgrid__lede{
  font-family:var(--serif-kr);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.9;
  color:var(--ink-soft);
}
.vgrid__lede + .vgrid__lede{margin-top:.45rem;}

/* ---------- 카드 격자 ---------- */
.vcards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.vcard{
  position:relative;
  display:grid;grid-template-columns:minmax(0,7.2rem) minmax(0,1fr);
  gap:clamp(.9rem,1.6vw,1.3rem);align-items:center;
  padding:clamp(.9rem,1.5vw,1.2rem);
  background:rgba(255,253,249,.92);
  border:1px solid rgba(169,137,92,.16);
  border-radius:1.15rem;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 14px 34px -22px rgba(70,60,40,.28);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
/* 등장 — .rise 의 기본 이동(transition)은 끄고, 대신 keyframe 으로 떠오릅니다.
   fill 을 backwards 로 두어 끝난 뒤에는 보통 스타일로 돌아오므로 hover 가 그대로 듣습니다.
   같은 줄의 둘째·셋째 카드는 조금씩 늦게 나옵니다. */
.vcard.rise{opacity:1;transform:none;}
.vcard.rise:not(.is-in){opacity:0;}
.vcard.rise.is-in{
  animation:vcardin .9s var(--ease) backwards;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.vcard:nth-child(3n+2).is-in{animation-delay:.12s;}
.vcard:nth-child(3n+3).is-in{animation-delay:.24s;}
@keyframes vcardin{
  from{opacity:0;transform:translateY(22px) scale(.985);}
  to{opacity:1;transform:none;}
}

@media (hover:hover){
  .vcard:hover{
    transform:translateY(-6px);
    border-color:rgba(169,137,92,.34);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 44px -22px rgba(70,60,40,.4);
  }
  .vcard:hover .vcard__img img{transform:scale(1.08);}
  .vcard:hover .vcard__t::after{transform:scaleX(1);}
  .vcard:hover .vcard__n{color:var(--red);}
}

/* 사진 — 정사각, 둥근 모서리, 아주 옅은 안쪽 테두리 */
.vcard__img{
  position:relative;aspect-ratio:1;overflow:hidden;border-radius:.85rem;
  background:var(--cream-deep);
  box-shadow:0 0 0 1px rgba(169,137,92,.12) inset;
}
.vcard__img img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.001);transition:transform 1.6s var(--ease);
}
/* 사진 위 살짝 도는 빛 — 등장할 때 한 번 지나갑니다 */
.vcard__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.vcard.is-in .vcard__img::after{animation:vsheen 1.5s var(--ease) .5s 1;}
.vcard:nth-child(3n+2).is-in .vcard__img::after{animation-delay:.62s;}
.vcard:nth-child(3n+3).is-in .vcard__img::after{animation-delay:.74s;}
@keyframes vsheen{to{transform:translateX(120%);}}

/* 글 */
.vcard__body{min-width:0;}
.vcard__n{
  display:block;font-family:var(--serif-en);font-size:.82rem;letter-spacing:.3em;
  font-variant-numeric:lining-nums;color:var(--gold-deep);
  margin-bottom:.45rem;transition:color .4s var(--ease);
}
.vcard__t{
  position:relative;display:inline-block;
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.05rem,1.35vw,1.18rem);line-height:1.45;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:.5rem;padding-bottom:.15rem;
}
/* 제목 밑 금선 — 마우스를 올리면 왼쪽부터 그어집니다 */
.vcard__t::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--ease);
}
.vcard__d{
  font-family:var(--serif-kr);font-size:.92rem;line-height:1.75;color:var(--ink-soft);
}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .vcards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vcard:nth-child(3n+2).is-in,.vcard:nth-child(3n+3).is-in{animation-delay:0s;}
  .vcard:nth-child(even).is-in{animation-delay:.12s;}
  .vcard:nth-child(3n+2).is-in .vcard__img::after,
  .vcard:nth-child(3n+3).is-in .vcard__img::after{animation-delay:.5s;}
  .vcard:nth-child(even).is-in .vcard__img::after{animation-delay:.62s;}
}
@media (max-width:600px){
  .vcards{grid-template-columns:1fr;gap:.85rem;}
  .vcard{grid-template-columns:minmax(0,6rem) minmax(0,1fr);}
  .vcard:nth-child(even).is-in{animation-delay:0s;}
  .vcard:nth-child(even).is-in .vcard__img::after{animation-delay:.5s;}
}

/* ============================================================
   신원 확인 — 맨 아래 띠. 꽃 사진 위 가운데 정렬, 다른 페이지와 같은 붉은 버튼
   ============================================================ */
.vcta{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(17rem,32vw,23rem);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(3rem,6vw,4.5rem) var(--gut);
  background:var(--cream-deep);text-align:center;
}
.vcta__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  transform:translateY(var(--py,0)) scale(1.08);   /* 시차로 밀릴 여유 */
}
/* 글자가 놓이는 가운데만 아이보리로 살짝 눌러 읽히게 합니다 */
.vcta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 80% at 50% 50%, rgba(255,253,248,.82) 0%, rgba(255,253,248,.55) 55%, rgba(255,253,248,0) 100%),
    linear-gradient(to bottom, var(--cream-deep) 0%, rgba(246,241,231,.7) 14%, rgba(246,241,231,0) 42%, rgba(251,246,232,0) 70%, rgba(251,246,232,.35));
}
.vcta__inner{position:relative;z-index:2;max-width:38rem;}
.vcta__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:.8rem;
}
.vcta__d{
  font-family:var(--serif-kr);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.85;
  color:var(--ink-soft);margin-bottom:1.9rem;
}
.vcta__arrow{display:inline-block;transition:transform .4s var(--ease);}
.vcta .btn--primary:hover .vcta__arrow{transform:translateX(4px);}

/* ============================================================
   소개 절차 — 주 단위 타임라인 (/process/)
   왼쪽 눈금 열(.pstep__when)에 1주~6주 눈금을 세우고, 그 오른쪽 세로선을 따라
   일곱 단계가 내려갑니다. 상담부터 첫 소개(04)까지가 약 6주이고,
   그 뒤(05~07)는 정해진 기간이 없으므로 눈금 없이 점선으로 이어집니다.
   진행선은 스크롤에 맞춰 --p (0~1) 로 차오르고(main.js 6e), 선이 지나간 단계와
   눈금은 is-on 을 받아 점이 채워지고 사진이 제 색으로 켜집니다.
   각 단계의 눈금 위치: top = --k / --n (HTML 의 style 로 넘깁니다).
   ============================================================ */
.ptl{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding:clamp(3.6rem,7vw,6rem) var(--gut) clamp(4rem,7.5vw,6.5rem);
}
/* 바탕 — 위쪽 오른편에 아주 옅은 샴페인빛, 아래 가장자리는 맨 아래 사진 띠 색으로 */
.ptl::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 38% at 88% 0%, rgba(227,198,143,.22), rgba(227,198,143,0) 70%),
    linear-gradient(to bottom, var(--cream) 0%, var(--paper) 16%, var(--paper) 86%, var(--cream-deep) 100%);
}
.ptl__shell{position:relative;z-index:1;max-width:var(--shell);margin-inline:auto;}

/* ---------- 머리글 ---------- */
.ptl__head{text-align:center;max-width:46rem;margin:0 auto clamp(3rem,5.5vw,4.6rem);}
.ptl__eyebrow{
  font-family:var(--serif-en);font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.1rem;
}
.ptl__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:1rem;
}
.ptl__lede{
  font-family:var(--serif-kr);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.9;
  color:var(--ink-soft);
}

/* ---------- 목록 ---------- */
.ptl__list{
  --p:0;                  /* main.js 6e 가 스크롤에 맞춰 0 → 1 로 올립니다 */
  --when:6.6rem;          /* 눈금 열 너비 — 세로선은 이 열의 오른쪽 가장자리에 섭니다 */
  position:relative;list-style:none;margin:0;padding:0;
}
/* 차오르는 진행선 — 목록 전체를 따라 하나로 */
.ptl__list::after{
  content:"";position:absolute;z-index:1;
  left:calc(var(--when) - 1px);top:.5rem;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--bronze),rgba(140,107,67,.62));
  transform:scaleY(var(--p));transform-origin:top center;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}

.pstep{
  position:relative;
  display:grid;
  grid-template-columns:var(--when) minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(1.4rem,3vw,3rem);
  padding:0 0 clamp(3.2rem,5.5vw,5rem);
}
.pstep:last-child{padding-bottom:0;}
/* 바탕 선 — 단계마다 제 구간을 그립니다. 첫 소개 이후는 점선 */
.pstep::before{
  content:"";position:absolute;z-index:0;
  left:calc(var(--when) - .5px);top:0;bottom:0;width:1px;
  background:rgba(140,107,67,.28);
}
.pstep:first-child::before{top:.5rem;}
.pstep--after::before{
  background:repeating-linear-gradient(to bottom,rgba(140,107,67,.42) 0 4px,transparent 4px 10px);
}
.pstep:last-child::before{
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}

/* ---------- 눈금 열 ---------- */
.pstep__when{position:relative;align-self:stretch;}
.ptick{
  position:absolute;right:0;top:calc(var(--k) / var(--n) * 100%);
  display:flex;flex-direction:column;align-items:flex-end;
  padding-right:1.35rem;transform:translateY(-50%);
  white-space:nowrap;line-height:1.25;
  color:var(--bronze);opacity:.5;
  transition:opacity .5s var(--ease);
}
.ptick.is-on{opacity:1;}
.ptick b{
  font-family:var(--serif-kr);font-weight:400;font-size:.8rem;letter-spacing:.04em;
  font-variant-numeric:lining-nums;
}
.ptick i{font-style:normal;font-family:var(--serif-kr);font-size:.7rem;color:var(--ink-mute);margin-top:.15rem;text-align:right;}
/* 작은 눈금 — 세로선을 가로지르는 짧은 금 */
.ptick::after{
  content:"";position:absolute;top:50%;right:-.35rem;
  width:.7rem;height:1px;background:rgba(140,107,67,.75);
  transform:translateY(-50%);
}
/* 단계 시작점 — 테두리만 있는 점, 진행선이 지나가면 안이 채워집니다 */
.ptick--major{opacity:.78;}
.ptick--major b{font-weight:700;font-size:.92rem;}
.ptick--major::after{
  right:calc(-.45rem);width:.9rem;height:.9rem;border-radius:50%;
  background:var(--paper);border:1px solid rgba(140,107,67,.5);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.ptick--major::before{
  content:"";position:absolute;top:50%;right:calc(-.2rem);
  width:.4rem;height:.4rem;border-radius:50%;background:var(--bronze);
  transform:translateY(-50%) scale(0);transition:transform .45s var(--ease) .05s;
}
.ptick--major.is-on::after{border-color:var(--bronze);transform:translateY(-50%) scale(1.08);}
.ptick--major.is-on::before{transform:translateY(-50%) scale(1);}

/* 첫 소개(04, 6주) 시작점은 조금 더 큰 점 + 켜질 때 물결 하나 */
.pstep--mark .ptick--major::after{
  right:calc(-.6rem);width:1.2rem;height:1.2rem;border-color:rgba(140,107,67,.7);
}
.pstep--mark .ptick--major::before{right:calc(-.27rem);width:.54rem;height:.54rem;}
.pstep--mark .ptick--major.is-on::after{animation:pring 1.4s var(--ease) 1;}
@keyframes pring{
  0%{box-shadow:0 0 0 0 rgba(140,107,67,.45);}
  100%{box-shadow:0 0 0 1.1rem rgba(140,107,67,0);}
}
.pstep--mark .ptick--major{opacity:.9;}
.pstep--mark .ptick b{color:var(--ink);font-size:1.02rem;}
.pstep--mark .ptick i{color:var(--bronze);font-weight:700;font-size:.76rem;}
/* 첫 소개 표시선 — 점에서 사진 쪽으로 짧게 그어지는 이정표 */
.pstep--mark::after{
  content:"";position:absolute;z-index:1;top:0;
  left:calc(var(--when) + .75rem);width:clamp(.6rem,3vw - 1.1rem,2rem);height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease) .15s;
}
.pstep--mark.is-on::after{transform:scaleX(1);}
/* 첫 소개 이후 — 라벨은 눌러 두고 점만 남깁니다 */
.pstep--after .ptick--major b{font-weight:400;font-size:.84rem;}

/* ---------- 사진 ---------- */
.pstep__img{
  margin:0;align-self:start;
  aspect-ratio:3/2;overflow:hidden;border-radius:1rem;
  background:var(--cream-deep);
  box-shadow:0 0 0 1px rgba(169,137,92,.14) inset, 0 18px 40px -26px rgba(70,60,40,.32);
}
.pstep__img img{
  width:100%;height:100%;object-fit:cover;
  /* 진행선이 닿기 전에는 색을 눌러 두었다가, 닿으면 제 색으로 켜집니다 */
  filter:saturate(.5) brightness(1.02);opacity:.72;transform:scale(1.04);
  transition:filter 1.1s var(--ease),opacity 1.1s var(--ease),transform 1.8s var(--ease);
}
.pstep.is-on .pstep__img img{filter:none;opacity:1;transform:none;}

/* ---------- 글 ---------- */
.pstep__body{align-self:center;min-width:0;max-width:34rem;}
.pstep__h{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.9rem;}
.pstep__n{
  font-family:var(--serif-en);font-size:.84rem;letter-spacing:.3em;
  font-variant-numeric:lining-nums;color:var(--bronze);opacity:.55;
  transition:opacity .5s var(--ease);
}
.pstep.is-on .pstep__n{opacity:1;}
.pstep__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.4;letter-spacing:-.015em;color:var(--ink);
}
.pstep__lead{
  font-family:var(--serif-kr);font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.8;
  color:var(--ink);margin-bottom:.85rem;
}
.pstep__d{
  font-family:var(--serif-kr);font-size:.98rem;line-height:1.85;color:var(--ink-soft);
}
.pstep__d + .pstep__d{margin-top:.35rem;}

/* 첫 소개 표지 — '6주 · 첫 소개' 알약 */
.pstep__flag{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:1rem;padding:.32rem .95rem .3rem;
  border:1px solid rgba(140,107,67,.45);border-radius:999px;
  font-family:var(--serif-kr);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--bronze);background:rgba(255,253,248,.7);
  opacity:.7;transition:opacity .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.pstep__flag span{
  font-family:var(--serif-en);font-weight:500;font-size:.9rem;letter-spacing:.1em;
  font-variant-numeric:lining-nums;
  padding-right:.55rem;border-right:1px solid rgba(140,107,67,.4);
}
.pstep.is-on .pstep__flag{opacity:1;border-color:var(--bronze);background:rgba(255,253,248,.95);}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .ptl__list{--when:5.2rem;}
  .pstep{grid-template-columns:var(--when) minmax(0,1fr);row-gap:1.3rem;}
  .pstep__img{grid-column:2;grid-row:1;max-width:34rem;}
  .pstep__body{grid-column:2;grid-row:2;align-self:start;}
  .ptick{padding-right:1.1rem;}
}
@media (max-width:640px){
  .ptl__br,.phero__d br,.tail__t br,.tail__d br{display:none;}   /* 좁은 화면에서는 자연스럽게 흘려보냅니다 */
  .ptl__list{--when:4.4rem;}
  .ptick{padding-right:.95rem;}
  .ptick b{font-size:.74rem;}
  .ptick--major b{font-size:.84rem;}
  .ptick i{font-size:.64rem;}
  .pstep__img{border-radius:.8rem;}
}
@media (max-width:420px){
  .ptl__list{--when:3.6rem;}
  .pstep--after .ptick i{display:none;}   /* '두 분의 속도에 맞춰' 는 자리가 없어 감춥니다 */
}

/* ---------- 7. Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero__cue i::after{animation:none;}
  .reveal,.rise{opacity:1;transform:none;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================================================
   가입 안내 (/membership/) — 2026-09-17
   히어로(사진 드리프트) · 01 가입 자격(사진 액자 + 다섯 항목) ·
   02 가입 절차(네 단계 카드 + 가로 진행선) · 03 원칙(사진 바탕 + 카드 넷) · 사진 띠
   ============================================================ */

/* ---------- 히어로 — 사진이 14초 동안 아주 천천히 밀려 들어옵니다 ---------- */
.phero--drift .phero__img{
  object-position:center 60%;
  animation:pherodrift 14s var(--ease) both;
}
@keyframes pherodrift{
  from{transform:scale(1.14) translateX(1.2%);}
  to{transform:scale(1.04) translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .phero--drift .phero__img{animation:none;transform:none;}
}

/* ============================================================
   01 가입 자격 — 왼쪽 사진 액자(금선이 한 뼘 바깥에서 자리잡습니다)
   + 오른쪽 다섯 항목. 항목은 위에서부터 차례로 떠오르며, 밑줄이 왼쪽부터 그어집니다.
   ============================================================ */
.mq{
  position:relative;overflow:hidden;
  background:var(--cream);
  padding:clamp(4.5rem,8.5vw,7.5rem) var(--gut);
}
.mq::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 0% 20%, rgba(227,198,143,.18), rgba(227,198,143,0) 70%),
    linear-gradient(to bottom, var(--cream) 0%, var(--cream) 80%, var(--paper) 100%);
}
.mq__shell{
  position:relative;z-index:1;max-width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}

/* 사진 액자 */
.mq__fig{position:relative;margin:0;}
.mq__frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:1rem;
  background:var(--cream-deep);
  box-shadow:0 0 0 1px rgba(169,137,92,.14) inset, 0 34px 64px -36px rgba(70,60,40,.42);
}
.mq__frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:translateY(var(--py,0)) scale(1.12);   /* 시차로 밀릴 여유 */
}
/* 금선 — 사진보다 한 뼘 바깥. 화면에 들어오면 살짝 어긋난 자리에서 제자리로 옵니다 */
.mq__line{
  position:absolute;inset:-.9rem;border-radius:1.5rem;pointer-events:none;
  border:1px solid rgba(169,137,92,.55);
  opacity:0;transform:translate(.9rem,.9rem);
  transition:opacity 1.1s var(--ease) .35s, transform 1.4s var(--ease) .35s;
}
.mq__fig.is-in .mq__line{opacity:1;transform:none;}
@media (hover:hover){
  .mq__fig:hover .mq__line{transform:translate(.35rem,.35rem);transition-delay:0s;transition-duration:.9s;}
}

/* 글 */
.mq__body{min-width:0;}
.mq__lede{
  font-family:var(--serif-kr);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.7;
  letter-spacing:-.01em;color:var(--ink);
  margin-bottom:clamp(1.8rem,3vw,2.4rem);
}
.mq__list{margin:0;border-top:1px solid rgba(169,137,92,.4);}
.mq__row{
  position:relative;
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:.4rem 1.5rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}
/* 청동 밑줄 — 항목이 떠오른 뒤 왼쪽부터 그어집니다 (항목 순서대로) */
.mq__row::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--ease) .3s;
}
.mq__row.is-in::after{transform:scaleX(1);}
.mq__row.d1::after{transition-delay:.38s} .mq__row.d2::after{transition-delay:.46s}
.mq__row.d3::after{transition-delay:.54s} .mq__row.d4::after{transition-delay:.62s}
.mq__row dt{
  display:flex;align-items:baseline;gap:.65rem;
  font-family:var(--serif-kr);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.mq__row dt::before{
  content:"";flex:none;width:.36rem;height:.36rem;border-radius:50%;
  background:var(--bronze);transform:translateY(-.15em);
}
.mq__row dd{
  margin:0;font-family:var(--serif-kr);font-size:.98rem;line-height:1.8;color:var(--ink-soft);
}
.mq__foot{margin-top:1.3rem;font-size:.86rem;line-height:1.8;color:var(--ink-mute);}

@media (max-width:900px){
  .mq__shell{grid-template-columns:1fr;gap:2.6rem;}
  .mq__fig{max-width:30rem;margin-inline:auto;width:100%;}
  .mq__frame{aspect-ratio:4/3;}
  .mq__frame img{object-position:center 60%;}
}
@media (max-width:560px){
  .mq__row{grid-template-columns:1fr;gap:.25rem;padding:1rem 0;}
  .mq__row dd{padding-left:1.01rem;}   /* 점 너비만큼 들여 제목과 줄을 맞춥니다 */
}

/* ============================================================
   02 가입 절차 — 네 단계 카드. 카드 위로 가로 진행선이 지나가고,
   화면에 들어오면 선이 왼쪽부터 그어지며 점이 차례로 켜지고 카드가 따라 떠오릅니다.
   점은 각 카드의 가운데 위에 섭니다: 선의 양끝 = 첫 카드·끝 카드의 가운데.
   ============================================================ */
.mj{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding:clamp(4.5rem,8.5vw,7.5rem) var(--gut);
}
.mj::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 92% 0%, rgba(227,198,143,.22), rgba(227,198,143,0) 70%),
    linear-gradient(to bottom, var(--paper) 0%, var(--paper) 88%, var(--cream-deep) 100%);
}
.mj__shell{position:relative;z-index:1;max-width:var(--shell);margin-inline:auto;}
.mj__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.8rem,5vw,4.2rem);}
.mj__lede{
  font-family:var(--serif-kr);font-size:clamp(1.1rem,1.8vw,1.42rem);line-height:1.7;
  letter-spacing:-.01em;color:var(--ink);
}

.mj__steps{
  --g:clamp(1rem,2vw,1.6rem);   /* 카드 사이 간격 — 선의 양끝 계산에 씁니다 */
  --lead:2.6rem;                /* 진행선에서 카드 윗변까지 */
  list-style:none;margin:0;padding:var(--lead) 0 0;
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);
}
/* 바탕 선 + 그어지는 선 */
.mj__steps::before,.mj__steps::after{
  content:"";position:absolute;top:0;height:1px;
  left:calc((100% - 3 * var(--g)) / 8);right:calc((100% - 3 * var(--g)) / 8);
}
.mj__steps::before{background:rgba(140,107,67,.28);}
.mj__steps::after{
  background:var(--bronze);transform:scaleX(0);transform-origin:left center;
  transition:transform 2.1s var(--ease) .15s;
}
.mj__steps.is-in::after{transform:scaleX(1);}

/* 카드 */
.mj__step{
  position:relative;
  background:rgba(255,253,249,.92);
  border:1px solid rgba(169,137,92,.16);border-radius:1.1rem;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 36px -24px rgba(70,60,40,.3);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
/* 등장 — 선이 지나가는 박자에 맞춰 왼쪽 카드부터 */
.mj__steps:not(.is-in) .mj__step{opacity:0;}
.mj__steps.is-in .mj__step{animation:vcardin .9s var(--ease) backwards;}
.mj__steps.is-in .mj__step:nth-child(1){animation-delay:.2s;}
.mj__steps.is-in .mj__step:nth-child(2){animation-delay:.65s;}
.mj__steps.is-in .mj__step:nth-child(3){animation-delay:1.1s;}
.mj__steps.is-in .mj__step:nth-child(4){animation-delay:1.55s;}

/* 점에서 카드로 내려오는 짧은 세로선 */
.mj__step::before{
  content:"";position:absolute;left:50%;top:calc(-1 * var(--lead) + .5rem);
  width:1px;height:calc(var(--lead) - .5rem);
  background:rgba(140,107,67,.4);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .7s var(--ease);
}
/* 점 — 테두리만 있다가 선이 닿으면 안이 채워지고 물결이 한 번 번집니다 */
.mj__dot{
  position:absolute;left:50%;top:calc(-1 * var(--lead));z-index:2;
  width:1rem;height:1rem;border-radius:50%;
  background:var(--paper);border:1px solid rgba(140,107,67,.5);
  transform:translate(-50%,-50%);
  transition:border-color .4s var(--ease);
}
.mj__dot::after{
  content:"";position:absolute;inset:.22rem;border-radius:50%;background:var(--bronze);
  transform:scale(0);transition:transform .45s var(--ease);
}
.mj__steps.is-in .mj__step:nth-child(1) .mj__dot,.mj__steps.is-in .mj__step:nth-child(1)::before{transition-delay:.25s;}
.mj__steps.is-in .mj__step:nth-child(2) .mj__dot,.mj__steps.is-in .mj__step:nth-child(2)::before{transition-delay:.75s;}
.mj__steps.is-in .mj__step:nth-child(3) .mj__dot,.mj__steps.is-in .mj__step:nth-child(3)::before{transition-delay:1.25s;}
.mj__steps.is-in .mj__step:nth-child(4) .mj__dot,.mj__steps.is-in .mj__step:nth-child(4)::before{transition-delay:1.75s;}
.mj__steps.is-in .mj__step:nth-child(1) .mj__dot::after{transition-delay:.3s;}
.mj__steps.is-in .mj__step:nth-child(2) .mj__dot::after{transition-delay:.8s;}
.mj__steps.is-in .mj__step:nth-child(3) .mj__dot::after{transition-delay:1.3s;}
.mj__steps.is-in .mj__step:nth-child(4) .mj__dot::after{transition-delay:1.8s;}
.mj__steps.is-in .mj__dot{border-color:var(--bronze);}
.mj__steps.is-in .mj__dot::after{transform:scale(1);}
.mj__steps.is-in .mj__step::before{transform:scaleY(1);}
.mj__steps.is-in .mj__step:nth-child(1) .mj__dot{animation:pring 1.4s var(--ease) .3s 1;}
.mj__steps.is-in .mj__step:nth-child(2) .mj__dot{animation:pring 1.4s var(--ease) .8s 1;}
.mj__steps.is-in .mj__step:nth-child(3) .mj__dot{animation:pring 1.4s var(--ease) 1.3s 1;}
.mj__steps.is-in .mj__step:nth-child(4) .mj__dot{animation:pring 1.4s var(--ease) 1.8s 1;}

/* 사진 */
.mj__img{
  margin:0;aspect-ratio:3/2;overflow:hidden;
  border-radius:1.1rem 1.1rem 0 0;background:var(--cream-deep);
}
.mj__img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 1.6s var(--ease);
}
/* 글 */
.mj__body{padding:1.25rem clamp(1.1rem,1.6vw,1.5rem) clamp(1.4rem,2vw,1.8rem);}
.mj__n{
  display:block;font-family:var(--serif-en);font-size:.82rem;letter-spacing:.3em;
  font-variant-numeric:lining-nums;color:var(--bronze);margin-bottom:.4rem;
  transition:color .4s var(--ease);
}
.mj__t{
  position:relative;display:inline-block;
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.4;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:.65rem;padding-bottom:.15rem;
}
.mj__t::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--ease);
}
.mj__d{font-family:var(--serif-kr);font-size:.93rem;line-height:1.8;color:var(--ink-soft);}
.mj__d + .mj__d{margin-top:.4rem;}

@media (hover:hover){
  .mj__step:hover{
    transform:translateY(-6px);
    border-color:rgba(169,137,92,.34);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 46px -24px rgba(70,60,40,.42);
  }
  .mj__step:hover .mj__img img{transform:scale(1.07);}
  .mj__step:hover .mj__t::after{transform:scaleX(1);}
  .mj__step:hover .mj__n{color:var(--red);}
}

@media (max-width:1000px){
  .mj__steps{grid-template-columns:repeat(2,minmax(0,1fr));--lead:0rem;}
  /* 두 줄이 되면 가로선이 이어지지 않으므로 선·점을 거둡니다 */
  .mj__steps::before,.mj__steps::after,.mj__step::before,.mj__dot{display:none;}
  .mj__steps.is-in .mj__step:nth-child(1){animation-delay:0s;}
  .mj__steps.is-in .mj__step:nth-child(2){animation-delay:.14s;}
  .mj__steps.is-in .mj__step:nth-child(3){animation-delay:.28s;}
  .mj__steps.is-in .mj__step:nth-child(4){animation-delay:.42s;}
}
@media (max-width:640px){
  .mj__br{display:none;}
}
@media (max-width:560px){
  .mj__steps{grid-template-columns:1fr;gap:.9rem;}
  .mj__step{display:grid;grid-template-columns:minmax(0,7.4rem) minmax(0,1fr);align-items:center;}
  .mj__img{aspect-ratio:auto;height:100%;align-self:stretch;border-radius:1.1rem 0 0 1.1rem;}
  .mj__body{padding:1rem 1.1rem 1.1rem 1rem;}
}

/* ============================================================
   03 원칙 — 테라스 사진을 바닥에 통째로 깔고(위쪽은 아이보리로 눌러 글이 읽히게),
   그 위에 반투명 카드 네 장. 카드는 줄 순서대로 떠오르고 번호 위에 청동 선이 그어집니다.
   아래 가장자리는 --cream-deep 으로 풀어 맨 아래 사진 띠와 이음새 없이 만납니다.
   ============================================================ */
.mr{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream-deep);
  padding:clamp(4.5rem,8.5vw,7.5rem) var(--gut) clamp(4.5rem,8vw,7rem);
}
.mr__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  transform:translateY(var(--py,0)) scale(1.08);   /* 시차로 밀릴 여유 */
}
.mr::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(246,241,231,.97) 0%, rgba(246,241,231,.9) 26%,
    rgba(246,241,231,.6) 52%, rgba(246,241,231,.5) 90%, var(--cream-deep) 100%);
}
.mr__shell{position:relative;z-index:2;max-width:var(--shell);margin-inline:auto;}
.mr__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.6rem,4.5vw,3.8rem);}
.mr__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:1.1rem;
}
.mr__lede{
  font-family:var(--serif-kr);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.9;
  color:var(--ink-soft);
}
.mr__lede + .mr__lede{margin-top:.45rem;}

.mr__cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);
}
.mr__card{
  position:relative;
  padding:clamp(1.4rem,2vw,1.9rem) clamp(1.2rem,1.8vw,1.6rem) clamp(1.5rem,2.2vw,2rem);
  background:rgba(255,253,249,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.75);border-radius:1.1rem;
  box-shadow:0 0 0 1px rgba(169,137,92,.16), 0 20px 44px -28px rgba(70,60,40,.38);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
/* 등장 — /verify/ 카드와 같은 방식 (keyframe, 끝나면 보통 스타일로 돌아와 hover 가 듣습니다) */
.mr__card.rise{opacity:1;transform:none;}
.mr__card.rise:not(.is-in){opacity:0;}
.mr__card.rise.is-in{
  animation:vcardin .9s var(--ease) backwards;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
.mr__card:nth-child(2).is-in{animation-delay:.12s;}
.mr__card:nth-child(3).is-in{animation-delay:.24s;}
.mr__card:nth-child(4).is-in{animation-delay:.36s;}

.mr__n{
  display:block;font-family:var(--serif-en);font-size:.82rem;letter-spacing:.3em;
  font-variant-numeric:lining-nums;color:var(--bronze);margin-bottom:.55rem;
}
/* 번호 위 청동 선 — 카드가 떠오른 뒤 왼쪽부터 그어집니다 */
.mr__n::before{
  content:"";display:block;width:2rem;height:1px;background:var(--bronze);
  margin-bottom:.95rem;transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--ease) .5s;
}
.mr__card.is-in .mr__n::before{transform:scaleX(1);}
.mr__card:nth-child(2).is-in .mr__n::before{transition-delay:.62s;}
.mr__card:nth-child(3).is-in .mr__n::before{transition-delay:.74s;}
.mr__card:nth-child(4).is-in .mr__n::before{transition-delay:.86s;}
.mr__ct{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.08rem,1.4vw,1.22rem);line-height:1.45;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:.65rem;
}
.mr__cd{font-family:var(--serif-kr);font-size:.92rem;line-height:1.8;color:var(--ink-soft);}

@media (hover:hover){
  .mr__card:hover{
    transform:translateY(-6px);background:rgba(255,253,249,.94);
    box-shadow:0 0 0 1px rgba(169,137,92,.3), 0 30px 50px -28px rgba(70,60,40,.45);
  }
}

/* 하단 작은 문구 — 사진 위에 놓이므로 옅은 아이보리 판을 깔아 읽히게 합니다 */
.mr__foot{
  margin:clamp(1.8rem,3vw,2.4rem) auto 0;max-width:46rem;text-align:center;
  padding:.85rem 1.5rem;border-radius:.8rem;
  background:rgba(255,253,249,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(169,137,92,.14);
  font-size:.84rem;line-height:1.8;color:var(--ink-soft);
}

@media (max-width:1000px){
  .mr__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mr__card:nth-child(3).is-in{animation-delay:0s;}
  .mr__card:nth-child(4).is-in{animation-delay:.12s;}
  .mr__card:nth-child(3).is-in .mr__n::before{transition-delay:.5s;}
  .mr__card:nth-child(4).is-in .mr__n::before{transition-delay:.62s;}
}
@media (max-width:560px){
  .mr__cards{grid-template-columns:1fr;gap:.85rem;}
  .mr__card:nth-child(n).is-in{animation-delay:0s;}
  .mr__card:nth-child(n).is-in .mr__n::before{transition-delay:.5s;}
}

/* ---------- 맨 아래 띠 — 위쪽을 --cream-deep 에서 시작해 03 과 이음새 없이 ---------- */
.tail--mem .tail__bg{object-position:center 45%;}
.tail--mem::after{
  background:
    radial-gradient(ellipse 48% 78% at 50% 52%, rgba(255,253,248,.84) 0%, rgba(255,253,248,.6) 55%, rgba(255,253,248,0) 100%),
    linear-gradient(to bottom, var(--cream-deep) 0%, rgba(246,241,231,.6) 9%, rgba(246,241,231,0) 30%, rgba(254,252,247,0) 72%, rgba(254,252,247,.3));
}

/* ============================================================
   인연의 여정 (/paths/*) — 2026-09-17
   히어로(사진 드리프트 + 글 등장) · 연담이 살펴보는 것(사진 바탕 + 카드 넷 + 맺음말)
   다섯 페이지 모두 gen-paths.js 로 찍어냅니다.
   ============================================================ */

/* ---------- 히어로 — 두 줄 문장이 제목이라 조금 더 높고, 글은 위에서부터 차례로 떠오릅니다 ---------- */
.phero--path{min-height:clamp(26rem,66svh,37rem);}
.phero--path .phero__img{object-position:center 55%;}
.phero--path .phero__t{
  font-size:clamp(1.75rem,4.3vw,3.05rem);line-height:1.38;letter-spacing:-.012em;
}
.phero--path .phero__d{max-width:40rem;margin-top:1.35rem;}
.phero--path .phero__eyebrow em{letter-spacing:.3em;font-family:var(--serif-en);font-size:.92rem;font-variant-numeric:lining-nums;}
.phero--path .crumb,.phero--path .phero__eyebrow,.phero--path .phero__t,.phero--path .phero__d{
  animation:pathin 1.1s var(--ease) both;
}
.phero--path .crumb{animation-delay:.15s;}
.phero--path .phero__eyebrow{animation-delay:.3s;}
.phero--path .phero__t{animation-delay:.45s;}
.phero--path .phero__d{animation-delay:.7s;}
/* 눈썹 줄의 금선도 왼쪽부터 그어집니다 */
.phero--path .phero__eyebrow::before{transform:scaleX(0);transform-origin:left center;animation:pathrule 1s var(--ease) .55s both;}
@keyframes pathin{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}
@keyframes pathrule{to{transform:scaleX(1);}}
@media (prefers-reduced-motion:reduce){
  .phero--path .crumb,.phero--path .phero__eyebrow,.phero--path .phero__t,.phero--path .phero__d,
  .phero--path .phero__eyebrow::before{animation:none;transform:none;opacity:1;}
}
/* ============================================================
   연담이 살펴보는 것 — 사진을 통째로 깔고 옅은 아이보리 안개로 눌러, 그 위에 바로 글을 놓습니다.
   네 항목은 번호 동그라미가 한 줄의 금선으로 이어진 가로 흐름입니다:
   화면에 들어오면 선이 왼쪽부터 그어지고, 선이 닿는 순서로 동그라미가 켜지며 제목·설명이 떠오릅니다.
   맺음말은 맨 아래 폭 전체의 반투명 띠 안에 가운데 놓입니다.
   ============================================================ */
.pw{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream-deep);
  padding:clamp(4.75rem,9vw,8rem) var(--gut) clamp(2rem,3.6vw,3rem);
}
.pw__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:blur(3px) brightness(1.06);             /* 살짝 초점을 풀어 글이 앞으로 나옵니다 */
  transform:translateY(var(--py,0)) scale(1.08);   /* 시차로 밀릴 여유 (흐림의 가장자리도 가립니다) */
}
.pw::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(254,252,247,.9) 0%, rgba(254,252,247,.7) 24%,
    rgba(254,252,247,.56) 50%, rgba(254,252,247,.44) 68%,
    rgba(254,252,247,.6) 84%, rgba(254,252,247,.72) 100%);
}
/* 구름 — 사용자 구름 사진(path-cloud.webp, 위는 투명 · 아래로 갈수록 우윳빛 구름 + 금빛 반짝임)을
   두 겹 겹칩니다. 한 겹은 좌우를 뒤집어 서로 반대 방향으로 아주 천천히 흘러가고,
   위 겹은 숨 쉬듯 옅어졌다 짙어져 반짝임이 깜박이는 듯 보입니다. */
.pw__mist{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.pw__mist::before,.pw__mist::after{
  content:"";position:absolute;top:0;bottom:-2%;left:-6%;width:112%;
  background:url("/assets/img/path-cloud.webp") center bottom / cover no-repeat;
  will-change:transform,opacity;
}
.pw__mist::before{
  opacity:.9;
  animation:pwmist-a 52s ease-in-out infinite alternate;
}
.pw__mist::after{
  opacity:.55;transform:scaleX(-1);
  animation:pwmist-b 64s ease-in-out infinite alternate;
}
@keyframes pwmist-a{
  from{transform:translate3d(-2.5%,1%,0) scale(1.02);}
  to{transform:translate3d(2.5%,-.5%,0) scale(1.06);}
}
@keyframes pwmist-b{
  0%{transform:translate3d(2.5%,0,0) scaleX(-1.02) scaleY(1.02);opacity:.55;}
  50%{opacity:.4;}
  100%{transform:translate3d(-2.5%,1%,0) scaleX(-1.07) scaleY(1.07);opacity:.62;}
}
@media (prefers-reduced-motion:reduce){
  .pw__mist::before,.pw__mist::after{animation:none;}
}

.pw__shell{position:relative;z-index:2;max-width:var(--shell);margin-inline:auto;}
.pw__head{text-align:center;margin:0 auto clamp(2.8rem,5vw,4.4rem);}
.pw__t{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);
}
/* 제목 아래 짧은 금선 — 제목이 떠오른 뒤 가운데에서 양쪽으로 */
.pw__t::after{
  content:"";display:block;width:2.6rem;height:1px;margin:1.3rem auto 0;
  background:var(--gold-deep);transform:scaleX(0);transition:transform 1s var(--ease) .5s;
}
.pw__t.is-in::after{transform:scaleX(1);}

/* ---------- 네 항목 — 가로 흐름 ---------- */
.pw__steps{
  --g:clamp(1.2rem,2.4vw,2rem);   /* 항목 사이 간격 — 선의 양끝 계산에 씁니다 */
  --dot:3.6rem;                   /* 번호 동그라미 지름 */
  list-style:none;margin:0;padding:0;
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);
}
/* 바탕 선 + 그어지는 선 — 첫 동그라미 가운데에서 끝 동그라미 가운데까지 */
.pw__steps::before,.pw__steps::after{
  content:"";position:absolute;top:calc(var(--dot) / 2);height:1px;
  left:calc((100% - 3 * var(--g)) / 8);right:calc((100% - 3 * var(--g)) / 8);
}
.pw__steps::before{background:rgba(169,137,92,.28);}
.pw__steps::after{
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left center;
  transition:transform 2.1s var(--ease) .15s;
}
.pw__steps.is-in::after{transform:scaleX(1);}

.pw__step{position:relative;text-align:center;padding:0 .4rem;}
/* 선 위의 작은 점 — 동그라미 양옆에 하나씩 (첫 항목 왼쪽·끝 항목 오른쪽은 없음) */
.pw__step::before,.pw__step::after{
  content:"";position:absolute;top:calc(var(--dot) / 2);z-index:1;
  width:5px;height:5px;border-radius:50%;background:var(--gold-deep);
  transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--ease);
}
.pw__step::before{left:calc(50% - var(--dot) / 2 - .7rem);}
.pw__step::after{left:calc(50% + var(--dot) / 2 + .7rem);}
.pw__step:first-child::before,.pw__step:last-child::after{display:none;}

/* 번호 동그라미 — 옅은 테두리로 있다가 선이 닿으면 금테와 번호가 켜집니다 */
.pw__dot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:var(--dot);height:var(--dot);margin:0 auto 1.35rem;border-radius:50%;
  background:rgba(255,253,249,.9);border:1px solid rgba(169,137,92,.35);
  box-shadow:0 0 0 .55rem rgba(255,253,249,.45), 0 10px 26px -14px rgba(70,60,40,.4);
  font-family:var(--serif-en);font-weight:500;font-size:1.22rem;letter-spacing:.06em;
  font-variant-numeric:lining-nums;color:var(--ink-mute);
  transition:border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.pw__steps.is-in .pw__dot{border-color:var(--gold-deep);color:var(--ink);}
.pw__steps.is-in .pw__step::before,.pw__steps.is-in .pw__step::after{transform:translate(-50%,-50%) scale(1);}
/* 선이 지나가는 박자 — 왼쪽부터 */
.pw__steps.is-in .pw__step:nth-child(1) .pw__dot,.pw__steps.is-in .pw__step:nth-child(1)::before,.pw__steps.is-in .pw__step:nth-child(1)::after{transition-delay:.25s;}
.pw__steps.is-in .pw__step:nth-child(2) .pw__dot,.pw__steps.is-in .pw__step:nth-child(2)::before,.pw__steps.is-in .pw__step:nth-child(2)::after{transition-delay:.75s;}
.pw__steps.is-in .pw__step:nth-child(3) .pw__dot,.pw__steps.is-in .pw__step:nth-child(3)::before,.pw__steps.is-in .pw__step:nth-child(3)::after{transition-delay:1.25s;}
.pw__steps.is-in .pw__step:nth-child(4) .pw__dot,.pw__steps.is-in .pw__step:nth-child(4)::before,.pw__steps.is-in .pw__step:nth-child(4)::after{transition-delay:1.75s;}
.pw__steps.is-in .pw__step:nth-child(1) .pw__dot{animation:pring 1.4s var(--ease) .3s 1;}
.pw__steps.is-in .pw__step:nth-child(2) .pw__dot{animation:pring 1.4s var(--ease) .8s 1;}
.pw__steps.is-in .pw__step:nth-child(3) .pw__dot{animation:pring 1.4s var(--ease) 1.3s 1;}
.pw__steps.is-in .pw__step:nth-child(4) .pw__dot{animation:pring 1.4s var(--ease) 1.8s 1;}

/* 글 — 동그라미가 켜진 뒤 떠오릅니다 */
.pw__body{opacity:0;}
.pw__steps.is-in .pw__body{animation:vcardin .9s var(--ease) forwards;}
.pw__steps.is-in .pw__step:nth-child(1) .pw__body{animation-delay:.4s;}
.pw__steps.is-in .pw__step:nth-child(2) .pw__body{animation-delay:.9s;}
.pw__steps.is-in .pw__step:nth-child(3) .pw__body{animation-delay:1.4s;}
.pw__steps.is-in .pw__step:nth-child(4) .pw__body{animation-delay:1.9s;}
.pw__ct{
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.18rem,1.7vw,1.5rem);line-height:1.45;letter-spacing:-.012em;
  color:var(--ink);margin-bottom:.8rem;
}
.pw__cd{
  font-family:var(--serif-kr);font-size:.96rem;line-height:1.85;color:var(--ink);
  max-width:17rem;margin-inline:auto;
  text-shadow:0 0 2px rgba(255,253,248,.9), 0 0 12px rgba(255,253,248,.85);   /* 사진 위라 흰 빛을 둘러 읽히게 */
}
/* 설명 아래 짧은 금선 — 글이 떠오른 뒤 가운데에서 */
.pw__tick{
  display:block;width:2rem;height:1px;margin:1.3rem auto 0;background:var(--gold-deep);
  transform:scaleX(0);transition:transform .9s var(--ease);
}
.pw__steps.is-in .pw__step:nth-child(1) .pw__tick{transform:scaleX(1);transition-delay:1.1s;}
.pw__steps.is-in .pw__step:nth-child(2) .pw__tick{transform:scaleX(1);transition-delay:1.6s;}
.pw__steps.is-in .pw__step:nth-child(3) .pw__tick{transform:scaleX(1);transition-delay:2.1s;}
.pw__steps.is-in .pw__step:nth-child(4) .pw__tick{transform:scaleX(1);transition-delay:2.6s;}

@media (hover:hover){
  .pw__step:hover .pw__dot{color:var(--red);border-color:var(--red);box-shadow:0 0 0 .55rem rgba(255,253,249,.6), 0 14px 30px -14px rgba(70,60,40,.5);}
}

/* ---------- 맺음말 — 따로 띠를 두지 않고, 아래로 짙어지는 안개 속에 문장을 놓습니다. 양옆에 세로 금선 ---------- */
.pw__close{
  position:relative;z-index:2;
  margin:clamp(3.6rem,7vw,6.5rem) auto 0;max-width:var(--shell);
  text-align:center;
}
.pw__close b{
  position:relative;display:inline-block;padding:.2rem clamp(1.4rem,3vw,2.6rem);
  font-family:var(--serif-kr);font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.65rem);line-height:1.6;letter-spacing:-.012em;color:var(--ink);
}
/* 세로 금선 — 띠가 떠오른 뒤 위에서 아래로 */
.pw__close b::before,.pw__close b::after{
  content:"";position:absolute;top:50%;width:1px;height:2.2rem;background:var(--gold-deep);
  transform:translateY(-50%) scaleY(0);transform-origin:top center;
  transition:transform .9s var(--ease) .45s;
}
.pw__close b::before{left:0;} .pw__close b::after{right:0;}
.pw__close.is-in b::before,.pw__close.is-in b::after{transform:translateY(-50%) scaleY(1);}

@media (max-width:1000px){
  .pw__steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(2.4rem,4vw,3.2rem);}
  /* 두 줄이 되면 선이 이어지지 않으므로 선·작은 점을 거두고, 동그라미·글은 줄 순서대로 */
  .pw__steps::before,.pw__steps::after,.pw__step::before,.pw__step::after{display:none;}
  .pw__steps.is-in .pw__step:nth-child(1) .pw__dot{transition-delay:.1s;animation-delay:.1s;}
  .pw__steps.is-in .pw__step:nth-child(2) .pw__dot{transition-delay:.3s;animation-delay:.3s;}
  .pw__steps.is-in .pw__step:nth-child(3) .pw__dot{transition-delay:.5s;animation-delay:.5s;}
  .pw__steps.is-in .pw__step:nth-child(4) .pw__dot{transition-delay:.7s;animation-delay:.7s;}
  .pw__steps.is-in .pw__step:nth-child(1) .pw__body{animation-delay:.2s;}
  .pw__steps.is-in .pw__step:nth-child(2) .pw__body{animation-delay:.4s;}
  .pw__steps.is-in .pw__step:nth-child(3) .pw__body{animation-delay:.6s;}
  .pw__steps.is-in .pw__step:nth-child(4) .pw__body{animation-delay:.8s;}
  .pw__steps.is-in .pw__step:nth-child(1) .pw__tick{transition-delay:.9s;}
  .pw__steps.is-in .pw__step:nth-child(2) .pw__tick{transition-delay:1.1s;}
  .pw__steps.is-in .pw__step:nth-child(3) .pw__tick{transition-delay:1.3s;}
  .pw__steps.is-in .pw__step:nth-child(4) .pw__tick{transition-delay:1.5s;}
}
@media (max-width:640px){
  .pw__br{display:none;}   /* 히어로 두 줄 문장을 흘려 씁니다 */
}
@media (max-width:560px){
  .pw__steps{grid-template-columns:1fr;row-gap:2.4rem;}
  .pw__cd{max-width:22rem;}
  .pw__steps.is-in .pw__step:nth-child(n) .pw__dot{transition-delay:.1s;animation-delay:.1s;}
  .pw__steps.is-in .pw__step:nth-child(n) .pw__body{animation-delay:.2s;}
  .pw__steps.is-in .pw__step:nth-child(n) .pw__tick{transition-delay:.9s;}
  .pw__close b::before,.pw__close b::after{display:none;}
  .pw__close b{padding-inline:0;}
}

/* ---------- 다른 여정 — 남색 대신 저녁 바다 사진 (/paths/*, 다섯 장 공통 paths-jour.jpg) ----------
   사진은 위가 노을 하늘, 아래가 남빛 물입니다. 위 가장자리는 앞 블록(구름)의 아이보리에서 하늘로 풀리고,
   아래 가장자리는 푸터의 먹색으로 풀려 세 구간이 이음새 없이 이어집니다.
   카드는 아래 남빛 물 위에 놓이므로 글자는 홈 03 과 같은 아이보리·금색이며, 물 구간을 한 번 더 어둡게 눌러 읽히게 합니다. */
.jour--photo{
  background:var(--ink);isolation:isolate;
  min-height:47vw;                    /* 사진 위쪽 빈 하늘은 잘라 앞 블록과의 빈 틈을 줄입니다 (아래 물·카드는 그대로) */
  display:flex;flex-direction:column;justify-content:flex-end;   /* 눈썹줄·카드를 아래 물 위에 */
  padding-block:clamp(3rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem);
}
.jour--photo .jour__inner{width:100%;z-index:2;}
.jour--photo .jour__top{padding-top:0;}
.jour--photo .jour__rail{margin-top:1.4rem;}
.jour__photowrap{position:absolute;inset:0;z-index:0;overflow:hidden;}   /* 사진의 여유분은 여기서 자릅니다 — 섹션 밖으로 새지 않게 */
.jour__photo{
  position:absolute;left:0;right:0;top:-3%;bottom:-3%;width:100%;height:auto;
  object-fit:cover;object-position:center 72%;      /* 잘리는 쪽은 위 하늘 */
  transform:translateY(var(--py,0));                /* 시차 — 위아래 3% 여유 안에서 */
}
.jour--photo::before{
  content:"";position:absolute;left:0;right:0;top:-2.5rem;bottom:0;z-index:1;pointer-events:none;
  background:
    /* 위 — 경계 위 2.5rem 부터 앞 블록과 같은 아이보리로 채우고 하늘 속으로 풀립니다 (그 위에 ::after 의 구름) */
    linear-gradient(to bottom, rgba(250,245,236,0) 0, rgba(250,245,236,.5) 2.5rem, rgba(250,245,236,.3) 8rem, rgba(250,245,236,0) 16rem),
    /* 아래 — 카드 구간을 눌러 글자가 읽히게 하고, 맨 아래는 푸터 먹색으로 */
    linear-gradient(to top, var(--ink) 0%, rgba(27,36,54,.74) 16%, rgba(27,36,54,.48) 36%, rgba(27,36,54,.3) 52%, rgba(27,36,54,.12) 62%, rgba(27,36,54,0) 72%);
}
/* 앞 블록의 구름이 이 블록 위쪽으로 넘어옵니다 — 같은 구름 사진을 위아래로 뒤집어 위 가장자리에 걸칩니다
   (짙은 쪽이 위, 아래로 갈수록 투명). 경계 양쪽이 모두 같은 구름이라 이음새가 보이지 않습니다. */
/* 구름이 경계 위로 걸치려면 overflow 가 열려 있어야 합니다 (clip-path inset 의 음수는 Chrome 에서 바깥으로 안 늘어납니다).
   그래서 사진은 scale 대신 위아래로만 3% 넘치게 두어 가로 스크롤이 생기지 않게 합니다. */
.jour--photo{overflow:visible;}
.jour--photo::after{
  content:"";position:absolute;left:0;right:0;top:-2.5rem;z-index:1;pointer-events:none;
  height:calc(clamp(9rem,13vw,14rem) + 2.5rem);
  /* 구름 사진 밑에 같은 크림색을 깔아 경계에서는 완전히 불투명하게 — 경계 위아래 어느 쪽도 비치지 않습니다 */
  background:url("/assets/img/path-cloud.webp") center bottom / cover no-repeat, linear-gradient(#F8F1E4,#F8F1E4);
  transform:scaleY(-1);
  /* 뒤집기 전 기준: 아래(=뒤집힌 뒤 위) 2.5rem 은 위 블록 쪽으로 서서히 나타나고, 위로 갈수록 사라짐 → 구름이 하늘 속으로 풀립니다 */
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 2.5rem, #000 32%, rgba(0,0,0,.4) 58%, transparent 88%);
          mask-image:linear-gradient(to top, transparent 0, #000 2.5rem, #000 32%, rgba(0,0,0,.4) 58%, transparent 88%);
}
.jour--photo .sec__no{color:var(--gold);text-shadow:0 0 2px rgba(6,14,26,.7), 0 1px 12px rgba(6,14,26,.7);}
.jour--photo .jcard__t,.jour--photo .jcard__lead{text-shadow:0 1px 14px rgba(6,14,26,.55);}
.jour--photo .jcard__ph{box-shadow:0 0 0 1px rgba(244,236,224,.14), 0 24px 46px -26px rgba(4,10,20,.7);}

/* ---------- 영문판 (/en/) ----------
   <html lang="en"> 에서만 듣는 규칙입니다. 한국어판 화면에는 아무 영향이 없습니다.
   본문 서체를 고운바탕 대신 사이트의 영문 서체(Cormorant Garamond)로 바꿉니다 — 같은 --serif-kr 토큰을 덮어쓰므로
   모든 제목·본문이 한 번에 따라옵니다. 로고 글자(연담)와 히어로의 연담緣談 은 두 판이 같게 고운바탕으로 남깁니다.
   Cormorant 는 x-높이가 낮아 같은 px 에서 작아 보이므로 본문 줄기 몇 곳만 한 단계 키웁니다. */
html[lang="en"]{
  --serif-kr: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
}
html[lang="en"] .nav__mark,
html[lang="en"] .hero__title-kr{font-family:"Gowun Batang","Noto Serif KR",serif;}
html[lang="en"] .nav__kind{
  font-family:var(--serif-en);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
html[lang="en"] .contact__list li{grid-template-columns:4.3rem 1fr;}   /* 'Address' 가 3.6rem 열에 안 들어갑니다 */

/* 내비의 KR / EN — 링크가 된 쪽만 마우스를 올리면 밝아집니다 (두 판 공통) */
.nav__lang a{transition:color .3s var(--ease);}
.nav__lang a:hover{color:var(--ivory);}
.nav.is-stuck .nav__lang a:hover{color:var(--red);}

/* Cormorant 는 x-높이가 낮아 같은 크기의 고운바탕보다 작아 보입니다.
   본문 줄기(제목이 아닌 serif 본문)만 한 단계씩 키웁니다 — 제목·눈썹줄·내비는 그대로입니다. */
html[lang="en"] .hero__tagline{font-size:clamp(1.35rem,2.4vw,2rem);}
html[lang="en"] .tail--photo .tail__d,
html[lang="en"] .vgrid__lede,
html[lang="en"] .vcta__d,
html[lang="en"] .ptl__lede,
html[lang="en"] .mr__lede{font-size:clamp(1.08rem,1.55vw,1.2rem);}
html[lang="en"] .chap__body p{font-size:1.22rem;}
html[lang="en"] .mstep__lead,
html[lang="en"] .mstep__d{font-size:1.12rem;}
html[lang="en"] .vcard__d,
html[lang="en"] .mr__cd{font-size:1.02rem;}
html[lang="en"] .pstep__lead{font-size:clamp(1.12rem,1.65vw,1.26rem);}
html[lang="en"] .pstep__d,
html[lang="en"] .mq__row dd{font-size:1.08rem;}
html[lang="en"] .mq__row dt{font-size:1.1rem;}
html[lang="en"] .mj__d{font-size:1.03rem;}
html[lang="en"] .pw__cd{font-size:1.06rem;}
html[lang="en"] .phero__eyebrow{font-size:.88rem;}
html[lang="en"] .foot__col h4{font-size:1.05rem;}
html[lang="en"] .ptick b{font-size:.86rem;}
html[lang="en"] .ptick--major b{font-size:.98rem;}
html[lang="en"] .ptick i{font-size:.76rem;}
html[lang="en"] .pstep--mark .ptick i{font-size:.8rem;}
html[lang="en"] .pstep__flag{font-size:.88rem;}

/* 영문 메뉴는 한국어보다 넓어서(Home · About · Verification · The Process · Membership · KR / EN · Book a Consultation)
   1024~1140px 에서 로고와 겹칩니다. 영문판만 조금 일찍(1140px) 햄버거로 접습니다. */
@media (max-width:1140px){
  html[lang="en"] .nav__menu .nav__link{display:none;}
  html[lang="en"] .nav__burger{display:block;}
}

/* ---------- 개인정보처리방침 (/privacy/) — 영어 전용 긴 글 ----------
   한 열의 읽기 좋은 폭(46rem). 두 판의 푸터에서 함께 링크합니다. */
.legal{padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6.5rem);background:var(--cream);}
.legal__shell{max-width:46rem;margin-inline:auto;padding:0 var(--gut);}
.legal__meta{
  font-family:var(--serif-en);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.6rem;
}
.legal__intro{font-family:var(--serif-kr);font-size:clamp(1.15rem,1.7vw,1.32rem);line-height:1.75;color:var(--ink);margin-bottom:1.8rem;}
.legal__box{background:var(--sand);border-left:2px solid var(--bronze);padding:1rem 1.3rem;margin:0 0 1.8rem;}
.legal__box p{margin:0;font-size:.93rem;line-height:1.75;color:var(--ink-soft);}
.legal__toc{border:1px solid var(--line);padding:1.2rem 1.4rem 1rem;margin-bottom:.5rem;}
.legal__toc-t{font-family:var(--serif-en);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem;}
.legal__toc ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem;font-size:.9rem;line-height:1.7;color:var(--ink-soft);}
.legal__toc li{break-inside:avoid;}
.legal__toc a:hover{color:var(--red);}
.legal h2{font-family:var(--serif-kr);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.5rem);line-height:1.35;color:var(--ink);margin:2.8rem 0 .9rem;}
.legal h3{font-size:1rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .5rem;}
.legal p,.legal li{font-size:.97rem;line-height:1.85;color:var(--ink-soft);}
.legal p{margin:0 0 1rem;}
.legal ul{margin:0 0 1rem;padding-left:1.3rem;}
.legal li{margin-bottom:.35rem;}
.legal li strong,.legal p strong{color:var(--ink);font-weight:700;}
.legal em{font-style:italic;}
.legal article a:not(.legal__toc a){color:var(--red);border-bottom:1px solid rgba(176,57,44,.3);}
.legal article a:not(.legal__toc a):hover{border-color:currentColor;}
.legal__contact{padding:1rem 1.3rem;border:1px solid var(--line);background:#fff;line-height:1.9;}
.legal__foot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-mute);}
@media (max-width:640px){
  .legal__toc ol{columns:1;}
}


/* ---------- 모바일 메뉴 (햄버거) — 2026-09-18 ----------
   내비 링크가 접히는 폭(한국어 1024px · 영문 1140px)에서 햄버거를 누르면
   .nav 에 is-open 이 붙고(main.js 5b), .nav__menu 가 화면 전체 크림색 판이 되어
   링크 · KR/EN · 상담 신청 버튼을 세로로 보여줍니다. HTML 은 그대로입니다.
   열리는 동안 .nav 에 is-stuck 도 함께 붙여(로고·햄버거가 먹색) 판 위에서 읽히게 하고,
   햄버거는 JS 가 잰 제자리(--bt/--bl)에 고정되어 X 로 바뀝니다. */
html.nav-open{overflow:hidden;}
.nav__burger{position:relative;z-index:3;}
.nav__burger span{transform-origin:center;transition:transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease), background .3s var(--ease);}
@media (max-width:1140px){
  /* is-stuck 의 backdrop-filter 가 fixed 자식의 기준 상자가 되어 판이 내비 높이로 잘립니다 — 열려 있는 동안만 끕니다 */
  .nav.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;box-shadow:none;}
  .nav.is-open .nav__brand{position:relative;z-index:2;}
  .nav.is-open .nav__menu{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.35rem;padding:5.5rem var(--gut) 3rem;
    background:rgba(254,252,247,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    overflow-y:auto;
    animation:navpanel .35s var(--ease) both;
  }
  @keyframes navpanel{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
  .nav.is-open .nav__menu .nav__link{
    display:block;padding:.45rem 0;
    font-family:var(--serif-kr);font-weight:700;font-size:clamp(1.55rem,6vw,2.1rem);line-height:1.3;
    color:var(--ink);letter-spacing:0;
  }
  .nav.is-open .nav__menu .nav__link::after{display:none;}
  .nav.is-open .nav__menu .nav__link[aria-current="page"]{color:var(--red);}
  .nav.is-open .nav__lang{display:block;margin-top:1.1rem;font-size:.9rem;color:var(--ink-mute);}
  .nav.is-open .nav__lang b{color:var(--ink);}
  .nav.is-open .nav__cta{display:inline-flex;margin-top:1.2rem;padding:.8rem 1.6rem;font-size:.95rem;}
  .nav.is-open .nav__burger{position:fixed;top:var(--bt);left:var(--bl);}
  .nav.is-open .nav__burger span:nth-child(1){top:7px;transform:rotate(45deg);}
  .nav.is-open .nav__burger span:nth-child(2){opacity:0;}
  .nav.is-open .nav__burger span:nth-child(3){top:7px;transform:rotate(-45deg);}
}
@media (prefers-reduced-motion:reduce){
  .nav.is-open .nav__menu{animation:none;}
}