/* lucianLabs UI 요소 — 공통 테마 토큰 (라이트 / 다크)
   라이트 기본값 → 시스템이 다크면 다크 → data-theme으로 명시하면 그 값을 우선합니다.
   요소 CSS는 --ux-* 토큰만 참조하므로, 프로젝트 테마 변수에 이 값을 매핑하면 됩니다. */
:root{
  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);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    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);
  }
}
:root[data-theme="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;
  }
}



/* lucianLabs UI 100 — 갤러리 화면 스타일. 요소 CSS와 섞이지 않도록 g- 접두사만 씁니다 */

/* 갤러리 전용 테마 값: 타일 바탕, 빛 번짐 세기, 상단 바 유리, 입자감 */
:root{
  --g-tile:#FFFFFF;
  --g-glow:24%;
  --g-bar:rgba(244,242,238,.8);
  --g-grain:.035;
  --g-rail:rgba(255,255,255,.72);
  --g-max:1320px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--g-tile:#0E0F17;--g-glow:34%;--g-bar:rgba(7,8,13,.72);--g-grain:.06;--g-rail:rgba(24,25,34,.66)}
}
:root[data-theme="dark"]{--g-tile:#0E0F17;--g-glow:34%;--g-bar:rgba(7,8,13,.72);--g-grain:.06;--g-rail:rgba(24,25,34,.66)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
/* 어느 글이 조금 넘쳐도 모바일 화면이 통째로 축소되지 않게 가로 넘침을 자릅니다 */
body{overflow-x:clip}
body{
  margin:0;min-height:100vh;background:var(--ux-page);color:var(--ux-ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden;
}
body[data-view="reel"]{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.g-skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--ux-ink);color:var(--ux-page);font-weight:650;text-decoration:none;transition:top .3s var(--ux-ease)}
.g-skip:focus{top:12px}

/* ---------- 머리말 ---------- */
.g-head{position:relative;max-width:var(--g-max);margin:0 auto;padding:0 28px}
.g-head::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;top:-260px;height:620px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 46% at 22% 40%,color-mix(in oklab,#7B61FF var(--g-glow),transparent),transparent 72%),
    radial-gradient(30% 40% at 70% 30%,color-mix(in oklab,#3D8BFF calc(var(--g-glow) * .8),transparent),transparent 72%),
    radial-gradient(26% 36% at 92% 60%,color-mix(in oklab,#22C3A6 calc(var(--g-glow) * .6),transparent),transparent 72%);
  filter:blur(10px)}
.g-head-line{display:flex;align-items:center;justify-content:space-between;height:68px}
.g-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:15px;font-weight:720;letter-spacing:-.02em;border-radius:10px}
.g-logo{display:block;flex:none;width:24px;height:24px}
.g-brand-s{font-weight:600;color:var(--ux-ink-3);padding-left:10px;border-left:1px solid var(--ux-line-2)}
.g-link{font-size:14px;font-weight:620;color:var(--ux-ink-2);padding:8px 2px;border-bottom:1px solid var(--ux-line-2);transition:color .3s var(--ux-ease),border-color .3s var(--ux-ease)}
.g-link:hover{color:var(--ux-ink);border-color:var(--ux-ink)}
.g-head-r{display:flex;align-items:center;gap:18px}

/* 언어: KO/EN 두 칸 사이로 알약이 미끄러집니다 */
.g-lang{position:relative;display:flex;align-items:center;height:36px;padding:3px 3px 3px 30px;border-radius:999px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line-2)}
.g-lang-ic{position:absolute;left:10px;top:50%;width:15px;height:15px;margin-top:-7.5px;fill:none;stroke:var(--ux-ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.g-lang-b{position:relative;z-index:1;height:30px;min-width:38px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:750;letter-spacing:.04em;color:var(--ux-ink-3);transition:color .35s var(--ux-ease)}
.g-lang-b:hover{color:var(--ux-ink)}
.g-lang-b[aria-pressed="true"]{color:var(--ux-page)}
.g-lang-pill{position:absolute;left:0;top:3px;height:30px;width:var(--w,38px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,30px));transition:transform .55s var(--ux-spring),width .55s var(--ux-spring)}

/* 영어로 시작할 때 한국어 문구가 잠깐 비치지 않게 가립니다. 스크립트가 늦어져도 1.2초 뒤에는 보입니다 */
.i18n-wait .g-head,.i18n-wait .g-bar,.i18n-wait .g-grid{visibility:hidden;animation:g-unhide 0s linear 1.2s forwards}
@keyframes g-unhide{to{visibility:visible}}

.g-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;padding:30px 0 30px;flex-wrap:wrap}
.g-intro-t{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .2em;font-size:clamp(38px,4.8vw,72px);line-height:1.08;letter-spacing:-.045em;font-weight:820}
.g-intro-t b{font-weight:820;background:var(--ux-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.g-w{display:inline-block}
.js .g-w{opacity:0;transform:translateY(42%) rotate(4deg);filter:blur(8px);transition:opacity .8s var(--ux-ease),transform 1.1s var(--ux-spring),filter .9s var(--ux-ease)}
.js .is-ready .g-w{opacity:1;transform:none;filter:none}
.js .is-ready .g-w:nth-child(2){transition-delay:.08s}
.js .is-ready .g-w:nth-child(3){transition-delay:.16s}
.g-intro-r{max-width:400px;padding-bottom:6px}
.g-intro-s{margin:0;font-size:15.5px;line-height:1.62;color:var(--ux-ink-2)}
.g-intro-meta{margin:14px 0 0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.g-intro-meta b{color:var(--ux-ink)}
.g-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}

/* ---------- 도구줄: 스크롤하면 위에 붙습니다 ---------- */
.g-bar{position:sticky;top:0;z-index:30;background:var(--g-bar);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid transparent;transition:border-color .4s var(--ux-ease),background-color .4s var(--ux-ease)}
.g-bar.is-stuck{border-bottom-color:var(--ux-line)}
.g-bar-in{max-width:var(--g-max);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;gap:16px}
.g-cats{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px;margin-left:-4px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.g-cats::-webkit-scrollbar{display:none}
.g-cat{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:640;color:var(--ux-ink-2);white-space:nowrap;transition:color .35s var(--ux-ease)}
.g-cat:hover{color:var(--ux-ink)}
.g-cat i{font-style:normal;font-size:11.5px;font-weight:650;color:var(--ux-ink-3);font-variant-numeric:tabular-nums;transition:color .35s var(--ux-ease)}
.g-cat[aria-pressed="true"]{color:var(--ux-page)}
.g-cat[aria-pressed="true"] i{color:color-mix(in oklab,var(--ux-page) 62%,transparent)}
.g-cats-pill{position:absolute;z-index:0;left:0;top:4px;height:36px;width:var(--w,60px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,4px));transition:transform .55s var(--ux-spring),width .55s var(--ux-spring);box-shadow:0 8px 18px -10px var(--ux-shadow-strong)}
.g-cats.no-anim .g-cats-pill{transition:none}

.g-tools{flex:none;display:flex;align-items:center;gap:8px}
.g-tool{height:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line-2);color:var(--ux-ink);font-size:13.5px;font-weight:650;transition:transform .45s var(--ux-spring),box-shadow .3s var(--ux-ease),background-color .3s var(--ux-ease)}
.g-tool:hover{box-shadow:inset 0 0 0 1px var(--ux-ink-3)}
.g-tool:active{transform:scale(.93)}
.g-tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-tool--label{padding:0 15px 0 12px}
/* 자동 재생: 재생 중이면 일시정지 모양, 멈췄으면 재생 모양 */
.g-auto .g-auto-play{fill:currentColor;stroke:none}
.g-auto.is-on .g-auto-play,.g-auto:not(.is-on) .g-auto-pause{display:none}
.g-auto:not(.is-on){color:var(--ux-ink-3)}

/* 검색: 아이콘 버튼이 입력창으로 펼쳐집니다 */
.g-search{position:relative;display:flex;align-items:center;height:40px;width:40px;border-radius:999px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line-2);transition:width .6s var(--ux-spring),box-shadow .3s var(--ux-ease)}
.g-search .g-search-btn{position:absolute;left:0;top:0;box-shadow:none;background:none;z-index:1}
.g-search input{width:100%;height:100%;border:0;outline:0;background:none;padding:0 14px 0 40px;font:inherit;font-size:14px;color:var(--ux-ink);opacity:0;transition:opacity .3s var(--ux-ease)}
.g-search input::placeholder{color:var(--ux-ink-3)}
.g-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.g-search.is-open{width:250px;box-shadow:inset 0 0 0 1.5px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.g-search.is-open input{opacity:1}
.g-search.has-q:not(.is-open){box-shadow:inset 0 0 0 1.5px var(--ux-accent)}

/* 테마 버튼: 해가 달로 바뀝니다 */
.g-theme svg{width:20px;height:20px;stroke-width:1.8;overflow:visible}
.g-moon-cut{transition:cx .6s var(--ux-ease),cy .6s var(--ux-ease)}
.g-sun-core{transition:r .6s var(--ux-spring)}
.g-sun-rays{transform-origin:12px 12px;transition:transform .7s var(--ux-spring),opacity .35s var(--ux-ease)}
.is-dark .g-moon-cut{cx:17px;cy:7.5px}
.is-dark .g-sun-core{r:8px}
.is-dark .g-sun-rays{transform:rotate(-90deg) scale(.4);opacity:0}

/* ---------- 타일 그리드: 3열, 긴 타일은 두 줄을 차지합니다 ---------- */
.g-grid{max-width:var(--g-max);margin:0 auto;padding:18px 28px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:12px}
.g-tile{position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 62% at 32% 30%,color-mix(in oklab,var(--h,#7B61FF) var(--g-glow),transparent),transparent 72%),
    radial-gradient(62% 56% at 86% 92%,color-mix(in oklab,var(--h2,#3D8BFF) calc(var(--g-glow) * .7),transparent),transparent 72%),
    var(--g-tile);
  box-shadow:inset 0 0 0 1px var(--ux-line);
  contain:layout paint}
.g-tile.is-tall{aspect-ratio:auto;grid-row:span 2}
.g-tile.at-first{grid-column:1}
.g-tile.at-last{grid-column:-2}
.g-tile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:var(--g-grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.g-tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ux-ease);
  background:radial-gradient(60% 50% at 50% 46%,color-mix(in oklab,var(--h,#7B61FF) calc(var(--g-glow) * .9),transparent),transparent 74%)}
.g-tile:hover::before{opacity:1}
.js .g-tile.is-new{animation:g-rise .9s var(--ux-ease) both;animation-delay:var(--d,0ms)}
@keyframes g-rise{from{opacity:0;transform:translateY(28px) scale(.975)}}

/* 빈 곳을 누르면 릴스에서 크게 열립니다. 요소는 그 위에서 직접 조작됩니다 */
.g-open{position:absolute;inset:0;z-index:1;border-radius:inherit;cursor:zoom-in}
.g-open:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-4px}
.g-stage{position:absolute;left:0;right:0;top:0;bottom:46px;z-index:2;pointer-events:none;overflow-anchor:none}
.g-fit{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%);transform-origin:50% 50%;pointer-events:none}
.g-fit>.ux{pointer-events:auto}
.g-cap{position:absolute;left:16px;right:60px;bottom:14px;z-index:2;display:flex;align-items:center;gap:9px;pointer-events:none;min-width:0}
.g-cap b{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;color:var(--ux-ink-3);letter-spacing:.02em}
.g-cap span{min-width:0;font-size:13.5px;font-weight:650;color:var(--ux-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ux-ease)}
.g-tile:hover .g-cap span{color:var(--ux-ink)}
.g-exp{position:absolute;right:12px;bottom:9px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line-2),0 8px 18px -10px var(--ux-shadow-strong);opacity:0;transform:translateY(6px) scale(.85);transition:opacity .35s var(--ux-ease),transform .5s var(--ux-spring)}
.g-exp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-tile:hover .g-exp,.g-exp:focus-visible{opacity:1;transform:none}
.g-exp:active{transform:scale(.9)}
@media (hover:none){.g-exp{opacity:1;transform:none}}

/* 시연 포인터: 맥 커서 모양으로 자동 재생이 누르는 자리를 보여 줍니다. 요소의 cursor 값에 따라 화살표·손가락·I자로 바뀝니다 */
.g-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}
.g-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}
.g-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}
.g-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}
.g-ghost.is-on{opacity:1}
.g-ghost.is-on::before{scale:1}
.g-ghost.is-down::before{scale:.86}
.g-ghost::after{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ux-accent);opacity:0}
.g-ghost.is-tap::after{animation:g-tap .55s ease-out}
@keyframes g-tap{0%{opacity:.85;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}

.g-more{height:1px}
.g-empty{max-width:var(--g-max);margin:0 auto;padding:80px 28px 140px;text-align:center}
.g-empty[hidden]{display:none}
.g-empty-t{margin:0;font-size:22px;font-weight:720;letter-spacing:-.03em}
.g-empty-s{margin:8px 0 22px;font-size:15px;color:var(--ux-ink-2)}

/* ---------- 버튼, 대화상자, 알림 ---------- */
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line-2);font-size:14px;font-weight:650;color:var(--ux-ink);white-space:nowrap;transition:transform .45s var(--ux-spring),background-color .3s var(--ux-ease),box-shadow .3s var(--ux-ease)}
.g-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.g-btn:hover{box-shadow:inset 0 0 0 1px var(--ux-ink-3)}
.g-btn:active{transform:scale(.95)}
.g-btn--pri{background:var(--ux-ink);color:var(--ux-page);box-shadow:none}
.g-btn--pri:hover{box-shadow:0 10px 22px -12px var(--ux-shadow-strong)}
.g-btn.is-done{background:var(--ux-mint);color:var(--ux-accent-ink)}

.g-dlg{padding:0;border:0;border-radius:28px;background:var(--ux-surface);color:var(--ux-ink);width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  box-shadow:0 0 0 1px var(--ux-line),0 60px 120px -40px var(--ux-shadow-strong);
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .4s var(--ux-ease),transform .65s var(--ux-spring),overlay .4s allow-discrete,display .4s allow-discrete}
.g-dlg[open]{opacity:1;transform:none}
@starting-style{.g-dlg[open]{opacity:0;transform:translateY(22px) scale(.97)}}
.g-dlg::backdrop{background:color-mix(in oklab,var(--ux-page) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.g-dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 0}
.g-dlg-kicker{margin:0;font-size:12px;font-weight:650;letter-spacing:.08em;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.g-dlg-title{margin:6px 0 0;font-size:26px;line-height:1.15;letter-spacing:-.035em;font-weight:760}
.g-x{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);transition:transform .5s var(--ux-spring)}
.g-x:hover{transform:rotate(90deg)}
.g-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.g-seg{position:relative;display:inline-flex;margin:20px 28px 0;padding:4px;border-radius:999px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line)}
.g-seg-b{position:relative;z-index:1;height:36px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:650;color:var(--ux-ink-2);transition:color .35s var(--ux-ease)}
.g-seg-b[aria-selected="true"]{color:var(--ux-ink)}
.g-seg-pill{position:absolute;left:4px;top:4px;height:36px;width:var(--w,120px);border-radius:999px;background:var(--ux-surface);box-shadow:0 1px 0 var(--ux-line),0 6px 14px -8px var(--ux-shadow-strong);transform:translateX(var(--x,0));transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.g-code{display:block;width:calc(100% - 56px);height:min(48vh,440px);margin:14px 28px 0;padding:18px 20px;resize:none;border:0;border-radius:18px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);color:var(--ux-ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;outline:none;tab-size:2}
.g-code:focus-visible{box-shadow:inset 0 0 0 2px var(--ux-accent)}
.g-dlg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 28px 26px}
.g-dlg-hint{font-size:13px;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.g-dlg-acts{display:flex;gap:8px;flex-wrap:wrap}
.g-dlg--guide{width:min(620px,calc(100vw - 32px))}
.g-steps{margin:18px 28px 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.g-steps li{position:relative;padding-left:40px;font-size:15px;line-height:1.6;color:var(--ux-ink-2);counter-increment:s}
.g-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ux-accent-soft);color:var(--ux-accent);font-size:13px;font-weight:750}
.g-steps b{color:var(--ux-ink)}
.g-note{margin:22px 28px 28px;padding:14px 16px;border-radius:16px;background:var(--ux-surface-2);font-size:13px;line-height:1.65;color:var(--ux-ink-2)}
.g-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:1px 6px;border-radius:6px;background:var(--ux-surface);color:var(--ux-ink)}

.g-toast{position:fixed;left:50%;bottom:28px;z-index:90;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--ux-ink);color:var(--ux-page);font-size:14px;font-weight:650;white-space:nowrap;box-shadow:0 18px 40px -16px var(--ux-shadow-strong);pointer-events:none;opacity:0;transform:translate(-50%,20px) scale(.96);transition:opacity .35s var(--ux-ease),transform .6s var(--ux-spring)}
.g-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 릴스: 한 화면에 요소 하나 ---------- */
.g-reel{position:fixed;inset:0;z-index:40;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;background:var(--ux-page);
  opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .45s var(--ux-ease),transform .6s var(--ux-ease),visibility 0s linear .6s}
.g-reel::-webkit-scrollbar{display:none}
body[data-view="reel"] .g-reel{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ux-ease),transform .6s var(--ux-ease)}
.g-slide{position:relative;height:100vh;height:100dvh;min-height:560px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;isolation:isolate}
.g-slide-bg{position:absolute;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 44% at 30% 36%,color-mix(in oklab,var(--h,#7B61FF) var(--g-glow),transparent),transparent 72%),
    radial-gradient(34% 40% at 72% 64%,color-mix(in oklab,var(--h2,#3D8BFF) calc(var(--g-glow) * .8),transparent),transparent 72%),
    radial-gradient(28% 34% at 62% 22%,color-mix(in oklab,#22C3A6 calc(var(--g-glow) * .35),transparent),transparent 72%);
  animation:g-drift 16s ease-in-out infinite alternate}
@keyframes g-drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
.g-slide-stage{position:absolute;left:0;right:0;top:80px;bottom:210px}
.g-slide-stage .g-fit{transition:opacity .6s var(--ux-ease),filter .7s var(--ux-ease)}
.js .g-slide:not(.is-on) .g-slide-stage .g-fit{opacity:0;filter:blur(8px)}
.g-slide-meta{position:absolute;left:max(28px,calc(50% - 560px));bottom:42px;width:min(600px,calc(100% - 150px))}
.g-slide-kick{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.g-slide-kick b{color:var(--ux-ink)}
.g-slide-t{margin:10px 0 0;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-.045em;font-weight:780}
.g-slide-s{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ux-ink-2);max-width:56ch}
.g-slide-hint{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:8px 14px 8px 10px;border-radius:999px;background:var(--g-rail);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--ux-line);font-size:13px;font-weight:620;color:var(--ux-ink-2)}
.g-slide-hint svg{width:16px;height:16px;fill:none;stroke:var(--ux-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-slide-meta>*{transition:opacity .6s var(--ux-ease),transform .8s var(--ux-spring)}
.js .g-slide:not(.is-on) .g-slide-meta>*{opacity:0;transform:translateY(16px)}
.js .g-slide.is-on .g-slide-meta>:nth-child(2){transition-delay:.05s}
.js .g-slide.is-on .g-slide-meta>:nth-child(3){transition-delay:.1s}
.js .g-slide.is-on .g-slide-meta>:nth-child(4){transition-delay:.15s}
/* 넓은 화면: 설명은 왼쪽 열, 요소는 오른쪽 넓은 무대 한가운데. 설명이 길어져도 요소와 겹치지 않습니다 */
@media (min-width:1100px){
  .g-slide-meta{left:max(48px,calc(50% - 600px));bottom:56px;width:min(380px,30vw)}
  .g-slide-t{font-size:clamp(30px,2.6vw,40px)}
  .g-slide-s{font-size:15px}
  .g-slide-stage{left:calc(max(48px,calc(50% - 600px)) + min(380px,30vw) + 32px);right:120px;top:84px;bottom:48px}
}
.g-rail{position:absolute;right:max(24px,calc(50% - 600px));bottom:46px;display:flex;flex-direction:column;gap:16px}
.g-rb{display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:16px}
.g-rb i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--g-rail);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--ux-line-2),0 14px 28px -16px var(--ux-shadow-strong);transition:transform .5s var(--ux-spring),background-color .3s var(--ux-ease),color .3s var(--ux-ease)}
.g-rb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.g-rb span{font-size:11.5px;font-weight:650;color:var(--ux-ink-2)}
.g-rb:hover i{transform:scale(1.08)}
.g-rb:active i{transform:scale(.9)}
.g-rb.is-done i{background:var(--ux-mint);color:var(--ux-accent-ink)}
.g-rb:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}

.g-hud{position:fixed;left:16px;right:16px;top:16px;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ux-ease),transform .6s var(--ux-spring),visibility 0s linear .4s;visibility:hidden}
body[data-view="reel"] .g-hud{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ux-ease) .1s,transform .6s var(--ux-spring) .1s}
.g-hud>*{pointer-events:auto}
.g-hud-b{height:42px;min-width:42px;padding:0 16px 0 12px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--g-rail);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--ux-line-2);font-size:13.5px;font-weight:650;transition:transform .45s var(--ux-spring)}
.g-hud-b:active{transform:scale(.93)}
.g-hud-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-hud-theme,.g-hud-ic{padding:0;width:42px}
.g-hud-r{display:flex;gap:8px}
.g-prog{display:flex;align-items:center;gap:12px;height:42px;padding:0 18px;border-radius:999px;background:var(--g-rail);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--ux-line);font-size:12.5px;font-weight:700;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.g-prog span:first-child{color:var(--ux-ink);min-width:2.2em}
.g-prog i{position:relative;width:140px;height:3px;border-radius:3px;background:var(--ux-line-2);overflow:hidden}
.g-prog i b{position:absolute;inset:0;border-radius:3px;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s var(--ux-spring)}

