:root { --ink: #2b2230; --sub: #7a6d7f; --pri: #c92f48; --bg1: #fff1ec; --bg2: #ffd2c6; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: linear-gradient(160deg, var(--bg1), var(--bg2)); color: var(--ink);
  font-family: "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif; text-align: center;
}
body.tw { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; }
main { max-width: 420px; width: 100%; }
.art { width: 150px; height: auto; filter: drop-shadow(0 12px 18px rgba(150, 60, 60, .25)); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
h1 { font-size: 26px; margin: 14px 0 8px; letter-spacing: -.5px; word-break: keep-all; }
p { color: var(--sub); line-height: 1.65; margin: 0 0 18px; word-break: keep-all; }
.dots { display: flex; gap: 8px; justify-content: center; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--pri); opacity: .3; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 40% { opacity: 1; } }
.btn { display: block; width: 100%; padding: 14px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; margin-top: 10px; border: 0; }
.btn.kakao { background: #FEE500; color: #3a1d22; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid #eadfe4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #f4edf1; --sub: #c9bcc4; --bg1: #2a1f26; --bg2: #3a2530; }
  :root:not([data-theme="light"]) .btn.ghost { background: #3a2a33; color: #f4edf1; border-color: #54404b; }
}