@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --dark: #3D3E44;
    --light: #D4D5D9;
    --point: #8C8D91;
    --ufs-bg: #1a1932;
    --ufs-sub: #c7cfdd;
}

html, body {padding: 0; margin:0; height: 100%; font-family: "Elms Sans"; text-align: center; background:#ccc;}
a, a:hover, a:active, a:visited {text-decoration: none; outline: none; color: inherit;}
img {max-width: 100%; height: auto;}

header {height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #ffffff 0%, #f1f1f3 40%, #ccc 100%);}
main {display: flex; flex-direction: column;}
article {width: 100%; display: flex; align-items: center; justify-content: center; padding: 70px 0;}
footer {height: 150px; background: var(--dark); color: var(--light); display: flex; align-items: center; justify-content: center;}

.ufs {background-color: var(--ufs-bg); color: var(--ufs-sub);}

/* ── animated wave (simple css waves 축약 버전) ── */
.waves {
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: -1px;
    margin-bottom: -5px;
}
.parallax > use {
    animation: waveMove 10s linear infinite;
}
.parallax > use:nth-child(2) {
    animation-duration: 15s;
    animation-delay: -3s;
}
@keyframes waveMove {
    0%   { transform: translate3d(-90px,0,0); }
    100% { transform: translate3d(85px,0,0); }
}