/* Lucian UX/UI Prompt 소개 페이지. 사이트 공통(styles.css) 위에 얹고, 클래스는 모두 ix- 접두사입니다.
   스크롤에 따라 움직이는 요소의 위치·투명도는 JS(intro.js)가 그 요소에 직접 넣습니다.
   조상에 CSS 변수를 바꾸면 안쪽 라이브 요소까지 매 프레임 스타일을 다시 계산하므로 쓰지 않습니다. */
.ix-page{--ix-ink:#171a19;--ix-muted:#5f6561;--ix-line:#dce0d9;--ix-night:#08090d;--ix-cream:#f4f0e8;--ix-violet:#b7a4ff;
  --ix-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --ix-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--ix-ease:cubic-bezier(.2,.8,.2,1);overflow-x:clip}
.ix-page main{display:block;font-family:var(--ix-sans);letter-spacing:-.01em}
.ix-page main :is(h1,h2,h3,p,li,figcaption){word-break:keep-all;overflow-wrap:break-word}
.ix-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ix-chap{margin:0;font:600 13px/1 var(--ix-sans);letter-spacing:.06em;color:var(--purple)}
.ix-sec-h{margin:12px 0 0;font:700 clamp(36px,4.6vw,72px)/1.08 var(--ix-sans);letter-spacing:-.045em;text-wrap:balance}

