/* 간단 홈의 동행 캐릭터 · 오늘의 세 가지 · 스티커북 */
.hb{display:flex;flex-direction:column;gap:8px;padding:10px 10px 10px;border-radius:22px;background:linear-gradient(160deg,#f3f8ef,#fff8e8);border:1px solid #dfe6d4}
.hb-top{display:flex;align-items:flex-end;gap:10px}
.hb-art{position:relative;flex:0 0 64px;height:78px;animation:hb-idle 3.2s ease-in-out infinite}
.hb-art svg{width:64px;height:78px;display:block}
.hb-bubble{position:relative;flex:1;margin:0 0 6px;padding:10px 13px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid #d9e2d3;font-size:15px;line-height:1.5;color:#2b4136;box-shadow:0 2px 0 #e3e9dc}
.hb-bubble p{margin:0}
.hb-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
.hb-head b{font-size:12.5px;color:#5b7a66}
.hb-memo-toggle{border:1px solid #e2cf95;border-radius:999px;background:#fff8e3;color:#6b5418;font:inherit;font-size:12.5px;font-weight:700;padding:4px 12px;min-height:44px;cursor:pointer}
.hb-memo-q{font-weight:600}
.hb-memo-a{font-weight:700;color:#24533f}.hb-memo-a small{display:block;font-weight:500;font-size:12.5px;color:#6a7d71;margin-bottom:2px}
.hb-memo-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hb-memo-actions .btn{width:auto;margin:0;padding:8px 14px;min-height:44px}
.hb-bubble.hb-flip{animation:hb-flip .45s ease-out}
.hb-tip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;padding-top:8px;border-top:1px dashed #d9e2d3;font-size:13.5px;color:#4d6157}
.hb-tip span{flex-basis:100%}.hb-tip .btn{width:auto;margin:0;padding:6px 12px;min-height:44px}.hb-tip .hs-link{min-height:44px}
@keyframes hb-flip{0%{transform:perspective(600px) rotateY(80deg);opacity:.3}100%{transform:perspective(600px) rotateY(0);opacity:1}}
.hb-today3{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;padding:0 4px}
/* 상태 표시라서 버튼처럼 보이지 않게: 테두리·배경 없이 아이콘과 글자만 */
.hb-today3 li{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:#7a8b80}
.hb-today3 li.on{color:#24533f;font-weight:800}.hb-today3 li.on>span:first-child{color:#2f6a57}
.hb-today3 li.hb-count{margin-left:auto;color:#3f5a4b;font-weight:700}.hb-today3 li.hb-count b{color:#2f6a57;font-size:15px}
.hb .hs-weather{background:#fff;padding:8px 10px}
/* 캐릭터 카드 안에서는 위의 '날씨' 표시와 말풍선이 제목·안내를 대신한다 */
.hb .hs-weather>span,.hb .hs-weather em{display:none}
.hb-sticker{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:-6px 0 -8px;font-size:14px;color:#4d6157}
.hb-sticker>span{font-size:22px}
.hb-sticker .hs-link{min-height:44px;margin-left:auto}
.hb-sticker-empty{font-size:13px;color:#6a7d71}
.hb-fresh>span{display:inline-block;animation:hb-pop .7s cubic-bezier(.2,1.6,.4,1)}
.hb-all .hb-art{animation:hb-hop 1.1s ease-in-out 2}
.hb-stars{position:absolute;left:-6px;right:-6px;top:-6px;font-style:normal;color:#d7a531;font-size:16px;letter-spacing:6px;animation:hb-twinkle 1.6s ease-out 2 forwards;pointer-events:none}
#sound-start.hb-pulse{animation:hb-pulse 1.1s ease-in-out 4}
#home-simple .hb button:focus-visible{outline:3px solid #926214;outline-offset:3px}
@keyframes hb-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hb-hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0)}70%{transform:translateY(-6px)}}
@keyframes hb-pop{0%{transform:scale(.2) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hb-twinkle{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes hb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,212,138,.9)}50%{box-shadow:0 0 0 10px rgba(240,212,138,0)}}
@media(prefers-reduced-motion:reduce){.hb-bubble.hb-flip,.hb-art,.hb-all .hb-art,.hb-fresh>span,.hb-stars,#sound-start.hb-pulse{animation:none}}
/* 스티커북 */
#buddy-book{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(460px,calc(100% - 24px));max-height:92dvh;overflow-y:auto;padding:20px;border:0;border-radius:24px;background:linear-gradient(160deg,#f6faf3,#fff7e6);color:#233a30;box-shadow:0 20px 60px rgba(20,40,30,.3)}
#buddy-book::backdrop{background:rgba(20,40,32,.55)}
#buddy-book h2{margin:0 0 6px;font-size:22px}
#buddy-book p{margin:0 0 10px;line-height:1.6}
.bb-grid{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bb-grid li{position:relative;aspect-ratio:1;border-radius:12px;background:#fff;border:1px dashed #cbd6c6;display:flex;align-items:center;justify-content:center}
.bb-grid li.on{border-style:solid;border-color:#e2c97f;background:#fffaf0}
.bb-grid li>span[aria-hidden]{font-size:clamp(18px,6vw,26px)}
.bb-grid li small{position:absolute;right:4px;bottom:1px;font-size:10px;color:#8a9a8f}