/* 토닥 — 화면.
   기획서와 같은 색(종이·흙분홍·세이지)을 쓰되, 앱은 더 조용하고 손에 닿는 느낌으로.
   움직임은 느리게. 빠른 전환은 이 앱의 목적과 반대다. */

:root{
  --paper:#FAF7F3; --card:#FFFFFF; --sink:#F2EDE6;
  --ink:#2B2522; --ink-2:#5E534C; --ink-3:#938779;
  --rule:#E6DED3;
  --clay:#C4756A; --clay-soft:#F6E9E5;
  --sage:#7E9078; --sage-soft:#EAEFE7;
  --display:'Jua','Apple SD Gothic Neo',sans-serif;
  --body:'Gowun Dodum','Apple SD Gothic Neo',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1C1917; --card:#252119; --sink:#2C2721;
    --ink:#F0E9E1; --ink-2:#BCB0A4; --ink-3:#8A7E70;
    --rule:#382F27;
    --clay:#DD9084; --clay-soft:#33241F;
    --sage:#9BB093; --sage-soft:#222A1F;
  }
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--clay)}

.phone{max-width:430px;min-height:100dvh;margin:0 auto;background:var(--paper);
  position:relative;overflow:hidden}

/* 화면 전환 — 느리게 겹쳐 넘긴다 */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s}
.screen.on{opacity:1;visibility:visible;transform:none}

.hd{display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 8px;min-height:62px;flex:none}
.mark{font-family:var(--display);font-size:1.45rem;letter-spacing:-.01em}
.ghost{font-size:.86rem;color:var(--ink-3);padding:6px 0}
.back{font-size:.9rem;color:var(--ink-2);padding:6px 0}
.back::before{content:'←';margin-right:7px}

.pad{padding:8px 24px 40px;overflow-y:auto}
.ttl{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:0 0 6px;line-height:1.4}
.sub{color:var(--ink-3);font-size:.92rem;margin:0}

/* ── 홈 ───────────────────────────────────────── */
.home-body{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0 24px calc(28px + env(safe-area-inset-bottom));text-align:center}
.greet{font-family:var(--display);font-size:1.3rem;line-height:1.55;margin:10px 0 0;
  color:var(--ink);max-width:22ch;white-space:pre-line}
.friend-stage{flex:1;display:grid;place-items:center;width:100%;min-height:210px;
  max-height:300px}
#home-friend{max-height:270px}
.streak{font-size:.86rem;color:var(--ink-3);margin:2px 0 18px}
.acts{display:flex;flex-direction:column;gap:12px;width:100%}
.act{display:block;width:100%;padding:18px 20px;border-radius:20px;text-align:left;
  background:var(--card);border:1.5px solid var(--rule);
  transition:transform .18s ease, border-color .18s ease}
.act:active{transform:scale(.98)}
.act b{display:block;font-family:var(--display);font-weight:400;font-size:1.12rem}
.act span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:2px}
.act.clay{border-color:var(--clay);background:var(--clay-soft)}
.act.clay b{color:var(--clay)}
.act.sage{border-color:var(--sage);background:var(--sage-soft)}
.act.sage b{color:var(--sage)}
.act.quiet{background:var(--sink);border-color:transparent}
.act.wide{text-align:center;margin-top:24px}
.act.wide b{font-size:1.05rem}
.fineprint{font-size:.76rem;color:var(--ink-3);line-height:1.7;margin:18px 0 0}

/* ── 프렌즈 ───────────────────────────────────── */
.grid{list-style:none;padding:0;margin:22px 0 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:12px}
.grid button{width:100%;padding:16px 10px 12px;border-radius:20px;background:var(--card);
  border:1.5px solid var(--rule);display:grid;justify-items:center;gap:6px;
  transition:transform .18s ease, border-color .18s ease}
