/* =====================================================================
   vortex.css — 세 번째 UI (VORTEX)
   ---------------------------------------------------------------------
   ULTIMAX 가 "두꺼운 유리", AURORA 가 "공간에 떠 있는 유리판" 이라면
   VORTEX 는 **"책상"** 입니다. 사이트가 페이지가 아니라 창으로 보입니다.

   어디서 왔나 — macOS 와 visionOS 를 반씩

     바탕화면  뒤에 아주 느리게 흐르는 빛 덩어리. 창을 내리면 이게 보입니다.
               페이지는 배경을 덮는 것이고, 책상은 배경이 남아 있는 것이에요.
     창        macOS 창 그대로 — 왼쪽 위 신호등 셋, 가운데 이름, 14px 곡률,
               넓고 옅은 그림자 아래 좁고 진한 접지 그림자.
               신호등은 평소엔 색동그라미고, 창에 손이 닿아야 기호가 뜹니다.
     독        macOS 독의 **확대**(가까운 칸이 커지고 이웃이 덜 커짐)에
               visionOS 의 재질(색 없는 밝은 서리, 캡슐)을 입혔습니다.
               색으로 칠하지 않고 밝기로만 말합니다.
     메뉴 막대  화면 맨 위 28px. 왼쪽에 지금 창 이름, 오른쪽에 계정과 시계.
     움직임    지니(genie). 창을 내리면 독의 그 칸으로 **빨려 들어갑니다**.
               열 때는 그 자리에서 되돌아 나옵니다.

   AURORA 와 무엇이 다른가
     AURORA 는 페이지의 옷만 갈아입힙니다(토큰 교체 + 아래 독).
     VORTEX 는 페이지를 **창 안에 넣습니다**. 그래서 바탕화면이 생기고,
     창을 내리거나 닫을 수 있고, 다른 페이지를 그 위에 띄울 수 있습니다.

   무엇을 건드리지 않았나
     기존 화면 코드는 한 줄도 고치지 않았습니다. vortex.js 가 페이지의
     뿌리 요소를 창 안으로 옮길 뿐이고, 되돌리면 제자리로 돌아갑니다.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. 토큰 — visionOS 쪽 재질, macOS 쪽 곡률
   --------------------------------------------------------------------- */
:root[data-ui="vortex"] {
  /* 곡률: macOS 창은 AURORA 만큼 둥글지 않습니다. 창은 각지고,
     컨트롤만 캡슐입니다. */
  --r-xl: 18px;
  --r-lg: 15px;
  --r-md: 12px;
  --r-sm: 9px;

  /* 움직임: 튕기지 않고 감쇠합니다. macOS 의 창은 관성으로 지나쳤다
     돌아오지 않아요. */
  --spring: cubic-bezier(.22, .82, .26, 1);
  --swift:  cubic-bezier(.4, 0, .2, 1);

  --g-blur: 40px;
  --g-sat: 132%;
  --g-bright: 1.06;

  /* 창 자체의 값 */
  --vtx-win-r: 14px;
  --vtx-menubar-h: 28px;
  --vtx-dock-h: 66px;
}

/* 다크 — 바탕이 거의 무채색이라 유리가 주인공이 됩니다 */
:root[data-ui="vortex"],
:root[data-ui="vortex"][data-theme="dark"] {
  --bg:   #07080B;
  --bg-2: #12141A;

  --g-tint:      rgba(255,255,255,.10);
  --g-tint-2:    rgba(255,255,255,.055);
  --g-tint-hi:   rgba(255,255,255,.17);
  --g-line:      rgba(255,255,255,.11);
  --g-spec:      rgba(255,255,255,.56);
  --g-spec-soft: rgba(255,255,255,.18);
  --g-rim:       rgba(255,255,255,.32);
  --g-shadow:
    0 40px 90px -30px rgba(0,0,0,.72),
    0 8px 22px -10px rgba(0,0,0,.55);

  --vtx-chrome:  rgba(38,40,48,.72);   /* 타이틀바 */
  --vtx-ink:     rgba(255,255,255,.78);
}

