/* mGlobal website */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#ffffff;color:#0f1b30;font-family:"Noto Sans KR",system-ui,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
html[lang="ja"] body,html[lang="zh-Hans"] body{word-break:normal;line-break:strict}
img{max-width:100%}
a{color:#1f5fd6;text-decoration:none}a:hover{color:#174bab}
input,textarea,select,button{font-family:inherit}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid #1f5fd6;outline-offset:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:8px;background:#ffffff;color:#102341;font-weight:700}
.skip:focus{left:8px}
.v-mob{display:none}
@media (max-width:1023px){.v-desk{display:none}.v-mob{display:block}}
[id]{scroll-margin-top:24px}
.mmenu{position:fixed;inset:0;z-index:50;overflow-y:auto;background:#102341}
.mmenu > div{min-height:100vh;min-height:100dvh}
.mmenu a{color:#ffffff}.mmenu a:hover{color:#c9ced8}
body.menu-open{overflow:hidden}
@media (hover:hover) and (pointer:fine){
a[style*="background: #1f5fd6"]:hover,button[style*="background: #1f5fd6"]:hover{background:#174bab!important;color:#ffffff}
button[data-type]:hover{border-color:#102341!important}
}
button[disabled]{opacity:.4;cursor:not-allowed!important}

/* ---- Motion ------------------------------------------------------------ */
/* 1. Press feedback: buttons, CTAs, cards */
a[style*="border-radius"],button{transition:transform 160ms var(--ease-out),background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out}
a[style*="border-radius: 8px"]:active,a[style*="border-radius: 999px"]:active,button:not([disabled]):active{transform:scale(0.97)}
a[style*="border-radius: 12px"]:active,a[style*="border-radius: 16px"]:active{transform:scale(0.985)}

/* 2. Mobile menu: fade + slight drop (js/site.js toggles .is-open) */
.mmenu{opacity:0;transform:translateY(-8px);transition:opacity 150ms ease-in,transform 150ms ease-in}
.mmenu.is-open{opacity:1;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}

/* 3. Contact form: "sent" confirmation enters instead of teleporting */
[data-part="sent"] > [role="status"]{transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}
@starting-style{[data-part="sent"] > [role="status"]{opacity:0;transform:scale(0.97)}}

/* 5. Home hero: one-time entrance on page load */
@keyframes hero-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes hero-fade{from{opacity:0}}
.hero-in > *{animation:hero-rise 900ms var(--ease-out) both}
.hero-in > :nth-child(1){animation-delay:150ms}
.hero-in > :nth-child(2){animation-delay:280ms}
.hero-in > :nth-child(3){animation-delay:410ms}
.hero-in > :nth-child(4){animation-delay:540ms}

/* 6. Scroll reveal: sections and cards rise in as they enter the screen (js/site.js adds these) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(40px)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none;transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:var(--d,0ms)}

/* 7. Card hover: lift + shadow (mouse devices only) */
a[style*="border-radius: 16px"],a[style*="border-radius: 12px"],a[style*="border: 1px solid #d0d6e0"],a:has(> div[style*="background-image"]){transition:transform 350ms var(--ease-out),box-shadow 350ms var(--ease-out),background-color 150ms ease-out,border-color 150ms ease-out}
a:has(> div[style*="background-image"]) > div[style*="background-image"]{transition:box-shadow 350ms var(--ease-out),filter 350ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
a[style*="border-radius: 16px"]:hover,a[style*="border-radius: 12px"]:hover,a[style*="border: 1px solid #d0d6e0"]:hover{transform:translateY(-8px);box-shadow:0 24px 48px -16px rgba(16,35,65,.35)}
a[style*="border-radius: 16px"]:hover:active,a[style*="border-radius: 12px"]:hover:active,a[style*="border: 1px solid #d0d6e0"]:hover:active{transform:translateY(-8px) scale(0.985)}
a:has(> div[style*="background-image"]):hover{transform:translateY(-8px)}
a:has(> div[style*="background-image"]):hover > div[style*="background-image"]{box-shadow:0 28px 56px -18px rgba(16,35,65,.55);filter:brightness(1.08)}
}

/* 8. Hero/contact curves draw themselves in; watermark logo settles in */
.draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw-line 2200ms cubic-bezier(0.77,0,0.175,1) forwards;animation-play-state:paused}
.draw path:nth-child(2){animation-delay:250ms}
.draw path:nth-child(3){animation-delay:500ms}
.draw.is-in path{animation-play-state:running}
@keyframes draw-line{to{stroke-dashoffset:0}}
.hero-mark{animation:hero-mark 1600ms var(--ease-out) 200ms both}
@keyframes hero-mark{from{opacity:0;transform:scale(1.15) rotate(-6deg)}}

/* Reduced motion: keep gentle fades, drop movement */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
a[style*="border-radius"]:active,button:active,.mmenu,.mmenu.is-open{transform:none!important}
@starting-style{[data-part="sent"] > [role="status"]{transform:none}}
.hero-in > *{animation-name:hero-fade}
.reveal-on [data-reveal]{transform:none}
a:hover{transform:none!important}
.draw path{animation:none;stroke-dashoffset:0}
.hero-mark{animation-name:hero-fade}
}

/* 9. Header logo: only the M (with its orbit arc) spins 360°; "Global" and the globe stay still.
      2.4s spin + 1.2s pause, repeating. Layers: assets/logo-m.png + assets/logo-global.png */
.mlogo{position:relative;display:block;aspect-ratio:1.026;perspective:600px;flex-shrink:0}
.mlogo img{position:absolute;display:block;height:auto;max-width:none}
.mlogo__m{left:4.87%;top:0;width:95.13%;transform-origin:50% 50%;animation:mlogo-spin 3.6s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.mlogo__g{left:0;top:79.86%;width:93.62%}
@keyframes mlogo-spin{
0%{transform:rotateY(0deg);filter:brightness(1)}
33%{filter:brightness(.62)}
50%{filter:brightness(.85)}
66.6%{transform:rotateY(360deg);filter:brightness(1)}
100%{transform:rotateY(360deg);filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){.mlogo__m{animation:none}}