/* ═══ 萬神 빛·유리 레이어 (2026-10-14) ═══
   기존 메인 톤(보랏빛 밤 + 금빛) 위에 서비스 전체로 깐다.
   · #ms-fx  : 화면 뒤 고정 레이어 — 고화질 배경(화면별) + 느린 움직임 + 빛줄기 + 떠다니는 빛 + 반짝임
   · 유리     : 머리말·말풍선·추천칩·입력바·메뉴 카드·시트를 애플식 유리(흐림+윗면 반사광)로
   움직임은 transform·opacity 만 쓴다(필터·backdrop 애니메이션 없음). 동작 줄이기 설정이면 멈춘다. */

:root{
  --glass-bg:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 60%),rgba(17,11,30,.38);
  --glass-line:rgba(255,255,255,.13);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25);
  --gold-glow:0 0 22px rgba(240,196,110,.28);
}
html{ background:#07050c; }
body[data-ms-fx]{ background:transparent!important; }

/* ── 배경 레이어 ── */
#ms-fx{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#07050c; contain:strict; }
#ms-fx > i{ position:absolute; display:block; }
#ms-fx .bg{ inset:-5%; background:#07050c center/cover no-repeat; animation:msKen 42s ease-in-out infinite alternate; will-change:transform; }
#ms-fx .tint{ inset:0; }
#ms-fx .rays{ left:50%; top:-62vmax; width:150vmax; height:150vmax; margin-left:-75vmax; opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,228,170,.07) 0deg 3deg,transparent 3deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 72%); mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);
  animation:msSpin 160s linear infinite; will-change:transform; }
#ms-fx .orb{ width:46vmax; height:46vmax; border-radius:50%; will-change:transform,opacity; }
#ms-fx .o1{ left:-14vmax; top:8%; background:radial-gradient(closest-side,rgba(150,96,255,.42),transparent); animation:msDriftA 23s ease-in-out infinite alternate; }
#ms-fx .o2{ right:-16vmax; top:38%; background:radial-gradient(closest-side,rgba(255,196,110,.22),transparent); animation:msDriftB 29s ease-in-out infinite alternate; }
#ms-fx .o3{ left:20%; bottom:-22vmax; background:radial-gradient(closest-side,rgba(130,80,235,.38),transparent); animation:msDriftA 31s ease-in-out infinite alternate-reverse; }
#ms-fx .dust{ inset:0; will-change:opacity; }
#ms-fx .d1{ background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff8e6,transparent),radial-gradient(1px 1px at 68% 9%,#fff,transparent),radial-gradient(1.4px 1.4px at 84% 44%,#ffe9b8,transparent),radial-gradient(1px 1px at 33% 61%,#fff,transparent),radial-gradient(1.3px 1.3px at 52% 82%,#ffe9b8,transparent),radial-gradient(1px 1px at 8% 77%,#fff,transparent);
  background-size:260px 260px; animation:msTwinkle 4.6s ease-in-out infinite alternate; }
#ms-fx .d2{ background-image:radial-gradient(1px 1px at 22% 34%,#fff,transparent),radial-gradient(1.5px 1.5px at 74% 27%,#ffe2a0,transparent),radial-gradient(1px 1px at 46% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 72%,#fff,transparent),radial-gradient(1px 1px at 16% 92%,#ffe2a0,transparent);
  background-size:340px 340px; animation:msTwinkle 6.8s ease-in-out infinite alternate-reverse; }
#ms-fx .vig{ inset:0; background:radial-gradient(120% 80% at 50% 45%,transparent 55%,rgba(3,2,6,.75)); }
/* 홈 상단 — 레퍼런스의 금빛 원형 빛(타이틀 뒤): 후광 + 이중 고리 + 빛나는 점 + 짧은 빛살 */
#ms-fx .crest{ left:50%; top:-40px; width:360px; height:360px; margin-left:-180px; display:none; }
#ms-fx .crest b{ position:absolute; inset:0; border-radius:50%; }
#ms-fx .crest .halo{ inset:40px; background:radial-gradient(closest-side,rgba(255,236,190,.55),rgba(255,206,130,.22) 38%,rgba(190,140,255,.10) 62%,transparent 76%); animation:msBreath 5.5s ease-in-out infinite alternate; }
#ms-fx .crest .ring{ inset:70px; border:1px solid rgba(246,214,150,.55); box-shadow:0 0 14px rgba(246,206,130,.35),inset 0 0 14px rgba(246,206,130,.25);
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 82%); mask-image:linear-gradient(180deg,#000 35%,transparent 82%); }
#ms-fx .crest .ring2{ inset:52px; border:1px solid transparent; border-top-color:rgba(255,236,190,.75); border-left-color:rgba(255,236,190,.25);
  box-shadow:0 -6px 18px -6px rgba(255,220,150,.45); animation:msSpin 24s linear infinite; }
