:root[data-ui="aurora"] {
  /* ---- 곡률: 크고 이어지게 ----
     visionOS 의 창은 아주 둥급니다. 안쪽 요소는 바깥보다 조금씩 작은
     곡률을 써서 동심원처럼 겹치게 했습니다. */
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 14px;

  /* ---- 움직임: 감쇠 ----
     튕김(overshoot)을 뺐습니다. visionOS 에서는 물체가 관성으로 지나쳤다
     돌아오지 않고, 속도만 줄이며 제자리에 내려앉습니다. */
  --spring: cubic-bezier(.25, .86, .24, 1);
  --swift:  cubic-bezier(.4, 0, .2, 1);

  /* ---- 유리: 더 두껍게 흐리고, 색은 빼고 ----
     채도를 155% 에서 124% 로 내린 이유 — visionOS 유리는 뒤의 색을
     증폭하지 않습니다. 뒤가 무엇이든 같은 중성 서리로 보여야 해요. */
  --g-blur: 44px;
  --g-sat: 124%;
  --g-bright: 1.08;
}

/* 다크 — 거의 무채색. 유리가 주인공이라 바탕은 뒤로 물러납니다.
   남색기(#0B0F1A)를 덜어냈습니다. 바탕이 파랗게 물들면 그 위의 흰 서리도
   같이 파래져서, visionOS 유리 특유의 '색이 없는' 느낌이 사라집니다. */
:root[data-ui="aurora"],
:root[data-ui="aurora"][data-theme="dark"] {
  --bg:   #0A0B0E;
  --bg-2: #14161A;

  /* 서리를 훨씬 밝게 올렸습니다(.055 → .11).
     visionOS 의 다크 유리는 '어두운 판' 이 아니라 어두운 배경 위에 얹힌
     '밝은 서리' 입니다. 알파가 낮으면 그냥 검은 카드로 보였어요. */
  --g-tint:      rgba(255,255,255,.11);
  --g-tint-2:    rgba(255,255,255,.06);
  --g-tint-hi:   rgba(255,255,255,.18);
  --g-line:      rgba(255,255,255,.12);
  --g-spec:      rgba(255,255,255,.58);
  --g-spec-soft: rgba(255,255,255,.20);
  --g-rim:       rgba(255,255,255,.34);
  /* 두 겹 — 넓고 옅게 퍼지는 그림자로 공간에 띄우고,
     좁고 진한 접지 그림자로 '어디에 떠 있는지' 를 알려줍니다. */
  --g-shadow:    0 44px 96px -32px rgba(0,0,0,.66),
                 0 10px 28px -14px rgba(0,0,0,.50);

  /* 오로라 색 — 배경(환경)에만 남깁니다. 유리에는 배지 않아요. */
  --aura-1: rgba(48,209,160,.13);
  --aura-2: rgba(124,107,255,.15);
  --aura-3: rgba(56,189,248,.11);

  --iris:  #B4BEFF;
  --brand: #5CE3A6;
  --cyan:  #6BD3F5;
}

/* 라이트 — 밝은 회백색 위의 흰 서리.
   두 블록이 같은 값인 이유: 기기 설정을 따르는 경우와 사용자가 직접 고른
   경우를 모두 받아야 하는데, 하나로 합치면 특이도가 어긋납니다. */
