/* ============================================================
   유리(프로스티드) 재질 레이어 — 크롬 표면 한정
   ------------------------------------------------------------
   범위를 크롬(상단바·레일·독·팝오버·모달·토스트·저장바)으로 제한한 이유:
     ① 콘텐츠 카드까지 유리로 깔면 특히 라이트 모드에서 본문 대비가 무너진다.
     ② backdrop-filter는 GPU 비용이 커서 긴 설정 화면 스크롤에서 프레임이 떨어진다.
   Apple Liquid Glass의 정반사·굴절 엣지는 그쪽 시그니처라 쓰지 않는다.
   범용 프로스티드 + 1px 상단 엣지 하이라이트까지만 — 재질은 차용, 시그니처는 회피.

   되돌리기: index.html에서 이 파일 <link> 한 줄만 지우면 완전히 원복된다.
   (기존 규칙을 수정하지 않고 이 파일에서만 덮어쓰도록 작성했다.)
   ============================================================ */

/* 토큰 — style.css의 라이트/다크 3중 오버라이드 패턴을 그대로 따른다
   (@media 기본값 + [data-theme] 수동 토글이 항상 이기도록).
     --glass-rim  : 유리 가장자리(테두리) 색 — 이 재질의 정체성
     --glass-hi   : 윗면에 맺히는 하이라이트(빛이 닿는 쪽)
     --glass-lens : 안쪽 가장자리 그림자 — 두께감(렌즈처럼 굴절되는 느낌)
     --glass-lift : 바깥 그림자 — 콘텐츠 층 "위에 떠 있음"을 만든다 */
:root{
  --glass-blur:20px;
  --glass-sat:170%;
  --glass-bg:color-mix(in srgb, var(--surface) 68%, transparent);
  --glass-rim:rgba(255,255,255,.16);
  --glass-hi:rgba(255,255,255,.34);
  --glass-lens:rgba(255,255,255,.07);
  --glass-lift:0 10px 30px -18px rgba(0,0,0,.85);
}
@media (prefers-color-scheme:light){
  :root{
    /* 라이트는 배경이 밝아 같은 투명도로는 텍스트 대비가 죽는다 → 스크림을 훨씬 두껍게.
       대신 테두리는 어둡게 잡아야 흰 배경 위에서 가장자리가 보인다(흰 rim은 사라진다). */
    --glass-bg:color-mix(in srgb, #ffffff 82%, transparent);
    --glass-rim:rgba(20,28,55,.14);
    --glass-hi:rgba(255,255,255,.95);
    --glass-lens:rgba(20,28,55,.05);
    --glass-lift:0 10px 30px -18px rgba(70,80,140,.45);
  }
}
:root[data-theme="light"]{
  --glass-bg:color-mix(in srgb, #ffffff 82%, transparent);
  --glass-rim:rgba(20,28,55,.14);
  --glass-hi:rgba(255,255,255,.95);
  --glass-lens:rgba(20,28,55,.05);
  --glass-lift:0 10px 30px -18px rgba(70,80,140,.45);
}
:root[data-theme="dark"]{
  --glass-bg:color-mix(in srgb, var(--surface) 68%, transparent);
  --glass-rim:rgba(255,255,255,.16);
  --glass-hi:rgba(255,255,255,.34);
  --glass-lens:rgba(255,255,255,.07);
  --glass-lift:0 10px 30px -18px rgba(0,0,0,.85);
}

/* 공통 재질 — 배경 흐림 + 유리 테두리.
   테두리는 3겹으로 만든다:
     ① border            : 유리의 물리적 가장자리(rim)
     ② inset 0 1px 0 hi  : 윗면 스펙큘러 하이라이트(빛이 맺히는 선)
     ③ inset 0 0 0 1px lens : 안쪽 가장자리 — 유리 두께감
   그 위에 바깥 그림자를 얹어 콘텐츠 위에 떠 있게 한다. */
.glass, .topbar, .rail, .dock, .langmenu, .userpop, #toast, .modal-card, .gsavebar{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-rim);
}

/* ── 전면 유리(상단바·레일·독): 화면 가장자리에 붙어 있어 바깥 그림자는 불필요 ── */
.topbar, .rail, .dock{
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-lens);
}
/* 레일은 원래 blur 없이 40% 반투명이라 별 배경이 그대로 비쳐 탁했다 — blur가 오히려 가독성을 올린다.
   화면 가장자리 쪽 테두리는 지워 프레임처럼 보이지 않게 한다(붙어 있는 면은 유리 단면이 아님). */
.topbar{border-width:0 0 1px}
.rail{border-width:0 1px 0 0}
.dock{border-width:1px 0 0}

/* ── 떠 있는 유리(팝오버·모달·토스트): 바깥 그림자로 층을 띄운다 ── */
.langmenu, .userpop, #toast, .modal-card{
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-lens),
             var(--glass-lift), var(--shadow);
}
/* 저장바는 경고 링(warn)이 정체성이라 유지하고, 테두리도 경고색을 그대로 쓴다. */
.gsavebar{
  border-color:var(--warn);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-lift), var(--shadow),
             0 0 0 1px rgba(245,180,85,.25);
}
/* 모달 배경 흐림도 유리 톤에 맞춰 조금 더 (기존 3px는 카드 유리와 층 구분이 약했다) */
.modal-backdrop{backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}

/* ── 폴백 ─────────────────────────────────────────────────
   backdrop-filter 미지원 브라우저에선 반투명만 남아 배경이 그대로 비쳐 읽기 어렵다 → 불투명 처리. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass, .topbar, .rail, .dock, .langmenu, .userpop, #toast, .modal-card, .gsavebar{
    background:var(--surface);
  }
}
/* 투명도 감소를 선호하는 사용자(가독성·어지러움) → 불투명 + blur 제거. */
@media (prefers-reduced-transparency:reduce){
  .glass, .topbar, .rail, .dock, .langmenu, .userpop, #toast, .modal-card, .gsavebar{
    background:var(--surface);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .modal-backdrop{backdrop-filter:none; -webkit-backdrop-filter:none}
}