:root[data-ui="vortex"][data-theme="light"] {
  --bg:   #E9ECF3;
  --bg-2: #F6F8FC;

  --g-tint:      rgba(255,255,255,.60);
  --g-tint-2:    rgba(255,255,255,.40);
  --g-tint-hi:   rgba(255,255,255,.84);
  --g-line:      rgba(10,12,18,.10);
  --g-spec:      rgba(255,255,255,.95);
  --g-spec-soft: rgba(255,255,255,.55);
  --g-rim:       rgba(255,255,255,.78);
  --g-shadow:
    0 34px 76px -28px rgba(12,18,40,.34),
    0 6px 18px -8px rgba(12,18,40,.20);

  --vtx-chrome:  rgba(238,240,246,.82);
  --vtx-ink:     rgba(10,12,18,.72);
}

/* ---------------------------------------------------------------------
   2. 바탕화면
   ---------------------------------------------------------------------
   창을 전부 내리면 남는 것이 이겁니다. 아주 느리게 흐르는 빛 덩어리 셋 —
   40초에 한 바퀴라 보고 있으면 안 움직이는 것 같고, 잠깐 다른 데 보다
   돌아오면 달라져 있습니다. 눈에 띄면 배경이 아니라 애니메이션이 돼요.
   --------------------------------------------------------------------- */
:root[data-ui="vortex"] body.vtx-on {
  overflow: hidden;
  background: var(--bg);
}

.vtx-desk {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(62vw 50vw at 8% -12%,  var(--aura-2), transparent 62%),
    radial-gradient(56vw 46vw at 96% 2%,   var(--aura-1), transparent 64%),
    radial-gradient(66vw 52vw at 44% 116%, var(--aura-3), transparent 66%),
    var(--bg);
}
/* 흐르는 한 겹 더 — 위 배경과 어긋난 속도로 돌아 결이 겹칩니다 */
.vtx-desk::after {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(38vw 34vw at 30% 40%, color-mix(in srgb, var(--iris) 22%, transparent), transparent 60%),
    radial-gradient(34vw 30vw at 72% 62%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 62%);
  filter: blur(30px);
  animation: vtxDrift 44s linear infinite;
}
@keyframes vtxDrift {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1);    }
}

/* 페이지가 자기 배경으로 깔던 것은 책상 아래로 내립니다 —
   두 겹이 겹치면 바탕이 탁해집니다 */
:root[data-ui="vortex"] body.vtx-on > .env,
:root[data-ui="vortex"] body.vtx-on > .aura { display: none; }

/* 뿌리 요소가 없는 페이지(랜딩처럼 본문이 body 바로 아래 흩어진 곳)에서
   vortex.js 가 만들어 담는 그릇입니다 */
.vtx-wrap { display: block; }

/* 구석에 떠 있던 지원 단추는 메뉴 막대로 들어갑니다.
   창 안에 있어도 화면 기준으로 떠서 독 위에 겹쳐 앉거든요. */
:root[data-ui="vortex"] body.vtx-on .pgs-fab { display: none !important; }

/* ---------------------------------------------------------------------
   3. 메뉴 막대
   --------------------------------------------------------------------- */
.vtx-menubar {
  position: fixed; z-index: 60;
  top: 0; left: 0; right: 0;
  height: calc(var(--vtx-menubar-h) + var(--safe-t, 0px));
  padding: var(--safe-t, 0px) 10px 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--vtx-ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--g-tint-hi) 70%, transparent), var(--g-tint-2));
  backdrop-filter: blur(30px) saturate(var(--g-sat));
  -webkit-backdrop-filter: blur(30px) saturate(var(--g-sat));
  box-shadow: inset 0 -1px 0 var(--g-line);
}
.vtx-mb-mark { width: 17px; flex: none; opacity: .95; margin-right: 2px; }
.vtx-mb-app { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.vtx-mb-sp { flex: 1; }

.vtx-mb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border: 0; border-radius: 7px;
  background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 620;
  cursor: pointer; white-space: nowrap;
  transition: background .18s var(--swift);
}
.vtx-mb-btn:hover { background: color-mix(in srgb, var(--g-spec) 20%, transparent); }
.vtx-mb-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--g-spec) 30%, transparent); }
.vtx-mb-btn svg { width: 14px; height: 14px; stroke-width: 1.9; }

