/* AVVM 메탈 글라스(2026-11-14 대표 「내 모든 홈페이지를 메탈 글라스 UI, UX 로 업그레이드」 → 「ㅇㅋ」= 추천대로:
   유리 질감은 뷰휠과 같은 가족, 사이트 강조색 하나(avvm 라임)는 남기고, 이번엔 겉모습만).
   뷰휠(beauwheel/metal-glass.css)은 밝은 바탕의 맑은 유리, avvm 은 검은 바탕이라 「연기 유리」로 옮긴다.
   유리 하나 = ① 비치는 몸체(위가 밝은 옅은 흰빛) ② 은빛 금속 테(위·왼쪽 흰빛, 아래·오른쪽 은회색) ③ 아래 가장자리 흰 빛줄기
   ④ 오른쪽 아래로 떨어지는 그림자 ⑤ 오른쪽 아래 모서리 흰 반사. 색 번짐·무지갯빛·글로우 없음.
   겉모습만 바꾼다: 테 두께·여백·글 크기·위치는 그대로(높이가 바뀌지 않게 색·그림자·바탕만). 이 파일 link 한 줄을 빼면 옛 모습. */
:root{
  --ag-body:linear-gradient(162deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 42%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.07) 100%);
  --ag-sheen:radial-gradient(42% 62% at 100% 100%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);
  --ag-rim:rgba(255,255,255,.34) rgba(150,152,156,.22) rgba(120,122,126,.26) rgba(220,222,226,.28);
  --ag-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1.5px 0 rgba(255,255,255,.20),inset 0 -16px 20px -18px rgba(255,255,255,.22),0 0 0 .6px rgba(0,0,0,.6),16px 26px 46px -22px rgba(0,0,0,.92),4px 6px 12px -6px rgba(0,0,0,.6);
  --ag-btn-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1.5px 0 rgba(255,255,255,.26),inset 0 -10px 12px -10px rgba(255,255,255,.3),0 0 0 .6px rgba(0,0,0,.6),8px 12px 22px -10px rgba(0,0,0,.85);
  /* 라임 단추 = 색은 그대로, 위에 유리 빛과 은빛 테만 얹는다 */
  --ag-lime-glass:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(0,0,0,.05) 62%,rgba(255,255,255,.32) 100%);
  --ag-lime-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(255,255,255,.55),inset 0 -10px 12px -9px rgba(255,255,255,.6),0 0 0 .8px rgba(60,62,66,.7),0 0 0 2px rgba(255,255,255,.55),10px 14px 24px -10px rgba(0,0,0,.85);
}

/* ── 큰 유리판: 상세페이지 제작 카드·가격 흐름·따라 하기 단계·LIVE 두 판 ── */
.dp-card,.dp-hero,.pl-flow,.ht-step,.lbx-main .lbx-in,.lfx-in{
  background:var(--ag-sheen),var(--ag-body)!important;
  border-color:var(--ag-rim)!important;
  box-shadow:var(--ag-shadow)!important}
.dp-zoom{background:var(--ag-sheen),var(--ag-body)!important;border-color:var(--ag-rim)!important;box-shadow:var(--ag-btn-shadow)!important}

/* ── 작은 유리 단추: 언어·START·회전판 단추·화살표·자동 넘김·문의 ── */
.native-lang-box,.hero-menu-dot,.orb-video,.orb-auto,.orb-tabs>button,.orb-arrow,.dp-nav,.pl-auto,.ht-play,.btn.sweepCta,.avvm-family__contact{
  background:var(--ag-sheen),var(--ag-body),rgba(8,8,8,.55)!important;
  border-color:var(--ag-rim)!important;
  box-shadow:var(--ag-btn-shadow)!important}
/* 위에 떠 있는 단추(언어·START)는 뒤가 비치는 뿌연 유리 — 사진·영상 위라서 흐림을 쓴다(얼굴 위 아님) */
.native-lang-box,.hero-menu-dot{-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}

/* ── 라임 주 단추: 색은 그대로 + 유리 빛 + 테 두 겹 ── */
.dp-pick,.dp-go,.ht-go,.orb-enter{
  background-image:var(--ag-lime-glass)!important;
  box-shadow:var(--ag-lime-shadow)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
/* 흰 주 단추(가격 계단)도 같은 금속 */
.pl-cta{background-image:linear-gradient(180deg,#ffffff,#eff0f1 46%,#cdcfd2 54%,#e3e4e6)!important;box-shadow:var(--ag-lime-shadow)!important}

/* 누르는 느낌: 빛줄기가 조금 눌린다 */
:is(.dp-pick,.dp-go,.ht-go,.orb-enter,.pl-cta,.native-lang-box,.hero-menu-dot,.orb-video,.orb-auto,.orb-tabs>button,.orb-arrow,.dp-nav,.pl-auto,.btn.sweepCta,.avvm-family__contact):active{transform:translateY(1px);filter:brightness(.96)}
@media (prefers-reduced-motion:reduce){:is(.dp-pick,.dp-go,.ht-go,.orb-enter,.pl-cta):active{transform:none}}