@media (prefers-color-scheme: light) {
  :root[data-ui="aurora"]:not([data-theme="dark"]) {
    --bg:   #EFF0F3;
    --bg-2: #F9FAFC;

    --g-tint:      rgba(255,255,255,.66);
    --g-tint-2:    rgba(255,255,255,.46);
    --g-tint-hi:   rgba(255,255,255,.88);
    --g-line:      rgba(16,18,24,.07);
    --g-spec:      rgba(255,255,255,.98);
    --g-spec-soft: rgba(255,255,255,.62);
    --g-rim:       rgba(255,255,255,.85);
    --g-shadow:    0 40px 84px -30px rgba(16,20,34,.20),
                   0 8px 22px -12px rgba(16,20,34,.12);

    --aura-1: rgba(16,185,129,.10);
    --aura-2: rgba(99,102,241,.11);
    --aura-3: rgba(14,165,233,.09);

    --iris:  #4F46E5;
    --brand: #059669;
    --cyan:  #0284C7;
  }
}
:root[data-ui="aurora"][data-theme="light"] {
  --bg:   #EFF0F3;
  --bg-2: #F9FAFC;
  --g-tint:      rgba(255,255,255,.66);
  --g-tint-2:    rgba(255,255,255,.46);
  --g-tint-hi:   rgba(255,255,255,.88);
  --g-line:      rgba(16,18,24,.07);
  --g-spec:      rgba(255,255,255,.98);
  --g-spec-soft: rgba(255,255,255,.62);
  --g-rim:       rgba(255,255,255,.85);
  --g-shadow:    0 40px 84px -30px rgba(16,20,34,.20),
                 0 8px 22px -12px rgba(16,20,34,.12);
  --aura-1: rgba(16,185,129,.10);
  --aura-2: rgba(99,102,241,.11);
  --aura-3: rgba(14,165,233,.09);
  --iris:  #4F46E5;
  --brand: #059669;
  --cyan:  #0284C7;
}

/* ------------------------------------------------------------- 바탕 */
/* Mica — 배경의 색이 창에 배어나오도록, 아주 크고 느린 얼룩을 깔아둡니다.
   스크롤해도 따라오지 않아야 '창 뒤의 벽지' 처럼 느껴집니다. */

:root[data-ui="aurora"] .aura,
:root[data-ui="aurora"] .env {
  background:
    radial-gradient(120vw 80vh at 12% -20%, var(--aura-1), transparent 55%),
    radial-gradient(100vw 70vh at 92% 8%,  var(--aura-2), transparent 58%),
    radial-gradient(110vw 75vh at 46% 118%, var(--aura-3), transparent 60%),
    var(--bg);
}

/* 오로라 띠 — 아주 느리게 흐르는 한 겹.
   빠르면 산만하고, 이 정도면 '있는지 모르게 있는' 정도입니다. */