#ms-fx .crest .ring3{ inset:96px; border:1px dashed rgba(246,214,150,.35); animation:msSpin 70s linear infinite reverse;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 75%); mask-image:linear-gradient(180deg,#000 30%,transparent 75%); }
#ms-fx .crest .node{ inset:auto; width:7px; height:7px; background:#fff3d2; box-shadow:0 0 10px 3px rgba(255,214,140,.8),0 0 26px 8px rgba(255,190,110,.35); animation:msTwinkle 2.6s ease-in-out infinite alternate; }
#ms-fx .crest .n1{ left:68px; top:176px; } #ms-fx .crest .n2{ right:68px; top:176px; animation-delay:1.3s; } #ms-fx .crest .n3{ left:176px; top:66px; width:9px; height:9px; animation-delay:.6s; }
#ms-fx .crest .beam{ inset:auto; left:179px; top:-60px; width:2px; height:230px; border-radius:2px; background:linear-gradient(180deg,transparent,rgba(255,236,190,.55) 60%,transparent); animation:msBreath 4s ease-in-out infinite alternate; }
#ms-fx[data-bg="home"] .crest{ display:block; }
/* 빛 궤적 — 보랏빛·금빛 혜성이 화면을 비스듬히 휘감아 돈다(레퍼런스의 라이트 트레일) */
#ms-fx .trail{ left:50%; top:58%; width:150vw; height:150vw; margin:-75vw 0 0 -75vw; transform:rotate(-16deg) scaleY(.30); }
#ms-fx .trail b{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(170,120,255,.0) 62%,rgba(190,150,255,.35) 86%,rgba(255,226,170,.85) 98%,#fff 100%);
  -webkit-mask-image:radial-gradient(closest-side,transparent 96.2%,#000 97.4%,#000 98.6%,transparent 100%); mask-image:radial-gradient(closest-side,transparent 96.2%,#000 97.4%,#000 98.6%,transparent 100%);
  animation:msSpin 16s linear infinite; will-change:transform; }
#ms-fx .trail b + b{ animation-duration:26s; animation-direction:reverse; opacity:.5; }
#ms-fx[data-bg="tarot"] .trail, #ms-fx[data-bg="other"] .trail{ opacity:.5; }

@keyframes msKen{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.10) translate3d(-1.6%,-2.2%,0); } }
@keyframes msSpin{ to{ transform:rotate(360deg); } }
@keyframes msDriftA{ from{ transform:translate3d(0,0,0); opacity:.7; } to{ transform:translate3d(9vmax,-7vmax,0); opacity:1; } }
@keyframes msDriftB{ from{ transform:translate3d(0,0,0); opacity:1; } to{ transform:translate3d(-10vmax,6vmax,0); opacity:.6; } }
@keyframes msTwinkle{ from{ opacity:.25; } to{ opacity:1; } }
@keyframes msBreath{ from{ opacity:.55; transform:scale(.96); } to{ opacity:1; transform:scale(1.04); } }
#ms-fx.paused *, #ms-fx.paused{ animation-play-state:paused!important; }
@media (prefers-reduced-motion:reduce){ #ms-fx *, .ms-sheen i{ animation:none!important; } }

/* 화면별 배경 + 읽기용 어둠막(가운데·아래를 더 어둡게) */
#ms-fx[data-bg="home"] .bg{ background-image:url('/icons/home_bg.jpg'); background-position:center 30%; }   /* 번들 홈 레이어와 같은 그림 */
#ms-fx[data-bg="home"] .tint{ background:linear-gradient(180deg,rgba(5,2,12,.35) 0%,rgba(7,3,16,.2) 42%,rgba(10,3,20,.55) 100%); }
#ms-fx[data-bg="saju"] .bg{ background-image:url('/icons/bg_saju.jpg'); }
#ms-fx[data-bg="astro"] .bg{ background-image:url('/icons/bg_astro.jpg'); }
#ms-fx[data-bg="tarot"] .bg{ background-image:url('/icons/bg_tarot.jpg'); }
#ms-fx[data-bg="dream"] .bg{ background-image:url('/icons/bg_dream.jpg'); }
#ms-fx[data-bg="other"] .bg{ background-image:url('/icons/home_bg.jpg'); background-position:center 30%; }
#ms-fx:is([data-bg="saju"],[data-bg="astro"],[data-bg="tarot"],[data-bg="dream"]) .tint{
  background:linear-gradient(180deg,rgba(8,5,16,.62) 0%,rgba(10,6,20,.38) 22%,rgba(10,6,20,.58) 55%,rgba(6,4,12,.9) 100%); }
