/* WEB-STUDIO 메탈 글라스(2026-11-14 대표 「내 모든 홈페이지를 메탈 글라스 UI, UX 로 업그레이드」 → 「ㅇㅋ」= 추천대로)
   무엇: 뷰휠(beauwheel/metal-glass.css)과 같은 가족의 「밝은 바탕 맑은 유리」를 web.avvm.studio 에 입힌다.
   왜: 사이트마다 따로 놀던 단추·카드 질감을 한 가족으로 맞추되, 이 사이트의 강조색 하나(라임 #c8e400)는 그대로 남긴다.
   유리 하나 = ① 비치는 몸체(위·아래가 밝은 흰빛) ② 은빛 금속 테(위·왼쪽 흰빛, 아래·오른쪽 은회색) ③ 아래 가장자리 흰 빛줄기
   ④ 오른쪽 아래로 떨어지는 중립 회색 그림자 ⑤ 오른쪽 아래 모서리 흰 반사. 글로우·무지갯빛·청록 기운 없음.
   주 단추: 라임·먹색은 색 그대로 두고, 위에 유리 빛 + 금속 테 두 겹만 얹는다(색이 아니라 테로 「주 단추」를 더 또렷하게).
   겉모습만 바꾼다: 글·구조·동작·테 두께·여백·글 크기·모서리 둥글기·위치는 그대로(바탕·테 색·그림자만).
   공용 사본(price-ladder.css·howto.css·dprocess.css 등)은 고치지 않고 여기서 덮는다.
   되돌리기: index.html </head> 앞의 이 파일 link 한 줄을 빼면 옛 모습. */
:root{
  /* 작은 유리(단추·칩) */
  --wg-fill:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.2) 42%,rgba(240,240,241,.14) 68%,rgba(255,255,255,.5) 100%);
  /* 큰 유리판 */
  --wg-panel:linear-gradient(165deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.34) 38%,rgba(246,246,246,.26) 70%,rgba(255,255,255,.56) 100%);
  /* 모서리 흰 반사 */
  --wg-iris:radial-gradient(40% 60% at 100% 100%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
  /* 금속 테: 위 · 오른쪽 · 아래 · 왼쪽 */
  --wg-rim:rgba(255,255,255,.98) rgba(150,152,156,.7) rgba(128,130,134,.72) rgba(236,236,238,.98);
  --wg-panel-shadow:inset 0 1px 0 #fff,inset 0 -2.5px 0 #fff,inset 0 -18px 22px -18px #fff,0 0 0 .6px rgba(84,86,90,.42),22px 32px 54px -26px rgba(36,36,38,.3),5px 8px 16px -8px rgba(36,36,38,.14);
  --wg-btn-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #fff,inset 0 -10px 12px -8px rgba(255,255,255,.95),0 0 0 .6px rgba(84,86,90,.5),9px 13px 22px -10px rgba(36,36,38,.32),2px 3px 7px -3px rgba(36,36,38,.18);
  /* 색 단추(라임·먹색) 위에 얹는 유리 빛 */
  --wg-acc-glass:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(0,0,0,.04) 62%,rgba(255,255,255,.3) 100%);
  --wg-ink-glass:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.13) 100%);
  /* 주 단추 = 금속 테 두 겹 + 아래 빛줄기 */
  --wg-main-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,.6),0 0 0 2px rgba(255,255,255,.95),0 0 0 2.8px rgba(120,122,126,.5),11px 16px 26px -10px rgba(36,36,38,.36),3px 4px 8px -4px rgba(36,36,38,.2);
  --wg-ink-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1.5px 0 rgba(255,255,255,.28),inset 0 -10px 12px -10px rgba(255,255,255,.3),0 0 0 .8px rgba(20,19,17,.8),0 0 0 2px rgba(255,255,255,.92),0 0 0 2.8px rgba(120,122,126,.5),11px 16px 26px -10px rgba(36,36,38,.4),3px 4px 8px -4px rgba(36,36,38,.22);
  /* 먹색 판(연기 유리) */
  --wg-dpanel:radial-gradient(42% 62% at 100% 100%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),linear-gradient(165deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.06) 100%);
  --wg-dshadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1.5px 0 rgba(255,255,255,.24),inset 0 -18px 24px -20px rgba(255,255,255,.2),0 0 0 .6px rgba(20,19,17,.6),22px 32px 54px -24px rgba(36,36,38,.42),5px 8px 16px -8px rgba(36,36,38,.22);
  --wg-drim:rgba(255,255,255,.3) rgba(255,255,255,.12) rgba(255,255,255,.2) rgba(255,255,255,.16)}

/* ── 바탕: 종이색은 그대로, 유리가 살도록 아주 옅은 빛과 그늘(1500px 마다 반복).
   타원이 한 칸(1500px) 안에서 다 사라지게 세로 크기를 px 로 잡았다 — 칸 경계에 가로 이음매가 안 생긴다 ── */
body{background:
  radial-gradient(60% 300px at 100% 360px,rgba(255,255,255,.7),rgba(255,255,255,0) 72%) 0 0/100% 1500px repeat-y,
  radial-gradient(55% 320px at 0% 800px,rgba(160,158,154,.16),rgba(160,158,154,0) 72%) 0 0/100% 1500px repeat-y,
  radial-gradient(58% 300px at 100% 1180px,rgba(255,255,255,.55),rgba(255,255,255,0) 72%) 0 0/100% 1500px repeat-y,
  var(--paper)}

