/* ═══════════════════════════════════════════════════════════════
   모작 — lxlcreative.co.uk (Awwwards SOTD)
   캡처 2026-09-22 · 수치는 measure.json 실측값

   내용은 전부 더미다. 원본 텍스트·이미지·로고는 쓰지 않았다.
   가상 회사: RIVET & ROPE  (약칭 r&r)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 실측 컬러 — 순색을 피한다 */
  --bg:#27201d;        /* 다크 브라운. 검정이 아니다 */
  --cream:#fcf2bd;     /* 디스플레이. 흰색이 아니다 */
  --orange:#ff5121;    /* 스크립트 A · 필 버튼 */
  --on-orange:#27201d; /* 필 버튼 글씨. 원본은 흰색(3.3:1, 호버 2.8:1)이라 접근성 최소선 미달 → 바탕 갈색 4.9:1 · 호버 5.6:1 */
  --blue:#055dff;      /* 스크립트 B */
  --white:#ffffff;
  --black:#000000;
  --grey:#646464;
  --cream-70:rgba(252,242,189,.7);
  --cream-40:rgba(252,242,189,.4);
  --cream-16:rgba(252,242,189,.16);

  --edge:34px;
  --col:770px;         /* 본문 단 */
  --nav-h:72px;
  --dd-w:462px;
  --r:18px;            /* 카드 모서리 */

  /* 폰트
     원본: Owners Wide(유료) + Scribo(유료) + Manrope
     Owners Wide → Archivo wdth125/700, Scribo → Sacramento. SPEC에 기록 */
  --disp:"Archivo",Impact,sans-serif;
  --script:"Sacramento",cursive;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.js-smooth{scroll-behavior:auto}   /* JS 관성 스크롤과 겹치면 서로 싸운다 — site.js 참고 */
body{
  margin:0;background:var(--bg);color:var(--cream);
  font-family:var(--sans);font-size:17.43px;font-weight:500;line-height:24.4px;
}
body.is-locked{overflow:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--bg)}

.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--edge)}
.col{max-width:var(--col)}

/* ── 타이포 (실측 스케일) ── */
.d-1{font-family:var(--disp);font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(34px,3.8vw,54.86px);line-height:.9;margin:0;color:var(--cream)}
.d-2{font-family:var(--disp);font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(28px,2.95vw,42.3px);line-height:1;margin:0;color:var(--cream)}
.d-3{font-family:var(--disp);font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(24px,2.26vw,32.57px);line-height:1;margin:0;color:var(--cream)}
.d-4{font-family:var(--disp);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:22.86px;line-height:1;margin:0;color:var(--white)}
.d-5{font-family:var(--disp);font-variation-settings:"wdth" 112,"wght" 700;
  font-size:15.43px;line-height:18.5px;margin:0;letter-spacing:.01em}
.scr{font-family:var(--script);font-weight:400;color:var(--orange);margin:0;line-height:.72}
.scr-xl{font-size:clamp(56px,7.1vw,101.7px)}
.scr-l{font-size:clamp(38px,4.1vw,58.62px)}
.scr-m{font-size:clamp(30px,3.2vw,45.7px)}
.scr-blue{color:var(--blue)}
.lead{font-size:clamp(20px,1.98vw,28.57px);font-weight:600;line-height:1.16;margin:0}
.body{font-size:17.43px;font-weight:500;line-height:24.4px;margin:0;color:var(--cream-70)}
.small{font-size:14.43px;font-weight:600;line-height:1.4;margin:0}

/* ── 버튼 ── */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 26px;border-radius:999px;
  background:var(--orange);color:var(--on-orange);
  font-family:var(--disp);font-variation-settings:"wdth" 112,"wght" 700;font-size:15.43px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background .2s;
}
/* 원본 실측값 — refs/origin.md "호버" 참조.
   matrix(1.04984,-0.018325,0.018325,1.04984,0,0) 을 풀면 아래와 같다. */
.pill:hover{transform:scale(1.05) rotate(-1.05deg);background:#ff6a3f}
.pill-line{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream-16)}
.pill-line:hover{background:rgba(252,242,189,.08);transform:translateY(-2px)}
.pill-full{width:100%}
.arrow::after{content:"→"}