:root[data-ui="aurora"] .aura::before,
:root[data-ui="aurora"] .env::before {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 200deg at 50% 50%,
    transparent, var(--aura-2) 18%, transparent 34%,
    var(--aura-1) 56%, transparent 72%, var(--aura-3) 88%, transparent);
  filter: blur(90px);
  opacity: .5;
  animation: auroraDrift 48s linear infinite;
}
@keyframes auroraDrift { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- 유리 한 장 */
/* 윤곽선으로 가두지 않고, 빛과 그늘로 두께를 냅니다.
     위 모서리   흰 정반사 한 줄 — 유리의 윗면이 빛을 받는 자리
     아래 모서리 어두운 그늘 한 줄 — 유리의 두께가 만드는 그림자
     둘레       아주 옅은 1px. 선이라기보다 경계의 흔적 정도로만.
   visionOS 유리에는 뚜렷한 테두리가 없습니다. 그런데도 가장자리가
   읽히는 건 위가 밝고 아래가 어둡기 때문이에요. */

:root[data-ui="aurora"] .glass,
:root[data-ui="aurora"] .lg,
:root[data-ui="aurora"] .panel,
:root[data-ui="aurora"] .rail,
:root[data-ui="aurora"] .main,
:root[data-ui="aurora"] .g-rail,
:root[data-ui="aurora"] .g-main {
  background: linear-gradient(180deg, var(--g-tint-hi), var(--g-tint) 42%, var(--g-tint-2));
  box-shadow:
    var(--g-shadow),
    inset 0 1.5px 0 var(--g-spec),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px var(--g-line);
}

/* 라이트에서는 아래 그늘이 회색 띠로 보입니다. 훨씬 옅게 깔아요. */
@media (prefers-color-scheme: light) {
  :root[data-ui="aurora"]:not([data-theme="dark"]) .glass,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .lg,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .panel,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .rail,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .main,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .g-rail,
  :root[data-ui="aurora"]:not([data-theme="dark"]) .g-main {
    box-shadow:
      var(--g-shadow),
      inset 0 1.5px 0 var(--g-spec),
      inset 0 -1px 0 rgba(16,20,34,.07),
      inset 0 0 0 1px var(--g-line);
  }
}
:root[data-ui="aurora"][data-theme="light"] .glass,
:root[data-ui="aurora"][data-theme="light"] .lg,
:root[data-ui="aurora"][data-theme="light"] .panel,
:root[data-ui="aurora"][data-theme="light"] .rail,
:root[data-ui="aurora"][data-theme="light"] .main,
:root[data-ui="aurora"][data-theme="light"] .g-rail,
:root[data-ui="aurora"][data-theme="light"] .g-main {
  box-shadow:
    var(--g-shadow),
    inset 0 1.5px 0 var(--g-spec),
    inset 0 -1px 0 rgba(16,20,34,.07),
    inset 0 0 0 1px var(--g-line);
}

/* ULTIMAX 의 무지개 테두리는 끕니다. AURORA 는 빛이 바탕에 있지 테두리에 없어요. */
:root[data-ui="aurora"] .glass::before,
:root[data-ui="aurora"] .lg::before,
:root[data-ui="aurora"] .panel::before { opacity: 0; }

/* ------------------------------------------------------ 시선이 닿는 빛 */
/* visionOS 는 보고 있는 곳이 밝아집니다. 마우스에서는 커서가 그 역할을
   합니다 — aurora.js 가 --mx/--my 에 커서 위치를 넣어줍니다.

   전보다 넓고(240 → 420px) 옅게(42 → 30%) 잡았습니다. 좁고 진하면
   손전등을 비추는 것처럼 보이는데, visionOS 의 하이라이트는 어디가
   밝아졌는지 딱 짚기 어려울 만큼 부드럽습니다. */

/* 화면에 고정되는 것들은 건드리지 않습니다.
   예전에는 `.lg` 를 통째로 relative 로 바꿨는데, 모바일 메뉴(#sheet)가
   `class="sheet lg"` 라서 함께 걸렸습니다. 특이도가 (0,3,0) 이라
   `.sheet{position:fixed}` (0,1,0) 를 이겨버려, 시트가 fixed 를 잃고
   문서 흐름으로 떨어졌어요. 화면에 안 보이는데도 278px 를 차지해서
   랜딩의 이벤트 배너를 그만큼 아래로 밀어냈습니다. */
:root[data-ui="aurora"] .glass:not(.sheet):not(.toast):not(.scrim),
:root[data-ui="aurora"] .lg:not(.sheet):not(.toast):not(.scrim),
:root[data-ui="aurora"] .panel:not(.sheet):not(.toast):not(.scrim) {
  position: relative;
}
:root[data-ui="aurora"] .glass::after,
:root[data-ui="aurora"] .lg::after,
:root[data-ui="aurora"] .panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--g-spec) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s var(--swift);
}
:root[data-ui="aurora"] .glass:hover::after,
:root[data-ui="aurora"] .lg:hover::after,
:root[data-ui="aurora"] .panel:hover::after { opacity: 1; }

/* 작은 컨트롤은 한 점이 아니라 면 전체가 떠오릅니다.
   버튼만 한 크기에 스포트라이트를 비추면 얼룩처럼 보이거든요.
   덧겹의 opacity 만 전환합니다 — 배경색을 직접 건드리지 않아서, 어떤
   테마에서도 같은 세기로 떠오릅니다. */
:root[data-ui="aurora"] .g-btn,
:root[data-ui="aurora"] .pill,
:root[data-ui="aurora"] .cv-chip,
:root[data-ui="aurora"] .pgs-card,
:root[data-ui="aurora"] .pgs-q,
:root[data-ui="aurora"] .pgs-stat,
:root[data-ui="aurora"] .pgs-mod,
:root[data-ui="aurora"] .g-navitem,
:root[data-ui="aurora"] .nav-item { position: relative; isolation: isolate; }