.grid button:active{transform:scale(.97)}
.grid button[aria-pressed="true"]{border-color:var(--clay);background:var(--clay-soft)}
.grid img{width:92px;height:92px;object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%)}
.grid .nm{font-family:var(--display);font-size:1rem}

/* ── 리추얼 공통 ──────────────────────────────── */
.ritual{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 28px calc(40px + env(safe-area-inset-bottom));text-align:center;gap:6px}
.say{font-family:var(--display);font-size:1.25rem;color:var(--ink-2);margin:0;
  min-height:2.6em;display:grid;place-items:center;transition:opacity .6s ease}
.say.fade{opacity:0}
.count{font-size:.84rem;color:var(--ink-3);margin:6px 0 0;min-height:1.6em;
  font-variant-numeric:tabular-nums}
.stage{position:relative;display:grid;place-items:center;width:294px;height:294px;flex:none}
.stage .friend{max-width:252px;max-height:252px}
/* 프렌즈 그림은 '얼굴이 아래 모서리에 걸쳐 올라온' 구도라 아래가 평평하게 잘려 있다.
   크게 띄우면 그 직선이 깨진 그림처럼 보인다. 아래쪽을 부드럽게 흐려 배경에 녹인다. */
.friend{display:block;width:auto;max-width:100%;max-height:100%;object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 99%)}

/* 숨쉬기 기본 루프 — 홈·마무리 화면용 */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.breathe{animation:breathe 5.2s ease-in-out infinite}

/* ── 토닥토닥 ─────────────────────────────────── */
.tapzone{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  padding:0;touch-action:manipulation}
.tapzone .friend{transition:transform .13s cubic-bezier(.34,1.56,.64,1)}
.tapzone.hit .friend{transform:scale(.9) translateY(6px)}
.tapzone.lean .friend{transform:rotate(-6deg) translateY(2px)}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);
  pointer-events:none}
.ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.ring-bg{stroke:var(--rule)}
.ring-fg{stroke:var(--clay);stroke-dasharray:351.8;stroke-dashoffset:351.8;
  transition:stroke-dashoffset .35s ease}
.hearts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.hearts i{position:absolute;font-style:normal;font-size:19px;opacity:0;
  animation:float 1.5s ease-out forwards}
@keyframes float{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  18%{opacity:.95;transform:translateY(-14px) scale(1)}
  100%{opacity:0;transform:translateY(-92px) scale(.85)}
}
/* 100번 뒤 — 이번엔 프렌즈가 나를 토닥인다 */
.stage.embrace .friend{animation:embrace 2.6s ease-in-out forwards}
@keyframes embrace{
  0%{transform:scale(1)}
  30%{transform:scale(1.22) translateY(-6px)}
  45%{transform:scale(1.18) translateY(0) rotate(-4deg)}
  60%{transform:scale(1.18) translateY(0) rotate(4deg)}
  75%{transform:scale(1.18) translateY(0) rotate(-3deg)}
  100%{transform:scale(1.16)}
}

/* ── 같이 숨쉬기 ──────────────────────────────── */
.halo{position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle, var(--sage-soft) 0%, transparent 70%);
  border:1.5px solid var(--sage);opacity:.35;transform:scale(.72);
  transition:transform var(--t,4s) cubic-bezier(.37,0,.63,1), opacity var(--t,4s) ease}
.halo.big{transform:scale(1.12);opacity:.6}
#br-friend{transition:transform var(--t,4s) cubic-bezier(.37,0,.63,1)}
#br-friend.big{transform:scale(1.14)}

/* ── 마무리 ───────────────────────────────────── */
.done{gap:14px}
.done .ttl{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .halo,#br-friend{transition:opacity .4s ease!important}
}

/* ── v2 추가 ─────────────────────────────────── */

