/* 萬神 홈 — 신년운세(2027 丁未年 · 붉은 양의 해) 카드 — 2026-11-02 v1 (ms-art.js newyear 마크업 짝, ms-art.css 다음에 읽는다)
   진홍 바탕 + 금빛 물결(청해파) · 도는 햇살 · 금빛 지지 링 · 붉은 양 금메달 · 등롱 · 매화 가지 · 붉은 리본 · 떨어지는 매화잎 · 붉은 버튼
   모션은 transform·opacity 만. 토스 빌드는 이 파일의 색을 바꾸지 않는다(build-web.mjs THEMED 제외). */

.ms-art[data-k="newyear"]{
  background:
    radial-gradient(54% 34% at 50% 27%, #e2362a 0%, #b51a1d 38%, rgba(120,10,16,.0) 78%),
    radial-gradient(120% 70% at 50% 18%, #8d0f17 0%, #5a070d 55%, #2c0306 100%);
  background-size:100% 100%;
}
/* 금빛 물결 무늬 — 아래로 갈수록 짙게, 위는 사라짐 */
.ms-art .nybg{ z-index:0; inset:0; background:url('/icons/ny_wave.svg') 0 0/26px 13px repeat; opacity:.34;
  -webkit-mask:linear-gradient(180deg,transparent 30%,#000 62%,#000); mask:linear-gradient(180deg,transparent 30%,#000 62%,#000); }
/* 메달 뒤 햇살 — 천천히 돈다 */
.ms-art .nyray{ z-index:0; left:50%; top:27%; width:150%; aspect-ratio:1; border-radius:50%; will-change:transform; opacity:.85;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,150,.16) 0deg 5deg, rgba(255,214,150,0) 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.55) 46%,transparent 72%); mask:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.55) 46%,transparent 72%);
  animation:msNySpin 90s linear infinite; }
/* 메달 뒤 후광 — 숨쉬기 */
.ms-art .nyhalo{ z-index:0; left:50%; top:27%; width:92%; aspect-ratio:1; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(closest-side, rgba(255,196,120,.55), rgba(255,120,60,.22) 48%, rgba(255,80,40,0) 100%);
  animation:msNyHalo 5.5s ease-in-out infinite; }
/* 금빛 지지(子丑寅卯…) 링 + 바깥 점선 링 */
.ms-art .nyring{ z-index:1; left:50%; top:27%; width:72%; aspect-ratio:1; background:url('/icons/ny_ring.svg') center/contain no-repeat; will-change:transform; opacity:.92;
  animation:msNySpin 70s linear infinite; }
.ms-art .nyring2{ z-index:1; left:50%; top:27%; width:82%; aspect-ratio:1; will-change:transform; opacity:.6; animation:msNySpin 46s linear infinite reverse;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23f0cd84'%3E%3Ccircle cx='100' cy='100' r='98' stroke-width='.8' stroke-dasharray='1.2 5'/%3E%3Ccircle cx='100' cy='2.2' r='2.2' fill='%23ffe6a6' stroke='none'/%3E%3Ccircle cx='100' cy='197.8' r='1.6' fill='%23ffe6a6' stroke='none'/%3E%3Ccircle cx='2.2' cy='100' r='1.3' fill='%23ffe6a6' stroke='none'/%3E%3Ccircle cx='197.8' cy='100' r='1.3' fill='%23ffe6a6' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 붉은 양 금메달 — 떠오르기 + 빛 + 반짝 지나감 */
.ms-art .nyw{ z-index:2; left:50%; top:27%; width:50%; aspect-ratio:1; will-change:transform; animation:msNyFloat 6s ease-in-out infinite; }
.ms-art .nyw > b{ position:absolute; display:block; }
.ms-art .nyglow{ inset:-14%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,230,160,.6), rgba(255,170,90,.18) 60%, rgba(255,140,60,0)); will-change:opacity; animation:msNyGlow 3.8s ease-in-out infinite; }
.ms-art .nyemb{ inset:0; border-radius:50%; background:url('/icons/ny27_emblem.webp') center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,226,160,.85), 0 0 0 4px rgba(120,10,14,.75), 0 0 0 5.5px rgba(232,190,110,.7), 0 10px 26px rgba(40,0,4,.65); }
.ms-art .nyshine{ inset:0; border-radius:50%; overflow:hidden; }
.ms-art .nyshine::before{ content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:34%; background:linear-gradient(90deg,rgba(255,250,230,0),rgba(255,250,230,.55),rgba(255,250,230,0));
  transform:translateX(-140%) skewX(-18deg); will-change:transform; animation:msNyShine 5.2s ease-in-out infinite; }