:root[data-ui="aurora"] .g-btn::after,
:root[data-ui="aurora"] .pill::after,
:root[data-ui="aurora"] .cv-chip::after,
:root[data-ui="aurora"] .pgs-card::after,
:root[data-ui="aurora"] .pgs-q::after,
:root[data-ui="aurora"] .pgs-stat::after,
:root[data-ui="aurora"] .pgs-mod::after,
:root[data-ui="aurora"] .g-navitem::after,
:root[data-ui="aurora"] .nav-item::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--g-spec) 22%, transparent),
    color-mix(in srgb, var(--g-spec) 6%, transparent));
  opacity: 0; transition: opacity .28s var(--swift);
}
:root[data-ui="aurora"] .g-btn:hover::after,
:root[data-ui="aurora"] .pill:hover::after,
:root[data-ui="aurora"] .cv-chip:hover::after,
:root[data-ui="aurora"] .pgs-card:hover::after,
:root[data-ui="aurora"] .pgs-q:hover::after,
:root[data-ui="aurora"] .pgs-stat:hover::after,
:root[data-ui="aurora"] .pgs-mod:hover::after,
:root[data-ui="aurora"] .g-navitem:hover::after,
:root[data-ui="aurora"] .nav-item:hover::after { opacity: 1; }

/* ---------------------------------------------------- 첫 화면의 독 */
/* 랜딩의 독은 화면 위에 붙어 있습니다(index.css 의 .dockwrap{top:...}).
   AURORA 에서는 마이페이지도 리더 콘솔도 독이 아래에 있어서, 첫 화면만
   위에 있으면 페이지를 옮길 때마다 눈이 위아래로 튑니다. 아래로 내립니다. */
:root[data-ui="aurora"] .dockwrap {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
}
/* 내려온 독이 마지막 내용을 덮지 않도록 아래를 비웁니다 */
:root[data-ui="aurora"] body:has(.dockwrap) { padding-bottom: 92px; }

/* 지원 버튼이 독 안으로 들어왔으니, 따로 떠 있던 버튼은 숨깁니다.
   둘 다 두면 아래쪽에 알약이 두 개 나란히 떠서 어느 쪽이 메뉴인지
   한눈에 안 들어옵니다. (aurora.js 가 body 에 표를 붙입니다) */
:root[data-ui="aurora"] body.aur-landing-dock .pgs-fab { display: none; }
:root[data-ui="aurora"] .aur-dock-support {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand);
  background: var(--g-tint-2);
  box-shadow: inset 0 1px 0 var(--g-spec-soft), inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .aur-dock-support:hover { background: var(--g-tint); }
:root[data-ui="aurora"] .aur-dock-support svg { flex: none; }
/* 아주 좁은 화면에서는 글자를 접고 아이콘만 남깁니다 */
@media (max-width: 560px) {
  :root[data-ui="aurora"] .aur-dock-support span { display: none; }
  :root[data-ui="aurora"] .aur-dock-support { padding-left: 12px; padding-right: 12px; }
}
/* :has() 를 못 쓰는 브라우저를 위한 대비 — 독 자체가 자리를 만듭니다 */
@supports not selector(:has(*)) {
  :root[data-ui="aurora"] .dockwrap { position: fixed; }
}

/* ---------------------------------------------------- AI 채팅 화면 */
/* 지원 창은 visionOS 쪽으로 다시 짰는데, 정작 사람들이 제일 오래 머무는
   AI 채팅은 ULTIMAX 모양 그대로였습니다. 같은 앱 안에서 창 하나만 다른
   말을 하고 있었어요. 여기서 맞춥니다.

   규칙은 지원 창과 같습니다.
     · 경계선으로 가르지 않고 면과 여백으로 나눕니다
     · '지금 여기' 는 색이 아니라 밝기로 표시합니다
     · 곡률은 크게, 반응은 깊이로 */

/* 대화 목록 — 한 겹 안쪽으로 들어간 판 */
:root[data-ui="aurora"] .sessions {
  border-radius: var(--r-lg);
  background: var(--g-tint-2);
  box-shadow:
    inset 0 1px 0 var(--g-spec-soft),
    inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .newchat {
  border-radius: 999px;
  box-shadow: var(--g-shadow-sm), inset 0 1px 0 var(--g-spec);
}
:root[data-ui="aurora"] .search {
  border-radius: 999px; border: 0;
  background: var(--g-tint-2);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .search:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iris) 55%, transparent),
              0 0 0 3.5px color-mix(in srgb, var(--iris) 14%, transparent);
}
:root[data-ui="aurora"] .chip {
  border: 0; border-radius: 999px;
  background: var(--g-tint-2);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
/* 고른 태그와 지금 보는 대화 — 보라로 칠하지 않고 밝은 면으로 세웁니다 */
:root[data-ui="aurora"] .chips .chip[aria-pressed="true"],
:root[data-ui="aurora"] .sessions .slist .sitem[aria-current="true"] {
  background: color-mix(in srgb, var(--g-spec) 20%, transparent);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--g-spec) 55%, transparent),
    inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .sitem { border-radius: var(--r-sm); }