/* ── 큰 유리판: 상세페이지 과정 카드·가격 흐름·따라 하기 현재 단계·가격 카드·범위 안내·결제 확인 시트 ── */
.dp-hero,.dp-card,.pl .pl-flow,.ht-step[aria-current="step"],.ht-cap,.price-card:not(.feature),.price-scope{
  background:var(--wg-iris),var(--wg-panel)!important;
  box-shadow:var(--wg-panel-shadow)!important}
.dp-hero,.dp-card:not(.is-branch),.pl .pl-flow,.price-card:not(.feature),.price-scope{border-color:var(--wg-rim)!important}
.ht-step:not([aria-current="step"]):hover{background:var(--wg-iris),var(--wg-fill)}
.pay-sheet-panel{background:var(--wg-iris),var(--wg-panel),var(--paper)!important;border-top-color:rgba(255,255,255,.98)!important;box-shadow:inset 0 1px 0 #fff,0 -.6px 0 rgba(84,86,90,.42),0 -18px 40px -24px rgba(36,36,38,.35)}
@media (min-width:861px){.pay-sheet-panel{border-color:var(--wg-rim)!important;box-shadow:var(--wg-panel-shadow)!important}}
/* 사진이 든 칸(확대 단추) — 바탕은 그대로(체크무늬 판 유지), 테와 그림자만 */
.dp-zoom{border-color:var(--wg-rim)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(84,86,90,.3),7px 10px 18px -10px rgba(36,36,38,.26)}
/* ARC SELECTOR 틀 — 무대 바탕은 그대로, 테와 그림자만 */
.arc-picker{border-color:var(--wg-rim)!important;box-shadow:var(--wg-panel-shadow)!important}

/* ── 먹색 판(브랜드 사이트 카드·플래그십·룩북 띠) = 연기 유리, 바탕 먹색 그대로 ── */
.price-card.feature,.care-strip[style*="background:var(--ink)"]{
  background:var(--wg-dpanel),var(--ink)!important;
  border-color:var(--wg-drim)!important;
  box-shadow:var(--wg-dshadow)!important}

/* ── 가격 계단 막대 — 고른 칸은 강조색 그대로 + 유리 빛, 나머지는 맑은 유리 ── */
.pl .pl-st:not(.on):not(.done) .pl-bar{background:var(--wg-iris),var(--wg-fill)!important;border-color:var(--wg-rim)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(84,86,90,.3),8px 4px 16px -10px rgba(36,36,38,.22)}
.pl .pl-st.on .pl-bar{background:var(--wg-acc-glass),linear-gradient(160deg,var(--pl-accent),var(--pl-accent2))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 .8px rgba(60,62,66,.5),10px 12px 24px -12px rgba(36,36,38,.34)!important}

/* ── 작은 유리 단추: 넘김 화살표·자동 넘김·멈추기·ARC 화살표/칸·문의 준비·닫기·언어 ── */
.dp-nav,.pl .pl-auto,.ht-play,.arc-arrow:not(:hover),.arc-node:not(.is-on),.inquiry-send:not(:hover),.pay-sheet-close,.price-note{
  background:var(--wg-iris),var(--wg-fill)!important;
  border-color:var(--wg-rim)!important;
  box-shadow:var(--wg-btn-shadow)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
.inquiry-send:not(:hover){background-color:rgba(255,255,255,.35)!important}
/* 언어 칸 — 화살표 그림이 바탕에 있어 바탕색만 바꾼다 */
#webLang{background-color:rgba(255,255,255,.55)!important;border-color:var(--wg-rim)!important;box-shadow:var(--wg-btn-shadow)}

/* ── 라임 주 단추: 색은 그대로 + 유리 빛 + 테 두 겹 ── */
.buy,.dp-go,.dp .dp-pick,.ht-go{
  background-image:var(--wg-acc-glass)!important;
  box-shadow:var(--wg-main-shadow)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.buy:disabled{box-shadow:var(--wg-btn-shadow)!important}
/* 먹색 주 단추(로고 만들기·가격 계단 문의) — 색 그대로 + 유리 빛 + 테 두 겹 */
.logo-studio-cta,.pl .pl-cta{background-image:var(--wg-ink-glass)!important;box-shadow:var(--wg-ink-shadow)!important}

/* ── 입력칸 — 살짝 눌린 유리(글 속 style 의 먹색 테를 덮는다) ── */
:is(#inqForm,.inquiry) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  border-color:rgba(150,152,156,.75) rgba(236,236,238,.98) #fff rgba(150,152,156,.75)!important;
  background-color:rgba(255,255,255,.6)!important;
  box-shadow:inset 1px 2px 4px rgba(40,40,42,.12),inset 0 -1px 0 #fff,0 0 0 .5px rgba(110,112,116,.35),0 1px 0 rgba(255,255,255,.9)!important}
:is(#inqForm,.inquiry) :is(input,select,textarea):focus{border-color:var(--ink)!important}