/* =========================================================
   상점 · 꾸미기 · 정원
   ========================================================= */

/* ---------- 지갑 ---------- */
.wallet{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-radius:99px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.wallet span{display:inline-flex;align-items:center;gap:4px}
.wallet b{font-weight:800}
.cur{display:inline-block;vertical-align:-3px;flex:none}

/* ---------- 아바타 테두리 ---------- */
.avf{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:3px;flex:none;isolation:isolate}
.avf>.avatar{box-shadow:0 0 0 2px var(--bg)}
.avf::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:var(--fr)}
.fr-silver{--fr:linear-gradient(135deg,#F4F6FB,#9AA3B5 50%,#E8ECF4)}
.fr-gold{--fr:linear-gradient(135deg,#FFF0A8,#F5B82E 45%,#B7791F 70%,#FFE08A)}
.fr-gold::after,.fr-diamond::after{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-2;background:radial-gradient(closest-side,rgba(255,200,80,.45),transparent)}
.fr-diamond{--fr:conic-gradient(from 0deg,#E6FBFF,#7FE3FF,#FFFFFF,#9BB8FF,#E6FBFF)}
.fr-diamond::after{background:radial-gradient(closest-side,rgba(127,227,255,.5),transparent)}
.fr-neon{--fr:linear-gradient(135deg,#4FF3FF,#FF4FD8)}
.fr-neon::before{animation:neon 2s ease-in-out infinite}
@keyframes neon{0%,100%{box-shadow:0 0 6px #4FF3FF,0 0 12px rgba(255,79,216,.6)}50%{box-shadow:0 0 12px #FF4FD8,0 0 20px rgba(79,243,255,.7)}}
.fr-flame{--fr:linear-gradient(0deg,#FF3D2E,#FF8A1F 45%,#FFD34D)}
.fr-flame::before{animation:flame 1.2s ease-in-out infinite alternate}
@keyframes flame{from{box-shadow:0 -2px 8px rgba(255,138,31,.7)}to{box-shadow:0 -5px 14px rgba(255,61,46,.8)}}
.fr-rainbow::before{background:conic-gradient(#FF5A79,#FFC43D,#3DDC97,#4FD1FF,#8A6CFF,#FF5A79);animation:spin 3s linear infinite}
.avatar.art{overflow:hidden;padding:0}
.avatar.art svg{display:block}

/* ---------- 닉네임 색 ---------- */
.nm-mint{color:#5FFFD9}.nm-pink{color:#FF8FC8}.nm-sky{color:#7CCBFF}
.nm-gold{background:linear-gradient(90deg,#FFE08A,#F5B82E,#FFE08A);-webkit-background-clip:text;background-clip:text;color:transparent}
.nm-rainbow{background:linear-gradient(90deg,#FF5A79,#FFC43D,#3DDC97,#4FD1FF,#B57CFF,#FF5A79);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rbw 3s linear infinite}
@keyframes rbw{to{background-position:200% 0}}

/* ---------- 출석 ---------- */
.daily{margin-top:4px;padding:16px;border-radius:var(--r-lg);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.daily.ready{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--s1)),var(--s1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 45%,transparent)}
.daily-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.daily-h b{font-size:16px;font-weight:800}
.daily-h span{font-size:12px;color:var(--t2);font-weight:600}
.daily-row{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.daily:not(.ready) .daily-row{margin-bottom:0}
.dd{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:12px;background:var(--s2);font-size:10px;font-weight:700;color:var(--t3)}
.dd-v{font-size:11px;color:var(--t2);font-weight:800}
.dd.today{background:color-mix(in srgb,var(--brand) 35%,var(--s2));color:#fff;box-shadow:inset 0 0 0 1.5px var(--brand)}
.dd.today .dd-v{color:#fff}
.dd.got{opacity:.45}
.dd.big{background:linear-gradient(160deg,rgba(79,209,255,.25),var(--s2))}
.dd-ck{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.35);color:var(--win)}
.dd-ck svg{width:18px;height:18px}
.daily .btn{height:46px}

/* ---------- 보석 팩 ---------- */
.packs{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:4px 20px 6px;scrollbar-width:none}
.packs::-webkit-scrollbar{display:none}
.pack{position:relative;flex:none;width:118px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 12px;border-radius:18px;
  background:linear-gradient(170deg,#1E2A55,var(--s1));box-shadow:inset 0 0 0 1px rgba(79,209,255,.25);transition:transform .15s}
.pack:active{transform:scale(.96)}
.pack[disabled]{opacity:.5}
.pack.starter{width:170px;background:linear-gradient(160deg,#4A2A10,#2A1A30 70%);box-shadow:inset 0 0 0 1.5px #FFC24B}
.pack-ic{height:44px;display:grid;place-items:center}
.pack b{font-size:15px;font-weight:900}
.pack small{font-size:11px;color:var(--t2);font-weight:600;text-align:center;min-height:14px}
.pack small.bonus{color:#7CF0BE}
.pack-price{margin-top:6px;width:100%;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--brand-grad);font-size:14px;font-weight:900}
.pack.starter .pack-price{background:linear-gradient(135deg,#FFD66B,#FF9F43);color:#3A2400}
.pack-tag{position:absolute;top:-1px;right:-1px;font-size:10px;font-weight:900;padding:3px 8px;border-radius:0 18px 0 10px;background:#FF5A79;color:#fff}
.pack.starter .pack-tag{background:#FFC24B;color:#3A2400}
.exch{display:flex;gap:8px;margin-top:10px}
.exch-b{flex:1;height:38px;border-radius:12px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:800;color:var(--t2)}
.shop-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);font-weight:600;margin:10px 2px 0}
.shop-note svg{width:14px;height:14px}

/* ---------- 아이템 그리드 ---------- */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media (min-width:600px){.igrid{grid-template-columns:repeat(5,1fr)}}
.icard{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 6px 10px;border-radius:18px;background:var(--s1);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .15s}
.icard:active{transform:scale(.96)}
.ic-r{position:absolute;left:0;right:0;top:0;height:3px;background:var(--rc)}
.ic-pv{height:64px;display:grid;place-items:center}
.ic-n{margin-top:6px;font-size:13px;font-weight:800;text-align:center}
.ic-p{margin-top:3px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:800;color:var(--t2)}
.ic-p span{display:inline-flex;align-items:center;gap:3px}
.ic-p .own{color:var(--t3);font-size:11px}
.ic-p .eq-t{color:var(--win)}
.ic-eq{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--win);color:#062;display:grid;place-items:center}
.ic-eq svg{width:13px;height:13px;stroke-width:3}
.nm-pv{font-weight:900}
.th-pv{position:relative;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--t1),var(--t2) 50%,var(--t3));display:block}
.th-pv i{position:absolute;left:8px;right:8px;bottom:8px;height:10px;border-radius:5px;background:rgba(255,255,255,.85)}
.th-pv b{position:absolute;top:8px;left:8px;width:14px;height:14px;border-radius:5px;background:rgba(255,255,255,.55)}
.fx-pv{animation:floaty 3s ease-in-out infinite;--rot:0deg}
.garden-cta{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:14px;border-radius:var(--r-md);text-align:left;
  background:linear-gradient(135deg,rgba(92,200,90,.22),rgba(79,209,255,.08));box-shadow:inset 0 0 0 1px rgba(92,200,90,.4)}
.garden-cta>svg{width:22px;height:22px;flex:none;color:#8EE66E}
.garden-cta span{flex:1;display:flex;flex-direction:column}
.garden-cta b{font-size:15px}
.garden-cta small{font-size:12px;color:var(--t2)}

/* ---------- 아이템 상세 시트 ---------- */
.item-pv{height:150px;display:grid;place-items:center;margin:4px 0 8px;border-radius:var(--r-lg);background:radial-gradient(60% 70% at 50% 45%,rgba(255,255,255,.08),transparent)}
.item-h{text-align:center}
.item-h h2{margin:6px 0 2px;font-size:22px;font-weight:900}
.item-h p{margin:0;color:var(--t2);font-size:13px}
.rar{display:inline-block;font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;color:var(--rc);box-shadow:inset 0 0 0 1.5px var(--rc)}
.item-own{text-align:center;font-size:13px;color:var(--t2);font-weight:700;margin:10px 0 0}
.item-fair{display:flex;align-items:center;gap:8px;margin:16px 0 0;padding:10px 12px;border-radius:12px;background:var(--s1);font-size:12px;color:var(--t2);line-height:1.45}
.item-fair svg{width:18px;height:18px;flex:none;color:var(--win)}
.item-act{margin-top:16px}
.item-act .btn{height:54px}
.row2{display:flex;gap:10px}.row2 .btn{flex:1}
.item-wallet{display:flex;justify-content:center;gap:14px;margin-top:12px;font-size:13px;color:var(--t2)}
.item-wallet span{display:inline-flex;align-items:center;gap:4px}

/* ---------- 정원 ---------- */
.garden-card{margin-top:18px;border-radius:var(--r-xl);overflow:hidden;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.garden-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.garden-head b{font-size:16px;font-weight:800}
.garden-head .btn{height:36px;padding:0 14px;font-size:13px;border-radius:11px}
.garden-box{border-radius:18px;overflow:hidden;line-height:0}
.garden-card .garden-box{border-radius:0}
.garden-svg{display:block;width:100%;height:auto}
.garden-svg.editing .gt{stroke:rgba(255,255,255,.55);stroke-width:1;cursor:pointer}
.garden-svg.editing .gsprites{pointer-events:none}
.ga-sway{transform-box:fill-box;transform-origin:50% 100%;animation:gsway 4s ease-in-out infinite}
@keyframes gsway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.ga-bob{animation:gbob 2.4s ease-in-out infinite}
@keyframes gbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ga-twinkle{animation:gtw 2.2s ease-in-out infinite}
@keyframes gtw{0%,100%{opacity:1}50%{opacity:.45}}
.ga-snow{animation:gsnow 6s linear infinite}
@keyframes gsnow{from{transform:translateY(-20px)}to{transform:translateY(40px)}}
.ged-h{margin:4px 0 4px;font-size:22px;font-weight:900}
.ged-sub{margin:0 0 12px;font-size:13px;color:var(--t2);line-height:1.5}
.tray{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 4px;scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
.gti{position:relative;flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.gti.on{box-shadow:inset 0 0 0 2px var(--brand);background:color-mix(in srgb,var(--brand) 16%,var(--s1))}
.gti.empty{opacity:.45}
.gti-n{font-size:11px;font-weight:700;color:var(--t2);white-space:nowrap}
.gti-c{position:absolute;top:4px;right:6px;font-size:10px;font-weight:900;color:var(--t1)}
.gti-sw{width:44px;height:44px;border-radius:12px}
.ged-empty{font-size:13px;color:var(--t3);padding:10px 0}

/* ---------- 결과 보상 · 정원 방문 ---------- */
.reward{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:32px;padding:0 12px;border-radius:99px;background:rgba(255,214,89,.12);color:#FFD659;font-size:14px;font-weight:900;animation:pop .5s var(--spring) .4s both}
.visit-head{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.visit-head h2{margin:0;font-size:20px;font-weight:900}
.visit-head p{margin:3px 0 0;font-size:13px;color:var(--t2)}
.visit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}

/* 탭 알림 점 (출석 보상 대기) */
.tab .ti{position:relative}
.tab.dot .ti::after{content:"";position:absolute;top:3px;right:12px;width:8px;height:8px;border-radius:50%;background:#FF5A79;box-shadow:0 0 0 2px rgba(14,16,34,.9)}

/* ---------- 홈: 지갑 · 아바타 버튼 · 출석 배너 ---------- */
.topbar .wallet{flex:none}
.av-btn{flex:none;display:grid;place-items:center;border-radius:50%}
@media (max-width:370px){.brand span{display:none}}
.daily-mini{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px 14px;border-radius:var(--r-md);text-align:left;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 28%,var(--s1)),var(--s1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 50%,transparent);animation:cardIn .4s var(--ease)}
.daily-mini>svg{width:26px;height:26px;flex:none;color:#FFD659}
.daily-mini span{flex:1;display:flex;flex-direction:column}
.daily-mini b{font-size:15px}
.daily-mini small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--t2);font-weight:700}
.daily-mini em{font-style:normal;font-size:13px;font-weight:900;padding:8px 14px;border-radius:10px;background:var(--brand-grad);color:#fff}
[data-visit]{cursor:pointer}
.rrow[data-visit]:active,.pd[data-visit]:active{opacity:.7}

/* ---------- 신기록 축하 연출 (꾸미기) ---------- */
.confetti.hearts i{width:auto;height:auto;background:none;border-radius:0}
.confetti.gold i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF3B0,#F5B82E 60%,#B7791F)}
.fw{position:absolute;width:0;height:0}
.fw i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);opacity:0;
  animation:fw 1.2s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:inherit}
@keyframes fw{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-72px)}}
.reward svg{width:16px;height:16px}