/* 머리글 — 선 대신 여백 */
:root[data-ui="aurora"] .chat-head { border-bottom: 0; }
:root[data-ui="aurora"] .ghost-btn {
  border: 0; border-radius: 999px;
  background: var(--g-tint-2);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .ghost-btn:hover { background: var(--g-tint); }

/* 말풍선 — 곡률을 키우고, AI 쪽은 유리로.
   내 말풍선은 색을 그대로 둡니다. 흰 글자를 얹는 고정 면이라
   라이트에서도 같은 보라여야 대비가 지켜집니다. */
:root[data-ui="aurora"] .msg { border-radius: var(--r-lg); }
:root[data-ui="aurora"] .msg.user { border-bottom-right-radius: 9px; }
:root[data-ui="aurora"] .msg.ai {
  border-bottom-left-radius: 9px; border: 0;
  background: var(--g-tint-2);
  box-shadow: inset 0 1px 0 var(--g-spec-soft), inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .msg pre {
  border: 0; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--g-line);
}

/* 입력칸 — 캡슐 하나 */
:root[data-ui="aurora"] .inputrow {
  border: 0; border-radius: 999px; padding: 8px 8px 8px 10px;
  background: var(--g-tint-2);
  box-shadow:
    inset 0 1px 0 var(--g-spec-soft),
    inset 0 0 0 1px var(--g-line),
    0 16px 34px -24px rgba(0,0,0,.7);
}
:root[data-ui="aurora"] .inputrow:focus-within {
  box-shadow:
    inset 0 1px 0 var(--g-spec),
    inset 0 0 0 1px color-mix(in srgb, var(--iris) 52%, transparent),
    0 0 0 4px color-mix(in srgb, var(--iris) 13%, transparent);
}
/* 여러 줄로 늘어나면 캡슐이 우스워집니다. 그때는 곡률을 줄입니다. */
:root[data-ui="aurora"] .inputrow:has(textarea:not(:placeholder-shown)) { border-radius: var(--r-lg); }
:root[data-ui="aurora"] .round { border-radius: 999px; }
:root[data-ui="aurora"] .round:not(.send):not(.stop) {
  background: var(--g-tint);
  box-shadow: inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .starters button {
  border: 0; border-radius: 999px;
  background: var(--g-tint-2);
  box-shadow: inset 0 0 0 1px var(--g-line);
}

/* 지원 창의 상담 화면은 support.js 안의 AURORA 블록에서 함께 다룹니다.
   위젯 규칙이 그쪽에 모여 있고, support.js 의 <style> 이 head 맨 끝에
   붙어서 여기와 특이도가 같으면 그쪽이 이기거든요. 두 곳에 나눠 적으면
   나중에 한쪽만 고치게 됩니다. */

/* ------------------------------------------------------------- 물결 */
/* 누르면 그 자리에서 파문이 번집니다. aurora.js 가 좌표를 심어줍니다. */

.aur-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--iris) 34%, transparent), transparent 68%);
  animation: aurRipple .62s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes aurRipple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------- 부품 손질 */

/* 컨트롤은 캡슐입니다. visionOS 의 버튼·입력칸·칩에는 모서리가 없어요.
   판(창)은 둥근 사각형, 그 위에 놓이는 컨트롤은 알약 — 이 대비가
   '무엇을 누를 수 있는가' 를 형태만으로 알려줍니다. */
