/* PICORD 소개 페이지 (2026-10-20 다시: 'SNS엔 아직 없는 꾸미기, 여기서 먼저' — 트렌드에 빠른 앱이라 모션·무빙이 있는 감각적인 페이지)
   글은 전부 서버에서 그려 두고(검색·AI용), 움직임은 about.js가 얹음. 움직임 줄이기 설정이면 움직임 없이
   2026-10-20 디테일 다시: 넓은 판·여백 단계·작은 번호 머리·고운 선·결(노이즈)·노랑 하나만 (이전은 about-v1.css)
   덜어내기(사용자 요청): '먼저' 뒤 점·밑줄, 첫 화면 아래 정보 줄·SCROLL, NEW 배지·00:15 칩, 카드 번호, LIVE, 제안 스티커, 마지막 레코드 뺌
   디테일 2차: 장식선은 2~3px 이하, 큰 글씨 굵기 700·자간 -0.03em 안팎, 아이콘 선 1.8, 그림자 한 단계 약하게, NEW는 날짜에 한 번 */
.ab{--k:#0b0b0d;--k2:#141418;--k3:#1d1d23;--y:#ffd23f;--ln:rgba(255,255,255,.1);--e:cubic-bezier(.2,.8,.2,1);--eo:cubic-bezier(.16,1,.3,1);background:var(--k)}
html:has(.ab){scroll-behavior:smooth;background:#0b0b0d}
.ab ::selection{background:var(--y);color:var(--k)}
.ab main{background:#fff;overflow-x:clip}
.ab .wrap{max-width:1240px;padding:0 clamp(20px,3.4vw,40px)}
.ab section[id]{scroll-margin-top:64px}
.ab :focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:10px}
.ab svg{display:block}

/* 머리 메뉴 — 첫 화면에선 투명, 지나면 흰 유리 */
.ab .top{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s,box-shadow .4s}
.ab p{text-wrap:pretty}
.ab .top-in{height:68px}
.ab .top .logo,.ab .top .menu a{color:#fff;transition:color .3s}
.ab .top .menu a{color:rgba(255,255,255,.66)}
.ab .top .menu a:hover,.ab .top .menu a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.ab .top .open-app{background:var(--y);color:var(--k);transition:transform .25s var(--e)}
.ab .top .open-app:hover{transform:translateY(-1px)}
.ab .top.solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 rgba(17,17,20,.06)}
.ab .top.solid .logo{color:var(--ink)}
.ab .top.solid .menu a{color:var(--sub)}
.ab .top.solid .menu a:hover,.ab .top.solid .menu a[aria-current]{background:var(--soft);color:var(--ink)}
.ab .top.solid .open-app{background:var(--k);color:#fff}
/* 검은 칸 위에선 어두운 유리 */
.ab .top.solid.dk{background:rgba(11,11,13,.72);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.ab .top.solid.dk .logo{color:#fff}
.ab .top.solid.dk .menu a{color:rgba(255,255,255,.66)}
.ab .top.solid.dk .menu a:hover,.ab .top.solid.dk .menu a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.ab .top.solid.dk .open-app{background:var(--y);color:var(--k)}
.x-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--y);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
@media (max-width:640px){.ab .top-in{height:58px}}

/* 공통 조각 */
.x-noise{position:absolute;inset:0;pointer-events:none;opacity:.07;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.x-glow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,63,.2),rgba(255,210,63,.06) 55%,rgba(255,210,63,0));z-index:0}
.x-eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--sub);margin-bottom:22px}
.x-eyebrow b{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.x-eyebrow b::after{content:'';width:16px;height:1px;background:currentColor;opacity:.5}
.x-eyebrow::after{content:'';flex:1;height:1px;background:currentColor;opacity:.2;margin-left:6px}
.x-sec-h{margin-bottom:clamp(28px,4vw,48px)}
.x-sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.x-sec-h h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.032em;line-height:1.14;margin:0;font-weight:700}
.x-sec-h p{margin:0 0 6px;color:var(--sub);max-width:25em;font-size:15.5px;line-height:1.7;text-wrap:pretty}
.x-sec-h p a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:760px){.x-sec-row{flex-direction:column;align-items:flex-start;gap:12px}}