/* 리본 — 메달 아래를 가로지른다(2027 丁未年) */
.ms-art .nyy{ z-index:3; left:50%; top:43.5%; width:78%; aspect-ratio:640/132; transform:translate(-50%,-50%); background:url('/icons/ny_ribbon.svg') center/contain no-repeat; filter:drop-shadow(0 4px 6px rgba(30,0,2,.55)); }
.ms-art .nyy::after{ content:attr(data-t); position:absolute; left:16%; right:16%; top:10%; bottom:24%; display:flex; align-items:center; justify-content:center;
  font:700 13px/1 Cinzel,"Noto Serif KR",serif; letter-spacing:.24em; text-indent:.24em; white-space:nowrap; color:#ffeab4; text-shadow:0 1px 0 rgba(90,0,6,.9), 0 0 8px rgba(255,190,100,.35); }

/* 등롱 — 위 양쪽에서 살랑 */
.ms-art .nylan{ z-index:2; top:9%; width:11.5%; aspect-ratio:60/150; background:center top/contain no-repeat; transform-origin:50% 0; will-change:transform; }
.ms-art .nylan.l{ left:6%; background-image:url('/icons/ny_lantern_l.svg'); animation:msNySway 4.6s ease-in-out infinite; }
.ms-art .nylan.r{ right:6%; background-image:url('/icons/ny_lantern_r.svg'); animation:msNySway 5.3s ease-in-out -1.7s infinite reverse; }
/* 매화 가지 — 메달 아래 양옆 */
.ms-art .nyplum{ z-index:2; top:28%; width:40%; aspect-ratio:320/220; background:url('/icons/ny_plum.svg') center/contain no-repeat; will-change:transform; transform-origin:0 60%; }
.ms-art .nyplum.l{ left:-5%; animation:msNyBough 7s ease-in-out infinite; }
.ms-art .nyplum.r{ right:-5%; transform-origin:50% 60%; animation:msNyBoughR 7.6s ease-in-out -2s infinite; }
/* 떨어지는 매화잎 */
.ms-art .nypet{ z-index:3; top:-4%; width:7px; height:6px; border-radius:60% 0 60% 0; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle at 30% 30%, #ffb3a2, #e8443a 60%, #a8141c); animation:msNyPetal 9s linear infinite; }

/* 글자 받침 — 검정 대신 검붉게 */
.ms-art[data-k="newyear"]::before{ height:58%; background:linear-gradient(180deg, rgba(36,2,5,0), rgba(36,2,5,.6) 26%, rgba(28,2,4,.88) 52%, rgba(22,2,4,.95)); }

/* 붉은 버튼 */
.ms-art[data-k="newyear"] .cta:not(#_t){ background:linear-gradient(180deg,#f0463a 0%,#c4161f 52%,#86090f 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,222,160,.9), inset 0 1px 0 rgba(255,214,196,.45), inset 0 -2px 5px rgba(70,0,4,.5), 0 5px 16px rgba(150,8,14,.55)!important; }
.ms-art[data-k="newyear"] .cta:not(#_t):not(#_u)::after{ color:#fff3d6!important; font-weight:700!important; text-shadow:0 1px 2px rgba(70,0,4,.7)!important; }
.ms-art[data-k="newyear"] .cta:not(#_t)::before{ opacity:.55!important; }

/* 토스 밤 테마: 그림을 금빛으로 물들이는 막(::after)을 끈다 — 붉은 양은 붉게 */
html.ms-toss[data-mt-night] .ms-art[data-k="newyear"]::after{ display:none; }

@keyframes msNySpin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes msNyHalo{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(.94); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
@keyframes msNyFloat{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,-53.5%); } }
@keyframes msNyGlow{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes msNyShine{ 0%,58%{ transform:translateX(-140%) skewX(-18deg); } 100%{ transform:translateX(420%) skewX(-18deg); } }
@keyframes msNySway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
@keyframes msNyBough{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-2.2deg); } }
@keyframes msNyBoughR{ 0%,100%{ transform:scaleX(-1) rotate(0deg); } 50%{ transform:scaleX(-1) rotate(-2.2deg); } }
@keyframes msNyPetal{ 0%{ opacity:0; transform:translate3d(0,0,0) rotate(0deg); } 8%{ opacity:.95; } 85%{ opacity:.85; }
  100%{ opacity:0; transform:translate3d(var(--dx,20px),360px,0) rotate(420deg); } }

/* 기간제(12월~2월 말): 기간 밖이면 홈 카드를 숨긴다 — index.html 앞머리 msNySeason() 이 html[data-ny-off] 를 단다 */
html[data-ny-off] body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(5){ display:none!important; }
/* 기간 밖이어도 전체 풀이를 산 사람에겐 남긴다 — 홍보 칸이 아니라 다시 보기 칸이라 맨 끝으로(ms-newyear.js seasonSync 가 html[data-ny-own]) */
html[data-ny-own] body[data-ms-fx][data-ms-theme="home"] .grid.max-w-md.flex-shrink-0.px-5 > button:nth-child(5){ order:9; }

/* 타로 「2027 신년 타로」 · 별자리 칩 「2027 신년 별자리 운세」 — 홈 신년 카드와 같은 진홍·금빛(ms-newyear.js markMenus 가 data-ny-menu 를 단다)
   번들이 인라인 style 로 칠하는 버튼이라 !important 로 덮는다 */
button[data-ny-menu]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7){ position:relative; overflow:hidden; isolation:isolate;
  /* 물결은 칸마다 짙은 바탕이 있어 그대로 깔면 갈색으로 보인다 — 반투명 진홍을 위에 덮어 홈 카드처럼 물결이 은은하게만 비치게 */
  background:radial-gradient(130% 160% at 12% 0%, rgba(230,58,44,.86) 0%, rgba(184,26,29,.84) 42%, rgba(120,12,18,.86) 80%, rgba(70,6,10,.9) 100%), url('/icons/ny_wave.svg') 0 0/22px 11px repeat, #8a1015!important;
  border:1px solid rgba(240,205,132,.8)!important;
  box-shadow:inset 0 0 0 1px rgba(120,10,14,.55), inset 0 1px 0 rgba(255,214,196,.35), 0 6px 18px rgba(150,8,14,.45), 0 0 0 1px rgba(232,190,110,.18)!important; }
button[data-ny-menu]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7)::before{ content:''; position:absolute; z-index:0; top:-20%; bottom:-20%; left:0; width:30%; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,240,210,0),rgba(255,240,210,.32),rgba(255,240,210,0));
  transform:translateX(-160%) skewX(-18deg); will-change:transform; animation:msNyMenuShine 4.8s ease-in-out infinite; }
