/* ═══════════════════════════════════════════════════════════════════════
   틀린그림찾기 — 타이틀 · 메뉴 · 창 · 결과 (10-24 · 런칭 공통 마무리 여덟)
   📋 놀이터공통/전달_런칭공통마무리_2026-10-24.md · 전달_첫화면통일 · 전달_메뉴아이콘넷 · 전달_보상화면 · 전달_설정이벤트_배지밸런스
   시안 = 시안_정식/시안_시작화면_거울_2026-10-23.html(①-2 타이틀 · ② 메뉴 · ③ ④ 랭킹 창) · 시안_보상화면_2026-10-23.html
   결과 카드 = 미야오 아처 결과화면_양식_2026-10-19.md 6-1 그대로(rs-) · 멈춤 · 확인 = 지구방위대 기획서_멈춤화면 9절
   크기 — 기둥 폭(--frame-w) 안 · --ru = 기둥 폭/375 와 화면 높이/760 중 작은 쪽(.72 ~ 1.4) · --rt = 글자(PC 는 --ru × .95) · 게임.html 의 맞추기()가 넣는다
   ═══════════════════════════════════════════════════════════════════════ */
:root{--ru:1;--rt:1;--ink:#2a1f18;--brown:#6b4f36;--sub:#9a7a5c;--cream:#fffaf0;--line:rgba(122,70,48,.35);--rule:#f0e2cc;--tab:#f1e4cf;--pink:#e2566e;--pink-d:#b23d52}
.sd-np{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--frame-w);z-index:30;overflow:hidden;
  font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);word-break:keep-all;-webkit-tap-highlight-color:transparent}
:where(.sd-np,.sd-win,.sd-page,.sd-end) *{box-sizing:border-box}
:where(.sd-np,.sd-win,.sd-page,.sd-end) button{font:inherit;color:inherit}   /* :where — 힘 0 이라 단추마다 준 굵기 · 색이 이긴다 */
.sd-win,.sd-page{font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);word-break:keep-all}