:root[data-ui="aurora"] .g-btn,
:root[data-ui="aurora"] .pill,
:root[data-ui="aurora"] .cv-chip,
:root[data-ui="aurora"] .cv-in,
:root[data-ui="aurora"] .cv-send,
:root[data-ui="aurora"] .pgs-btn,
:root[data-ui="aurora"] .pgs-send,
:root[data-ui="aurora"] .pgs-clip { border-radius: 999px; }

/* 지원 창 입력칸만 예외 — 여러 줄로 자라는 textarea 라서, 캡슐로 두면
   길어질수록 커다란 타원이 됩니다. 큰 곡률까지만 주고 멈춥니다. */
:root[data-ui="aurora"] .pgs-panel .pgs-in { border-radius: 22px; }

/* 선택된 항목 — Win11 의 왼쪽 선 한 줄 대신, 채워진 면으로.
   visionOS 는 '지금 여기' 를 선이 아니라 면으로 표시합니다. */
:root[data-ui="aurora"] .g-navitem[aria-current="page"],
:root[data-ui="aurora"] .nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--g-spec) 20%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--g-spec) 55%, transparent),
    inset 0 0 0 1px var(--g-line);
}
/* 알약은 줄지어 선 목록일 때 이야기입니다. 마이페이지의 메뉴는 이제
   격자에 깔린 칸이라, 곡률은 그 칸이 정하게 둡니다. */
:root[data-ui="aurora"] .g-navitem[aria-current="page"] { border-radius: 999px; }

/* 마이페이지 — 메뉴 칸과 본문 칸도 같은 결로 */
:root[data-ui="aurora"] .nav-item,
:root[data-ui="aurora"] .card {
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--g-spec-soft), inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .nav-item:hover,
:root[data-ui="aurora"] .card:hover {
  box-shadow:
    0 26px 42px -24px rgba(0,0,0,.5),
    inset 0 1px 0 var(--g-spec),
    inset 0 0 0 1px var(--g-line);
}
:root[data-ui="aurora"] .nav-item:not(.nav-lead) svg {
  background: color-mix(in srgb, var(--g-spec) 16%, transparent);
}

/* 누르는 느낌 — 살짝 들어갔다 부드럽게 올라옵니다.
   Win11 처럼 딱 눌러앉지 않고, 감쇠 곡선으로 되돌아옵니다. */
:root[data-ui="aurora"] .g-btn:active,
:root[data-ui="aurora"] .pill:active,
:root[data-ui="aurora"] .cv-chip:active,
:root[data-ui="aurora"] .pgs-card:active { transform: scale(.97); }

/* 대화 말풍선 — 각을 세우지 않고 더 둥글게. 꼬리도 뭉툭하게 남깁니다. */
:root[data-ui="aurora"] .cv-b { border-radius: 22px; }
:root[data-ui="aurora"] .cv-b.them { border-bottom-left-radius: 8px; }
:root[data-ui="aurora"] .cv-b.me { border-bottom-right-radius: 8px; }
:root[data-ui="aurora"] .pgs-msg { border-radius: 22px; }
:root[data-ui="aurora"] .pgs-msg.pgs-theirs { border-bottom-left-radius: 8px; }
:root[data-ui="aurora"] .pgs-msg.pgs-mine { border-bottom-right-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  :root[data-ui="aurora"] .aura::before,
  :root[data-ui="aurora"] .env::before { animation: none; }
  .aur-ripple { display: none; }
}

/* =====================================================================
   AURORA 독 바
   ---------------------------------------------------------------------
   사이드바 대신 화면 아래에 독을 둡니다. index 의 도크에서 가져온 결입니다.
     · 누르면 그 칸이 잠깐 눌러앉았다 떠오릅니다 (축소 → 복귀)
     · 지금 보고 있는 화면은 알약이 뒤에서 미끄러져 따라옵니다
     · 지원 위젯도 독 안에 들어옵니다 — 흩어져 있던 버튼을 한 곳에
   PC 에서는 더 넓게, 글자까지 함께 보여줍니다.
   ===================================================================== */