/* ── 사진 대체 ── */
.ph{position:relative;overflow:hidden;background:#3a3330;border-radius:var(--r)}
.ph::before{content:"";position:absolute;inset:0;background:var(--g,linear-gradient(150deg,#4a4340,#2e2926));
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.ph::after{
  content:attr(data-ph);position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:var(--disp);font-variation-settings:"wdth" 112,"wght" 700;
  font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.34);text-transform:uppercase;white-space:nowrap;
}
.ph-still{--g:linear-gradient(155deg,#5d6a70 0%,#39434a 52%,#20272c 100%)}
.ph-set{--g:linear-gradient(150deg,#7a6552 0%,#4c3f34 55%,#241d18 100%)}
.ph-studio{--g:linear-gradient(160deg,#4b4f6b 0%,#2c2f45 50%,#15171f 100%)}
.ph-crowd{--g:linear-gradient(140deg,#6b4a3c 0%,#402a23 52%,#1d1512 100%)}
.ph-light{--g:linear-gradient(165deg,#c8c2ae 0%,#8e8878 50%,#57534a 100%)}
.ph-blue{--g:linear-gradient(150deg,#2b4f8a 0%,#16294a 55%,#0b1222 100%)}

/* 사진 — assets/photos (Pinterest·스톡 · 출처 credits.json). 그라디언트는 로딩 중 바탕으로 남긴다 */
.ph--img::after{content:none}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph>img{transform:scale(1.04)}
/* 사진 위 글씨 — 글씨가 앉는 가장자리만 어둡게 */
.vid .ph--img::after,.hero-photo .ph--img::after{content:"";left:0;right:0;top:0;bottom:0;transform:none;background:linear-gradient(180deg,rgba(39,32,29,0) 55%,rgba(39,32,29,.7))}

/* ── 헤더 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);display:flex;align-items:center}
.nav-in{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--edge);display:flex;align-items:center;gap:24px}
.nav-logo{display:flex;align-items:baseline;gap:2px;font-size:0}
.nav-logo i{font-family:var(--script);font-style:normal;font-size:40px;color:var(--orange);line-height:.6}
.nav-logo b{font-family:var(--disp);font-variation-settings:"wdth" 118,"wght" 700;font-size:22px;color:var(--cream)}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-link{
  font-size:17.43px;font-weight:600;line-height:24.4px;color:var(--cream);
  padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{border-bottom-color:var(--orange)}
.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;border-radius:50%;
  background:rgba(252,242,189,.1);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--cream);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--cream)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ── 드롭다운 (4종, 구조가 서로 다르다) ── */
.dd-host{position:relative}
.dd{
  position:absolute;top:calc(100% + 14px);right:0;width:var(--dd-w);z-index:41;
  background:#332b27;border-radius:var(--r);padding:16px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .24s;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.dd-host:hover .dd,.dd-host:focus-within .dd,.dd.is-open{opacity:1;visibility:visible;transform:none}
.dd-work-row{display:flex;gap:14px;align-items:center;padding:8px;border-radius:12px;transition:background .18s}
.dd-work-row:hover{background:rgba(252,242,189,.07)}
.dd-work-row .ph{width:74px;height:74px;flex:none;border-radius:10px}
.dd-work-row h4{margin:0 0 4px}
.dd-work-row p{margin:0;font-size:14.43px;font-weight:500;color:var(--cream-70)}
.dd-srv{display:block;padding:11px 10px;border-radius:10px;font-size:22.86px;
  font-family:var(--disp);font-variation-settings:"wdth" 118,"wght" 700;color:var(--cream);transition:background .18s,color .18s}
.dd-srv:hover{background:rgba(252,242,189,.07);color:var(--orange)}
.dd-txt .ph{height:190px;margin-bottom:14px}
.dd-txt p{margin:0 0 16px;font-size:17.43px;font-weight:500;line-height:24.4px;color:var(--cream-70)}
.dd .pill{margin-top:12px;width:100%}

/* ── 모바일 메뉴 (라운드 카드 패널) ── */
.mm{position:fixed;inset:12px 12px auto;z-index:55;display:none}
.mm.is-open{display:block}
.mm-panel{background:#3b1420;border:1px solid rgba(252,242,189,.2);border-radius:20px;padding:20px 22px 24px;
  max-height:calc(100svh - 24px);overflow-y:auto}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mm-close{width:40px;height:40px;border-radius:50%;background:rgba(252,242,189,.12);display:grid;place-items:center;font-size:18px}
.mm-list{list-style:none;margin:0;padding:0}
.mm-list>li{margin:0 0 6px}
.mm-link,.mm-trigger{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:var(--disp);font-variation-settings:"wdth" 118,"wght" 700;font-size:26px;color:var(--cream);padding:6px 0}
.mm-trigger .chev{transition:transform .28s cubic-bezier(.2,.7,.3,1);font-size:16px}
.mm-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mm-drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.3,1)}
.mm-trigger[aria-expanded="true"]+.mm-drawer{grid-template-rows:1fr}
.mm-drawer>div{overflow:hidden}
.mm-drawer ul{list-style:none;margin:0;padding:4px 0 10px 2px}
.mm-drawer li{margin:0 0 10px}
.mm-drawer a{font-size:17.43px;font-weight:600;color:var(--cream-70)}
.mm-drawer a:hover{color:var(--orange)}

/* ── 히어로 ── */
.hero{position:relative;min-height:100svh;padding:var(--nav-h) 0 0;display:flex;align-items:center}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,700px) 1fr;gap:40px;align-items:center}
.hero-photo{aspect-ratio:700/880;max-height:78svh}
.hero-photo>.ph{width:100%;height:100%}
/* 본문 폭 배너 이미지 — 높이가 없으면 collapse 한다 */
.ph-wide{aspect-ratio:16/9}
.hero-copy{text-align:right;padding-right:6px}
.hero-copy .scr{display:block;margin:2px 0}
.hero-lockup{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:baseline;justify-content:flex-start;gap:0;
  padding:0 var(--edge);pointer-events:none;
}
.hero-lockup i{font-family:var(--script);font-style:normal;color:var(--orange);
  font-size:clamp(120px,21vw,300px);line-height:.52;margin-left:clamp(0px,14vw,200px)}
.hero-lockup b{font-family:var(--disp);font-variation-settings:"wdth" 125,"wght" 700;
  color:var(--cream);font-size:clamp(64px,13.2vw,190px);line-height:.78;letter-spacing:-.02em;margin-left:-.04em}

/* 2열 레이아웃 — 인라인 style 로 쓰면 미디어쿼리가 못 이긴다. 반드시 클래스로. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.two-a{display:grid;grid-template-columns:1fr 2fr;gap:40px}

/* ── 섹션 ── */
.sec{padding:120px 0}
.sec-sm{padding:72px 0}
.sec-lg{padding:168px 0}
.eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:26px;font-size:32.57px;line-height:1}

/* 본문 사이에 스크립트가 끼어든다 — 원본의 특징 */
.mix{font-family:var(--disp);font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(28px,3.8vw,54.86px);line-height:.9;margin:0;max-width:19ch}
.mix em{font-family:var(--script);font-style:normal;font-variation-settings:normal;
  color:var(--orange);font-size:1.78em;line-height:.3;vertical-align:-.06em}

/* 카드 그리드 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{position:relative;display:block;background:#332b27;border-radius:var(--r);overflow:hidden}
.card .ph{aspect-ratio:4/3;border-radius:0}
.card-b{padding:20px 22px 24px}
.card-b h2,.card-b h3{margin:0 0 8px}
.card-b p{margin:0;font-size:14.43px;font-weight:500;color:var(--cream-70)}
.card:hover .ph::before{transform:scale(1.04)}

/* 서비스 카드 (라이트) */
.svc{background:#cfd8e4;color:#27201d;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:16px}
.svc .ph{aspect-ratio:1;border-radius:12px;max-width:180px}
.svc h2,.svc h3{color:#6d0d1e;margin:0}
.svc p{margin:0;color:#3f3733;font-size:17.43px;font-weight:500;line-height:24.4px}
.svc .go{margin-top:auto;color:var(--orange);font-size:22px}

/* 사양·목록 */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream-16)}
.rows li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--cream-16)}
.rows .k{color:var(--cream-40)}

/* 드래그 캐러셀 */
.drag{position:relative;overflow:hidden}
.drag-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.drag-item{flex:0 0 calc((100% - 40px)/3);min-width:0}
.drag-item .ph{aspect-ratio:4/5}
.drag-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;align-items:center}
.drag-nav button{width:44px;height:44px;border-radius:50%;background:rgba(252,242,189,.1);display:grid;place-items:center}
.drag-nav button[disabled]{opacity:.32;cursor:default}
.drag-hint{margin-right:auto;font-family:var(--disp);font-variation-settings:"wdth" 112,"wght" 700;font-size:15.43px;color:var(--cream-40)}

/* 아코디언 */
.acc-i{border-bottom:1px solid var(--cream-16)}
.acc-i:first-child{border-top:1px solid var(--cream-16)}
.acc-t{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;text-align:left;
  font-family:var(--disp);font-variation-settings:"wdth" 118,"wght" 700;font-size:22.86px;color:var(--cream)}
.acc-t .plus{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.acc-t[aria-expanded="true"] .plus{transform:rotate(45deg)}
.acc-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1)}
.acc-t[aria-expanded="true"]+.acc-d{grid-template-rows:1fr}
.acc-d>div{overflow:hidden}
.acc-d p{margin:0 0 22px;max-width:62ch;color:var(--cream-70)}

/* 비디오 자리 */
.vid{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#1b1512;padding:20px}   /* 자식은 전부 absolute — 여백은 화면에 영향 없음 */
.vid .ph{position:absolute;inset:0;border-radius:0}
/* 영상 자리 아래 재생 막대 글씨(흰 16px) — 사진 밝은 부분이 뒤로 와서 390px 2.7:1 · 861~1024px 4.2:1 이던 것. 막대 자리만 짙게 */
.vid .ph--img::after{background:linear-gradient(180deg,rgba(39,32,29,0) 55%,rgba(39,32,29,.72) 86%,rgba(39,32,29,.88))}
@media (max-width:860px){.vid .ph--img::after{background:linear-gradient(180deg,rgba(39,32,29,0) 40%,rgba(39,32,29,.9) 82%)}}
.vid-bar{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;align-items:center;gap:14px;color:var(--white)}
.vid-bar .t{font-size:16.34px;font-weight:500;font-variant-numeric:tabular-nums}
.vid-bar .track{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.vid-bar .track i{display:block;height:3px;width:0;background:var(--white)}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.vid-play button{width:78px;height:78px;border-radius:50%;background:var(--orange);color:var(--on-orange);font-size:22px}

/* 폼 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f{display:flex;flex-direction:column;gap:7px}
.f.full{grid-column:1/-1}
.f label{font-size:14.43px;font-weight:600;color:var(--cream-40)}
.f input,.f select,.f textarea{
  font:inherit;font-weight:500;padding:13px 0;border:0;border-bottom:1px solid var(--cream-16);
  background:transparent;color:var(--cream);border-radius:0;
}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--orange)}
.f option{background:#332b27;color:var(--cream)}
.f .err{font-size:13px;color:#ff8f6b;min-height:16px}
.f.bad input,.f.bad select,.f.bad textarea{border-bottom-color:#ff8f6b}

/* 모달 */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px}
.modal.is-open{display:grid}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.76)}
.modal-box{position:relative;background:#1b1512;width:min(1040px,100%);aspect-ratio:16/9;display:grid;place-items:center;
  border-radius:var(--r);padding:28px;color:var(--cream-40)}
.modal-close{position:absolute;top:-40px;right:0;color:var(--cream);font-size:15px}

/* 푸터 */
.foot{padding:96px 0 44px;border-top:1px solid var(--cream-16)}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px 20px;padding-bottom:56px}
.foot h2{font-family:var(--disp);font-variation-settings:"wdth" 112,"wght" 700;font-size:15.43px;
  color:var(--cream-40);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 10px;font-size:17.43px;font-weight:500}
.foot a:hover{color:var(--orange)}
/* 필 버튼은 예외 — 오렌지 배경 위에 오렌지 글씨가 되면 안 읽힌다 */
.foot .pill:hover{color:var(--on-orange)}
.foot-bar{border-top:1px solid var(--cream-16);padding-top:22px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:14.43px;color:var(--cream-40)}
.foot-note{margin:14px 0 0;font-size:13px;line-height:19px;color:rgba(252,242,189,.3);max-width:74ch}

[aria-current="page"]{color:var(--orange)}

/* ── 반응형 ── */
@media (max-width:1100px){
  .two,.two-a{grid-template-columns:1fr;gap:28px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-copy{text-align:left}
  .drag-item{flex-basis:calc((100% - 20px)/2)}
  .foot-top{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--edge:20px}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .sec{padding:72px 0}
  .sec-lg{padding:96px 0}
  .drag-item{flex-basis:100%}
  .hero{min-height:auto;padding-bottom:120px}
  .hero-photo{max-height:60svh}
  .hero-lockup{position:static;padding:22px 0 0;flex-wrap:wrap}
  .hero-lockup i{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════
   스크롤 고정 시퀀스 — 2026-09-23 추가
   원본 실측(refs/origin.md)에서 확인한 두 장치를 옮긴 것이다.
     video-scroll_wrap  3481px  영상 고정 + 문장이 그 위로 흐름
     card-stack_wrap    5400px  왼쪽 고정 + 카드가 기울며 쌓임
   원본은 GSAP ScrollTrigger + Lenis 로 했다.
   여기서는 position:sticky + animation-timeline:scroll() 로 같은 결과를 낸다.
   이징은 원본에서 실측한 곡선을 쓴다.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 원본 실측값 — refs/origin.md "전환" 참조 */
  --ease-out: cubic-bezier(.65,0,0,1);
  --ease-inout: cubic-bezier(.87,0,.13,1);
}

/* ── 영상 고정 시퀀스 ─────────────────────────────────────── */
.vscroll{position:relative;height:3480px}
.vscroll__pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center}
.vscroll__media{position:absolute;inset:0;z-index:0}
.vscroll__media .ph{width:100%;height:100%}
.vscroll__media::after{content:"";position:absolute;inset:0;
  background:rgba(39,32,29,.62)}
.vscroll__say{position:relative;z-index:2;max-width:22ch;margin:0;padding:0 var(--edge);
  text-align:center;color:var(--cream);
  font-family:var(--disp);font-weight:700;font-stretch:125%;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(28px,4.4vw,62px)}
.vscroll__say em{font-family:var(--scr);font-style:normal;text-transform:none;
  color:var(--orange);font-size:1.12em;letter-spacing:0}
.vscroll__sound{position:absolute;z-index:2;left:50%;bottom:38px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(252,242,189,.9);color:var(--bg);border-radius:999px;
  padding:7px 8px 7px 16px;font-size:13.5px;cursor:pointer}
.vscroll__sound i{width:15px;height:15px;border-radius:50%;background:var(--bg);
  display:block;transition:transform .2s var(--ease-out)}
.vscroll__sound[aria-pressed="true"] i{transform:translateX(3px);background:var(--orange)}

/* ── 카드 쌓기 ────────────────────────────────────────────── */
.cstack{position:relative}
.cstack__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  padding:0 var(--edge);max-width:var(--max);margin:0 auto}
.cstack__left{position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  align-items:center;text-align:center}
.cstack__left .lead{max-width:34ch}
.cstack__right{display:grid;gap:0}
.cstack__card:last-child{margin-bottom:0}
.cstack__card{position:sticky;top:calc(11vh + var(--i,0) * 26px);height:58vh;margin-bottom:42vh;border-radius:14px;overflow:hidden;
  display:flex;align-items:flex-end;
  box-shadow:0 -18px 44px rgba(0,0,0,.34)}
.cstack__card .ph{position:absolute;inset:0;width:100%;height:100%}
.cstack__card h3{position:relative;z-index:2;margin:0;padding:0 22px 20px;
  font-family:var(--disp);font-weight:700;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(19px,2vw,26px);color:var(--cream)}
.cstack__card .go{position:absolute;z-index:2;right:20px;bottom:24px;color:var(--orange)}
.cstack__card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 52%,rgba(39,32,29,.72))}

/* 카드가 올라오며 아주 살짝 기운다. 원본의 기울기를 따른 것이다. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes cardIn{
      from{transform:translateY(12vh) rotate(-1.6deg) scale(.97)}
      to{transform:none}
    }
    .cstack__card{animation:cardIn .8s var(--ease-out) both;
      animation-timeline:view();animation-range:entry 0% cover 34%}
    @keyframes sayIn{from{transform:translateY(26px)}to{transform:none}}
    .vscroll__say{animation:sayIn 1s var(--ease-out) both;
      animation-timeline:view();animation-range:entry 10% cover 40%}
  }
}

@media (max-width:900px){
  .vscroll{height:2400px}
  .cstack__in{grid-template-columns:1fr}
  .cstack__left{position:static;height:auto;padding:var(--band) 0 30px}
  .cstack__card{top:14vh;height:64vh}
}
@media (prefers-reduced-motion:reduce){
  .cstack__card,.vscroll__say{animation:none}
}

/* 원본 대비 얕던 섹션 보정 — refs/origin.md 섹션 높이 참조 */
.sec-sm{padding-block:clamp(84px,11vw,168px)}

/* ── img-cycle — 원본 891px. 사진이 제자리에서 바뀐다 ── */
.icycle{padding-block:clamp(90px,11vw,150px)}
.icycle__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);
  align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
.icycle__stack{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.icycle__stack .ph{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .6s var(--ease-out)}
.icycle__stack .ph.on{opacity:1}
.icycle p{max-width:38ch}
.icycle__dots{display:flex;gap:7px;margin-top:22px}
.icycle__dots button{width:26px;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(252,242,189,.28);transition:background .25s var(--ease-out)}
.icycle__dots button[aria-current="true"]{background:var(--hazard)}
@media (max-width:900px){.icycle__in{grid-template-columns:1fr;gap:26px}}

/* ── 페이지 전환 — 원본은 barba. 여기서는 View Transitions API ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s var(--ease-out) both fadeOutPage}
::view-transition-new(root){animation:.34s var(--ease-out) both fadeInPage}
@keyframes fadeOutPage{to{opacity:0}}
@keyframes fadeInPage{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}