/* ShortsUGC 메탈 글라스(2026-11-14 대표 결정: 모든 사이트를 뷰휠과 같은 「메탈 글라스」 가족으로,
   단 사이트마다 강조색 하나는 남기고, 이번엔 겉모습만).
   이 사이트는 검은 바탕이라 avvm(avvm-glass.css)과 같은 「연기 유리」를 쓴다. 강조색 라임(#d8f233)은 그대로.
   유리 하나 = ① 비치는 몸체(위가 밝은 옅은 흰빛) ② 은빛 금속 테(위·왼쪽 흰빛, 아래·오른쪽 은회색) ③ 아래 가장자리 흰 빛줄기
   ④ 오른쪽 아래로 떨어지는 중립 회색 그림자 ⑤ 오른쪽 아래 모서리 흰 반사. 색 번짐·무지갯빛·글로우 없음(라임 버튼의 라임 번짐 그림자도 뺀다).
   가운데 밝은 띠(광고 형식 .formats)만 바탕이 밝아서 그 칸의 단추는 뷰휠의 맑은 유리를 쓴다.
   바꾸는 것은 바탕·테 색·그림자·글 그림자뿐. 테 두께·여백·글 크기·크기·위치·글·구조·동작은 그대로.
   공용 사본(price-ladder.css·howto.css·dprocess.css)과 본문 안 <style>(LIVE 띠)은 손대지 않고 여기서 덮는다.
   index.html </head> 앞의 이 파일 link 한 줄을 빼면 옛 모습. */
:root{
  /* 어두운 바탕 위 연기 유리 */
  --sg-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%);
  --sg-sheen:radial-gradient(42% 62% at 100% 100%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);
  --sg-rim:rgba(255,255,255,.34) rgba(150,152,156,.22) rgba(120,122,126,.26) rgba(220,222,226,.28);
  --sg-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);
  --sg-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);
  /* 라임 주 단추 = 색은 그대로, 위에 유리 빛과 은빛 테 두 겹만 얹는다 */
  --sg-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%);
  --sg-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);
  /* 밝은 띠 위 맑은 유리(뷰휠 값) */
  --sg-l-fill:linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.07) 40%,rgba(232,233,235,.04) 68%,rgba(255,255,255,.38) 100%);
  --sg-l-iris:radial-gradient(40% 60% at 100% 100%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%);
  --sg-l-rim:#fff rgba(150,152,156,.95) rgba(120,122,126,.92) rgba(214,215,218,.98);
  --sg-l-btn-shadow:inset 0 1px 0 #fff,inset 0 -2.5px 0 #fff,inset 0 -10px 12px -8px rgba(255,255,255,.95),0 0 0 .6px rgba(84,86,90,.55),11px 16px 26px -10px rgba(36,36,38,.36),3px 4px 8px -4px rgba(36,36,38,.2)}

/* ── 큰 유리판: 상세 제작 카드·가격 흐름·LIVE 두 띠·접수 양식·요금 카드 ── */
.dp-card,.dp-hero,.pl .pl-flow,.lfx .lfx-in,.lbx .lbx-in,.plan-card{
  border-color:var(--sg-rim);background:var(--sg-sheen),var(--sg-body);box-shadow:var(--sg-shadow)}
