/* 모다모 인트로: 두 아치가 겹쳐 물결 m이 되고, Money · Daily · Monthly에서 Mo · Da · Mo가 남아 modamo가 되는 3초 장면 */
html.intro-open,html.intro-open body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));background:#1C1452;color:#fff;font-family:Pretendard,'맑은 고딕',sans-serif;overflow:hidden;animation:intro-in .35s cubic-bezier(.16,1,.3,1) both}
.intro[hidden]{display:none}
.intro::before{content:'';position:absolute;left:50%;top:38%;width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#4B30C966,#1C145200 72%);pointer-events:none;animation:intro-light 2.6s cubic-bezier(.16,1,.3,1) both}
.intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100%,560px)}
.intro-mark{width:clamp(110px,30vw,150px);height:auto;overflow:visible}
.intro-mark path{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.intro-mark .a1{animation:intro-arch1 .8s .15s cubic-bezier(.16,1,.3,1) forwards}
.intro-mark .a2{animation:intro-arch2 .8s .45s cubic-bezier(.16,1,.3,1) forwards}
.intro-word{display:block;width:clamp(190px,56vw,300px);height:auto;margin:14px auto 0;clip-path:inset(0 100% 0 0);animation:intro-reveal .7s 2.0s cubic-bezier(.16,1,.3,1) forwards}
.intro-meaning{margin-top:26px;display:flex;animation-delay:1.05s!important;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;font-size:clamp(18px,4.6vw,24px);font-weight:600;letter-spacing:-.01em;opacity:0;transform:translateY(10px);animation:intro-up .6s 1.45s cubic-bezier(.16,1,.3,1) forwards}
.intro-meaning span{color:#ffffff}
.intro-meaning i{font-style:normal;color:inherit;animation:intro-dim .6s 1.55s ease-out forwards}
.intro-meaning b{font-weight:750;color:inherit;animation:intro-key .6s 1.55s ease-out forwards}
.intro-meaning .plus{color:#9C8CE8;font-weight:500}
.intro-gloss{margin-top:18px;font-size:14px;line-height:1.6;letter-spacing:-.01em;font-weight:500;color:#BDB3EE;opacity:0;animation:intro-fade .6s 2.25s ease-out forwards}
.intro-slogan{margin-top:34px;font-size:clamp(22px,6vw,32px);line-height:1.38;font-weight:700;letter-spacing:-.025em;text-wrap:balance;opacity:0;transform:translateY(12px);animation:intro-up .7s 2.45s cubic-bezier(.16,1,.3,1) forwards}
.intro-slogan em{font-style:normal;color:#C9BBFF}
.intro-sub{margin-top:10px;font-size:15px;color:#CFC7F5;opacity:0;animation:intro-fade .6s 2.7s ease-out forwards}
.intro-start{margin-top:34px;min-width:220px;min-height:56px;padding:0 28px;border:0;border-radius:16px;background:#fff;color:#2A1B7A;font:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 28px #0000004d;opacity:0;transform:translateY(12px);animation:intro-up .6s 2.85s cubic-bezier(.16,1,.3,1) forwards;transition:background .15s,transform .15s}
.intro-start:hover{background:#F1EEFF}.intro-start:active{transform:scale(.98)}
.intro-start:focus-visible,.intro-skip:focus-visible{outline:3px solid #C9BBFF;outline-offset:4px}
.intro-note{margin-top:14px;font-size:12px;color:#A99FDD;opacity:0;animation:intro-fade .5s 3.05s ease-out forwards}
.intro-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;min-height:44px;padding:0 16px;border:1px solid #ffffff33;border-radius:999px;background:transparent;color:#DCD5FA;font:inherit;font-size:14px;cursor:pointer;opacity:0;animation:intro-fade .4s .5s ease-out forwards}
.intro-skip:hover{background:#ffffff14}
.intro.is-leaving{animation:intro-out .45s cubic-bezier(.7,0,.84,0) forwards}
.intro ::selection{background:#6A4BE8;color:#fff}
@keyframes intro-in{from{opacity:0}to{opacity:1}}
@keyframes intro-out{to{opacity:0;transform:scale(1.03)}}
@keyframes intro-light{from{opacity:0;transform:translate(-50%,-46%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes intro-arch1{from{opacity:0;transform:translateY(18%)}to{opacity:1;transform:none}}@keyframes intro-arch2{from{opacity:0;transform:translate(-22%,18%)}to{opacity:.82;transform:none}}
@keyframes intro-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-up{to{opacity:1;transform:none}}
@keyframes intro-fade{to{opacity:1}}
@keyframes intro-dim{to{color:#ffffff59}}
@keyframes intro-key{to{color:#C9BBFF}}
@media(max-height:620px){.intro-meaning{margin-top:18px}.intro-slogan{margin-top:20px}.intro-start{margin-top:22px}.intro-word{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.intro,.intro::before,.intro *{animation:none!important;transition:none!important}.intro-mark .a1{opacity:1;transform:none}.intro-mark .a2{opacity:.82;transform:none}.intro-word{clip-path:none}.intro-meaning,.intro-gloss,.intro-slogan,.intro-sub,.intro-start,.intro-note,.intro-skip{opacity:1;transform:none}.intro-meaning i{color:#ffffff59}.intro-meaning b{color:#C9BBFF}}