/* 루피어 소개 랜딩 /new/ — 캐러셀이 중심인 레이아웃
   뼈대는 네이티브 가로 스크롤(scroll-snap) — 손가락으로 넘기는 것은 브라우저가 한다. JS 가 죽어도 넘겨진다.
   모양은 motion.js 가 transform·opacity 만으로 입힌다.
   html[data-tier="1"] = 움직임 없음(평평한 줄) · "2" = 2D(크기·겹침) · "3" = 입체 회전·배경 번짐까지 */

.mc{position:relative}
.mc-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}
.mc-track::-webkit-scrollbar{display:none}
.mc-track.drag{scroll-snap-type:none;cursor:grabbing}
.mc-card{flex:0 0 auto;scroll-snap-align:center;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc-card img,.mc-card video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* 이웃 카드를 어둡게 — 투명도를 쓰면 겹친 뒤 카드가 비친다 */
.mc-card::after{content:"";position:absolute;inset:0;background:#0a0908;opacity:var(--d,0);pointer-events:none;border-radius:inherit}

/* 조작 줄: ‹ 스크럽 바 › — 손가락으로 끌 수 있게 높이 44px */
.mc-ui{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;padding:0 16px;max-width:560px}
.mc-btn{flex:none;width:46px;height:46px;border-radius:50%;background:#1b1714;border:1px solid #332b26;color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mc-btn:active{transform:scale(.92);background:var(--pt);border-color:var(--pt)}
.mc-scrub{flex:1;height:44px;position:relative;touch-action:none;cursor:pointer}
.mc-scrub::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#2a2420}
.mc-scrub i{position:absolute;top:50%;left:0;width:54px;height:8px;margin-top:-4px;border-radius:4px;background:var(--pt);will-change:transform}
.mc-count{flex:none;font-family:var(--en);font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--dim);min-width:58px;text-align:center}
.mc-count b{color:#fff}

/* ── 무대(히어로) ── */
.stage{position:relative;overflow:hidden;padding:26px 0 46px;text-align:center;--ch:clamp(280px,43vh,520px);--cw:calc(var(--ch)*.5625)}
.stage-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage-bg img{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.stage-bg img.on{opacity:.2}
.stage-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(10,9,8,.15),rgba(10,9,8,.86) 62%,#0a0908 88%),linear-gradient(#0a0908,transparent 18%,transparent 78%,#0a0908)}
html[data-tier="3"] .stage-bg img{filter:blur(34px)}
html[data-tier="3"] .stage-bg img.on{opacity:.34}
html[data-tier="1"] .stage-bg{display:none}
.stage-head{position:relative;padding:0 16px}
.stage h1{font-size:clamp(34px,min(6.3vw,9.4vh),92px);font-weight:900;line-height:1.02;letter-spacing:-.06em;margin:16px 0 12px}
.stage h1 .l2{color:var(--pt)}
.stage .sub{font-size:clamp(15px,1.5vw,19px);color:#d8d0c7;line-height:1.6;max-width:640px;margin:0 auto}
.stage .sub b{color:#fff}
.st{margin-top:6px}
.st .mc-track{padding:calc(var(--ch)*.12 + 12px) calc(50% - var(--cw)/2) calc(var(--ch)*.12 + 14px)}
.st .mc-card{width:var(--cw);height:var(--ch);border-radius:22px;overflow:hidden;background:#141110;border:1px solid #2c2521}
.st .mc-card.is-on{border-color:var(--pt)}
.st .mc-card video{position:absolute;inset:0}
.st .mc-card .pv{position:absolute;z-index:2;left:10px;top:10px;font-family:var(--en);font-size:10.5px;font-weight:800;letter-spacing:.08em;background:rgba(10,9,8,.72);color:#fff;padding:5px 9px;border-radius:999px;opacity:0;transition:opacity .3s}
.st .mc-card.is-on .pv{opacity:1}
.st-cap{position:relative;min-height:92px;padding:0 20px;max-width:760px;margin:0 auto}
.st-cap .k{font-family:var(--en);font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pt)}
.st-cap .t{font-size:clamp(19px,2.3vw,30px);font-weight:900;letter-spacing:-.04em;line-height:1.3;margin-top:6px}
.st-cap .e{font-family:var(--en);font-size:clamp(13px,1.3vw,16px);font-weight:800;color:#b9aea4;margin-top:6px;min-height:1.3em}
.stage .mc-ui{position:relative;margin-top:6px}
.stage .cta{position:relative;justify-content:center;margin-top:20px;padding:0 16px}
.stage .fine{position:relative}
@media(max-width:640px){
  .stage{--ch:min(98vw,52vh);padding-top:18px}
  .stage h1{font-size:clamp(34px,10.4vw,48px)}
  .stage h1 .l2{display:block}
  .stage .btn{font-size:16px;padding:15px 20px}
  .st-cap{min-height:104px}
}
@media(max-height:560px){.stage{--ch:300px}}
html[data-tier="1"] .st .mc-card{margin:0 7px}

/* ── 숫자 띠(무대 바로 아래) ── */
.nums-strip{margin-top:0}

/* ── 한 문장 초점 ── */
.focus-band{padding:74px 0 20px;text-align:center}
.focus-line{font-size:clamp(26px,5.2vw,58px);font-weight:900;letter-spacing:-.05em;line-height:1.2}
.focus-line span{display:inline-block;opacity:.22;transition:opacity .45s ease,color .45s ease;margin:0 .12em}
.focus-line span.on{opacity:1;color:#fff}
.focus-line span.pt.on{color:var(--pt)}
.focus-sub{margin-top:14px;color:var(--dim);font-size:15px}
html[data-tier="1"] .focus-line span{opacity:1;transition:none}

/* ── 섹션 머리말은 전부 가운데(캐러셀이 좌우 대칭이라) ── */
.sec>.wrap>.eyebrow,.sec>.wrap>.h2,.sec>.wrap>.lead,.sec>.wrap>.punch{text-align:center;margin-left:auto;margin-right:auto}

/* ── 여섯 가지 모양: 큰 카드 캐러셀 ── */
.forms.mc-track{display:flex;grid-template-columns:none;gap:0;margin:34px calc(50% - 50vw) 0;padding:26px calc(50vw - min(39vw,170px)) 30px}
.forms.mc-track .fm{flex:0 0 min(78vw,340px);min-height:0;height:min(112vw,470px);margin:0 9px;scroll-snap-align:center;cursor:pointer;opacity:1;transform:none;transition:none}
.forms.mc-track .fm.is-on{border-color:var(--pt)}
.forms.mc-track .fm::before{content:"";position:absolute;inset:0;z-index:3;background:#0a0908;opacity:var(--d,0);pointer-events:none}
.fm .k{transform-origin:left bottom}

/* ── 책 벽: 호 ── */
.arc{margin:6px 0 6px}
.arc .mc-track{padding:22px calc(50% - 150px) 96px}
.arc .mc-card{width:300px;height:188px;border-radius:18px;overflow:hidden;background:#141110;border:1px solid #2c2521;margin:0 8px}
.arc .mc-card.is-on{border-color:var(--pt)}
.arc-cap{text-align:center;margin-top:-58px;position:relative;min-height:64px;padding:0 16px;pointer-events:none}
.arc-cap b{display:block;font-size:clamp(19px,2.2vw,26px);font-weight:900;letter-spacing:-.04em}
.arc-cap em{display:block;font-style:normal;font-size:clamp(19px,2.2vw,26px);font-weight:900;letter-spacing:-.04em;color:var(--pt)}
.wall .mc-ui{margin-top:10px}
@media(max-width:520px){.arc .mc-track{padding-left:calc(50% - 118px);padding-right:calc(50% - 118px)}.arc .mc-card{width:236px;height:148px}}

/* 최신 드라마 줄: 좁은 화면에서 가운데 강조 */
.ep.mc-dim{transition:none}

/* ── 폰 속 진짜 앱: 덮개(눌러야 열린다) — 안 덮으면 앱 목록이 페이지 스크롤을 가로챈다 ── */
#appPhone iframe{pointer-events:none}
#appPhone.open iframe{pointer-events:auto}
.app-cover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:0 16px 34px;background:linear-gradient(to top,rgba(10,9,8,.88),rgba(10,9,8,.15) 46%,transparent);-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.app-cover span{background:var(--pt);color:#fff;font-weight:900;font-size:17px;padding:14px 22px;border-radius:999px}
.app-cover small{font-size:12.5px;color:#d3cac1;font-weight:600}
#appPhone.open .app-cover{display:none}
.app-exit{display:none;position:fixed;z-index:60;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#fff;color:#0a0908;font-weight:900;font-size:15px;padding:13px 20px;border-radius:999px}
.app-exit.show{display:block}

/* ── 마지막: 물범 ── */
.finale{position:relative;overflow:hidden;text-align:center;padding:110px 20px 90px;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 24%,rgba(228,87,46,.34),transparent 58%),#0a0908}
.fin-seal{display:block;width:min(64vw,340px);height:auto;margin:0 auto 34px;border-radius:24%;border:1px solid #3a2a22}
html:not([data-tier="1"]) .fin-seal{animation:finBob 4.6s ease-in-out infinite}
@keyframes finBob{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(0,-14px,0) rotate(2deg)}}
.finale h2{font-size:clamp(34px,6.6vw,92px);font-weight:900;letter-spacing:-.06em;line-height:1.08;margin:14px 0 26px}
.fin-story{max-width:700px;margin:0 auto;color:#d3cac1;font-size:clamp(15.5px,1.5vw,18px);line-height:1.8}
.fin-story b{color:#fff}
.fin-punch{font-size:clamp(20px,2.6vw,32px);font-weight:900;letter-spacing:-.04em;margin-top:22px}
.finale .cta{justify-content:center;margin-top:34px}
.finale .src{font-size:12px;color:#6f665f;margin-top:22px}
@media(max-width:640px){.finale{padding:80px 18px 70px}.finale .btn{font-size:16px;padding:15px 20px}}

/* ── 맥락 꼭지 ── 움직임은 화면에 들어온 뒤(.on)에만, 1단계에서는 전부 멈춘 완성 상태 */
.ctx{overflow:hidden}
.ctx .lead b{color:#fff}
.ctx-cut{position:relative;display:inline-block;color:#b3a89e}
.ctx-cut::after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:max(2px,.028em);background:var(--pt);transform:scaleX(0);transform-origin:left;transition:transform .5s ease .3s}
.ctx.on:not(.ctx-live) .ctx-cut::after{transform:scaleX(1)}
.ctx-scraps{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:26px auto 34px;max-width:760px}
.ctx-scraps span{position:relative;font-weight:800;font-size:clamp(15px,1.9vw,20px);letter-spacing:-.03em;color:#e6ddd4;background:#171311;border:1px dashed #4a3f38;padding:11px 16px;border-radius:6px;transform:rotate(var(--r));opacity:0;transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.16s)}
.ctx-scraps span::after{content:"";position:absolute;left:8px;right:8px;top:54%;height:1px;background:var(--pt);transform:scaleX(0);transform-origin:left;transition:transform .45s ease;transition-delay:calc(.9s + var(--i)*.22s)}
.ctx.on:not(.ctx-live) .ctx-scraps span{opacity:1}
.ctx.on:not(.ctx-live) .ctx-scraps span::after{transform:scaleX(1)}
.ctx-thesis{text-align:center;font-size:clamp(26px,4.8vw,58px);font-weight:900;letter-spacing:-.055em;line-height:1.15;margin:0 auto 18px}
.ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px}
@media(max-width:860px){.ctx-grid{grid-template-columns:1fr}}
.ctx-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px;overflow:hidden;text-align:left}
.ctx-card .k{font-family:var(--en);font-size:11.5px;font-weight:900;letter-spacing:.14em;color:var(--pt);margin-top:20px}
.ctx-card h3{font-size:clamp(22px,2.5vw,29px);font-weight:900;letter-spacing:-.045em;line-height:1.22;margin:8px 0 8px}
.ctx-card>p:last-child{font-size:15px;color:#d3cac1;line-height:1.7}
/* 한 편 = 25문장 */
.ctx-poster{display:flex;gap:8px;height:150px}
.ctx-poster img{flex:1;min-width:0;height:100%;object-fit:cover;border-radius:14px;border:1px solid #2c2521}
.ctx-25{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;margin-top:12px}
.ctx-25 i{font-style:normal;font-size:0;height:9px;border-radius:3px;background:#2a2420}
.ctx.on .ctx-25 i{animation:ctxFill .35s ease forwards;animation-delay:calc(.4s + var(--i)*.07s)}
@keyframes ctxFill{to{background:var(--pt)}}
/* 같은 단어, 다른 장면 */
.ctx-word{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;min-height:150px}
.ctx-word>b{font-family:var(--en);font-size:clamp(40px,6vw,64px);font-weight:900;letter-spacing:-.04em;color:var(--pt)}
.ctx-word ul{list-style:none;display:grid;gap:8px}
.ctx-word li{background:#1c1815;border:1px solid #2c2521;border-radius:14px;padding:10px 14px;opacity:.32;transition:opacity .4s}
.ctx-word li span{display:block;font-family:var(--en);font-weight:800;font-size:15.5px}
.ctx-word li em{font-style:normal;color:var(--pt)}
.ctx-word li small{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.ctx.on .ctx-word li{animation:ctxTurn 6s ease-in-out infinite}
.ctx.on .ctx-word li:nth-child(2){animation-delay:2s}
.ctx.on .ctx-word li:nth-child(3){animation-delay:4s}
@keyframes ctxTurn{0%,30%{opacity:1;border-color:var(--pt)}36%,100%{opacity:.32;border-color:#2c2521}}
/* 쌓인다 */
.ctx-stack{display:flex;align-items:flex-end;gap:10px;height:150px}
.ctx-stack span{flex:1;height:var(--h);background:linear-gradient(to top,#3a1d12,var(--pt));border-radius:12px 12px 4px 4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:7px;font-size:11.5px;font-weight:700;color:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.2s + var(--i)*.18s)}
.ctx-stack b{font-family:var(--en);font-size:clamp(13px,1.8vw,19px);font-weight:900}
.ctx.on .ctx-stack span{transform:none}
/* OTT */
.ctx-ott{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:150px}
.ctx-ott>div{border-radius:16px;padding:14px;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:8px;text-align:center}
.ctx-ott{min-height:210px}
.ctx-ott .no{background:#16110f;border:1px dashed #4a3f38}
.ctx-ott .no span{width:clamp(66px,8.2vw,84px);height:clamp(66px,8.2vw,84px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(12.5px,1.25vw,14.5px);font-weight:900;line-height:1.15;letter-spacing:-.03em;color:#fff;background:#4a3f38;border:1px solid #6f6258;padding:4px;word-break:keep-all}
.ctx-ott .no b{flex-basis:100%;font-size:12px;font-weight:800;color:#7d736b;padding-top:2px}
.ctx.on .ctx-ott .no span{animation:ctxNoise 3s ease-in-out infinite}
.ctx.on .ctx-ott .no span:nth-child(3n){animation-duration:3.8s}
.ctx.on .ctx-ott .no span:nth-child(2n){animation-delay:.7s}
@keyframes ctxNoise{0%,100%{transform:translate3d(0,5px,0)}50%{transform:translate3d(0,-9px,0)}}
.ctx-ott .yes{background:var(--pt-soft);border:1px solid var(--pt);flex-direction:column}
.ctx-ott .yes b{font-size:clamp(15px,1.9vw,19px);font-weight:900}
.ctx-ott .yes span{font-size:12.5px;color:#e8ddd3;font-weight:600}
/* 시키는 앱 vs 보고 듣는 루피어 */
.ctx-do{margin-top:70px}
.ctx-do-h{text-align:center;font-size:clamp(28px,4.8vw,58px);font-weight:900;letter-spacing:-.055em;line-height:1.12}
.ctx-do-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:30px;align-items:stretch}
@media(max-width:860px){.ctx-do-grid{grid-template-columns:1fr}}
.ctx-do-grid>div{border-radius:26px;padding:24px;text-align:left;display:flex;flex-direction:column}
.ctx-do .k{font-family:var(--en);font-size:11.5px;font-weight:900;letter-spacing:.16em}
.ctx-do .t{font-size:15.5px;line-height:1.7;color:#d3cac1;margin-top:auto;padding-top:18px}
.ctx-do .t b{color:#fff}
.ctx-do .them{background:#131010;border:1px dashed #4a3f38}
.ctx-do .them .t{margin-top:0}
.ctx-do .them .k{color:#8d837a}
.ctx-do .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.ctx-do .chips span{font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:#cfc6bd;background:#241f1b;border:1px solid #3a322c;padding:10px 14px;border-radius:12px;opacity:0;transform:translate3d(0,10px,0) scale(.94)}
.ctx.on .ctx-do .chips span{animation:ctxNag .5s cubic-bezier(.2,1.4,.4,1) forwards,ctxTire 1.2s ease forwards;animation-delay:calc(.2s + var(--i)*.22s),calc(2.6s + var(--i)*.12s)}
@keyframes ctxNag{to{opacity:1;transform:none}}
@keyframes ctxTire{to{opacity:.5}}
.ctx-do .us{background:var(--pt-soft);border:1px solid var(--pt)}
.ctx-do .us .k{color:var(--pt)}
.ctx-do .ctx-scr{position:relative;margin-top:16px;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#000}
.ctx-do .ctx-scr img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ctx-do .ctx-scr .play{position:absolute;left:14px;bottom:20px;width:42px;height:42px;border-radius:50%;background:var(--pt);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:3px}
.ctx-do .ctx-scr .bar{position:absolute;left:66px;right:14px;bottom:39px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.ctx-do .ctx-scr .bar i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(.25);transform-origin:left}
.ctx.on .ctx-do .ctx-scr .bar i{animation:ctxPlay 9s linear infinite}
@keyframes ctxPlay{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-tier="1"] .ctx-do .chips span{opacity:.38;transform:none;animation:none;text-decoration:line-through;text-decoration-color:var(--pt)}
html[data-tier="1"] .ctx-do .ctx-scr .bar i{animation:none}
/* 인풋 없이 아웃풋을 시킨다 */
.ctx-in{margin-top:76px}
.ctx-in-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
@media(max-width:860px){.ctx-in-grid{grid-template-columns:1fr}}
.ctx-in-grid>div{border-radius:26px;padding:24px;text-align:left}
.ctx-in .k{font-family:var(--en);font-size:11.5px;font-weight:900;letter-spacing:.16em}
.ctx-in .empty{background:#131010;border:1px dashed #4a3f38}
.ctx-in .empty .k{color:#8d837a}
.ctx-in .full{background:var(--pt-soft);border:1px solid var(--pt)}
.ctx-in .full .k{color:var(--pt)}
.ctx-in .meter{height:14px;border-radius:7px;background:#2a2420;overflow:hidden;margin-top:16px}
.ctx-in .meter i{display:block;height:100%;width:100%;border-radius:7px;background:var(--pt);transform:scaleX(0);transform-origin:left}
.ctx-in .empty .meter i{transform:scaleX(.03);background:#6f665f}
.ctx.on .ctx-in .full .meter i{animation:ctxPour 2.4s cubic-bezier(.3,.7,.2,1) .3s forwards}
@keyframes ctxPour{to{transform:scaleX(1)}}
.ctx-in .asks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ctx-in .asks span{font-size:14.5px;font-weight:800;letter-spacing:-.02em;padding:10px 14px;border-radius:12px;background:#241f1b;border:1px solid #3a322c;color:#cfc6bd;opacity:0;transform:translate3d(0,8px,0)}
.ctx-in .full .asks span{background:rgba(10,9,8,.5);border-color:rgba(228,87,46,.5);color:#fff}
.ctx.on .ctx-in .asks span{animation:ctxNag .45s ease forwards;animation-delay:calc(.3s + var(--i)*.55s)}
.ctx-in .say{margin-top:18px;min-height:64px;display:flex;align-items:center;font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.ctx-in .say.none{color:#5b524b;letter-spacing:.2em}
.ctx-in .full .say{color:#fff;opacity:0;transform:translate3d(0,10px,0)}
.ctx.on .ctx-in .full .say{animation:ctxNag .6s ease 2.7s forwards}
.ctx-in .t{font-size:15.5px;line-height:1.7;color:#d3cac1;margin-top:8px}
.ctx-in .t b{color:#fff}
.ctx-in-end{text-align:center;font-size:clamp(30px,5.6vw,70px);font-weight:900;letter-spacing:-.06em;line-height:1.1;margin-top:44px}
html[data-tier="1"] .ctx-in .asks span,html[data-tier="1"] .ctx-in .full .say{opacity:1;transform:none;animation:none}
html[data-tier="1"] .ctx-in .full .meter i{transform:none;animation:none}
/* 결론 */
.ctx-only{text-align:center;margin-top:64px}
.ctx-only .a{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;font-size:clamp(28px,5.4vw,66px);font-weight:900;letter-spacing:-.055em;line-height:1.1}
.ctx-only .a i{font-style:normal;font-family:var(--en);color:#6f665f;font-weight:800}
.ctx-only .b{margin:18px auto 0;max-width:700px;color:#d3cac1;font-size:clamp(15.5px,1.6vw,18px);line-height:1.7}
.ctx-only .b b{color:#fff}
.ctx-only .c{margin-top:16px;font-size:14px;font-weight:700;color:var(--pt);letter-spacing:-.01em}
.ctx-ai{margin:56px auto 0;max-width:860px;text-align:center;border:1px solid var(--line);border-radius:30px;padding:44px 24px;background:linear-gradient(160deg,#1a120e,#0f0d0c)}
.ctx-ai .k{font-family:var(--en);font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--pt)}
.ctx-ai .ai-q{font-size:clamp(24px,4vw,46px);font-weight:900;letter-spacing:-.05em;line-height:1.22;margin:14px 0 16px}
.ctx-ai .ai-q s{color:#a79d94;text-decoration-color:var(--pt);text-decoration-thickness:max(2px,.03em)}
.ctx-ai .ai-d{color:#d3cac1;font-size:clamp(15px,1.5vw,17px);line-height:1.75;max-width:600px;margin:0 auto}
@media(max-width:520px){.ctx-card{padding:20px}.ctx-word{grid-template-columns:1fr;gap:10px}.ctx-ai{padding:34px 18px}}
/* 1단계·모션 줄이기: 움직이지 않는 완성 상태 */
html[data-tier="1"] .ctx-scraps span{opacity:1;transition:none}
html[data-tier="1"] .ctx-scraps span::after,html[data-tier="1"] .ctx-cut::after{transform:scaleX(1);transition:none}
html[data-tier="1"] .ctx-25 i{background:var(--pt);animation:none}
html[data-tier="1"] .ctx-word li{opacity:1;animation:none}
html[data-tier="1"] .ctx-stack span{transform:none;transition:none}
html[data-tier="1"] .ctx-ott .no span{animation:none}

@media(min-width:861px){.ctx-do .them{justify-content:center}.ctx-do .chips{gap:12px;margin:22px 0 10px}.ctx-do .chips span{font-size:19px;padding:14px 18px;border-radius:14px}.ctx-do .them .t{font-size:17px}}

/* ── 맥락 타이틀: 스크롤을 내리는 만큼 한 단계씩(.s1~.s6) — 토막을 크게 세웠다가 찍찍 긋는다 ── */
.ctx-live .ctx-h{opacity:0;transform:translate3d(0,46px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ctx-live.s1 .ctx-h{opacity:1;transform:none}
.ctx-live .ctx-cut{color:#fff;transition:color .35s ease .25s,transform .45s cubic-bezier(.2,1.6,.4,1)}
.ctx-live.s1 .ctx-cut{transform:scale(1.16)}
.ctx-live.s2 .ctx-cut{transform:none;color:#a59b92}
.ctx-live .ctx-cut::before,.ctx-live .ctx-cut::after{content:"";position:absolute;left:-14%;right:-14%;top:50%;height:max(3px,.045em);border-radius:2px;background:var(--pt);transform-origin:left;transform:rotate(-7deg) scaleX(0);transition:transform .2s cubic-bezier(.7,0,.2,1)}
.ctx-live .ctx-cut::before{transform:rotate(5deg) scaleX(0);transform-origin:right;top:56%;transition-delay:.16s}
.ctx-live.s2 .ctx-cut::after{transform:rotate(-7deg) scaleX(1)}
.ctx-live.s2 .ctx-cut::before{transform:rotate(5deg) scaleX(1)}
.ctx-live .ctx-stop{display:inline-block}
.ctx-live.s2 .ctx-stop{animation:ctxStop .6s cubic-bezier(.2,1.5,.4,1) .38s both}
@keyframes ctxStop{0%{transform:scale(1)}45%{transform:scale(1.18) rotate(-2deg)}100%{transform:none}}
.ctx-live .ctx-scraps{gap:16px 18px;margin:34px auto 44px;max-width:980px}
.ctx-live .ctx-scraps span{font-size:clamp(18px,2.7vw,30px);font-weight:900;padding:16px 22px;border-radius:8px;color:#fff;background:#1d1815;border:1px dashed #6f6258;opacity:0;transform:translate3d(0,26px,0) scale(.86) rotate(0deg);transition:opacity .3s ease,transform .5s cubic-bezier(.2,1.5,.4,1),color .4s ease,border-color .4s ease;transition-delay:0s}
.ctx-live .ctx-scraps span::before,.ctx-live .ctx-scraps span::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:3px;border-radius:2px;background:var(--pt);transform-origin:left;transform:rotate(-6deg) scaleX(0);transition:transform .18s cubic-bezier(.7,0,.2,1) .42s}
.ctx-live .ctx-scraps span::before{transform:rotate(7deg) scaleX(0);transform-origin:right;top:58%;transition-delay:.58s}
.ctx-live.s3 .ctx-scraps span:nth-child(1),.ctx-live.s4 .ctx-scraps span:nth-child(2),.ctx-live.s5 .ctx-scraps span:nth-child(3){opacity:1;transform:rotate(var(--r));animation:ctxDrop .5s ease .78s forwards}
.ctx-live.s3 .ctx-scraps span:nth-child(1)::after,.ctx-live.s4 .ctx-scraps span:nth-child(2)::after,.ctx-live.s5 .ctx-scraps span:nth-child(3)::after{transform:rotate(-6deg) scaleX(1)}
.ctx-live.s3 .ctx-scraps span:nth-child(1)::before,.ctx-live.s4 .ctx-scraps span:nth-child(2)::before,.ctx-live.s5 .ctx-scraps span:nth-child(3)::before{transform:rotate(7deg) scaleX(1)}
@keyframes ctxDrop{to{color:#b3a89e;border-color:#3a322c;transform:rotate(calc(var(--r)*2.2)) translate3d(0,8px,0)}}
.ctx.ctx-live .ctx-thesis.reveal{opacity:0;transform:translate3d(0,40px,0) scale(.96);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.2,1)}
.ctx.ctx-live.s6 .ctx-thesis.reveal{opacity:1;transform:none}

/* ── 전체: 내려오면 아래에서 떠올라 붙는다(기존보다 멀리·차례로) ── */
.reveal{opacity:0;transform:translate3d(0,56px,0);transition:opacity .8s ease,transform .95s cubic-bezier(.2,.75,.2,1);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
html[data-tier="1"] .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── 목적 하나 ── */
.ctx-only .k{font-family:var(--en);font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--pt)}
.ctx-only .a2{font-size:clamp(30px,5.6vw,70px);font-weight:900;letter-spacing:-.06em;line-height:1.1;margin:12px 0 30px}
.ctx-chain{display:flex;justify-content:center;align-items:stretch;gap:10px;max-width:920px;margin:0 auto}
.ctx-chain span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 12px;font-size:clamp(15px,1.9vw,21px);font-weight:900;letter-spacing:-.04em;line-height:1.3}
.ctx-chain span.on{background:var(--pt);border-color:var(--pt);color:#fff}
.ctx-chain i{font-style:normal;font-family:var(--en);font-weight:900;color:var(--pt);align-self:center;font-size:22px}
@media(max-width:640px){.ctx-chain{flex-direction:column}.ctx-chain i{transform:rotate(90deg)}}
.ctx-only .b{margin-top:26px}

/* ── 문법 ── */
.gram .lead b,.role .lead b{color:#fff}
.gram-arc{margin-top:26px}
.gram-arc .mc-card{width:340px;height:191px}
.gram-arc .mc-track{padding:26px calc(50% - 170px) 100px}
@media(max-width:520px){.gram-arc .mc-card{width:260px;height:146px}.gram-arc .mc-track{padding-left:calc(50% - 130px);padding-right:calc(50% - 130px)}}
.gram-ui{margin-top:10px}
.gram-sum{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px;margin-top:40px;font-size:clamp(15px,1.8vw,19px);font-weight:800;color:#d3cac1}
.gram-sum b{font-family:var(--en);font-size:clamp(30px,5vw,60px);font-weight:900;letter-spacing:-.04em;color:#fff;margin-right:6px}
.gram-sum .pt b{color:var(--pt)}
.gram-sum i{font-style:normal;font-family:var(--en);color:#6f665f;font-weight:800;font-size:clamp(20px,3vw,34px)}

/* ── 롤플레잉 ── */
.rp-beta{background:var(--pt);color:#fff;padding:3px 9px;border-radius:999px;letter-spacing:.12em}
.rp{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;margin-top:44px;text-align:left}
@media(max-width:860px){.rp{grid-template-columns:1fr;gap:26px;justify-items:center}}
.rp-phone{position:relative;width:min(78vw,330px);aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;border:8px solid #1b1815}
.rp-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-tag{position:absolute;z-index:3;left:12px;top:12px;font-size:11.5px;font-weight:800;background:rgba(10,9,8,.72);padding:6px 10px;border-radius:999px}
.rp-play{position:absolute;z-index:4;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--pt);color:#fff;font-size:28px;padding-left:6px;-webkit-tap-highlight-color:transparent}
.rp-phone.live .rp-play{display:none}
.rp-ov{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:70px 14px 16px;background:linear-gradient(to top,rgba(10,9,8,.94),rgba(10,9,8,.7) 55%,transparent);pointer-events:none}
.rp-ov>div{display:none}
.rp-ov .l{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#b9aea4}
.rp-ov .e{font-size:20px;font-weight:900;line-height:1.2;margin-top:5px}
.rp-ov .o{font-size:13.5px;color:#d3cac1;margin-top:4px}
.rp-phone[data-s="them"] .rp-them,.rp-phone[data-s="me"] .rp-me,.rp-phone[data-s="end"] .rp-end{display:block}
.rp-me{background:var(--pt);margin:0 -4px;padding:12px 14px;border-radius:18px}
.rp-me .l{color:#fff}
.rp-me .o{color:#fff}
.rp-timer{height:4px;border-radius:2px;background:rgba(255,255,255,.35);margin-top:10px;overflow:hidden}
.rp-timer i{display:block;height:100%;background:#fff;transform-origin:left;will-change:transform}
.rp-end{pointer-events:auto;text-align:center}
.rp-end p{font-size:15.5px;font-weight:800;line-height:1.5;margin-bottom:12px}
.rp-end .btn{font-size:15px;padding:13px 18px;border-radius:14px;box-shadow:none}
.rp-end .rp-again{display:block;margin:10px auto 0;font-size:13.5px;font-weight:700;color:#d3cac1;text-decoration:underline;padding:8px}
.rp-phone[data-s="end"] .rp-ov{padding-top:120px}
.rp-side{display:grid;gap:22px;width:100%;max-width:560px}
.rp-pick .k{font-family:var(--en);font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--pt);margin-bottom:10px}
.rp-who{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-who button{position:relative;border-radius:20px;overflow:hidden;border:2px solid #2c2521;background:#141110;aspect-ratio:4/3;-webkit-tap-highlight-color:transparent}
.rp-who img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:.55}
.rp-who span{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;font-weight:900;font-size:15.5px;background:linear-gradient(to top,rgba(10,9,8,.92),transparent)}
.rp-who button.on{border-color:var(--pt)}
.rp-who button.on img{opacity:1}
.rp-scenes{display:flex;flex-wrap:wrap;gap:8px}
.rp-scenes button{font-size:14px;font-weight:800;letter-spacing:-.02em;text-align:left;padding:11px 14px;border-radius:14px;background:#1b1714;border:1px solid #332b26;color:#cfc6bd;-webkit-tap-highlight-color:transparent}
.rp-scenes button.on{background:var(--pt-soft);border-color:var(--pt);color:#fff}
.rp-steps{margin-top:0}

/* ── 오디오북 ── */
.audio .lead b{color:#fff}
.au-wave{margin:34px auto 0;justify-content:center}
.au-two{text-align:center;font-size:clamp(24px,4vw,46px);font-weight:900;letter-spacing:-.05em;margin-top:34px}
.audio .hands{margin-top:26px}