/* 계정 칩 — 여기를 누르면 계정 창이 지니로 열립니다 */
.vtx-mb-me .vtx-mb-av {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; color: #0B0D14;
  background: linear-gradient(150deg, var(--av-a, var(--brand)), var(--av-b, var(--cyan)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.vtx-mb-clock { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   4. 창
   ---------------------------------------------------------------------
   신호등이 핵심입니다. macOS 는 평소에 **색동그라미 셋**만 보여주고,
   창에 포인터가 닿아야 그 안에 ×, −, + 기호가 뜹니다. 늘 기호가 보이면
   창마다 작은 버튼 셋이 계속 소리치는 것처럼 보여요.
   --------------------------------------------------------------------- */
.vtx-win {
  position: fixed; z-index: 20;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--vtx-win-r);
  background: var(--bg-2);
  box-shadow:
    var(--g-shadow),
    0 0 0 1px var(--g-line),
    inset 0 1px 0 var(--g-spec-soft);
  /* 지니가 붙잡고 늘일 자리 */
  will-change: transform, clip-path;
}
.vtx-win.vtx-front { z-index: 40; }

.vtx-bar {
  flex: none; height: 38px; position: relative;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--vtx-chrome);
  backdrop-filter: blur(26px) saturate(var(--g-sat));
  -webkit-backdrop-filter: blur(26px) saturate(var(--g-sat));
  box-shadow: inset 0 -1px 0 var(--g-line), inset 0 1px 0 var(--g-spec-soft);
  cursor: default;
  user-select: none; -webkit-user-select: none;
}
.vtx-bar-t {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--vtx-ink); pointer-events: none;
}

.vtx-lights { display: flex; align-items: center; gap: 8px; }
.vtx-light {
  width: 12px; height: 12px; flex: none; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; position: relative;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transition: filter .16s var(--swift);
}
.vtx-light.red    { background: #FF5F57; }
.vtx-light.yellow { background: #FEBC2E; }
.vtx-light.green  { background: #28C840; }
.vtx-light:active { filter: brightness(.82); }
/* 기호는 창에 손이 닿을 때만 */
.vtx-light svg { width: 7px; height: 7px; opacity: 0; transition: opacity .14s var(--swift); }
.vtx-win:hover .vtx-light svg,
.vtx-win:focus-within .vtx-light svg { opacity: .62; }
/* 쓸 수 없는 신호등은 회색으로 — macOS 도 그렇게 합니다 */
.vtx-light[disabled] { background: color-mix(in srgb, var(--ink) 20%, transparent); cursor: default; }
.vtx-light[disabled] svg { display: none; }

.vtx-body { flex: 1; min-height: 0; position: relative; background: var(--bg-2); }
.vtx-body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 크기 조절 손잡이 — 오른쪽 아래 모서리 */
.vtx-grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 5;
}
.vtx-win.vtx-max .vtx-grip { display: none; }

/* 창을 옮기는 동안에는 안쪽 iframe 이 포인터를 가로채지 못하게 */
body.vtx-dragging .vtx-body { pointer-events: none; }
body.vtx-dragging { cursor: grabbing; }

/* ---------------------------------------------------------------------
   5. 이 페이지 자신이 들어가는 창
   ---------------------------------------------------------------------
   페이지의 뿌리 요소를 그대로 이 안에 넣습니다. 다시 그리지 않으므로
   화면 코드가 하던 일이 그대로 이어집니다.
   --------------------------------------------------------------------- */
.vtx-hostwin {
  top: calc(var(--vtx-menubar-h) + var(--safe-t, 0px) + 12px);
  left: 14px; right: 14px;
  bottom: calc(var(--vtx-dock-h) + var(--safe-b, 0px) + 16px);
}
.vtx-hostwin.vtx-max {
  top: calc(var(--vtx-menubar-h) + var(--safe-t, 0px));
  left: 0; right: 0; bottom: 0;
  border-radius: 0;
}
/* 창 안에서는 페이지가 창을 꽉 채웁니다.
   원래 화면들은 100dvh 를 기준으로 짜여 있어서, 그대로 두면 창 밖으로
   넘칩니다. 창이 곧 화면이 되도록 높이를 넘겨받게 합니다. */
.vtx-hostwin .vtx-body > * {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* 문서처럼 흐르는 페이지(랜딩·약관 등)는 창 안에서 스크롤합니다 */
.vtx-hostwin.vtx-flow .vtx-body { overflow: auto; overscroll-behavior: contain; }
.vtx-hostwin.vtx-flow .vtx-body > * { height: auto !important; }

/* ---------------------------------------------------------------------
   6. 독 — macOS 의 확대 + visionOS 의 재질
   --------------------------------------------------------------------- */
.vtx-dock {
  position: fixed; z-index: 55;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b, 0px) + 10px);
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px; border-radius: 22px;
  max-width: calc(100vw - 20px);
  background: linear-gradient(180deg, var(--g-tint-hi), var(--g-tint) 55%, var(--g-tint-2));
  backdrop-filter: blur(40px) saturate(var(--g-sat)) brightness(var(--g-bright));
  -webkit-backdrop-filter: blur(40px) saturate(var(--g-sat)) brightness(var(--g-bright));
  box-shadow:
    var(--g-shadow),
    inset 0 1.5px 0 var(--g-spec),
    inset 0 -1px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px var(--g-line);
}

.vtx-app {
  position: relative; flex: none;
  width: 46px; height: 46px; padding: 0; border: 0;
  border-radius: 13px; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--g-spec) 14%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--g-spec) 45%, transparent),
    inset 0 0 0 1px var(--g-line);
  /* 확대는 JS 가 width/height 를 직접 줍니다 — transform 으로 키우면
     이웃이 밀려나지 않고 서로 겹칩니다. macOS 의 독은 옆으로 밀어냅니다. */
  transform-origin: 50% 100%;
  transition: background .2s var(--swift);
}
.vtx-app:hover { background: color-mix(in srgb, var(--g-spec) 26%, transparent); }
.vtx-app svg { width: 55%; height: 55%; stroke-width: 1.7; pointer-events: none; }
.vtx-app.vtx-tap { animation: vtxBounce .62s var(--spring); }
@keyframes vtxBounce {
  0%   { translate: 0 0; }
  28%  { translate: 0 -13px; }
  55%  { translate: 0 0; }
  74%  { translate: 0 -5px; }
  100% { translate: 0 0; }
}

