/* おみせ（下の タブ・js/shop.js）2026-10-01。さわやか版の 白・水色に 合わせる */
#scr-shop .shop { display: grid; gap: 10px; padding-bottom: 18px; }
#scr-shop h3 { margin: 10px 2px 0; font: 900 16px var(--font-ui); color: var(--ink); display: flex; align-items: center; gap: 6px; }
#scr-shop h3 .pr { padding: 1px 7px; border-radius: 6px; background: #eef2f5; color: #6b7d8c; font-size: 10.5px; letter-spacing: .1em; }
.sh-top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.sh-title { padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #fff8e6, #ffe9c2); box-shadow: 0 3px 12px rgba(21, 50, 74, .08); display: grid; gap: 4px; }
.sh-title small { font: 800 10.5px var(--font-ui); color: #a07a3a; }
.sh-title b { font: 900 22px var(--font-ui); color: #6b4a14; }
.sh-title span { font: 800 11px/1.45 var(--font-ui); color: #8a6a34; }
.sh-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb547, #ff8a3c); }
.sh-wallet { display: grid; gap: 8px; }
.sh-wallet .w { min-width: 92px; padding: 8px 10px; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgba(21, 50, 74, .08); display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.sh-wallet .w em { grid-row: span 2; font-style: normal; font: 900 20px var(--font-ui); color: #2aa6d6; }
.sh-wallet .w.st em { color: #f0a800; }
.sh-wallet .w b { font: 900 18px var(--font-ui); color: var(--ink); }
.sh-wallet .w small { font: 800 9px var(--font-ui); color: var(--ink-3); white-space: nowrap; }
.sh-lead { margin: -4px 2px 0; font: 700 11.5px/1.6 var(--font-ui); color: var(--ink-2); }
.sh-sub { margin: 2px 2px -2px; font: 900 12px var(--font-ui); color: var(--ink-2); }
.sh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 380px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-it { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #e3edf2, 0 3px 10px rgba(21, 50, 74, .06); color: var(--ink); font: inherit; cursor: pointer; }
.sh-it img { width: 46px; height: 46px; object-fit: contain; }
.sh-it .g { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #f1f7fa; font: 900 20px var(--font-ui); color: #5b3a1e; }
.sh-it .g.drop { background: none; }
.sh-it .g.drop::before { content: ''; width: 24px; height: 31px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #7fd3f0 60%, #2aa6d6); }
.sh-it .n { font: 900 10.5px/1.3 var(--font-ui); text-align: center; }
.sh-it em { font-style: normal; padding: 1px 8px; border-radius: 99px; background: #e8f6fb; color: #1d8fb3; font: 900 11px var(--font-ui); }
.sh-it.st em { background: #fff6c2; color: #b07a00; }
.sh-it em.two { font-size: 10px; padding: 1px 6px; background: linear-gradient(90deg, #e8f6fb 50%, #fff6c2 50%); color: #5b4a1e; }
.sh-it.own { opacity: .62; }
.sh-it.own em { background: #eef2f5; color: #6b7d8c; }
.sh-it .cnt { position: absolute; right: 4px; top: 4px; font-style: normal; padding: 0 6px; border-radius: 99px; background: #2aa6d6; color: #fff; font: 900 10px/16px var(--font-ui); }
.sh-it:active { transform: translateY(2px); }
.sh-real { display: grid; gap: 8px; }
.sh-real .card { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgba(21, 50, 74, .08); }
.sh-real .card img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.sh-real .card b { font: 900 13.5px var(--font-ui); }
.sh-real .card p { margin: 2px 0 6px; font: 700 11px/1.5 var(--font-ui); color: var(--ink-2); }
.sh-btn { display: inline-block; padding: 9px 16px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #ffb657, #ff8c3a); color: #fff; font: 900 13px var(--font-ui); text-decoration: none; text-align: center; cursor: pointer; box-shadow: 0 3px 0 #d8702a; }
.sh-btn.small { padding: 6px 12px; font-size: 11.5px; }
.sh-btn.ghost { background: #eef2f5; color: var(--ink-2); box-shadow: 0 3px 0 #d5dee5; }
.sh-fine { margin: 4px 2px 0; font: 700 10.5px/1.6 var(--font-ui); color: var(--ink-3); }
.sh-ov { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 16px; background: rgba(21, 30, 40, .45); }
.sh-gate { width: min(100%, 340px); padding: 18px; border-radius: 22px; background: #fff; display: grid; gap: 10px; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.sh-gate b { font: 900 15px var(--font-ui); }
.sh-gate p { margin: 0; font: 700 12px/1.6 var(--font-ui); color: var(--ink-2); }
/* 下の タブが 6 つ に なったので 字を すこし 小さく・1 行に */
.tabbar .tab span { white-space: nowrap; letter-spacing: -.02em; }
@media (max-width: 420px) { .tabbar { gap: 0; padding-left: 4px; padding-right: 4px; } .tabbar .tab { font-size: 10px; padding-left: 2px; padding-right: 2px; } }