/* ══ 맛핀 게임 공용 스타일 (games.css) ══ */ /* 전체 화면 무대 */ .mg-stage{position:fixed;inset:0;z-index:900;background:#fff;display:none;flex-direction:column} .mg-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px; border-bottom:1px solid var(--border);background:#fff} .mg-top .ti{flex:1;font-size:15px;font-weight:800;color:#1A1A1A} .mg-top .x{width:30px;height:30px;border:none;background:#F2F2F4;border-radius:9px;font-size:14px;color:#666;cursor:pointer} .mg-body{flex:1;overflow-y:auto;padding:16px 14px calc(env(safe-area-inset-bottom) + 24px)} .mg-msg{text-align:center;color:#999;font-size:12.5px;padding:30px 10px;line-height:1.7} .mg-howto{background:#FFF8F9;border:1px solid #FFE0E4;border-radius:11px;padding:11px 12px; font-size:11.5px;line-height:1.65;color:#555;margin-bottom:14px} .mg-howto b{color:var(--red);font-size:12px} .mg-h{font-size:14px;font-weight:800;color:#1A1A1A;text-align:center;margin-bottom:4px} .mg-sub{font-size:11.5px;color:#999;text-align:center;margin-bottom:14px;line-height:1.6} .mg-btn{width:100%;padding:13px;background:var(--red);color:#fff;border:none;border-radius:12px; font-size:14px;font-weight:800;cursor:pointer;margin-top:14px} .mg-btn:disabled{background:#DDD;color:#999} .mg-btn.ghost{background:#F2F2F4;color:#555} .mg-wait{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:12px} .mg-wait span{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:99px;background:#F2F2F4;color:#999} .mg-wait span.ok{background:var(--red-bg);color:var(--red)} /* 맛집 카드 */ .mgc{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border); border-radius:13px;padding:11px 12px;margin-bottom:8px} .mgc.tap{cursor:pointer} .mgc.tap:active{transform:scale(.985)} .mgc.on{border-color:var(--red);background:#FFF8F9;box-shadow:0 0 0 1.5px var(--red) inset} .mgc.ban{opacity:.4} .mgc-ic{width:40px;height:40px;border-radius:11px;background:var(--red-bg);display:flex;align-items:center; justify-content:center;font-size:21px;flex-shrink:0} .mgc-in{flex:1;min-width:0} .mgc-nm{font-size:13.5px;font-weight:800;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mgc-mt{font-size:10.5px;color:#999;font-weight:600;margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .mgc-st{color:#EA580C;font-weight:800} .mgc-gd{background:#F2F2F4;color:#777;font-weight:800;padding:1px 6px;border-radius:99px} .mgc-gd.hot{background:var(--red-bg);color:var(--red)} .mgc-sg{font-size:11px;color:#666;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mgc-rv{font-size:11px;color:#888;margin-top:3px;line-height:1.5} /* 월드컵 */ .wc-prog{font-size:11px;font-weight:800;color:#999;text-align:center;margin-bottom:10px} .wc-vs{text-align:center;font-size:13px;font-weight:900;color:var(--red);margin:9px 0;letter-spacing:1px} .wc-card{border:2px solid var(--border);border-radius:15px;overflow:hidden;cursor:pointer;background:#fff} .wc-card:active{transform:scale(.98)} .wc-card .ph{height:96px;background:linear-gradient(135deg,#FFE7EA,#FFD0D6);display:flex;align-items:center; justify-content:center;font-size:42px} .wc-card .bd{padding:11px 12px} .wc-card .nm{font-size:15px;font-weight:800;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wc-card .mt{font-size:11px;color:#999;font-weight:600;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .wc-card .sg{font-size:11px;color:#666;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wc-champ{background:linear-gradient(135deg,#D0021B,#8E0113);color:#fff;border-radius:16px;padding:22px 16px;text-align:center} .wc-champ .cr{font-size:38px} .wc-champ .nm{font-size:19px;font-weight:900;margin-top:6px} .wc-champ .mt{font-size:11.5px;opacity:.9;margin-top:5px} .wc-mine{display:flex;align-items:center;gap:8px;background:#FAFAFB;border:1px solid var(--border); border-radius:11px;padding:9px 11px;margin-bottom:6px;font-size:12px} .wc-mine .who{font-weight:800;color:#666;flex-shrink:0} .wc-mine .pick{flex:1;min-width:0;font-weight:700;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 밥값 폭탄 */ .bomb-wrap{text-align:center;padding:12px 0} .bomb{font-size:76px;line-height:1;transition:transform .12s} .bomb.shake{animation:bombShake .18s infinite} @keyframes bombShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-5deg)} 75%{transform:translateX(4px) rotate(5deg)}} .bomb-t{font-size:40px;font-weight:900;color:var(--red);margin-top:10px;font-variant-numeric:tabular-nums} .bomb-bar{height:9px;background:#F0F0F0;border-radius:99px;overflow:hidden;margin:14px 0 4px} .bomb-bar i{display:block;height:100%;background:linear-gradient(90deg,#F59E0B,#D0021B); border-radius:99px;transition:width .1s linear} .bomb-btn{width:170px;height:170px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#FF5A6E,#B00016); color:#fff;font-size:20px;font-weight:900;cursor:pointer;box-shadow:0 8px 22px rgba(208,2,27,.36);margin:16px auto;display:block} .bomb-btn:active{transform:scale(.94)} .bomb-btn:disabled{background:#CCC;box-shadow:none} .bomb-cnt{font-size:64px;font-weight:900;color:var(--red);text-align:center;padding:40px 0} .bomb-res{background:#FFF8F9;border:1px solid #FFE0E4;border-radius:14px;padding:18px 14px;text-align:center} .bomb-res .em{font-size:40px} .bomb-res .who{font-size:18px;font-weight:900;color:var(--red);margin-top:6px} .bomb-res .sub{font-size:12px;color:#777;margin-top:5px;line-height:1.6} .bomb-list{margin-top:14px} .bomb-li{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:.5px solid #F0F0F0;font-size:12px} .bomb-li:last-child{border-bottom:none} .bomb-li .nm{flex:1;font-weight:700;color:#1A1A1A} .bomb-li .tm{font-weight:800;color:#999;font-variant-numeric:tabular-nums} .bomb-li.lose .tm{color:var(--red)} /* 주사위 */ .mg-dice-wrap{perspective:700px;height:150px;display:flex;align-items:center;justify-content:center;margin:10px 0} .mg-dice{position:relative;width:96px;height:96px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(18deg)} .mg-df{position:absolute;inset:0;border:2px solid var(--red);border-radius:12px;background:#fff; display:flex;align-items:center;justify-content:center;padding:6px;box-sizing:border-box} .mg-df span{font-size:11px;font-weight:800;color:var(--red);text-align:center;line-height:1.3;word-break:keep-all} .mg-df.f0{transform:translateZ(48px)} .mg-df.f1{transform:rotateY(180deg) translateZ(48px)} .mg-df.f2{transform:rotateY(90deg) translateZ(48px)} .mg-df.f3{transform:rotateY(-90deg) translateZ(48px)} .mg-df.f4{transform:rotateX(90deg) translateZ(48px)} .mg-df.f5{transform:rotateX(-90deg) translateZ(48px)} .mg-dice-cap{text-align:center;font-size:13px;font-weight:800;color:#666;margin-top:6px} .mg-dice-cap b{color:var(--red);font-size:15px} /* 맛집 투표 동점 — 주사위가 멈출 때까지 결과를 가린다 */ .mt-res.rolling .mt-res-nm, .mt-res.rolling .mt-res-cat, .mt-res.rolling .mt-res-vote, .mt-res.rolling .mt-res-btns{visibility:hidden} .mt-res .mg-dice-wrap{height:132px} /* ══ 월드컵 — 카드 정보 확장 + 화려한 배경 ══ */ .wc-card{border:2px solid var(--border);border-radius:17px;overflow:hidden;cursor:pointer;background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.07);transition:transform .12s,box-shadow .12s} .wc-card:active{transform:scale(.975);box-shadow:0 1px 6px rgba(0,0,0,.1)} .wc-card .ph{height:104px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} .wc-card.s1 .ph{background:linear-gradient(135deg,#FF8A9B,#D0021B 60%,#7C0011)} .wc-card.s2 .ph{background:linear-gradient(135deg,#7FB2FF,#1D4ED8 60%,#0B2A6B)} .wc-card .ph .em{font-size:46px;position:relative;z-index:2;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))} .wc-card .ph .blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);animation:wcFloat 7s ease-in-out infinite} .wc-card .ph .b1{width:110px;height:110px;top:-42px;right:-26px} .wc-card .ph .b2{width:76px;height:76px;bottom:-32px;left:-16px;animation-delay:-3s} @keyframes wcFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(9px) scale(1.09)}} .wc-card .bd{padding:12px 13px 13px} .wc-card .nm{font-size:16px;font-weight:900;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wc-card .ct{font-size:11.5px;color:#999;font-weight:700;margin-top:2px} .wcxs{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .wcxs.c{justify-content:center} .wcx{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:99px;background:#F2F2F4;color:#777} .wcx.hot{background:var(--red-bg);color:var(--red)} .wcx.star{background:#FFF4E5;color:#EA580C} .wc-card .ln{font-size:11.5px;color:#555;line-height:1.55;margin-top:6px} .wc-card .ln b{color:#1A1A1A;font-weight:800;margin-right:3px} .wc-card .ln.rv{color:#777;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .wc-card .go{margin-top:10px;text-align:center;font-size:12px;font-weight:800;color:var(--red); background:var(--red-bg);border-radius:9px;padding:7px} .wc-card.s2 .go{color:#1D4ED8;background:#EAF0FF} .wc-vs{text-align:center;margin:12px 0;position:relative} .wc-vs:before{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--border)} .wc-vs span{position:relative;display:inline-block;background:#1A1A1A;color:#fff;font-size:12.5px; font-weight:900;letter-spacing:1.5px;padding:5px 15px;border-radius:99px} /* 월드컵 우승 연출 */ .wc-champ{position:relative;overflow:hidden;background:linear-gradient(150deg,#D0021B,#8E0113 55%,#4A0009); color:#fff;border-radius:20px;padding:26px 16px 22px;text-align:center;box-shadow:0 10px 30px rgba(208,2,27,.32)} .wc-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(rgba(255,255,255,.09) 0deg 10deg,transparent 10deg 20deg); animation:wcSpin 16s linear infinite;pointer-events:none} @keyframes wcSpin{to{transform:rotate(360deg)}} .wc-champ>*{position:relative;z-index:2} .wc-champ .lb{font-size:10.5px;font-weight:900;letter-spacing:2px;opacity:.85} .wc-champ .cr{font-size:40px;margin-top:2px;animation:wcPop .7s cubic-bezier(.2,1.5,.4,1)} @keyframes wcPop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}} .wc-champ .ring{width:78px;height:78px;margin:8px auto 0;border-radius:50%;background:rgba(255,255,255,.16); border:2.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:36px} .wc-champ .nm{font-size:21px;font-weight:900;margin-top:11px;line-height:1.25} .wc-champ .mt{font-size:12px;opacity:.92;margin-top:4px} .wc-champ .wcx{background:rgba(255,255,255,.22);color:#fff} .wc-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3} .wc-conf i{position:absolute;top:-14px;width:7px;height:12px;border-radius:1px;animation:wcFall 2.4s ease-in forwards} @keyframes wcFall{to{top:110%;opacity:0}} .wc-fin{background:#FAFAFB;border:1px solid var(--border);border-radius:12px;padding:11px 13px; font-size:12px;color:#555;line-height:1.6;margin-top:9px} .wc-fin b{color:#1A1A1A;font-weight:800;margin-right:4px} .wc-fin.rv{color:#777} /* ══ 밴픽 ══ */ .bp-cnt{font-size:11px;font-weight:900;color:#BBB;flex-shrink:0} .bp-cnt.out{color:var(--red)} .bp-mark{font-size:15px;flex-shrink:0} .bp-win{position:relative;overflow:hidden;background:linear-gradient(150deg,#1F2937,#0B1220);color:#fff; border-radius:20px;padding:26px 16px;text-align:center;margin-bottom:12px} .bp-win-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 50% 40%,rgba(208,2,27,.5),transparent 62%); animation:bpPulse 3.2s ease-in-out infinite} @keyframes bpPulse{0%,100%{opacity:.55}50%{opacity:1}} .bp-win>*{position:relative;z-index:2} .bp-win .cr{font-size:38px} .bp-win .nm{font-size:21px;font-weight:900;margin-top:8px} .bp-win .mt{font-size:12px;opacity:.85;margin-top:4px} .bp-win .tag{display:inline-block;margin-top:11px;font-size:11px;font-weight:800; background:rgba(255,255,255,.16);padding:4px 12px;border-radius:99px} /* ══ 밥값 — 열람 시간 · 맛집 버튼 · 결과 ══ */ .bomb-study{margin:4px 0 14px} .bomb-study-t{font-size:30px;font-weight:900;color:var(--red);text-align:center;font-variant-numeric:tabular-nums} .bomb-sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(208,2,27,.14),transparent 65%); animation:bpPulse 1.6s ease-in-out infinite;pointer-events:none;border-radius:20px} .bomb-wrap{position:relative} .bomb{position:relative;z-index:2} .bomb-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px} .bomb-pick{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;border:2px solid var(--border); background:#fff;border-radius:14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.05)} .bomb-pick:active{transform:scale(.95);border-color:var(--red)} .bomb-pick .ic{font-size:26px} .bomb-pick .nm{font-size:11.5px;font-weight:800;color:#1A1A1A;text-align:center;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bomb-picks .bomb-pick:nth-child(5){grid-column:1 / -1} .bomb-res{position:relative;overflow:hidden} .bomb-res-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 50% 35%,rgba(208,2,27,.22),transparent 60%); animation:bpPulse 2.6s ease-in-out infinite} .bomb-res>*{position:relative;z-index:2} .bomb-li .pk{font-size:10.5px;font-weight:700;color:#999;flex-shrink:0;max-width:38%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* [정리] 대화방 게임 카드는 index.html 쪽에서 새로 정의했다. 여기 있던 옛 규칙이 그걸 덮어써서 모양이 어긋났다. 제거함. */ /* 맛집 투표 동점 안내 */ .mt-tie{background:#FFF8F9;border:1px solid #FFD3DA;border-radius:13px;padding:13px 14px;margin:10px 0} .mt-tie .tt{font-size:12px;font-weight:800;color:var(--red)} .mt-tie .nn{font-size:11.5px;color:#666;margin-top:5px;line-height:1.55} .mt-tie .go{margin-top:10px;width:100%;padding:10px;border:none;border-radius:10px;background:var(--red); color:#fff;font-size:12.5px;font-weight:800;cursor:pointer} .mt-tie .ss{font-size:11px;color:#AAA;margin-top:8px} /* 맛핀 꽂기 버튼 (게임·투표 결과 공용) */ .mg-pin{width:100%;padding:11px;margin-top:10px;border:1.5px solid var(--red);background:#fff; color:var(--red);border-radius:12px;font-size:13px;font-weight:800;cursor:pointer} .mg-pin:active{transform:scale(.985)} .mg-pin.on,.mg-pin:disabled{border-color:var(--border);background:#F7F7F8;color:#AAA;cursor:default} /* ══ 밴픽 카드 — 눌러서 펼치고, 🚫로 고르고, 확정 ══ */ .bp-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;margin-bottom:8px; cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s} .bp-card.open{box-shadow:0 3px 14px rgba(0,0,0,.08)} .bp-card.marked{border-color:var(--red);background:#FFF8F9} .bp-head{display:flex;align-items:center;gap:10px;padding:11px 12px} .bp-head .ic{width:40px;height:40px;border-radius:11px;background:var(--red-bg);display:flex; align-items:center;justify-content:center;font-size:21px;flex-shrink:0} .bp-head .in{flex:1;min-width:0} .bp-head .nm{font-size:13.5px;font-weight:800;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bp-head .ct{font-size:10.5px;color:#999;font-weight:600;margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .bp-x{width:38px;height:38px;flex-shrink:0;border:1.5px solid var(--border);background:#fff; border-radius:11px;font-size:16px;cursor:pointer;opacity:.35} .bp-x.on{opacity:1;border-color:var(--red);background:var(--red-bg)} .bp-x:active{transform:scale(.92)} .bp-detail{padding:0 12px 4px} .bp-detail .ln{font-size:11.5px;color:#555;line-height:1.6;margin-top:6px} .bp-detail .ln b{color:#1A1A1A;font-weight:800;margin-right:3px} .bp-detail .ln.rv{color:#777} .bp-detail .ln.ad{color:#AAA;font-size:11px} .bp-map{width:100%;margin-top:9px;padding:8px;border:1px solid var(--border);background:#FAFAFB; border-radius:9px;font-size:11.5px;font-weight:700;color:#555;cursor:pointer} .bp-more{text-align:center;font-size:10px;font-weight:700;color:#C0C0C0;padding:6px 0 8px} /* 실시간 보강 표시줄 */ .mg-fill{display:flex;align-items:center;justify-content:center;gap:7px;background:#FFF8F9; border:1px solid #FFE0E4;border-radius:10px;padding:8px;font-size:11px;font-weight:700; color:var(--red);margin-bottom:12px} .mg-fill .sp{width:12px;height:12px;border:2px solid #FFD6DB;border-top-color:var(--red); border-radius:50%;display:inline-block;animation:mrpSpin .8s linear infinite} /* 소셜 헤더의 ＋ (새 대화방) */ #pg-social .soc-hd .r .ic{font-size:22px;font-weight:300;color:#555;cursor:pointer; width:30px;height:30px;display:flex;align-items:center;justify-content:center} #pg-social .soc-hd .r .ic:active{opacity:.5} /* 대화 — 안 읽은 사람 수 (카톡 방식) */ .msg .tm{display:flex;align-items:center;gap:4px} .msg.me .tm{justify-content:flex-end} .msg-un{font-size:10px;font-weight:800;color:#FFB300;line-height:1} /* 설정 — 알림 계층 구조 */ .set-sub{display:block;font-size:10.5px;color:#AAA;font-weight:600;margin-top:2px} .set-kids{position:relative;padding-left:10px;margin-left:4px;border-left:2px solid var(--border); transition:opacity .18s} .set-kids.off{opacity:.38;pointer-events:none} .set-row.sub{padding-left:4px} .set-go{font-size:16px;color:#CCC;font-weight:800} .pc-opt{display:flex;align-items:flex-start;gap:11px;padding:14px 13px;border:1.5px solid var(--border); border-radius:13px;margin-bottom:8px;cursor:pointer;background:#fff} .pc-opt.on{border-color:var(--red);background:#FFF8F9} .pc-opt .rd{width:19px;height:19px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:1px} .pc-opt.on .rd{border-color:var(--red);border-width:6px} .pc-opt .tx{flex:1;min-width:0} .pc-opt .tx b{display:block;font-size:13px;font-weight:800;color:#1A1A1A} .pc-opt .tx em{display:block;font-size:11px;color:#999;font-style:normal;margin-top:3px;line-height:1.5} .pc-prev{background:#1A1A1A;color:#fff;border-radius:12px;padding:12px 13px;margin:4px 0 14px} .pc-prev .h{display:flex;align-items:center;gap:7px;font-size:10.5px;opacity:.6;font-weight:700} .pc-prev .t{font-size:12.5px;font-weight:800;margin-top:6px} .pc-prev .b{font-size:11.5px;opacity:.8;margin-top:3px} /* ══ 길게 눌러 나오는 텍스트 선택·복사 막기 ══ 앱처럼 쓰는 화면인데 길게 누를 때마다 글자가 파랗게 잡히고 복사 메뉴가 떴다. 입력칸과 사용자가 남긴 글은 예외로 둔다(주소를 복사하고 싶을 수 있다). */ body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; /* iOS 길게 누르기 팝업 */ -webkit-tap-highlight-color:transparent; /* 안드로이드 회색 깜빡임 */ } input,textarea,[contenteditable="true"], .msg .bub, /* 대화 내용 */ .pm-item .tx, /* 공개 메모 */ .mcd-row, /* 가게 주소·전화 */ .mgc-rv,.wc-card .ln.rv,.bp-detail .ln{ -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-touch-callout:default; } /* 대화방 관리 메뉴 */ .rmm-list{display:flex;flex-direction:column;gap:7px} .rmm-it{display:flex;align-items:center;gap:12px;padding:14px 13px;border:1px solid var(--border); border-radius:13px;background:#fff;cursor:pointer} .rmm-it:active{background:#FAFAFB} .rmm-it .ic{font-size:19px;flex-shrink:0} .rmm-it .tx{flex:1;min-width:0;font-size:13px;font-weight:700;color:#1A1A1A} .rmm-it .tx em{display:block;font-size:10.5px;color:#999;font-weight:600;font-style:normal;margin-top:3px} .rmm-it .go{font-size:16px;color:#CCC;font-weight:800} .soc-room.pin{background:#FFFBF5} .soc-room.pin:before{content:'📌';position:absolute;top:7px;right:9px;font-size:10px;opacity:.65} .soc-room{position:relative} /* 대화방 알림 — 이름을 누르면 표시 방식 선택 */ .set-tap{cursor:pointer} .set-tap:active{opacity:.6} .set-tap .set-go{font-size:13px;color:#CCC;font-weight:800;font-style:normal;margin-left:2px} /* ══ 조건 시트 여백 축소 ══ 항목이 5개라 스크롤이 길었다. 설명 문구를 뺀 만큼 간격도 줄인다. [주의] index.html 안의 CSS가 이 파일보다 뒤에 오므로 !important 로 확실히 이긴다. */ #sheet-body .sheet-lbl{margin:12px 0 5px !important;font-size:11.5px !important} #sheet-body .sheet-lbl:first-child{margin-top:2px !important} #sheet-body .ms-loc{padding:9px 11px !important;margin-bottom:0 !important} #sheet-body .ms-loc-sub{display:none !important} #sheet-body .mt-opt{margin-bottom:0 !important;gap:6px !important} #sheet-body .mt-opt button{padding:8px 5px !important} #sheet-body .mt-opt button small{margin-top:1px !important;font-size:9.5px !important} #sheet-body .gopt-grid .mm-chip{padding:6px 3px !important} #sheet-body .dl-row{padding:1px 0 !important} #sheet-body .mt-wait{display:none !important} #sheet-body .mg-howto{padding:9px 11px !important;margin-bottom:10px !important;font-size:11px !important} #sheet-body .mt-go{margin-top:14px !important} /* ══ 밥값 폭탄 — 배경 연출 ══ 흰 화면에 이모지만 있으면 긴장감이 안 산다. 불붙은 심지처럼 위험한 분위기를 배경으로 깐다. */ .bomb-wrap{position:relative;border-radius:20px;overflow:hidden;padding:18px 0 8px; background:radial-gradient(ellipse at 50% 30%,#2B0208 0%,#12060A 55%,#0A0508 100%)} .bomb-wrap .bomb-t{color:#FFD400;text-shadow:0 0 18px rgba(255,212,0,.45)} .bomb-wrap .mg-sub{color:#FFD8DC} .bomb-wrap .mg-sub b{color:#FF6B7A} .bomb-sky{position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 38%,rgba(255,90,60,.30),transparent 62%); animation:bombGlow 1.1s ease-in-out infinite} @keyframes bombGlow{0%,100%{opacity:.45}50%{opacity:1}} /* 떠오르는 불티 */ .bomb-wrap:before,.bomb-wrap:after{content:'';position:absolute;bottom:-10px;width:5px;height:5px; border-radius:50%;background:#FFB300;box-shadow:0 0 10px #FF6B00;opacity:0; animation:bombSpark 2.4s linear infinite} .bomb-wrap:before{left:32%} .bomb-wrap:after{left:66%;animation-delay:-1.2s} @keyframes bombSpark{ 0%{transform:translateY(0) scale(.6);opacity:0} 15%{opacity:.9} 100%{transform:translateY(-130px) scale(.2);opacity:0} } .bomb-wrap .bomb{filter:drop-shadow(0 6px 16px rgba(255,80,40,.5))} .bomb-wrap .bomb-bar{background:rgba(255,255,255,.12);margin:14px 16px 4px} .bomb-wrap .bomb-bar i{background:linear-gradient(90deg,#FFD400,#FF3B30)} /* 조건 시트 — 버튼 안 설명을 없앤 만큼 높이도 줄인다 */ #sheet-body .mt-opt button{padding:11px 6px !important;font-size:12.5px !important;line-height:1.3 !important} #sheet-body .mt-opt button small{display:none !important} /* ══════════════════════════════════════════════════════════════════ 게임 지도 화면 — 맛집찾기 위에 게임 패널을 얹는다 ══════════════════════════════════════════════════════════════════ */ #pg-game .mymap-wrap{position:relative;width:100%;height:100dvh;overflow:hidden} #pg-game .mymap{width:100%;height:100%} /* 상단 게임 패널 — 화면의 1/3 이내, 내용이 길면 스크롤 */ .gm-top{position:absolute;left:0;right:0;top:0;z-index:40; padding:calc(env(safe-area-inset-top) + 10px) 12px 12px; background:linear-gradient(180deg,rgba(255,255,255,.98) 78%,rgba(255,255,255,0)); max-height:38vh;overflow-y:auto} .gm-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px} .gm-hd .ti{flex:1;min-width:0;font-size:14.5px;font-weight:900;color:#1A1A1A; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-hd .x{width:28px;height:28px;border:none;background:#F2F2F4;border-radius:9px; font-size:13px;color:#666;cursor:pointer;flex-shrink:0} .gm-sub{font-size:11.5px;color:#888;line-height:1.55;margin-bottom:9px} .gm-sub b{color:var(--red)} /* 월드컵 — 좌우 대결 */ .gm-vs{display:flex;align-items:stretch;gap:8px} .gm-vs .vs{flex:0 0 auto;align-self:center;font-size:12px;font-weight:900;color:var(--red); letter-spacing:.5px} .gm-vs .gm-cand{flex:1;min-width:0} /* 후보 버튼 (월드컵·밴픽 공용) */ .gm-cands{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none} .gm-cands::-webkit-scrollbar{display:none} .gm-cands .gm-cand{flex:0 0 auto;min-width:96px;max-width:132px} .gm-cand{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px; border:2px solid var(--border);background:#fff;border-radius:14px;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06);position:relative} .gm-cand:active{transform:scale(.97)} .gm-cand.on{border-color:var(--red);background:#FFF8F9;box-shadow:0 3px 12px rgba(208,2,27,.18)} .gm-cand.out{opacity:.4} .gm-cand .ic{font-size:22px} .gm-cand .nm{font-size:12.5px;font-weight:800;color:#1A1A1A;text-align:center;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gm-cand .ct{font-size:10px;color:#999;font-weight:600;text-align:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .gm-cand .bn{position:absolute;top:-6px;right:-4px;background:var(--red);color:#fff; font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:99px;border:1.5px solid #fff} /* 확정 버튼 */ .gm-go{width:100%;margin-top:10px;padding:12px;border:none;border-radius:12px; background:var(--red);color:#fff;font-size:13.5px;font-weight:800;cursor:pointer} .gm-go:disabled{background:#DDD;color:#999} .gm-go.ghost{background:#F2F2F4;color:#555} .gm-go:active:not(:disabled){transform:scale(.99)} /* 우승 표시 */ .gm-win{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px; border-radius:16px;cursor:pointer; background:linear-gradient(140deg,#D0021B,#8E0113);color:#fff; box-shadow:0 6px 20px rgba(208,2,27,.3)} .gm-win .ic{font-size:30px} .gm-win .nm{font-size:17px;font-weight:900} .gm-win .ct{font-size:11px;opacity:.9} /* 지도 마커 */ .gmk{display:flex;align-items:center;gap:5px;padding:5px 9px 5px 5px;background:#fff; border:2px solid var(--red);border-radius:99px;box-shadow:0 3px 10px rgba(0,0,0,.2); cursor:pointer;white-space:nowrap} .gmk .n{width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff; font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .gmk .t{font-size:11.5px;font-weight:800;color:#1A1A1A;max-width:96px; overflow:hidden;text-overflow:ellipsis} .gmk.on{background:var(--red);transform:scale(1.06)} .gmk.on .n{background:#fff;color:var(--red)} .gmk.on .t{color:#fff} .gmk.gmk-ban{opacity:.4;border-color:#BBB} /* 카드 시트 — 맛집찾기와 동일 */ #gm-sheet{position:absolute;left:0;right:0;bottom:0;z-index:45;background:#fff; border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.16); height:0;overflow:hidden;transition:height .22s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column} #gm-sheet.hidden{box-shadow:none} #gm-sheet-body{flex:1 1 auto;overflow-y:auto;min-height:0; padding:0 14px calc(env(safe-area-inset-bottom) + 16px)} .gm-loading{display:flex;align-items:center;justify-content:center;gap:7px; padding:12px;font-size:11.5px;font-weight:700;color:var(--red)} .gm-loading .sp{width:12px;height:12px;border:2px solid #FFD6DB;border-top-color:var(--red); border-radius:50%;display:inline-block;animation:mrpSpin .8s linear infinite} /* ══════════════════════════════════════════════════════════════════ 게임 화면 꾸미기 — 밋밋하던 것을 눈에 띄게 ══════════════════════════════════════════════════════════════════ */ /* 상단 패널: 흰 배경 대신 살짝 물든 유리 느낌 */ .gm-top{background:linear-gradient(180deg,rgba(255,255,255,.985) 62%,rgba(255,250,251,.92) 88%,rgba(255,255,255,0)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .gm-hd .ti{display:flex;align-items:center;gap:7px;font-size:15px} .gm-hd .ti .sub{font-size:10.5px;font-weight:800;color:#fff;background:var(--red); padding:2px 8px;border-radius:99px;font-style:normal;letter-spacing:.2px} /* 후보 카드 — 입체감과 강조 */ .gm-cand{border-width:2px;border-radius:16px;padding:11px 8px 10px; background:linear-gradient(180deg,#fff,#FCFCFD); box-shadow:0 3px 10px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); transition:transform .14s,box-shadow .14s,border-color .14s} .gm-cand .ic{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))} .gm-cand.on{border-color:var(--red); background:linear-gradient(180deg,#FFF6F7,#FFECEF); box-shadow:0 6px 18px rgba(208,2,27,.22),0 0 0 3px rgba(208,2,27,.1); transform:translateY(-2px)} .gm-cand.on:after{content:'✓';position:absolute;top:-7px;left:-7px;width:21px;height:21px; border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:900; display:flex;align-items:center;justify-content:center;border:2px solid #fff; box-shadow:0 2px 6px rgba(208,2,27,.4)} .gm-cand.out{opacity:.35;filter:grayscale(.7)} .gm-cand.out:before{content:'';position:absolute;inset:0; background:linear-gradient(135deg,transparent 47%,rgba(208,2,27,.55) 47%,rgba(208,2,27,.55) 53%,transparent 53%); border-radius:14px} .gm-cand .bn{background:linear-gradient(135deg,#FF5A6E,#D0021B);box-shadow:0 2px 6px rgba(208,2,27,.35)} /* VS 배지 */ .gm-vs .vs{display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;font-size:11.5px;letter-spacing:0; background:linear-gradient(135deg,#1A1A1A,#3A3A3A);color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.28);border:2px solid #fff} /* 확정 버튼 — 그라데이션과 광택 */ .gm-go{background:linear-gradient(135deg,#E01126,#B00018); box-shadow:0 4px 14px rgba(208,2,27,.32);position:relative;overflow:hidden} .gm-go:not(:disabled):after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); animation:gmShine 2.6s ease-in-out infinite} @keyframes gmShine{0%{left:-60%}55%,100%{left:130%}} .gm-go:disabled{background:#E8E8EA;box-shadow:none} .gm-go:disabled:after{display:none} .gm-go.ghost{background:#F2F2F4;box-shadow:none} .gm-go.ghost:after{display:none} /* 우승 화면 — 광선과 반짝임 */ .gm-win{position:relative;overflow:hidden; background:linear-gradient(140deg,#E01126,#8E0113 60%,#5A000B); box-shadow:0 8px 26px rgba(208,2,27,.36)} .gm-win:before{content:'';position:absolute;inset:-50%; background:repeating-conic-gradient(rgba(255,255,255,.09) 0deg 10deg,transparent 10deg 20deg); animation:wcSpin 18s linear infinite} .gm-win>*{position:relative;z-index:2} .gm-win .ic{font-size:34px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))} .gm-win .nm{font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.25)} /* 참가자 진행 상황 — 누가 끝냈는지 모두에게 */ .gm-prog{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .gm-prog .p{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:99px; background:#F2F2F4;color:#AAA;border:1px solid transparent} .gm-prog .p.ok{background:#EAF7EE;color:#16A34A;border-color:#CDEBD6} /* 밴픽 마커 — 탈락 표시 */ .mm-pin.gm-ban{opacity:.4;filter:grayscale(.8)} /* 시트 손잡이 — 끌 수 있다는 걸 알리려고 조금 크게 */ #gm-sheet .mm-grab{padding:12px 0 9px;touch-action:none} /* ══ 소셜 배너 ══ */ /* [변경] 위아래 16px. 배너마다 글 길이가 달라 높이가 들쭉날쭉했다. → 높이를 고정하고 설명은 두 줄까지만 보여준다(넘치면 …). */ .soc-banner{display:flex;align-items:center;gap:13px;padding:16px 15px;margin:0 0 10px; height:112px;box-sizing:border-box; border-radius:15px;cursor:pointer;position:relative;overflow:hidden; background:linear-gradient(120deg,#FFF1F3,#FFE6EA 55%,#FFF6F2); border:1px solid #FFDCE1; touch-action:pan-y;user-select:none;-webkit-user-select:none} .soc-banner:active{transform:scale(.995)} .soc-banner .ic{font-size:30px;flex-shrink:0} .soc-banner .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} .soc-banner .tx b{display:block;font-size:13.5px;font-weight:800;color:#1A1A1A; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 설명은 두 줄 고정 — 짧아도 자리를 지켜 높이가 흔들리지 않는다 */ .soc-banner .tx em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:11.5px;color:#8A7A7C;font-style:normal; margin-top:5px;line-height:1.5;height:34px} /* 배너 종류 꼬리표 (가이드·Q&A 등) — 나중에 '광고' 표시로도 쓴다 */ .soc-banner .tag{display:inline-block;align-self:flex-start;margin-bottom:5px; padding:2px 7px;border-radius:99px; font-size:9.5px;font-weight:800;letter-spacing:.02em; background:rgba(208,2,27,.09);color:var(--red)} .soc-banner .more{display:block;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--red)} .soc-banner .dots{position:absolute;right:12px;bottom:9px;display:flex;gap:3px} .soc-banner .dots i{width:4px;height:4px;border-radius:50%;background:#E3C8CC} .soc-banner .dots i.on{background:var(--red);width:11px;border-radius:99px} .friend-req-btn.wide{width:100%} /* 1:1 대화방 아바타 — 혼자면 꽉 채운다 */ .soc-room .av .a.solo{left:0;top:0;width:44px;height:44px;font-size:17px} .soc-room .av .a.solo img{width:100%;height:100%} /* ══ 아이폰 하단 여백 ══ 홈 인디케이터에 가려 하단 탭이 눌리지 않던 문제. 막대만큼 아래에 여백을 준다. */ .bnav-bar{padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box} /* 지도 위에 떠 있는 것들도 홈 인디케이터를 피한다 */ #gm-sheet{padding-bottom:0} #gm-sheet-body{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)} /* 내 차례가 끝났음을 분명히 보여준다 (멈춘 것처럼 보이지 않게) */ .gm-done{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:14px; background:linear-gradient(120deg,#F0FBF3,#E7F7ED);border:1px solid #CDEBD6;margin-bottom:9px} .gm-done .ic{font-size:24px;flex-shrink:0} .gm-done .tx{flex:1;min-width:0} .gm-done .tx b{display:block;font-size:13.5px;font-weight:800;color:#166534; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-done .tx em{display:block;font-size:10.5px;color:#4A9A63;font-style:normal;margin-top:2px} /* ══ 게임 맛집카드 — 메인(내맛집·맛집찾기) 카드와 같은 모양 ══ 예전엔 이름·업종만 있는 요약본이라 같은 가게인데 화면마다 달라 보였다. 썸네일·등급배지·거리·핀버튼까지 메인과 맞춘다. */ .fm-card-hd.gm-c-hd{display:flex;align-items:center;gap:11px;padding:14px 16px 10px} .gm-c-thumb{width:46px;height:46px;flex-shrink:0;border-radius:13px;background:#FFF3F4; display:flex;align-items:center;justify-content:center;font-size:24px} .gm-c-info{flex:1;min-width:0} .gm-c-hd .nm{font-size:16px;font-weight:800;color:#1A1A1A; display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3} .gm-c-hd .ct{font-size:11.5px;color:#9AA0A6;font-weight:600;margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-c-hd .fl-act{flex-shrink:0;background:none;border:none;padding:5px;cursor:pointer; display:flex;align-items:center} .fm-card-bd{padding:0 16px 16px} /* ══════════════════════════════════════════════════════════════ 게임 진행 안내 (모든 게임 공용) "지금 어디까지 왔고 다음에 뭘 하면 되는지"를 항상 같은 자리에 둔다. ══════════════════════════════════════════════════════════════ */ /* ── 단계 표시: 고르기 › 기다리기 › 결과 ── */ .gm-steps{display:flex;align-items:center;gap:3px;margin:0 0 10px;flex-wrap:wrap} .gm-steps .s{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; color:#B0B4B8;white-space:nowrap} .gm-steps .s i{width:15px;height:15px;border-radius:50%;background:#E8E9EB;color:#fff; display:flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;font-weight:800} .gm-steps .s.on{color:var(--red)} .gm-steps .s.on i{background:var(--red)} .gm-steps .s.done{color:#8A8E92} .gm-steps .s.done i{background:#9AA0A6} .gm-steps .ar{color:#D8DADC;font-size:11px;font-weight:400} /* ── 진행률 바 ── */ .gm-prog-wrap{margin:8px 0 10px} .gm-prog-bar{height:4px;border-radius:99px;background:#EDEEF0;overflow:hidden;margin-bottom:7px} .gm-prog-bar i{display:block;height:100%;background:var(--red);border-radius:99px; transition:width .35s ease} .gm-prog-bar.mini{margin:0 0 10px} /* ── 몇 명 완료 / 누구를 기다리는지 ── */ .gm-wait-n{font-size:12px;font-weight:800;color:#1A1A1A;margin-bottom:6px} .gm-wait-n em{display:block;font-style:normal;font-size:11px;font-weight:600; color:#9AA0A6;margin-top:3px} /* ── 각자의 우승 목록 (월드컵) ── */ .gm-champs{display:flex;flex-direction:column;gap:5px;margin-bottom:9px} .gm-champs .cw{display:flex;align-items:center;gap:8px;background:#F7F8F9; border-radius:10px;padding:8px 11px} .gm-champs .who{font-size:11px;font-weight:700;color:#9AA0A6;flex-shrink:0;min-width:52px} .gm-champs .pl{font-size:12.5px;font-weight:800;color:#1A1A1A;cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-champs .pl:active{color:var(--red)} /* ══ 동률 2곳 — 항목별 비교 대결 ══ 운에 맡기지 않고 "왜 이겼는지"를 눈으로 보여준다. */ .gm-duel{background:#FAFAFB;border:1px solid #EDEEF0;border-radius:13px; padding:11px 12px;margin-bottom:9px} .gm-duel .duel-hd{display:flex;align-items:center;gap:6px;margin-bottom:9px; padding-bottom:9px;border-bottom:1px solid #EDEEF0} .gm-duel .duel-hd .a,.gm-duel .duel-hd .b{flex:1;min-width:0;font-size:12px;font-weight:800; color:#8A8E92;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-duel .duel-hd .b{text-align:right} .gm-duel .duel-hd .a.win,.gm-duel .duel-hd .b.win{color:var(--red)} .gm-duel .duel-hd .mid{font-size:13px;font-weight:900;color:#1A1A1A;flex-shrink:0; padding:2px 9px;background:#fff;border-radius:99px;border:1px solid #EDEEF0} .gm-duel .duel-row{display:flex;align-items:center;gap:6px;padding:5px 0} .gm-duel .duel-row .lb{flex-shrink:0;font-size:10px;font-weight:700;color:#9AA0A6; text-align:center;min-width:78px} .gm-duel .duel-row .v{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:#B0B4B8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-duel .duel-row .v:last-child{text-align:right} .gm-duel .duel-row .v.win{color:#1A1A1A;font-weight:800} .gm-duel .duel-note{margin-top:7px;padding-top:7px;border-top:1px solid #EDEEF0; font-size:10px;color:#9AA0A6;text-align:center} .gm-duel-win{text-align:center;font-size:13px;font-weight:800;color:#1A1A1A;margin-bottom:10px} .gm-duel-win b{color:var(--red)} /* ══ 최종 결과 화면 ══ */ .gm-final-tag{display:inline-block;padding:4px 10px;border-radius:99px;margin-bottom:9px; background:rgba(208,2,27,.08);color:var(--red);font-size:10.5px;font-weight:800} .gm-win .more{display:block;margin-top:6px;font-size:10.5px;font-weight:700; color:var(--red);opacity:.85} .gm-final-btns{display:flex;gap:7px;margin-top:9px} .gm-final-btns .gm-go.half{flex:1;margin-top:0} /* 확정 버튼 — 화면 전체 폭을 차지하면 손가락이 닿기 전에 눈에 먼저 부담이 된다. 가운데에 적당한 폭으로 둔다. */ .gm-go.compact{width:auto;min-width:150px;max-width:60%;margin-left:auto;margin-right:auto; display:block;padding:11px 22px;font-size:13.5px} /* ══ 게임 상단 패널 — 간격 최적화 ══ [문제] 여백이 넉넉해서 내용이 38vh를 넘어가면 위아래가 잘리고 스크롤이 생겼다. 게임 중에 스크롤을 해야 다음 버튼이 보이는 건 불편하다. → 세로 여백만 촘촘히 조여 한 화면에 들어오게 한다(글자 크기는 그대로 둔다). */ .gm-top{padding:calc(env(safe-area-inset-top) + 8px) 12px 9px;max-height:46vh} .gm-hd{margin-bottom:4px} .gm-sub{margin-bottom:6px;line-height:1.45} .gm-steps{margin-bottom:7px} .gm-prog-wrap{margin:5px 0 7px} .gm-prog-bar.mini{margin:0 0 7px} .gm-go{margin-top:8px;padding:11px} .gm-win{padding:12px} .gm-final-tag{margin-bottom:6px} .gm-wait-n{margin-bottom:4px} .gm-champs{gap:4px;margin-bottom:7px} .gm-champs .cw{padding:6px 10px} .gm-duel{padding:9px 11px;margin-bottom:7px} .gm-duel .duel-hd{margin-bottom:7px;padding-bottom:7px} .gm-duel .duel-row{padding:4px 0} .gm-duel-win{margin-bottom:7px} /* 결과 화면 버튼 — 저장·상세·닫기를 한 줄에 */ .gm-final-btns{display:flex;gap:6px;margin-top:8px;align-items:stretch} .gm-final-btns .gm-go.half{flex:1;margin-top:0;padding:10px 6px;font-size:12.5px; width:auto;min-width:0;max-width:none} .gm-final-btns .mg-pin{flex:1.4;margin:0;padding:10px 6px;font-size:12.5px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* 새로고침 버튼 — 실시간이 늦어도 눌러서 바로 다음 단계로 넘어간다. 화면 폭을 다 채우면 부담스러워서, 작게 오른쪽에 둔다. */ .gm-rf{display:inline-flex;align-items:center;gap:4px; padding:6px 12px;border:1px solid #E0E2E4;border-radius:99px; background:#fff;color:#6A6E72;font-size:11.5px;font-weight:700;cursor:pointer; white-space:nowrap;line-height:1} .gm-rf:active{background:#F4F5F6;color:var(--red);border-color:#F0C4C9} .gm-rf:disabled{color:#B8BCC0;background:#FAFAFA} /* 대기 화면: 닫기(넓게) + 새로고침(작게) */ .gm-wait-btns{display:flex;gap:7px;margin-top:8px;align-items:center} .gm-wait-btns .gm-go.half{flex:1;margin-top:0;padding:10px 12px;font-size:12.5px; width:auto;min-width:0;max-width:none;order:1} .gm-wait-btns .gm-rf{order:2;flex:0 0 auto} /* 방장 대기 안내 아래에 단독으로 놓일 때 — 오른쪽에 붙인다 */ .gm-sub + .gm-rf{margin:2px 0 0 auto;display:flex;width:fit-content} /* 투표 결과 요약 — 어느 곳이 몇 표를 받았는지 한눈에 */ .gm-vote-list{display:flex;flex-direction:column;gap:7px} .gm-vote-list .vote-row{display:flex;align-items:center;gap:9px} .gm-vote-list .vote-row .nm{flex:0 0 34%;font-size:12.5px;font-weight:700;color:#6A6E72; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-vote-list .vote-row.win .nm{color:#1A1A1A;font-weight:800} .gm-vote-list .vote-row .bar{flex:1;height:8px;border-radius:99px;background:#EDEEF0;overflow:hidden} .gm-vote-list .vote-row .bar i{display:block;height:100%;border-radius:99px;background:#D8DADC} .gm-vote-list .vote-row.win .bar i{background:var(--red)} .gm-vote-list .vote-row .n{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#9AA0A6;min-width:30px;text-align:right} .gm-vote-list .vote-row.win .n{color:var(--red)} /* 맛집투표 결과를 게임 결과 화면으로 감쌀 때 여백 */ .mt-res-wrap{padding:14px 16px 18px} /* ══ 오늘의 주요알림 (알림함 맨 위) ══ 예전 '오늘의 미션'을 대신한다. 과제를 주는 대신 오늘 볼 것만 알려준다. */ .dl-card{background:#fff;border:1px solid var(--border);border-radius:15px; padding:11px 13px 6px;margin:0 0 10px} .dl-card .dl-load{font-size:12.5px;color:#9AA0A6;text-align:center;padding:8px 0} .dl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .dl-t{font-size:13px;font-weight:900;color:#1A1A1A} /* 날짜 넘기기 — 한 줄로 */ .dn-nav{display:flex;align-items:center;gap:1px} .dn-nav .nv{width:22px;height:22px;border:none;background:none;color:#B0B4B8; font-size:16px;line-height:1;cursor:pointer;padding:0;border-radius:50%} .dn-nav .nv:active{background:#F2F3F5} .dn-nav .nv:disabled{color:#E6E8EA;cursor:default} .dn-nav .dt{text-align:center;min-width:74px;font-size:12px;font-weight:800;color:#1A1A1A} /* 소식이 없는 날 */ .dn-empty{text-align:center;font-size:12px;color:#B0B4B8;padding:14px 0} /* 알림 한 줄 */ .dn-row{display:flex;align-items:center;gap:10px;padding:9px 2px;cursor:pointer} .dn-row + .dn-row{border-top:1px solid #F2F3F5} .dn-row:active{opacity:.6} .dn-row .ic{font-size:20px;flex-shrink:0;width:26px;text-align:center} .dn-row .in{flex:1;min-width:0} .dn-row .in b{display:block;font-size:12.5px;font-weight:800;color:#1A1A1A;line-height:1.35} .dn-row .in em{display:block;font-size:11px;color:#9AA0A6;font-style:normal;margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dn-row .go{flex-shrink:0;color:#C8CCD0;font-size:16px;font-weight:400} /* 펼친 내용 */ .dn-panel{margin-top:8px;padding-top:10px;border-top:1px solid #F2F3F5} /* 친구 찜 내역 — 알림 문장을 그대로 나열한다 */ .dn-msg-wrap{display:flex;flex-direction:column;gap:7px} .dn-msg{background:#FAFAFB;border-radius:12px;padding:11px 13px;cursor:pointer; display:flex;align-items:flex-start;gap:9px} .dn-msg:active{background:#F2F3F5} .dn-msg .tx{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#1A1A1A;line-height:1.5} .dn-msg .dt{flex-shrink:0;font-size:10.5px;color:#B0B4B8;font-weight:700;padding-top:2px} /* 오늘의 추천 — 메인 맛집카드와 같은 모양으로 감싼다 */ .dl-card-wrap{border:1px solid #F0F1F2;border-radius:13px;overflow:hidden;margin-bottom:2px} .dl-card-wrap .fm-card-hd.gm-c-hd{padding:12px 13px 8px} .dl-card-wrap .fm-card-bd{padding:0 13px 12px} .dl-btns{display:flex;gap:7px;margin-top:9px} .dl-btns .dl-b{flex:1;padding:11px;border:none;border-radius:11px;background:var(--red); color:#fff;font-size:12.5px;font-weight:800;cursor:pointer} .dl-btns .dl-b.ghost{background:#F2F3F5;color:#555} .dl-btns .dl-b.off,.dl-btns .dl-b:disabled{background:#E8E9EB;color:#A0A4A8;cursor:default} /* ══ 대화방 전용 맛집 지도 ══ [주의] #pg-rmap 에 display 를 주면 안 된다. .page 는 평소 display:none 이고 .page.active 일 때만 보이는데, id 규칙이 그걸 덮으면 화면이 항상 떠서 다른 탭을 전부 가린다. 여기서는 안쪽 요소만 다룬다. */ .rmap-body{flex:1;position:relative;overflow:hidden} #rmap{width:100%;height:100%} /* [2026-08-27 수정] 네이티브 앱에서 현재위치·게임결과 단추가 안드로이드 네비게이션 바에 가려 눌리지 않던 문제. 지도는 화면 전체를 쓰므로 그 위에 뜨는 단추들이 스스로 여백을 챙겨야 한다. [웹] env() 가 0 이라 예전과 똑같은 자리. */ .rmap-loc{right:11px;bottom:calc(env(safe-area-inset-bottom, 0px) + 16px)} /* [2026-08-25 추가] 게임 결과 보이기/숨기기 — 현재위치 버튼 바로 위 */ .rmap-gm{right:11px;bottom:calc(env(safe-area-inset-bottom, 0px) + 116px);font-size:17px;line-height:1} .rmap-gm.off{opacity:.42;filter:grayscale(1)} /* [2026-09-06 추가] 이 방 사람들의 핀 보이기/숨기기. 위에서부터 게임 결과(116px) · 방 사람들(66px) · 현재 위치(16px) 순으로 쌓는다. */ .rmap-fp{right:11px;bottom:calc(env(safe-area-inset-bottom, 0px) + 66px);font-size:17px;line-height:1} .rmap-fp.off{opacity:.42;filter:grayscale(1)} /* 게임에서 정해진 곳 (아무도 안 꽂았을 때) */ .mm-pin.rmap-game-pin .mm-pin-b{background:#FFF8E1;border:2px solid #E6B422} .mm-pin.rmap-game-pin .mm-pin-lb{background:rgba(230,180,34,.92);color:#fff} /* 안내 */ .rmap-legend{position:absolute;left:11px;top:11px;z-index:20;display:flex;gap:9px; background:rgba(255,255,255,.94);border-radius:99px;padding:6px 12px; box-shadow:0 2px 8px rgba(0,0,0,.1);pointer-events:none} .rmap-legend .lg{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#6A6E72} .rmap-legend .d{width:9px;height:9px;border-radius:50%;display:inline-block} .rmap-legend .d.me{background:var(--red)} .rmap-legend .d.fr{background:#3D5CCC} .rmap-legend .d.gm{background:#E6B422} /* 맛집 카드 — 마커를 누르면 아래에서 올라온다 */ /* [수정] 지도 위에 얹혀 있어서 카드를 위아래로 밀면 지도가 움직이고 카드는 스크롤되지 않았다. 이 영역의 터치는 카드가 쓰도록 막는다. */ /* 손잡이를 끌어 높이를 3단계로 바꾼다(내맛집 지도와 동일) */ .rmap-sheet{position:absolute;left:0;right:0;bottom:0;z-index:30;display:none; background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -3px 16px rgba(0,0,0,.13); display:none;flex-direction:column;overscroll-behavior:contain} .rmap-sheet.on{display:flex} .rmap-sheet .mm-grab{flex-shrink:0;cursor:grab;touch-action:none;padding:9px 0 4px} .rmap-sheet .mm-grab:active{cursor:grabbing} #rmap-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y} .rmap-sheet .mm-grab{padding:8px 0 2px;text-align:center} .rmap-sheet .mm-grab i{display:inline-block;width:36px;height:4px;border-radius:99px;background:#DDD} .rmap-card{padding-bottom:10px} .rmap-card .fm-card-hd.gm-c-hd{padding:8px 14px 8px;position:relative} /* [2026-08-25 삭제] .rmap-x — 방 지도 카드의 '✕' 닫기. 내맛집·맛집찾기와 같은 '‹ 맛집 카드' 줄로 바꾸면서 안 쓰게 됐다. */ .rmap-who{padding:0 14px 8px;font-size:11.5px;font-weight:700;color:var(--red)} .rmap-load{padding:16px;text-align:center;font-size:12px;color:#9AA0A6} /* 하단 게임 버튼 */ .rmap-foot{padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);background:#fff; border-top:.5px solid var(--border);flex-shrink:0} .rmap-game{width:100%;padding:13px;border:none;border-radius:13px;background:var(--red); color:#fff;font-size:14px;font-weight:800;cursor:pointer} .rmap-game:active{opacity:.88} /* 오늘의 추천 — 이름 옆 핀·방문·메모 아이콘 (다른 맛집카드와 동일) */ .dl-card-wrap .fm-card-hd.gm-c-hd{align-items:flex-start} .dl-card-wrap .fl-actions{display:flex;gap:2px;flex-shrink:0;margin-top:2px} .dl-card-wrap .fl-actions .fl-act{background:none;border:none;padding:5px;cursor:pointer; display:flex;align-items:center;border-radius:8px} .dl-card-wrap .fl-actions .fl-act:active{background:#F2F3F5} /* ══ 게임 안내 — 처음 하는 사람도 알 수 있게 크게 ══ 예전엔 설명이 작고 흐려서 뭘 하라는 건지 알기 어려웠다. 설명을 키운 만큼 가게 카드와 버튼은 줄여 화면에 다 들어오게 한다. */ .gm-guide{margin:2px 0 10px;padding:10px 12px;border-radius:12px; background:#FFF5F6;border:1px solid #FFE0E4} .gm-guide b{display:block;font-size:14px;font-weight:900;color:#1A1A1A;line-height:1.4} .gm-guide em{display:block;font-size:11.5px;font-style:normal;color:#8A7A7C; margin-top:4px;line-height:1.5} /* 가게 카드·버튼을 조금 줄여 설명이 들어갈 자리를 만든다 */ .gm-cands .gm-cand{padding:9px 11px} .gm-cands .gm-cand .ic{font-size:19px} .gm-cands .gm-cand .nm{font-size:12.5px} .gm-cands .gm-cand .ct{font-size:10.5px} .gm-vs .wc-side{padding:10px} .gm-go.compact{padding:10px 20px;font-size:13px} /* 상단 알림 벨 — 다른 상단 아이콘과 같은 터치 영역 */ .nt-bell{position:relative;width:40px;height:40px;border-radius:50%;cursor:pointer; display:inline-flex;align-items:center;justify-content:center} .nt-bell:active{background:#F2F3F5} .nt-bell svg{display:block} /* 처음 한 곳에서만 뜨는 안내 */ .mt-guide{margin:0 0 9px;padding:9px 11px;border-radius:11px; background:#FFF5F6;border:1px solid #FFE0E4;text-align:left} .mt-guide b{display:block;font-size:13px;font-weight:900;color:#1A1A1A;line-height:1.4} .mt-guide em{display:block;font-size:11px;font-style:normal;color:#8A7A7C;margin-top:3px;line-height:1.5} /* 알림 길게 누르기 메뉴 — 알림함 위에 직접 띄운다 */ .nt-menu-back{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.42); display:flex;align-items:flex-end;justify-content:center; padding:0 12px calc(env(safe-area-inset-bottom) + 12px); animation:ntFade .16s ease} @keyframes ntFade{from{opacity:0}to{opacity:1}} .nt-menu-card{width:100%;max-width:420px;background:#fff;border-radius:16px; padding:12px;box-shadow:0 -4px 22px rgba(0,0,0,.2);animation:ntUp .2s ease} @keyframes ntUp{from{transform:translateY(16px)}to{transform:translateY(0)}} .nt-menu-card .ti{font-size:12.5px;font-weight:800;color:#1A1A1A;margin-bottom:9px; padding:10px 12px;background:#F7F8F9;border-radius:11px;line-height:1.4} .nt-menu-card .it{width:100%;display:flex;align-items:center;gap:11px;padding:13px 8px; border:none;background:none;cursor:pointer;text-align:left} .nt-menu-card .it + .it{border-top:1px solid #F2F3F5} .nt-menu-card .it:active{background:#F7F8F9} .nt-menu-card .it .ic{font-size:19px;flex-shrink:0;width:26px;text-align:center} .nt-menu-card .it .tx{flex:1;font-size:13.5px;font-weight:700;color:#1A1A1A} .nt-menu-card .it .tx em{display:block;font-size:11px;font-style:normal;color:#9AA0A6; font-weight:600;margin-top:3px} .nt-menu-card .it.del .tx{color:#C33} .nt-menu-card .it.cancel{justify-content:center;font-size:13.5px;font-weight:800; color:#6A6E72;border-top:1px solid #F2F3F5;padding:13px 0} /* 알림을 길게 누를 때 글자가 선택되지 않게 (선택되면 메뉴가 가려진다) */ .nt-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 결과 화면에서 '상세 보기'를 누르면 아래에 펼쳐지는 맛집카드 */ .gm-final-card{margin-top:10px;border:1px solid #F0F1F2;border-radius:13px;overflow:hidden; background:#fff} .gm-final-card .fm-card-hd.gm-c-hd{padding:12px 13px 8px} .gm-final-card .fm-card-bd{padding:0 13px 12px} .gm-final-card .fl-actions{display:flex;gap:2px;flex-shrink:0} .gm-final-card .fl-actions .fl-act{background:none;border:none;padding:5px;cursor:pointer; display:flex;align-items:center;border-radius:8px} .gm-final-card .fl-actions .fl-act:active{background:#F2F3F5} .nt-menu-card .bd{max-height:52vh;overflow-y:auto;padding:2px 4px 8px} /* ══ 게임 시간제한 남은 시간 표시 (맛집투표와 같은 톤) ══ */ .gm-timer{display:inline-block;margin:0 0 8px;padding:4px 11px;border-radius:99px; background:rgba(208,2,27,.07);color:var(--red);font-size:11.5px;font-weight:800;letter-spacing:-.2px} /* ══ 재동률 n곳 비교표 (2곳 비교 mgDuel의 여러 곳 버전) ══ 선호픽 후에도 또 동률(2·3·4곳)일 때 종합점수 최고점으로 정하되, 왜 이 곳인지 항목별로 나란히 비교해서 보여준다. */ .gm-mduel{background:#FAFAFB;border:1px solid #EDEEF0;border-radius:13px; padding:11px 12px;margin-bottom:9px} .gm-mduel .mduel-hd{display:flex;align-items:stretch;gap:6px;margin-bottom:9px; padding-bottom:9px;border-bottom:1px solid #EDEEF0} .gm-mduel .mduel-hd .mh{flex:1;min-width:0;font-size:11.5px;font-weight:800; color:#8A8E92;cursor:pointer;text-align:center;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;padding:5px 4px;background:#fff;border-radius:9px;border:1px solid #EDEEF0} .gm-mduel .mduel-hd .mh.win{color:#fff;background:var(--red);border-color:var(--red)} .gm-mduel .mduel-row{display:flex;align-items:center;gap:8px;padding:5px 0} .gm-mduel .mduel-row .lb{flex-shrink:0;font-size:10px;font-weight:700;color:#9AA0A6; min-width:76px} .gm-mduel .mduel-row .vals{flex:1;min-width:0;display:flex;gap:6px} .gm-mduel .mduel-row .vals .v{flex:1;min-width:0;font-size:11px;font-weight:700; color:#B0B4B8;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-mduel .mduel-row .vals .v.win{color:#1A1A1A;font-weight:800} /* ══ 최종 결과 상세 팝업 (openSheet 안에 뜨는 맛집카드) ══ 비교결과처럼 아래에서 올라오고, 내용이 길면 시트가 스크롤된다(.sheet-body가 overflow-y:auto). */ .gm-detail-sheet{margin:-4px 0 4px} .gm-detail-sheet .fm-card-hd{margin-bottom:10px} .gm-detail-sheet .fm-card-bd{font-size:12.5px;line-height:1.6} /* ══════════════════════════════════════════════════════════════════════ 맛핀 게임 UI 키트 [2026-08-19 추가] ────────────────────────────────────────────────────────────────────── 게임 화면이 글자만 있어 단조롭다는 지적에 따라 만든 공용 부품 모음. ① 대표 캐릭터 ② 결과 무대(접시에 담기는 연출) ③ 후보 좌우 슬라이드 ④ 니가 내라 밥값 전용 무대 [캐릭터 이미지] char-matpin.png 를 index.html 과 같은 위치(저장소 최상단)에 올려두면 자동으로 잡힌다. 파일이 없으면 아래 fallback(👧)이 대신 나온다. 경로를 바꾸려면 --mpchar-img 한 줄만 고치면 전부 따라 바뀐다. ══════════════════════════════════════════════════════════════════════ */ :root{ --mpchar-img:url('char-matpin.png?v=4'); --mgc-w:0.56; /* 캐릭터 가로:세로 비율 (356÷636) */ } .mpchar{position:relative;aspect-ratio:356/636;flex:0 0 auto; background:var(--mpchar-img) center bottom/contain no-repeat; filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))} /* [주의] 그림 파일(char-matpin.png)이 없으면 이 자리는 그냥 비어 보인다. 예전에 이모지(👧)를 대신 깔아 뒀더니, 그림이 정상일 때도 그 위에 겹쳐 나왔다 (CSS만으로는 '그림이 안 뜬 경우'를 알 수 없다). 겹쳐 나오는 쪽이 훨씬 나쁘므로 대체 이모지는 두지 않는다. 파일은 반드시 함께 올려야 한다. */ /* 감정 — 같은 그림을 기울이거나 튀게 해서 표정을 대신한다 */ .mpchar.happy{animation:mpcharHop 1.1s ease-in-out infinite} .mpchar.wobble{animation:mpcharWobble 1.6s ease-in-out infinite} .mpchar.panic{animation:mpcharPanic .28s linear infinite} @keyframes mpcharHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}} @keyframes mpcharWobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} @keyframes mpcharPanic{0%,100%{transform:translate(-1.5px,0) rotate(-1.5deg)} 50%{transform:translate(1.5px,-1px) rotate(1.5deg)}} @media (prefers-reduced-motion:reduce){ .mpchar.happy,.mpchar.wobble,.mpchar.panic{animation:none} } /* ── ① 결과 무대 — 확정된 맛집이 캐릭터의 접시에 담긴다 ─────────────── */ .gm-stage{position:relative;margin:10px 0 14px;padding:14px 12px 10px;border-radius:20px; overflow:hidden;background:linear-gradient(165deg,#FFE9C9 0%,#FFC9A0 48%,#FFA97C 100%)} /* 뒤로 퍼지는 빛 */ .gm-stage-ray{position:absolute;left:50%;top:44%;width:190%;aspect-ratio:1;translate:-50% -50%; background:conic-gradient(from 0deg,rgba(255,255,255,.34) 0 6deg,transparent 6deg 22deg); animation:gmRay 15s linear infinite;pointer-events:none} @keyframes gmRay{to{rotate:360deg}} .gm-stage-in{position:relative;display:flex;align-items:flex-end;justify-content:center; min-height:186px} /* 캐릭터를 감싸는 상자 — 접시 좌표를 이 상자의 비율(%)로 잡기 위한 기준틀이다. 상자 크기가 곧 그림 크기이므로, 캐릭터를 키우거나 줄여도 접시 위치가 따라간다. 폭 106 : 높이 186 은 char-matpin.png(356×628)의 비율 그대로다. 그림을 바꾸면 이 비율과 --dish-x/--dish-y 를 함께 맞춰야 한다. */ .gm-char{position:relative;height:186px;width:106px;flex:0 0 auto} .gm-char>.mpchar{position:absolute;inset:0;height:100%;width:100%} /* 접시 위에 얹히는 결과 — 캐릭터 그림의 접시 위치에 맞춰 둔다. 그림을 바꾸면 이 두 값(--dish-x,--dish-y)만 조정하면 된다. */ .gm-dish{position:absolute;left:var(--dish-x,68.3%);bottom:var(--dish-y,39%); translate:-50% 0;z-index:3;display:flex;flex-direction:column-reverse;align-items:center;gap:3px; animation:gmDishDrop .95s cubic-bezier(.34,1.56,.64,1) both} .gm-dish .ic{width:40px;height:40px;border-radius:50%;background:#fff;display:flex; align-items:center;justify-content:center;font-size:21px; box-shadow:0 4px 12px rgba(0,0,0,.26),0 0 0 3px rgba(255,255,255,.9)} .gm-dish .nm{max-width:132px;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.62); color:#fff;font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} @keyframes gmDishDrop{ 0%{transform:translateY(-116px) scale(.5) rotate(-16deg);opacity:0} 55%{opacity:1} 70%{transform:translateY(4px) scale(1.06)} 85%{transform:translateY(-3px) scale(.98)} 100%{transform:translateY(0) scale(1);opacity:1} } /* [배치] 그림에서 직접 잰 접시 자리: 가로 68.3%, 접시 윗면은 아래에서 39.8%. 음식 아이콘의 '아래쪽'이 접시 윗면에 닿아야 담긴 것처럼 보이므로, column-reverse 로 아이콘을 아래, 이름표를 위에 둔다. (반대로 두면 아이콘이 이름표만큼 밀려 올라가 얼굴 앞에 뜬다) */ /* 담기는 순간 퍼지는 파동 */ .gm-dish-pop{position:absolute;left:var(--dish-x,68.3%);bottom:var(--dish-y,39%); translate:-50% 0;width:26px;aspect-ratio:1;border-radius:50%;border:3px solid #fff; opacity:0;animation:gmPop .7s ease-out .55s 1;pointer-events:none;z-index:2} @keyframes gmPop{0%{opacity:.95;scale:.3}100%{opacity:0;scale:3.4}} /* 색종이 */ .gm-conf{position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;opacity:0; animation:gmConf 2.6s linear infinite;pointer-events:none;z-index:1} @keyframes gmConf{ 0%{opacity:0;transform:translateY(0) rotate(0)} 10%{opacity:1} 100%{opacity:0;transform:translateY(230px) rotate(560deg)} } .gm-stage .gm-conf:nth-of-type(1){left:8%;background:#FF5A5F;animation-delay:.0s} .gm-stage .gm-conf:nth-of-type(2){left:22%;background:#FFD23F;animation-delay:.35s} .gm-stage .gm-conf:nth-of-type(3){left:36%;background:#3DDC97;animation-delay:.7s} .gm-stage .gm-conf:nth-of-type(4){left:52%;background:#4FA8FF;animation-delay:.2s} .gm-stage .gm-conf:nth-of-type(5){left:66%;background:#FF8AC4;animation-delay:.9s} .gm-stage .gm-conf:nth-of-type(6){left:80%;background:#FFD23F;animation-delay:.5s} .gm-stage .gm-conf:nth-of-type(7){left:92%;background:#3DDC97;animation-delay:1.2s} /* 무대 아래 이름표 */ .gm-stage-cap{position:relative;text-align:center;margin-top:6px} .gm-stage-cap .lb{display:inline-block;padding:3px 12px;border-radius:99px; background:rgba(255,255,255,.82);color:#8A4A18;font-size:11px;font-weight:900} .gm-stage-cap .nm{margin-top:5px;font-size:19px;font-weight:900;color:#5A2E0B; letter-spacing:-.5px;text-shadow:0 2px 0 rgba(255,255,255,.55)} .gm-stage-cap .ct{margin-top:2px;font-size:11.5px;font-weight:700;color:#96541F} .gm-stage-cap .more{display:inline-block;margin-top:8px;padding:5px 13px;border-radius:99px; background:#fff;color:#B4571C;font-size:11px;font-weight:800;cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.14)} .gm-stage-cap .more:active{transform:scale(.96)} /* ── ② 후보 좌우 슬라이드 ───────────────────────────────────────── [배치 원칙] 화살표는 목록 '위'에 둔다. 처음에는 카드 위에 겹쳐 놓았는데, 하필 가게 이름 자리를 가려서 무슨 가게인지 안 보였다. 캐릭터는 왼쪽에 자리를 따로 비워 세운다(padding-left). 겹쳐 놓으면 위쪽 안내 문구까지 가린다. */ .gm-carou{position:relative;margin:8px 0 4px;padding-left:76px;min-height:104px} .gm-carou-nav{display:flex;justify-content:flex-end;align-items:center;gap:5px; margin:0 2px 4px;font-size:10.5px;color:#999;font-weight:700} .gm-carou-nav .cnt{margin-right:auto;padding-left:2px} .gm-carou>.gm-cands,.gm-carou>.gm-vs{scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:2px 2px 6px} .gm-carou>.gm-cands>*,.gm-carou>.gm-vs>*{scroll-snap-align:center} /* 캐릭터 — 비워둔 왼쪽 자리 안에 바닥맞춤으로 선다 */ /* 폭·높이를 둘 다 못 박는다. 비율(aspect-ratio)만 주면 브라우저가 잡는 폭이 갸웃거리는 움직임과 겹쳐 예상보다 커진다 — 실제로 카드를 침범했다. */ .gm-carou>.mpchar{position:absolute;left:2px;bottom:4px;width:50px;height:88px; aspect-ratio:auto;z-index:2;pointer-events:none} .gm-arw{width:26px;height:26px;border-radius:50%;border:1px solid var(--border,#E5E5E5); background:#fff;color:#444;font-size:15px;font-weight:900;line-height:1;cursor:pointer; padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.12)} .gm-arw:active{transform:scale(.9);background:#F4F4F6} .gm-carou.one .gm-carou-nav{display:none} /* 넘길 것이 없으면 화살표를 숨긴다 */ /* ── ③ 니가 내라 밥값 ─────────────────────────────────────────────── */ .bomb-stage{position:relative;margin:6px 0 10px;padding:12px 12px 14px;border-radius:20px; overflow:hidden;background:radial-gradient(120% 90% at 50% 8%,#FF8A3D 0%,#F4471E 58%,#C81E10 100%)} /* 공사장 경고 테이프 */ .bomb-tape{position:absolute;left:-14%;width:128%;height:26px;z-index:1; background:repeating-linear-gradient(115deg,#FFD400 0 17px,#1A1A1A 17px 34px); box-shadow:0 2px 7px rgba(0,0,0,.3)} .bomb-tape.t1{top:52px;rotate:-6deg} .bomb-tape.t2{bottom:64px;rotate:5deg} .bomb-ti{position:relative;z-index:2;text-align:center;font-size:21px;font-weight:900; color:#FFE9A8;letter-spacing:-1px; text-shadow:0 2px 0 #8A2408,0 4px 0 #6B1A05,0 6px 12px rgba(0,0,0,.35)} /* 전광판 남은 시간 */ .bomb-led{position:relative;z-index:3;margin:9px auto 0;width:126px;padding:7px 0; border-radius:11px;background:#141414;border:3px solid #3A3A3A;text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.9),0 4px 12px rgba(0,0,0,.35)} .bomb-led #bomb-t{font-size:34px;font-weight:900;line-height:1;color:#FF3B30; font-variant-numeric:tabular-nums;letter-spacing:2px; text-shadow:0 0 9px rgba(255,59,48,.95),0 0 22px rgba(255,59,48,.6)} .bomb-led.hot{animation:bombLedHot .32s steps(2) infinite} @keyframes bombLedHot{0%,100%{border-color:#FF3B30}50%{border-color:#3A3A3A}} /* 캐릭터 + 폭탄 */ .bomb-hero{position:relative;z-index:3;display:flex;align-items:flex-end; justify-content:center;min-height:150px;margin-top:4px} .bomb-hero .mpchar{--mpchar-h:150px;height:150px} .bomb-hero .bomb{position:absolute;left:50%;bottom:34px;translate:-30% 0; font-size:52px;line-height:1;filter:drop-shadow(0 4px 9px rgba(0,0,0,.45)); transform-origin:50% 60%} /* 심지 불꽃 */ .bomb-hero .fuse{position:absolute;left:50%;bottom:82px;translate:6px 0;font-size:23px; line-height:1;animation:bombFuse .42s ease-in-out infinite;pointer-events:none} @keyframes bombFuse{0%,100%{transform:scale(1) rotate(-8deg);opacity:.92} 50%{transform:scale(1.28) rotate(9deg);opacity:1}} /* 하트 = 남은 시간 막대 */ .bomb-bar{position:relative;z-index:3;height:9px;margin:6px 8px 0;border-radius:99px; background:rgba(0,0,0,.32);overflow:hidden} .bomb-bar>i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#FFE066,#FF3B30);transition:none} /* 누르지 마세요 버튼 */ .bomb-press{position:relative;z-index:4;display:block;margin:13px auto 2px;width:158px; height:74px;border:none;padding:0;background:transparent;cursor:pointer} .bomb-press .base{position:absolute;left:0;right:0;bottom:0;height:30px;border-radius:50%/100% 100% 46% 46%; background:linear-gradient(180deg,#D9D2C6,#9E958A)} .bomb-press .cap{position:absolute;left:9px;right:9px;top:0;height:56px;border-radius:50%; background:radial-gradient(70% 70% at 50% 26%,#FF6B60 0%,#E5211A 55%,#9E0C08 100%); border:3px solid #fff;display:flex;align-items:center;justify-content:center; color:#fff;font-size:14px;font-weight:900;line-height:1.16;letter-spacing:-.6px; text-shadow:0 2px 3px rgba(0,0,0,.4); box-shadow:0 7px 0 #7E0906,0 10px 16px rgba(0,0,0,.35); animation:bombPulse 1.05s ease-in-out infinite} @keyframes bombPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .bomb-press:active .cap{transform:translateY(6px);box-shadow:0 1px 0 #7E0906,0 3px 8px rgba(0,0,0,.35)} .bomb-press:disabled .cap{filter:grayscale(.6);animation:none} /* 결과 — 밥값 내는 사람 */ .bomb-pay{position:relative;margin:8px 0 10px;padding:14px 12px 10px;border-radius:20px; overflow:hidden;background:linear-gradient(165deg,#FFE9C9,#FFB48A)} .bomb-pay-in{position:relative;display:flex;align-items:flex-end;justify-content:center; min-height:158px} .bomb-pay .mpchar{--mpchar-h:158px;height:158px} .bomb-pay .coin{position:absolute;bottom:78px;left:50%;font-size:26px;opacity:0; animation:bombCoin 1.9s ease-in infinite} @keyframes bombCoin{0%{opacity:0;transform:translate(-50%,0) scale(.6)} 25%{opacity:1}100%{opacity:0;transform:translate(-50%,-64px) scale(1.15) rotate(28deg)}} .bomb-pay .coin:nth-of-type(2){animation-delay:.6s;margin-left:26px} .bomb-pay .coin:nth-of-type(3){animation-delay:1.2s;margin-left:-26px} .bomb-pay-cap{position:relative;text-align:center;margin-top:6px} .bomb-pay-cap .em{font-size:30px;line-height:1} .bomb-pay-cap .who{margin-top:4px;font-size:20px;font-weight:900;color:#5A2E0B;letter-spacing:-.5px} .bomb-pay-cap .sub{margin-top:4px;font-size:12px;font-weight:700;color:#96541F;line-height:1.5} /* ══════════════════════════════════════════════════════════════════════ 게임 화면 손질 [2026-08-19 추가 — 쿠니스 요청] ────────────────────────────────────────────────────────────────────── [왜 맨 뒤에 모아 두는가] 위쪽에 흩어진 규칙을 하나씩 고치면 어디를 바꿨는지 추적이 안 되고, 선택자 점수 충돌도 나기 쉽다. 같은 점수면 뒤에 온 것이 이기므로 이 블록만 보면 이번에 무엇을 바꿨는지 한눈에 들어온다. ══════════════════════════════════════════════════════════════════════ */ /* ── ① 게임 상단 패널 — 흰색 → 맛핀 살구색 ─────────────────────────── */ .gm-top{ background:linear-gradient(180deg,#FFF1DE 0%,#FFE4C8 58%,rgba(255,222,196,.94) 84%, rgba(255,222,196,0) 100%)} .gm-hd .ti{color:#5A2E0B} .gm-guide{background:rgba(255,255,255,.72);border-color:rgba(200,140,90,.28)} .gm-guide b{color:#5A2E0B} .gm-guide em{color:#96541F} .gm-steps .s{color:#B08A62} .gm-hd .x{background:rgba(255,255,255,.8);color:#8A4A18} /* ── ② 후보 카드 — 나무 도마 위 요리 느낌 ───────────────────────────── 카테고리가 있으면 두 줄(왼쪽 예시), 없으면 이름만(오른쪽 예시)로 자연히 갈린다. 따로 만들 필요 없이 .ct 가 있고 없고로 결정된다. */ .gm-cand{ background:linear-gradient(180deg,#FFF6E7 0%,#FFE7CB 100%); border:2px solid #EFCBA4;border-radius:17px;padding:12px 9px 10px; box-shadow:0 3px 9px rgba(150,84,31,.16),inset 0 1px 0 rgba(255,255,255,.75)} .gm-cand .ic{font-size:30px;filter:drop-shadow(0 3px 4px rgba(120,70,25,.25))} .gm-cand .nm{color:#4A2A0C;font-size:12.5px;font-weight:900;letter-spacing:-.3px} .gm-cand .ct{color:#A97C4E;font-size:10px;font-weight:700} .gm-cand.on{border-color:var(--red); background:linear-gradient(180deg,#FFF0E0,#FFD9C0); box-shadow:0 6px 16px rgba(208,2,27,.22),0 0 0 3px rgba(208,2,27,.12)} .gm-cands .gm-cand{min-width:104px;max-width:136px} /* ── ③ 후보 슬라이드 — 카드가 캐릭터 '뒤로' 지나간다 ───────────────── 예전에는 캐릭터 자리를 왼쪽에 비워 두어(padding-left) 카드가 그 앞에서 멈췄다. 요청대로 여백을 없애고, 카드가 캐릭터 뒤를 지나가며 이름이 살짝 가리게 한다. 캐릭터의 발은 아래 확정 버튼 선에 닿도록 내려 세운다. */ .gm-carou{padding-left:0;min-height:112px;margin:8px 0 0} .gm-carou>.gm-cands,.gm-carou>.gm-vs{padding:2px 2px 4px} .gm-carou>.gm-cands{padding-left:34px} /* 첫 카드가 통째로 가려지지 않을 만큼만 */ .gm-carou>.mpchar{left:-4px;bottom:0;width:62px;height:110px;z-index:6} .gm-carou-nav{color:#A97C4E} .gm-arw{border-color:#EFCBA4;color:#8A4A18} /* 월드컵 1:1 대결 — 캐릭터는 왼쪽 아래, 두 가게가 VS 로 마주 본다 */ /* 월드컵 1:1 — 캐릭터를 왼쪽 아래에 세우고, 그 옆으로 두 가게가 마주 본다. 두 카드가 폭을 꽉 채우므로 캐릭터 자리를 확실히 비워 줘야 겹치지 않는다. */ .gm-carou.vs-two{padding-left:0;min-height:120px} .gm-carou.vs-two>.gm-vs{padding-left:54px;gap:6px} .gm-carou.vs-two>.mpchar{left:0;width:50px;height:94px} .gm-carou.vs-two .gm-vs .vs{width:30px;height:30px;font-size:10.5px} /* ── ④ 결과 무대 — 이름표를 마커 아래로, 위아래를 좁혀 버튼까지 한눈에 ── */ .gm-stage{padding:10px 12px 8px;margin:8px 0 10px} .gm-stage-in{min-height:150px} .gm-char{height:150px;width:88px} /* 이름표는 자리를 차지하지 않게 흘려 둔다 — 그래야 마커(아이콘)가 접시에서 밀려 올라가지 않는다. */ .gm-dish{flex-direction:column;gap:0} .gm-dish .nm{position:absolute;top:calc(100% + 5px);left:50%;translate:-50% 0} .gm-stage-cap{margin-top:22px} /* 흘려 둔 이름표가 들어갈 자리 */ .gm-stage-cap .nm{font-size:17px;margin-top:3px} .gm-stage-cap .more{margin-top:6px} .gm-final-btns{margin-top:6px} /* ══ 결과·밥값 손질 [2026-08-19 추가 — 쿠니스 요청 2차] ══ */ /* ── 결과 무대 — 세 버튼이 한 화면에 다 들어오게 더 좁힌다 ──────────── '눌러서 맛집 정보 보기'는 아래 '상세 보기' 버튼과 하는 일이 같아 뺐다. */ .gm-stage{padding:8px 12px 6px;margin:6px 0 8px} .gm-stage-in{min-height:132px} .gm-char{height:132px;width:78px} .gm-stage-cap{margin-top:20px} .gm-stage-cap .lb{font-size:10.5px;padding:2px 10px} .gm-stage-cap .nm{font-size:16px;margin-top:2px} .gm-stage-cap .ct{font-size:11px} .gm-final-btns{margin-top:4px} .gm-final-btns .gm-go{padding:10px 6px;font-size:12.5px} /* 확정된 맛집 표시 — 후보 카드의 아이콘과 같은 모양(둥근 살구빛)으로 통일 */ .gm-dish .ic{width:46px;height:46px;font-size:24px; background:linear-gradient(180deg,#FFF6E7,#FFE2C2); border:2.5px solid #fff; box-shadow:0 4px 12px rgba(150,84,31,.3),0 0 0 2px rgba(239,203,164,.9)} .gm-dish .nm{top:calc(100% + 4px);font-size:10.5px;padding:2px 8px} /* ── 니가 내라 밥값 — 부분 화면 → 전체 화면 ────────────────────────── .gm-top 은 원래 지도 위에 얹히는 '띠' 라서 높이가 화면의 38%로 묶여 있다. 그래서 폭탄 화면이 반만 보이고 잘렸다. 밥값은 지도를 볼 일이 없으므로 이 게임일 때만 띠를 화면 전체로 늘린다. [:has()] 안에 .bomb-stage.full 이 있는 .gm-top 에만 걸린다. 못 알아듣는 옛 브라우저에서는 예전처럼 부분 화면으로 보일 뿐 깨지지는 않는다. */ .gm-top:has(.bomb-stage.full){ max-height:none;height:100%;bottom:0;overflow-y:auto; background:linear-gradient(180deg,#FFF1DE 0%,#FFE4C8 100%); display:flex;flex-direction:column} .gm-top:has(.bomb-stage.full) .bomb-stage.full{flex:1 1 auto;display:flex; flex-direction:column;justify-content:center;min-height:0} .bomb-stage.full{min-height:62vh} /* 캐릭터와 폭탄을 크게 */ .bomb-hero{min-height:210px} .bomb-hero .mpchar{height:210px;width:118px} .bomb-hero .bomb{position:absolute;left:50%;bottom:22px;translate:-34% 0; width:118px;height:118px;font-size:0; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); transform-origin:50% 62%;animation:bombSway 1.5s ease-in-out infinite} @keyframes bombSway{0%,100%{rotate:-4deg}50%{rotate:4deg}} .bomb-hero .fuse{position:absolute;left:50%;bottom:118px;translate:24px 0;font-size:30px; line-height:1;animation:bombFuse .42s ease-in-out infinite;pointer-events:none} .bomb-hero .fuse.f2{bottom:106px;translate:14px 0;font-size:26px;animation-delay:.21s} .bomb-ti{font-size:25px} .bomb-led{width:150px;padding:9px 0} .bomb-led #bomb-t{font-size:42px} .bomb-bar{height:11px;margin:10px 10px 0} /* 버튼 문구 두 줄 */ .bomb-press{width:186px;height:88px} .bomb-press .base{height:34px} .bomb-press .cap{height:66px;flex-direction:column;gap:1px;border-radius:50%} .bomb-press .cap b{font-size:20px;letter-spacing:-.5px} .bomb-press .cap i{font-style:normal;font-size:11px;font-weight:800;opacity:.92} /* 전체화면일 때는 경고 테이프를 제목·버튼과 겹치지 않게 내려 붙인다 */ .bomb-stage.full .bomb-tape.t1{top:112px} .bomb-stage.full .bomb-tape.t2{bottom:118px} .bomb-stage.full .bomb-ti{margin-top:4px} /* ══ 맛집투표 색 맞추기 [2026-08-19 추가 — 쿠니스 요청] ══ 맛집투표만 흰 바탕이라 다른 게임과 따로 노는 느낌이었다. [주의] 이 규칙들은 index.html 안쪽