/* 버튼 */
.x-cta{display:flex;flex-wrap:wrap;gap:10px}
.x-btn{--bg:var(--y);--fg:var(--k);position:relative;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;font-weight:600;font-size:15.5px;letter-spacing:-.01em;height:52px;padding:0 7px 0 24px;border-radius:999px;background:var(--bg);color:var(--fg);transition:transform .35s var(--e),background .3s,box-shadow .35s;will-change:transform}
.x-btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--k);color:var(--y);transition:transform .35s var(--e)}
.x-btn i svg{width:17px;height:17px}
.x-btn:hover{box-shadow:0 10px 24px -12px rgba(255,210,63,.6)}
.x-btn:hover i{transform:translateX(3px) rotate(-45deg)}
.x-btn.line{--bg:transparent;--fg:#fff;padding:0 24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.x-btn.line:hover{--bg:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.x-btn.soft{--bg:var(--soft);--fg:var(--ink)}
.x-btn.soft:hover{box-shadow:none;--bg:var(--soft2)}

/* ───── 첫 화면 ───── */
.x-hero{position:relative;min-height:100svh;background:var(--k);color:#fff;overflow:hidden;display:flex;flex-direction:column;padding:96px 0 56px}
.x-hero>.x-glow{right:-8vw;top:6%;width:min(80vw,1000px);aspect-ratio:1}
.x-hero-in{position:relative;z-index:2;flex:1;width:100%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:20px}
.x-live{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 10px 0 14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--ln);color:rgba(255,255,255,.6);font-size:12.5px;font-weight:500;text-decoration:none;margin-bottom:28px;transition:background .3s}
.x-live:hover{background:rgba(255,255,255,.1)}
.x-live i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--y)}
.x-live i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--y);animation:ping 1.8s var(--e) infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.x-live b{color:#fff;font-weight:600}
.x-live svg{width:14px;height:14px;opacity:.5}
.x-h1{font-size:clamp(44px,min(6vw,10svh),88px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:0 0 26px}
.x-h1 .ln{display:block;overflow:hidden;padding:.02em 0 .08em;margin-bottom:-.06em}
.x-h1 .ln>span{display:inline-block}
.x-h1 em{font-style:normal;color:var(--y)}
.x-lead{font-size:clamp(15.5px,1.35vw,18px);line-height:1.75;color:rgba(255,255,255,.58);max-width:30em;margin:0 0 34px;text-wrap:pretty}
/* 레코드 무대 */
.x-stage{position:relative;width:min(100%,560px,64svh);aspect-ratio:1;justify-self:end;margin-right:-1vw}
.x-ring{position:absolute;left:-3.5%;top:1.8%;width:100%;height:100%;overflow:visible;animation:spin 48s linear infinite;z-index:0}
.x-ring text{fill:rgba(255,255,255,.26);font-size:11px;font-weight:600}
.x-rec{position:absolute;left:6%;top:6%;width:88%;z-index:1;will-change:transform}
.x-rec .hero-rec{max-width:none;filter:drop-shadow(0 50px 70px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(255,210,63,.08))}
@keyframes spin{to{rotate:360deg}}
.x-float{position:absolute;z-index:3;pointer-events:none;will-change:transform}
.x-float>*{animation:bob 5.5s ease-in-out infinite}

@keyframes bob{50%{translate:0 -10px}}
.x-float.f1{left:-4%;top:12%}.x-float.f3{left:-12%;bottom:22%}
.x-float.f3>*{animation-delay:-1s;animation-duration:4.8s}
.x-bub{position:relative;background:#fff;color:var(--k);font-weight:600;font-size:13.5px;letter-spacing:-.01em;padding:10px 14px;border-radius:18px 18px 18px 5px;box-shadow:0 12px 28px -12px rgba(0,0,0,.55);white-space:nowrap}
.x-bub.y{background:var(--y);border-radius:18px 18px 5px 18px}
.v-rec .pg{display:block;width:44px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.v-rec .pg span{display:block;height:100%;background:var(--y);transform-origin:left;animation:prog 7.5s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){
  .x-hero{padding-top:96px}
  .x-hero-in{grid-template-columns:1fr;gap:8px}
  .x-stage{justify-self:center;width:min(86vw,440px);margin:44px 0 0}
  .x-float.f1{left:-6%;top:6%}.x-float.f3{left:-4%;bottom:10%}
}
@media (max-width:560px){
  .x-h1{font-size:clamp(40px,12.4vw,56px)}
  .x-live{margin-bottom:22px;font-size:12px}
  .x-lead{margin-bottom:26px}
  .x-cta .x-btn{flex:1;justify-content:space-between;padding-left:20px;font-size:15.5px}.x-btn.line{justify-content:center;padding:0 16px}
  .x-bub{font-size:12.5px;padding:9px 13px}
}

/* ───── 흐르는 띠 ───── */
.x-marq{position:relative;z-index:1;background:var(--y);color:var(--k);overflow:hidden;padding:15px 0}
.x-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.x-marq:hover .x-track{animation-play-state:paused}
.x-track span{display:inline-flex;align-items:center;font-weight:700;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.02em;white-space:nowrap}
.x-track span::after{content:'';width:.42em;height:.42em;margin:0 1em;border-radius:50%;background:radial-gradient(circle,var(--k) 0 20%,transparent 22%);box-shadow:inset 0 0 0 1.5px var(--k)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ───── 01 정의 ───── */
.x-def{padding:clamp(90px,12vw,150px) 0 clamp(70px,9vw,110px)}
.x-big{font-size:clamp(28px,4.6vw,62px);line-height:1.3;letter-spacing:-.032em;font-weight:700;margin:0;max-width:18ch}
.x-big .w{color:#e2e2e7;transition:color .35s}
.x-big .w.on{color:var(--ink)}
.x-big .w.hl{background:linear-gradient(var(--y),var(--y)) 0 96%/0 max(3px,.05em) no-repeat;transition:color .35s,background-size .6s var(--eo)}
.x-big .w.hl.on{background-size:100% max(3px,.05em)}
.x-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(56px,7vw,88px)}
.x-pill{position:relative;background:var(--soft);border-radius:28px;padding:26px 26px 28px;min-height:230px;display:flex;flex-direction:column;transition:transform .45s var(--e),background .35s,color .35s}
.x-pill .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--ink);transition:background .35s,color .35s,transform .45s var(--e)}
.x-pill .ic svg{width:21px;height:21px}
.x-pill h3{font-size:20px;letter-spacing:-.02em;font-weight:700;margin:auto 0 8px;padding-top:28px}
.x-pill p{margin:0;font-size:15px;line-height:1.65;color:#5a5a64;transition:color .35s}
.x-pill:hover{transform:translateY(-4px);background:var(--k);color:#fff}
.x-pill:hover .ic{background:var(--y);color:var(--k)}
.x-pill:hover p{color:rgba(255,255,255,.62)}
@media (max-width:820px){.x-pills{grid-template-columns:1fr;gap:10px}.x-pill{min-height:0;flex-direction:row;flex-wrap:wrap;gap:4px 16px;align-items:center;padding:20px}.x-pill .ic{width:46px;height:46px;border-radius:14px}.x-pill h3{margin:0;padding:0;flex:1;font-size:18.5px}.x-pill p{flex-basis:100%;margin-top:10px;font-size:14.5px}}

/* ───── 02 기능 (2026-10-20 다시: 휴대폰 화면으로 — PC는 휴대폰이 고정되고 설명을 스크롤하면 화면이 바뀜, 휴대폰은 옆으로 넘기기) ───── */
.x-feat{padding:clamp(60px,8vw,110px) 0 clamp(90px,11vw,140px)}
.x-show{--ph:min(640px,76svh);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.x-phone-col{position:relative}
.x-phone-wrap{position:sticky;top:calc(50svh - var(--ph) / 2 + 30px);height:var(--ph);display:grid;place-items:center}
/* 뒤의 노란 레코드 */
.x-blob{position:absolute;left:50%;top:50%;width:min(500px,40vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(11,11,13,0) 0 5px,rgba(11,11,13,.06) 5px 6px),var(--y);animation:spin 30s linear infinite}
.x-blob::after{content:'';position:absolute;inset:44%;border-radius:50%;background:#fff;box-shadow:0 0 0 10px var(--y),0 0 0 11px rgba(11,11,13,.12)}
.x-phone{position:relative;height:100%;aspect-ratio:9/18.6;border-radius:50px;background:#0b0b0d;box-shadow:inset 0 0 0 1.5px #3a3a42,inset 0 0 0 4px #0b0b0d,inset 0 0 0 5px #23232a,0 50px 90px -30px rgba(17,17,20,.55),0 20px 40px -20px rgba(17,17,20,.4)}
.x-phone::before,.x-phone::after{content:'';position:absolute;width:3px;border-radius:2px;background:#2a2a30}
.x-phone::before{left:-3px;top:22%;height:9%}.x-phone::after{right:-3px;top:28%;height:14%}
.x-island{position:absolute;z-index:6;top:20px;left:50%;translate:-50% 0;width:30%;height:26px;border-radius:20px;background:#000}
.x-phone .x-scr{position:absolute;inset:10px;border-radius:40px;opacity:0;scale:.97;transition:opacity .55s var(--e),scale .7s var(--eo)}
.x-phone .x-scr.on{opacity:1;scale:1}
.x-pager{position:absolute;left:0;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.x-pager .num{font-variant-numeric:tabular-nums;line-height:1}
.x-pager .num b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em}
.x-pager .num span{font-size:12.5px;font-weight:600;color:var(--sub)}
.x-pager .dots{display:flex;flex-direction:column;gap:6px}
.x-pager .dots i{width:2px;height:14px;border-radius:1px;background:var(--soft2);transition:background .3s,height .4s var(--eo)}
.x-pager .dots i.on{background:var(--k);height:26px}
/* 화면 하나 (휴대폰 안 · 휴대폰에서 넘기는 카드 둘 다) */
.x-scr{overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#24242b,#111114 60%);color:#fff;isolation:isolate}
.x-scr .bar{position:absolute;z-index:4;left:0;right:0;top:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 10px;font-size:13px}
.x-scr .bar i{display:grid;place-items:center;width:26px;height:26px;opacity:.8}
.x-scr .bar i svg{width:18px;height:18px}
.x-scr .bar b{font-weight:600;letter-spacing:-.01em}
.x-scr .bar span{font-size:11px;font-weight:600;background:var(--y);color:var(--k);border-radius:999px;padding:5px 11px}
.x-scr .x-art{position:absolute;inset:96px 0 72px;overflow:hidden}
.x-scr .tools{position:absolute;z-index:4;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:6px;padding:0 10px}
.x-scr .tools span{font-size:11px;font-weight:500;white-space:nowrap;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8)}
.x-scr .tools span:first-child{background:#fff;color:var(--k)}
/* 설명 */
.x-steps{list-style:none;margin:0;padding:0}
.x-step{min-height:58svh;display:flex;align-items:center;padding:24px 0}
.x-step:first-child{min-height:calc(50svh + 40px)}
.x-step-tx{max-width:460px;transition:opacity .5s var(--e),translate .6s var(--eo)}
.js .x-step:not(.on) .x-step-tx{opacity:.22;translate:0 10px}
.x-step .meta{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.x-step .tag{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.x-step.on .tag{background:var(--y)}
.x-step h3{font-size:clamp(28px,3.2vw,42px);line-height:1.15;letter-spacing:-.032em;margin:0 0 14px;font-weight:700}
.x-step p{margin:0;font-size:16.5px;line-height:1.75;color:#5a5a64}
.x-step ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.x-step li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink)}
.x-step li svg{flex:none;width:16px;height:16px;color:var(--ink);stroke-width:2}
.x-scr-m{display:none}
.x-swipe{display:none}
@media (max-width:900px){
  .x-show{display:block}
  .x-phone-col{display:none}
  .x-swipe{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--sub);margin:-8px 0 16px}
  .x-swipe svg{width:16px;height:16px;animation:nudge 1.6s var(--e) infinite}
  @keyframes nudge{50%{translate:4px 0}}
  .x-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * clamp(20px,3.4vw,40px));padding:0 clamp(20px,3.4vw,40px) 8px;scroll-padding:0 clamp(20px,3.4vw,40px);scrollbar-width:none}
  .x-steps::-webkit-scrollbar{display:none}
  .x-step,.x-step:first-child{flex:0 0 min(78%,340px);min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:8px 8px 20px;border-radius:30px;background:var(--soft);scroll-snap-align:start}
  .x-scr-m{display:block;position:relative;aspect-ratio:9/13.5;border-radius:23px;overflow:hidden}
  .x-scr-m .x-scr{position:absolute;inset:0}
  .x-scr-m .bar{top:12px}
  .x-scr-m .x-art{inset:50px 0 56px}
  .x-scr-m .tools{bottom:14px}
  .x-step-tx{padding:16px 10px 0}
  .js .x-step:not(.on) .x-step-tx{opacity:1;translate:none}
  .x-step .tag{background:var(--y)}
  .x-step .meta{margin-bottom:10px}
  .x-step h3{font-size:23px;margin-bottom:8px}
  .x-step p{font-size:14.5px}
  .x-step ul{margin-top:14px}
  .x-step li{font-size:13.5px;padding:10px 0;gap:10px}
}
/* 화면 속 그림 (사진은 앱 예시 사진) */
.v-rec .blur{position:absolute;inset:-30px;background:center/cover;filter:blur(26px) brightness(.45) saturate(1.2)}
.v-rec .disc{position:absolute;left:50%;top:50%;width:82%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#050505 center/cover;box-shadow:0 30px 60px -10px rgba(0,0,0,.7),0 0 0 5px #18181d,0 0 0 6px rgba(255,255,255,.1);animation:spin 7.5s linear infinite}
.v-rec .disc::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.18)),conic-gradient(from 30deg,transparent,rgba(255,255,255,.18) 8%,transparent 18%,transparent 50%,rgba(255,255,255,.12) 58%,transparent 68%)}
.v-rec .disc i{position:absolute;inset:39%;border-radius:50%;background:var(--y);box-shadow:0 0 0 4px #050505}
.v-rec .disc i::after{content:'';position:absolute;inset:42%;border-radius:50%;background:#050505}
.v-rec .loop{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:rgba(11,11,13,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--ln);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.v-rec .loop i{width:6px;height:6px;border-radius:50%;background:var(--y)}
.v-col .strip{position:absolute;left:10%;top:50%;height:70%;display:flex;gap:6px;translate:0 -50%;animation:swipe 7s var(--e) infinite}
.v-col .strip i{flex:none;height:100%;aspect-ratio:4/5;border-radius:10px;background-size:300% auto;background-position-y:40%;box-shadow:0 14px 28px -8px rgba(0,0,0,.6)}
.v-col .strip i:nth-child(1){background-position-x:0}.v-col .strip i:nth-child(2){background-position-x:50%}.v-col .strip i:nth-child(3){background-position-x:100%}
@keyframes swipe{0%,24%{transform:translateX(0)}33%,57%{transform:translateX(calc(-33.33% - 2px))}66%,90%{transform:translateX(calc(-66.66% - 4px))}100%{transform:translateX(0)}}
.v-col .dots{position:absolute;bottom:4%;left:50%;translate:-50% 0;display:flex;gap:5px}
.v-col .dots i{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);animation:dot 7s infinite}
.v-col .dots i:nth-child(2){animation-delay:2.33s}.v-col .dots i:nth-child(3){animation-delay:4.66s}
@keyframes dot{0%,30%{width:14px;background:#fff}34%,100%{width:5px}}
.v-grid{display:grid;place-items:center}
.v-grid .sheet{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:66%;padding:6px 6px 16%;background:#fff;border-radius:4px;rotate:-3deg;box-shadow:0 18px 30px -8px rgba(0,0,0,.6)}
.v-grid .sheet i{aspect-ratio:3/4;background:center/cover;border-radius:2px;animation:flash 4s infinite}
.v-grid .sheet i:nth-child(2){animation-delay:1s}.v-grid .sheet i:nth-child(3){animation-delay:2s}.v-grid .sheet i:nth-child(4){animation-delay:3s}
.v-grid .sheet b{position:absolute;bottom:4%;left:0;right:0;text-align:center;color:var(--k);font-size:8.5px;letter-spacing:.3em;font-weight:800}
@keyframes flash{0%,6%{filter:brightness(2.4)}18%,100%{filter:none}}
.v-stk{display:grid;place-items:center;background:conic-gradient(#1b1b20 25%,#24242a 0 50%,#1b1b20 0 75%,#24242a 0) 0 0/20px 20px}
.v-stk .s{position:relative;width:66%;aspect-ratio:1;border-radius:50%;background:center/cover;box-shadow:0 0 0 6px #fff,0 22px 34px -6px rgba(0,0,0,.7);animation:peel 3.6s ease-in-out infinite}
.v-stk .cut{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(255,210,63,.75);animation:spin 14s linear infinite}
@keyframes peel{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06) translateY(-6px)}}
.v-ret img{width:100%;height:100%;object-fit:cover;display:block;animation:soft 3s ease-in-out infinite}
.v-ret .brush{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(0,0,0,.25);left:18%;top:34%;animation:brush 3s ease-in-out infinite}
.v-ret .chip{position:absolute;left:50%;bottom:14px;translate:-50% 0;height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;border-radius:999px;background:rgba(11,11,13,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11.5px;font-weight:600;white-space:nowrap}
.v-ret .chip b{color:var(--y);font-variant-numeric:tabular-nums}
@keyframes brush{0%,100%{transform:translate(0,0)}50%{transform:translate(120%,30%)}}
@keyframes soft{50%{filter:brightness(1.1) saturate(1.08)}}
.v-tog{display:grid;place-items:center;container-type:inline-size}
.v-tog .frame{position:absolute;width:72%;aspect-ratio:4/5;border-radius:16px;background:center/cover;opacity:0;scale:.85;animation:frame 5s var(--e) infinite;box-shadow:0 20px 40px -10px rgba(0,0,0,.7),0 0 0 3px var(--y)}
@keyframes frame{0%,36%{opacity:0;scale:.85}50%,86%{opacity:1;scale:1}100%{opacity:0;scale:.85}}
.v-tog .f{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;animation:merge 5s var(--e) infinite}
.v-tog .f>span{display:block;width:26cqw;aspect-ratio:1;border-radius:50%;background-size:300%;box-shadow:0 0 0 3px var(--y),0 14px 26px -8px rgba(0,0,0,.7)}
.v-tog .f b{font-size:11px;font-weight:700;color:var(--k);background:var(--y);border-radius:999px;padding:2px 9px;white-space:nowrap}
.v-tog .f1{--tx:-22cqw;--ty:-26cqw}.v-tog .f2{--tx:22cqw;--ty:-6cqw;animation-delay:.08s}.v-tog .f3{--tx:-14cqw;--ty:26cqw;animation-delay:.16s}
.v-tog .f2>span,.v-tog .f3>span{box-shadow:0 0 0 2px rgba(255,255,255,.7),0 14px 26px -8px rgba(0,0,0,.7)}
.v-tog .f2 b,.v-tog .f3 b{background:#fff}
@keyframes merge{0%,30%{transform:translate(var(--tx),var(--ty));opacity:1}48%{transform:translate(0,0) scale(.6);opacity:0}90%{transform:translate(var(--tx),var(--ty)) scale(.6);opacity:0}100%{transform:translate(var(--tx),var(--ty));opacity:1}}
.v-rou{display:grid;place-items:center;container-type:size}
.v-rou .w{width:min(84cqw,84cqh);aspect-ratio:1;border-radius:50%;background:center/cover;box-shadow:0 0 0 4px #fff,0 22px 40px -8px rgba(0,0,0,.7);animation:roul 4.5s cubic-bezier(.15,.8,.25,1) infinite}
.v-rou .pin{position:absolute;top:calc(50cqh - min(42cqw,42cqh) - 16px);left:50%;translate:-50% 0;width:24px;height:28px;background:var(--y);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.v-rou .res{position:absolute;bottom:14px;left:50%;translate:-50% 0;font-size:12px;font-weight:700;background:var(--y);color:var(--k);padding:7px 13px;border-radius:999px;white-space:nowrap;animation:res 4.5s var(--e) infinite}
@keyframes roul{0%{rotate:0deg}75%,100%{rotate:1110deg}}
@keyframes res{0%,74%{opacity:0;scale:.8}80%,100%{opacity:1;scale:1}}
.v-lad svg{position:absolute;inset:12% 14% 18%;width:72%;height:70%;overflow:visible}
.v-lad .rail path{stroke:rgba(255,255,255,.8);stroke-width:1.6;vector-effect:non-scaling-stroke;fill:none}
.v-lad .rung path{stroke:rgba(255,255,255,.32);stroke-width:1.6;vector-effect:non-scaling-stroke;fill:none}
.v-lad .win{stroke:var(--y);stroke-width:3;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:climb 3.6s var(--e) infinite}
@keyframes climb{0%{stroke-dashoffset:240}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.v-lad>b{position:absolute;left:calc(14% + 72% * .8);top:calc(12% + 70% * .88 + 8px);translate:-50% 0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--y);color:var(--k);font-size:12px;font-weight:800;animation:land 3.6s var(--e) infinite}
@keyframes land{0%,55%{scale:0}65%,85%{scale:1}100%{scale:1;opacity:0}}


/* ───── 03 업데이트 ───── */
.x-up{position:relative;background:var(--k);color:#fff;padding:clamp(90px,11vw,140px) 0}
.x-up>.wrap{position:relative;z-index:1}
.x-up .x-eyebrow{color:rgba(255,255,255,.5)}
.x-up .x-eyebrow b{color:#fff}
.x-up .x-sec-h p{color:rgba(255,255,255,.55)}
.x-up-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,5vw,72px);align-items:start}
.x-count{position:sticky;top:96px;background:var(--k2);border-radius:28px;padding:26px 26px 22px;box-shadow:inset 0 0 0 1px var(--ln)}
.x-count-h{font-size:13px;color:rgba(255,255,255,.5);font-weight:600}
.x-count>b{display:block;font-size:clamp(88px,9.5vw,128px);line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--y);margin:18px 0 6px;font-variant-numeric:tabular-nums}
.x-count .cap{display:block;font-size:15px;font-weight:500;color:rgba(255,255,255,.7)}
.x-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:120px;margin:28px 0 22px;padding-top:6px;border-top:1px solid var(--ln)}
.x-week .d{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.x-week .bar{position:relative;width:100%;max-width:20px;height:calc(var(--h) * .72 + 3px);min-height:3px;border-radius:4px;background:rgba(255,255,255,.1);transform-origin:bottom;transition:transform .9s var(--eo);transition-delay:calc(var(--i) * 60ms)}
.x-week .on .bar{background:var(--y)}
.x-week .bar em{position:absolute;top:-19px;left:50%;translate:-50% 0;font-style:normal;font-size:11px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.x-week small{font-size:11px;color:rgba(255,255,255,.38);font-weight:500}
.x-week .now small{color:#fff}
.js .x-count:not(.in) .x-week .bar{transform:scaleY(0)}
.x-mini{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-weight:600;font-size:14px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.06);transition:background .3s}
.x-mini svg{width:16px;height:16px;transition:transform .35s var(--e)}
.x-mini:hover{background:rgba(255,255,255,.1)}.x-mini:hover svg{transform:translateX(3px)}
.x-log .g{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:26px 0;border-top:1px solid var(--ln)}
.x-log .g:last-child{border-bottom:1px solid var(--ln)}
.x-log time{display:flex;flex-direction:column;gap:2px;padding-top:3px}
.x-log time b{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.x-log time small{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.42);font-weight:500}
.x-log ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.x-log li{padding:12px 16px;margin:0 -16px;border-radius:16px;transition:background .3s}
.x-log li:hover{background:rgba(255,255,255,.04)}
.x-log h3{margin:0 0 3px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.x-log p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.55)}
.x-log .new{font-size:9.5px;font-weight:700;letter-spacing:.06em;background:var(--y);color:var(--k);border-radius:999px;padding:3px 6px;line-height:1}
@media (max-width:900px){.x-up-grid{grid-template-columns:1fr}.x-count{position:static}}
@media (max-width:560px){.x-log .g{grid-template-columns:1fr;gap:6px;padding:20px 0}.x-log time{flex-direction:row;align-items:baseline;gap:8px}.x-log time b{font-size:18px}.x-log li{padding:10px 12px;margin:0 -12px}.x-log h3{font-size:16.5px}.x-count{padding:22px 20px 18px}.x-week{height:104px}}

/* ───── 04 제안 ───── */
.x-sug{padding:clamp(90px,11vw,140px) 0 clamp(60px,8vw,100px)}
.x-sug-box{position:relative;background:var(--y);border-radius:40px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.x-sug .x-eyebrow{color:rgba(11,11,13,.6)}
.x-sug .x-eyebrow::after{opacity:.25}
.x-sug h2{font-size:clamp(32px,4.4vw,54px);line-height:1.14;letter-spacing:-.032em;margin:0 0 18px;font-weight:700}
.x-sug-l>p{margin:0;font-size:16.5px;line-height:1.7;color:rgba(11,11,13,.75);max-width:26em}
.x-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.x-chips>span{flex-basis:100%;font-size:12.5px;font-weight:600;color:rgba(11,11,13,.55);margin-bottom:2px}
.x-chips button{display:inline-flex;align-items:center;gap:6px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.55);color:var(--k);font:inherit;font-size:13.5px;font-weight:500;padding:0 14px 0 11px;cursor:pointer;transition:background .25s,transform .25s var(--e)}
.x-chips button svg{width:14px;height:14px}
.x-chips button:hover{background:#fff;transform:translateY(-1px)}
.x-form{position:relative;background:#fff;border-radius:28px;padding:20px 22px 18px;box-shadow:0 30px 60px -30px rgba(80,60,0,.4),0 0 0 1px rgba(11,11,13,.04)}
.x-form .hd{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid #f0f0f3}
.x-form .hd i{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 1px rgba(11,11,13,.15)}
.x-form .hd b{color:var(--ink);font-weight:600}
.x-form .cnt{margin-left:auto;font-variant-numeric:tabular-nums}
.x-form .cnt b{font-weight:600;color:var(--ink)}
.x-form textarea{display:block;width:100%;min-height:150px;border:0;resize:none;font:inherit;font-size:17px;line-height:1.65;outline:none;color:var(--ink);background:transparent;padding:4px 0}
.x-form textarea::placeholder{color:#a9a9b2}
.x-form .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px}
.x-form small{color:var(--sub);font-size:12.5px;min-width:0}
.x-form small.err{color:#d23b3b;font-weight:600}
.x-form button[type=submit]{display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap;height:46px;border:0;border-radius:999px;background:var(--k);color:#fff;font:inherit;font-weight:600;font-size:14.5px;padding:0 18px 0 20px;cursor:pointer;transition:background .25s,color .25s,transform .3s var(--e)}
.x-form button[type=submit] svg{width:17px;height:17px;color:var(--y);transition:transform .35s var(--e)}
.x-form button[type=submit]:not(:disabled):hover svg{transform:translateX(3px)}
.x-form button[type=submit]:disabled{background:var(--soft2);color:#a9a9b2;cursor:default}
.x-form button[type=submit]:disabled svg{color:#a9a9b2}
.x-form .done{display:none;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 10px 26px}
.x-form .ok{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--y);margin-bottom:8px}
.x-form .ok svg{width:28px;height:28px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30}
.x-form .done b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.x-form .done>span{font-size:14px;color:var(--sub)}
.x-form .again{margin-top:14px;border:0;background:var(--soft);border-radius:999px;font:inherit;font-weight:600;font-size:13.5px;padding:11px 18px;cursor:pointer}
.x-form.sent .hd,.x-form.sent textarea,.x-form.sent .row{display:none}
.x-form.sent .done{display:flex;animation:pop .55s var(--eo)}
.x-form.sent .ok svg{animation:draw .5s .2s var(--e) forwards}
@keyframes pop{from{transform:scale(.92);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:900px){.x-sug-box{grid-template-columns:1fr;border-radius:32px}}
@media (max-width:560px){.x-sug-box{border-radius:28px;padding:30px 18px 18px}.x-form{border-radius:22px;padding:16px 16px 14px}.x-form textarea{min-height:120px;font-size:16px}.x-form .row{flex-wrap:wrap}.x-form button[type=submit]{width:100%;justify-content:center}}

/* ───── 05 가이드 ───── */
.x-guide{padding:clamp(40px,5vw,60px) 0 clamp(90px,11vw,140px)}
.x-guide .cards{gap:20px;margin-top:0}
.x-guide .card .thumb{border-radius:24px;aspect-ratio:4/3}
.x-guide .card .thumb img{transition:transform .7s var(--e)}
.x-guide .card:hover .thumb img{transform:scale(1.045)}
.x-guide .card-t{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-top:10px}
.x-guide .more{margin-top:32px}

/* ───── 마지막 + 바닥 (검정으로 이어짐) ───── */
.x-end{position:relative;background:var(--k);color:#fff;text-align:center;padding:clamp(100px,13vw,170px) 0 0;overflow:hidden}
.x-end>.x-glow{left:50%;top:-10%;width:min(90vw,900px);aspect-ratio:1;translate:-50% 0}
.x-end .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.x-end h2{font-size:clamp(42px,6.6vw,88px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:0 0 22px}
.x-end p{margin:0 0 36px;color:rgba(255,255,255,.56);font-size:clamp(15.5px,1.4vw,18px);max-width:28em;text-wrap:balance}
.x-word{position:relative;z-index:0;margin-top:clamp(70px,9vw,120px);font-size:clamp(80px,22vw,330px);line-height:.78;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);white-space:nowrap;user-select:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 80%);-webkit-background-clip:text;background-clip:text}
.ab .foot{background:var(--k);color:rgba(255,255,255,.45);border-top:1px solid var(--ln);padding:36px 0 44px}
.ab .foot .logo{color:#fff}
.ab .foot .brand-line{color:rgba(255,255,255,.55)}
.ab .foot-nav a{color:rgba(255,255,255,.75);transition:color .25s}
.ab .foot-nav a:hover{color:var(--y)}
.ab .foot .op a{color:inherit}

/* 등장 움직임 (JS가 켤 때만 — 끄면 그냥 다 보임) */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--eo),transform 1s var(--eo);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .x-pill.rv.in:hover{transform:translateY(-4px)}
.js .x-h1 .ln>span{transform:translateY(105%);transition:transform 1.1s var(--eo);transition-delay:var(--d,0s)}
.js .ready .x-h1 .ln>span{transform:none}
.js .x-hero .x-live,.js .x-hero .x-lead,.js .x-hero .x-cta{opacity:0;transform:translateY(14px);transition:opacity .9s var(--eo),transform .9s var(--eo);transition-delay:.5s}
.js .x-hero .x-live{transition-delay:.05s}
.js .ready .x-live,.js .ready .x-lead,.js .ready .x-cta{opacity:1;transform:none}
.js .x-stage{opacity:0;scale:.92;transition:opacity 1.4s .15s var(--eo),scale 1.6s .15s var(--eo)}
.js .ready .x-stage{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){
  html:has(.ab){scroll-behavior:auto}
  .ab *,.ab *::before,.ab *::after{animation:none!important;transition:none!important}
  .js .rv,.js .x-h1 .ln>span,.js .x-hero .x-live,.js .x-hero .x-lead,.js .x-hero .x-cta,.js .x-stage{opacity:1!important;transform:none!important;scale:1!important}
  .x-big .w{color:var(--ink)}.x-big .w.hl{background-size:100% max(3px,.05em)}
  .v-tog .frame{opacity:1;scale:1}.v-tog .f{opacity:0}.v-lad .win{stroke-dashoffset:0}.v-lad>b{scale:1}
  .js .x-count .x-week .bar{transform:none}
}

/* ───── 2026-10-28 사용자: modora.co.kr 같은 효과 (방식만 참고, 코드·그림은 PICORD용으로 새로) ─────
   ① 첫 화면 꾸미기 조각(폴라로이드·누끼 스티커·별·마스킹 테이프)이 통통 튀며 붙고 둥실 떠 있음
   ② 휴대폰 뒤 잔잔하게 퍼지는 원 ③ 휴대폰에서 도구 카드가 튀어나옴 ④ 설명 줄이 하나씩 도착
   ⑤ 휴대폰이 마우스·기능 바뀔 때 살짝 돌아감 ⑥ 아래 떠 있는 '지금 써 보기' ⑦ 내리면 머리 메뉴 접힘 */
.x-float.f4{right:-6%;top:-3%}.x-float.f5{right:2%;bottom:-2%}.x-float.f6{left:12%;top:-6%}.x-float.f7{left:2%;bottom:4%}
.x-float.f4>*{animation-duration:6.2s;animation-delay:-2s}.x-float.f5>*{animation-duration:5.1s;animation-delay:-3s}.x-float.f6>*{animation-duration:4.4s}.x-float.f7>*{animation-duration:6.8s;animation-delay:-1.4s}
.x-obj{rotate:var(--r,0deg);filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
.x-obj.pol{width:clamp(92px,9vw,128px);padding:7px 7px 0;background:#fbfaf7;border-radius:6px}
.x-obj.pol span{display:block;aspect-ratio:1;border-radius:3px;background:#333 center/cover}
.x-obj.pol b{display:block;padding:7px 0 8px;font:800 9px/1 Montserrat,sans-serif;letter-spacing:.16em;color:#111;text-align:center}
.x-obj.cut{width:clamp(70px,6.6vw,92px);aspect-ratio:1;border-radius:50%;padding:5px;background:#fff}
.x-obj.cut span{display:block;width:100%;height:100%;border-radius:50%;background:#333 center 20%/cover}
.x-obj.star{width:clamp(46px,4.4vw,62px);color:var(--y)}
.x-obj.star svg{width:100%;height:auto;fill:currentColor;stroke:#fff;stroke-width:3;stroke-linejoin:round;paint-order:stroke}
.x-obj.tape{width:clamp(70px,6.4vw,92px);height:22px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,210,63,.92) 0 10px,rgba(255,226,120,.92) 10px 20px);opacity:.92;-webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0);mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0)}
@keyframes boing{0%{opacity:0;scale:.2;translate:0 30px}55%{opacity:1;scale:1.12;translate:0 -6px}75%{scale:.95;translate:0 2px}100%{opacity:1;scale:1;translate:0 0}}
.js .x-obj{opacity:0}
.js .ready .x-obj{animation:boing .9s var(--d,.6s) cubic-bezier(.3,1.4,.5,1) both}
@media (max-width:900px){.x-float.f4{right:-2%;top:-6%}.x-float.f5{right:4%;bottom:-6%}.x-float.f6{left:8%;top:-8%}.x-float.f7{display:none}}

/* ② 휴대폰 뒤 원 */
.x-rings{position:absolute;left:50%;top:50%;width:min(500px,40vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.x-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(17,17,20,.08);animation:ripple 9s linear infinite}
.x-rings i:nth-child(2){animation-delay:-3s}.x-rings i:nth-child(3){animation-delay:-6s}
@keyframes ripple{0%{scale:1;opacity:0}12%{opacity:1}100%{scale:2.3;opacity:0}}

/* ③ 도구 카드 */
.x-calls{position:absolute;inset:0;pointer-events:none;z-index:3}
.x-call-g{position:absolute;inset:0}
.x-call{position:absolute;min-width:150px;padding:12px 16px 13px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(17,17,20,.05),0 18px 40px -14px rgba(17,17,20,.28);opacity:0;scale:.6;translate:var(--fx,0) 14px;transition:opacity .35s var(--e),scale .5s cubic-bezier(.3,1.5,.5,1),translate .5s var(--eo);transition-delay:0s}
.x-call small{display:block;font-size:11px;font-weight:600;color:var(--sub);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.x-call b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.x-call b i{width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px rgba(255,210,63,.25)}
.x-call.c0{right:calc(50% + var(--ph) * .242 - 44px);top:15%;--fx:30px}
.x-call.c1{left:calc(50% + var(--ph) * .242 - 44px);top:43%;--fx:-30px}
.x-call.c2{right:calc(50% + var(--ph) * .242 - 28px);top:71%;--fx:30px}
.x-call-g.on .x-call{opacity:1;scale:1;translate:0 0;transition-delay:calc(.18s + var(--k) * .12s)}

/* ⑤ 휴대폰 돌아감 */
.x-phone-wrap{perspective:1400px}
.x-phone{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s var(--eo);transform-style:preserve-3d}
.x-phone.turn{animation:turn .9s var(--eo)}
@keyframes turn{0%{transform:rotateY(-14deg) rotateX(4deg) scale(.97)}100%{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}}

/* ④ 설명 줄 하나씩 (PC) */
@media (min-width:901px){
  .js .x-step li{opacity:0;translate:0 10px;transition:opacity .45s var(--e),translate .55s var(--eo)}
  .js .x-step.on li{opacity:1;translate:0 0;transition-delay:calc(.15s + var(--k) * .1s)}
}

/* ⑥ 아래 떠 있는 버튼 */
.x-dock{position:fixed;z-index:40;left:50%;bottom:max(22px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px 0 22px;border-radius:999px;background:var(--k);color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none;box-shadow:0 16px 36px -12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);translate:-50% 120px;opacity:0;transition:translate .6s var(--eo),opacity .4s var(--e),background .2s}
.x-dock i{width:9px;height:9px;border-radius:2px;background:var(--y);animation:recblink 1.6s ease-in-out infinite}
.x-dock:hover{background:#1f1f25}
.x-dock.show{translate:-50% 0;opacity:1}
@keyframes recblink{50%{opacity:.25}}
.x-end .x-cta,.foot{position:relative}

/* ⑦ 머리 메뉴 접힘 */
.ab .top{transition:background .4s,box-shadow .4s,transform .45s var(--eo)}
.ab .top.hide{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.js .x-obj,.js .x-step li,.x-call-g.on .x-call{opacity:1!important;scale:1!important;translate:none!important}.x-rings{display:none}}