/* ============================================================
   shop.css — 💰 돈 · 🛒 상점 · 🎒 보관함 · 🗓️ 일일 목표 · 🔐 로그인
   ============================================================ */

/* ---------- 허브: 돈 칸 ---------- */
.hub-meta{grid-template-columns:repeat(5,1fr)}
.hub-meta .meta-coin{border-color:rgba(240,192,74,.42);background:rgba(240,192,74,.08)}
.hub-meta .meta-coin b{color:#f0c04a}
.hub-meta .tappable{cursor:pointer}
.hub-meta .tappable:active{transform:scale(.96)}
@media (max-width:360px){ .hub-meta{grid-template-columns:repeat(3,1fr)} }

.pay-row{font-weight:700}

/* ---------- 🗓️ 일일 목표 ---------- */
.daily-list{display:flex;flex-direction:column;gap:8px}
.daily-row{
  padding:10px 12px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);
}
.daily-row.done{border-color:rgba(62,207,142,.45);background:rgba(62,207,142,.07)}
.daily-row.got{opacity:.62}
/* 하루에 하나짜리 대형 목표 — 크게 보여 준다 */
.daily-row.big{padding:13px 14px}
.daily-row.big .dg-top b{font-size:15px;font-weight:800}
.daily-row.big .dg-bar{height:7px;margin:9px 0 8px}
.dg-reward{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-bottom:8px;padding:8px 10px;border-radius:var(--r-s);
  background:rgba(240,192,74,.1);border:1px solid rgba(240,192,74,.4);
  color:#f0c04a;font-size:11px;font-weight:700;line-height:1.45;
}
.dg-reward b{font-size:12.5px;font-weight:800}
.dg-live{
  font-style:normal;padding:1px 6px;border-radius:99px;
  background:rgba(192,140,255,.2);color:#c08cff;font-size:10px;font-weight:800;
}
.dg-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dg-top b{font-size:13.5px;font-weight:700}
.dg-prog{font-size:11.5px;color:var(--txt-2);font-weight:700;white-space:nowrap}
.dg-bar{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:7px 0 6px}
.dg-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .35s var(--ease)}
.daily-row.done .dg-bar i{background:#3ecf8e}
.dg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dg-foot > span{font-size:10.5px;color:var(--txt-3);line-height:1.4}
.dg-left,.dg-got{font-style:normal;font-size:10.5px;color:var(--txt-3);white-space:nowrap}
.dg-got{color:#3ecf8e;font-weight:700}
.dg-claim{
  flex:none;padding:7px 12px;border-radius:99px;border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;
  animation:dg-pulse 1.5s var(--ease) infinite;
}
.dg-claim:active{transform:scale(.95)}
@keyframes dg-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){ .dg-claim{animation:none} }
/* ---------- 🛒 상점으로 가는 큰 버튼 (허브) ---------- */
.shop-go{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 14px;border-radius:var(--r-l);cursor:pointer;text-align:left;
  background:linear-gradient(135deg,rgba(240,192,74,.2),rgba(240,192,74,.06));
  border:1px solid rgba(240,192,74,.55);color:var(--txt);
  box-shadow:0 0 0 0 rgba(240,192,74,.28);
  animation:shop-breathe 2.8s var(--ease) infinite;
}
.shop-go:active{transform:scale(.99)}
@keyframes shop-breathe{0%,100%{box-shadow:0 0 0 0 rgba(240,192,74,.26)}50%{box-shadow:0 0 0 6px rgba(240,192,74,0)}}
@media (prefers-reduced-motion:reduce){ .shop-go{animation:none} }
.sg-ico{
  flex:none;width:38px;height:38px;border-radius:var(--r-m);display:grid;place-items:center;
  background:rgba(240,192,74,.16);font-size:20px;line-height:1;
}
.sg-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.sg-body b{font-size:13.5px;font-weight:800}
.sg-body span{font-size:11px;color:#f0c04a;font-weight:700}
.sg-badge{
  flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  display:grid;place-items:center;background:#f0c04a;color:#241a02;font-size:11px;font-weight:800;
}
.sg-go{flex:none;width:18px;height:18px;color:#f0c04a}
.sg-go svg{width:18px;height:18px;display:block}

/* ---------- 🛒 상점 화면 ---------- */
.purse{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:6px 11px;border-radius:var(--r-m);
  background:rgba(240,192,74,.1);border:1px solid rgba(240,192,74,.42);
}
.purse span{font-size:9.5px;color:var(--txt-3)}
.purse b{font-size:15px;font-weight:800;color:#f0c04a;letter-spacing:.2px}

/* 보관함은 '사용 불가' 안내가 들어갈 수 있어 한 줄에 하나 */
.shop-list.bag-list{grid-template-columns:1fr}
.shop-list.bag-list .si-desc,
.shop-list.bag-list .si-head b{font-size:13px}
.shop-list.bag-list .si-emoji{font-size:24px}
.shop-list.bag-list .si-buy{font-size:13px;padding:11px}

.shop-wrap{display:flex;flex-direction:column;gap:12px;padding:12px 0 20px}
.shop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shop-tab{
  padding:10px;border-radius:var(--r-m);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--txt-2);
  font-size:12.5px;font-weight:700;
}
.shop-tab.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.shop-tab em{
  font-style:normal;margin-left:5px;padding:1px 6px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:800;
}
/* 한 줄에 상품 두 개 */
.shop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

.shop-item{
  display:flex;flex-direction:column;
  padding:11px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);
}
/* 💜 특별 상품 — 보라색 */
.shop-item.rare{
  border-color:rgba(192,140,255,.55);
  background:linear-gradient(160deg,rgba(192,140,255,.14),rgba(192,140,255,.04));
}
.shop-item.rare .si-effect{
  background:rgba(192,140,255,.14);border-color:rgba(192,140,255,.45);color:#c08cff;
}
.shop-item.rare .si-buy{background:#c08cff;color:#1b0f2c}
.si-top{display:flex;align-items:flex-start;gap:8px}
.si-emoji{flex:none;font-size:21px;line-height:1.1}
.si-head{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.si-head b{font-size:12.5px;font-weight:800;line-height:1.3;word-break:keep-all}
.si-tag{font-size:10px;color:var(--txt-3);line-height:1.35}
.si-own{
  flex:none;padding:2px 7px;border-radius:99px;
  background:var(--surface-3);color:var(--txt-2);font-size:10.5px;font-weight:800;
}
.si-desc{margin:7px 0 0;font-size:10.5px;line-height:1.5;color:var(--txt-2);word-break:keep-all}
.si-effect{
  margin-top:7px;padding:6px 8px;border-radius:var(--r-s);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);font-size:10.5px;font-weight:700;line-height:1.4;word-break:keep-all;
}
.si-why{margin:7px 0 0;font-size:10px;color:#ff9aa2;line-height:1.45}
.si-buy{
  width:100%;margin-top:auto;padding:10px 6px;border-radius:var(--r-m);border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;
  font-feature-settings:"tnum" 1;word-break:keep-all;
}
/* 카드 높이가 달라도 구매 버튼은 바닥에 나란히 놓인다 (margin-top:auto) */
.si-effect{margin-bottom:9px}
.si-buy:active{transform:scale(.985)}
.si-buy.poor{background:var(--surface-3);color:var(--txt-3)}
.si-buy.use{background:#f0c04a;color:#241a02}
.si-buy:disabled{background:var(--surface-3);color:var(--txt-3);cursor:not-allowed;transform:none}

/* ---------- 능력치 고르기 ---------- */
.pick-stats{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.pick-stat{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"n v" "b b" "s s";
  gap:4px 8px;padding:10px 12px;border-radius:var(--r-m);cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--line);color:var(--txt);
}
.pick-stat.off{opacity:.42;cursor:not-allowed}
.pick-stat:not(.off):active{transform:scale(.985);border-color:var(--accent-line)}
.ps-name{grid-area:n;font-size:13px;font-weight:700}
.ps-val{grid-area:v;font-size:11px;color:var(--txt-2)}
.ps-val b{font-size:14px;font-weight:800;color:var(--txt)}
.ps-val em{font-style:normal;margin-left:3px;color:var(--txt-3)}
.ps-bar{grid-area:b;display:block;height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.ps-bar i{display:block;height:100%;background:var(--accent)}
.ps-note{grid-area:s;font-size:10.5px;color:var(--txt-3)}

/* ---------- 🔐 로그인 ----------
   모바일 우선 — 작은 화면 · 가로 화면 · 키보드가 올라온 상태에서도
   내용이 잘리지 않고 창 안에서 스크롤된다 */
.scene.login{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;              /* center 로 두면 넘칠 때 위가 잘려 닿지 않는다 */
  gap:clamp(10px,3vh,18px);
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px)
          calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
/* 세로 여유가 있으면 가운데로 모으고, 모자라면 위에서부터 스크롤된다 */
.scene.login > *{flex:0 0 auto;width:100%;max-width:400px}
.scene.login > :first-child{margin-top:auto}
.scene.login > :last-child{margin-bottom:auto}

.login-logo{text-align:center;display:flex;flex-direction:column;gap:5px}
.login-logo b{font-family:var(--f-num);font-size:clamp(28px,9vw,40px);letter-spacing:2px;line-height:1}
.login-logo span{font-size:clamp(10.5px,3.2vw,12px);line-height:1.5;color:var(--txt-3)}
.login-card{
  display:flex;flex-direction:column;gap:9px;padding:clamp(13px,4vw,18px);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);
}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:3px}
.login-tab{
  padding:10px;border-radius:var(--r-m);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--txt-2);
  font-size:12.5px;font-weight:700;
}
.login-tab.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.login-field{display:flex;flex-direction:column;gap:5px}
.login-field label{font-size:11px;color:var(--txt-3);font-weight:700}
.login-input{
  width:100%;padding:12px 13px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line);color:var(--txt);
  /* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 — 그래서 16px 고정 */
  font-size:16px;line-height:1.25;outline:none;-webkit-appearance:none;appearance:none;
}
.login-input:focus{border-color:var(--accent-line)}
.login-note{margin:2px 0 0;font-size:11.5px;line-height:1.55;color:var(--txt-3);min-height:17px}
.login-note.bad{color:#ff9aa2}
.login-note.ok{color:var(--accent)}
.login-guest{
  padding:13px;border-radius:var(--r-m);cursor:pointer;
  background:transparent;border:1px dashed var(--line-2);color:var(--txt-2);
  font-size:12.5px;font-weight:700;line-height:1.4;
  min-height:44px;                      /* 터치 타깃 최소 크기 */
}
.login-guest:active{transform:scale(.99)}
.scene.login .btn{min-height:46px}
.scene.login .hint{margin:0;text-align:center}

/* 가로 화면 · 키보드가 올라와 세로가 아주 짧을 때 — 더 조밀하게 */
@media (max-height:520px){
  .scene.login{gap:9px;padding-top:calc(var(--sat) + 10px);padding-bottom:calc(var(--sab) + 10px)}
  .login-logo b{font-size:24px}
  .login-logo span,
  .scene.login .hint{display:none}
  .login-card{padding:12px;gap:7px}
  .login-field label{font-size:10px}
  .login-input{padding:9px 11px}
}
.login-warn{
  padding:11px 13px;border-radius:var(--r-m);
  background:rgba(229,96,106,.1);border:1px solid rgba(229,96,106,.4);
  color:#ff9aa2;font-size:11.5px;line-height:1.6;
}
.guest-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:var(--r-m);
  background:rgba(229,96,106,.1);border:1px solid rgba(229,96,106,.4);
}
.guest-bar span{font-size:11px;line-height:1.5;color:#ff9aa2;font-weight:700}
.guest-bar button{
  flex:none;padding:7px 12px;border-radius:99px;border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;
}
.acct-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);
}
.acct-row.dev{border-color:rgba(192,140,255,.5);background:rgba(192,140,255,.07)}
.acct-row.dev .sync-dot{background:#c08cff}
.acct-row b{font-size:12.5px}
.acct-dev{
  font-style:normal;margin-left:5px;padding:1px 6px;border-radius:99px;
  background:rgba(192,140,255,.22);color:#c08cff;font-size:9.5px;font-weight:800;
}
.acct-row span{font-size:10.5px;color:var(--txt-3);display:block;margin-top:2px}
.acct-row button{
  flex:none;padding:7px 12px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--txt-2);
  font-size:11.5px;font-weight:700;
}
.sync-dot{
  display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--accent);margin-right:5px;vertical-align:middle;
}
.sync-dot.off{background:var(--txt-3)}
.sync-dot.bad{background:#e5606a}