/* ---------- 사이트 머리글: 어두운 히어로 위에 얹습니다 ---------- */
.ix-top{position:absolute;top:0;left:0;right:0;z-index:30}
.ix-top .header{border-bottom-color:rgba(244,240,232,.14);color:var(--ix-cream)}
.ix-top .nav a,.ix-top .lang strong{color:var(--ix-cream)}
.ix-top .brand{color:var(--ix-ink)}
.ix-top .lang span{color:rgba(244,240,232,.45)}
.ix-top .coffee-link{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--ix-cream)}
.ix-top .coffee-link:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.ix-top .pill-link{border-color:rgba(255,255,255,.25)}
.ix-top .menu-toggle{border-color:rgba(255,255,255,.25);color:var(--ix-cream)}
.ix-top .nav.open{background:#14151b;border-color:rgba(255,255,255,.12)}

/* ---------- 버튼 ---------- */
.ix-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.6vh,40px)}
.ix-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:12px 24px;border:1px solid var(--ix-ink);border-radius:999px;font:600 15px/1 var(--ix-sans);transition:transform .25s var(--ix-ease),background .2s,color .2s,border-color .2s}
.ix-btn:hover{transform:translateY(-2px)}
.ix-btn.is-solid{background:var(--ix-ink);color:#fff}
.ix-btn.is-solid span[aria-hidden]{color:var(--lime)}
.ix-btn.is-line{background:transparent}

/* ======================= 0. 히어로 ======================= */
.ix-hero{position:relative;height:230vh;background:var(--ix-night);color:var(--ix-cream)}
.ix-hero .ix-pin::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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")}
.ix-collage{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(60% 45% at 50% 100%,rgba(214,251,82,.16),transparent 70%),radial-gradient(120% 80% at 50% 115%,#2b1f78 0%,#140f33 42%,var(--ix-night) 74%)}
.ix-glow{position:absolute;left:50%;top:50%;width:70vw;height:60vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(8,9,13,.85),rgba(8,9,13,0))}
.ix-float{position:absolute;width:var(--fw);height:auto;aspect-ratio:4/3;border-radius:clamp(10px,1vw,16px);background:#111219;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 60px -30px #000;will-change:transform,opacity;
  transform:translate(-50%,-50%) rotate(var(--fr))}
.ix-introducing{position:absolute;left:0;right:0;top:50%;z-index:4;margin:0;text-align:center;pointer-events:none;will-change:transform,opacity;
  font:200 clamp(48px,7.2vw,124px)/1 var(--ix-sans);letter-spacing:-.045em;color:var(--ix-cream);transform:translateY(-50%)}
.ix-hero-copy{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px var(--gutter) 6vh;text-align:center;
  opacity:0;pointer-events:none;will-change:transform,opacity;font-family:var(--ix-sans)}
.ix-hero.is-open .ix-hero-copy{pointer-events:auto}
.ix-date{margin:0 0 3.2vh;font:600 13px/1 var(--ix-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,232,.68)}
.ix-title{margin:0;font:700 clamp(46px,8vw,146px)/.98 var(--ix-sans);letter-spacing:-.052em;color:var(--ix-cream)}
.ix-title span{color:var(--ix-violet)}
.ix-toc{width:min(420px,84vw);margin:5.4vh 0 0;padding:0;list-style:none;display:grid;gap:4px}
.ix-toc a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:3px 0;font:500 15px/1.5 var(--ix-sans);color:var(--ix-cream)}
.ix-toc span{font:600 12px var(--ix-sans);font-variant-numeric:tabular-nums;color:rgba(244,240,232,.5)}
.ix-toc i{height:.7em;border-bottom:1px dotted rgba(244,240,232,.38)}
.ix-toc b{font-weight:500}
.ix-toc a:hover b{text-decoration:underline;text-underline-offset:4px}

.ix-side{position:absolute;top:0;bottom:0;z-index:6;width:27vw;will-change:transform;clip-path:var(--torn)}
.ix-side.is-prompt{left:0;transform-origin:0 100%;background:#dff36a}
.ix-side.is-prompt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .2 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ix-sheet{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(104px,15vh,140px) clamp(20px,2.4vw,40px) clamp(24px,4vh,40px) clamp(22px,2.4vw,40px);color:#1c230f}
.ix-sheet-top{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px;padding-bottom:11px;border-bottom:1.5px solid rgba(28,35,15,.85);font:700 11px/1 var(--ix-sans);letter-spacing:.16em}
.ix-sheet-top b{font:600 11px var(--ix-mono);letter-spacing:0}
/* 프롬프트 맨 위에 테이프로 붙인 요소 미리보기(라이트) */
.ix-attach{position:relative;flex:none;height:clamp(160px,28vh,270px);margin:4px 0 16px;transform:rotate(-2.4deg);transform-origin:30% 50%}
.ix-attach .ix-tile{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:none;overflow:visible}
.ix-attach .ix-fit{left:38%}
.ix-attach::after{content:"";position:absolute;left:38%;top:-2px;z-index:2;width:74px;height:22px;transform:translateX(-50%) rotate(3deg);
  background:rgba(255,255,255,.5);box-shadow:0 1px 2px rgba(28,35,15,.14);clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 24%,96% 38%,100% 52%,96% 66%,100% 80%,96% 92%,100% 100%,0 100%,4% 86%,0 72%,4% 58%,0 44%,4% 30%)}
.ix-sheet-text{flex:1;min-height:0;margin:0;overflow:hidden;font:clamp(10px,.72vw,11.5px)/1.7 var(--ix-mono);white-space:pre-wrap;word-break:break-word;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.ix-sl{display:block}
.ix-sl.is-strong{font-weight:700}
.ix-sl.is-mark{background:linear-gradient(transparent 8%,rgba(113,97,212,.22) 8%,rgba(113,97,212,.22) 92%,transparent 92%)}
.ix-sheet-stamp{align-self:flex-start;display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:10px 15px 10px 11px;border-radius:999px;background:#171a19;color:#fff;font:600 13px/1 var(--ix-sans);box-shadow:0 14px 30px -14px rgba(23,26,25,.7)}
.ix-sheet-stamp i{width:18px;height:18px;border-radius:50%;background:var(--lime);position:relative}
.ix-sheet-stamp i::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #171a19;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ix-side.is-real{right:0;transform-origin:100% 100%;background:#050608}
.ix-side.is-real .ix-tile{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.ix-real-cap{position:absolute;left:26px;bottom:24px;z-index:3;margin:0;display:flex;gap:10px;font:500 12px var(--ix-sans);color:rgba(244,240,232,.58)}
.ix-real-cap b{font:600 12px var(--ix-mono);color:rgba(244,240,232,.38)}
.ix-cue{position:absolute;left:50%;bottom:4vh;z-index:7;margin:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 11px var(--ix-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,232,.6)}
.ix-cue i{width:1px;height:44px;background:linear-gradient(rgba(244,240,232,.7),transparent);animation:ix-cue 1.8s var(--ix-ease) infinite;transform-origin:top}
@keyframes ix-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ======================= 1. 200개의 인터페이스 ======================= */
.ix-wall{position:relative;height:220vh;background:#050608;color:var(--ix-cream)}
.ix-wall .ix-pin{perspective:1400px}
.ix-wall-plane{position:absolute;left:50%;top:50%;width:150vw;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.3vw;align-items:start;
  transform:translate(-50%,-50%) rotateX(26deg) rotateZ(-11deg) scale(1.06)}
.ix-col{display:flex;flex-direction:column;gap:1.3vw;will-change:transform}
.ix-col img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:.9vw;background:#111219;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.ix-wall-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 50%,rgba(5,6,8,.86),rgba(5,6,8,.45) 62%,rgba(5,6,8,.2) 80%),linear-gradient(#050608,transparent 18%,transparent 82%,#050608)}
.ix-count{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.ix-count-num{margin:0;display:flex;font:700 clamp(120px,21vw,380px)/.84 var(--ix-sans);letter-spacing:-.06em;color:var(--ix-cream);font-variant-numeric:tabular-nums}
.ix-count-num span{display:inline-block;width:.6em;text-align:center}
.ix-count-label{margin:3vh 0 0;font:700 clamp(24px,2.6vw,40px)/1.2 var(--ix-sans);letter-spacing:-.035em}
.ix-count-sub{margin:12px 0 0;font:500 14px var(--ix-sans);color:rgba(244,240,232,.62)}

/* ---------- 타일: 요소 하나를 배율로 맞춰 띄우는 상자 ---------- */
.ix-tile{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;isolation:isolate;background:
  radial-gradient(90% 80% at 12% 0%,color-mix(in srgb,var(--h) 16%,transparent),transparent 62%),
  radial-gradient(80% 70% at 100% 100%,color-mix(in srgb,var(--h2) 13%,transparent),transparent 60%),var(--ux-page)}
[data-ux="dark"] .ix-tile{background:
  radial-gradient(90% 80% at 12% 0%,color-mix(in srgb,var(--h) 24%,transparent),transparent 62%),
  radial-gradient(80% 70% at 100% 100%,color-mix(in srgb,var(--h2) 17%,transparent),transparent 60%),#0e0f17}
.ix-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.ix-fit{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%);transform-origin:50% 50%;pointer-events:none;opacity:0;transition:opacity .45s ease}
.ix-fit.is-in{opacity:1}
.ix-fit>.ux{pointer-events:auto}
.ix-fit.is-fluid{display:flex;align-items:center;justify-content:center;width:420px}
.ix-fit.is-fluid>.ux{flex-shrink:0}
/* 화면 밖 타일은 요소의 CSS 애니메이션을 멈춥니다 */
.ix-tile.is-off .ix-fit,.ix-tile.is-off .ix-fit *{animation-play-state:paused!important}
/* 갤러리와 같은 바탕 조건: 사이트 공통 스타일(줄 간격, 버튼, 이미지, 체크 색)이 요소 안으로 새지 않게 되돌립니다 */
.ix-fit{font-size:16px;line-height:normal;letter-spacing:-.01em;text-align:left;color:var(--ux-ink);font-family:var(--ix-sans)}
:where(.ix-fit) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.ix-fit) svg{display:block}
:where(.ix-fit) img{display:revert;max-width:revert}
:where(.ix-fit) :is(button,input){accent-color:auto}
:where(.ix-fit) ::selection{background:var(--ux-accent-soft);color:inherit}

/* ======================= 2. 눌러 보기 ======================= */
.ix-try{background:#050608;color:var(--ix-cream);padding:clamp(70px,11vh,140px) 0 clamp(90px,14vh,170px)}
.ix-try-in{max-width:1720px;margin:0 auto;padding:0 var(--gutter)}
.ix-try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ix-try .ix-chap{color:var(--ix-violet)}
.ix-try-head h2{margin:12px 0 0;font:700 clamp(36px,4.6vw,72px)/1.08 var(--ix-sans);letter-spacing:-.045em}
.ix-sub{margin:16px 0 0;max-width:580px;font:400 16px/1.7 var(--ix-sans);color:rgba(244,240,232,.62);text-wrap:pretty}
.ix-theme{flex:none;display:inline-flex;padding:4px;border:1px solid rgba(244,240,232,.18);border-radius:999px}
.ix-theme button{min-height:38px;padding:0 18px;border:0;border-radius:999px;background:none;font:600 14px var(--ix-sans);color:rgba(244,240,232,.6)}
.ix-theme button[aria-pressed="true"]{background:var(--ix-cream);color:var(--ix-ink)}
.ix-tabs{display:flex;gap:4px;margin:5vh 0 20px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(244,240,232,.12)}
.ix-tabs::-webkit-scrollbar{display:none}
.ix-tabs button{flex:none;display:flex;gap:8px;align-items:baseline;padding:14px 16px 13px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font:500 14px var(--ix-sans);color:rgba(244,240,232,.5);transition:color .2s,border-color .2s}
.ix-tabs button b{font:600 11px var(--ix-mono);color:rgba(244,240,232,.35)}
.ix-tabs button:hover{color:var(--ix-cream)}
.ix-tabs button[aria-selected="true"]{color:var(--ix-cream);border-bottom-color:var(--lime)}
.ix-carousel{display:grid;grid-template-columns:minmax(0,1fr) 15%;gap:16px}
.ix-hl{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);min-height:min(66vh,640px);border-radius:30px;overflow:hidden;background:#13141c;box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:opacity .35s,transform .5s var(--ix-ease)}
.ix-hl.is-swap{opacity:0;transform:translateX(-24px)}
.ix-hl-stage{position:relative;min-height:360px}
.ix-hl-stage .ix-tile{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.ix-hl-info{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,48px)}
.ix-hl-id{margin:0;font:600 13px var(--ix-mono);color:rgba(244,240,232,.45)}
.ix-hl-title{margin:0;font:700 clamp(28px,2.6vw,42px)/1.15 var(--ix-sans);letter-spacing:-.04em}
.ix-hl-sum{margin:0;font:400 16px/1.7 var(--ix-sans);color:rgba(244,240,232,.66)}
.ix-hl-link{display:inline-flex;gap:8px;font:600 15px var(--ix-sans);color:var(--lime)}
.ix-hl-link:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.ix-hl-nav{margin-top:auto;display:flex;gap:8px}
.ix-arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(244,240,232,.22);background:none;color:var(--ix-cream);font-size:18px;transition:background .2s,border-color .2s}
.ix-arrow:hover{background:rgba(244,240,232,.08);border-color:var(--ix-cream)}
.ix-peek{position:relative;border-radius:30px;overflow:hidden;background:#13141c;opacity:.45;cursor:pointer}
.ix-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 50%}

/* ======================= 3. 소개 ======================= */
.ix-about{background:var(--paper);color:var(--ix-ink);padding:clamp(90px,14vh,170px) 0}
.ix-about-in{max-width:1720px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:start}
.ix-about-head h2{margin:12px 0 0;font:700 clamp(36px,4.2vw,64px)/1.1 var(--ix-sans);letter-spacing:-.045em}
.ix-about-lede{margin:22px 0 0;max-width:520px;font:400 17px/1.75 var(--ix-sans);color:#3f4541;text-wrap:pretty}
.ix-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ix-feats li{padding:clamp(22px,2.2vw,32px);border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(23,26,25,.06)}
.ix-feat-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--lime)}
.ix-feat-ico svg{width:22px;height:22px;fill:none;stroke:var(--ix-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ix-feat-ico svg .is-fill{fill:var(--ix-ink);stroke:none}
.ix-feats h3{margin:20px 0 0;font:700 19px/1.35 var(--ix-sans);letter-spacing:-.03em}
.ix-feats p{margin:8px 0 0;font:400 15px/1.7 var(--ix-sans);color:var(--ix-muted)}

/* ======================= 4. 부품과 도구 ======================= */
.ix-two{position:relative;height:280vh;background:var(--paper);color:var(--ix-ink)}
.ix-two-in{height:100%;max-width:1720px;margin:0 auto;padding:7vh var(--gutter) 6vh;display:flex;flex-direction:column;gap:4vh}
.ix-two-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ix-two-head h2,.ix-how-left h2,.ix-anat-head h2{margin:12px 0 0;font:700 clamp(36px,4.4vw,70px)/1.08 var(--ix-sans);letter-spacing:-.045em;text-wrap:balance}
.ix-ruler{display:flex;align-items:center;gap:10px;width:min(440px,38vw);font:600 12px var(--ix-mono);color:var(--ix-muted)}
.ix-ruler i{position:relative;flex:1;height:2px;overflow:hidden;background:var(--ix-line)}
.ix-ruler i b{position:absolute;inset:0;background:var(--ix-ink);transform-origin:left;transform:scaleX(0);will-change:transform}
.ix-two-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,80px);align-items:center}
.ix-two-text{position:relative;height:100%;display:grid;align-items:center}
.ix-two-state{grid-area:1/1;transition:opacity .55s var(--ix-ease),transform .7s var(--ix-ease)}
.ix-js .ix-two-state.is-tools{opacity:0;transform:translateY(36px);pointer-events:none}
.ix-two[data-state="tools"] .ix-two-state.is-parts{opacity:0;transform:translateY(-36px);pointer-events:none}
.ix-two[data-state="tools"] .ix-two-state.is-tools{opacity:1;transform:none;pointer-events:auto}
.ix-range{margin:0;font:600 14px var(--ix-mono);color:var(--purple)}
.ix-two-state h3{margin:10px 0 0;font:700 clamp(38px,4.2vw,68px)/1.06 var(--ix-sans);letter-spacing:-.05em}
.ix-two-state>p:not(.ix-range){margin:20px 0 0;max-width:520px;font:400 17px/1.75 var(--ix-sans);color:#3f4541;text-wrap:pretty}
.ix-chips{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;padding:0;list-style:none;max-width:560px}
.ix-chips li{padding:6px 12px;border:1px solid #cfd5cc;border-radius:999px;font:500 13px var(--ix-sans);color:#454b47;background:rgba(255,255,255,.5)}
.ix-two-stage{position:relative;height:min(64vh,660px);border-radius:30px}
.ix-two-card{position:absolute;inset:0;transition:opacity .6s var(--ix-ease),transform .9s var(--ix-ease)}
.ix-two-card .ix-tile{position:absolute;inset:0;aspect-ratio:auto;border-radius:30px;box-shadow:0 0 0 1px rgba(23,26,25,.06),0 50px 90px -50px rgba(23,26,25,.45)}
.ix-js .ix-two-card.is-tools{opacity:0;transform:scale(1.05)}
.ix-two[data-state="tools"] .ix-two-card.is-parts{opacity:0;transform:scale(.94)}
.ix-two[data-state="tools"] .ix-two-card.is-tools{opacity:1;transform:none}

/* ======================= 5. 쓰는 법 ======================= */
.ix-how{position:relative;height:420vh;background:var(--paper);color:var(--ix-ink)}
.ix-how-in{height:100%;max-width:1720px;margin:0 auto;padding:6vh var(--gutter);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,96px);align-items:center}
.ix-steps{list-style:none;margin:4vh 0 0;padding:0;border-top:1px solid var(--ix-line)}
.ix-steps li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--ix-line);opacity:.38;transition:opacity .4s}
.ix-steps li.is-on{opacity:1}
.ix-steps li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ix-ink);transform-origin:left;transform:scaleX(var(--sp,0))}
.ix-steps b{font:600 13px/1.9 var(--ix-mono);color:var(--purple)}
.ix-steps h3{margin:0;font:700 20px/1.35 var(--ix-sans);letter-spacing:-.03em}
.ix-steps p{margin:0;max-height:0;overflow:hidden;opacity:0;font:400 15px/1.65 var(--ix-sans);color:var(--ix-muted);transition:max-height .5s var(--ix-ease),opacity .4s,margin .4s}
.ix-steps li.is-on p{max-height:7em;opacity:1;margin-top:6px}
.ix-screen{position:relative;height:min(68vh,660px);border-radius:30px;overflow:hidden;background:#e7ebe2;box-shadow:0 0 0 1px rgba(23,26,25,.06),0 60px 100px -60px rgba(23,26,25,.5)}
.ix-scr{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .55s var(--ix-ease),transform .7s var(--ix-ease);pointer-events:none}
.ix-how[data-step="0"] .ix-scr.is-browse,.ix-how[data-step="1"] .ix-scr.is-copy,.ix-how[data-step="2"] .ix-scr.is-term,.ix-how[data-step="3"] .ix-scr.is-term{opacity:1;transform:none;pointer-events:auto}
.ix-scr.is-browse .ix-tile{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.ix-scr-tag{position:absolute;left:22px;bottom:20px;z-index:3;margin:0;display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.82);font:500 13px var(--ix-sans);color:#3f4541}
.ix-scr-tag b{font:600 12px var(--ix-mono);color:var(--purple)}
.ix-scr.is-copy{display:grid;place-items:center;background:radial-gradient(70% 60% at 30% 20%,rgba(123,97,255,.14),transparent 70%),#e7ebe2}
.ix-mock-card{width:min(78%,520px);border-radius:24px;overflow:hidden;background:#0e0f17;box-shadow:0 40px 80px -40px rgba(23,26,25,.6)}
.ix-mock-card img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.ix-mock-rail{display:flex;gap:6px;padding:12px;background:#15161f}
.ix-mock-rail span{flex:1;padding:12px 10px;border-radius:12px;background:rgba(255,255,255,.06);text-align:center;font:600 14px var(--ix-sans);color:rgba(244,240,232,.75)}
.ix-mock-rail .is-press{background:var(--ix-violet);color:#14121f}
.ix-how[data-step="1"] .is-press{animation:ix-press 2.6s var(--ix-ease) infinite}
@keyframes ix-press{0%,30%{transform:none}36%{transform:scale(.93)}44%,100%{transform:none}}
.ix-toast{position:absolute;left:50%;bottom:8%;margin:0;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--ix-ink);color:#fff;font:600 14px var(--ix-sans);
  transform:translate(-50%,160%);opacity:0}
.ix-toast i{width:18px;height:18px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 5px var(--lime),inset 0 0 0 9px var(--ix-ink)}
.ix-how[data-step="1"] .ix-toast{animation:ix-toast 2.6s var(--ix-ease) infinite}
@keyframes ix-toast{0%,38%{transform:translate(-50%,160%);opacity:0}48%,86%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,0);opacity:0}}
.ix-scr.is-term{display:grid;place-items:center;padding:6%;background:radial-gradient(80% 70% at 80% 0%,rgba(214,251,82,.2),transparent 70%),#e7ebe2}
.ix-term{width:100%;max-width:680px;border-radius:18px;overflow:hidden;background:#101114;color:#e9e7e1;box-shadow:0 50px 90px -50px rgba(23,26,25,.7)}
.ix-term-bar{margin:0;display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);font:500 12px var(--ix-sans);color:rgba(233,231,225,.55)}
.ix-term-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.ix-term-bar span{margin-left:10px}
.ix-term-body{padding:18px 20px 22px;min-height:min(40vh,360px);font:13px/1.75 var(--ix-mono)}
.ix-type{margin:0;white-space:pre-wrap;word-break:break-word;color:#d9d6ce}
.ix-type::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--lime);animation:ix-caret 1s steps(1) infinite}
@keyframes ix-caret{50%{opacity:0}}
.ix-how[data-step="3"] .ix-type::after{display:none}
.ix-result{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.ix-result li{display:flex;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ix-ease);color:#e9e7e1}
.ix-result li::before{content:"✓";color:var(--lime)}
.ix-how[data-step="3"] .ix-result li{opacity:1;transform:none}
.ix-how[data-step="3"] .ix-result li:nth-child(2){transition-delay:.2s}
.ix-how[data-step="3"] .ix-result li:nth-child(3){transition-delay:.4s}
.ix-how[data-step="3"] .ix-result li:nth-child(4){transition-delay:.6s}
.ix-example{position:absolute;right:18px;top:16px;margin:0;padding:5px 11px;border-radius:999px;background:rgba(23,26,25,.08);font:600 12px var(--ix-sans);color:var(--ix-muted)}

/* ======================= 6. 프롬프트에 담긴 것 ======================= */
.ix-anat{background:var(--paper);color:var(--ix-ink);padding:clamp(40px,8vh,120px) 0 clamp(80px,14vh,180px)}
.ix-anat-in{max-width:1720px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,96px)}
.ix-anat-head p{margin:20px 0 0;max-width:520px;font:400 17px/1.75 var(--ix-sans);color:#3f4541;text-wrap:pretty}
.ix-callouts{list-style:none;margin:8vh 0 0;padding:0}
.ix-callouts li{min-height:44vh;padding:22px 0 0;border-top:1px solid var(--ix-line);opacity:.32;transition:opacity .45s}
.ix-callouts li.is-on{opacity:1}
.ix-callouts li:last-child{min-height:30vh}
.ix-callouts span{font:600 13px var(--ix-mono);color:var(--purple)}
.ix-callouts h3{margin:8px 0 0;font:700 clamp(24px,2.2vw,32px)/1.2 var(--ix-sans);letter-spacing:-.04em}
.ix-callouts p{margin:12px 0 0;max-width:460px;font:400 16px/1.7 var(--ix-sans);color:var(--ix-muted)}
.ix-anat-right{position:relative}
.ix-window{position:sticky;top:10vh;margin:0;border-radius:22px;overflow:hidden;background:#101114;color:#e9e7e1;box-shadow:0 50px 100px -50px rgba(23,26,25,.55)}
.ix-window figcaption{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font:500 12px var(--ix-sans);color:rgba(233,231,225,.55)}
.ix-window figcaption i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.ix-window figcaption span{margin-left:10px}
.ix-code-view{position:relative;height:min(66vh,640px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 88%,transparent)}
.ix-code{margin:0;padding:22px 0 40px;font:12.5px/1.75 var(--ix-mono);white-space:pre-wrap;word-break:break-word;transition:transform .8s var(--ix-ease)}
.ix-pl{display:block;padding:0 22px 0 20px;border-left:2px solid transparent;transition:opacity .4s,background .4s,color .4s,border-color .4s}
.ix-pl.is-head{color:#9a9890}
.ix-pl[data-k="code"]{color:#8d8b84}
.ix-window.has-hl .ix-pl{opacity:.38}
.ix-window.has-hl .ix-pl.is-hl{opacity:1;background:rgba(214,251,82,.1);border-left-color:var(--lime);color:#fff}
.ix-more{margin:0;padding:12px 22px 16px;border-top:1px solid rgba(255,255,255,.06);font:400 13px var(--ix-sans);color:rgba(233,231,225,.5)}

/* ======================= 7. 마무리 ======================= */
.ix-outro{background:var(--paper);padding-top:clamp(20px,4vh,60px)}
.ix-band{position:relative;overflow:hidden;background:var(--lime);color:var(--ix-ink);padding:clamp(250px,34vh,330px) 0 clamp(90px,14vh,150px)}
.ix-strip{position:absolute;top:clamp(46px,7vh,80px);left:0;right:0;transform:rotate(-2.5deg)}
.ix-strip-row{display:flex;gap:12px;width:max-content;transform:translateX(-6%);will-change:transform}
.ix-strip img{display:block;width:clamp(150px,14vw,220px);height:auto;aspect-ratio:4/3;border-radius:14px;background:#111219;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.ix-outro-in{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 var(--gutter);text-align:center}
.ix-outro h2{margin:0;font:700 clamp(40px,5.8vw,96px)/1.06 var(--ix-sans);letter-spacing:-.05em;text-wrap:balance}
.ix-outro p{max-width:560px;margin:24px auto 0;font:400 17px/1.7 var(--ix-sans);color:#2f3430;text-wrap:balance}
.ix-outro .ix-cta{justify-content:center}

/* ---------- 왼쪽 목차 레일 ---------- */
.ix-rail{position:fixed;left:22px;top:50%;z-index:40;display:flex;flex-direction:column;gap:12px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s,color .4s;color:var(--ix-cream);font-family:var(--ix-sans)}
.ix-rail.is-on{opacity:1;pointer-events:auto}
.ix-rail[data-tone="light"]{color:var(--ix-ink)}
.ix-rail a{display:flex;align-items:center;gap:10px;min-height:22px;font-size:12px;font-weight:600}
.ix-rail i{width:14px;height:1.5px;background:currentColor;opacity:.35;transition:width .35s var(--ix-ease),opacity .3s}
.ix-rail span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ix-ease);white-space:nowrap}
.ix-rail a.is-on i{width:30px;opacity:1}
.ix-rail:hover span{opacity:1;transform:none}
.ix-rail:hover{background:rgba(8,9,13,.78);color:var(--ix-cream);padding:12px 16px 12px 0;margin-left:-8px;border-radius:0 14px 14px 0}

/* ---------- 에이전트 스킬 ---------- */
.ix-skill{background:#050608;color:var(--ix-cream);padding:clamp(90px,14vh,170px) 0}
.ix-skill-in{max-width:1720px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,96px);align-items:center}
.ix-skill .ix-chap{color:var(--ix-violet)}
.ix-skill h2{margin:12px 0 0;font:700 clamp(36px,4.6vw,72px)/1.08 var(--ix-sans);letter-spacing:-.045em;word-break:keep-all}
.ix-install{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:620px;margin-top:clamp(28px,4vh,44px)}
.ix-cmd-label{margin:0 0 8px;font:600 13px var(--ix-sans);color:rgba(244,240,232,.6)}
.ix-cmd-box{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:14px;background:#121318;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ix-cmd-box pre{flex:1;min-width:0;margin:0;overflow-x:auto;font:500 14px/1.7 var(--ix-mono);color:#f4f0e8;white-space:pre;scrollbar-width:none}
.ix-cmd-box pre::-webkit-scrollbar{display:none}
.ix-copy{flex:none;min-width:64px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--lime);color:#171a19;font:700 13px var(--ix-sans);cursor:pointer;transition:transform .2s var(--ix-ease),background .2s}
.ix-copy:hover{transform:translateY(-1px)}
.ix-copy:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ix-copy.is-done{background:#f4f0e8}
.ix-skill-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:620px}
.ix-skill-facts li{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,240,232,.16);font:500 13px/1.3 var(--ix-sans);color:rgba(244,240,232,.75)}
.ix-skill .ix-btn.is-line{border-color:rgba(244,240,232,.45);color:var(--ix-cream)}
.ix-skill .ix-btn.is-line:hover{border-color:var(--ix-cream)}
.ix-skill-right{position:relative;min-width:0}
.ix-term-wrap{position:relative}
.ix-usage-h{margin:28px 0 8px}
.ix-usage{margin:0;padding:4px 22px;border-radius:18px;background:#0d0e12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ix-usage>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid rgba(255,255,255,.07)}
.ix-usage>div:first-child{border-top:0}
.ix-usage dt{font:600 13px/1.6 var(--ix-sans);color:rgba(244,240,232,.6)}
.ix-usage dd{margin:0;font:500 15px/1.6 var(--ix-sans);color:var(--ix-cream);word-break:keep-all}
.ix-usage q{quotes:"\201C" "\201D"}
.ix-usage-cmd{display:inline-flex;align-items:baseline;gap:8px;margin-right:18px;color:rgba(244,240,232,.7);font-size:14px}
.ix-usage code{font:500 14px var(--ix-mono);color:var(--lime)}
.ix-usage small{display:block;margin-top:4px;font:400 13px/1.6 var(--ix-sans);color:rgba(244,240,232,.5)}
.ix-usage small code{font-size:12.5px;color:rgba(244,240,232,.75)}
.ix-term.is-agent{max-width:none;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -60px rgba(113,97,212,.6)}
.ix-term.is-agent .ix-term-body{min-height:0;padding:22px 24px 26px}
.ix-ask{margin:0;color:#f4f0e8;white-space:pre-wrap;word-break:keep-all}
.ix-use{display:flex;align-items:center;gap:10px;margin:20px 0 0;color:var(--ix-violet);font-weight:600}
.ix-use i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(214,251,82,.5);animation:ix-pulse 1.8s ease-out infinite}
@keyframes ix-pulse{0%{box-shadow:0 0 0 0 rgba(214,251,82,.5)}80%,100%{box-shadow:0 0 0 9px rgba(214,251,82,0)}}
.ix-agent-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.ix-agent-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;line-height:1.55}
.ix-agent-steps li::before{content:"✓";grid-row:span 2;color:var(--lime)}
.ix-agent-steps b{font-weight:600;color:#f4f0e8}
.ix-agent-steps span{color:rgba(233,231,225,.55)}
.ix-skill .ix-example{top:auto;bottom:14px;right:16px;background:rgba(255,255,255,.08);color:rgba(244,240,232,.6)}
.ix-js .ix-use,.ix-js .ix-agent-steps li{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .55s var(--ix-ease)}
.ix-js .ix-skill.is-in .ix-use,.ix-js .ix-skill.is-in .ix-agent-steps li{opacity:1;transform:none}
.ix-skill.is-in .ix-use{transition-delay:.3s}
.ix-skill.is-in .ix-agent-steps li:nth-child(1){transition-delay:.7s}
.ix-skill.is-in .ix-agent-steps li:nth-child(2){transition-delay:1.1s}
.ix-skill.is-in .ix-agent-steps li:nth-child(3){transition-delay:1.5s}
.ix-skill.is-in .ix-agent-steps li:nth-child(4){transition-delay:1.9s}
.ix-skill.is-in .ix-agent-steps li:nth-child(5){transition-delay:2.3s}

/* ---------- 반응형 ---------- */
@media (max-width:1279px){.ix-rail{display:none}}
@media (max-width:1000px){
  .ix-about-in{grid-template-columns:1fr}
  .ix-two-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:3vh;align-items:stretch}
  .ix-two-text{height:auto}
  .ix-two-state>p:not(.ix-range){font-size:15px;margin-top:12px}
  .ix-two-state h3{font-size:clamp(30px,7vw,52px)}
  .ix-chips{margin-top:14px}
  .ix-two-stage{height:100%;min-height:0}
  .ix-how-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:3vh}
  .ix-how-left h2{font-size:clamp(30px,7vw,52px)}
  .ix-steps{margin-top:2vh}
  .ix-steps li{padding:10px 0}
  .ix-steps li:not(.is-on){display:none}
  .ix-steps li.is-on{border-bottom:0}
  .ix-screen{height:auto;min-height:0}
  .ix-anat-in{grid-template-columns:1fr}
  .ix-skill-in{grid-template-columns:minmax(0,1fr)}
  .ix-anat-right{order:-1;margin-top:5vh}
  .ix-window{position:relative;top:0}
  .ix-code-view{height:min(56vh,520px)}
  .ix-callouts{margin-top:5vh}
  .ix-callouts li,.ix-callouts li:last-child{min-height:0;padding-bottom:26px;opacity:1}
  .ix-carousel{grid-template-columns:1fr}
  .ix-peek{display:none}
  .ix-hl{grid-template-columns:1fr}
  .ix-hl-stage{min-height:0;aspect-ratio:4/3}
}
@media (max-width:760px){
  .ix-hero{height:210vh}
  /* 휴대폰: 프롬프트는 위, 실제 요소는 아래에 두고 위아래로 열립니다 */
  .ix-side{left:0;right:0;width:auto;clip-path:var(--torn-m)}
  .ix-side.is-prompt{top:72px;bottom:auto;height:27svh}
  .ix-side.is-real{top:auto;bottom:0;height:37svh}
  .ix-top .brand{color:var(--ix-cream)}
  .ix-sheet{padding:14px 18px 18px}
  .ix-sheet-top{font-size:10px;letter-spacing:.12em;margin-bottom:10px;padding-bottom:8px}
  .ix-sheet-top b{font-size:10px}
  .ix-sheet-text{font-size:10px;line-height:1.6;-webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%)}
  .ix-sheet-stamp{display:none}
  .ix-attach{display:none}
  .ix-real-cap{display:none}
  .ix-introducing{top:calc(36px + 45svh);font-size:clamp(48px,15vw,72px)}
  .ix-cue{bottom:calc(37svh + 14px)}
  .ix-cue i{height:26px}
  .ix-float{width:calc(var(--fw) * 1.9)}
  .ix-float:nth-child(n+8){display:none}
  .ix-title{font-size:clamp(42px,13vw,68px)}
  .ix-wall-plane{width:230vw;grid-template-columns:repeat(5,minmax(0,1fr))}
  .ix-col:nth-child(n+6){display:none}
  .ix-try-head{flex-direction:column;align-items:flex-start}
  .ix-feats{grid-template-columns:1fr}
  .ix-two-head{flex-direction:column;align-items:flex-start;gap:12px}
  .ix-ruler{width:100%}
  .ix-chips li{font-size:12px;padding:5px 10px}
  .ix-two-state .ix-chips li:nth-child(n+7){display:none}
  .ix-term-body{padding:14px 14px 16px;font-size:11px;min-height:0}
  .ix-result{margin-top:10px;gap:3px}
  .ix-example{top:auto;bottom:10px;right:12px}
  .ix-band{padding-top:220px}
  .ix-cmd-box{padding-left:14px}
  .ix-usage{padding:2px 16px}
  .ix-usage>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 0}
  .ix-cmd-box pre{font-size:12.5px;white-space:pre-wrap;word-break:break-all}
  .ix-term.is-agent .ix-term-body{padding:16px 16px 44px;font-size:12px}
}
@media (max-height:760px) and (min-width:1001px){
  .ix-two-state>p:not(.ix-range){font-size:15px}
  .ix-steps li{padding:11px 0}
}

/* ---------- 동작 줄이기: 고정·패럴랙스 없이 최종 상태를 그대로 보여 줍니다 ---------- */
.ix-static .ix-hero,.ix-static .ix-wall,.ix-static .ix-two,.ix-static .ix-how{height:auto}
.ix-static .ix-pin{position:relative;height:auto;min-height:100svh;overflow:visible}
.ix-static .ix-hero .ix-pin,.ix-static .ix-wall .ix-pin{overflow:hidden}
.ix-static .ix-side,.ix-static .ix-introducing,.ix-static .ix-cue{display:none}
.ix-static .ix-hero-copy{position:relative;min-height:100svh;opacity:1;transform:none;pointer-events:auto}
.ix-static .ix-top .brand{color:var(--ix-cream)}
.ix-static .ix-wall .ix-pin{min-height:80svh}
.ix-static .ix-two-in,.ix-static .ix-how-in{height:auto;padding-block:12vh}
.ix-static .ix-two-text{display:block}
.ix-static .ix-two-state,.ix-static .ix-two-state.is-tools{opacity:1;transform:none;pointer-events:auto;margin-bottom:6vh}
.ix-static .ix-two-stage{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:auto}
.ix-static .ix-two-card,.ix-static .ix-two-card.is-tools{position:relative;aspect-ratio:4/3;opacity:1;transform:none}
.ix-static .ix-steps li{display:grid;opacity:1}
.ix-static .ix-steps p{max-height:none;opacity:1;margin-top:6px}
.ix-static .ix-callouts li,.ix-static .ix-callouts li:last-child{opacity:1;min-height:0;padding-bottom:28px}
@media (prefers-reduced-motion:reduce){
  .ix-js .ix-use,.ix-js .ix-agent-steps li{opacity:1;transform:none;transition:none}
  .ix-use i{animation:none}
  .ix-fit,.ix-two-state,.ix-two-card,.ix-scr,.ix-hl,.ix-code,.ix-pl{transition:none}
  .ix-btn:hover{transform:none}
  .ix-cue i,.ix-mock-rail .is-press,.ix-toast{animation:none}
}

.ix-ghost{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;opacity:0;transform:translate(var(--gx,0),var(--gy,0));
  --cur:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 3v16.5l4.1-3.6 2.8 6.3 2.8-1.2-2.8-6.2h5.5z%22 fill=%22%23000%22 stroke=%22%23fff%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");--hx:5.4px;--hy:3.3px;
  transition-property:transform,opacity;transition-duration:.42s,.3s;transition-timing-function:cubic-bezier(.3,.8,.25,1),ease}
.ix-ghost[data-cur="hand"]{--cur:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M11.1 2.2c-.95 0-1.71.76-1.71 1.71v8.3l-1.25-1.3c-.72-.75-1.9-.8-2.65-.12-.7.62-.78 1.68-.2 2.42l3.5 4.75c1.15 1.55 2.95 2.45 4.88 2.45h2.27c2.9 0 5.25-2.35 5.25-5.25v-3.9c0-.88-.7-1.58-1.58-1.58-.37 0-.7.12-.97.34-.16-.73-.8-1.27-1.56-1.27-.45 0-.86.19-1.15.49-.24-.62-.85-1.06-1.55-1.06-.37 0-.71.12-.98.33V3.91c0-.95-.76-1.71-1.71-1.71z%22 fill=%22%23fff%22 stroke=%22%23000%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.81 10.2v3.4M15.34 10.6v3.1M18.05 11.3v2.6%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");--hx:12px;--hy:2.8px}
.ix-ghost[data-cur="text"]{--cur:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 4.5h1.6c.65 0 1.1.25 1.4.7.3-.45.75-.7 1.4-.7H15M12 5.2v13.6M9 19.5h1.6c.65 0 1.1-.25 1.4-.7.3.45.75.7 1.4.7H15M10.4 12h3.2%22 stroke=%22%23fff%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M9 4.5h1.6c.65 0 1.1.25 1.4.7.3-.45.75-.7 1.4-.7H15M12 5.2v13.6M9 19.5h1.6c.65 0 1.1-.25 1.4-.7.3.45.75.7 1.4.7H15M10.4 12h3.2%22 stroke=%22%23000%22 stroke-width=%221.3%22/%3E%3C/svg%3E");--hx:13px;--hy:13px}
.ix-ghost::before{content:"";position:absolute;left:calc(0px - var(--hx));top:calc(0px - var(--hy));width:26px;height:26px;background:var(--cur) no-repeat center/contain;
  filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.38)) drop-shadow(0 3px 6px rgba(0,0,0,.18));transform-origin:var(--hx) var(--hy);scale:.6;transition:scale .16s ease}
.ix-ghost.is-on{opacity:1}
.ix-ghost.is-on::before{scale:1}
.ix-ghost.is-down::before{scale:.86}
.ix-ghost::after{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ux-accent);opacity:0}
.ix-ghost.is-tap::after{animation:ix-tap .55s ease-out}
@keyframes ix-tap{0%{opacity:.85;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
[data-ux]{color-scheme:light;
  --ux-page:#F4F2EE;
  --ux-surface:#FFFFFF;
  --ux-surface-2:#F5F3EF;
  --ux-surface-3:#EAE7E1;
  --ux-ink:#16151B;
  --ux-ink-2:#57535F;
  --ux-ink-3:#8E8A97;
  --ux-line:rgba(22,21,27,.09);
  --ux-line-2:rgba(22,21,27,.17);
  --ux-accent:#6A57F2;
  --ux-accent-2:#2F8FE0;
  --ux-accent-soft:rgba(106,87,242,.12);
  --ux-accent-ink:#FFFFFF;
  --ux-mint:#119C72;
  --ux-warn:#D6731E;
  --ux-danger:#D93A55;
  --ux-glass:rgba(255,255,255,.58);
  --ux-glass-line:rgba(255,255,255,.85);
  --ux-shadow:rgba(40,30,80,.14);
  --ux-shadow-strong:rgba(40,30,80,.3);
  --ux-grad:linear-gradient(120deg,#7B61FF,#3D8BFF 55%,#1FB89A);
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);}
[data-ux="dark"]{color-scheme:dark;
  --ux-page:#07080D;
  --ux-surface:#13141C;
  --ux-surface-2:#1A1B25;
  --ux-surface-3:#252632;
  --ux-ink:#F4F0E8;
  --ux-ink-2:rgba(244,240,232,.68);
  --ux-ink-3:rgba(244,240,232,.42);
  --ux-line:rgba(255,255,255,.08);
  --ux-line-2:rgba(255,255,255,.16);
  --ux-accent:#B7A4FF;
  --ux-accent-2:#7DB4FF;
  --ux-accent-soft:rgba(183,164,255,.15);
  --ux-accent-ink:#0B0C12;
  --ux-mint:#7EE8C0;
  --ux-warn:#FFB26B;
  --ux-danger:#FF7D8C;
  --ux-glass:rgba(255,255,255,.07);
  --ux-glass-line:rgba(255,255,255,.18);
  --ux-shadow:rgba(0,0,0,.45);
  --ux-shadow-strong:rgba(0,0,0,.72);
  --ux-grad:linear-gradient(120deg,#B7A4FF,#7DB4FF 55%,#A5F2D3);}
/* 요소 공통 베이스 — 루트에 .ux 클래스를 붙입니다 */
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}
.ux{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  color:var(--ux-ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
  word-break:keep-all;overflow-wrap:break-word;
}
/* :where()로 명시도를 0으로 둬서, 요소 클래스가 버튼·입력의 색과 글꼴을 덮어쓸 수 있게 합니다 */
:where(.ux) :is(button,input,textarea,select){font:inherit;color:inherit}
:where(.ux) button{cursor:pointer}
.ux :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.ux [hidden]{display:none!important}
/* 모션 줄이기: 전환은 즉시 끝나고, 무한 반복은 한 번으로 줄여 최종 상태가 보이게 합니다 */
@media (prefers-reduced-motion:reduce){
  .ux,.ux *,.ux *::before,.ux *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}