#ms-fx[data-bg="other"] .tint{ background:linear-gradient(180deg,rgba(6,3,14,.78),rgba(6,3,14,.9)); }
#ms-fx[data-bg="tarot"] .rays, #ms-fx[data-bg="other"] .rays{ opacity:.3; }

/* ── 번들 화면을 투명하게 → 뒤의 #ms-fx 가 보인다 ── */
body[data-ms-fx] #root > div.w-full.overflow-hidden.relative,
body[data-ms-fx] #root > div > div.absolute.inset-0.flex.flex-col.items-center,
body[data-ms-fx] #root > div > div.relative.w-full.h-full,
body[data-ms-fx] #root div.relative.flex-1.overflow-y-auto.z-10,
body[data-ms-fx] #root div.relative.w-full.h-full.flex.flex-col.overflow-hidden{ background:transparent!important; }
body[data-ms-fx] #root div.relative.w-full.h-full.flex.flex-col.overflow-hidden > div.absolute.inset-0.pointer-events-none{ opacity:.35; }
/* 번들 홈은 신당 그림을 base64 이미지 레이어로 직접 깐다 → 그 레이어만 숨기고 #ms-fx 가 움직이는 신당을 그린다(나머지 빛·안개 레이어는 그대로) */
body[data-ms-fx] #root div.absolute.inset-0.pointer-events-none[style*="data:image/jpeg"]{ display:none!important; }

/* ── 유리: 대화 화면 공통(사주·별자리·타로·꿈해몽) ── */
body[data-ms-fx]:not([data-ms-theme="home"]) #root div.flex.items-center.gap-3.px-4.z-50{
  background:linear-gradient(180deg,rgba(14,9,26,.55),rgba(14,9,26,.28))!important; border-bottom:1px solid transparent!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 -1px 0 rgba(240,206,140,.22), 0 8px 24px rgba(0,0,0,.25)!important;
}
/* 머리말 캐릭터 이름 — 한 줄로(타로 마스터·별자리 점성술사가 2~3줄로 깨지던 것) */
body[data-ms-fx] #root div.flex.items-center.gap-3.px-4.z-50 > div.flex-1.min-w-0 > div:first-child{
  white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:17px!important; line-height:1.25!important;
  text-shadow:0 0 14px rgba(240,200,120,.35)!important;
}
body[data-ms-fx] #root div.flex.items-center.gap-3.px-4.z-50 > div.flex-1.min-w-0 > div:nth-child(2){ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
/* 상대 말풍선 — 짙은 유리 + 윗면 반사광 + 금빛 머리선 */
body[data-ms-fx] #root div.flex.justify-start div[style*="linear-gradient"]:is(.max-w-\[75\%\],[class*="px-4"]){
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 55%),rgba(16,10,30,.66)!important;
  border:1px solid var(--glass-line)!important; border-top-color:rgba(240,206,140,.34)!important; border-radius:18px 18px 18px 6px!important;
  box-shadow:var(--glass-hi), 0 12px 30px rgba(0,0,0,.35)!important;
}
/* 내 말풍선 — 금빛 유리 */
body[data-ms-fx] #root div.flex.justify-end div[style*="linear-gradient"]{
  background:linear-gradient(150deg,rgba(255,236,190,.30),rgba(200,150,70,.16))!important; color:#fff7e6!important;
  border:1px solid rgba(247,227,173,.38)!important; border-radius:18px 18px 6px 18px!important;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.35), 0 0 20px rgba(240,190,100,.16), 0 10px 24px rgba(0,0,0,.3)!important;
}
/* 추천 질문 칩 — 유리 알약 */
body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button{
  background:var(--glass-bg)!important; border:1px solid var(--glass-line)!important; border-radius:14px!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--glass-hi)!important; color:#f3e9d6!important;
}
body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button:active{ border-color:rgba(247,227,173,.6)!important; box-shadow:var(--glass-hi), var(--gold-glow)!important; }
/* 입력 바 — 떠 있는 유리 독 */
body[data-ms-fx] #root div.relative.px-3.py-3.z-10{
  background:linear-gradient(180deg,rgba(10,6,20,.2),rgba(10,6,20,.6))!important; border-top:1px solid rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
}
body[data-ms-fx] #root div.relative.px-3.py-3.z-10 textarea{
  background:rgba(255,255,255,.06)!important; border:1px solid var(--glass-line)!important; border-radius:22px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important; color:#f5ecdc!important;
}
body[data-ms-fx] #root div.relative.px-3.py-3.z-10 textarea:focus{ border-color:rgba(240,206,140,.55)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(240,206,140,.12)!important; }
body[data-ms-fx] #root div.relative.px-3.py-3.z-10 button{
  background:radial-gradient(120% 120% at 30% 20%,#fff1c8,#e3b866 45%,#a8792f)!important; border-radius:50%!important; color:#2a1d10!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 18px rgba(240,190,100,.45)!important;
}

