:root{--purple:#6C5CE7;--mint:#38C9B5;--cream:#FAF9F6;--ink:#262433;--soft:#45435A;--line:#8F83EA}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:18px;color:var(--ink);background-color:#B5D3FF;background-image:linear-gradient(45deg,#9EC4FA 25%,transparent 25%,transparent 75%,#9EC4FA 75%),linear-gradient(45deg,#9EC4FA 25%,transparent 25%,transparent 75%,#9EC4FA 75%);background-size:32px 32px;background-position:0 0,16px 16px;font:15px/1.6 Dotum,"돋움",AppleGothic,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all;overflow-wrap:anywhere}
.note{width:min(860px,100%);padding:10px;background:var(--cream);border:5px solid var(--purple);border-radius:20px;box-shadow:6px 6px 0 rgba(38,36,51,.22)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 10px;border-bottom:2px dashed var(--line)}
.logo{display:block;width:210px;max-width:58vw;height:auto}
.soon{flex:none;margin:0;padding:4px 12px;background:var(--mint);border:2px solid var(--ink);border-radius:999px;font-size:13px;font-weight:700;animation:blink 1.6s steps(2) infinite}
.room{margin:10px 0;overflow:hidden;border:3px solid var(--ink);border-radius:10px;background:#FFF3D6}
.room svg{display:block;width:100%;height:auto}
.av{animation:bob 1.2s steps(2) infinite}
.av-f{animation-delay:.6s}
.cloud{animation:drift 8s steps(8) infinite alternate}
.heart{transform-origin:360px 166px;animation:pop 2.4s steps(4) infinite}
.words{padding:6px 10px;text-align:center}
h1{margin:6px 0 4px;font-size:clamp(23px,5vw,32px);line-height:1.3;font-weight:900;letter-spacing:-.5px}
.lead{margin:0;color:var(--soft)}
.en{margin:8px 0 0;font-weight:700;color:var(--purple)}
.mean{margin:2px 0 0;font-size:13px;color:var(--soft)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 10px;padding:0;list-style:none}
.three li{padding:10px 12px;background:#fff;border:2px dotted var(--line);border-radius:10px;font-size:14px;line-height:1.5}
.three b{display:block;color:var(--purple);font-size:15px}
.foot{padding:8px 4px 4px;border-top:2px dashed var(--line);font-size:12.5px;color:var(--soft);text-align:center}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes blink{50%{background:#fff}}
@keyframes drift{to{transform:translateX(70px)}}
@keyframes pop{0%,100%{opacity:0;transform:translateY(8px)}35%,70%{opacity:1;transform:translateY(0)}}
@media (max-width:640px){body{padding:8px;display:block}.note{border-width:4px;padding:8px;box-shadow:4px 4px 0 rgba(38,36,51,.22)}.three{grid-template-columns:1fr}.logo{width:170px}.soon{font-size:12px;padding:3px 9px}}
@media (prefers-reduced-motion:reduce){.av,.cloud,.heart,.soon{animation:none}.heart{opacity:1}}