/* 라라랜드맘 메탈 글라스(2026-11-14 대표 「내 모든 홈페이지를 메탈 글라스 UI, UX 로 업그레이드」 → 「ㅇㅋ」= 추천대로)
   유리 질감은 뷰휠(beauwheel/metal-glass.css)과 같은 가족, 바탕이 밝은 크림이라 「밝은 맑은 유리」 쪽을 쓴다.
   사이트 강조색 하나(먹색 --ink)는 그대로 남긴다 — 검은 주 단추는 검은 채로, 위에 유리 빛과 은빛 테 두 겹만 얹는다.
   공용 위젯(상세페이지 과정·가격 계단·따라 하기·3단 가격·고르기 진열대)의 제 색(주황·남색)도 그대로, 빛과 테만.
   유리 하나 = ① 비치는 몸체(위·아래가 밝은 흰빛) ② 은빛 금속 테(위·왼쪽 흰빛, 아래·오른쪽 은회색) ③ 아래 가장자리 흰 빛줄기
   ④ 오른쪽 아래로 떨어지는 중립 회색 그림자 ⑤ 오른쪽 아래 모서리 흰 반사. 청록·민트·무지갯빛·글로우 없음.
   룩북 사이트라 모델 사진·얼굴 위에는 유리·흐림을 새로 얹지 않는다(사진 틀 .dp-zoom·.pick-media·갤러리 카드는 그대로).
   룩북의 각진 결도 그대로 — 모서리 둥글기·테 두께·여백·글 크기·위치는 건드리지 않는다(색·그림자·바탕만).
   겉모습만 바꾼다: 글·구조·동작은 그대로. 이 파일 link 한 줄을 빼면 옛 모습. */
:root{
  /* 작은 유리(단추·칩) */
  --sg-fill:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.34) 42%,rgba(238,238,236,.26) 68%,rgba(255,255,255,.7) 100%);
  /* 큰 유리판(카드·판) */
  --sg-panel:linear-gradient(165deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.46) 40%,rgba(244,244,242,.4) 72%,rgba(255,255,255,.7) 100%);
  --sg-iris:radial-gradient(40% 60% at 100% 100%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%);
  --sg-rim:#fff rgba(150,152,156,.9) rgba(120,122,126,.88) rgba(214,215,218,.98);
  --sg-panel-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #fff,inset 0 -16px 20px -18px #fff,0 0 0 .5px rgba(84,86,90,.32),18px 26px 46px -24px rgba(36,36,38,.2),4px 6px 12px -8px rgba(36,36,38,.12);
  --sg-btn-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #fff,inset 0 -10px 12px -9px rgba(255,255,255,.95),0 0 0 .5px rgba(84,86,90,.42),9px 13px 22px -11px rgba(36,36,38,.32),2px 3px 6px -3px rgba(36,36,38,.16);
  /* 색 있는 주 단추(먹색·주황·남색·올리브) = 색은 그대로 + 위 유리 빛 + 아래 빛줄기 + 은빛 테 두 겹 */
  --sg-acc-glass:linear-gradient(180deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 40%,rgba(0,0,0,.04) 62%,rgba(255,255,255,.1) 100%);
  /* 칸 안에 박힌 현재 칸(M1~M5·여성|남성) — 이웃 칸 위로 그림자가 번지지 않게 안쪽 빛만 */
  --sg-acc-inset:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1.5px 0 rgba(255,255,255,.26),inset 0 -10px 12px -10px rgba(255,255,255,.28);
  --sg-acc-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1.5px 0 rgba(255,255,255,.32),inset 0 -10px 12px -10px rgba(255,255,255,.34),0 0 0 1px rgba(255,255,255,.95),0 0 0 1.8px rgba(120,122,126,.62),11px 16px 26px -12px rgba(36,36,38,.42),3px 4px 8px -4px rgba(36,36,38,.22);
  --sg-acc-rim:rgba(110,112,116,.95) rgba(30,31,33,.95) rgba(11,11,11,.98) rgba(70,72,76,.95);
}

/* ── 먹색 주 단추(착용해보기·상세페이지 만들기·문의 보내기·현재 칸) — 색은 그대로 ── */
.lb-btn:not(.lb-btn--ghost):not(.lb-btn--line),.gender-switch a[aria-current="page"],.msw[aria-current="true"],.enter{
  background-image:var(--sg-acc-glass);box-shadow:var(--sg-acc-shadow);text-shadow:0 -1px 0 rgba(0,0,0,.35)}
.lb-btn:not(.lb-btn--ghost):not(.lb-btn--line){border-color:var(--sg-acc-rim)}
.gender-switch a[aria-current="page"],.msw[aria-current="true"]{box-shadow:var(--sg-acc-inset)}
/* 주 단추에 손이 가면 원래대로 밝아진다 — 그때도 같은 유리, 글은 먹색 */
.lb-btn:not(.lb-btn--ghost):not(.lb-btn--line):is(:hover,:focus-visible){background-image:var(--sg-iris),var(--sg-fill);text-shadow:0 1px 0 rgba(255,255,255,.7)}

/* ── 보조 단추(테두리 단추·문의·주소 보기·언어·픽 링크) — 맑은 유리 ── */
.lb-btn--ghost,.lb-btn--line,.howto-b2b a,.lb-foot-addr summary,.lang-pick,.pilot{
  border-color:var(--sg-rim);background:var(--sg-iris),var(--sg-fill);box-shadow:var(--sg-btn-shadow);text-shadow:0 1px 0 rgba(255,255,255,.7)}
