/* 학교 앞 문방구 */
.sb-game{max-width:560px;margin:0 auto;position:relative}
.sb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.sb-lbl{font-size:12px;color:var(--muted);font-weight:600}
.sb-coin{display:flex;align-items:center;gap:8px;font-size:28px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.sb-coin i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a0,#e0b23a 60%,#b98a1e);box-shadow:inset 0 0 0 2px #c99a2e;flex:none}
.sb-rate{text-align:right;font-size:13px;color:var(--muted)}
.sb-rate b{display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.sb-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:4px}
.sb-chips span{font-size:11.5px;font-weight:800;border-radius:99px;padding:2px 8px;background:#2f6fd0;color:#fff}
.sb-chips span#sb-fadchip{background:#e2504a}
/* 하루 막대 */
.sb-daybar{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.sb-daytrack{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#f6d27a 0 18%,#cfd8e3 18% 52%,#f29a5a 52% 84%,#6a6a9a 84% 100%);position:relative;opacity:.85}
.sb-daytrack i{position:absolute;left:0;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:#2b2a28}
#sb-dayfill{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.18);border-radius:4px}
#sb-phase{border-radius:99px;padding:2px 9px;color:#fff;background:#6b7682;white-space:nowrap}
#sb-phase[data-k=morning]{background:#c99a2e}#sb-phase[data-k=rush]{background:#e2724a}#sb-phase[data-k=evening]{background:#4a4a7a}
/* 장면 */
.sb-scene{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;background:#bfe3f2;transition:background 1.2s}
.sb-scene[data-time=morning]{background:linear-gradient(#ffe7b8,#bfe3f2)}
.sb-scene[data-time=class]{background:linear-gradient(#a9d8f0,#dff1f8)}
.sb-scene[data-time=rush]{background:linear-gradient(#ffc98a,#ffe6c4)}
.sb-scene[data-time=evening]{background:linear-gradient(#3b3963,#7a6a9a)}
.sb-school{position:absolute;left:4%;top:6%;width:30%;height:34%;background:#e8dcc8;border-radius:4px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06)}
.sb-school:before{content:"";position:absolute;inset:16% 10% 30%;background:repeating-linear-gradient(90deg,#a9c8de 0 16%,transparent 16% 22%);opacity:.9}
.sb-school:after{content:"";position:absolute;left:50%;top:-16%;width:18%;height:22%;transform:translateX(-50%);background:#fff;border-radius:50%;box-shadow:0 0 0 3px #c9b89a}
.sb-scene[data-time=evening] .sb-school{filter:brightness(.6)}
.sb-shop{position:absolute;left:30%;right:4%;top:14%;bottom:24%;background:#f6efe2;border-radius:6px 6px 0 0;box-shadow:0 -2px 0 #d8cbb2 inset}
.sb-scene[data-time=evening] .sb-shop{background:#e8dcc4}
.sb-awn{position:absolute;left:-3%;right:-3%;top:16%;height:15%;background:repeating-linear-gradient(90deg,#e2504a 0 9%,#fff7ea 9% 18%);border-radius:0 0 10px 10px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.sb-signb{position:absolute;left:8%;right:8%;top:-4%;height:20%;background:#2f4f7f;color:#fff8e0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(12px,3.4vw,18px);letter-spacing:-.3px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.sb-scene[data-time=evening] .sb-signb{box-shadow:0 0 0 2px #ffd27a,0 0 18px rgba(255,210,122,.7)}
.sb-win{position:absolute;left:6%;width:52%;top:38%;bottom:6%;background:#cfe6f0;border:4px solid #8a6a4a;border-radius:4px;overflow:hidden}
.sb-scene[data-time=evening] .sb-win{background:#ffe9b0}
#sb-shelf{position:absolute;left:4%;right:4%;bottom:6%;display:grid;grid-template-columns:repeat(4,1fr);gap:2px 4px}
#sb-shelf span{display:block;aspect-ratio:1}
#sb-shelf svg{width:100%;height:100%}
.sb-win:after{content:"";position:absolute;left:0;right:0;top:46%;height:4px;background:#a8865e}
.sb-door{position:absolute;right:8%;width:26%;top:38%;bottom:0;background:#a8865e;border-radius:4px 4px 0 0}
.sb-door:before{content:"";position:absolute;inset:10% 14% 30%;background:#cfe6f0;border-radius:2px;opacity:.9}
.sb-door:after{content:"";position:absolute;right:12%;top:58%;width:8%;height:6%;border-radius:50%;background:#f2c230}
.sb-owner{position:absolute;right:13%;bottom:4%;width:16%;aspect-ratio:3/4}
.sb-ground{position:absolute;left:0;right:0;bottom:0;height:24%;background:#d9cdb8;border-top:4px solid #c5b79c}
.sb-scene[data-time=evening] .sb-ground{background:#a89c86}
/* 꾸미기 */
.sb-dec{position:absolute;display:none}
.sb-dec.on{display:block}
#d-bench{left:32%;bottom:17%;width:24%;height:6%;background:#8a6a4a;border-radius:3px;box-shadow:0 7px 0 -3px #6b5038}
#d-radio{left:60%;top:31%;width:7%;height:7%;background:#3a3d42;border-radius:3px}
#d-radio:after{content:"";position:absolute;left:15%;top:25%;width:35%;height:50%;border-radius:50%;background:#9aa3ad}
#d-gacha{left:24%;bottom:14%;width:7%;height:20%;background:#e2504a;border-radius:40% 40% 4px 4px}
#d-gacha:before{content:"";position:absolute;left:12%;right:12%;top:8%;height:46%;border-radius:50%;background:radial-gradient(circle at 30% 35%,#fff 0 12%,#f2c230 13% 30%,#7fd0f0 31% 48%,#fff8 49%)}
#d-sign{right:2%;top:2%;width:6%;height:10%;background:#ffd27a;border-radius:4px;box-shadow:0 0 12px #ffd27a}
#d-cat{left:52%;bottom:20%;width:8%;aspect-ratio:1}
.sb-kids{position:absolute;inset:0;pointer-events:none}
.sb-kid{position:absolute;bottom:5%;width:8%;aspect-ratio:30/52;transition:left 2.2s linear;transform-origin:bottom center}
.sb-kid svg{width:100%;height:100%;display:block;animation:sbwalk .35s ease-in-out infinite alternate}
.sb-kid.buy svg{animation:none}
@keyframes sbwalk{from{transform:translateY(0)}to{transform:translateY(-4%)}}
.sb-pop{position:absolute;bottom:42%;transform:translateX(-50%);font-weight:800;font-size:15px;color:#2b2a28;pointer-events:none;animation:sbpop 1.1s ease-out forwards;white-space:nowrap}
.sb-pop.coin{color:#b98a1e;text-shadow:0 1px 0 #fff,0 0 6px #fff}
.sb-pi{display:block;width:30px;height:30px;background:#fff;border-radius:50%;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.sb-pi svg{width:100%;height:100%}
@keyframes sbpop{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-40px)}}
.sb-toast{position:absolute;left:50%;top:10px;transform:translate(-50%,-6px);background:rgba(38,35,32,.88);color:#fff;font-size:13px;font-weight:700;padding:7px 12px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.sb-toast.show{opacity:1;transform:translate(-50%,0)}
.sb-tapcue{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:rgba(43,42,40,.6);pointer-events:none;white-space:nowrap}
.sb-scene[data-time=evening] .sb-tapcue{color:rgba(255,255,255,.75)}
/* 버튼 줄 */
.sb-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sb-adbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 14px;border-radius:14px;border:0;background:#2f4f7f;color:#fff;font-weight:800;font-size:15px;text-align:left;cursor:pointer}
.sb-adbtn small{font-weight:600;opacity:.8;font-size:12px}
.sb-fad{display:none;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:#fff3e0;border:2px solid #f2a23a;font-size:13.5px}
.sb-fad.show{display:flex}
.sb-fad .btns{display:flex;gap:6px;flex:none}
.sb-fad button{padding:7px 10px;border-radius:10px;font-size:12.5px;font-weight:800}
.sb-fad button.primary{background:#e2724a;border-color:#e2724a;color:#fff}
/* 탭·목록 */
.sb-tabs{display:flex;gap:6px;margin:12px 0 8px}
.sb-tabs button{flex:1;padding:9px 0;border-radius:12px;font-weight:800;font-size:14px;position:relative}
.sb-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sb-tabs button.dot:after{content:"";position:absolute;right:10px;top:8px;width:7px;height:7px;border-radius:50%;background:#e2504a}
.sb-list{display:flex;flex-direction:column;gap:6px}
.sb-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 10px}
.sb-row.new{border-color:#f2a23a;background:#fffaf0}
.sb-row.done{opacity:.72}
.sb-row.lock{opacity:.55}
.sb-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f5eee2;font-weight:800;color:var(--muted)}
.sb-ico svg{width:34px;height:34px}
.sb-num{font-size:16px;color:var(--ink)}
.sb-rt{flex:1;min-width:0}
.sb-rt b{display:block;font-size:14.5px}
.sb-rt small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.sb-lv{font-size:11.5px;font-weight:800;color:#2f6fd0;margin-left:3px}
.sb-hot{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:#e2504a;border-radius:6px;padding:1px 5px;margin-left:3px}
.sb-row button{flex:none;min-width:86px;padding:7px 8px;border-radius:11px;font-size:12.5px;font-weight:800;line-height:1.25;background:#2f6f6a;border-color:#2f6f6a;color:#fff}
.sb-row button:disabled{background:#e9e2d4;border-color:#e9e2d4;color:#9a917f;cursor:default}
.sb-h{font-size:12.5px;font-weight:800;color:var(--muted);margin:10px 2px 0}
.sb-name{display:flex;gap:6px}
.sb-name input{flex:1;min-width:0;padding:9px 12px;border-radius:12px;border:1px solid var(--line);font-size:14px;background:#fff}
.sb-name button{padding:0 14px;border-radius:12px;font-weight:800}
.sb-memo-h{font-size:13px;color:var(--muted);margin:0 2px 4px;line-height:1.55}
.sb-memo{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.sb-memo b{font-size:12px;color:#c99a2e;flex:none;margin-top:2px}
.sb-memo p{margin:0;font-size:13.5px;line-height:1.6}
.sb-memo.lock{background:transparent;border-style:dashed}
.sb-memo.lock p{color:var(--muted);font-size:12.5px}
.sb-proto{font-size:12px;color:var(--muted);margin:12px 2px 0}
/* 오버레이 */
.sb-ov{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(38,35,32,.45);padding:20px}
.sb-ov.show{display:flex}
.sb-card{background:#fbf8f2;border-radius:20px;padding:22px 20px;max-width:340px;width:100%;text-align:center}
.sb-card h3{margin:0 0 6px;font-size:20px}
.sb-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.sb-card .big{font-size:32px;font-weight:800;margin:12px 0;letter-spacing:-1px}
.sb-card .col{display:flex;flex-direction:column;gap:8px}
.sb-card button{padding:12px 0;border-radius:12px;font-weight:800;font-size:15px}
.sb-card button.primary{background:#e2724a;border-color:#e2724a;color:#fff}
.sb-adbox{background:#2b2a28;color:#fff;border-radius:18px;padding:26px 22px;text-align:center;max-width:320px}
.sb-adbox .cnt{font-size:44px;font-weight:800;margin:10px 0}
.sb-adbox p{margin:0;font-size:13px;opacity:.75;line-height:1.55}
@media(max-width:520px){.sb-coin{font-size:24px}.sb-row button{min-width:78px}}