/* 萬神 홈 카드 아트 + 카테고리 컬러 배경 — 2026-10-14 v2 (ms-art.js 짝) — ms-clean.css 다음에 읽는다 카드: 이전 금박 카드 그림을 금테에 딱 맞춰 자른 것 + 카드 끝 두꺼운 금테 + 그림 속 요소 움직임. 사주만 동양 문양 겹. 배경: 카테고리 색은 맨 뒤(신당 그림 아래) — 그림 위를 덮지 않는다. 사주=검붉은 · 타로=검보라 · 별자리=검남색 · 꿈해몽=은은한 청회색 */ :root{ --saju-g:84,12,22; --tarot-g:54,22,92; --astro-g:16,34,94; --dream-g:40,54,66; } /* ── 카드 틀: 카테고리별 아치 모양(ms-art.js 가 mask 주입) — 비율 0.66 고정, 금테가 곧 카드 끝 ── */ body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button{ height:calc(min(74vw,300px) * 1.515)!important; min-height:0!important; max-height:none!important; align-self:flex-start; border-radius:0!important; overflow:hidden!important; isolation:isolate; background-color:#07060a!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; padding:0 20px 94px!important; box-shadow:none!important; /* 글자·버튼 80px 올렸다가(11/2) 50px 내림(11/3) */ } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(1){ background-image:none!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(2){ background-image:url('/icons/acard_tarot.jpg')!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(3){ background-image:url('/icons/acard_astro.jpg')!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(4){ background-image:url('/icons/acard_dream.jpg')!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button > div{ position:relative; z-index:4; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button::before{ display:none!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button[data-ms-on]::after{ display:none!important; content:none!important; animation:none!important; } body[data-ms-fx][data-ms-theme="home"] #root .grid.max-w-md.flex-shrink-0.px-5 > button > div:nth-child(5){ font-size:26px!important; color:#f5ecdb!important; -webkit-text-fill-color:#f5ecdb!important; } body[data-ms-fx][data-ms-theme="home"] #root .grid.max-w-md.flex-shrink-0.px-5 > button > div:nth-child(6){ color:#cbbfab!important; -webkit-text-fill-color:#cbbfab!important; margin-top:6px!important; } /* ── 카드 안 레이어 ── */ .ms-art{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .ms-art > b{ position:absolute; display:block; pointer-events:none; } .ms-art::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:54%; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(6,5,8,.5) 17%, rgba(6,5,8,.84) 42%, rgba(6,5,8,.93)); } /* 글자 80px 올림(11/2) — 진한 곳도 위로 */ .ms-art .fr{ inset:0; z-index:3; } .ms-art .fr svg, .ms-art .orb svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .ms-art .orb{ inset:0; z-index:1; mix-blend-mode:screen; } /* 메인 그래픽 모션: 그림에서 오려 낸 주인공 요소(같은 그림) — 1배 이상으로만 커져 원래 그림과 어긋남이 안 보인다 */ .ms-art .cut{ z-index:1; background-repeat:no-repeat; will-change:transform; } .ms-art .cut.m-ell{ -webkit-mask:radial-gradient(closest-side,#000 70%,transparent); mask:radial-gradient(closest-side,#000 70%,transparent); } .ms-art .cut.m-circ{ -webkit-mask:radial-gradient(closest-side,#000 93%,transparent); mask:radial-gradient(closest-side,#000 93%,transparent); } .ms-art .cut.m-rect{ -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent); -webkit-mask-composite:source-in; mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent); mask-composite:intersect; } .ms-art .cut.a-pulse{ animation:msCutPulse 4.2s ease-in-out infinite; } .ms-art .cut.a-breath{ animation:msCutBreath 6s ease-in-out infinite; } .ms-art .cut.a-flame{ animation:msCutFlame 1.6s ease-in-out infinite; } .ms-art .cut.a-sway{ animation:msCutSway 5.5s ease-in-out infinite; } .ms-art .cut.a-flap{ animation:msCutFlap 1.4s ease-in-out infinite; } @keyframes msCutPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } } @keyframes msCutBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045) translateY(-1.2%); } } @keyframes msCutFlame{ 0%,100%{ transform:scale(1,1); } 20%{ transform:scale(1.1,1.28); } 38%{ transform:scale(1.02,1.06); } 60%{ transform:scale(1.12,1.22); } 80%{ transform:scale(1.03,1.1); } } @keyframes msCutSway{ 0%,100%{ transform:rotate(-2.4deg) scale(1.03); } 50%{ transform:rotate(2.4deg) scale(1.03); } } @keyframes msCutFlap{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.62); } } /* 빛: 촛불 일렁임 · 빛 맥박 · 숨쉬기 */ .ms-art .gl{ z-index:1; aspect-ratio:1; border-radius:50%; mix-blend-mode:screen; will-change:transform,opacity; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(255,222,150,.6), rgba(255,190,100,.2) 48%, transparent); } .ms-art .gl.flame{ animation:msFlame 1.9s ease-in-out infinite; } .ms-art .gl.pulse{ animation:msGlowPulse 4.2s ease-in-out infinite; } .ms-art .gl.breathe{ background:radial-gradient(closest-side, rgba(255,226,160,.4), rgba(255,200,120,.13) 52%, transparent); animation:msGlowBreathe 6s ease-in-out infinite; } @keyframes msFlame{ 0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(1); } 18%{ opacity:1; transform:translate(-50%,-53%) scale(1.14); } 34%{ opacity:.55; transform:translate(-50%,-49%) scale(.94); } 52%{ opacity:.95; transform:translate(-50%,-52%) scale(1.08); } 70%{ opacity:.7; transform:translate(-50%,-50%) scale(.98); } } @keyframes msGlowPulse{ 0%,100%{ opacity:.2; transform:translate(-50%,-50%) scale(.92); } 50%{ opacity:.8; transform:translate(-50%,-50%) scale(1.06); } } @keyframes msGlowBreathe{ 0%,100%{ opacity:.35; transform:translate(-50%,-50%) scale(.94); } 50%{ opacity:.85; transform:translate(-50%,-50%) scale(1.07); } } /* 물결 번짐(꿈해몽) */ .ms-art .rip{ z-index:1; aspect-ratio:3.4; transform:translate(-50%,-50%); mix-blend-mode:screen; } .ms-art .rip i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(250,214,140,.85); opacity:0; animation:msRipple 5.4s ease-out infinite; will-change:transform,opacity; } .ms-art .rip i:nth-child(2){ animation-delay:-1.8s; } .ms-art .rip i:nth-child(3){ animation-delay:-3.6s; } @keyframes msRipple{ 0%{ opacity:0; transform:scale(.15); } 15%{ opacity:.85; } 100%{ opacity:0; transform:scale(1); } } /* 별 반짝임 */ .ms-art .tw{ z-index:1; width:16px; height:16px; margin:-8px 0 0 -8px; opacity:0; mix-blend-mode:screen; will-change:transform,opacity; animation:msTw 3.4s ease-in-out infinite; background:radial-gradient(circle, #fffaf0 0 1.3px, rgba(255,230,170,.55) 2.2px, transparent 4.5px); } .ms-art .tw::before,.ms-art .tw::after{ content:''; position:absolute; left:50%; top:50%; background:linear-gradient(90deg,transparent,rgba(255,244,214,.95),transparent); } .ms-art .tw::before{ width:16px; height:1px; margin:-.5px 0 0 -8px; } .ms-art .tw::after{ width:1px; height:16px; margin:-8px 0 0 -.5px; background:linear-gradient(180deg,transparent,rgba(255,244,214,.95),transparent); } @keyframes msTw{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } } /* 금가루 */ .ms-art .du{ z-index:1; bottom:18%; width:2.5px; height:2.5px; border-radius:50%; background:#f6d690; box-shadow:0 0 5px 1px rgba(246,214,144,.6); opacity:0; will-change:transform,opacity; animation:msDust 8s linear infinite; } @keyframes msDust{ 0%{ opacity:0; transform:translate3d(0,0,0); } 15%{ opacity:.85; } 80%{ opacity:.4; } 100%{ opacity:0; transform:translate3d(var(--dx,0),-230px,0); } } /* ── 사주: 동양 문양 겹(명두 원판 부유 · 오색 끈 흔들림 · 12지지 링 회전 · 금선 구름) ── */ .ms-art[data-k="saju"]{ background:var(--saju-stars,linear-gradient(transparent,transparent)), radial-gradient(72% 42% at 50% 40%, #240910, #100508 70%), #090305; background-size:100% 100%; } .ms-art .ring{ z-index:0; left:50%; top:39%; aspect-ratio:1; background:center/contain no-repeat; will-change:transform; } .ms-art .r1{ width:84%; animation:msRing 80s linear infinite; } .ms-art .r2{ width:62%; opacity:.55; animation:msRing 50s linear infinite reverse; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23d4ae68'%3E%3Ccircle cx='100' cy='100' r='98' stroke-width='.7' stroke-dasharray='1 5'/%3E%3Ccircle cx='100' cy='100' r='92' stroke-width='.4' stroke-opacity='.6'/%3E%3Ccircle cx='100' cy='2' r='2' fill='%23f1d391' stroke='none'/%3E%3Ccircle cx='100' cy='198' r='1.4' fill='%23f1d391' stroke='none'/%3E%3C/svg%3E"); } @keyframes msRing{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } } .ms-art .embw{ z-index:0; left:50%; top:39%; width:80%; aspect-ratio:1; mix-blend-mode:screen; will-change:transform; animation:msEmbFloat 6s ease-in-out infinite; } .ms-art .emb{ position:absolute; inset:0; background:url('/icons/art_saju.jpg') center/contain no-repeat; will-change:transform; } .ms-art .emb.disc{ -webkit-mask:linear-gradient(180deg,#000 53%,transparent 57%); mask:linear-gradient(180deg,#000 53%,transparent 57%); transform-origin:50% 32%; animation:msDisc 7s ease-in-out infinite; } .ms-art .emb.rib{ -webkit-mask:linear-gradient(180deg,transparent 51%,#000 56%); mask:linear-gradient(180deg,transparent 51%,#000 56%); transform-origin:50% 54%; animation:msRib 3.8s ease-in-out infinite; } @keyframes msEmbFloat{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,-54%); } } @keyframes msDisc{ 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } } @keyframes msRib{ 0%,100%{ transform:rotate(-4.5deg) skewX(2deg); } 50%{ transform:rotate(4.5deg) skewX(-2deg); } } .ms-art .cloud{ z-index:0; left:-20%; width:140%; height:20%; background:url('/icons/cloud_gold.jpg') center/contain no-repeat; mix-blend-mode:screen; will-change:transform; } .ms-art .c1{ top:58%; opacity:.5; animation:msCloudA 16s ease-in-out infinite alternate; } .ms-art .c2{ top:66%; opacity:.32; animation:msCloudB 22s ease-in-out infinite alternate; } @keyframes msCloudA{ from{ transform:translate3d(-8%,0,0); } to{ transform:translate3d(8%,-3%,0); } } @keyframes msCloudB{ from{ transform:translate3d(8%,0,0) scaleX(-1); } to{ transform:translate3d(-8%,2%,0) scaleX(-1); } } /* 금색 버튼 — 작게(글자는 ::after content) */ .ms-art .cta{ left:50%; width:54%; transform:translateX(-50%); bottom:48px; height:34px; border-radius:999px; z-index:5; overflow:hidden; background:linear-gradient(180deg,#f0d690 0%,#cba257 50%,#98712f 100%); box-shadow:inset 0 1px 0 rgba(255,248,224,.7), inset 0 -2px 5px rgba(90,58,18,.5), 0 6px 16px rgba(0,0,0,.55); } .ms-art .cta::after{ content:attr(data-t); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 13px/1 var(--serif,'Noto Serif KR',serif); letter-spacing:.12em; color:#24170a; text-shadow:0 1px 0 rgba(255,238,196,.45); } .ms-art .cta::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,250,232,.55),transparent); transform:translateX(-120%) skewX(-20deg); animation:msCtaShine 4.6s ease-in-out infinite; } @keyframes msCtaShine{ 0%,64%{ transform:translateX(-120%) skewX(-20deg); } 100%{ transform:translateX(320%) skewX(-20deg); } } button:not([data-ms-on]) > .ms-art *, button:not([data-ms-on]) > .ms-art .cta::before, button:not([data-ms-on]) > .ms-art .nyshine::before{ animation-play-state:paused!important; } /* ── 배경: 카테고리 색은 맨 뒤. 신당/메뉴 배경 그림을 lighten 으로 얹어 그림의 어두운 하늘에만 색이 비친다 ── */ #ms-fx .bg{ mix-blend-mode:lighten; } #ms-fx .aura{ position:absolute; inset:0; pointer-events:none; } #ms-fx .aura > i{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; } #ms-fx[data-cat="saju"] .aura > i[data-c="saju"], #ms-fx[data-cat="tarot"] .aura > i[data-c="tarot"], #ms-fx[data-cat="astro"] .aura > i[data-c="astro"]{ opacity:1; } #ms-fx[data-cat="dream"] .aura > i[data-c="dream"]{ opacity:.7; } #ms-fx .aura > i[data-c="saju"]{ --g:var(--saju-g); } #ms-fx .aura > i[data-c="tarot"]{ --g:var(--tarot-g); } #ms-fx .aura > i[data-c="astro"]{ --g:var(--astro-g); } #ms-fx .aura > i[data-c="dream"]{ --g:var(--dream-g); } #ms-fx .aura > i > b{ position:absolute; width:130vw; height:130vw; max-width:960px; max-height:960px; border-radius:50%; will-change:transform; background:radial-gradient(closest-side, rgba(var(--g),.95), rgba(var(--g),.4) 55%, transparent); } #ms-fx .aura .x1{ left:-66vw; top:-44vw; animation:msBgA 18s ease-in-out infinite alternate; } #ms-fx .aura .x2{ right:-74vw; top:26vh; animation:msBgB 23s ease-in-out infinite alternate; } #ms-fx .aura .x3{ left:-64vw; bottom:-44vw; animation:msBgC 27s ease-in-out infinite alternate; } #ms-fx .aura .x4{ right:-62vw; bottom:-66vw; opacity:.8; animation:msBgA 31s ease-in-out infinite alternate-reverse; } @keyframes msBgA{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(22vw,14vh,0) scale(1.18); } } @keyframes msBgB{ from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-20vw,-18vh,0) scale(.92); } } @keyframes msBgC{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(18vw,-20vh,0) scale(1.15); } } #ms-fx:not([data-cat="saju"]) .aura > i[data-c="saju"] b, #ms-fx:not([data-cat="tarot"]) .aura > i[data-c="tarot"] b, #ms-fx:not([data-cat="astro"]) .aura > i[data-c="astro"] b, #ms-fx:not([data-cat="dream"]) .aura > i[data-c="dream"] b{ animation-play-state:paused; } #ms-fx .aura .clouds{ opacity:1; } #ms-fx .aura .clouds b{ position:absolute; left:-40vw; width:180vw; height:40vh; background:url('/icons/cloud_gold.jpg') center/contain no-repeat; will-change:transform; } #ms-fx .aura .k1{ top:36vh; opacity:.16; animation:msBgCloud 38s ease-in-out infinite alternate; } #ms-fx .aura .k2{ top:62vh; opacity:.12; animation:msBgCloud 52s ease-in-out infinite alternate-reverse; } @keyframes msBgCloud{ from{ transform:translate3d(-12vw,0,0); } to{ transform:translate3d(12vw,-2vh,0); } } /* 타로 스프레드(z-78 전체 화면)·타로 시트 — 검보라(불투명 판이라 판 자체를 칠함) */ body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\]{ background:radial-gradient(90% 34% at 50% 0%,rgba(62,26,104,.4),transparent 70%),linear-gradient(180deg,#12081f 0%,#0c0616 50%,#07040c 100%)!important; } body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\] :is(button,[style*="background"]):not(#_a):not(#_b):not(svg *){ background:rgba(30,16,48,.6)!important; } body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\] > div:first-child:not(#_a){ background:rgba(10,5,18,.72)!important; } body[data-ms-fx] [data-ms-sheet="tarot"]{ background:rgba(6,3,10,.6)!important; } body[data-ms-fx] [data-ms-sheet="tarot"] > div.relative{ background:radial-gradient(90% 40% at 50% 0%,rgba(62,26,104,.4),transparent 70%),linear-gradient(180deg,#160a26 0%,#0e0619 50%,#08040e 100%)!important; } /* ── 萬神 붓글씨(홈 배경) ── */ #ms-fx .cal{ position:absolute; left:0; top:0; width:0; height:0; transition:opacity .4s ease; } #ms-fx:not([data-bg="home"]) .cal{ display:none; } #ms-fx .cal b{ position:absolute; left:0; top:0; width:min(46vw,176px); aspect-ratio:1.407; transform:translate(-50%,-66%); background:url('/icons/cal_mansin.png') center/contain no-repeat; -webkit-mask:url('/icons/cal_mansin.png') center/contain no-repeat; mask:url('/icons/cal_mansin.png') center/contain no-repeat; overflow:hidden; } #ms-fx .cal b::after{ content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:45%; background:linear-gradient(100deg,transparent,rgba(255,244,214,.7),transparent); transform:translateX(-140%) skewX(-12deg); animation:msCalShine 7s ease-in-out infinite; } @keyframes msCalShine{ 0%,55%{ transform:translateX(-140%) skewX(-12deg); } 100%{ transform:translateX(330%) skewX(-12deg); } } body[data-ms-fx][data-ms-theme="home"] div.text-center.flex-shrink-0 > div:nth-child(1){ opacity:0!important; } body[data-ms-fx][data-ms-theme="home"] div.text-center.flex-shrink-0 > div:nth-child(2), body[data-ms-fx][data-ms-theme="home"] div.text-center.flex-shrink-0 > div:nth-child(3){ transform:translateY(30px); text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9)!important; } /* 홈 배경: 이전 신당 그림 그대로, 더 어둡게 · 붓글씨 뒤 달은 눌러 줌 */ #ms-fx[data-bg="home"] .bg{ background-position:center 66px!important; filter:brightness(.6) saturate(.88)!important; } #ms-fx[data-bg="home"] .tint{ background:radial-gradient(34% 13% at 50% 10%,rgba(6,5,7,.84),rgba(6,5,7,.55) 60%,transparent),radial-gradient(60% 16% at 50% 14%,rgba(6,5,7,.6),rgba(6,5,7,.2) 70%,transparent),linear-gradient(180deg,rgba(6,5,7,.4) 0%,rgba(6,5,7,.28) 30%,rgba(6,5,7,.66) 50%,rgba(6,5,7,.96) 64%,rgba(6,5,7,.98) 100%)!important; } @media (prefers-reduced-motion:reduce){ .ms-art *, .ms-art .cta::before, #ms-fx .aura *, #ms-fx .cal b::after{ animation:none!important; } } /* 메뉴 화면: 맨 뒤 카테고리 색이 비치도록 검은 막을 조금 덜어냄(색은 여전히 그림 뒤) */ #ms-fx:is([data-bg="saju"],[data-bg="astro"],[data-bg="tarot"],[data-bg="dream"]) .tint{ background:linear-gradient(180deg,rgba(6,5,7,.64) 0%,rgba(6,5,7,.56) 35%,rgba(6,5,7,.74) 70%,rgba(6,5,7,.94) 100%)!important; } #ms-fx:not([data-bg="home"]) .aura > i > b{ background:radial-gradient(closest-side, rgba(var(--g),1), rgba(var(--g),.5) 55%, transparent); } .ms-art .cut.a-bob{ animation:msCutBob 3.2s ease-in-out infinite; } @keyframes msCutBob{ 0%,100%{ transform:translateY(0) rotate(-3deg) scale(1.06); } 50%{ transform:translateY(-4%) rotate(3deg) scale(1.08); } } /* ═══ v5 — 타로 뒤집기·별똥별·달 밝기·사주 흑적금·타로 금빛 톤 ═══ */ /* 타로: 태양 카드가 뒤집혔다 돌아온다(앞=그림, 뒤=금박 카드 뒷면) */ .ms-art .flipw{ z-index:1; perspective:700px; } .ms-art .flip{ position:absolute; inset:0; display:block; transform-style:preserve-3d; will-change:transform; animation:msFlip 9s ease-in-out infinite; } .ms-art .flip > i{ position:absolute; inset:0; display:block; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:6%/4%; background-repeat:no-repeat; } .ms-art .flip .bk{ transform:rotateY(180deg); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' fill='none'%3E%3Crect x='4' y='4' width='92' height='162' rx='5' stroke='%23d8b46c' stroke-width='2'/%3E%3Crect x='9' y='9' width='82' height='152' rx='3' stroke='%23d8b46c' stroke-opacity='.55' stroke-width='.8'/%3E%3Ccircle cx='50' cy='85' r='22' stroke='%23e2c07a' stroke-width='1.2'/%3E%3Cpath d='M58 70a18 18 0 1 0 0 30a14 14 0 1 1 0-30z' fill='%23e2c07a'/%3E%3Cpath d='M50 40l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM50 114l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23e2c07a'/%3E%3Cpath d='M20 20l8 8M80 20l-8 8M20 150l8-8M80 150l-8-8' stroke='%23d8b46c' stroke-opacity='.7'/%3E%3C/svg%3E") center/100% 100% no-repeat, radial-gradient(70% 50% at 50% 50%, #3a2a10, #120c06 75%); box-shadow:0 0 18px rgba(240,200,120,.25); } @keyframes msFlip{ 0%,52%{ transform:rotateY(0deg) translateZ(0); } 60%,82%{ transform:rotateY(180deg); } 90%,100%{ transform:rotateY(360deg); } } /* 별자리: 별똥별 — 대각선으로 그어지며 사라짐 */ .ms-art .met{ z-index:1; width:84px; height:1.6px; margin-left:-84px; opacity:0; transform-origin:100% 50%; will-change:transform,opacity; background:linear-gradient(90deg, rgba(255,240,200,0), rgba(255,236,190,.55) 70%, #fffaf0); border-radius:2px; animation:msMeteor 9s linear infinite; } .ms-art .met::after{ content:''; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:#fffaf0; box-shadow:0 0 8px 3px rgba(255,236,190,.8); } @keyframes msMeteor{ 0%,84%{ opacity:0; transform:rotate(-32deg) translate3d(0,0,0); } 86%{ opacity:1; } 96%{ opacity:.9; } 100%{ opacity:0; transform:rotate(-32deg) translate3d(-170px,0,0); } } .ms-art[data-k="astro"] .tw{ animation-duration:2.4s; } /* 꿈해몽: 달이 밝아졌다 → 어두워졌다 반복(빛무리와 어둠막이 반대로) */ .ms-art .moonglow,.ms-art .moondim{ z-index:1; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); will-change:opacity; } .ms-art .moonglow{ mix-blend-mode:screen; background:radial-gradient(closest-side, rgba(255,240,196,.75), rgba(255,220,150,.32) 45%, rgba(255,210,140,.1) 70%, transparent); animation:msMoonGlow 8s ease-in-out infinite; } .ms-art .moondim{ background:radial-gradient(closest-side, rgba(6,8,20,.82) 60%, rgba(6,8,20,.5) 85%, transparent); animation:msMoonDim 8s ease-in-out infinite; } @keyframes msMoonGlow{ 0%,100%{ opacity:1; } 45%,60%{ opacity:0; } } @keyframes msMoonDim{ 0%,100%{ opacity:0; } 45%,60%{ opacity:.85; } } /* 사주: 흑(검정 바탕) · 적(진홍 후광·붉은 띠·붉은 끈) · 금(테·문양) */ .ms-art[data-k="saju"]{ background:var(--saju-stars,linear-gradient(transparent,transparent)), radial-gradient(46% 30% at 50% 38%, rgba(150,18,30,.62), rgba(90,8,16,.3) 60%, transparent 100%), radial-gradient(90% 40% at 50% 100%, rgba(110,10,20,.35), transparent 70%), #060203; background-size:100% 100%; } .ms-art .saju-halo{ z-index:0; } .ms-art .emb.rib{ filter:sepia(1) saturate(3.2) hue-rotate(-42deg) brightness(.95); } /* 구름: 아래쪽 글자 배경 위로 올려 잘리지 않게(가장자리는 부드럽게 사라짐) */ .ms-art .cloud{ z-index:3; -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); } .ms-art .c1{ top:auto; bottom:7%; opacity:.42; } .ms-art .c2{ top:auto; bottom:0; opacity:.26; } .ms-art[data-k="saju"]::before{ height:58%; background:linear-gradient(180deg, transparent, rgba(6,2,3,.55) 34%, rgba(6,2,3,.9) 70%, rgba(6,2,3,.96)); } /* 글자·버튼을 80px 올린 뒤(11/2) 부적 술이 제목에 닿지 않게 문양·링도 조금 위로 */ .ms-art[data-k="saju"] :is(.ring,.embw){ top:33%; } /* 타로 톤 = 금빛(배경 맨 뒤 색·타로 화면·시트) */ :root{ --tarot-g:92,66,18; } body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\]{ background:radial-gradient(90% 34% at 50% 0%,rgba(150,108,36,.32),transparent 70%),linear-gradient(180deg,#171107 0%,#100b05 50%,#080603 100%)!important; } body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\] :is(button,[style*="background"]):not(#_a):not(#_b):not(svg *){ background:rgba(52,38,14,.55)!important; } body[data-ms-fx][data-ms-theme="tarot"] #root div.absolute.inset-0.z-\[78\] > div:first-child:not(#_a){ background:rgba(16,11,5,.75)!important; } body[data-ms-fx] [data-ms-sheet="tarot"] > div.relative{ background:radial-gradient(90% 40% at 50% 0%,rgba(150,108,36,.32),transparent 70%),linear-gradient(180deg,#1a1308 0%,#110c05 50%,#090603 100%)!important; } @media (prefers-reduced-motion:reduce){ .ms-art .flip,.ms-art .met,.ms-art .moonglow,.ms-art .moondim{ animation:none!important; } } /* ═══ v6 — 꿈해몽 달은 밝아지기만 · 사주 원국 금박 패널 · 상담 화면 금빛 · 캐릭터 금테 ═══ */ .ms-art .moondim{ display:none!important; } .ms-art .moonglow{ width:auto; animation:msMoonBright 7s ease-in-out infinite!important; background:radial-gradient(closest-side, rgba(255,246,214,.85), rgba(255,226,160,.42) 42%, rgba(255,212,140,.14) 68%, transparent)!important; } @keyframes msMoonBright{ 0%,100%{ opacity:.12; transform:translate(-50%,-50%) scale(.96); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } } /* 사주 원국 — 옻칠 바탕 + 금박 테 + 금선 구름 문양, 오행 타일은 색 유지하고 금테·광택 */ :root{ --g1:#e9cf8f; --g2:#c9a35f; --g3:#8d6a2f; --gl:rgba(214,174,104,.55); --gh:rgba(214,174,104,.22); } body[data-ms-fx] #root [data-ms-chartw] > div:first-child:not(#_a){ color:var(--g1)!important; opacity:1!important; } body[data-ms-fx] #root [data-ms-chart]:not(#_a){ position:relative; overflow:hidden; padding:16px 14px 14px!important; border-radius:14px!important; background:url('/icons/cloud_gold.jpg') center -6px/118% auto no-repeat, url('/icons/cloud_gold.jpg') center calc(100% + 10px)/118% auto no-repeat, radial-gradient(90% 40% at 50% 0%, rgba(150,110,40,.16), transparent 70%), linear-gradient(180deg,#120d08,#0a0806 60%,#080604)!important; background-blend-mode:screen, screen, normal, normal!important; border:0!important; box-shadow:inset 0 0 0 1.5px var(--g2), inset 0 0 0 5px rgba(8,6,4,.85), inset 0 0 0 6px var(--gl), 0 14px 34px rgba(0,0,0,.6)!important; } body[data-ms-fx] #root [data-ms-chart] > *{ position:relative; z-index:1; } body[data-ms-fx] #root [data-ms-chart]::before, body[data-ms-fx] #root [data-ms-chart]::after{ content:''; position:absolute; z-index:0; width:46px; height:46px; pointer-events:none; background:url('/icons/fcorner.jpg') center/100% 100% no-repeat; mix-blend-mode:screen; opacity:.85; } body[data-ms-fx] #root [data-ms-chart]::before{ left:0; top:0; } body[data-ms-fx] #root [data-ms-chart]::after{ right:0; top:0; transform:scaleX(-1); } /* 기존 '선 지우기' 규칙보다 우선(:not(#_a) 로 id 가중치) */ body[data-ms-fx] #root [data-ms-chart] [style*="border"]:not(#_a){ border-color:var(--gh)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="aspect-ratio: 1 / 1"]:not(#_a){ border:1px solid var(--g2)!important; border-radius:7px!important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), inset 0 10px 14px rgba(255,236,190,.14), inset 0 -8px 12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5)!important; color:#fbf1dc!important; text-shadow:0 1px 2px rgba(0,0,0,.6)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="aspect-ratio: 1 / 1"][style*="rgba(60, 60, 60"]:not(#_a){ background:rgba(20,16,12,.8)!important; border-color:var(--gh)!important; color:rgba(233,207,143,.5)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="border-bottom: 1.5px solid"]:not(#_a){ border-bottom-color:var(--g2)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="color: rgb(199, 210, 254)"]:not(#_a), body[data-ms-fx] #root [data-ms-chart] [style*="color: rgb(196, 181, 253)"]:not(#_a){ color:var(--g1)!important; opacity:1!important; } body[data-ms-fx] #root [data-ms-chart] [style*="writing-mode: vertical-rl"]:not(#_a){ color:var(--g2)!important; opacity:.8; } body[data-ms-fx] #root [data-ms-chart] [style*="background: linear-gradient(135deg, rgba(99, 102, 241"]:not(#_a), body[data-ms-fx] #root [data-ms-chart] [style*="background: linear-gradient(135deg, rgba(167, 139, 250"]:not(#_a), body[data-ms-fx] #root [data-ms-chart] [style*="background: linear-gradient(135deg, rgba(139, 92, 246"]:not(#_a){ background:linear-gradient(135deg, rgba(214,174,104,.16), rgba(214,174,104,.03))!important; border-color:var(--gl)!important; } body[data-ms-fx] #root [data-ms-chart] button:not(#_a){ background:rgba(214,174,104,.05)!important; border:1px solid var(--gh)!important; } /* 원국 패널 — 누르면 풀이로 이어지는 칸은 버튼으로 보이게(정보처럼 보여서 안 눌렀다) */ body[data-ms-fx] #root .ms-tap-tip:not(#_a){ color:#f3d48a!important; opacity:1!important; font-size:11px!important; font-weight:800!important; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-row:not(#_a):not(#_b){ background:linear-gradient(135deg, rgba(214,174,104,.22), rgba(214,174,104,.08))!important; border:1px solid rgba(233,200,130,.45)!important; padding:10px 12px!important; border-radius:10px!important; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-go:not(#_a){ font-size:12px!important; font-weight:800!important; color:#f3d48a!important; opacity:1!important; padding:3px 9px; border-radius:999px; background:rgba(214,174,104,.2); } body[data-ms-fx] #root [data-ms-chart] .ms-tap-chip:not(#_a):not(#_b){ background:linear-gradient(135deg, rgba(214,174,104,.28), rgba(214,174,104,.12))!important; border:1px solid rgba(233,200,130,.5)!important; padding:7px 12px!important; font-size:12px!important; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-chip::after{ content:' ›'; color:#f3d48a; font-weight:800; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-card:not(#_a):not(#_b){ box-shadow:inset 0 0 0 1px rgba(233,200,130,.45)!important; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-card::after{ content:'풀이 보기 ›'; display:block; margin-top:6px; font:800 11px Pretendard,sans-serif; color:#f3d48a; } body[data-ms-fx] #root [data-ms-chart] .ms-tap-sec:not(#_a){ border-radius:12px; padding:12px 10px 10px!important; background:rgba(214,174,104,.06); box-shadow:inset 0 0 0 1px rgba(233,200,130,.28); } body[data-ms-fx] #root [data-ms-chart] .ms-tap-sec::after{ content:'눌러서 기운 비율 풀이 보기 ›'; display:block; margin-top:10px; padding:10px 12px; border-radius:10px; text-align:center; font:800 13px Pretendard,sans-serif; color:#f7ead0; background:linear-gradient(135deg, rgba(214,174,104,.30), rgba(214,174,104,.15)); box-shadow:inset 0 0 0 1px rgba(233,200,130,.5); } body[data-ms-fx] #root [data-ms-chart] .ms-ask-list button:not(#_a):not(#_b):not(#_c){ display:flex!important; justify-content:space-between!important; align-items:center!important; } body[data-ms-fx] #root [data-ms-chart] .ms-ask-list button::after{ content:'풀이 보기 ›'; font-size:12px; color:#f3d48a; font-weight:800; } /* 원국 패널 "궁금한 걸 눌러 물어보세요" — 한 줄에 하나, 금색 면으로 또렷하게 */ body[data-ms-fx] #root [data-ms-chart] .ms-ask-list button:not(#_a):not(#_b){ background:linear-gradient(135deg, rgba(214,174,104,.30), rgba(214,174,104,.15))!important; border:1px solid rgba(233,200,130,.55)!important; color:#f7ead0!important; font-size:14px!important; font-weight:800!important; padding:13px 16px!important; border-radius:12px!important; text-align:left!important; box-shadow:inset 0 1px 0 rgba(255,236,190,.18)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="text-shadow"]:not(#_a){ text-shadow:0 0 8px rgba(214,174,104,.35)!important; } body[data-ms-fx] #root [data-ms-chart] [style*="border-top: 1px dashed"]:not(#_a){ border-top:1px solid transparent!important; background-image:linear-gradient(90deg,transparent,var(--gl),transparent); background-size:100% 1px; background-repeat:no-repeat; } /* 상담(채팅) 화면 — 금빛 포인트 */ body[data-ms-fx] #root div.flex.items-center.gap-3.px-4.z-50:not(#_a){ box-shadow:0 1px 0 rgba(214,174,104,.32), 0 10px 24px rgba(0,0,0,.45)!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(1):not(#_a){ background:linear-gradient(180deg,#f3dda3,#c9a35f 70%,#9e7a3c)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!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):not(#_a){ color:rgba(214,174,104,.7)!important; } /* 아바타(한자·사진) 금 고리 */ body[data-ms-fx] #root :is(div.flex.items-center.gap-3.px-4.z-50, div.flex.justify-start) > div.flex-shrink-0:not(#_a){ box-shadow:0 0 0 1.5px var(--g2), 0 0 0 3.5px rgba(8,6,4,.9), 0 0 0 4.5px var(--gl), 0 4px 10px rgba(0,0,0,.5)!important; color:var(--g1)!important; } /* 말풍선: 캐릭터 = 옻칠 + 금 머리선, 나 = 짙은 금 */ body[data-ms-fx] #root div.flex.justify-start > div.max-w-\[75\%\]:not(#_a){ background:linear-gradient(180deg,rgba(30,23,15,.94),rgba(18,14,10,.94))!important; box-shadow:inset 0 1px 0 rgba(233,207,143,.28), inset 0 0 0 1px rgba(214,174,104,.16), 0 6px 16px rgba(0,0,0,.35)!important; } body[data-ms-fx] #root div.flex.justify-end div[style*="linear-gradient"]:not(#_a){ background:linear-gradient(135deg,#6b5222,#3e2e12)!important; color:#fbf1dc!important; box-shadow:inset 0 1px 0 rgba(255,236,190,.3), 0 6px 16px rgba(0,0,0,.35)!important; } /* 빠른 답 버튼 */ body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button:not(#_a){ background:rgba(214,174,104,.07)!important; box-shadow:inset 0 0 0 1px rgba(214,174,104,.42)!important; color:var(--g1)!important; } /* 입력창·보내기 */ body[data-ms-fx] #root div.relative.px-3.py-3.z-10 textarea:not(#_a){ box-shadow:none!important; } body[data-ms-fx] #root div.relative.px-3.py-3.z-10 button:not(#_a){ background:linear-gradient(180deg,#f0d690,#c9a35f 55%,#98712f)!important; color:#24170a!important; box-shadow:inset 0 1px 0 rgba(255,248,224,.7), 0 4px 12px rgba(0,0,0,.45)!important; } body[data-ms-fx] #root div.relative.px-3.py-3.z-10 .rounded-full:not(#_a){ background:var(--g2)!important; box-shadow:0 0 6px var(--g2)!important; } body[data-ms-fx] #root div.relative.px-3.py-3.z-10 > div:first-child:not(#_a){ color:rgba(214,174,104,.75)!important; } body[data-ms-fx] #root div.flex.items-center.gap-3.px-4.z-50 > button:first-child:not(#_a){ box-shadow:0 0 0 1px var(--gl)!important; color:var(--g1)!important; } /* 캐릭터 이미지 금테(목록 카드·채팅 속 큰 그림) */ body[data-ms-fx] #root div.relative:has(> img[src*="/characters/"]):not(#_a), body[data-ms-fx] .janpansu-profile-hero, body[data-ms-fx] .gwideok-profile-hero, body[data-ms-fx] #root div:has(> img[src*="/characters/"]):not(.flex-shrink-0):not(#_a){ position:relative; } body[data-ms-fx] #root div:has(> img[src*="/characters/"]):not(.flex-shrink-0)::after, body[data-ms-fx] .janpansu-profile-hero::after, body[data-ms-fx] .gwideok-profile-hero::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--g2), inset 0 0 0 5px rgba(8,6,4,.7), inset 0 0 0 6px var(--gl), inset 0 0 26px rgba(0,0,0,.55); } /* 구름(새 그림: 잘리지 않은 완전한 구름, 투명 배경) — 배경 위로 또렷하게 */ .ms-art .cloud{ background:url('/icons/cloud_band.webp') center/contain no-repeat!important; mix-blend-mode:normal!important; -webkit-mask:none!important; mask:none!important; height:22%!important; } .ms-art .c1{ bottom:27%!important; opacity:.78!important; } .ms-art .c2{ bottom:5%!important; opacity:.4!important; } #ms-fx .aura .clouds b{ background-image:url('/icons/cloud_band.webp')!important; } body[data-ms-fx] #root [data-ms-chart]:not(#_a){ background:url('/icons/cloud_band_dim.webp') center 2px/112% auto no-repeat, url('/icons/cloud_band_dim.webp') center calc(100% - 2px)/112% auto no-repeat, radial-gradient(90% 40% at 50% 0%, rgba(150,110,40,.16), transparent 70%), linear-gradient(180deg,#120d08,#0a0806 60%,#080604)!important; background-blend-mode:normal!important; } /* 상담 헤더·말풍선 옆 한자 아바타: 금박 글자가 투명 처리돼 사라지던 것 복구 */ body[data-ms-fx] #root :is(div.flex.items-center.gap-3.px-4.z-50, div.flex.justify-start) > div.flex-shrink-0:not(#_a):not(:has(img)){ background:radial-gradient(circle at 50% 35%, #2c2011, #0e0a06)!important; -webkit-background-clip:border-box!important; background-clip:border-box!important; -webkit-text-fill-color:#ecd394!important; color:#ecd394!important; border:0!important; text-shadow:0 0 8px rgba(214,174,104,.35)!important; } /* 사주·신년 카드 구름: 글자·버튼을 80px 올린 뒤(11/2) 버튼 아래 빈자리로 */ .ms-art .c1{ bottom:8%!important; } .ms-art .c2{ bottom:-2%!important; height:18%!important; } /* ═══ v7 — 사주가 목록(캐릭터 카드) 금박 + 구름 문양 · 두 만신 카드·상담창 금빛 ═══ */ body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]):not(#_a){ background:url('/icons/cloud_band_dim.webp') center calc(100% + 6px)/140% auto no-repeat, radial-gradient(80% 30% at 50% 100%, rgba(140,20,30,.28), transparent 70%), linear-gradient(180deg,#140e09,#0b0806 70%,#070504)!important; border:0!important; border-radius:14px!important; box-shadow:inset 0 0 0 1.5px var(--g2), inset 0 0 0 5px rgba(8,6,4,.9), inset 0 0 0 6px var(--gl), 0 14px 30px rgba(0,0,0,.6)!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) > div.relative:first-child:not(#_a){ margin:7px 7px 0; border-radius:9px; overflow:hidden; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) > div.relative:first-child > div.absolute[style*="filter: blur"]{ display:none!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) > div.relative:first-child > div.absolute.top-3.left-3:not(#_a){ background:linear-gradient(180deg,#f0d690,#c9a35f 55%,#98712f)!important; color:#24170a!important; font-weight:800; border:0!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) div.absolute.bottom-0.left-0.right-0.px-4 > div:not(#_a){ background:linear-gradient(180deg,#f6e2ad,#d2ac66 70%,#a6813f); -webkit-background-clip:text; background-clip:text; color:transparent!important; -webkit-text-fill-color:transparent!important; text-shadow:none!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) > div.relative.flex-1:not(#_a){ background:transparent!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) span.px-2:not(#_a){ background:rgba(214,174,104,.06)!important; box-shadow:inset 0 0 0 1px rgba(214,174,104,.28)!important; color:rgba(239,224,190,.85)!important; border-color:transparent!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) span.px-2:first-child:not(#_a){ background:rgba(214,174,104,.2)!important; color:var(--g1)!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) button.w-full:not(#_a){ background:linear-gradient(180deg,#f0d690,#c9a35f 52%,#98712f)!important; color:#24170a!important; font-weight:800!important; border:0!important; border-radius:999px!important; box-shadow:inset 0 1px 0 rgba(255,248,224,.7), 0 6px 14px rgba(0,0,0,.5)!important; } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) button.w-full span{ color:#24170a!important; -webkit-text-fill-color:#24170a!important; } /* 선택 강조 테두리(보라 빛 띠) → 금빛 */ body[data-ms-fx] #root div.relative.w-full > div.absolute.pointer-events-none[style*="inset: -3px"]:not(#_a){ background:linear-gradient(135deg,rgba(233,207,143,.7),rgba(201,163,95,.25),rgba(233,207,143,.7)) 0 0/300% 300%!important; } /* 두 만신(故 정판수·故 천귀덕) 카드 */ body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ border-radius:14px!important; box-shadow:inset 0 0 0 1.5px var(--g2), inset 0 0 0 5px rgba(8,6,4,.9), inset 0 0 0 6px var(--gl), 0 14px 30px rgba(0,0,0,.6)!important; } /* 두 만신 상담창: 말풍선·입력·보내기 금빛 */ body[data-ms-fx] :is(.janpansu-msg-bubble,.gwideok-msg-bubble){ box-shadow:inset 0 1px 0 rgba(233,207,143,.28), inset 0 0 0 1px rgba(214,174,104,.18)!important; } body[data-ms-fx] :is(.janpansu-send,.gwideok-send){ background:linear-gradient(180deg,#f0d690,#c9a35f 55%,#98712f)!important; color:#24170a!important; border:0!important; } body[data-ms-fx] :is(.janpansu-input,.gwideok-input){ box-shadow:none!important; } body[data-ms-fx] :is(.janpansu-modal-avatar,.gwideok-modal-avatar,.janpansu-msg-avatar,.gwideok-msg-avatar){ box-shadow:0 0 0 1.5px var(--g2), 0 0 0 3.5px rgba(8,6,4,.9), 0 0 0 4.5px var(--gl)!important; } /* 카드 인라인 box-shadow:none!important 를 피해 금테는 ::after 겹으로 */ body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"])::after{ content:''; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--g2), inset 0 0 0 5px rgba(8,6,4,.9), inset 0 0 0 6px var(--gl); } body[data-ms-fx] #root div.relative.overflow-hidden.w-full:has(> div.relative > img[src*="/characters/"]) div.absolute.bottom-0.left-0.right-0.px-4 > div:not(#_a){ background:none!important; color:#efd899!important; -webkit-text-fill-color:#efd899!important; filter:none!important; text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 14px rgba(214,174,104,.35)!important; font-size:16px!important; font-family:Pretendard,sans-serif!important; letter-spacing:-.01em!important; word-break:keep-all; } /* ═══ v8 — 사주가 목록: 테두리 하나만(인물 테두리 중복 제거) · 위 2명 기본 아치 · 아래 두 만신 강조 ═══ */ body[data-ms-fx] #root [data-ms-rc]::after{ display:none!important; } body[data-ms-fx] #root [data-ms-rc] > i.ms-rf{ position:absolute; inset:0; z-index:7; pointer-events:none; display:block; } body[data-ms-fx] #root [data-ms-rc] > i.ms-rf svg{ position:absolute; left:0; top:0; display:block; } body[data-ms-fx] #root [data-ms-rc]:not(#_a){ border:0!important; border-radius:0!important; } body[data-ms-theme="saju"] #root div.relative.w-full > div.absolute.pointer-events-none[style*="inset: -3px"]{ display:none!important; } /* 기본(위 2명): 그림은 아치 끝까지 꽉, 인물 테두리 없음 */ body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child:not(#_a){ margin:0!important; border-radius:0!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child::after{ display:none!important; content:none!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.left-3{ display:none!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.right-3:not(#_a){ top:auto!important; bottom:44px!important; right:50%!important; transform:translateX(50%); } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.right-3 > div:not(#_a){ background:rgba(10,7,5,.72)!important; box-shadow:inset 0 0 0 1px rgba(214,174,104,.45)!important; color:var(--g1)!important; } body[data-ms-fx] #root [data-ms-rc="std"] div.absolute.bottom-0.left-0.right-0.px-4 > div:not(#_a){ font-family:var(--serif,'Noto Serif KR',serif)!important; font-weight:700!important; text-align:center; } body[data-ms-fx] #root [data-ms-rc="std"] div.absolute.bottom-0.left-0.right-0.px-4:not(#_a){ text-align:center; } /* 강조(故 정판수·故 천귀덕): 첨두 아치 + 흑적금 삼중테(JS SVG) + 故 인장 + 뒤 후광 + 빛 훑기 + 붉은 옻칠 버튼 */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a){ background:url('/icons/cloud_band_dim.webp') center calc(100% + 4px)/150% auto no-repeat, radial-gradient(90% 30% at 50% 100%, rgba(150,18,30,.4), transparent 70%), #0a0506!important; position:relative; z-index:1; } body[data-ms-fx] #root [data-rcw="prem"], body[data-ms-fx] #root [data-ms-rcw="prem"]{ position:relative; } body[data-ms-fx] #root [data-ms-rcw="prem"]::before{ content:''; position:absolute; inset:-16px -12px -10px; z-index:0; pointer-events:none; border-radius:50% 50% 24px 24px / 22% 22% 24px 24px; background:radial-gradient(60% 34% at 50% 18%, rgba(214,60,60,.5), transparent 70%), radial-gradient(70% 55% at 50% 45%, rgba(214,170,96,.32), rgba(150,20,30,.22) 55%, transparent 75%); animation:msPremGlow 3.6s ease-in-out infinite; will-change:opacity; } @keyframes msPremGlow{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover)::before{ content:''; position:absolute; top:0; left:0; width:45%; height:58%; z-index:6; pointer-events:none; display:block; background:linear-gradient(100deg,transparent,rgba(255,236,190,.28),transparent); transform:translateX(-140%) skewX(-14deg); animation:msPremSweep 5.5s ease-in-out infinite; } @keyframes msPremSweep{ 0%,62%{ transform:translateX(-140%) skewX(-14deg); } 100%{ transform:translateX(330%) skewX(-14deg); } } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::after{ box-shadow:none!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ box-shadow:none!important; border-radius:0!important; } body[data-ms-fx] :is(.janpansu-profile-sigil,.gwideok-profile-sigil){ display:none!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:38px!important; bottom:auto!important; right:50%!important; transform:translateX(50%); } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges) > *{ background:rgba(40,8,12,.78)!important; border:1px solid rgba(233,201,127,.6)!important; color:#f1d391!important; } body[data-ms-fx] :is(.janpansu-plaque-frame,.gwideok-plaque-frame){ border:0!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ background:transparent!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ background:linear-gradient(180deg,#f8e6b4,#d9b46c 70%,#a8833f); -webkit-background-clip:text; background-clip:text; color:transparent!important; -webkit-text-fill-color:transparent; text-shadow:none!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ background:linear-gradient(180deg,#9a1d28,#5e0d15)!important; border:1px solid #d9b46c!important; border-radius:999px!important; color:#f6e2ad!important; box-shadow:inset 0 1px 0 rgba(255,200,180,.3), 0 0 16px rgba(180,30,40,.45), 0 6px 14px rgba(0,0,0,.5)!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta) *{ color:#f6e2ad!important; } @media (prefers-reduced-motion:reduce){ body[data-ms-fx] #root [data-ms-rcw="prem"]::before, body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover)::before{ animation:none!important; } } /* ═══ v9 — 사주가 목록 정리: 위 2명=기본(테두리·라운딩 장식 없음, 일반 버튼) · 아래 두 만신=사각 고급 테두리 + 정보 압축 ═══ */ /* 기본 카드 */ body[data-ms-fx] #root [data-ms-rc="std"]:not(#_a):not(#_b):not(#_c){ background:#14110e!important; border-radius:12px!important; box-shadow:0 10px 24px rgba(0,0,0,.45)!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.left-3:not(#_a):not(#_b):not(#_c){ display:block!important; background:rgba(10,8,6,.62)!important; color:#efe7da!important; font-weight:700; border:0!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.right-3:not(#_a):not(#_b):not(#_c){ top:12px!important; bottom:auto!important; right:12px!important; transform:none!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.top-3.right-3 > div:not(#_a):not(#_b):not(#_c){ background:rgba(10,8,6,.62)!important; box-shadow:none!important; color:#efe7da!important; } body[data-ms-fx] #root [data-ms-rc="std"] div.absolute.bottom-0.left-0.right-0.px-4:not(#_a):not(#_b):not(#_c){ text-align:left; } body[data-ms-fx] #root [data-ms-rc="std"] div.absolute.bottom-0.left-0.right-0.px-4 > div:not(#_a):not(#_b):not(#_c){ color:#f5ecdb!important; -webkit-text-fill-color:#f5ecdb!important; font-family:Pretendard,sans-serif!important; font-weight:800!important; font-size:16px!important; text-align:left; text-shadow:0 2px 8px rgba(0,0,0,.9)!important; } body[data-ms-fx] #root [data-ms-rc="std"] span.px-2:not(#_a):not(#_b):not(#_c){ background:rgba(239,231,218,.06)!important; box-shadow:none!important; color:rgba(239,231,218,.72)!important; } body[data-ms-fx] #root [data-ms-rc="std"] span.px-2:first-child:not(#_a):not(#_b):not(#_c){ background:rgba(239,231,218,.12)!important; color:#efe7da!important; } body[data-ms-fx] #root [data-ms-rc="std"] button.w-full:not(#_a):not(#_b):not(#_c){ background:rgba(239,231,218,.08)!important; color:#efe7da!important; border-radius:10px!important; box-shadow:none!important; font-weight:700!important; } body[data-ms-fx] #root [data-ms-rc="std"] button.w-full span:not(#_a):not(#_b):not(#_c){ color:#efe7da!important; -webkit-text-fill-color:#efe7da!important; } body[data-ms-fx] #root [data-ms-rc="std"]:not(#_a):not(#_b):not(#_c){ background-image:none!important; } /* 두 만신 카드: 사각(모서리 10px) + 고급 테두리(JS SVG) */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a){ border-radius:10px!important; overflow:hidden!important; background:radial-gradient(90% 30% at 50% 100%, rgba(150,18,30,.35), transparent 70%), #0a0607!important; } body[data-ms-fx] #root [data-ms-rcw="prem"]::before{ inset:-10px!important; border-radius:18px!important; background:radial-gradient(70% 60% at 50% 40%, rgba(214,170,96,.26), rgba(150,20,30,.2) 55%, transparent 78%)!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ aspect-ratio:4 / 5!important; max-height:none!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ object-position:center 18%!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ font-size:10px!important; line-height:1.4!important; bottom:8px!important; padding:0 14px!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:13px!important; right:13px!important; bottom:auto!important; transform:none!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges) > *{ padding:3px 8px!important; font-size:11px!important; letter-spacing:.02em!important; display:inline-flex!important; align-items:center; gap:3px; } body[data-ms-fx] :is(.janpansu-profile-sigil,.gwideok-profile-sigil){ display:block!important; top:12px!important; left:14px!important; font-size:17px!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ padding:9px 14px 14px!important; } body[data-ms-fx] :is(.janpansu-plaque-frame,.gwideok-plaque-frame){ padding:0!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ font-size:16px!important; white-space:nowrap; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title) .post{ font-size:11px!important; margin-left:3px!important; } body[data-ms-fx] :is(.janpansu-profile-hanja,.gwideok-profile-hanja){ font-size:9.5px!important; margin-top:3px!important; letter-spacing:.42em!important; } body[data-ms-fx] :is(.janpansu-profile-years,.gwideok-profile-years){ font-size:9.5px!important; margin-top:2px!important; color:rgba(233,201,127,.8)!important; } body[data-ms-fx] :is(.janpansu-profile-hanja-mean,.gwideok-profile-hanja-mean,.janpansu-profile-divider,.gwideok-profile-divider,.janpansu-profile-bio,.gwideok-profile-bio){ display:none!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:10px!important; padding:7px 8px!important; font-size:12px!important; } body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child:not(#_a):not(#_b):not(#_c){ margin:0!important; border-radius:0!important; } /* ═══ v10 — 사주가 목록 고도화: 위 2명 버튼에 붉은 옻칠 이펙트 · 아래 두 만신은 가로 한 줄 넓은 카드(3:2) + 매그니픽 금박 테두리 그림 + 금색 버튼 ═══ */ /* 위 2명 버튼: 붉은 옻칠 + 금 테 + 은은한 붉은 빛 */ body[data-ms-fx] #root [data-ms-rc="std"] button.w-full:not(#_a):not(#_b):not(#_c){ background:linear-gradient(180deg,#9a1d28,#5e0d15)!important; color:#f6e2ad!important; border-radius:999px!important; font-weight:800!important; box-shadow:inset 0 0 0 1px #d9b46c, inset 0 1px 0 rgba(255,200,180,.3), 0 0 14px rgba(180,30,40,.4), 0 6px 14px rgba(0,0,0,.5)!important; } body[data-ms-fx] #root [data-ms-rc="std"] button.w-full span:not(#_a):not(#_b):not(#_c){ color:#f6e2ad!important; -webkit-text-fill-color:#f6e2ad!important; } /* 아래 두 만신: 그리드 두 칸 차지 → 가로로 넓은 카드 */ body[data-ms-fx][data-ms-theme="saju"] #root .grid.grid-cols-2.gap-3 > div:has(.mansin-janpansu-takeover, .mansin-gwideok-takeover){ grid-column:1 / -1; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ aspect-ratio:3 / 2; height:auto!important; border-radius:8px!important; background:url('/icons/cloud_band_dim.webp') 80% calc(100% + 8px)/90% auto no-repeat, radial-gradient(70% 60% at 75% 40%, rgba(150,110,40,.14), transparent 70%), radial-gradient(60% 50% at 70% 100%, rgba(150,18,30,.32), transparent 70%), linear-gradient(90deg,#0a0607,#120c08)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-rf{ display:none!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-pf{ position:absolute; inset:0; z-index:8; pointer-events:none; display:block; background:url('/icons/pframe.jpg') center/100% 100% no-repeat; mix-blend-mode:screen; } body[data-ms-fx] #root [data-ms-rcw="prem"]::before{ inset:-8px!important; border-radius:14px!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover)::before{ height:100%!important; width:30%!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ display:grid!important; grid-template-columns:44% 1fr; height:100%!important; } body[data-ms-fx] :is(.janpansu-profile-bg,.gwideok-profile-bg,.janpansu-profile-overlay,.gwideok-profile-overlay){ display:none!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ grid-column:1; grid-row:1; aspect-ratio:auto!important; height:100%!important; max-height:none!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ object-position:center 22%!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::after{ background:linear-gradient(90deg, transparent 60%, rgba(10,6,7,.85) 100%), linear-gradient(180deg, transparent 55%, rgba(10,6,7,.9) 100%)!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ font-size:9.5px!important; bottom:14px!important; padding:0 14px 0 16px!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ grid-column:2; grid-row:1; display:flex!important; flex-direction:column; justify-content:center; padding:16px 18px 16px 8px!important; text-align:center; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ font-size:21px!important; letter-spacing:.02em!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title) .post{ display:block; font-size:11px!important; margin:2px 0 0!important; letter-spacing:.3em; -webkit-text-fill-color:rgba(233,201,127,.75); } body[data-ms-fx] :is(.janpansu-profile-hanja,.gwideok-profile-hanja){ font-size:11px!important; margin-top:7px!important; color:#e9c97f!important; } body[data-ms-fx] :is(.janpansu-profile-years,.gwideok-profile-years){ font-size:10px!important; margin-top:3px!important; } body[data-ms-fx] :is(.janpansu-profile-divider,.gwideok-profile-divider){ display:block!important; margin:10px 18px 0!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:auto!important; bottom:70px!important; right:auto!important; left:calc(44% + (56% - 10px) / 2)!important; transform:translateX(-50%)!important; } /* 금색 버튼(메인 카드와 같은 결: 금 그라데이션 + 빛 훑기) */ body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ position:relative; overflow:hidden; margin-top:40px!important; padding:9px 8px!important; border:0!important; border-radius:999px!important; font-size:12.5px!important; letter-spacing:.08em; background:linear-gradient(180deg,#f2d998 0%,#cfa45a 50%,#9c7433 100%)!important; color:#24170a!important; box-shadow:inset 0 1px 0 rgba(255,248,224,.75), inset 0 -2px 5px rgba(90,58,18,.5), 0 0 18px rgba(214,170,96,.3), 0 6px 14px rgba(0,0,0,.55)!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta) *{ color:#24170a!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta)::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,252,236,.6),transparent); transform:translateX(-120%) skewX(-20deg); animation:msCtaShine 4.2s ease-in-out infinite; } /* ═══ v11 — 두 만신 카드: 매그니픽 금박 금판 테두리(pframe.webp) 안쪽 창에 맞춰 그림·정보 배치 ═══ */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ aspect-ratio:1.3; border-radius:14px!important; background:radial-gradient(70% 60% at 72% 45%, rgba(150,110,40,.16), transparent 70%), radial-gradient(60% 50% at 70% 100%, rgba(150,18,30,.3), transparent 70%), linear-gradient(90deg,#0b0708,#140d09)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-pf{ background:url('/icons/pframe.webp') center/100% 100% no-repeat!important; mix-blend-mode:normal!important; z-index:8; filter:drop-shadow(0 0 1px rgba(0,0,0,.6)); } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ box-sizing:border-box!important; padding:12.4% 10.8% 11.6%!important; grid-template-columns:46% 1fr!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ border-radius:2px; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ object-position:center 12%!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::after{ background:linear-gradient(180deg, transparent 58%, rgba(10,6,7,.88) 100%)!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ font-size:9px!important; bottom:8px!important; padding:0 8px!important; line-height:1.35!important; } body[data-ms-fx] :is(.janpansu-profile-sigil,.gwideok-profile-sigil){ display:none!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ padding:4px 4px 2px 12px!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ font-size:20px!important; } body[data-ms-fx] :is(.janpansu-profile-divider,.gwideok-profile-divider){ margin:8px 14px 0!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:auto!important; bottom:calc(11.6% + 46px)!important; left:calc(10.8% + (78.4% * .46) + (78.4% * .54) / 2 + 6px)!important; right:auto!important; transform:translateX(-50%)!important; z-index:9!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:30px!important; padding:8px 6px!important; font-size:12px!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover)::before{ z-index:7!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ aspect-ratio:1.2!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ padding:13.6% 10.9% 12.6%!important; grid-template-columns:minmax(0,47%) minmax(0,1fr)!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero,.janpansu-profile-plaque,.gwideok-profile-plaque){ min-width:0!important; width:auto!important; overflow:hidden; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ width:100%!important; height:100%!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ padding:2px 2px 2px 12px!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:34px!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ bottom:calc(12.6% + 48px)!important; left:calc(10.9% + 78.2% * .47 + 12px + (78.2% * .53 - 14px) / 2)!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ bottom:20px!important; padding:0 6px 0 14px!important; } /* ═══ v12 — 두 만신 카드: 두꺼운 금판 → 얇은 금선 그래픽 테두리(lframe.webp), 금은 포인트만 ═══ */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ aspect-ratio:4 / 3!important; border-radius:10px!important; background:radial-gradient(60% 55% at 74% 42%, rgba(150,110,40,.1), transparent 70%), radial-gradient(60% 40% at 72% 100%, rgba(130,16,26,.22), transparent 70%), linear-gradient(90deg,#0a0708,#110c09)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-pf{ background-image:url('/icons/lframe.webp')!important; filter:none!important; } body[data-ms-fx] #root [data-ms-rcw="prem"]::before{ opacity:.35!important; animation:none!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ padding:6% 6.4% 6%!important; grid-template-columns:minmax(0,46%) minmax(0,1fr)!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ border-radius:4px!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ bottom:10px!important; padding:0 8px!important; font-size:9.5px!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ padding:2px 4px 2px 14px!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ font-size:21px!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ bottom:calc(6% + 50px)!important; left:calc(6.4% + 87.2% * .46 + 14px + (87.2% * .54 - 18px) / 2)!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:36px!important; } /* ═══ v13 — 두 만신 카드: 세로형(한 줄에 2장, 위 카드와 같은 폭) · 테두리는 금선 2줄만(장식 없음) ═══ */ body[data-ms-fx][data-ms-theme="saju"] #root .grid.grid-cols-2.gap-3 > div:has(.mansin-janpansu-takeover, .mansin-gwideok-takeover){ grid-column:auto!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ aspect-ratio:auto!important; height:auto!important; border-radius:12px!important; background:linear-gradient(180deg,#130e0b,#0b0807)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-pf, body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover) > i.ms-rf{ display:none!important; } body[data-ms-fx] #root [data-ms-rcw="prem"]::before{ display:none!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b)::before{ display:none!important; } /* 금선 2줄: 바깥 굵은 금선 + 안쪽 가는 금선 */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b)::after{ content:''!important; display:block!important; position:absolute; inset:0; z-index:9; pointer-events:none; border-radius:12px; box-shadow:inset 0 0 0 1.5px #c9a35f, inset 0 0 0 4.5px #0e0a08, inset 0 0 0 5.5px rgba(214,174,104,.6)!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ display:block!important; padding:9px 9px 13px!important; height:auto!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ aspect-ratio:4 / 5!important; height:auto!important; border-radius:6px!important; overflow:hidden; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ object-position:center 14%!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::after{ background:linear-gradient(180deg, transparent 60%, rgba(11,8,7,.92) 100%)!important; } body[data-ms-fx] :is(.janpansu-hero-oath,.gwideok-hero-oath){ bottom:8px!important; padding:0 8px!important; font-size:9.5px!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ display:block!important; padding:10px 4px 0!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title){ font-size:18px!important; } body[data-ms-fx] :is(.janpansu-profile-title,.gwideok-profile-title) .post{ display:inline!important; font-size:11px!important; letter-spacing:.05em!important; margin-left:3px!important; } body[data-ms-fx] :is(.janpansu-profile-hanja,.gwideok-profile-hanja){ font-size:10px!important; margin-top:4px!important; } body[data-ms-fx] :is(.janpansu-profile-years,.gwideok-profile-years){ font-size:9.5px!important; margin-top:2px!important; } body[data-ms-fx] :is(.janpansu-profile-divider,.gwideok-profile-divider){ display:none!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:17px!important; right:17px!important; left:auto!important; bottom:auto!important; transform:none!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:12px!important; padding:9px 6px!important; font-size:12px!important; } /* ═══ v14 — 버튼 톤 다운(고금색+금테 / 진홍+금선) · 두 만신 카드 세련된 테두리(메인 카드 모서리 장식)+별밤 배경+정보 보강 · 배경 더 어둡게 ═══ */ :root{ --btn-gold:linear-gradient(180deg,#b48f52 0%,#8c6a33 52%,#634a22 100%); --btn-gold-sh:inset 0 0 0 1px rgba(245,222,160,.72), inset 0 0 0 2px rgba(50,32,12,.55), inset 0 1px 0 rgba(255,238,196,.3), 0 4px 12px rgba(0,0,0,.55); --btn-red:linear-gradient(180deg,#5c121a,#360a10); --btn-red-sh:inset 0 0 0 1px rgba(214,174,104,.85), inset 0 1px 0 rgba(255,200,180,.14), 0 4px 12px rgba(0,0,0,.5); } /* 홈 카드 버튼 */ .ms-art .cta{ background:var(--btn-gold)!important; box-shadow:var(--btn-gold-sh)!important; } .ms-art .cta::after{ color:#1b1207!important; text-shadow:0 1px 0 rgba(255,232,180,.22)!important; } .ms-art .cta::before{ opacity:.35; } /* 위 2명: 진홍 + 금선 */ body[data-ms-fx] #root [data-ms-rc="std"] button.w-full:not(#_a):not(#_b):not(#_c){ background:var(--btn-red)!important; box-shadow:var(--btn-red-sh)!important; } body[data-ms-fx] #root [data-ms-rc="std"] button.w-full span:not(#_a):not(#_b):not(#_c){ color:#e9cf8f!important; -webkit-text-fill-color:#e9cf8f!important; } /* 아래 두 만신 버튼·상담 보내기: 고금색 + 금테 */ body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ background:var(--btn-gold)!important; box-shadow:var(--btn-gold-sh)!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta)::after{ opacity:.35; } body[data-ms-fx] #root div.relative.px-3.py-3.z-10 button:not(#_a){ background:var(--btn-gold)!important; box-shadow:var(--btn-gold-sh)!important; color:#1b1207!important; } body[data-ms-fx] :is(.janpansu-send,.gwideok-send){ background:var(--btn-gold)!important; box-shadow:var(--btn-gold-sh)!important; color:#1b1207!important; } /* 두 만신 카드: 겹 금선(바깥·안) + 메인 카드 그림의 금 덩굴 모서리 4개 + 깊은 별밤 배경 */ body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b){ border-radius:7px!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 560'%3E%3Cg fill='%23e9cf98'%3E%3Ccircle cx='22' cy='40' r='.7' opacity='.7'/%3E%3Ccircle cx='160' cy='70' r='.6' opacity='.5'/%3E%3Ccircle cx='120' cy='22' r='.9' opacity='.8'/%3E%3Ccircle cx='60' cy='120' r='.5' opacity='.5'/%3E%3Ccircle cx='178' cy='150' r='.8' opacity='.6'/%3E%3Ccircle cx='34' cy='300' r='.6' opacity='.5'/%3E%3Ccircle cx='150' cy='330' r='.7' opacity='.6'/%3E%3Ccircle cx='90' cy='360' r='.5' opacity='.4'/%3E%3Ccircle cx='176' cy='420' r='.6' opacity='.5'/%3E%3Ccircle cx='26' cy='470' r='.8' opacity='.6'/%3E%3Ccircle cx='110' cy='520' r='.6' opacity='.5'/%3E%3Ccircle cx='70' cy='250' r='.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat, radial-gradient(90% 40% at 50% 22%, rgba(40,52,100,.42), transparent 70%), radial-gradient(80% 40% at 50% 100%, rgba(30,36,74,.4), transparent 70%), linear-gradient(180deg,#0b0e1c,#06070e)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b)::after{ border-radius:7px!important; box-shadow:inset 0 0 0 1.4px rgba(205,166,98,.95), inset 0 0 0 5.2px #090b16, inset 0 0 0 6.1px rgba(205,166,98,.7)!important; } body[data-ms-fx] #root :is([data-ms-rc="prem"],.mansin-janpansu-takeover,.mansin-gwideok-takeover):not(#_a):not(#_b)::before{ content:''!important; display:block!important; position:absolute; inset:0; z-index:10; pointer-events:none; width:auto!important; height:auto!important; transform:none!important; animation:none!important; background:url('/icons/corner_tl.webp') left top/54px 54px no-repeat, url('/icons/corner_tr.webp') right top/54px 54px no-repeat, url('/icons/corner_bl.webp') left bottom/54px 54px no-repeat, url('/icons/corner_br.webp') right bottom/54px 54px no-repeat!important; } body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ padding:13px 13px 16px!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ aspect-ratio:3 / 4!important; border-radius:4px!important; box-shadow:0 0 0 1px rgba(205,166,98,.35)!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ object-position:center 10%!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:21px!important; right:21px!important; } body[data-ms-fx] :is(.janpansu-profile-plaque,.gwideok-profile-plaque){ padding:11px 2px 0!important; } body[data-ms-fx] :is(.janpansu-profile-divider,.gwideok-profile-divider){ display:block!important; margin:9px 10px 2px!important; } body[data-ms-fx] :is(.janpansu-profile-bio,.gwideok-profile-bio){ display:block!important; } body[data-ms-fx] :is(.janpansu-profile-bio,.gwideok-profile-bio) .row{ padding:5px 0!important; border-bottom:1px solid rgba(205,166,98,.1)!important; } body[data-ms-fx] :is(.janpansu-profile-bio,.gwideok-profile-bio) .lab{ font-size:8.5px!important; margin-bottom:2px!important; letter-spacing:.24em!important; color:rgba(214,174,104,.7)!important; } body[data-ms-fx] :is(.janpansu-profile-bio,.gwideok-profile-bio) .val{ font-size:10.5px!important; line-height:1.35!important; color:rgba(239,229,210,.88)!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta){ margin-top:11px!important; } /* 배경 전반 더 어둡게 */ #ms-fx[data-bg="home"] .bg{ filter:brightness(.5) saturate(.85)!important; } #ms-fx:is([data-bg="saju"],[data-bg="astro"],[data-bg="tarot"],[data-bg="dream"]) .tint{ background:linear-gradient(180deg,rgba(6,5,7,.76) 0%,rgba(6,5,7,.7) 35%,rgba(6,5,7,.84) 70%,rgba(6,5,7,.96) 100%)!important; } #ms-fx[data-bg="other"] .tint{ background:linear-gradient(180deg,rgba(6,5,7,.86),rgba(6,5,7,.94))!important; } /* 가격 배지: 얼굴을 가리지 않게 그림 위 띠 가운데로 */ body[data-ms-fx] :is(.janpansu-profile-card,.gwideok-profile-card){ padding-top:30px!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges){ top:7px!important; right:auto!important; left:50%!important; transform:translateX(-50%)!important; } body[data-ms-fx] :is(.janpansu-profile-badges,.gwideok-profile-badges) > *{ background:rgba(9,11,22,.9)!important; border:1px solid rgba(205,166,98,.55)!important; color:#e9cf8f!important; padding:2px 9px!important; font-size:9.5px!important; } /* ═══ v15 — 채팅 그림 라운딩 · 금 버튼 글자 더 진하게 · 붉은 버튼 금선(outline) · 입력칸 속 더 어둡게 · 채팅 아이콘 면(채움)으로 ═══ */ /* 채팅 속 캐릭터 그림: 모서리 둥글게 */ body[data-ms-fx] #root div:has(> img[src*="/characters/"]):not(.flex-shrink-0):not([data-ms-rc] *):not(#_a){ border-radius:14px!important; overflow:hidden!important; } body[data-ms-fx] #root div:has(> img[src*="/characters/"]):not(.flex-shrink-0):not([data-ms-rc] *) > img{ border-radius:14px!important; } body[data-ms-fx] #root div:has(> img[src*="/characters/"]):not(.flex-shrink-0)::after{ border-radius:14px!important; } /* 금 버튼 글자: 더 진하고 또렷하게 */ .ms-art .cta::after{ color:#0e0803!important; font-weight:800!important; text-shadow:none!important; } body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta), body[data-ms-fx] :is(.janpansu-profile-cta,.gwideok-profile-cta) *{ color:#0e0803!important; font-weight:800!important; text-shadow:none!important; } body[data-ms-fx] :is(.janpansu-send,.gwideok-send){ color:#0e0803!important; font-weight:800!important; } /* 붉은 버튼 금선: 인라인 border !important 를 피해 outline 으로 */ body[data-ms-fx] #root [data-ms-rc="std"] button.w-full:not(#_a):not(#_b):not(#_c){ outline:1.5px solid #c9a35f!important; outline-offset:-1.5px; } /* 입력칸: 속을 더 어둡게 + 금 실선 */ body[data-ms-fx] :is(#root, #janpansu-modal, #gwideok-modal, body) :is(textarea, input[type="text"], input[type="number"], input[type="tel"], input[type="search"], input:not([type]), select):not(#_a){ background-color:rgba(10,8,6,.9)!important; color:#f1e7d6!important; border:1px solid rgba(214,174,104,.42)!important; border-radius:12px!important; box-shadow:inset 0 1px 3px rgba(0,0,0,.45)!important; outline:none!important; } body[data-ms-fx] :is(#root, #janpansu-modal, #gwideok-modal, body) :is(textarea, input, select):not(#_a):focus{ border-color:rgba(243,216,151,.85)!important; box-shadow:0 0 0 3px rgba(240,190,100,.14)!important; } body[data-ms-fx] :is(#root, body) :is(textarea, input):not(#_a)::placeholder{ color:rgba(239,229,210,.38)!important; } body[data-ms-fx] #root div.relative.px-3.py-3.z-10:not(#_a){ background:rgba(8,6,6,.92)!important; } /* 채팅 아이콘: 선 → 면(채움) 단순 아이콘 */ body[data-ms-fx] #root button:has(> svg:is(.lucide-arrow-left,.lucide-repeat,.lucide-gift,.lucide-send)):not(#_a){ position:relative; } body[data-ms-fx] #root button > svg:is(.lucide-arrow-left,.lucide-repeat,.lucide-gift,.lucide-send){ opacity:0!important; } body[data-ms-fx] #root button:has(> svg:is(.lucide-arrow-left,.lucide-repeat,.lucide-gift,.lucide-send))::after{ content:''; position:absolute; left:50%; top:50%; width:19px; height:19px; transform:translate(-50%,-50%); pointer-events:none; background:#dcb871; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; } body[data-ms-fx] #root button:has(> svg.lucide-arrow-left){ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 3.6a1.3 1.3 0 0 1 0 1.9L6.4 10.4H20a1.6 1.6 0 0 1 0 3.2H6.4l4.8 4.9a1.3 1.3 0 0 1-1.9 1.9L2.3 13.2a1.7 1.7 0 0 1 0-2.4l7-7.2a1.3 1.3 0 0 1 1.9 0z'/%3E%3C/svg%3E"); } body[data-ms-fx] #root button:has(> svg.lucide-repeat){ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 1.5 22 6.2l-5.5 4.8V7.8H7.3A2.3 2.3 0 0 0 5 10.1v1.6H2.2v-1.6A5.1 5.1 0 0 1 7.3 5h9.2zM7.5 22.5 2 17.8 7.5 13v3.2h9.2a2.3 2.3 0 0 0 2.3-2.3v-1.6h2.8v1.6A5.1 5.1 0 0 1 16.7 19H7.5z'/%3E%3C/svg%3E"); } body[data-ms-fx] #root button:has(> svg.lucide-gift){ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 8.2h8.4v4.3H2.5zM13.1 8.2h8.4v4.3h-8.4zM4 13.7h6.9V21H5.3A1.3 1.3 0 0 1 4 19.7zM13.1 13.7H20v6a1.3 1.3 0 0 1-1.3 1.3h-5.6zM11.4 7.2C9.9 3.9 5.6 2.1 5.6 5c0 1.6 2.1 2.2 5.8 2.2zM12.6 7.2c1.5-3.3 5.8-5.1 5.8-2.2 0 1.6-2.1 2.2-5.8 2.2z'/%3E%3C/svg%3E"); } body[data-ms-fx] #root button:has(> svg.lucide-send){ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 2.4a.8.8 0 0 1 .3.9l-6.8 17.9a.9.9 0 0 1-1.6.1l-3.1-6.2 4.6-6.4-6.4 4.6-6.2-3.1a.9.9 0 0 1 .1-1.6L20.7 2.1a.8.8 0 0 1 .9.3z'/%3E%3C/svg%3E"); } body[data-ms-fx] #root div.relative.px-3.py-3.z-10 button:has(> svg.lucide-send)::after{ background:#120b04!important; width:18px; height:18px; } /* ═══ v16 — 홈: 萬神 붓글씨를 달 한가운데로(ms-art.js 가 달 위치 계산) · 사주가 목록 위 2명: 진홍 그라데이션 배경 + 밝은 금 그라데이션 테두리 ═══ */ #ms-fx .cal b{ width:min(40vw,150px)!important; transform:translate(-50%,-50%)!important; } body[data-ms-fx][data-ms-theme="home"] div.text-center.flex-shrink-0 > div:nth-child(2), body[data-ms-fx][data-ms-theme="home"] div.text-center.flex-shrink-0 > div:nth-child(3){ transform:translateY(var(--ms-ty,70px))!important; text-shadow:0 1px 8px rgba(0,0,0,.98),0 0 14px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.95)!important; } /* 붓글씨 뒤 어둠막도 달 중심으로 */ #ms-fx[data-bg="home"] .tint{ background:radial-gradient(40% 13% at 50% var(--ms-moon-y,135px),rgba(6,5,7,.72),rgba(6,5,7,.4) 62%,transparent),radial-gradient(60% 16% at 50% 14%,rgba(6,5,7,.5),rgba(6,5,7,.2) 70%,transparent),linear-gradient(180deg,rgba(6,5,7,.4) 0%,rgba(6,5,7,.28) 30%,rgba(6,5,7,.66) 50%,rgba(6,5,7,.96) 64%,rgba(6,5,7,.98) 100%)!important; } /* 사주가 목록 위 2명: 카드 배경 = 진홍 → 아래로 점점 어둡게 */ body[data-ms-fx] #root [data-ms-rc="std"]:not(#_a):not(#_b):not(#_c){ background:linear-gradient(180deg,#701620 0%,#541019 26%,#380a10 56%,#1b060a 80%,#0b0405 100%)!important; } /* 그림 아래쪽 어둠막도 같은 진홍으로 이어지게 */ body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child > div.absolute.bottom-0.left-0.right-0.pointer-events-none[style*="height: 50%"]:not(#_a):not(#_b){ background:linear-gradient(180deg,transparent 0%,rgba(56,10,16,.42) 42%,rgba(56,10,16,.96) 100%)!important; } /* 그림 위쪽에도 은은한 진홍 기운(그림 색과 배경이 한 덩어리로 보이게) */ body[data-ms-fx] #root [data-ms-rc="std"] > div.relative:first-child::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(150,26,38,.30) 0%,rgba(150,26,38,.08) 55%,transparent 100%); mix-blend-mode:soft-light; } /* 테두리: 밝은 연금색 → 배경 진홍으로 이어지는 그라데이션 스트로크 */ body[data-ms-fx] #root [data-ms-rc="std"]:not(#_a):not(#_b)::after{ content:''!important; display:block!important; position:absolute; inset:0; z-index:12; pointer-events:none; border-radius:12px; padding:1.6px; background:linear-gradient(180deg,rgba(250,230,180,.96) 0%,rgba(226,182,126,.78) 36%,rgba(172,88,80,.52) 70%,rgba(112,32,38,.36) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ═══ v17 — 2단 풀이 이름표(〔명리〕 〔쉽게 풀면〕) · 오늘의 운세 안내 ═══ */ .ms-tag{ display:inline-block; margin:6px 8px 4px 0; padding:2px 9px; border-radius:999px; font:700 10.5px/1.5 Pretendard,sans-serif; letter-spacing:.06em; vertical-align:1px; } .ms-tag-h{ background:rgba(201,163,95,.16); color:#e6cb8e; box-shadow:inset 0 0 0 1px rgba(201,163,95,.55); font-family:'Noto Serif KR',serif; } .ms-tag-e{ background:rgba(239,231,218,.10); color:#efe7da; box-shadow:inset 0 0 0 1px rgba(239,231,218,.28); } .ms-hard{ font-family:'Noto Serif KR',serif; color:#dcc38b; font-size:.94em; line-height:1.7; letter-spacing:-.01em; } /* ═══ 보름달 모션 — 달이 숨을 쉬고, 그 빛이 건물 금선을 따라 위에서 아래로 번지며, 구름이 달 앞을 천천히 지나간다 ═══ 원칙: opacity·transform 만 움직인다 · 주기를 서로 다르게(9s/13s/7.3s/…) 해서 반복 티가 안 나게 · 모든 곡선은 사인 같은 ease-in-out 구조: .bg 와 .mrig/.mrig2 는 같은 박스·같은 transform-origin(달 중심)·같은 확대 모션 → 달을 향해 천천히 밀고 들어가도 겹쳐진 빛이 어긋나지 않는다. (예전 .bg 켄번스는 위로 쓸려 올라가서 달 위의 붓글씨가 달 중심에서 점점 벗어났다 → 달 중심을 기준으로 확대만 한다) */ @keyframes msKenMoon{ from{ transform:scale(1.02); } to{ transform:scale(1.085); } } #ms-fx .mrig, #ms-fx .mrig2{ position:absolute; inset:-5%; display:none; pointer-events:none; } #ms-fx[data-bg="home"] .mrig, #ms-fx[data-bg="home"] .mrig2{ display:block; } #ms-fx[data-bg="home"] .bg, #ms-fx[data-bg="home"] .mrig, #ms-fx[data-bg="home"] .mrig2{ transform-origin:50% var(--ms-moon-by,135px); animation:msKenMoon 46s cubic-bezier(.45,.05,.55,.95) infinite alternate; will-change:transform; } #ms-fx[data-bg="home"] .crest{ display:none; } /* 달과 위치가 안 맞던 임의의 원형 후광·고리는 걷는다 — 이제 달 자체가 빛난다 */ /* 곡선: 들이쉬는 숨은 길고 부드럽게, 내쉬는 숨은 조금 더 길게. 구간마다 사인형 이징 */ @keyframes msMoonCore{ 0%{opacity:calc(var(--pk,1)*.05)} 17%{opacity:calc(var(--pk,1)*.42)} 33%{opacity:calc(var(--pk,1)*.86)} 46%{opacity:var(--pk,1)} 60%{opacity:calc(var(--pk,1)*.66)} 77%{opacity:calc(var(--pk,1)*.28)} 100%{opacity:calc(var(--pk,1)*.05)} } @keyframes msMoonBloom{ 0%{opacity:.14;transform:translate(-50%,-50%) scale(.97)} 28%{opacity:.7;transform:translate(-50%,-50%) scale(1.02)} 52%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} 79%{opacity:.4;transform:translate(-50%,-50%) scale(1.01)} 100%{opacity:.14;transform:translate(-50%,-50%) scale(.97)} } @keyframes msRing{ 0%{opacity:0;transform:translate(-50%,-50%) scale(1)} 9%{opacity:.5} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)} } @keyframes msFlick{ 0%{opacity:.5;transform:translate(-50%,-50%) scale(.96)} 11%{opacity:.82} 23%{opacity:.6} 37%{opacity:.96;transform:translate(-50%,-50%) scale(1.04)} 52%{opacity:.7} 68%{opacity:.9} 83%{opacity:.56} 100%{opacity:.5;transform:translate(-50%,-50%) scale(.96)} } @keyframes msCloudA{ from{transform:translate3d(-30%,0,0)} to{transform:translate3d(24%,0,0)} } @keyframes msCloudB{ from{transform:translate3d(26%,0,0) scaleX(-1)} to{transform:translate3d(-22%,0,0) scaleX(-1)} } @keyframes msCloudFade{ 0%,100%{opacity:.18} 38%{opacity:.62} 70%{opacity:.34} } /* 달 본체: 기본(어두운 상태)은 배경 그대로, 차오르면 원래 그림의 밝은 달이 비쳐 나온다(분화구 결 그대로) */ #ms-fx .mdisc{ position:absolute; inset:0; background:url('/icons/gate_bg.jpg') center 66px/cover no-repeat; filter:brightness(1.12) saturate(1.1); opacity:0; --pk:.82; /* 실제 그림의 달 모양 그대로(기와 능선에 가린 아랫부분까지) — 원형으로 그리면 지붕 위로 둥둥 뜬다 */ -webkit-mask:url('/icons/moon_mask.png') center 66px / cover no-repeat; mask:url('/icons/moon_mask.png') center 66px / cover no-repeat; animation:msMoonCore 9s cubic-bezier(.37,0,.63,1) infinite; } #ms-fx .mbloom{ position:absolute; left:50%; top:var(--ms-moon-by,135px); width:calc(var(--ms-moon-r,80px)*5.4); aspect-ratio:1; border-radius:50%; opacity:.14; background:radial-gradient(closest-side, rgba(255,228,160,.46) 0%, rgba(255,214,130,.30) 30%, rgba(255,196,104,.12) 58%, rgba(255,190,100,0) 100%); animation:msMoonBloom 13s cubic-bezier(.37,0,.63,1) infinite; will-change:transform,opacity; } #ms-fx .mring{ position:absolute; left:50%; top:var(--ms-moon-by,135px); width:calc(var(--ms-moon-r,80px)*2.04); aspect-ratio:1; border-radius:50%; opacity:0; border:1px solid rgba(255,230,170,.7); box-shadow:0 0 10px 1px rgba(255,214,140,.38), inset 0 0 10px rgba(255,214,140,.22); animation:msRing 9s cubic-bezier(.16,.62,.3,1) infinite; will-change:transform,opacity; } #ms-fx .mring.r2{ animation-delay:-4.5s; border-color:rgba(255,226,160,.55); } #ms-fx .mcloud{ position:absolute; left:50%; top:var(--ms-moon-by,135px); width:calc(var(--ms-img-w,500px)*2.4); aspect-ratio:2400/520; margin-left:calc(var(--ms-img-w,500px)*-1.2); opacity:.18; background:url('/icons/moon_cloud.webp') center/100% 100% no-repeat; filter:blur(1.5px); will-change:transform,opacity; } #ms-fx .mcloud.c1{ margin-top:calc(var(--ms-img-w,500px)*-.30); animation:msCloudA 71s cubic-bezier(.45,.05,.55,.95) infinite alternate, msCloudFade 23s ease-in-out infinite; } #ms-fx .mcloud.c2{ margin-top:calc(var(--ms-img-w,500px)*-.17); animation:msCloudB 97s cubic-bezier(.45,.05,.55,.95) infinite alternate, msCloudFade 31s ease-in-out -11s infinite; } /* 붓글씨 뒤 어둠막 — 달이 가장 밝을 때도 글씨가 또렷하도록 달 위에 얹는 은은한 그늘 */ #ms-fx .mscrim{ position:absolute; left:50%; top:calc(var(--ms-moon-by,135px) - 8px); width:calc(var(--ms-moon-r,80px)*3.4); height:calc(var(--ms-moon-r,80px)*2.3); transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(6,5,7,.52), rgba(6,5,7,.28) 58%, rgba(6,5,7,0) 100%); } /* 건물 금선: 달빛이 지붕 → 처마 → 기둥 순으로 번진다(띠마다 지연·세기가 다름) — 같은 그림의 밝은 복제본을 띠 모양으로 비춘다 */ #ms-fx .bb{ position:absolute; inset:0; background:url('/icons/gate_bg.jpg') center 66px/cover no-repeat; filter:brightness(2.5) saturate(1.22) contrast(1.06); opacity:0; animation:msMoonCore 9s cubic-bezier(.37,0,.63,1) infinite; } #ms-fx .bb1{ --pk:.78; animation-delay:.5s; -webkit-mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.165), #000 calc(66px + var(--ms-img-h,880px)*.20), #000 calc(66px + var(--ms-img-h,880px)*.30), transparent calc(66px + var(--ms-img-h,880px)*.345)); mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.165), #000 calc(66px + var(--ms-img-h,880px)*.20), #000 calc(66px + var(--ms-img-h,880px)*.30), transparent calc(66px + var(--ms-img-h,880px)*.345)); } #ms-fx .bb2{ --pk:.62; animation-delay:1.15s; -webkit-mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.29), #000 calc(66px + var(--ms-img-h,880px)*.33), #000 calc(66px + var(--ms-img-h,880px)*.375), transparent calc(66px + var(--ms-img-h,880px)*.42)); mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.29), #000 calc(66px + var(--ms-img-h,880px)*.33), #000 calc(66px + var(--ms-img-h,880px)*.375), transparent calc(66px + var(--ms-img-h,880px)*.42)); } #ms-fx .bb3{ --pk:.5; animation-delay:1.9s; -webkit-mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.355), #000 calc(66px + var(--ms-img-h,880px)*.40), #000 calc(66px + var(--ms-img-h,880px)*.50), transparent calc(66px + var(--ms-img-h,880px)*.555)); mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.355), #000 calc(66px + var(--ms-img-h,880px)*.40), #000 calc(66px + var(--ms-img-h,880px)*.50), transparent calc(66px + var(--ms-img-h,880px)*.555)); } #ms-fx .bb4{ --pk:.38; animation-delay:2.7s; -webkit-mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.47), #000 calc(66px + var(--ms-img-h,880px)*.52), #000 calc(66px + var(--ms-img-h,880px)*.565), transparent calc(66px + var(--ms-img-h,880px)*.61)); mask-image:linear-gradient(180deg, transparent calc(66px + var(--ms-img-h,880px)*.47), #000 calc(66px + var(--ms-img-h,880px)*.52), #000 calc(66px + var(--ms-img-h,880px)*.565), transparent calc(66px + var(--ms-img-h,880px)*.61)); } /* 등불: 촛불처럼 불규칙하게 깜빡 — 좌우 주기를 달리 */ #ms-fx .lant{ position:absolute; top:calc(66px + var(--ms-img-h,880px)*.373); width:calc(var(--ms-img-w,500px)*.26); aspect-ratio:1; border-radius:50%; opacity:.5; will-change:transform,opacity; background:radial-gradient(closest-side, rgba(255,198,112,.55), rgba(255,176,86,.24) 46%, rgba(255,170,80,0) 100%); } #ms-fx .lant.ll{ left:calc(50% - var(--ms-img-w,500px)*.40); animation:msFlick 3.3s ease-in-out infinite; } #ms-fx .lant.lr{ left:calc(50% + var(--ms-img-w,500px)*.401); animation:msFlick 4.1s ease-in-out -1.7s infinite; } @media (prefers-reduced-motion:reduce){ #ms-fx[data-bg="home"] .bg, #ms-fx .mrig, #ms-fx .mrig2, #ms-fx .mdisc, #ms-fx .mbloom, #ms-fx .mring, #ms-fx .mcloud, #ms-fx .bb, #ms-fx .lant{ animation:none!important; } #ms-fx .mdisc{ opacity:.35; } #ms-fx .mring{ display:none; } #ms-fx .bb{ opacity:.18; } #ms-fx .lant{ opacity:.55; } } /* 사주가 선택 화면 하단 두 분(천귀덕·정판수) 사진 — 모서리를 더 둥글게 */ body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero){ border-radius:26px!important; overflow:hidden!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero) img{ border-radius:26px!important; } body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::before, body[data-ms-fx] :is(.janpansu-profile-hero,.gwideok-profile-hero)::after{ border-radius:26px!important; } /* ═══ 풀이 묶음(카드) — 제목+〔명리〕는 어두운 윗면 한 묶음, 〔쉽게 풀면〕은 그 아래 밝은 면 패널 ═══ */ .gwideok-msg-bubble, .janpansu-msg-bubble{ counter-reset:rdc; } .gwideok-msg-row.assistant .gwideok-msg-bubble:has(.rd-card), .janpansu-msg-row.assistant .janpansu-msg-bubble:has(.rd-card){ max-width:94%!important; padding:11px 11px 13px!important; } .rd-pre{ margin:0 2px 2px; white-space:normal; } .rd-card{ counter-increment:rdc; margin:16px 0 0; border-radius:16px; overflow:hidden; white-space:normal; background:#120d09; border:1px solid rgba(217,180,106,.38); box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,232,170,.12); } .rd-card:first-child{ margin-top:2px; } .rd-top{ padding:14px 15px 14px; background:linear-gradient(180deg,#31231a 0%,#1b130c 100%); } .rd-title{ display:flex; align-items:center; gap:10px; font:800 17px/1.3 'Nanum Myeongjo','Noto Serif KR',serif; color:#f9e8b6; letter-spacing:-.01em; } .rd-title::before{ content:counter(rdc); flex:none; width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 13px/1 Pretendard,sans-serif; color:#24180a; background:linear-gradient(160deg,#fcecb8,#cf9f4d 70%,#9a7230); box-shadow:0 0 0 2px rgba(0,0,0,.4), 0 0 12px rgba(240,190,100,.4); } .rd-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(217,180,106,.6),rgba(217,180,106,0)); } .rd-hard{ margin-top:11px; padding-top:11px; border-top:1px solid rgba(217,180,106,.2); font-family:'Noto Serif KR',serif; font-size:14px; font-weight:500; line-height:1.78; color:#e0cb9a; white-space:normal; } .rd-hard, .rd-hard *:not(.ms-tag){ font-weight:500; } .rd-hard .rd-b{ font-weight:700; color:#f5dc9c; } .rd-gap{ display:block; height:9px; } .rd-hard .ms-hard{ font-size:1em; color:inherit; } .rd-hard .ms-tag, .rd-easy .ms-tag{ display:table; margin:0 0 6px; } .rd-hard2{ margin:0; padding:13px 15px 0; border-top:0; background:#120d09; } .rd-easy{ position:relative; padding:14px 15px 16px 19px; background:linear-gradient(180deg,rgba(248,233,198,.19),rgba(248,233,198,.11)); border-top:1px solid rgba(217,180,106,.45); color:#fff8e8; font-size:15.5px; line-height:1.82; white-space:normal; } .rd-easy::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#f9deA0,#b8873a); } .rd-easy .ms-tag-e{ padding:3px 11px; background:linear-gradient(160deg,#f9deA0,#c99a4d); color:#24180b; box-shadow:none; font-weight:800; font-size:11px; } .rd-plain{ position:relative; padding:14px 15px 16px 19px; background:linear-gradient(180deg,rgba(248,233,198,.19),rgba(248,233,198,.11)); border-top:1px solid rgba(217,180,106,.45); font-size:15.5px; line-height:1.82; color:#fff8e8; white-space:normal; } .rd-plain::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#f9deA0,#b8873a); } .rd-after{ margin:16px 4px 0; font-size:15px; line-height:1.78; color:#eadfc6; white-space:normal; } /* ═══ 오행 엠블럼(3D 메달 + 고유색) ═══ */ @keyframes mg3-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } } @keyframes mg3-spin{ to{ transform:rotate(360deg) } } @keyframes mg3-breathe{ 0%,100%{ opacity:.55; transform:scale(.94) } 50%{ opacity:1; transform:scale(1.06) } } @keyframes mg3-pop{ from{ opacity:0; transform:scale(.6) translateY(8px) } to{ opacity:1; transform:none } } .mansin-saju-graphic .mg3-hero{ position:relative; display:flex; align-items:center; gap:14px; margin-top:4px; padding:14px 14px 14px 10px; border-radius:18px; overflow:hidden; background:radial-gradient(70% 120% at 18% 50%, var(--c3), transparent 62%), linear-gradient(180deg,#22180f,#0f0a07); border:1px solid var(--c5); box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,236,190,.12); } .mansin-saju-graphic .mg3-hfx{ position:relative; flex:none; width:118px; height:118px; display:flex; align-items:center; justify-content:center; } .mansin-saju-graphic .mg3-rays{ position:absolute; inset:-14px; border-radius:50%; background:repeating-conic-gradient(from 0deg, var(--c3) 0deg 6deg, transparent 6deg 22deg); -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 70%); mask-image:radial-gradient(circle, #000 30%, transparent 70%); animation:mg3-spin 40s linear infinite; } .mansin-saju-graphic .mg3-aura{ position:absolute; inset:4px; border-radius:50%; background:radial-gradient(closest-side, var(--c5), transparent); animation:mg3-breathe 4.2s ease-in-out infinite; } .mansin-saju-graphic .mg3-hicon{ position:relative; width:104px; height:104px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); animation:mg3-float 5s ease-in-out infinite; } .mansin-saju-graphic .mg3-htxt{ position:relative; min-width:0; } .mansin-saju-graphic .mg3-htxt span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; color:rgba(245,230,211,.6); } .mansin-saju-graphic .mg3-htxt b{ display:block; margin-top:3px; font:800 22px/1.2 'Nanum Myeongjo','Noto Serif KR',serif; color:var(--c); text-shadow:0 0 16px var(--c3); } .mansin-saju-graphic .mg3-htxt em{ display:block; margin-top:5px; font-style:normal; font-size:14px; line-height:1.5; color:rgba(250,240,222,.88); } .mansin-saju-graphic .mg3-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:14px; padding:12px 4px 10px; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border:1px solid rgba(245,230,211,.1); } .mansin-saju-graphic .mg3-el{ text-align:center; animation:mg3-pop .7s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(var(--i) * .09s + .15s); } .mansin-saju-graphic .mg3-ic{ position:relative; width:60px; height:60px; margin:0 auto 6px; } .mansin-saju-graphic .mg3-ic svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; } .mansin-saju-graphic .mg3-ic circle{ fill:none; stroke-width:3.4; } .mansin-saju-graphic .mg3-ic circle.bg{ stroke:rgba(255,255,255,.1); } .mansin-saju-graphic .mg3-ic circle.fg{ stroke:var(--c); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--c)); } .mansin-saju-graphic .mg3-ic img{ position:absolute; left:7px; top:7px; width:46px; height:46px; } .mansin-saju-graphic .mg3-el.dom .mg3-ic img{ filter:drop-shadow(0 0 8px var(--c3)); } .mansin-saju-graphic .mg3-el b{ display:block; font-size:13px; font-weight:800; color:var(--c); white-space:nowrap; } .mansin-saju-graphic .mg3-el i{ display:block; margin-top:1px; font-style:normal; font-size:10.5px; color:rgba(245,230,211,.55); white-space:nowrap; } .mansin-saju-graphic .mg3-el.off .mg3-ic img{ filter:grayscale(1) brightness(.45); opacity:.6; } .mansin-saju-graphic .mg3-el.off .mg3-ic circle.bg{ stroke-dasharray:3 4; stroke:rgba(255,255,255,.22); } .mansin-saju-graphic .mg3-el.off b{ color:rgba(245,230,211,.42); } @media (prefers-reduced-motion:reduce){ .mansin-saju-graphic .mg3-rays, .mansin-saju-graphic .mg3-aura, .mansin-saju-graphic .mg3-hicon, .mansin-saju-graphic .mg3-el{ animation:none; } } /* ═══ 타로: '다른 타로 보기'를 첫 메뉴로 크게 강조, 질문 칩은 그 아래 ═══ */ body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button.ms-open-tarot:not(#_a):not(#_b){ grid-column:1 / -1!important; justify-self:stretch!important; display:flex!important; align-items:center; justify-content:space-between; min-height:56px; padding:14px 18px!important; border-radius:14px!important; border:0!important; background:linear-gradient(160deg,#f6dc98 0%,#d6a955 55%,#a7782f 100%)!important; color:#24180a!important; -webkit-text-fill-color:#24180a!important; font:800 16.5px/1.2 'Nanum Myeongjo','Noto Serif KR',serif!important; letter-spacing:-.01em; box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 22px rgba(240,190,100,.28), inset 0 1px 0 rgba(255,250,230,.6)!important; } body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button.ms-open-tarot:not(#_a):not(#_b)::after{ content:'카드 펼치기 ›'; font:700 12.5px Pretendard,sans-serif; color:rgba(36,24,10,.75); } body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button.ms-open-tarot ~ button{ font-size:14px!important; } /* ═══ 캐릭터별 고정 톤 — 한 캐릭터 화면 안에서는 이 톤 하나로 통일한다 ═══ 천귀덕 = 적자(赤紫·레드퍼플) · 정판수 = 청동·호박 · 운명을 보는 자(하온) = 금빛 · 연애·인연(루나) = 로즈골드 (오행 고유색은 기운 표시에만 쓰고, 테두리·제목·버튼·면은 캐릭터 톤을 따른다) */ #gwideok-modal{ --t-acc:#ff9fb3; --t-acc2:#e0567a; --t-top:#3b1329; --t-top2:#1f0a17; --t-card:#14070f; --t-line:rgba(255,159,179,.34); --t-soft:rgba(255,159,179,.12); --t-txt:#ffe9ef; --t-hard:#f4c6d2; --t-easy1:rgba(255,205,218,.17); --t-easy2:rgba(255,205,218,.09); --t-grad:linear-gradient(160deg,#ffbccb,#e0567a 60%,#9a2a51); --t-ink:#2a0a17; --t-glow:rgba(224,86,122,.4); } #janpansu-modal{ --t-acc:#ecc58e; --t-acc2:#c48a3e; --t-top:#33240f; --t-top2:#1b1209; --t-card:#120d07; --t-line:rgba(236,197,142,.34); --t-soft:rgba(236,197,142,.12); --t-txt:#fcf0dc; --t-hard:#e8cf9f; --t-easy1:rgba(248,228,190,.17); --t-easy2:rgba(248,228,190,.09); --t-grad:linear-gradient(160deg,#f5dcaf,#c48a3e 60%,#7d5420); --t-ink:#24170a; --t-glow:rgba(196,138,62,.4); } /* 헤더 — 뒤로가기(왼쪽)로 통일 */ body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-modal-header,.janpansu-modal-header){ background:linear-gradient(180deg,var(--t-top),rgba(8,4,6,.94))!important; border-bottom:1px solid var(--t-line)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .ms-back{ order:-1; width:40px!important; height:40px!important; min-width:40px!important; margin-right:2px; background:rgba(0,0,0,.35)!important; border:1.5px solid var(--t-acc)!important; color:var(--t-acc)!important; box-shadow:0 0 12px var(--t-glow)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-modal-name,.janpansu-modal-name){ color:var(--t-txt)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-modal-sub,.janpansu-modal-sub){ color:var(--t-acc)!important; opacity:.85!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-modal-coins,.janpansu-modal-coins){ color:var(--t-txt)!important; background:var(--t-soft)!important; border:1px solid var(--t-line)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-modal-avatar,.janpansu-modal-avatar,.gwideok-msg-avatar,.janpansu-msg-avatar){ box-shadow:0 0 0 1.5px var(--t-acc), 0 0 12px var(--t-glow)!important; border-color:var(--t-acc)!important; } /* 말풍선 */ body[data-ms-fx] #gwideok-modal .gwideok-msg-row.assistant .gwideok-msg-bubble{ background:linear-gradient(180deg,rgba(60,18,42,.92),rgba(32,9,22,.92))!important; border:1px solid var(--t-line)!important; box-shadow:inset 0 1px 0 rgba(255,200,215,.14)!important; } body[data-ms-fx] #janpansu-modal .janpansu-msg-row.assistant .janpansu-msg-bubble{ background:linear-gradient(180deg,rgba(54,38,20,.92),rgba(28,19,10,.92))!important; border:1px solid var(--t-line)!important; box-shadow:inset 0 1px 0 rgba(255,230,190,.14)!important; } body[data-ms-fx] :is(#gwideok-modal .gwideok-msg-row.user .gwideok-msg-bubble, #janpansu-modal .janpansu-msg-row.user .janpansu-msg-bubble){ background:var(--t-soft)!important; border:1px solid var(--t-line)!important; color:var(--t-txt)!important; } /* 풀이 묶음 카드 */ :is(#gwideok-modal,#janpansu-modal) .rd-card{ background:var(--t-card); border-color:var(--t-line); } :is(#gwideok-modal,#janpansu-modal) .rd-top{ background:linear-gradient(180deg,var(--t-top),var(--t-top2)); } :is(#gwideok-modal,#janpansu-modal) .rd-title{ color:var(--t-txt); } :is(#gwideok-modal,#janpansu-modal) .rd-title::before{ background:var(--t-grad); color:var(--t-ink); box-shadow:0 0 0 2px rgba(0,0,0,.4), 0 0 12px var(--t-glow); } :is(#gwideok-modal,#janpansu-modal) .rd-title::after{ background:linear-gradient(90deg,var(--t-line),transparent); } :is(#gwideok-modal,#janpansu-modal) .rd-hard{ color:var(--t-hard); border-top-color:var(--t-line); } :is(#gwideok-modal,#janpansu-modal) .rd-hard .rd-b{ color:var(--t-txt); } :is(#gwideok-modal,#janpansu-modal) .ms-tag-h{ background:var(--t-soft); color:var(--t-acc); box-shadow:inset 0 0 0 1px var(--t-line); } :is(#gwideok-modal,#janpansu-modal) :is(.rd-easy,.rd-plain){ background:linear-gradient(180deg,var(--t-easy1),var(--t-easy2)); border-top-color:var(--t-line); } :is(#gwideok-modal,#janpansu-modal) :is(.rd-easy,.rd-plain)::before{ background:var(--t-grad); } :is(#gwideok-modal,#janpansu-modal) .rd-easy .ms-tag-e{ background:var(--t-grad); color:var(--t-ink); } :is(#gwideok-modal,#janpansu-modal) .rd-b{ color:var(--t-acc); } /* 그래픽 카드 테두리·면 (오행 고유색은 그대로) */ body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic{ background:radial-gradient(120% 80% at 50% 0%, var(--t-soft), transparent 60%), linear-gradient(180deg,var(--t-top2),#0a0507)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic::before{ background:var(--t-grad)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic :is(.mg-spark){ color:var(--t-acc)!important; text-shadow:0 0 10px var(--t-glow)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic :is(.mg-tile,.mg2-dm,.mg-sum,.mg3-row){ border-color:var(--t-line)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg-tile.me{ border-color:var(--t-acc)!important; box-shadow:0 0 18px var(--t-glow)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg-tile s{ background:var(--t-grad)!important; color:var(--t-ink)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg2-dm{ background:linear-gradient(180deg,var(--t-top),var(--t-top2))!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg2-dm b{ color:var(--t-txt)!important; text-shadow:0 0 14px var(--t-glow)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg2-dm em{ color:var(--t-acc)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-saju-graphic .mg-line b{ color:var(--t-acc)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) .mansin-planet-row{ --pc:var(--t-acc)!important; border-color:var(--t-line)!important; } /* 추천 질문·입력창·보내기 */ body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-starter-chip,.janpansu-starter-chip){ background:var(--t-soft)!important; border:1px solid var(--t-line)!important; color:var(--t-txt)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-input,.janpansu-input){ box-shadow:none!important; border:1px solid var(--t-line)!important; } body[data-ms-fx] :is(#gwideok-modal,#janpansu-modal) :is(.gwideok-send,.janpansu-send){ background:var(--t-grad)!important; color:var(--t-ink)!important; box-shadow:0 0 16px var(--t-glow), inset 0 1px 0 rgba(255,255,255,.4)!important; } /* 연애·인연(루나) = 로즈골드 — 말풍선·추천 질문·보내기에만 톤을 얹는다 (하온은 기본 금빛 그대로) */ body[data-ms-fx][data-ms-char="LUNA"] #root div.flex.justify-end div[style*="linear-gradient"]:not(#_a):not(#_b){ background:linear-gradient(135deg,#7c4148,#47232a)!important; color:#fff0ee!important; box-shadow:inset 0 1px 0 rgba(255,214,206,.3), 0 6px 16px rgba(0,0,0,.35)!important; } body[data-ms-fx][data-ms-char="LUNA"] #root div.grid.grid-cols-2.gap-1\.5 > button:not(#_a):not(#_b){ background:rgba(240,168,160,.08)!important; box-shadow:inset 0 0 0 1px rgba(240,168,160,.45)!important; color:#f8d7d1!important; } body[data-ms-fx][data-ms-char="LUNA"] #root div.relative.px-3.py-3.z-10 button:not(#_a):not(#_b){ background:linear-gradient(180deg,#f8d0c6,#da8f80 55%,#a35a4d)!important; color:#2a120d!important; } body[data-ms-fx][data-ms-char="LUNA"] #root div.relative.px-3.py-3.z-10 textarea:not(#_a):not(#_b){ border-color:rgba(240,168,160,.45)!important; box-shadow:none!important; } /* 달 둘레 빛·고리·구름은 하늘에서만 — 기와 능선 뒤로 숨는다 */ #ms-fx .mrig2{ -webkit-mask:url('/icons/sky_mask.png') center 66px / cover no-repeat; mask:url('/icons/sky_mask.png') center 66px / cover no-repeat; } /* 바람에 날리는 오방색 띠 */ #ms-fx .mwind{ position:absolute; left:50%; top:66px; width:var(--ms-img-w,500px); height:var(--ms-img-h,880px); margin-left:calc(var(--ms-img-w,500px) / -2); pointer-events:none; } #ms-fx .mwind canvas{ position:absolute; left:2.2222%; top:32.6984%; width:96.6667%; height:21.9048%; filter:brightness(.5) saturate(.85); } /* ═══ 들어갈 때 '누구 사주로 볼까요?' 고르기 시트 · 천귀덕·정판수 폼의 지난 사주 카드 ═══ */ .ms-ask .ms-ask-sub{ margin-top:4px; text-align:center; font-size:13.5px; color:#b8aa8c; } .ms-ask-cost{ margin:12px 0 2px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; padding:10px 14px; border-radius:12px; background:linear-gradient(135deg, rgba(214,174,104,.22), rgba(214,174,104,.08)); box-shadow:inset 0 0 0 1px rgba(233,200,130,.45); font:600 13px Pretendard,sans-serif; color:#efe2c4; } .ms-ask-cost b{ color:#f3d48a; font-weight:800; } .ms-ask-cost .r{ font-size:12px; color:#cdbb92; } .ms-ask .ms-ask-old{ display:block; width:100%; text-align:left; margin-top:16px; padding:15px 16px; border-radius:12px; border:1px solid rgba(217,180,106,.6); background:linear-gradient(180deg,#2a1e11,#150f0a); color:#f6e2ad; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,235,180,.15); } .ms-ask .ms-ask-old .k{ display:inline-block; padding:2px 10px; border-radius:999px; background:linear-gradient(170deg,#f3d897,#caa055); color:#1c1309; font:800 11.5px Pretendard,sans-serif; } .ms-ask .ms-ask-old b{ display:block; margin-top:9px; font:800 19px/1.3 'Nanum Myeongjo','Noto Serif KR',serif; color:#f8e7b8; } .ms-ask .ms-ask-old em{ display:block; margin-top:3px; font-style:normal; font-size:15px; color:#ece1c9; } .ms-ask .ms-ask-old i{ display:block; margin-top:2px; font-style:normal; font-size:13px; color:#a99c80; } .ms-ask .ms-ask-new{ display:block; width:100%; margin-top:10px; height:52px; border-radius:10px; border:1px dashed rgba(217,180,106,.6); background:none; color:#e9c977; font:800 15.5px Pretendard,sans-serif; cursor:pointer; } .ms-ask .ms-ask-note{ margin-top:10px; text-align:center; font-size:12.5px; color:#9d9078; } .ms-reuse{ margin:12px 0 4px; padding:15px; border-radius:12px; border:1px solid var(--t-line, rgba(217,180,106,.5)); background:var(--t-soft, rgba(217,180,106,.08)); color:var(--t-txt,#f6e2ad); } .ms-reuse .k{ font:700 12px Pretendard,sans-serif; letter-spacing:.08em; color:var(--t-acc,#d9b46a); } .ms-reuse .v{ margin-top:5px; font-size:15.5px; line-height:1.5; } .ms-reuse small{ color:rgba(245,230,211,.62); font-size:13px; } .ms-reuse button{ display:block; width:100%; margin-top:11px; height:48px; border:0; border-radius:8px; background:var(--t-grad, linear-gradient(170deg,#f7dc9a,#c99a4d 60%,#a8792f)); color:var(--t-ink,#24180b); font:800 15.5px Pretendard,sans-serif; cursor:pointer; } .ms-reuse .or{ margin-top:9px; text-align:center; font-size:12.5px; color:rgba(245,230,211,.55); } /* 이어서 묻기 — 채팅에 다시 띄운 지난 대화 앞뒤 구분선. 누르면 사주 기록에서 그 대화 전체를 본다 */ .ms-resume-div{ display:flex; align-items:center; gap:10px; width:100%; max-width:440px; min-height:44px; padding:0 4px; border:0; background:none; color:rgba(236,225,201,.62); font:500 12.5px/1.45 Pretendard,sans-serif; text-align:center; word-break:keep-all; } button.ms-resume-div{ cursor:pointer; } .ms-resume-div::before, .ms-resume-div::after{ content:""; flex:1; min-width:14px; height:1px; background:rgba(217,180,106,.32); } /* 풀이 카드 제목: 번호 배지 없이, 배경 없이, 금빛으로 또렷하게 */ .rd-title::before{ display:none!important; } .rd-top, :is(#gwideok-modal,#janpansu-modal) .rd-top{ background:none!important; } .rd-title, :is(#gwideok-modal,#janpansu-modal) .rd-title{ color:#f3cf7a!important; font-size:14.5px!important; text-shadow:0 0 14px rgba(240,190,100,.35); } .rd-title::after, :is(#gwideok-modal,#janpansu-modal) .rd-title::after{ background:linear-gradient(90deg,rgba(217,180,106,.6),rgba(217,180,106,0))!important; } /* 금 다이아 아이콘(전 페이지 통일) */ .ms-dia{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-.16em; object-fit:contain; } /* '쉽게 풀면' 뱃지 숨김(남아 있는 옛 답변에도) */ .rd-easy .ms-tag-e, .ms-tag-e{ display:none!important; } /* 추천 질문(보조 질문) 글자 크게 */ body[data-ms-fx] #root div.grid.grid-cols-2.gap-1\.5 > button:not(#_a){ font-size:14.5px!important; line-height:1.45!important; padding:11px 13px!important; } body[data-ms-fx] :is(.gwideok-starter-chip,.janpansu-starter-chip){ font-size:14.5px!important; line-height:1.4!important; padding:10px 14px!important; } /* ═══ 홈 메뉴: 누를 때 확대·축소(깨져 보이던 효과) 없이 카드와 테두리가 빛난다 · 메뉴 금빛은 강하게, 배경은 더 어둡게 ═══ */ body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a):active{ transform:none!important; transition:none!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a):active{ filter:brightness(1.25) saturate(1.12); } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a):active::after{ display:block!important; content:''!important; position:absolute; inset:0; z-index:3; pointer-events:none; animation:none!important; background:radial-gradient(62% 46% at 50% 42%, rgba(255,222,150,.3), transparent 72%)!important; box-shadow:inset 0 0 46px rgba(255,205,120,.5)!important; } #ms-fx[data-bg="home"] .bg{ filter:brightness(.4) saturate(.85)!important; } #ms-fx[data-bg="home"] .mwind canvas{ filter:brightness(.4) saturate(.85); } /* 눌렀을 때 ms-clean.css 의 background 단축속성이 크기를 auto 로 되돌려 카드 그림이 원본 크기로 커지던 것 — 크기·위치·바탕색을 평소 그대로 고정 */ body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a):active{ background-color:#07060a!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; } /* ═══ 홈 메뉴 슬라이드 — 가운데를 넘는 순간 크기가 '툭' 바뀌던 것을 손가락 위치에 맞춰 연속으로(ms-fx.js 가 scale·opacity 를 매 프레임 씀) ═══ · 크기는 개별 속성 scale, 둥실거림은 translate 로 나눠 서로 덮어쓰지 않게 · 카드 4장 모두 같은 둥실거림(가운데가 바뀔 때 멈칫 없음) · 그림이 불투명이라 쓸모없던 backdrop-filter 제거(넘길 때마다 다시 그리던 비용) · 금빛은 스크롤 영역 filter 대신 가운데 자리 뒤 고정 레이어 */ body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a){ transform:none!important; transition:none!important; scale:.9; opacity:.55; animation:msCardBob 5s ease-in-out infinite!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a)[data-ms-on]{ scale:1; opacity:1; } @keyframes msCardBob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } } #ms-fx .cglow{ position:absolute; display:none; opacity:0; filter:blur(13px); pointer-events:none; will-change:opacity; } #ms-fx .cglow b{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,214,140,.95), rgba(236,178,92,.8) 60%, rgba(214,150,70,.6)); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } @media (prefers-reduced-motion:reduce){ body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:not(#_a){ animation:none!important; } } /* ═══ 타로 풀이 강조 — 첫 제목(카드 이름·방향) 크게 · 키워드 금빛 칩 · 핵심 한마디/조언 문장 금빛 형광펜 ═══ */ body[data-ms-char="NOX"] #root div.max-w-\[75\%\] div[style*="font-size: 17px"]:first-child{ font-size:23px!important; letter-spacing:-.01em!important; padding-bottom:10px!important; margin-bottom:10px!important; color:#ffd980!important; text-shadow:0 0 18px rgba(255,200,110,.35); border-bottom:1px solid rgba(255,214,140,.45)!important; } body[data-ms-char="NOX"] #root div.max-w-\[75\%\] strong{ color:#ffe2a0!important; font-weight:800!important; background:linear-gradient(transparent 58%, rgba(246,200,110,.28) 58%); padding:0 2px; border-radius:2px; } body[data-ms-char="NOX"] #root div.max-w-\[75\%\] em{ font-style:normal!important; display:inline-block; margin:3px 6px 3px 0; padding:4px 12px; border-radius:999px; border:1px solid rgba(246,207,122,.5); background:rgba(246,207,122,.12); color:#f6d38a!important; font-size:.9em; line-height:1.3; } /* 타로 키워드 칩 — 번들이 기울임을 span 으로 그리는 경우까지 */ body[data-ms-char="NOX"] #root div.max-w-\[75\%\] span[style*="italic"], body[data-ms-char="NOX"] #root div.max-w-\[75\%\] i{ font-style:normal!important; display:inline-block; margin:3px 6px 3px 0; padding:4px 12px; border-radius:999px; border:1px solid rgba(246,207,122,.5); background:rgba(246,207,122,.12); color:#f6d38a!important; font-size:.9em; line-height:1.3; } /* 번들은 굵게·기울임을 span 인라인 스타일로 그린다 */ body[data-ms-char="NOX"] #root div.max-w-\[75\%\] span[style*="font-weight: 800"]{ color:#ffe2a0!important; background:linear-gradient(transparent 58%, rgba(246,200,110,.28) 58%); padding:0 2px; border-radius:2px; } body[data-ms-char="NOX"] #root div.max-w-\[75\%\] span[style*="italic"]{ opacity:1!important; } /* 충전 창 — 자동 충전 체크·바로 충전 카드 */ .ms-auto{ display:flex; align-items:flex-start; gap:10px; margin:14px 2px 4px; padding:12px 14px; border-radius:12px; background:rgba(214,174,104,.10); box-shadow:inset 0 0 0 1px rgba(233,200,130,.35); cursor:pointer; font:600 13px/1.5 Pretendard,sans-serif; color:#efe2c4; text-align:left; } .ms-auto input{ width:18px; height:18px; margin:1px 0 0; accent-color:#d4ae68; flex:none; } .ms-auto b{ color:#f3d48a; margin-right:4px; } .ms-auto-note{ margin:4px 4px 0; font:500 11.5px/1.5 Pretendard,sans-serif; color:#a89a7c; text-align:left; } .ms-auto-quick{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0 4px; padding:14px 16px; border-radius:14px; border:0; cursor:pointer; text-align:left; color:#1a1208; background:linear-gradient(135deg,#f6dc95,#d4ae68 60%,#b8924a); box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); font:800 14px Pretendard,sans-serif; } .ms-auto-quick em{ display:block; font-style:normal; font-size:11px; font-weight:800; opacity:.75; margin-bottom:2px; } .ms-auto-quick b{ font-weight:900; margin-right:4px; } .ms-auto-quick i{ font-style:normal; font-weight:900; } /* ── 신년운세(2027 정미년) 카드 — 번들 메뉴 DOM 다섯째, 화면엔 맨 앞(order:-1). 그림 규칙은 ms-ny.css ── */ :root{ --newyear-g:120,24,14; } body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(5){ background-image:none!important; order:-1; } #ms-fx[data-cat="newyear"] .aura > i[data-c="newyear"]{ opacity:1; } #ms-fx .aura > i[data-c="newyear"]{ --g:var(--newyear-g); } #ms-fx:not([data-cat="newyear"]) .aura > i[data-c="newyear"] b{ animation-play-state:paused; }