button[data-ny-menu]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > *{ position:relative; z-index:1; }
/* 타로 스프레드 칸 — 기호 자리에 붉은 양 금메달, 이름 금빛, 설명 살구빛, 오른쪽 위 '12~2월 한정' 띠 */
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7){ padding-top:20px!important; }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7)::after{ content:'2027 · 12~2월 한정'; position:absolute; z-index:2; top:0; left:50%; transform:translateX(-50%);
  padding:3px 12px 4px; border-radius:0 0 9px 9px; background:linear-gradient(180deg,#f3d48f,#c8963f); color:#5a0a0e;
  font:700 11px/1.2 "Noto Serif KR",serif; letter-spacing:.06em; white-space:nowrap; box-shadow:0 2px 6px rgba(60,0,4,.45); }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:first-child{ width:44px!important; height:44px; flex-shrink:0; border-radius:50%; font-size:0!important; color:transparent!important;
  background:url('/icons/ny27_emblem.webp') center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,226,160,.9), 0 0 0 3.5px rgba(120,10,14,.8), 0 0 14px rgba(255,190,110,.55); }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:nth-child(2) > div:first-child{ color:#ffeab4!important; font-size:16px!important; text-shadow:0 1px 0 rgba(90,0,6,.85), 0 0 10px rgba(255,190,100,.3); }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:nth-child(2) > div:nth-child(2){ color:#ffd2b0!important; opacity:.92!important; }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:nth-child(3):not(:last-child){ background:rgba(60,4,8,.45)!important; border-color:rgba(240,205,132,.75)!important; }   /* 값 알약 */
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:nth-child(3):not(:last-child) span{ color:#ffeab4!important; }
button[data-ny-menu="tarot"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7) > div:last-child{ color:#f3d48f!important; opacity:.9!important; }   /* 화살표 */
/* 별자리 칩 — 붉은 알약 + 금빛 글자 + 작은 未 */
button[data-ny-menu="astro"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7){ color:#ffeab4!important; font-weight:700!important; text-shadow:0 1px 0 rgba(90,0,6,.85); border-radius:999px!important; }
button[data-ny-menu="astro"]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7)::after{ content:'未'; position:relative; z-index:1; margin-left:6px; font:700 12px/1 "Hahmlet",serif; color:#f3d48f; }
@keyframes msNyMenuShine{ 0%,55%{ transform:translateX(-160%) skewX(-18deg); } 100%{ transform:translateX(460%) skewX(-18deg); } }

@media (prefers-reduced-motion:reduce){ .ms-art[data-k="newyear"] *, .ms-art[data-k="newyear"] .nyshine::before, button[data-ny-menu]:not(#_n1):not(#_n2):not(#_n3):not(#_n4):not(#_n5):not(#_n6):not(#_n7)::before{ animation:none!important; } }