.social-layer{position:fixed;inset:0;z-index:200;background:linear-gradient(#5bc6f5ee,#dff8ffee);display:flex;align-items:center;justify-content:center;padding:16px}.social-layer.off{display:none}.social-card{width:min(100%,430px);max-height:92dvh;overflow:auto;background:linear-gradient(145deg,#fff,#e6f8ff);border:4px solid #fff;border-radius:28px;padding:20px;text-align:center;color:#174f7e;box-shadow:0 12px 0 #3094c466,0 20px 50px #14517655}.social-card>img{width:115px;height:145px;object-fit:cover;object-position:center;border-radius:25px;mix-blend-mode:multiply}.social-card h2{margin:7px 0;font-size:24px}.social-card p{font-size:12px;line-height:1.6}.name-input{width:100%;height:56px;border:3px solid #8bd5f4;border-radius:16px;background:white;text-align:center;font:900 21px "Malgun Gothic",sans-serif;color:#154f7d;outline:none}.name-input:focus{border-color:#368fd2;box-shadow:0 0 0 4px #8cd8f455}.primary-social,.social-actions button,.rank-tabs button{width:100%;min-height:48px;border:2px solid white;border-radius:15px;background:#4caef0;color:#fff;font-weight:900;font-size:15px;box-shadow:0 5px #2375ae;margin-top:10px}.social-actions{display:grid;gap:8px}.social-actions button{margin:0}.social-actions .soft{background:#fff;color:#246797;box-shadow:0 4px #86bdd5}.result-score{background:#dff6ff;border-radius:18px;margin:12px 0;padding:13px}.result-score strong{display:block;font-size:31px;color:#ff6e64}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.result-grid div{background:white;border-radius:13px;padding:9px}.result-grid small{display:block;font-size:9px}.result-grid b{font-size:16px}.share-preview{white-space:pre-line;text-align:left;background:#123b5b;color:white;border-radius:14px;padding:14px;font-size:12px;line-height:1.6}.rank-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rank-tabs button{margin:0;font-size:12px;min-height:40px}.rank-tabs button.active{background:#ffb848;box-shadow:0 4px #ce8530}.rank-list{list-style:none;padding:0;margin:12px 0;text-align:left}.rank-list li{display:grid;grid-template-columns:38px 1fr auto;align-items:center;background:#fff;border-radius:12px;padding:10px;margin:6px 0;font-weight:900}.rank-list li.me{background:#fff1b8;border:2px solid #ffc74d}.empty-rank{padding:25px 5px;color:#54849f}.goal-chip{display:inline-block;background:#fff1b8;color:#996100;border-radius:16px;padding:5px 10px;font-size:10px;font-weight:900;margin-left:4px}.menu-nav button{cursor:pointer}
@media(max-height:650px){.social-card{padding:13px}.social-card>img{width:78px;height:90px}.social-card h2{font-size:20px}.primary-social,.social-actions button{min-height:42px;margin-top:6px}.result-score{margin:7px 0;padding:8px}}
.online-note{display:block;min-height:18px;margin:5px 0;color:#397792;font-size:10px;text-align:center}.period-tabs{margin-top:6px}.rank-list{max-height:min(48vh,430px);overflow:auto;overscroll-behavior:contain}.rank-list li{grid-template-columns:30px 38px 1fr auto}.rank-list li b i{display:inline-block;padding:2px 5px;border-radius:8px;background:#ffda59;color:#694c00;font-size:8px;font-style:normal}.rank-list li em,#onlineResult em{display:block;color:#31749a;font-size:8px;font-style:normal}.near-rank{margin:9px 0;padding:8px;border:2px solid #9edcff;border-radius:14px;background:#eefaff}.near-rank>b,.near-rank>span{display:block;text-align:center}.near-rank>span{margin:3px 0 6px;color:#26709d;font-size:10px}.near-rank ol{margin:0;padding:0}.near-rank li{display:grid;grid-template-columns:30px 38px 1fr auto;align-items:center;gap:5px;padding:4px;border-radius:9px;list-style:none}.near-rank li.me{background:#fff1a8}.challenge-result{display:grid;gap:3px;margin:7px 0;padding:9px;border:2px solid #a9dff5;border-radius:13px;background:#effaff;text-align:center}.challenge-result.success{border-color:#ffd04e;background:#fff6c9}.challenge-result span{font-size:10px}#onlineResult b{display:block}#onlineResult em{margin-top:2px}