/* 손이 가면 원래처럼 먹색으로 채워진다 — 먹색 위 유리 빛 */
.lb-btn--ghost:is(:hover,:focus-visible),.lb-btn--line:is(:hover,:focus-visible){
  border-color:var(--sg-acc-rim);background:var(--ink);background-image:var(--sg-acc-glass);box-shadow:var(--sg-acc-shadow);text-shadow:0 -1px 0 rgba(0,0,0,.35)}
/* 여성 | 남성 — 바깥 테는 먹색 그대로(현재 칸을 가리키는 표시), 몸체만 유리 */
.gender-switch{background:var(--sg-iris),var(--sg-fill);box-shadow:var(--sg-btn-shadow)}

/* ── 모델 전환(M1~M5) — 한 장의 유리 띠 ── */
.mswitch{border-color:var(--sg-rim);box-shadow:var(--sg-panel-shadow)}
.msw:not([aria-current="true"]){background:var(--sg-iris),var(--sg-fill)}

/* ── 도시 갤러리 아래 화살표·들어가기(올리브는 갤러리 제 색) ── */
.arrow{border-color:var(--sg-rim);background:var(--sg-iris),var(--sg-fill);box-shadow:var(--sg-btn-shadow)}

/* ── 글만 있는 판: 이유 셋·만드는 다섯 가지·이번 주 픽 카드 테 ── */
.why-grid{border-color:var(--sg-rim);background:var(--sg-iris),var(--sg-panel);box-shadow:var(--sg-panel-shadow)}
.b2b-set li{border-color:var(--sg-rim);background:var(--sg-iris),var(--sg-panel);box-shadow:var(--sg-btn-shadow)}
/* 픽 카드는 사진이 위를 채운다 — 사진은 그대로, 테·그림자·아래 글자리 바탕만 */
.pick-card{border-color:var(--sg-rim);background:var(--sg-panel);box-shadow:var(--sg-btn-shadow)}

/* ── 문의 입력칸 — 살짝 눌린 유리 ── */
.inq-form input:not([type=checkbox]),.inq-form textarea{
  border-color:rgba(200,201,204,.95) rgba(226,227,229,.95) #fff rgba(226,227,229,.95);background:rgba(255,255,255,.78);
  box-shadow:inset 1px 2px 4px rgba(40,40,42,.1),inset 0 -1px 0 #fff,0 0 0 .5px rgba(110,112,116,.32),0 1px 0 rgba(255,255,255,.9)}
.inq-form input:not([type=checkbox]):focus,.inq-form textarea:focus{border-color:var(--ink)}

/* ── 공용 위젯: 상세페이지 과정(dprocess)·3단 가격·고르기 진열대·가격 계단·따라 하기 ──
   3단 가격(.dtr-)과 고르기(.dpk-)는 스크립트가 뒤에 스타일을 끼워 넣어 !important 로 덮는다. */
.dp-hero,.dp-card,.pl .pl-flow{border-color:var(--sg-rim)!important;background:var(--sg-iris),var(--sg-panel)!important;box-shadow:var(--sg-panel-shadow)!important}
.dtr-row,.dpk-t{border-color:var(--sg-rim)!important;background:var(--sg-iris),var(--sg-panel)!important;box-shadow:var(--sg-btn-shadow)!important}
.ht-step[aria-current="step"]{background:var(--sg-iris),var(--sg-panel);box-shadow:var(--sg-panel-shadow)}
.dp-nav,.pl .pl-auto,.ht-play{border-color:var(--sg-rim)!important;background:var(--sg-iris),var(--sg-fill)!important;box-shadow:var(--sg-btn-shadow)!important}
/* 주황·남색 주 단추 — 색은 그대로, 빛과 테 두 겹 */
.dp .dp-pick,.dp-go,.ht-go,.pl .pl-cta,.dpk-go{background-image:var(--sg-acc-glass)!important;box-shadow:var(--sg-acc-shadow)!important}

/* ── 사진·영상 위에 떠 있는 작은 단추 — 연기 유리(흐림은 원래 있던 것만, 새로 얹지 않는다) ── */
.cz-lens-btn{border-color:rgba(255,255,255,.5) rgba(200,201,204,.3) rgba(160,162,166,.32) rgba(230,231,233,.4);
  background-image:radial-gradient(42% 62% at 100% 100%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1.5px 0 rgba(255,255,255,.24),0 0 0 .5px rgba(0,0,0,.4),6px 10px 18px -8px rgba(0,0,0,.5)}
.sheet100-snd{background-image:var(--sg-acc-glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1.5px 0 rgba(255,255,255,.45),0 0 0 .8px rgba(60,62,66,.6),0 0 0 1.8px rgba(255,255,255,.45),8px 12px 22px -10px rgba(0,0,0,.8)}

/* ── 떠 있는 판: 데모 광고·폰 아래 고정 띠 ── */
.promo{box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(84,86,90,.3),20px 30px 52px -22px rgba(36,36,38,.34),4px 6px 14px -6px rgba(36,36,38,.16)}
.promo-x{background:var(--sg-iris),var(--sg-fill);box-shadow:var(--sg-btn-shadow)}
.cta-bar{border-top-color:rgba(255,255,255,.95);box-shadow:0 -.5px 0 rgba(110,112,116,.3),0 -12px 26px -20px rgba(36,36,38,.36)}

/* ── LIVE FIT 띠(검은 바탕) — 연기 유리. 민트 테·녹색불은 LIVE 제 색이라 그대로 ── */
.lfx-in{background:radial-gradient(42% 62% at 100% 100%,rgba(255,255,255,.08),rgba(255,255,255,0) 70%),linear-gradient(162deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.06) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1.5px 0 rgba(255,255,255,.18),inset 0 -16px 20px -18px rgba(255,255,255,.2),16px 24px 42px -22px rgba(0,0,0,.9),4px 6px 12px -6px rgba(0,0,0,.6)!important}