/* 마음 지갑 */
.purse{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.purse b{font-family:var(--display);font-weight:400;font-size:1.02rem}
.purse .pip{width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 32%, #fff 0 12%, var(--clay) 58%, #A85C52 100%)}
.purse.light{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}

.word{font-size:.9rem;color:var(--ink-3);margin:0 0 16px;line-height:1.6;max-width:26ch}
.act.dusk{border-color:#8E86A8;background:#EDEAF3}
.act.dusk b{color:#6A6288}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .act.dusk{border-color:#8E86A8;background:#262336}
  :root:not([data-theme="light"]) .act.dusk b{color:#ADA3C9}
}
.row2{display:flex;gap:8px;width:100%;margin-top:12px}
.mini{flex:1;padding:11px 0;border-radius:14px;background:var(--sink);
  font-size:.88rem;color:var(--ink-2);transition:transform .16s ease}
.mini:active{transform:scale(.97)}

/* 보상 */
.toasts{position:absolute;left:0;right:0;top:64px;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;z-index:40}
.toast{background:var(--ink);color:var(--paper);border-radius:99px;padding:9px 18px;
  display:flex;align-items:baseline;gap:9px;box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
  animation:toastIn .35s cubic-bezier(.2,1.4,.5,1), toastOut .5s ease 2.1s forwards}
.toast b{font-family:var(--display);font-weight:400;font-size:1rem}
.toast span{font-size:.8rem;opacity:.75}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* 장소 */
.places{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.place{width:100%;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;
  gap:2px 14px;align-items:center;padding:14px 16px;border-radius:18px;text-align:left;
  background:var(--card);border:1.5px solid var(--rule)}
.place .sw{grid-row:1/span 2;width:54px;height:54px;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.place .pn{font-family:var(--display);font-size:1.08rem}
.place .ps{font-size:.84rem;color:var(--ink-3)}
.place.open{border-color:var(--sage)}
.place.open .ps{color:var(--sage)}
.place.can{border-color:var(--clay)}
.place.can .ps{color:var(--clay)}
.place.locked{opacity:.5}

/* 기록 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:20px 0 24px}
.cal i{aspect-ratio:1;border-radius:7px;background:var(--sink)}
.cal .l1{background:#F0DCD6}.cal .l2{background:#DDA99F}.cal .l3{background:var(--clay)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cal .l1{background:#3E2A25}
  :root:not([data-theme="light"]) .cal .l2{background:#7A4F47}
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{background:var(--card);border:1.5px solid var(--rule);border-radius:16px;
  padding:16px 8px;text-align:center}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;
  font-variant-numeric:tabular-nums}
.stats span{font-size:.78rem;color:var(--ink-3)}

/* 걷기 */
#s-walk{padding:0}
#walk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.walk-ui{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none}
.walk-ui .hd.over{pointer-events:auto;background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent)}
.walk-ui .hd.over .back{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.walk-foot{text-align:center;color:#fff;padding:0 24px calc(34px + env(safe-area-inset-bottom));
  text-shadow:0 1px 6px rgba(0,0,0,.45)}
.walk-place{font-family:var(--display);font-size:1.05rem;margin:0;opacity:.92}
.walk-time{font-family:var(--display);font-size:2.4rem;margin:2px 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.walk-hint{font-size:.84rem;margin:2px 0 0;opacity:.72}

.gain{font-family:var(--display);color:var(--clay);font-size:1.05rem;margin:0}

/* 주머니 — 산책길에서 주운 것 */
.ttl-sm{margin:26px 0 10px;font:400 16px/1.4 var(--display);color:var(--ink)}
.pocket{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}
.pocket i{display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:2px;
  padding:12px 6px 10px;border-radius:14px;background:var(--card);border:1.5px solid var(--rule);font-style:normal}
.pocket i span{font-size:26px;line-height:1}
.pocket i b{font:400 15px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.pocket i em{font:400 11px/1.3 var(--body);color:var(--ink-3);font-style:normal;text-align:center}
.pocket-empty{margin:0;font:400 13px/1.7 var(--body);color:var(--ink-3)}