.plan-card{background:var(--sg-sheen),var(--sg-body),#0b0e0b}
.intake-form{border-color:var(--sg-rim);background:var(--sg-sheen),var(--sg-body),rgba(21,25,21,.9);box-shadow:var(--sg-shadow)}
/* 라임이 깔린 판(추천 요금·접수 안내·접수 결과) — 라임 테·라임 바탕은 그대로, 유리 빛과 그림자만 */
.plan-card--featured{border-color:rgba(216,242,51,.72);background:var(--sg-sheen),linear-gradient(150deg,rgba(216,242,51,.12),#111511 46%);box-shadow:var(--sg-shadow)}
.intake-aside{background:var(--sg-sheen),linear-gradient(155deg,rgba(216,242,51,.12),rgba(216,242,51,.025) 45%,rgba(255,255,255,.02));box-shadow:var(--sg-shadow)}
.intake-result{background:var(--sg-sheen),linear-gradient(110deg,rgba(216,242,51,.16),rgba(216,242,51,.04));box-shadow:var(--sg-shadow)}
/* 사례 카드 셋 — 영상 카드는 영상이 꽉 차므로 테·그림자만 */
.case-card{border-color:var(--sg-rim);box-shadow:var(--sg-shadow)}
.case-card--compare{background:var(--sg-sheen),var(--sg-body),radial-gradient(circle at 90% 10%,rgba(216,242,51,.17),transparent 35%),#1b1d19}
/* 밝은 대본 카드 = 맑은 유리 */
.case-card--script{border-color:var(--sg-l-rim);background:var(--sg-l-iris),linear-gradient(165deg,rgba(255,255,255,.54) 0%,rgba(255,255,255,.2) 38%,rgba(240,240,241,.13) 70%,rgba(255,255,255,.44) 100%),#e6e7de;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2.5px 0 #fff,inset 0 -18px 22px -18px #fff,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)}
/* 밝은 띠 안의 어두운 형식 판 — 그림자는 밝은 바탕에 맞게 중립 회색 */
.format-stage{background:var(--sg-sheen),var(--sg-body),#121510;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1.5px 0 rgba(255,255,255,.2),inset 0 -16px 20px -18px rgba(255,255,255,.22),0 0 0 .6px rgba(60,62,66,.55),22px 32px 54px -24px rgba(36,36,38,.36),5px 8px 16px -8px rgba(36,36,38,.18)}
/* 따라 하기 — 지금 단계(와 손 올린 단계)만 유리판 */
.ht-step[aria-current="step"],.ht-step:hover{background:var(--sg-sheen),var(--sg-body);box-shadow:var(--sg-btn-shadow)}
/* 상세 제작 사진 칸 — 바탕(투명 그림 체크무늬)은 두고 테·그림자만 */
.dp-zoom{border-color:var(--sg-rim);box-shadow:var(--sg-btn-shadow)}

/* ── 작은 유리 단추: 보조 단추·요금 단추·언어·화살표·자동 넘김·선택 칸 ── */
.button--ghost,.button--plan:not(.button--lime),.dp-nav,.pl .pl-auto,.ht-play,.choice-card,.choice-group--format label{
  border-color:var(--sg-rim);background:var(--sg-sheen),var(--sg-body);box-shadow:var(--sg-btn-shadow)}
#ugcLang{border-color:var(--sg-rim);background-image:var(--sg-sheen),var(--sg-body),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23d8f233'/%3E%3C/svg%3E");box-shadow:var(--sg-btn-shadow)}
/* 손 올림·고른 칸은 원래대로 라임 테(색 강조는 그대로) */
.button--ghost:hover,.dp-nav:hover{border-color:rgba(216,242,51,.72)}
.choice-card:has(input:checked),.choice-group--format label:has(input:checked){border-color:var(--lime);background:var(--sg-sheen),linear-gradient(rgba(216,242,51,.08),rgba(216,242,51,.08)),var(--sg-body)}

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

/* ── 밝은 띠(광고 형식) 단추: 맑은 유리 / 고른 단추는 검정·라임 글자 그대로 + 유리 빛 ── */
.format-tab{border-color:var(--sg-l-rim);background:var(--sg-l-iris),var(--sg-l-fill);box-shadow:var(--sg-l-btn-shadow);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.format-tab.is-active{border-color:#10120f;background:var(--sg-sheen),linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,0) 64%,rgba(255,255,255,.12) 100%),#10120f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1.5px 0 rgba(255,255,255,.3),inset 0 -10px 12px -10px rgba(255,255,255,.3),0 0 0 .8px rgba(60,62,66,.7),0 0 0 2px rgba(255,255,255,.9),11px 16px 26px -10px rgba(36,36,38,.42);text-shadow:none}