:root[data-ui="aurora"] .aur-dock {
  position: fixed; z-index: 140;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px;
  max-width: calc(100vw - 24px);
  /* 독도 같은 유리입니다 — 불투명한 바탕색(--bg)을 깔지 않고,
     흰 서리와 흐림으로만 만듭니다. 그래야 뒤가 비쳐 '떠 있는' 것으로
     보입니다. 예전에는 --bg 를 82% 로 깔아서 판때기처럼 보였어요. */
  background: linear-gradient(180deg, var(--g-tint-hi), var(--g-tint) 55%, var(--g-tint-2));
  backdrop-filter: blur(40px) saturate(124%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(124%) brightness(1.08);
  box-shadow:
    var(--g-shadow),
    inset 0 1.5px 0 var(--g-spec),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 0 0 0 1px var(--g-line);
  overflow-x: auto;
  scrollbar-width: none;
}
:root[data-ui="aurora"] .aur-dock::-webkit-scrollbar { display: none; }

/* 뒤에서 미끄러지는 알약 — 지금 보고 있는 칸을 따라갑니다.
   보라 틴트를 뺐습니다. visionOS 의 선택 표시는 색이 아니라 밝기입니다. */
:root[data-ui="aurora"] .aur-lens {
  position: absolute; z-index: 0; top: 6px; bottom: 6px;
  border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--g-spec) 22%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--g-spec) 55%, transparent),
    inset 0 0 0 1px var(--g-line);
  transition: left .42s var(--spring), width .42s var(--spring), opacity .3s;
  opacity: 0;
}
:root[data-ui="aurora"] .aur-lens.on { opacity: 1; }

:root[data-ui="aurora"] .aur-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 13px; flex: none;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 650;
  white-space: nowrap; cursor: pointer;
  transition: color .26s var(--swift), transform .34s var(--spring);
}
:root[data-ui="aurora"] .aur-item svg { width: 19px; height: 19px; flex: none; stroke-width: 1.9; }
:root[data-ui="aurora"] .aur-item .aur-label { display: none; }
:root[data-ui="aurora"] .aur-item:hover { color: var(--ink); }
:root[data-ui="aurora"] .aur-item[aria-current="true"] { color: var(--ink); }

/* 누르면 잠깐 들어갔다 부드럽게 올라옵니다.
   .88 / .84 는 Win11 의 '딱 눌러앉는' 크기였습니다. visionOS 의 손가락
   탭은 그렇게 깊이 들어가지 않아요 — 살짝 물러났다 돌아오는 정도입니다. */