/* ── 타이틀 · 메뉴 — 거울 3판 배경 가득(10-23 1.1배 · 아래 맞춤 · 로고에 거울이 안 가리게 65%) ── */
.sd-scr{position:absolute;inset:0;background:#e9dcc6 50% 65%/auto 110% no-repeat}   /* 그림 주소는 게임.html(타이틀배경) — 로딩 화면이 미리 받은 주소와 같게 */
.sd-ttop{position:absolute;z-index:3;top:0;left:0;right:0;height:9%;pointer-events:none}   /* 위 버튼 띠 0 ~ 9% · 지름 40 · 가장자리 12(첫화면통일) */
.sd-ib{position:absolute;pointer-events:auto;width:calc(40px*var(--ru));height:calc(40px*var(--ru));padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.sd-ib img{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(40,20,5,.45))}   /* 흰 동그라미 없이 누끼 + 옅은 그림자(메뉴아이콘넷) */
.sd-ib:active img{transform:scale(.92)}
.sd-ttop .l{top:calc(12px*var(--ru));left:calc(12px*var(--ru))}.sd-ttop .r{top:calc(12px*var(--ru));right:calc(12px*var(--ru))}
.sd-tlogo{position:absolute;z-index:2;left:0;right:0;top:10%;height:22%;display:flex;align-items:center;justify-content:center;pointer-events:none}   /* 로고 10 ~ 32% · 폭 82% 안 */
.sd-tlogo img{max-width:82%;max-height:100%;display:block;filter:drop-shadow(0 4px 6px rgba(60,30,10,.25))}
.sd-duo{position:absolute;z-index:2;left:0;right:0;top:62%;height:16%;pointer-events:none}   /* 10-23 「썰렁 · 엽서 두 장 작게 · 그레이 거울 살려」 */
.sd-duo .pc{position:absolute;width:36%;aspect-ratio:4/3;background:#fffaf2;border-radius:calc(7px*var(--ru));padding:calc(4px*var(--ru));box-shadow:0 3px 0 rgba(90,55,20,.35),0 8px 14px rgba(60,30,10,.3)}
.sd-duo .pc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(4px*var(--ru))}
.sd-duo .a{left:12%;top:10%;transform:rotate(-6deg)}
.sd-duo .b{right:12%;top:16%;transform:rotate(5deg);z-index:2}
.sd-duo .tag{position:absolute;left:50%;top:calc(-10px*var(--ru));transform:translateX(-50%);font-size:calc(11px*var(--rt));font-weight:900;color:#1d1830;background:#f6c26b;border-radius:999px;padding:calc(2px*var(--ru)) calc(9px*var(--ru));white-space:nowrap;box-shadow:0 2px 0 #b07a22}
.sd-duo .tag.pk{background:#ff9fb2;box-shadow:0 2px 0 #b4475c}
.sd-duo .ring{position:absolute;left:0;top:14%;width:18%;height:18%;overflow:visible}
.sd-duo .ring ellipse{fill:none;stroke:#e0313f;stroke-width:5;stroke-linecap:round}
.sd-tap{position:absolute;z-index:2;left:0;right:0;top:86%;transform:translateY(-50%);text-align:center;font-size:calc(20px*var(--rt));font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(40,20,5,.75),0 0 2px rgba(40,20,5,.9);animation:sdBlink 1.4s ease-in-out infinite;pointer-events:none}
@keyframes sdBlink{50%{opacity:.35}}

.sd-mlogo{position:absolute;z-index:2;left:0;right:0;top:7.5%;text-align:center;pointer-events:none}
.sd-mlogo img{display:block;margin:0 auto;width:69%;filter:drop-shadow(0 4px 6px rgba(60,30,10,.25))}
/* 🔴 10-25 메뉴 아래 줄 · 게임 시작 · 랭킹 카드는 nn-ui 한 벌(.nu-menu · .nu-rank · .nu-pod · .nu-mrow · .nu-start) — 여기에 자리 · 크기 · 색을 두지 않는다 */

/* 랭킹 카드 — 금(.rk-spotdiff · 놀이터 기준 전달_메뉴카드오행색) · 탭 둘 [주간 | 명예의 전당] */
.sd-pod3{list-style:none;margin:calc(4px*var(--ru)) 0 0;padding:0;display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:calc(4px*var(--ru));align-items:start}
.sd-pod3 li{display:flex;flex-direction:column;align-items:center;min-width:0}
.sd-pod3 .r1{order:2}.sd-pod3 .r2{order:1}.sd-pod3 .r3{order:3}
.sd-pod3 .box{position:relative;width:100%;height:calc(78px*var(--ru))}.sd-pod3 .r1 .box{height:calc(84px*var(--ru))}   /* 전체 랭킹 창 시상대(메뉴 카드는 10-25 부터 nn-ui .nu-pod) */
.sd-pod3 .r2 .box,.sd-pod3 .r3 .box{margin-top:calc(6px*var(--ru))}
.sd-pod3 .box::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(62px*var(--ru));height:calc(23px*var(--ru));background:center/contain no-repeat url("podium-silver.webp")}
.sd-pod3 .r1 .box::after{width:calc(68px*var(--ru));height:calc(25px*var(--ru));background-image:url("podium-gold.webp")}
.sd-pod3 .r3 .box::after{background-image:url("podium-bronze.webp")}
.sd-pod3 .face{position:absolute;z-index:1;left:50%;bottom:calc(14px*var(--ru));transform:translateX(-50%);width:calc(54px*var(--ru));height:calc(54px*var(--ru));border-radius:50%;background:#fff;border:2.5px solid #fff;box-shadow:0 0 0 2px #AEB8C4,0 4px 8px rgba(40,40,60,.25);display:grid;place-items:center;font-size:calc(22px*var(--rt));font-weight:900;color:#c3cad4}
.sd-pod3 .r1 .face{width:calc(60px*var(--ru));height:calc(60px*var(--ru));box-shadow:0 0 0 2px #E0B14A,0 4px 8px rgba(60,30,10,.28);color:#e0c27a}
.sd-pod3 .r3 .face{box-shadow:0 0 0 2px #C98A55,0 4px 8px rgba(60,30,10,.25)}
.sd-pod3 .nm{max-width:100%;margin-top:calc(3px*var(--ru));font-size:calc(12.5px*var(--rt));font-weight:800;line-height:1.25;white-space:nowrap;color:var(--rsub)}

/* ── 창 — 🔴 10-24 런칭 2차 5 · 6절: 다섯 게임 같은 카드 · 값은 공통 nn-ui.css 의 --nu-* 만(숫자 직접 ✕) · 바탕 = 게임 색(틀린그림 금 = 흰 · 은회) ── */
.sd-win{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--frame-w);z-index:80;display:grid;place-items:center;padding:calc(10px*var(--ru)) 0;background:var(--nu-dim)}
.sd-play .sd-win,.sd-play .sd-page{position:absolute}   /* 가로 전체 화면(놀이 칸이 화면 가득)일 때 그 안에 옮겨 단다 */
.sd-play.side .sd-win,.sd-play.side .sd-page{width:min(100%,calc(100vh*.75))}
.sd-card{position:relative;width:var(--nu-card-w);max-width:var(--nu-card-max);max-height:calc(100% - 4px);overflow:auto;padding:var(--nu-card-pad);border-radius:var(--nu-card-r);background:var(--nu-bg);color:var(--nu-ink);border:var(--nu-card-bd);box-shadow:var(--nu-card-shadow);text-align:left;animation:sdIn .3s cubic-bezier(.2,1.3,.4,1) both}
.sd-card::after{content:"";position:absolute;inset:calc(5px*var(--ru));border:var(--nu-card-dash);border-radius:calc(var(--nu-card-r) - 5px*var(--ru));pointer-events:none}
@keyframes sdIn{from{transform:scale(.86);opacity:0}}
.sd-card.center{text-align:center}
.sd-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sd-card-top h2,.sd-card h2{margin:0;font-size:var(--nu-t-title);font-weight:900;color:var(--nu-ink)}
.sd-x{flex:none;width:var(--nu-x);height:var(--nu-x);border-radius:50%;border:0;padding:0;background:var(--nu-cell);box-shadow:inset 0 0 0 1px var(--nu-line);display:grid;place-items:center;cursor:pointer}
.sd-x svg{width:calc(16px*var(--ru));height:calc(16px*var(--ru))}
.sd-csub{margin:calc(6px*var(--ru)) 0 0;font-size:var(--nu-t-body);font-weight:700;color:var(--nu-sub);line-height:1.45}
.sd-cstat{display:flex;justify-content:center;gap:calc(14px*var(--ru));margin:calc(8px*var(--ru)) 0 0;font-size:var(--nu-t-small);font-weight:700;color:var(--nu-sub);white-space:nowrap}
.sd-cstat b{color:var(--nu-ink);font-size:calc(15px*var(--rt));font-weight:900;font-variant-numeric:tabular-nums}
.sd-set{margin:calc(12px*var(--ru)) 0 0;border-top:1px solid var(--nu-line);text-align:left}
.sd-row{display:flex;align-items:center;gap:calc(10px*var(--ru));width:100%;min-height:var(--nu-row-h);padding:0;border:0;border-bottom:1px solid var(--nu-line);background:none;font-size:var(--nu-t-body)!important;font-weight:800;color:var(--nu-ink)!important;text-align:left;cursor:pointer}
.sd-row>img{flex:none;width:calc(30px*var(--ru));height:calc(30px*var(--ru));display:block}
.sd-row .n{flex:1;min-width:0}
.sd-row .n small{display:block;font-size:var(--nu-t-small);font-weight:700;color:var(--nu-sub)}
.sd-row .go{flex:none;color:var(--nu-val);font-size:calc(13px*var(--rt));font-weight:800}
.sd-vol{padding:calc(10px*var(--ru)) 0;border-bottom:1px solid var(--nu-line)}   /* 🔴 10-26 효과음 · 배경음악 = nn-ui 음량 한 벌(.nu-vol 줄 둘 + 추천 음량) — 옛 켜기 스위치 줄 둘(.sd-sw2)은 걷음 */
.sd-b{display:block;width:100%;min-height:calc(var(--nu-btn-h) - 6px*var(--ru));margin-top:calc(10px*var(--ru));border:0;border-radius:999px;font-size:calc(var(--nu-t-btn) - 2px*var(--rt))!important;font-weight:900;cursor:pointer}
.sd-b.main{background:var(--pink);color:#fff!important;box-shadow:0 calc(3px*var(--ru)) 0 var(--pink-d)}
.sd-b.big{min-height:var(--nu-btn-h);font-size:var(--nu-t-btn)!important;margin-top:calc(14px*var(--ru))}
.sd-b.ghost{background:var(--nu-cell);color:var(--nu-ink)!important;box-shadow:inset 0 0 0 1.5px var(--nu-line)}
.sd-b:active,.sd-out:active{transform:translateY(2px)}
.sd-two{display:flex;gap:calc(10px*var(--ru));margin-top:calc(16px*var(--ru))}
.sd-two .sd-b{margin:0;flex:1}
.sd-out{display:block;margin:calc(12px*var(--ru)) auto 0;padding:calc(6px*var(--ru)) calc(14px*var(--ru));border:1.5px solid var(--nu-line);border-radius:999px;background:none;font-size:calc(14px*var(--rt))!important;font-weight:800;color:var(--nu-sub)!important;cursor:pointer}

/* 게임 방법 — 그림 장 넘기기 셋(장마다 그림 한 장 + 글 한두 줄) */
.sd-how .art{margin:calc(12px*var(--ru)) 0 0;aspect-ratio:4/3;border-radius:calc(16px*var(--ru));background:var(--nu-cell);display:grid;place-items:center;overflow:hidden;border:1.5px solid var(--nu-line)}
.sd-how .art img{max-width:100%;max-height:100%;display:block}
.sd-how .art img.ic{width:42%;max-height:none}
.sd-how .art .pair{display:flex;gap:4%;align-items:center;justify-content:center;width:100%;padding:0 4%}
.sd-how .art .pair img{width:48%;border-radius:calc(8px*var(--ru));box-shadow:0 2px 6px rgba(90,55,20,.25)}
.sd-how h3{margin:calc(12px*var(--ru)) 0 0;font-size:calc(var(--nu-t-title) - 1px*var(--rt));font-weight:900;text-align:center}
.sd-how p{margin:calc(6px*var(--ru)) 0 0;font-size:var(--nu-t-body);font-weight:700;color:var(--nu-sub);text-align:center;line-height:1.5;text-wrap:balance}
.sd-dots{display:flex;justify-content:center;gap:calc(6px*var(--ru));margin-top:calc(12px*var(--ru))}
.sd-dots i{width:calc(8px*var(--ru));height:calc(8px*var(--ru));border-radius:50%;background:var(--nu-line)}
.sd-dots i.on{background:var(--pink);width:calc(20px*var(--ru));border-radius:999px}

/* ── 한 화면 가득 창 — 랭킹 · 보상(금 · 흰 바탕) ── */
.sd-page{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--frame-w);z-index:70;display:flex;flex-direction:column;color:#2b3445;
  background:radial-gradient(140% 75% at 50% 0%,#ffffff 0%,#f7f9fc 50%,#eef2f7 100%);--rsub:#6b7486;--acc:#c9a23a;--val:#9a7414;--card:rgba(255,255,255,.92)}
.sd-page .hd{flex:none;display:flex;align-items:center;gap:calc(8px*var(--ru));padding:calc(12px*var(--ru)) calc(14px*var(--ru)) calc(6px*var(--ru))}
.sd-page .hd button{flex:none;width:calc(38px*var(--ru));height:calc(38px*var(--ru));padding:0;border:0;background:none;cursor:pointer}
.sd-page .hd button img{width:100%;height:100%;display:block}
.sd-page .hd h2{flex:1;margin:0;font-size:calc(21px*var(--rt));font-weight:900}
.sd-page .hd .w{font-size:calc(12px*var(--rt));font-weight:800;background:#eef1f6;border-radius:999px;padding:calc(7px*var(--ru)) calc(11px*var(--ru));white-space:nowrap}
.sd-page .hd .w b{color:var(--val)}
.sd-seg{flex:none;display:flex;margin:calc(2px*var(--ru)) calc(14px*var(--ru)) calc(8px*var(--ru));background:rgba(43,52,69,.07);border-radius:calc(14px*var(--ru));padding:calc(4px*var(--ru))}
.sd-seg button{flex:1;border:0;background:none;text-align:center;font-size:calc(14px*var(--rt));font-weight:800;padding:calc(10px*var(--ru)) 0;border-radius:calc(11px*var(--ru));color:var(--rsub)!important;cursor:pointer}
.sd-seg button.on{background:var(--acc);color:#fff!important;box-shadow:0 2px 6px rgba(0,0,0,.10)}
.sd-seg button.hof.on{background:linear-gradient(#f6d27a,#e8b448);color:#4a2c00!important}
.sd-seg button b{font-weight:900;opacity:.75;margin-left:3px}
.sd-pbody{flex:1;min-height:0;overflow:auto;padding:0 calc(14px*var(--ru)) calc(14px*var(--ru))}
.sd-empty{margin:calc(12px*var(--ru)) 0 0;text-align:center;font-size:calc(14px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-pme{flex:none;margin:calc(8px*var(--ru)) calc(12px*var(--ru)) calc(14px*var(--ru));border-radius:calc(16px*var(--ru));padding:calc(10px*var(--ru)) calc(12px*var(--ru));background:#fff;box-shadow:inset 0 0 0 1.5px var(--acc),0 -6px 16px rgba(40,60,90,.08);display:flex;align-items:center;gap:calc(10px*var(--ru))}
.sd-pme .tx{flex:1;min-width:0;font-size:calc(14.5px*var(--rt));font-weight:900}
.sd-pme .tx small{display:block;font-size:calc(11.5px*var(--rt));font-weight:700;color:var(--rsub)}
.sd-pme .v{font-size:calc(17px*var(--rt));font-weight:900;color:var(--val);font-variant-numeric:tabular-nums}
.sd-page .sd-pod3 .box{height:calc(86px*var(--ru))}.sd-page .sd-pod3 .r1 .box{height:calc(92px*var(--ru))}
/* 10-27 랭킹 서버 — 시상대 얼굴 · 값 · 명예의 전당 작은 탭 · 4 ~ 10위 줄 · 메달 칸(시안_시작화면_거울 ③ ④ 짜임 그대로) */
.sd-pod3 .face{background-position:center;background-size:cover;background-repeat:no-repeat}
.sd-page .sd-pod3 .nm{white-space:normal;word-break:break-all;text-align:center;line-height:1.2}   /* 긴 닉네임이 옆 칸에 겹치지 않게 두 줄로(「…」 자르기 ✕) */
.sd-pod3 .v{font-size:calc(13px*var(--rt));font-weight:800;color:var(--val);font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-sub{flex:none;display:flex;gap:calc(6px*var(--ru));margin:0 calc(14px*var(--ru)) calc(6px*var(--ru))}.sd-sub[hidden]{display:none}
.sd-sub button{flex:1;border:0;text-align:center;font-family:inherit;font-size:calc(12.5px*var(--rt));font-weight:800;padding:calc(7px*var(--ru)) 0;border-radius:999px;background:#eef1f6;color:var(--rsub);cursor:pointer}
.sd-sub button.on{background:#f0c25a;color:#3a2400}
/* 🔴 10-29 명예의 전당 「랭킹 · 일반」 — 큰 탭 아래 가운데 작은 알약 둘(메뉴 카드 · 랭킹 창 같은 꼴) · 큰 탭 · 작은 탭 셋과 겹치지 않게 한 줄 */
.sd-kind{display:flex;justify-content:center;gap:calc(6px*var(--ru,1));margin:calc(6px*var(--ru,1)) 0 0}.sd-kind[hidden]{display:none}
.sd-kind button{border:0;padding:calc(4px*var(--ru,1)) calc(16px*var(--ru,1));border-radius:999px;font-family:inherit;font-size:max(11px,calc(12px*var(--rt,1)));font-weight:800;background:rgba(43,52,69,.07);color:var(--nu-sub,#6b7486);white-space:nowrap;cursor:pointer}
.sd-kind button.on{background:#2b3445;color:#fff}
.sd-kind.p{margin:0 calc(14px*var(--ru)) calc(8px*var(--ru))}
.sd-rl{list-style:none;margin:calc(10px*var(--ru)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(5px*var(--ru))}
.sd-rl li{display:flex;align-items:center;gap:calc(9px*var(--ru));padding:calc(6px*var(--ru)) calc(10px*var(--ru));border-radius:calc(12px*var(--ru));background:var(--card);box-shadow:0 1px 4px rgba(40,60,90,.10)}
.sd-rl .no{flex:none;width:calc(22px*var(--ru));text-align:center;font-size:calc(13px*var(--rt));font-weight:900;color:var(--rsub);font-variant-numeric:tabular-nums}
.sd-rl img{flex:none;width:calc(30px*var(--ru));height:calc(30px*var(--ru));border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px #d9dfe8}
.sd-rl .n{flex:1;min-width:0;font-size:calc(13.5px*var(--rt));font-weight:700;white-space:nowrap;overflow:hidden}
.sd-rl .v{font-size:calc(13.5px*var(--rt));font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-mc{display:inline-flex;gap:calc(6px*var(--ru));font-size:calc(12.5px*var(--rt));font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:#2b3445}
.sd-mc span{display:inline-flex;align-items:center;gap:2px}.sd-mc img{width:calc(15px*var(--ru));height:calc(15px*var(--ru));display:block}.sd-mc span.z{opacity:.35}
.sd-pod3 .sd-mc{gap:calc(4px*var(--ru));font-size:calc(11.5px*var(--rt))}
.rs-best{flex-wrap:wrap}.rs-best i{font-style:normal;opacity:.5}

/* 보상 — 내 수집 · 배지 격자 · 랭킹 보상 (시안_보상화면 그대로 · 배지 그림이 오기 전엔 무리 색 테 + 자물쇠) */
.sd-col{flex:none;margin:calc(2px*var(--ru)) calc(14px*var(--ru)) calc(8px*var(--ru));padding:calc(8px*var(--ru)) calc(12px*var(--ru)) calc(8px*var(--ru)) calc(10px*var(--ru));border-radius:calc(20px*var(--ru));background:var(--card);box-shadow:0 2px 10px rgba(40,60,90,.10);display:flex;gap:calc(12px*var(--ru));align-items:center}
.sd-ring{flex:none;position:relative;width:calc(64px*var(--ru));height:calc(64px*var(--ru))}
.sd-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sd-ring .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sd-ring .n b{font-size:calc(21px*var(--rt));font-weight:900;color:#7a5a10;font-variant-numeric:tabular-nums}
.sd-ring .n b small{font-size:calc(12px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-ring .n span{margin-top:calc(4px*var(--ru));font-size:calc(11px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-colr{flex:1;min-width:0;display:flex;gap:calc(6px*var(--ru))}
.sd-pill{flex:1;min-width:0;border-radius:calc(12px*var(--ru));background:#f5f7fa;padding:calc(6px*var(--ru)) calc(7px*var(--ru));display:flex;flex-direction:column;gap:calc(3px*var(--ru))}
.sd-pill small{font-size:calc(10.5px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-md3{display:flex;gap:calc(5px*var(--ru));font-size:calc(13px*var(--rt));font-weight:900;font-variant-numeric:tabular-nums}
.sd-md3 span{display:flex;align-items:center;gap:1px;opacity:.35}.sd-md3 span.y{opacity:1}
.sd-md3 img{width:calc(16px*var(--ru));height:calc(16px*var(--ru))}
.sd-tchip{align-self:flex-start;font-size:calc(12px*var(--rt));font-weight:900;color:#6B4410;background:linear-gradient(#FFE6A8,#F0BE5E);border-radius:999px;padding:calc(2px*var(--ru)) calc(8px*var(--ru));white-space:nowrap}
.sd-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(4px*var(--ru));margin:calc(4px*var(--ru)) 0 calc(7px*var(--ru))}
.sd-chips button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:calc(34px*var(--ru));padding:calc(2px*var(--ru)) 0;border:0;border-radius:calc(12px*var(--ru));background:#eef1f5;font-size:calc(12px*var(--rt));font-weight:900;color:var(--rsub)!important;white-space:nowrap;cursor:pointer}
.sd-chips button i{font-style:normal;font-size:calc(10px*var(--rt));font-weight:800;opacity:.85;font-variant-numeric:tabular-nums}
.sd-chips button.on{background:#2b3445;color:#fff!important}
.sd-chips button .dt{position:absolute;left:50%;top:-3px;transform:translateX(-50%);width:calc(16px*var(--ru));height:5px;border-radius:999px}
.sd-grid{border-radius:calc(20px*var(--ru));background:var(--card);padding:calc(10px*var(--ru)) calc(6px*var(--ru)) calc(8px*var(--ru));display:grid;grid-template-columns:repeat(5,1fr);gap:calc(8px*var(--ru)) calc(2px*var(--ru))}
.sd-gb{display:flex;flex-direction:column;align-items:center;min-width:0;border:0;background:none;padding:0;cursor:pointer}
.sd-gb>span{margin-top:calc(4px*var(--ru));max-width:100%;font-size:calc(11px*var(--rt));font-weight:800;color:#a3abb8;line-height:1.2;text-align:center;word-break:keep-all;text-wrap:balance;letter-spacing:-.03em}
.sd-gb .tr{margin-top:calc(2px*var(--ru));font-size:calc(9.5px*var(--rt));font-weight:800;border-radius:999px;padding:0 calc(6px*var(--ru));color:#fff}
.sd-bw{position:relative;width:calc(46px*var(--ru));height:calc(46px*var(--ru));border-radius:50%;padding:calc(3px*var(--ru));background:var(--ring,#c3cad4);opacity:.6}
.sd-bw::after{content:"";position:absolute;inset:calc(3px*var(--ru));border-radius:50%;background:#fffaf0 center/40% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.3' width='7' height='5' rx='1.2' fill='%23b5bcc7'/%3E%3Cpath d='M4 5.5V4a2 2 0 014 0v1.5' fill='none' stroke='%23b5bcc7' stroke-width='1.5'/%3E%3C/svg%3E")}
.sd-bw.sec{opacity:1;background:linear-gradient(160deg,#c7a8f5,#7b52c7)}
.sd-bw.sec::after{background:radial-gradient(circle at 35% 30%,#efe6fb,#b9a2de 60%,#7a5aa8);content:"?";display:grid;place-items:center;font-size:calc(22px*var(--rt));font-weight:900;color:#fff;text-shadow:0 2px 0 #4a2f78}
.sd-gb.sec>span{color:#7a5aa8}
.sd-bimg{display:block;width:calc(52px*var(--ru));height:calc(52px*var(--ru));object-fit:contain;filter:grayscale(1);opacity:.5}   /* 배지 그림(10-24) — 못 받은 것은 흑백 · 받으면 .got */
.sd-bimg.got{filter:none;opacity:1}
.sd-bdw{display:block;width:calc(56px*var(--ru));flex:none}   /* 10-25 그림 테 칸(NU.bd 가 칸을 꽉 채운다) — 격자 · 상세 · 명예의 전당 */
.sd-bdw.big{width:calc(132px*var(--ru));margin:calc(4px*var(--ru)) auto 0}
.sd-bdw.sm{width:calc(34px*var(--ru))}
.sd-bimg.big{width:calc(120px*var(--ru));height:calc(120px*var(--ru));margin:calc(4px*var(--ru)) auto 0;filter:none;opacity:1}
.sd-bimg.sm{width:calc(30px*var(--ru));height:calc(30px*var(--ru));filter:none;opacity:1}
.g-mok{--ring:linear-gradient(160deg,#a8e3b8,#3f9a63)}.g-hwa{--ring:linear-gradient(160deg,#ffb0a3,#e0484f)}.g-geum{--ring:linear-gradient(160deg,#ffffff,#c9a23a)}.g-su{--ring:linear-gradient(160deg,#8fa9de,#2a4175)}
/* 등급 알약 색 — 🔴 10-28 「.tr」 안으로만(정식 런칭 3절 ②) · 옛 전역 .t-wood 가 공통 배지(NU.bd 의 .nu-bd.t-wood)에도 걸려 배지 뒤에 네모 바탕이 깔렸다 */
.tr.t-wood{background:#a8743f}.tr.t-silver{background:#9aa6b2}.tr.t-gold{background:#d99a12}.tr.t-rainbow{background:linear-gradient(90deg,#ff6b81,#ffb347,#7bd389,#5ec8f2,#9b7bf0)}.tr.t-sec{background:#7b52c7}
.sd-rc{border-radius:calc(18px*var(--ru));background:var(--card);box-shadow:0 1px 3px rgba(40,60,90,.08);padding:calc(10px*var(--ru)) calc(12px*var(--ru));margin-bottom:calc(8px*var(--ru))}
.sd-rc-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:calc(5px*var(--ru))}
.sd-rc-h b{font-size:calc(14.5px*var(--rt));font-weight:900}
.sd-rc-h small{font-size:calc(11px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-rr{display:flex;align-items:center;gap:calc(8px*var(--ru));min-height:calc(31px*var(--ru));padding:0 calc(6px*var(--ru))}
.sd-rr+.sd-rr{border-top:1px dashed #e3e8f0}
.sd-rr .k{flex:none;width:calc(44px*var(--ru));font-size:calc(13px*var(--rt));font-weight:900}
.sd-rr .v{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:calc(10px*var(--ru));font-size:calc(13px*var(--rt));font-weight:900;font-variant-numeric:tabular-nums}
.sd-rr .v span{display:flex;align-items:center;gap:2px}
.sd-rr .v img{width:calc(20px*var(--ru));height:calc(20px*var(--ru))}
.sd-rr .v .mdl{margin-right:auto;font-size:calc(12px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-pct3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(6px*var(--ru));margin-top:calc(6px*var(--ru))}
.sd-rnote{display:flex;align-items:center;gap:calc(4px*var(--ru));margin:calc(8px*var(--ru)) 0 0;font-size:max(11px,calc(12px*var(--rt)));font-weight:700;color:var(--rsub);line-height:1.4;word-break:keep-all}   /* 10-29 마따따비 조건 한 줄 */
.sd-rnote>span:first-child{display:inline-flex;flex:none}.sd-rnote>span+span{text-wrap:balance}.sd-rnote img{width:calc(16px*var(--ru));height:calc(16px*var(--ru));object-fit:contain}
.sd-pct3 div{border-radius:calc(12px*var(--ru));background:#f5f7fa;padding:calc(5px*var(--ru)) 0 calc(6px*var(--ru));display:flex;flex-direction:column;align-items:center;gap:1px;font-size:calc(13px*var(--rt));font-weight:900}
.sd-pct3 small{font-size:calc(10.5px*var(--rt));font-weight:800;color:var(--rsub)}
.sd-pct3 span{display:flex;align-items:center;gap:2px}.sd-pct3 img{width:calc(20px*var(--ru));height:calc(20px*var(--ru))}
.sd-h2c{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px*var(--ru))}
.sd-h2c .cl{border-radius:calc(12px*var(--ru));background:#f5f7fa;padding:calc(7px*var(--ru)) calc(8px*var(--ru))}
.sd-h2c .cl>small{display:block;font-size:calc(10.5px*var(--rt));font-weight:800;color:var(--rsub);margin-bottom:calc(4px*var(--ru))}
.sd-h2c .it{display:flex;align-items:center;gap:calc(6px*var(--ru));margin-top:calc(4px*var(--ru))}
.sd-h2c .it img{width:calc(28px*var(--ru));height:calc(28px*var(--ru));flex:none}
.sd-h2c .it .t{min-width:0;font-size:calc(11.5px*var(--rt));font-weight:900;line-height:1.25}
.sd-h2c .it .t small{display:block;font-size:calc(10px*var(--rt));font-weight:700;color:var(--rsub)}
/* 배지 상세 — 🔴 10-24 런칭 2차 5절: 아래에서 올라오는 판 → 다섯 게임 같은 카드(가운데) */
.sd-sheetdim{position:absolute;inset:0;z-index:5;background:var(--nu-dim)}
.sd-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;box-sizing:border-box;width:var(--nu-card-w);max-width:var(--nu-card-max);border-radius:var(--nu-card-r);background:var(--nu-bg);color:var(--nu-ink);border:var(--nu-card-bd);box-shadow:var(--nu-card-shadow);padding:var(--nu-card-pad);text-align:center}
.sd-sheet .sd-x{position:absolute;right:calc(14px*var(--ru));top:calc(14px*var(--ru))}
.sd-sheet .sd-bw{width:calc(110px*var(--ru));height:calc(110px*var(--ru));margin:calc(6px*var(--ru)) auto 0;padding:calc(5px*var(--ru))}
.sd-sheet .sd-bw::after{inset:calc(5px*var(--ru))}
.sd-sheet .tr{display:inline-block;margin-top:calc(8px*var(--ru));font-size:calc(11.5px*var(--rt));font-weight:800;border-radius:999px;padding:calc(2px*var(--ru)) calc(10px*var(--ru));color:#fff}
.sd-sheet h3{margin:calc(6px*var(--ru)) 0 calc(2px*var(--ru));font-size:var(--nu-t-title);font-weight:900}
.sd-sheet .cond{font-size:calc(14px*var(--rt));font-weight:700;color:var(--rsub)}
.sd-sheet .cond .hn{display:inline-block;margin-right:calc(6px*var(--ru));padding:0 calc(7px*var(--ru));border-radius:999px;background:#7b52c7;color:#fff;font-size:calc(12px*var(--rt));font-weight:900;line-height:1.6;vertical-align:1px}   /* 10-29 숨은 배지 귀띔 앞 「힌트」 — 숨은 배지 보라 */
.sd-sheet .notes{margin:calc(14px*var(--ru)) 0 0;padding:calc(10px*var(--ru)) calc(12px*var(--ru));border-radius:calc(14px*var(--ru));background:var(--nu-cell);text-align:left;font-size:calc(12.5px*var(--rt));font-weight:700;color:var(--rsub);line-height:1.7}

/* ── 결과 카드 — 미야오 아처 결과화면_양식 6-1 그대로(대장 대신 그레이 · 성공 / 아쉬움 두 장) ── */
.sd-end{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--frame-w);box-sizing:border-box;display:grid;place-items:center;background:var(--nu-dim);padding:calc(8px*var(--ru)) 0;z-index:75;overflow:hidden;font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}
.sd-play .sd-end{position:absolute}
.sd-play.side .sd-end{width:min(100%,calc(100vh*.75))}
.rs-card{position:relative;box-sizing:border-box;width:var(--nu-card-w);max-width:var(--nu-card-max);margin-top:var(--nu-hero-gap);padding:var(--nu-card-pad-hero) var(--nu-card-pad) var(--nu-card-pad);text-align:center;color:var(--nu-ink);
  background:var(--nu-bg);border:var(--nu-card-bd);border-radius:var(--nu-card-r);box-shadow:var(--nu-card-shadow)}
.rs-card::after{content:"";position:absolute;inset:calc(5px*var(--ru));border:var(--nu-card-dash);border-radius:calc(var(--nu-card-r) - 5px*var(--ru));pointer-events:none}
.rs-glow{position:absolute;left:50%;top:calc(-90px*var(--ru));width:calc(200px*var(--ru));height:calc(130px*var(--ru));transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,214,120,.6),rgba(255,214,120,0));pointer-events:none}
.rs-boss{position:absolute;z-index:2;left:50%;top:var(--nu-hero-up);height:var(--nu-hero);transform:translateX(-50%);display:block;filter:drop-shadow(0 3px 0 rgba(42,31,24,.25))}   /* 10-28 z-index:2 — 카드 점선(::after)이 그림을 덮지 않게(대표님 「일러가 맨위에」) */
.rs-stage{margin:0;font-size:var(--nu-t-small);font-weight:700;color:var(--nu-sub)}
.rs-title{margin:calc(2px*var(--ru)) 0 0;font-size:var(--nu-t-result);font-weight:900;line-height:1.2;letter-spacing:-.02em;word-break:keep-all}
.rs-score{margin:calc(8px*var(--ru)) 0 0;font-size:var(--nu-t-score);font-weight:900;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#2f4a86;text-shadow:0 2px 0 rgba(43,52,69,.10);white-space:nowrap}   /* 🔴 10-29 결과 큰 시간 = 카드 바탕과 같은 계열의 진한 단색(대표님 「배경색과 어울리고 깔끔」 · 놀이터공통/시안_결과숫자 숫자색_2) · 금빛 ✕ */
.rs-best{margin:calc(8px*var(--ru)) 0 0;min-height:calc(24px*var(--ru));display:flex;justify-content:center;align-items:center;gap:6px;font-size:var(--nu-t-small);font-weight:700;color:var(--nu-sub)}
.rs-best b{font-weight:800;color:var(--nu-ink);font-variant-numeric:tabular-nums}
.rs-best .rk-up{display:none;font-style:normal;font-weight:800;color:#d0465e}.rs-best .rk-up.on{display:inline}   /* 10-29 NU.rank 보통 — 「n계단 올라감」(직전 순위를 알 때만) */
.rs-new{display:inline-flex;align-items:center;padding:calc(4px*var(--ru)) calc(12px*var(--ru));border-radius:999px;background:#d4566b;color:#fff;font-weight:900;letter-spacing:.02em;box-shadow:0 2px 0 rgba(42,31,24,.35)}
.rs-stars{display:grid;grid-template-columns:repeat(3,1fr);margin:calc(14px*var(--ru)) 0 calc(12px*var(--ru));padding:calc(12px*var(--ru)) 0 calc(10px*var(--ru));border-top:1.5px dashed var(--nu-line);border-bottom:1.5px dashed var(--nu-line)}
.rs-star{display:grid;justify-items:center;gap:calc(4px*var(--ru))}
.rs-star img{width:calc(52px*var(--ru));height:calc(52px*var(--ru));display:block}
.rs-star.on img{filter:drop-shadow(0 2px 0 rgba(42,31,24,.2))}
.rs-star span{font-size:var(--nu-t-small);font-weight:700;color:var(--nu-sub);white-space:nowrap}
.rs-star.on span{color:var(--nu-ink);font-weight:800}
.rs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(8px*var(--ru))}   /* 10-28 결과 칸 3판 — 넷(2 × 2) */
.rs-st{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:calc(56px*var(--ru));padding:calc(7px*var(--ru)) calc(4px*var(--ru));border-radius:calc(14px*var(--ru));background:var(--nu-cell);box-shadow:inset 0 0 0 1px var(--nu-line)}
.rs-st b{font-size:calc(17.5px*var(--rt));font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-st b.bad{color:#d9604e}
.rs-st small{margin-top:calc(4px*var(--ru));font-size:calc(11px*var(--rt));font-weight:700;color:var(--nu-sub);white-space:nowrap}
.rs-extra{margin:calc(12px*var(--ru)) 0 0;font-size:var(--nu-t-small);font-weight:600;line-height:1.5;color:var(--nu-sub);word-break:keep-all}
.rs-extra b{font-weight:800;color:var(--nu-ink);margin-left:2px}
.rs-extra i{font-style:normal;color:var(--nu-line);margin:0 calc(5px*var(--ru))}
/* 🆕 새 배지 한 줄(10-24 공통 ⑨) — 받은 배지가 있을 때만 */
.rs-badge{display:flex;align-items:center;justify-content:center;gap:calc(8px*var(--ru));margin:calc(12px*var(--ru)) 0 0;padding:calc(7px*var(--ru)) calc(10px*var(--ru));border-radius:calc(14px*var(--ru));background:var(--nu-cell);border:1.5px solid var(--nu-acc);font-size:var(--nu-t-small);font-weight:800;color:var(--nu-val)}
.rs-badge .sd-bw{width:calc(34px*var(--ru));height:calc(34px*var(--ru));opacity:1}
.rs-btns{display:flex;align-items:center;gap:calc(10px*var(--ru));margin-top:calc(18px*var(--ru))}
.rs-btn{flex:1;min-height:var(--nu-btn-h);border-radius:999px;font:inherit;font-size:var(--nu-t-btn);font-weight:900;letter-spacing:.02em;cursor:pointer;white-space:nowrap;   /* 🔴 「한 판 더」 = 게임 시작 단추 색 그대로(런칭 공통 4절 · 2차 6절) — 남색 + 금테 */
  background:linear-gradient(180deg,#5677c4 0%,#3a58a0 48%,#2a427f 100%);color:#fff6dc;border:calc(3px*var(--ru)) solid #f2cf6e;box-shadow:0 0 0 2px #7a5512,0 calc(4px*var(--ru)) 0 2px #1b2a55;text-shadow:0 2px 0 #1b2a55}
.rs-ic{flex:none;width:calc(54px*var(--ru));height:calc(54px*var(--ru));border:0;background:none;box-shadow:none;display:grid;place-items:center;cursor:pointer;padding:0}   /* 10-24 사장님 다섯 게임 공통: 결과 창 홈 · 공유는 테 · 동그라미 · 그림자 없이 그림만 */
.rs-ic.share{background:none}
.rs-ic img{width:calc(48px*var(--ru));height:calc(48px*var(--ru));display:block;pointer-events:none;filter:drop-shadow(0 calc(2px*var(--ru)) calc(3px*var(--ru)) rgba(42,31,24,.25))}
.rs-btn:active{transform:translateY(2px);box-shadow:0 0 0 2px #7a5512,0 1px 0 2px #1b2a55}
.rs-ic:active{transform:translateY(2px)}
.rs-btn:focus-visible,.rs-ic:focus-visible{outline:3px solid #c9a23a;outline-offset:2px}

/* ── 기록 공유 창 — 📋 기획_공유_2026-10-28.md · 카드 미리보기(4:5) + 공유하기 · 이미지 저장 · 링크 복사 · 가로 판이면 놀이 칸 안(.sd-play .sd-win) ── */
.sd-sharewin .sh-pic{margin:calc(10px*var(--ru)) 0 calc(2px*var(--ru));display:grid;place-items:center}
.sd-sharewin .sh-pic img{display:block;height:min(calc(100vh - 300px*var(--ru)),calc(400px*var(--ru)));max-width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:calc(12px*var(--ru));box-shadow:0 calc(6px*var(--ru)) calc(16px*var(--ru)) rgba(120,74,26,.18)}
.sd-sharewin .sh-pic img.wait{color:transparent;font-size:0;background:var(--nu-cell);box-shadow:inset 0 0 0 1.5px var(--nu-line)}
.sd-sharewin .sd-two{margin-top:calc(10px*var(--ru))}
.sd-sharewin .sh-note{margin-top:calc(10px*var(--ru));font-size:var(--nu-t-small)}

/* ── 시작 단추 둘 — 시안 놀이터공통/시안_시작단추 0 · 2(대표님 10-28 「새 시안이 훨씬 좋다」) · BM설계서 0절
   [일반] 크림 · [랭킹] 금빛 + 트로피 · 남은 판 = 단추 글자 그대로(10-28 「숫자에 테두리 빼줘」 → 🔴 10-29 대표님 「1/1 3/3 이런 숫자에 테두리 알약을 안 넣었으면」 = 바탕 · 둥근 모서리도 걷음 · 높이 그대로) · 다 쓴 랭킹 = 회색 「완료 · 월요일 열림」
   높이 · 그림자 · 눌림은 nn-ui .nu-start 와 같은 잣대(58 · 아래 4px 테) — 메뉴 줄 자리는 그대로 ── */
.sd-go2{flex:1;min-width:0;display:flex;gap:calc(8px*var(--ru))}
.sd-mode{--e:#9a6a2e;flex:1;min-width:0;min-height:max(48px,calc(58px*var(--ru)));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2px*var(--ru));margin:0;padding:calc(4px*var(--ru)) calc(4px*var(--ru));box-sizing:border-box;border:calc(2.5px*var(--ru)) solid var(--e);border-radius:999px;font-family:inherit;cursor:pointer;box-shadow:0 calc(4px*var(--ru)) 0 var(--e),0 calc(8px*var(--ru)) calc(16px*var(--ru)) rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent}
/* 🔴 10-29 대표님 「프리텐다드 · 버튼 글자 크기 다 통일」 — 다섯 게임 같은 규격(4. 게임): Pretendard 900 · 큰 글 18 · 숫자 줄 12px(폰 375×667 에서 잰 값 · 그 화면 --rt .878 로 나눠 게임 배율은 그대로) · 숫자 줄은 바닥 12px(작은 폰 320×568 에서도) */
.sd-mode{font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.sd-mode .t{display:flex;align-items:center;justify-content:center;gap:calc(4px*var(--ru));font-size:calc(18px/.878*var(--rt));font-weight:900;line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.sd-mode .t svg{flex:none;width:calc(17px*var(--ru));height:calc(17px*var(--ru));fill:currentColor;opacity:.85}
.sd-mode .c{display:inline-flex;align-items:center;gap:calc(2px*var(--ru));max-width:100%;padding:calc(1px*var(--ru)) 0;font-size:max(12px,calc(12px/.878*var(--rt)));font-weight:900;line-height:1.45;white-space:nowrap;font-variant-numeric:tabular-nums}
.sd-mode .c b{font-weight:900}
.sd-mode .c b.z{color:#b23a3a}
.sd-mode .c .cn{width:calc(13px*var(--ru));height:calc(13px*var(--ru));display:block}
.sd-mode .c .tk{width:calc(18px*var(--ru));height:calc(18px*var(--ru));margin:calc(-3px*var(--ru)) calc(1px*var(--ru)) calc(-3px*var(--ru)) 0;display:block;object-fit:contain}   /* 10-29 산 손님 「무제한」 앞 영구 사용권 표 — 줄 높이는 그대로(위아래 -3) */
.sd-mode.nm{--e:#9a6a2e;background:linear-gradient(180deg,#fffaf0 0%,#f7ead0 60%,#efd9b0 100%);color:#5a3a1c}
.sd-mode.nm .t svg{color:#c98a3c}
.sd-mode.rk{--e:#8a5410;background:linear-gradient(180deg,#ffe98f 0%,#f8c845 55%,#eba325 100%);color:#5a3000}
.sd-mode.done{--e:#8d7c69;background:linear-gradient(180deg,#ece4d8 0%,#d8ccbc 100%);color:#7a6a58;box-shadow:0 calc(3px*var(--ru)) 0 var(--e)}
.sd-mode:active{transform:translateY(2px);box-shadow:0 calc(2px*var(--ru)) 0 var(--e),0 6px 14px rgba(0,0,0,.22)}
.sd-mode:disabled{opacity:.85}
.sd-mode:focus-visible{outline:3px solid #c9a23a;outline-offset:2px}

/* 메뉴 화면 거울 — 판 밖 배지 둘(10-29) · 찾은 곳 빨간 동그라미(판 속 손그림 동그라미와 같은 색) · 쓰담 하트 */
.sd-mir{position:absolute;z-index:1;transform:translate(-50%,-50%);border:max(2px,calc(3px*var(--ru))) solid #e0303a;border-radius:50%;box-sizing:border-box;pointer-events:none;animation:sdMir .35s ease-out}
@keyframes sdMir{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.sd-pet{position:absolute;z-index:1;transform:translate(-50%,-50%);color:#ff6f91;font-size:calc(22px*var(--rt));font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none;animation:sdPet .9s ease-out forwards}
@keyframes sdPet{from{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(-50%,-180%) scale(1.15);opacity:0}}