/* ── 유리: 사주 선택(캐릭터 카드) ── */
body[data-ms-fx][data-ms-theme="saju"] #root .grid.grid-cols-2.gap-3 > div > div.relative.w-full > div.relative.overflow-hidden{
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 50%),rgba(14,9,26,.5)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--glass-hi), 0 16px 34px rgba(0,0,0,.45)!important;
}

/* ── 유리: 홈 ── */
body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button{
  background:var(--corners), radial-gradient(90% 55% at 50% 0%,rgba(255,226,160,.16),transparent 70%), linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 55%), rgba(16,10,28,.34)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(240,206,140,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 4px rgba(10,6,18,.22), inset 0 0 0 5px rgba(240,206,140,.16), 0 18px 36px rgba(0,0,0,.45)!important;
}
body[data-ms-fx] #root > div > div > div.z-50 > button, body[data-ms-fx] #mansin-ad-cta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.35)!important; -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
}

/* ── 빛이 지나가는 반짝임(메뉴 카드·오늘 띠 위에 얹는 별도 레이어, ms-fx.js 가 위치를 맞춘다) ── */
.ms-sheen{ position:fixed; z-index:2; pointer-events:none; overflow:hidden; border-radius:3px; }
.ms-sheen i{ position:absolute; top:-20%; bottom:-20%; left:0; width:38%; transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,240,205,.22) 45%,rgba(255,255,255,.35) 50%,rgba(255,240,205,.22) 55%,transparent);
  animation:msSheen 7s ease-in-out infinite; will-change:transform; }
@keyframes msSheen{ 0%,72%{ transform:translateX(-160%) skewX(-18deg); } 100%{ transform:translateX(420%) skewX(-18deg); } }

/* ── 오늘 띠·시트도 같은 유리 ── */
body[data-ms-fx] #ms-today-strip{
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 60%),rgba(18,12,30,.42)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(240,206,140,.42)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(0,0,0,.4)!important;
}
body[data-ms-fx] #ms-today-sheet .p{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 30%),rgba(16,10,26,.78)!important;
  -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 -20px 60px rgba(0,0,0,.6)!important;
}
body[data-ms-fx] #ms-today-sheet .box{ background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 60%),rgba(20,13,32,.5)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }

/* ── 무속(천귀덕·정판수) — 자체 전체화면이라 그 화면에 직접 부적 배경 + 움직임 ── */
#gwideok-modal, #janpansu-modal{ isolation:isolate; overflow:hidden; }
#gwideok-modal::before, #janpansu-modal::before{
  content:''; position:absolute; inset:-5%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,4,10,.66),rgba(10,5,12,.42) 25%,rgba(10,5,12,.62) 60%,rgba(6,3,8,.92)), url('/icons/bg_shaman.jpg') center/cover no-repeat;
  animation:msKen 42s ease-in-out infinite alternate;
}
#gwideok-modal.show, #janpansu-modal.show{ background:#07040a!important; }
@media (prefers-reduced-motion:reduce){ #gwideok-modal::before, #janpansu-modal::before{ animation:none; } }

/* ── 팝업(입장 안내·다이아 부족·로그인) — 같은 유리 ── */
body[data-ms-fx] :is(#mansin-entry-gate,#mansin-continue-gate,#mansin-kakao-login-prompt) > div{
  background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%),rgba(18,11,32,.72)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(240,206,140,.35)!important; border-radius:22px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 40px rgba(150,100,255,.18), 0 24px 60px rgba(0,0,0,.6)!important;
}
body[data-ms-fx] :is(#mansin-entry-gate,#mansin-continue-gate,#mansin-kakao-login-prompt){ background:rgba(6,3,12,.55)!important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ── 번들 전체화면 패널(타로 스프레드 선택 등, 거의 검정 0.94) — 흐린 유리로: 뒤 대화는 흐려지고 배경 빛은 비친다 ── */
body[data-ms-fx] #root div.absolute.inset-0.z-\[78\]{
  background:radial-gradient(90% 40% at 50% 0%,rgba(150,100,255,.16),transparent 70%),linear-gradient(180deg,rgba(10,6,20,.86),rgba(8,5,16,.93))!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
}