:root[data-ui="aurora"] .aur-item:active { transform: scale(.94); }
:root[data-ui="aurora"] .aur-item.aur-tap { animation: aurTap .5s var(--spring); }
@keyframes aurTap {
  0%   { transform: scale(1); }
  30%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* 지원 위젯 칸은 조금 다르게 — 브랜드 색을 띱니다 */
:root[data-ui="aurora"] .aur-item.aur-support { color: var(--brand); }

/* ---- 계정 팝오버 ----
   사이드바 맨 아래(프로필·테마 전환·로그아웃)를 통째로 빌려와 담습니다.
   독을 켜면 사이드바가 숨는데, 그 안에 로그아웃과 ULTIMAX 로 되돌리는
   버튼이 들어 있어서 켠 순간 둘 다 닿을 수 없게 됐었습니다.
   자리는 aurora.js 가 계정 칸 위로 잡아줍니다. */
:root[data-ui="aurora"] .aur-acct {
  position: fixed; z-index: 141; left: 0; bottom: 0;
  width: min(268px, calc(100vw - 20px));
  padding: 10px; border-radius: 24px;
  background: linear-gradient(180deg, var(--g-tint-hi), var(--g-tint) 55%, var(--g-tint-2));
  backdrop-filter: blur(40px) saturate(124%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(124%) brightness(1.08);
  box-shadow:
    var(--g-shadow),
    inset 0 1.5px 0 var(--g-spec),
    inset 0 0 0 1px var(--g-line);
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.97); transform-origin: 50% 100%;
  transition: opacity .28s var(--swift), transform .42s var(--spring);
}
:root[data-ui="aurora"] .aur-acct.on { opacity: 1; pointer-events: auto; transform: none; }
/* 빌려온 조각은 사이드바 안에서 쓰던 여백을 그대로 들고 옵니다. 다시 잡아줍니다. */
:root[data-ui="aurora"] .aur-acct .rail-foot { margin: 0; padding: 0; }

/* PC — 글자까지 함께, 여유 있게 */
@media (min-width: 900px) {
  :root[data-ui="aurora"] .aur-dock { gap: 5px; padding: 7px; bottom: 20px; }
  :root[data-ui="aurora"] .aur-item { min-height: 46px; padding: 0 16px; font-size: 13px; }
  :root[data-ui="aurora"] .aur-item .aur-label { display: inline; }
}

/* 독을 쓰는 동안에는 원래 사이드바와 떠 있는 버튼을 숨깁니다 */
:root[data-ui="aurora"] body.aur-docked .g-rail,
:root[data-ui="aurora"] body.aur-docked .rail { display: none !important; }
:root[data-ui="aurora"] body.aur-docked .g-shell,
:root[data-ui="aurora"] body.aur-docked .shell { gap: 0; padding-left: 0; padding-right: 0; }
:root[data-ui="aurora"] body.aur-docked .g-main,
:root[data-ui="aurora"] body.aur-docked .main { border-radius: 0; }
/* 독이 가리지 않도록 본문 아래를 비워둡니다.
   채팅 화면에는 .scroller 가 없습니다 — 메시지는 .msgs 가, 입력칸은
   .composer 가 따로 맡거든요. 그래서 이 규칙에 걸리지 않아 독이 입력칸을
   그대로 덮고 있었습니다. 입력칸 아래에도 같은 자리를 비웁니다. */
:root[data-ui="aurora"] body.aur-docked .ldr-scroll,
:root[data-ui="aurora"] body.aur-docked .scroller {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
}
:root[data-ui="aurora"] body.aur-docked .composer {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
}
/* 독이 숨어 있는 동안에는 그 자리를 돌려줍니다 */
:root[data-ui="aurora"] body.aur-docked.aur-dock-hidden .ldr-scroll,
:root[data-ui="aurora"] body.aur-docked.aur-dock-hidden .scroller,
:root[data-ui="aurora"] body.aur-docked.aur-dock-hidden .composer {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

/* ---- 독 자동 숨김 ----
   Windows 작업표시줄처럼, 평소에는 내려가 있다가 화면 아래 가장자리에
   포인터가 닿으면 올라옵니다. 손가락 기기에서는 가장자리에 '닿는다' 는
   게 없어서, 아래에서 위로 쓸어올리면 올라오게 aurora.js 가 잡아줍니다. */
:root[data-ui="aurora"] .aur-dock {
  transition:
    transform .42s var(--spring),
    opacity .3s var(--swift);
}
:root[data-ui="aurora"] body.aur-dock-hidden .aur-dock {
  transform: translateX(-50%) translateY(calc(100% + 22px));
  opacity: 0;
  pointer-events: none;
}
/* 숨어 있을 때 아래 가장자리에 얇은 손잡이를 남깁니다 — 어디를 건드려야
   올라오는지 모르면 사라진 것과 같습니다. */
:root[data-ui="aurora"] .aur-dock-edge {
  position: fixed; z-index: 139; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 148px; height: 16px;
  display: none; cursor: pointer; border: 0; padding: 0;
  background: none;
}
:root[data-ui="aurora"] body.aur-dock-hidden .aur-dock-edge { display: block; }
:root[data-ui="aurora"] .aur-dock-edge::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  transform: translateX(-50%);
  width: 92px; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--g-spec) 42%, transparent);
  transition: width .3s var(--swift), background-color .3s var(--swift);
}
:root[data-ui="aurora"] .aur-dock-edge:hover::after {
  width: 124px; background: color-mix(in srgb, var(--g-spec) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-ui="aurora"] .aur-dock { transition-duration: .01ms; }
}
:root[data-ui="aurora"] body.aur-docked .pgs-fab,
:root[data-ui="aurora"] body.aur-docked .ldr-top .ldr-menu,
:root[data-ui="aurora"] body.aur-docked .topbar .icon-btn { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root[data-ui="aurora"] .aur-lens,
  :root[data-ui="aurora"] .aur-item { transition-duration: .01ms; }
  :root[data-ui="aurora"] .aur-item.aur-tap { animation: none; }
}