/* 열려 있는 앱 아래 점 하나. macOS 그대로입니다. */
.vtx-app::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: currentColor; opacity: 0;
  transition: opacity .25s var(--swift);
}
.vtx-app.vtx-run::after { opacity: .58; }

/* 이름표 — 칸 위에 뜹니다 */
.vtx-tip {
  position: fixed; z-index: 58; pointer-events: none;
  padding: 5px 10px; border-radius: 9px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  color: var(--ink);
  background: var(--g-tint-hi);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6), inset 0 0 0 1px var(--g-line);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s var(--swift), transform .28s var(--spring);
}
.vtx-tip.on { opacity: 1; transform: none; }

/* 독 사이의 칸막이 — 페이지와 도구를 나눕니다 */
.vtx-sep {
  width: 1px; height: 30px; flex: none; align-self: center; margin: 0 3px;
  background: var(--g-line);
}

/* ---------------------------------------------------------------------
   7. 계정 창
   ---------------------------------------------------------------------
   메뉴 막대의 계정 칩에서 **빨려 나옵니다**. 창이지만 신호등은 닫기
   하나만 둡니다 — 최소화·최대화가 뜻이 없는 크기예요.
   --------------------------------------------------------------------- */
.vtx-acct {
  width: min(300px, calc(100vw - 24px));
  height: auto; max-height: min(460px, calc(100vh - 90px));
}
.vtx-acct .vtx-body { overflow: auto; padding: 14px; }
.vtx-acct-me {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--g-spec) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
.vtx-acct-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  font-size: 16px; font-weight: 800; color: #0B0D14;
  background: linear-gradient(150deg, var(--av-a, var(--brand)), var(--av-b, var(--cyan)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 5px 14px -6px rgba(0,0,0,.7);
}
.vtx-acct-nm { font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.vtx-acct-rl { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.vtx-acct-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 38px; padding: 0 11px;
  border: 0; border-radius: 11px; margin-top: 3px;
  background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 620;
  text-align: left; cursor: pointer;
}
.vtx-acct-row:hover { background: color-mix(in srgb, var(--g-spec) 16%, transparent); color: var(--ink); }
.vtx-acct-row svg { width: 16px; height: 16px; flex: none; stroke-width: 1.9; opacity: .75; }
.vtx-acct-row.danger { color: var(--rose); }
.vtx-acct-hr { height: 1px; margin: 8px 2px; background: var(--g-line); }

/* ---------------------------------------------------------------------
   8. 지니 — 창이 독으로 빨려 들어갑니다
   ---------------------------------------------------------------------
   진짜 지니는 창의 그림을 곡면으로 휘게 잡아당깁니다. 웹에는 그 변형이
   없어서 두 가지를 겹쳐 흉내 냈습니다.
     · clip-path 로 **아래쪽부터** 목이 좁아지는 깔때기를 만들고
       (아래 줄이 먼저 빨려 들어가고 위가 뒤따라옵니다 — 이 시간차가
        지니를 지니답게 만드는 부분입니다)
     · 동시에 그 목이 있는 곳으로 창을 내리고 세로로 줄입니다.
   실제 키프레임은 vortex.js 가 창과 독 칸의 자리를 재서 만듭니다.
   --------------------------------------------------------------------- */
.vtx-win.vtx-genie { pointer-events: none; }
.vtx-win.vtx-hidden { display: none; }

/* 창이 열릴 때 — 독에서 튀어나오는 것은 지니의 역순입니다.
   여는 것만은 조금 다르게, 제자리에서 살짝 커지며 내려앉기도 합니다
   (계정 창처럼 작은 것은 이쪽이 자연스러워요). */
@keyframes vtxPop {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.vtx-win.vtx-pop { animation: vtxPop .34s var(--spring); }

/* ---------------------------------------------------------------------
   9. 좁은 화면 · 접근성
   ---------------------------------------------------------------------
   손가락 기기에는 '창을 여러 개 늘어놓기' 가 뜻이 없습니다. 화면이
   창 하나보다 작아요. 그래서 창을 꽉 채우고 독만 남깁니다.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .vtx-hostwin { top: calc(var(--vtx-menubar-h) + var(--safe-t, 0px)); left: 0; right: 0;
                 bottom: calc(var(--vtx-dock-h) + var(--safe-b, 0px) + 6px); border-radius: 0; }
  .vtx-win:not(.vtx-hostwin):not(.vtx-acct) {
    top: calc(var(--vtx-menubar-h) + var(--safe-t, 0px)) !important;
    left: 0 !important; right: 0 !important;
    width: auto !important; height: auto !important;
    bottom: calc(var(--vtx-dock-h) + var(--safe-b, 0px) + 6px) !important;
    border-radius: 0;
  }
  .vtx-win:not(.vtx-hostwin) .vtx-grip { display: none; }
  .vtx-app { width: 42px; height: 42px; }
  .vtx-dock { gap: 4px; padding: 5px; }
  .vtx-mb-btn .vtx-mb-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vtx-desk::after { animation: none; }
  .vtx-app.vtx-tap { animation: none; }
  .vtx-win.vtx-pop { animation: none; }
  .vtx-tip { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .vtx-menubar, .vtx-dock, .vtx-bar {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--bg-2);
  }
}
/* 저사양 등급 — 흐림이 창마다 겹치면 가장 먼저 느려지는 곳입니다 */
.tier-lite .vtx-menubar, .tier-lite .vtx-dock, .tier-lite .vtx-bar {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--bg-2);
}
.tier-lite .vtx-desk::after { animation: none; }