:root{--ink:#0b2233;--sea:#0d5f9c;--sky:#2fb5e8;--card:rgba(255,255,255,.86);--card-line:rgba(255,255,255,.7);--accent:#ff7a59}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{min-height:100vh;min-height:100svh;background:#0b3c6b;color:var(--ink);font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;padding:24px 16px 56px}
.scene{position:fixed;inset:0;z-index:0;overflow:hidden}
.scene__svg{width:100%;height:100%;display:block}
.card{position:relative;z-index:1;width:100%;max-width:520px;text-align:center;background:var(--card);border:1px solid var(--card-line);border-radius:28px;padding:28px 24px 24px;box-shadow:0 24px 60px rgba(4,30,60,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.card__logo{width:150px;height:auto;display:block;margin:0 auto 6px;animation:nod 3.2s ease-in-out infinite}
.card__badge{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:var(--sea);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.card__title{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400;font-size:clamp(34px,8vw,52px);line-height:1.1;margin:4px 0 10px;color:#0a4e86}
.card__lead{margin:0 0 14px;font-size:16px;line-height:1.6;word-break:keep-all}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px;padding:0}
.chips li{padding:6px 12px;border-radius:999px;background:#e3f4fd;color:#0a4e86;font-size:14px;font-weight:700}
.card__soon{margin:0 0 12px;font-family:"Jua",sans-serif;font-size:20px;color:var(--accent)}
.card__note{margin:0;font-size:13px;line-height:1.6;color:#35556d;word-break:keep-all}
.foot{position:fixed;left:0;right:0;bottom:12px;z-index:1;text-align:center;color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.08em}
.patrol{animation:patrol 24s ease-in-out infinite}
.flip{transform-box:fill-box;transform-origin:50% 50%;animation:flip 24s step-end infinite}
.swim{animation:swim 26s linear infinite}
.swim--baby{animation-duration:34s;animation-delay:-12s}
.bob{animation:bob 3s ease-in-out infinite}
.bob--slow{animation-duration:4.2s}
.bk-tail{transform-box:fill-box;transform-origin:100% 50%;animation:tail .6s ease-in-out infinite alternate}
.bk-fin{transform-box:fill-box;transform-origin:50% 0;animation:flap 1.2s ease-in-out infinite alternate}
.bk-eye{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.5s infinite}
.fin{animation:fin 30s linear infinite;animation-delay:-8s}
.wave--back{animation:wave 16s linear infinite}
.wave--mid{animation:wave 11s linear infinite reverse}
.wave--front{animation:wave 8s linear infinite}
.cloud--a{animation:drift 70s linear infinite}
.cloud--b{animation:drift 95s linear infinite;animation-delay:-40s}
.cloud--c{animation:drift 120s linear infinite;animation-delay:-70s}
.gull{animation:gull 2.2s ease-in-out infinite alternate}
.gull--b{animation-delay:-.7s}
.gull--c{animation-delay:-1.3s}
.gulls{animation:glide 40s linear infinite}
.sun{animation:glow 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
.rays{animation:shimmer 5s ease-in-out infinite alternate}
.spark{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 2.6s ease-in-out infinite;opacity:0}
.s2{animation-delay:-.6s}
.s3{animation-delay:-1.2s;animation-duration:3.2s}
.s4{animation-delay:-1.8s}
.s5{animation-delay:-2.2s;animation-duration:2.2s}
.nb{white-space:nowrap}
.bubble{animation:bubble 7s ease-in infinite;opacity:0}
.b2{animation-delay:-1.5s;animation-duration:6s}
.b3{animation-delay:-3s;animation-duration:8s}
.b4{animation-delay:-4.5s}
.b5{animation-delay:-2s;animation-duration:9s}
.b6{animation-delay:-5.5s;animation-duration:6.5s}
@keyframes patrol{0%{transform:translateX(420px)}46%{transform:translateX(1060px)}50%{transform:translateX(1060px)}96%{transform:translateX(420px)}100%{transform:translateX(420px)}}
@keyframes flip{0%{transform:scaleX(1)}48%{transform:scaleX(-1)}98%{transform:scaleX(1)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}
@keyframes swim{from{transform:translateX(-260px)}to{transform:translateX(1700px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes flap{from{transform:rotate(-8deg)}to{transform:rotate(12deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes tail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes fin{from{transform:translate(1500px,556px)}to{transform:translate(-80px,556px)}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@keyframes drift{from{transform:translateX(-400px)}to{transform:translateX(1500px)}}
@keyframes glide{from{transform:translateX(-200px)}to{transform:translateX(1300px)}}
@keyframes gull{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-8px) scaleY(.6)}}
@keyframes glow{from{transform:scale(1);opacity:.85}to{transform:scale(1.08);opacity:1}}
@keyframes shimmer{from{opacity:.5}to{opacity:1}}
@keyframes bubble{0%{transform:translateY(0);opacity:0}10%{opacity:.8}100%{transform:translateY(-320px);opacity:0}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translateY(-3px)}}
@media (max-width:480px){body{justify-content:flex-start;padding-top:20px}.card{background:rgba(255,255,255,.82);padding:22px 16px 18px;border-radius:22px}.card__logo{width:120px}.card__lead{font-size:15px}.chips li{font-size:13px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.patrol{transform:translateX(720px)}.fin{transform:translate(1100px,556px)}}