/* ---------- 모바일 ---------- */
@media (max-width:760px){
  .g-head{padding:0 16px}
  .g-head-line{height:56px}
  .g-brand-s{display:none}
  .g-head-r{gap:12px}
  .g-intro{padding:14px 0 18px;gap:12px}
  .g-intro-t{font-size:clamp(32px,9.5vw,46px)}
  /* 영어 제목은 단어가 길어 한 단계 작게 씁니다(390px에서도 가로로 넘치지 않게) */
  :root[lang="en"] .g-intro-t{font-size:clamp(30px,9vw,44px)}
  .g-intro-r{max-width:none}
  .g-intro-s{font-size:14px}
  .g-intro-meta{margin-top:8px}
  .g-bar-in{padding:0 12px 0 16px;height:58px;gap:8px}
  .g-tool--label{width:40px;padding:0}
  .g-tool--label span{display:none}
  .g-search.is-open{position:absolute;right:104px;width:calc(100vw - 132px);z-index:5;background:var(--ux-surface)}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 12px 32px}
  .g-tile{border-radius:18px}
  .g-stage{bottom:36px}
  .g-cap{left:12px;bottom:10px;right:48px;gap:7px}
  .g-cap b{font-size:10px}
  .g-cap span{font-size:12px}
  .g-exp{right:8px;bottom:6px;width:30px;height:30px}
  .g-slide-stage{top:72px;bottom:236px}
  .g-slide-meta{left:18px;bottom:28px;width:calc(100% - 100px)}
  .g-slide-t{font-size:28px}
  .g-slide-s{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .g-rail{right:12px;bottom:28px;gap:12px}
  .g-rb i{width:48px;height:48px}
  .g-hud{left:10px;right:10px;top:10px}
  .g-hud-b span{display:none}
  .g-hud-b{padding:0;width:42px}
  .g-prog i{width:70px}
  .g-dlg{border-radius:24px}
  .g-dlg-head{padding:22px 20px 0}
  .g-seg{margin:16px 20px 0}
  .g-code{width:calc(100% - 40px);margin:12px 20px 0;height:46vh}
  .g-dlg-foot{padding:16px 20px 22px}
  .g-dlg-acts{width:100%}
  .g-dlg-acts .g-btn{flex:1}
}

/* 테마 전환: 버튼 위치에서 원이 퍼지며 바뀝니다 */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}



.g-fit.is-suspended,.g-fit.is-suspended *,.g-fit.is-suspended *::before,.g-fit.is-suspended *::after{animation-play-state:paused!important}
.g-slide:not(.is-on) .g-slide-bg,html[data-gallery-motion="off"] .g-slide-bg{animation-play-state:paused!important}
.g-retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px;border:1px solid var(--ux-line-2);border-radius:999px;color:var(--ux-ink);background:var(--ux-surface);font:600 14px/1.4 system-ui;cursor:pointer;pointer-events:auto;z-index:3}