:root {
  --ink: #221b3a;
  --sub: #7d7696;
  --accent: #7a63ff;
  --accent-deep: #4f3bc9;
  --lcd: #b7c49d;
  --lcd-ink: #1c2417;
  --ui: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --pix: Galmuri11, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #ece4ff; }
body {
  margin: 0; color: var(--ink); min-height: 100vh; overflow-x: hidden;
  font-family: var(--ui); font-size: 15px; line-height: 1.6; word-break: keep-all;
  background:
    radial-gradient(120% 60% at 50% -10%, #ffffff 0, #ffffff00 60%),
    radial-gradient(90% 50% at 100% 30%, #ffd6ea 0, #ffd6ea00 70%),
    radial-gradient(90% 50% at 0% 70%, #cfe4ff 0, #cfe4ff00 70%),
    linear-gradient(#efe6ff, #e3d8ff 55%, #ffdcec);
  background-attachment: fixed;
}
#app { position: relative; max-width: 430px; margin: 0 auto; padding: 14px 16px 70px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; border: 0; }
h1, h2, p { margin: 0; }
.loading { text-align: center; padding: 80px 0; color: var(--sub); }

/* 배경에 떠 있는 입체 구슬 */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg i { position: absolute; border-radius: 50%; animation: drift 14s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 28%, #fff 0, var(--c) 42%, var(--d) 100%);
  box-shadow: inset -10px -14px 26px #0000001f, 0 30px 50px -18px #5a3fb055; }
.bg i:nth-child(1) { --c: #ffb3d3; --d: #e2609a; width: 150px; height: 150px; left: -50px; top: 90px; filter: blur(1.5px); }
.bg i:nth-child(2) { --c: #a9f0dd; --d: #3bb898; width: 96px; height: 96px; right: -26px; top: 250px; animation-duration: 11s; }
.bg i:nth-child(3) { --c: #cbbfff; --d: #7a63ff; width: 210px; height: 210px; right: -90px; top: 620px; filter: blur(3px); animation-duration: 18s; }
.bg i:nth-child(4) { --c: #ffe3a8; --d: #f0a63c; width: 64px; height: 64px; left: 8%; top: 520px; animation-duration: 9s; }
.bg i:nth-child(5) { --c: #bfe0ff; --d: #5a9ff0; width: 120px; height: 120px; left: -40px; top: 900px; filter: blur(2px); animation-duration: 16s; }
.bg i:nth-child(6) { --c: #ffc9c0; --d: #f07a6a; width: 44px; height: 44px; right: 12%; top: 70px; animation-duration: 8s; }
@keyframes drift { to { transform: translate3d(14px, -34px, 0) rotate(12deg); } }

.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; position: relative; z-index: 1; }
.logo { font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -.5px; }
.logo small { font-weight: 500; font-size: 12px; color: var(--sub); margin-left: 8px; letter-spacing: 0; }
.sound { width: 40px; height: 40px; border-radius: 50%; font-size: 17px; color: #c5bfd6; text-decoration: line-through;
  background: linear-gradient(#fff, #ece7f8); box-shadow: inset 0 1px 0 #fff, 0 4px 0 #cfc6ea, 0 8px 14px -4px #5a3fb055; }
.sound.on { color: var(--accent); text-decoration: none; }
.sound:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #cfc6ea; }

/* ───────── 기기 */
.float { position: relative; z-index: 1; padding: 8px 0 0; }
.device-wrap { perspective: 1000px; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.floor { width: 200px; height: 26px; margin: 2px auto 0; border-radius: 50%; background: radial-gradient(closest-side, #3b2a7a5c, #3b2a7a00); animation: floor 5s ease-in-out infinite; }
@keyframes floor { 50% { transform: scale(.86); opacity: .65; } }
.device {
  --c1: #ffd3e6; --c2: #ff8dbd; --c3: #e0508f; --rx: 0deg; --ry: 0deg; --gx: 0px; --gy: 0px;
  position: relative; width: 340px; height: 510px; margin: 0 auto;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease-out; transform-style: preserve-3d;
}
.device.egg1, .eggs .egg1 { --c1: #c9f9ea; --c2: #5fe0c0; --c3: #1fa585; }
.device.egg2, .eggs .egg2 { --c1: #e4dcff; --c2: #ab9bff; --c3: #6a58dd; }
.eggs .egg0 { --c1: #ffd3e6; --c2: #ff8dbd; --c3: #e0508f; }
.device.egg3, .eggs .egg3 { --c1: #fff6c4; --c2: #ffd84a; --c3: #d98f0c; }
/* 노란 기기는 버튼이 묻히지 않게 분홍 버튼 */
.device.egg3 .dbtns i { background: radial-gradient(circle at 34% 26%, #ffffff, #ffd9e8 30%, #ff7fb2 70%, #d9488a 100%);
  box-shadow: inset 0 -3px 4px #8a1e5066, inset 0 1.5px 1px #fff, 0 3px 0 #b83a74, 0 3px 0 3px #00000026, 0 8px 8px -2px #00000059; }
.s1 { stop-color: var(--c1); } .s2 { stop-color: var(--c2); } .s3 { stop-color: var(--c3); }
/* 뒤 배경이 뿌옇게 비치는 반투명 층 */
.frost { position: absolute; inset: 0; clip-path: path('M170 84C258 84 328 170 328 290C328 420 268 500 170 500C72 500 12 420 12 290C12 170 82 84 170 84Z');
  -webkit-backdrop-filter: blur(7px) saturate(1.4); backdrop-filter: blur(7px) saturate(1.4); }
.shell { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 18px #3b2a7a66) drop-shadow(0 4px 3px #3b2a7a40); }
.shell .body { opacity: .74; }
.shell .edge { stroke: var(--c3); stroke-opacity: .55; }
.shell .lug { fill: var(--c2); fill-opacity: .8; stroke: var(--c3); stroke-opacity: .5; }
.shell .guts { stroke: var(--c3); stroke-opacity: .5; }
.shell .gloss { transform: translate(var(--gx), var(--gy)); transition: transform .18s ease-out; }
/* 움푹 들어간 액정: 이름·날짜, 도트 화면, 대사 */
.screen { position: absolute; left: 72px; top: 174px; width: 196px; height: 232px; overflow: hidden; padding: 7px 9px 8px; border-radius: 14px;
  color: var(--lcd-ink); font-family: var(--pix); background: linear-gradient(#a9b68e, #bcc9a2 12%, #b3c098);
  box-shadow: inset 0 0 0 2.5px #23281d, inset 0 7px 12px #00000059, inset 0 -2px 4px #ffffff40; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, #ffffff4d 0, #ffffff12 24%, #ffffff00 25%, #ffffff00 80%, #ffffff14 100%); }
.lcd-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.5; }
.lcd-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcd-row span { white-space: nowrap; opacity: .75; }
#lcd { display: block; width: 100%; margin: 2px 0 3px; }
.say { height: 34px; font-size: 11.5px; line-height: 1.5; text-align: center; display: flex; align-items: center; justify-content: center; }

.dbtns { position: absolute; left: 0; right: 0; top: 441px; display: flex; justify-content: center; gap: 22px; }
.dbtns button { width: 36px; padding: 0; background: none; font: 800 10px var(--ui); color: #00000080; text-shadow: 0 1px 0 #ffffff80; }
.dbtns button:nth-child(2) { transform: translateY(8px); }
/* 고무 버튼 */
.dbtns i { display: block; width: 28px; height: 28px; margin: 0 auto 4px; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #ffffff, #fff6c9 30%, #ffd84a 70%, #e0a51a 100%);
  box-shadow: inset 0 -3px 4px #a8700066, inset 0 1.5px 1px #fff, 0 3px 0 #b98410, 0 3px 0 3px #00000026, 0 8px 8px -2px #00000059;
  transition: transform .06s, box-shadow .06s; }
.dbtns button:active i, .dbtns button.on i { transform: translateY(2.5px);
  box-shadow: inset 0 -2px 3px #a8700066, inset 0 1.5px 1px #fff, 0 .5px 0 #b98410, 0 1px 0 3px #00000026, 0 3px 4px -2px #00000059; }
.dbtns button.on { color: #000000cc; }
.floor { margin-bottom: 14px; }

/* ───────── 패널 */
.panel { position: relative; z-index: 1; padding: 18px; margin-bottom: 14px; border-radius: 24px; border: 1px solid #ffffffd0;
  background: linear-gradient(#ffffffe8, #ffffffc0); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #fff, 0 22px 34px -18px #4b3a8a59, 0 4px 10px #4b3a8a12; }
.panel h2 { font-size: 16px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.3px; }
.panel p + p { margin-top: 5px; }
.muted { color: var(--sub); font-size: 13px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #4b4560; }
input[type=text] { width: 100%; padding: 12px 14px; font-size: 16px; border: 0; border-radius: 14px; outline: none; background: #f1eef9;
  box-shadow: inset 0 3px 6px #4b3a8a2e, inset 0 -1px 0 #fff, 0 1px 0 #fff; }
input[type=text]:focus { box-shadow: inset 0 3px 6px #4b3a8a2e, 0 0 0 3px #7a63ff55; }

.btn { display: block; width: 100%; padding: 14px 12px; text-align: center; text-decoration: none; font-weight: 800; font-size: 16px; color: #fff;
  border-radius: 18px; background: linear-gradient(#9d8bff, #6f58f0); text-shadow: 0 1px 0 #3d2aa880;
  box-shadow: inset 0 1.5px 0 #ffffff80, inset 0 -3px 0 #00000022, 0 6px 0 var(--accent-deep), 0 16px 20px -8px #4f3bc9a6;
  transition: transform .06s, box-shadow .06s; }
.btn:active { transform: translateY(5px); box-shadow: inset 0 1.5px 0 #ffffff80, inset 0 -3px 0 #00000022, 0 1px 0 var(--accent-deep), 0 4px 8px -4px #4f3bc9a6; }
.btn.ghost { color: var(--ink); text-shadow: none; background: linear-gradient(#fff, #efebfa);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -3px 0 #4b3a8a12, 0 6px 0 #cdc4e8, 0 16px 20px -8px #4b3a8a55; }
.btn.ghost:active { box-shadow: inset 0 1.5px 0 #fff, 0 1px 0 #cdc4e8, 0 4px 8px -4px #4b3a8a55; }
.btn.small { font-size: 14px; padding: 12px 8px; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.btns + .btn, .btn + .btn, .btn + .btns { margin-top: 16px; }

/* 행동: 탭은 눌린 홈, 버튼은 키캡 */
.tabs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; margin-bottom: 12px; border-radius: 18px;
  background: #ded6f5; box-shadow: inset 0 3px 6px #4b3a8a40, 0 1px 0 #fff; }
.tabs button { padding: 9px 0; border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--sub); background: none; }
.tabs button.on { color: var(--ink); background: linear-gradient(#fff, #f3f0fc); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c5bbe4, 0 8px 10px -4px #4b3a8a66; }
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; margin: 2px 0 16px; }
.acts button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 9px 2px 9px; border-radius: 16px; font-weight: 700; font-size: 11.5px; line-height: 1.25; letter-spacing: -.3px;
  background: linear-gradient(#fff, #f1edfb); box-shadow: inset 0 1.5px 0 #fff, inset 0 -3px 0 #4b3a8a10, 0 6px 0 #cdc4e8, 0 16px 18px -8px #4b3a8a59;
  transition: transform .06s, box-shadow .06s; }
.acts button:active { transform: translateY(5px); box-shadow: inset 0 1.5px 0 #fff, 0 1px 0 #cdc4e8, 0 4px 8px -4px #4b3a8a59; }
.acts button:disabled { opacity: .45; }
/* 아이콘은 작은 액정 조각처럼 */
.chip { display: grid; place-items: center; width: 46px; height: 42px; border-radius: 11px; background: linear-gradient(#a9b68e, #bcc9a2 16%, #b3c098);
  box-shadow: inset 0 0 0 2px #23281d, inset 0 4px 7px #00000050; }
.chip.mini { width: 26px; height: 24px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1.5px #23281d, inset 0 2px 4px #00000040; }
svg.px { fill: var(--lcd-ink); filter: drop-shadow(1px 1px 0 #1c241738); display: block; }

/* 알 고르기: 진짜 알처럼 볼록하게 */
.eggs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.eggs button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px;
  border-radius: 18px; font-size: 11px; letter-spacing: -.4px; font-weight: 700; color: var(--sub); background: #f1eef9; box-shadow: inset 0 3px 6px #4b3a8a26; transition: transform .1s; }
.eggsvg { filter: drop-shadow(0 6px 5px #3b2a7a66); overflow: visible; }
.eggsvg .mark { fill: var(--c3); stroke: var(--c3); fill-opacity: .85; stroke-opacity: .85; }
.eggs button.on { color: var(--ink); background: linear-gradient(#fff, #f3f0fc); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 #cdc4e8, 0 14px 16px -8px #4b3a8a66; }

.log { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.log li { padding: 8px 0; border-bottom: 1px solid #e6e0f5; display: flex; align-items: center; gap: 10px; }
.log li:last-child { border: 0; }
.log li span { flex: 1; }
.log time { color: var(--sub); white-space: nowrap; font-size: 12px; }
.log a { color: var(--accent-deep); font-weight: 700; }
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: flex; justify-content: space-between; padding: 5px 0; }
.linkbox { font: 12px var(--pix); padding: 10px 12px; margin: 10px 0 14px; border-radius: 12px; word-break: break-all; background: #f1eef9; box-shadow: inset 0 3px 6px #4b3a8a26; }

.card { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 22px; margin-bottom: 18px; box-shadow: 0 30px 40px -20px #3b2a7a99, 0 6px 14px #3b2a7a26; }
#after { position: relative; z-index: 1; }
.reveal { animation: rise .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.hide { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97); } }

.dev { font-size: 13px; background: linear-gradient(#ffffff99, #ffffff66); }
.dev .btns { margin-top: 10px; row-gap: 16px; }
.gallery { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery figure { margin: 0; text-align: center; font-size: 12px; font-weight: 700; }
.gallery canvas { width: 100%; border-radius: 14px; margin-bottom: 4px; background: linear-gradient(#a9b68e, #bcc9a2 12%, #b3c098); box-shadow: inset 0 0 0 2.5px #23281d, inset 0 6px 10px #00000050; }

/* 동네 펫 목록 */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 14px; background: #ded6f5; box-shadow: inset 0 3px 6px #4b3a8a40; }
.seg button { padding: 7px 0; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--sub); background: none; }
.seg button.on { color: var(--ink); background: linear-gradient(#fff, #f3f0fc); box-shadow: 0 3px 0 #c5bbe4, 0 8px 10px -4px #4b3a8a66; }
.town { list-style: none; margin: 0; padding: 0; }
.town li { border-bottom: 1px solid #e6e0f5; }
.town li:last-child { border: 0; }
.town a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; }
.town em { width: 18px; font: 800 14px var(--ui); color: var(--sub); text-align: center; font-style: normal; }
.town canvas { width: 52px; height: 44px; flex: none; border-radius: 9px; background: linear-gradient(#a9b68e, #bcc9a2 16%, #b3c098); box-shadow: inset 0 0 0 2px #23281d, inset 0 3px 5px #00000050; }
.town div { flex: 1; min-width: 0; }
.town b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.town b i { font: 700 10px var(--ui); padding: 1px 6px; margin-left: 5px; border-radius: 99px; background: #e9e3fb; color: var(--accent-deep); vertical-align: 2px; }
.town span { display: block; font-size: 12px; color: var(--sub); }
.town u { text-decoration: none; font: 700 11.5px var(--ui); padding: 4px 9px; border-radius: 99px; white-space: nowrap; background: #eef7ea; color: #2c7a3d; }
.town u.bad { background: #ffe8ee; color: #c22d5e; } .town u.warn { background: #fff3d6; color: #a86a00; } .town u.done { background: #e9e3fb; color: var(--accent-deep); }

/* 다시 오기: 홈 화면에 추가 안내 */
.again { display: flex; align-items: center; gap: 12px; }
.again img { width: 54px; height: 54px; border-radius: 14px; flex: none; box-shadow: 0 8px 12px -6px #3b2a7a80; }
.again div { flex: 1; min-width: 0; }
.again b { display: block; font-size: 14.5px; }
.again .btn { width: auto; padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }
#sheet { position: fixed; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center; background: #221b3a80; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#sheet[hidden] { display: none; }
#sheet > div { width: 100%; max-width: 430px; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #fff; animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
#sheet h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
#sheet ol { margin: 0 0 16px; padding-left: 20px; line-height: 1.9; }
#sheet p { margin-bottom: 16px; color: #4b4560; }

/* 만든 사람 */
.foot { position: relative; z-index: 1; text-align: center; font-size: 12.5px; color: var(--sub); padding: 14px 0 0; }
.foot a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.foot.sub { padding-top: 3px; }
.maker { display: flex; align-items: center; gap: 12px; }
.maker div { flex: 1; min-width: 0; }
.maker b { display: block; font-size: 14.5px; }
.maker .btn { width: auto; padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }

/* 조르기 */
.btn.beg { background: linear-gradient(#ff8fb1, #f0527f); text-shadow: 0 1px 0 #a81e4a80;
  box-shadow: inset 0 1.5px 0 #ffffff80, inset 0 -3px 0 #00000022, 0 6px 0 #c22d5e, 0 16px 20px -8px #c22d5ea6; }
.btn.beg:active { box-shadow: inset 0 1.5px 0 #ffffff80, 0 1px 0 #c22d5e, 0 4px 8px -4px #c22d5ea6; }
.quote { font: 12.5px/1.55 var(--pix); padding: 10px 12px; margin: 8px 0 14px; border-radius: 12px; background: #fff0f5; box-shadow: inset 0 3px 6px #c22d5e26; }

/* 링크 미리보기 그림을 찍기 위한 화면(?og=) */
body.og { width: 1200px; height: 630px; overflow: hidden; }
body.og.icon { width: 512px; height: 512px; }
body.og.icon #app { width: 512px; height: 512px; justify-content: center; }
body.og.icon .float { width: 512px; transform: scale(.9) translateY(-6px); }
body.og.icon .device { transform: rotate(-6deg); }
body.og.icon .floor { display: none; }
body.og #app { max-width: none; width: 1200px; height: 630px; padding: 0; display: flex; align-items: center; }
body.og .float { flex: none; width: 520px; padding: 0; transform: scale(1.12) translateY(8px); }
body.og .device-wrap, body.og .floor { animation: none; }
body.og .device { transform: rotate(-7deg); }
.ogtext { position: relative; z-index: 1; padding-right: 70px; }
.ogtext small { display: inline-block; font-weight: 800; font-size: 26px; padding: 6px 18px; border-radius: 99px; background: #ffffffc0; box-shadow: 0 6px 12px -6px #4b3a8a80; }
.ogtext h1 { font-size: 92px; line-height: 1.12; font-weight: 800; letter-spacing: -3px; margin: 22px 0 20px; }
.ogtext p { font-size: 33px; line-height: 1.45; font-weight: 600; color: #4b4560; }
.ogtext b { display: inline-block; margin-top: 30px; padding: 16px 30px; border-radius: 22px; font-size: 30px; color: #fff; background: linear-gradient(#9d8bff, #6f58f0); box-shadow: 0 8px 0 #4f3bc9, 0 22px 26px -10px #4f3bc9a6; }
body.og.beg { background: radial-gradient(90% 80% at 20% 50%, #5b3a8f 0, #2a1b4d 60%, #150d2b 100%); }
body.og.beg .bg { opacity: .35; }
body.og.beg .ogtext h1 { color: #fff; }
body.og.beg .ogtext p { color: #d9cff5; }
body.og.beg .ogtext small { background: #ff5c8a; color: #fff; }
body.og.beg .ogtext b { background: linear-gradient(#ff8fb1, #f0527f); box-shadow: 0 8px 0 #c22d5e, 0 22px 26px -10px #000; }

#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 9;
  background: #221b3aee; color: #fff; padding: 11px 18px; border-radius: 16px; font-size: 14px; font-weight: 600; transition: .2s; max-width: 88vw; text-align: center;
  box-shadow: 0 14px 24px -8px #221b3a99; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .device-wrap, .floor, .bg i { animation: none; } }