* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#F3ECF7; --card:#ffffff; --purple:#C9A8DF; --purple-d:#A86FCE;
  --pink:#F6D6E8; --ink:#5b4670; --sub:#a98bbf; --line:#EADFF3;
}
body{ font-family:'Apple SD Gothic Neo','Pretendard','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink); max-width:480px; margin:0 auto;
  min-height:100vh; position:relative; padding-bottom:30px; }
.screen{ display:none; padding:22px 20px; }
.screen.on{ display:block; }
.top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.logo{ font-size:24px; font-weight:800; letter-spacing:-.5px; }
.logo small{ font-size:12px; color:var(--sub); font-weight:700; margin-left:4px;}

.card{ background:var(--card); border-radius:22px; padding:22px; margin-bottom:16px;
  box-shadow:0 8px 22px rgba(150,110,180,.12); }
.card.dash{ border:2px dashed var(--purple); position:relative; }
.tape{ position:absolute; top:-10px; left:30px; width:58px; height:18px;
  background:rgba(255,205,130,.65); transform:rotate(-5deg); border-radius:3px; }

.dog-emoji{ font-size:46px; }
.dogname{ font-size:19px; font-weight:800; margin-top:4px; }
.dogsub{ color:var(--sub); font-size:13px; margin-top:3px; }

.btn{ display:block; width:100%; border:none; border-radius:18px; padding:17px;
  font-size:17px; font-weight:800; cursor:pointer; font-family:inherit; }
.btn-main{ background:var(--purple); color:#fff; box-shadow:0 8px 16px rgba(168,111,206,.35); }
.btn-main:active{ transform:scale(.98); }
.btn-ghost{ background:#F1E8F8; color:var(--purple-d); }
.btn-line{ background:#fff; color:var(--purple-d); border:2px solid var(--purple); }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; }

label{ display:block; font-size:13px; font-weight:700; color:var(--sub); margin:14px 0 6px; }
input,select{ width:100%; padding:13px 14px; border:2px solid var(--line); border-radius:14px;
  font-size:16px; font-family:inherit; color:var(--ink); background:#fff; }
input:focus,select:focus{ outline:none; border-color:var(--purple); }

.stat-row{ display:flex; gap:12px; }
.stat{ flex:1; background:#F9F5FD; border-radius:16px; padding:14px; text-align:center; }
.stat .v{ font-size:24px; font-weight:800; color:var(--purple-d); }
.stat .l{ font-size:12px; color:var(--sub); margin-top:2px; }

/* 산책중 화면 */
.live-time{ font-size:58px; font-weight:800; text-align:center; letter-spacing:-2px; margin:8px 0; }
.live-dist{ text-align:center; font-size:22px; color:var(--purple-d); font-weight:800; margin-bottom:6px;}
.gps{ text-align:center; font-size:13px; color:var(--sub); margin-bottom:14px; }
.gps .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#ccc; margin-right:5px; vertical-align:middle;}
.gps.good .dot{ background:#5fc97f; } .gps.weak .dot{ background:#f5b13f; } .gps.bad .dot{ background:#ec6a6a; }
#w-map{ width:100%; height:230px; border-radius:16px; overflow:hidden; margin-bottom:16px; background:#e9eef3; }
#d-map{ width:100%; height:180px; border-radius:16px; overflow:hidden; margin-top:14px; background:#e9eef3; }
.leaflet-container{ font-family:inherit; }

.walk-item{ background:#fff; border-radius:16px; padding:14px 16px; margin-bottom:10px;
  box-shadow:0 5px 12px rgba(150,110,180,.08); display:flex; align-items:center; gap:12px; }
.walk-item .ico{ font-size:24px; }
.walk-item .meta b{ font-size:15px;} .walk-item .meta span{ font-size:12px; color:var(--sub); }
.empty{ text-align:center; color:var(--sub); padding:30px 10px; font-size:14px; }

.summary-big{ text-align:center; }
.summary-big .emoji{ font-size:54px; }
.summary-big h2{ font-size:22px; margin-top:6px; }
.summary-big .msg{ color:var(--purple-d); font-weight:700; margin-top:8px; font-size:15px; }
.stickers{ font-size:22px; letter-spacing:6px; margin:12px 0; }
.hint{ font-size:11.5px; color:#b9a6cc; text-align:center; margin-top:14px; line-height:1.5; }
h3.sec{ font-size:15px; margin:22px 2px 12px; color:var(--ink); }
/* 공유 카드 오버레이 */
.overlay{ position:fixed; inset:0; background:rgba(70,50,90,.55); display:none; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.overlay .sheet{ background:#fff; border-radius:24px; padding:16px; max-width:340px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.overlay img{ width:100%; border-radius:14px; display:block; }

/* ===== 스플래시(앱 켤 때 발자국 Log 애니메이션) ===== */
#splash{ position:fixed; inset:0; z-index:2000;
  background:linear-gradient(160deg,#F7F0FB 0%, #EFE2F8 55%, #F6E2EE 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .5s ease; }
#splash.hide{ opacity:0; pointer-events:none; }
.sp-stage{ width:80%; max-width:330px; }
.sp-stage svg{ width:100%; height:auto; overflow:visible; display:block; }
.sp-word{ text-align:center; margin-top:6px; opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease; }
.sp-word.on{ opacity:1; transform:translateY(0); }
.sp-name{ font-size:38px; font-weight:800; letter-spacing:-1px; color:#5b4670; }
.sp-name b{ color:#A86FCE; }
.sp-tag{ font-size:13px; color:#a98bbf; font-weight:700; margin-top:8px; }
.paw{ opacity:0; transform-box:fill-box; transform-origin:center;
  animation:pop .4s cubic-bezier(.2,1.3,.5,1) forwards; }
@keyframes pop{ 0%{opacity:0; transform:scale(.2);} 70%{opacity:1; transform:scale(1.18);} 100%{opacity:1; transform:scale(1);} }