/* ============================================================ 포인트 랭킹 페이지 + 공용 아바타(AvatarRenderer) 스타일 ============================================================ */ /* ------------------------------------------------------------ 기본 회원 아바타(시안 1) 안전망 — 이 파일이 components.css 뒤에 로드되므로 어느 자리에 fallback 으로 들어가도 항상 같은 품질로 보인다. 투명 배경 유지 / 원본 비율 유지(찌그러짐 금지) / 픽셀 선명도 유지 ------------------------------------------------------------ */ img[src*="default-duck"] { /* v2·v3·v4 어느 판이든 걸리게 (판 번호에 안 매이도록) */ background: transparent; object-fit: contain; image-rendering: auto; /* 아바타와 같은 기준 — 줄여 그릴 때 부드럽게 */ } /* ---------- 공용 아바타 박스 (레이어 합성) ---------- */ .gg-avatar-box { position: relative; display: inline-block; flex: none; vertical-align: middle; } .gg-avatar-box .gg-avatar-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; /* 원본 비율 유지 — 찌그러짐 없음 */ background: transparent; /* 축소 품질 — 원본이 300px 대인데 화면에서는 36~118px 로 줄여 쓴다. pixelated(가장 가까운 점만 골라 쓰기)로 줄이면 선 굵기가 들쭉날쭉해지고 얼굴·귀 같은 잔 그림이 부서져 보인다. 36 / 44 / 68 / 92 / 118px 전 구간을 실제로 비교해 보니 부드러운 축소(auto)가 훨씬 깔끔해서 그쪽으로 바꿨다. (크게 그리는 자리 — 홈 히어로·상점 미리보기 — 는 지금처럼 픽셀 느낌을 유지한다) */ image-rendering: auto; pointer-events: none; } /* ---------- 파산 아바타 (보유 포인트 3,000,000 DC 이하) ---------- 원래 아바타 레이어는 지우지 않고 그대로 둔 채 위에 덮기만 한다. 포인트가 다시 오르면 is-bankrupt 클래스만 떼면 저장된 아바타가 그대로 돌아온다. */ .gg-avatar-box .gg-avatar-bankrupt { display: none; } .gg-avatar-box.is-bankrupt .gg-avatar-layer { display: none; } .gg-avatar-box.is-bankrupt .gg-avatar-bankrupt { display: block; } /* ---------- 상점에서 산 장착 아바타 ---------- 파산과 마찬가지로 기존 레이어는 그대로 두고 위에 덮는다. 장착을 풀면 is-equipped 클래스만 빠지고 원래 아바타가 그대로 돌아온다. (파산이 더 우선이라 is-bankrupt 가 켜지면 장착 아바타도 함께 가려진다) */ .gg-avatar-box.is-equipped .gg-avatar-layer { display: none; } .gg-avatar-box.is-equipped .gg-avatar-equipped { display: block; } .gg-avatar-box.is-equipped.is-bankrupt .gg-avatar-equipped { display: none; } .gg-avatar-box.is-equipped.is-bankrupt .gg-avatar-bankrupt { display: block; } /* ---------- 움직이는 아바타 ---------- 정지 그림 위에 한 겹 더 덮는다. 정지 그림은 지우지 않고 그대로 두므로 움직이는 그림을 못 읽거나 「동작 줄이기」를 켜면 그대로 정지 그림이 보인다. (파산이 언제나 우선이다 — 파산이면 움직이는 겹도 함께 가려진다) */ .gg-avatar-box .gg-avatar-anim { display: none; } .gg-avatar-box.is-anim .gg-avatar-anim { display: block; } /* 움직이는 겹이 보이는 동안에는 밑의 정지 그림을 가린다. (정지 그림에 박힌 하트와 움직이는 하트가 겹쳐 두 벌로 보이던 문제 — 2026-08-10) webp·gif 를 못 읽으면 움직이는 겹 스스로 정지 그림으로 바뀌므로 (ANIM_FB) 이 규칙 때문에 아바타가 사라지는 경우는 없다. */ .gg-avatar-box.is-anim .gg-avatar-equipped { display: none; } .gg-avatar-box.is-anim.is-bankrupt .gg-avatar-anim { display: none; } /* 움직임을 끈 이용자에게만 정지 그림을 보여준다. ⚠ 기기의 prefers-reduced-motion 을 직접 보지 않는다. 윈도우의 「애니메이션 효과 끄기」 하나 때문에 돈 주고 산 아바타가 말없이 멈춰 버려서, 사이트 설정(상점의 「움직임 끄기」)으로만 정한다. 그 설정은 로 나타난다 (components/item-image.js). */ html[data-motion="off"] .gg-avatar-box.is-anim .gg-avatar-anim { display: none; } html[data-motion="off"] .gg-avatar-box.is-anim.is-equipped .gg-avatar-equipped { display: block; } /* ---------- 아바타 효과 (머리/배경 — 별매 장식) ---------- 원본 파일은 그대로 두고 "표시 크기"만 아바타보다 크게 그린다 (2026-08-12). 중앙 기준 확대라 데스크톱·모바일·오리 레이스 어디서든 중심이 어긋나지 않는다. DOM 순서가 곧 앞뒤다: 배경 효과(맨 앞에 삽입) → 본체 레이어들 → 머리 효과(맨 뒤에 삽입). ⚠ gg-avatar-layer 클래스를 일부러 쓰지 않는다 — 파산(is-bankrupt)이 본체 레이어를 가려도 효과는 그대로 유지돼야 하기 때문. */ .gg-avatar-box { --fx-bg-scale: 1.55; /* 배경 효과: 아바타의 155% */ --fx-head-scale: 1.35; /* 머리 효과: 아바타의 135% */ /* 배경 효과 전용 기울기 — 평소엔 0. 「천사 토심이 + 황금 날개」 조합에서만 값이 바뀐다. (머리 효과는 이 변수를 쓰지 않으므로 절대 기울지 않는다) */ --gg-bg-effect-rotate: 0deg; --gg-bg-effect-tilt-scale: 1; } .gg-avatar-box .gg-avatar-fx { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; object-fit: contain; background: transparent; image-rendering: auto; pointer-events: none; /* (2026-08-24) 모바일 전역 규칙(img{max-width:100%})이 155% 날개 등의 «가로만» 눌러 PC와 배율이 달라졌다 — 효과 겹은 항상 지정된 폭을 쓴다. */ max-width: none; } .gg-avatar-box .gg-avatar-fx-bg { width: calc(100% * var(--fx-bg-scale)); height: calc(100% * var(--fx-bg-scale)); /* 중앙 정렬(translate)을 유지한 채 회전·축소를 «합성» 한다 — 순서 중요. transform-origin 52% 는 날개 뿌리(중앙 살짝 아래)가 축이 되게 한다. */ transform: translate(-50%, -50%) rotate(var(--gg-bg-effect-rotate)) scale(var(--gg-bg-effect-tilt-scale)); transform-origin: 50% 52%; } /* 「천사 토심이 × 고고덕」 + 「황금 날개 효과」 — 아바타 기울기에 맞춰 날개만 -8° */ /* 0.95 축소: 회전하면 모서리가 원형 마스크 밖으로 살짝 나가므로 그만큼만 줄인다 */ .gg-avatar-box.is-angel-golden-wings { --gg-bg-effect-rotate: -8deg; --gg-bg-effect-tilt-scale: 0.95; } .gg-avatar-box .gg-avatar-fx-head { width: calc(100% * var(--fx-head-scale)); height: calc(100% * var(--fx-head-scale)); } /* ---------- 원형 아바타 마스킹 (2026-08-12) ---------- 랭킹·게시판·헤더 칩·회원정보 팝업처럼 "원형"으로 보여주는 자리에서는 효과가 원 테두리 밖으로 절대 나가지 않는다. · 원(=아바타 박스) 기준 95% 크기 — 원 안에서 최대한 크게 + 2~3px 안전 여백 · overflow: hidden 이 마스크 역할 (테두리는 요소 자신에 그려져 항상 위에 보인다) */ .gg-avatar-box.gg-avatar-onblue, .gg-profile-chip .gg-avatar-box, .bd-run-b .gg-avatar-box, .gg-avatar-box.pm-avatar { border-radius: 50%; overflow: hidden; --fx-bg-scale: 0.95; --fx-head-scale: 0.95; } /* 홈 내 정보의 88px 원 — 아바타(68px)보다는 크게, 원 안쪽 2~3px 여백 유지 */ /* (2026-08-24) 아바타 박스 68 → 74px 확대에 맞춰 배율만 내렸다 — 효과의 실제 크기(px)는 이전과 같다 (74×1.14≈84px · 74×1.10≈81px). */ .gg-home-me-avatar .gg-avatar-box { --fx-bg-scale: 1.14; --fx-head-scale: 1.10; } /* 내 정보 상세(#/profile)의 큰 오리 — 원형 테두리가 없는 자리. 옆의 닉네임·포인트 글을 침범하지 않는 선에서만 키운다 */ .gg-avatar-box.pf-duck { --fx-bg-scale: 1.25; --fx-head-scale: 1.15; } /* 정지 예비 겹은 평소엔 숨긴다 — 「움직임 끄기」면 반대로 뒤집는다 */ .gg-avatar-box .gg-avatar-fx-still { display: none; } html[data-motion="off"] .gg-avatar-box .gg-avatar-fx-anim { display: none; } html[data-motion="off"] .gg-avatar-box .gg-avatar-fx-still { display: block; } /* ---------- 파산(보유 3,000,000 DC 이하) — 효과도 전부 숨긴다 ---------- 소유권·장착 정보는 그대로라, 포인트가 3,000,001 DC 이상이 되면 is-bankrupt 클래스만 빠지면서 아바타·배경·머리 효과가 그대로 되살아난다. */ .gg-avatar-box.is-bankrupt .gg-avatar-fx { display: none !important; } /* ---------- 히어로 ---------- */ .gg-rk-hero { margin-bottom: 16px; } .gg-rk-hero-title { font-size: 26px; font-weight: 900; color: #16305e; letter-spacing: -0.5px; } .gg-rk-hero-sub { font-size: 15px; font-weight: 900; color: var(--tx); margin-top: 8px; } .gg-rk-hero-desc { font-size: 12.5px; color: var(--tx-sub); font-weight: 700; margin-top: 4px; } .gg-rk-tabs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .gg-rk-tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; background: #fff; color: var(--tx-sub); border: 1px solid var(--card-border); transition: filter .2s ease, transform .2s ease; } .gg-rk-tab:hover { filter: brightness(1.03); transform: translateY(-1px); } .gg-rk-tab.is-on { background: linear-gradient(180deg, #3b86fa 0%, #1d6bfa 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(29, 107, 250, .35); } .gg-rk-tab-soon { font-size: 10px; font-weight: 900; color: #f08c00; background: rgba(240, 140, 0, .1); border: 1px solid rgba(240, 140, 0, .3); border-radius: 999px; padding: 1px 7px; margin-left: 2px; } /* ---------- 본문 그리드: 왼쪽(TOP3+표) / 오른쪽(현황+내순위) ---------- */ .gg-rk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 16px; align-items: start; } .gg-rk-left, .gg-rk-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ---------- TOP3 시상대 ---------- */ .gg-rk-top3-card { padding: 28px 18px 22px; } .gg-rk-top3 { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; justify-items: center; gap: 8px; } .gg-rk-podium { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; width: 100%; } .gg-rk-medal { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 900; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .4); } .gg-rk-medal-lg { width: 34px; height: 34px; font-size: 16px; margin-bottom: 2px; } .gg-rk-gold { background: radial-gradient(circle at 40% 30%, #ffe27a 0%, #f5b301 65%, #d99400 100%); } .gg-rk-silver { background: radial-gradient(circle at 40% 30%, #e9eef5 0%, #b9c4d4 65%, #93a2b8 100%); } .gg-rk-bronze { background: radial-gradient(circle at 40% 30%, #e8b98a 0%, #c7854e 65%, #a86a38 100%); } .gg-rk-num { font-weight: 900; color: var(--tx-sub); font-size: 13px; } .gg-rk-top-avatar { margin-top: 4px; } .gg-rk-podium.is-first .gg-rk-top-avatar { filter: drop-shadow(0 0 14px rgba(255, 211, 77, .55)); } .gg-rk-top-empty { width: 104px; height: 104px; border-radius: 50%; background: #f1f4f8; color: #c2cddd; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; } .gg-rk-top-name { font-size: 14px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gg-rk-podium.is-first .gg-rk-top-name { font-size: 16px; } .gg-rk-top-dc { font-size: 13px; font-weight: 900; color: var(--tx-sub); } .gg-rk-top-dc.is-gold { color: #d99400; font-size: 15px; } .gg-rk-dim { color: #c2cddd; } /* 시상대 단 (금 > 은 > 동 높이) */ .gg-rk-stand { width: 86%; border-radius: 10px 10px 4px 4px; margin-top: 6px; } .gg-rk-stand-1 { height: 46px; background: linear-gradient(180deg, #ffd94d 0%, #f0b400 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 10px rgba(240,180,0,.35); } .gg-rk-stand-2 { height: 32px; background: linear-gradient(180deg, #dde5ef 0%, #b6c2d3 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 10px rgba(150,165,190,.3); } .gg-rk-stand-3 { height: 24px; background: linear-gradient(180deg, #e0b184 0%, #bd8352 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 10px rgba(180,120,70,.3); } /* ---------- TOP 100 표 ---------- */ .gg-rk-updated { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); } .gg-rk-refresh { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--card-border); background: #fff; color: var(--blue); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease, filter .2s ease; } .gg-rk-refresh:hover { filter: brightness(1.05); transform: rotate(90deg); } .gg-rk-tr { grid-template-columns: 64px minmax(0, 1fr) 150px; } .gg-rk-tr .gg-rk-cell-rank { display: flex; justify-content: center; } .gg-rk-cell-user { display: flex; align-items: center; gap: 11px; min-width: 0; } /* 표 안의 아바타 — 작아서 잘 안 보이던 것을 키웠다 (줄 높이는 padding 으로 맞춘다) */ .gg-rk-tr { padding-top: 8px; padding-bottom: 8px; } /* ---------- 아바타 뒤 파란 원 ---------- 홈 "내 정보"와 같은 배경을 랭킹에도 넣어, 흰 오리가 흰 배경에 묻히지 않게 한다. 레이어를 원 안쪽으로 조금 들여서 오리가 테두리에 닿지 않게 만든다. (배경만 얹는 것이라 파산·장착 아바타 판정에는 아무 영향이 없다) */ .gg-avatar-onblue { box-sizing: border-box; /* 테두리 때문에 칸이 넓어지지 않게 */ border-radius: 50%; /* 흰 오리가 묻히지 않게 파란 기운을 조금 더 준다 (2026-08-24 — «아바타가 잘 안 보여» 피드백) */ background: radial-gradient(circle at 50% 38%, #ffffff 0%, #dcebfc 100%); border: 1px solid #d9e8fa; } /* img 는 "대체 요소"라 width:auto 면 원본 크기(320px)로 펼쳐진다. 그래서 inset 과 크기를 함께 지정해야 원 안쪽으로 정확히 들어간다. */ /* (2026-08-24) 76% → 92%: 옛 기본 오리(내용이 프레임의 63%)에 맞춰 잡았던 값이라 새 2등신 오리(내용 83~90%)가 원 안에서 지나치게 작게 보였다. 새 그림은 프레임 자체 여백이 있어 92% 로 키워도 발끝이 원 테두리에 닿지 않는다 (실측). */ .gg-avatar-onblue .gg-avatar-layer { inset: 4%; width: 92%; height: 92%; } .gg-rk-cell-user b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gg-rk-me-tag { font-style: normal; flex: none; font-size: 10px; font-weight: 900; color: #fff; background: var(--blue); border-radius: 999px; padding: 1px 7px; } .gg-rk-cell-dc { text-align: right; font-weight: 900; } .gg-rk-tr.is-me { background: #eef5ff; } /* 페이지네이션 */ .gg-rk-pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 4px; flex-wrap: wrap; } .gg-rk-pg { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 10px; cursor: pointer; border: 1px solid var(--card-border); background: #fff; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--tx-sub); transition: filter .2s ease; } .gg-rk-pg:hover:not(:disabled) { filter: brightness(1.04); } .gg-rk-pg:disabled { opacity: .4; cursor: default; } .gg-rk-pg.is-on { background: linear-gradient(180deg, #3b86fa 0%, #1d6bfa 100%); color: #fff; border-color: transparent; } .gg-rk-pg-dots { color: var(--tx-sub); font-weight: 800; } /* ---------- 랭킹 현황 ---------- */ .gg-rk-stat-rows { display: flex; flex-direction: column; } .gg-rk-stat { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: 12.5px; border-bottom: 1px solid #edf3fa; } .gg-rk-stat:last-child { border-bottom: none; } .gg-rk-stat span { color: var(--tx-sub); font-weight: 700; } .gg-rk-stat b { font-weight: 900; } /* ---------- 내 순위 카드 ---------- */ .gg-rk-me-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 4px; } .gg-rk-me-avatar { margin-bottom: 6px; } .gg-rk-top-avatar { border-radius: 50%; } .gg-rk-me-rank { font-size: 30px; font-weight: 900; color: #16305e; } .gg-rk-me-rank small { font-size: 15px; font-weight: 900; color: var(--tx-sub); margin-left: 2px; } .gg-rk-me-dc-label { font-size: 11.5px; font-weight: 800; color: var(--tx-sub); margin-top: 8px; } .gg-rk-me-dc { font-size: 19px; font-weight: 900; color: var(--blue); } .gg-rk-goal { margin-top: 12px; width: 100%; background: #fff7ec; border: 1px solid #ffe2bb; border-radius: 12px; padding: 10px 12px; text-align: center; font-size: 12px; font-weight: 800; color: var(--tx-sub); display: flex; flex-direction: column; gap: 2px; } .gg-rk-goal b { color: #e8760d; font-size: 14px; font-weight: 900; } .gg-rk-goal b.is-gold { color: #d99400; } /* 운영자 — 랭킹 제외 표시 */ .gg-rk-me-out { font-size: 20px; font-weight: 900; color: #7f8a9e; } .gg-rk-me-note { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: #93a1b8; text-align: center; } /* ---------- 랭킹 목록 — 칭호를 닉네임 «오른쪽» 한 줄로 (2026-08-14) ---------- 목록(TOP 100 표) 전용이다. 1·2·3위 시상대·내 순위·다른 화면은 예전(닉네임 위) 그대로. 칭호 높이(≤25px)가 줄 높이(아바타 44px)보다 작아 행 높이는 늘어나지 않는다. */ .gg-rk-cell-user .gg-ident.is-rk-inline { flex-direction: row; align-items: center; /* 닉네임과 칭호의 세로 중앙선을 맞춘다 */ gap: 6px; white-space: nowrap; } .gg-rk-cell-user .gg-ident.is-rk-inline .gg-title { flex: 0 0 auto; } /* 자리가 모자라면 칭호는 그대로 두고 닉네임이 말줄임된다 */ .gg-rk-cell-user .gg-ident.is-rk-inline .gg-ident-name { min-width: 0; overflow: hidden; } /* ============================================================ 랭킹 화면 리뉴얼 (2026-08-15 · 시안 기반) · 전부 .gg-rk-page 아래로만 적용된다 — 다른 화면에 영향 없음 · 아바타·칭호는 공용 컴포넌트가 그린다 (여기서는 배치·테두리만) · 예전 rk 클래스(gg-rk-hero 등)는 markup 에서 빠졌다 — CSS 는 남아 있어도 무해 ============================================================ */ /* 폭은 사이트 «공통 컨테이너» 규격 그대로 (2026-08-15 수정). 시안 기준(1200px)으로 따로 잡았더니 헤더(1060px)보다 좌우로 튀어나왔다 — .gg-page-single 이 정하는 1060px 를 그대로 물려받아 헤더와 좌우가 딱 맞는다. */ .gg-rk-page { box-sizing: border-box; } .gg-rk-page > * + * { margin-top: 16px; } /* ---------- 헤더 카드 ---------- */ .gg-rk-page .rk2-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rk2-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .rk2-hero-ico { flex: none; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(180deg, #ffe9a8, #ffd94e); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 0 rgba(150, 100, 0, .18); } .rk2-hero-ico img { width: 32px; height: 32px; object-fit: contain; } .rk2-hero-title { font-size: 24px; font-weight: 900; color: #16305e; letter-spacing: .5px; } .rk2-hero-desc { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--tx-sub); } .rk2-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .rk2-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 12px; cursor: pointer; border: 1px solid #dbe7f6; background: #f4f8fd; font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--tx-sub); } .rk2-tab img { width: 18px; height: 18px; object-fit: contain; } .rk2-tab.is-on { background: #1d6bfa; border-color: #1d6bfa; color: #fff; box-shadow: 0 6px 14px rgba(29, 107, 250, .3); } /* ---------- 누적 랭킹 분류 ---------- */ .rk2-record-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; } .rk2-season-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rk2-record-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 7px; row-gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: #f4f8fd; color: var(--tx-sub); font-family: inherit; text-align: left; cursor: pointer; } .rk2-record-tab > span { grid-row: 1 / 3; font-size: 17px; } .rk2-record-tab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 900; } .rk2-record-tab small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #8a99ae; } .rk2-record-tab.is-on { border-color: #72acef; background: #eaf4ff; color: #1764cf; box-shadow: inset 0 0 0 1px rgba(29,107,250,.08); } .rk2-record-note { font-size: 11px; font-weight: 700; color: var(--tx-sub); } /* ---------- 명예의 전당 ---------- */ .rk2-hall-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; } .rk2-hall-note { font-size: 12px; font-weight: 700; color: var(--tx-sub); } .rk2-podium { display: flex; align-items: flex-end; justify-content: center; gap: 26px; padding: 8px 6px 0; } .rk2-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 340px; } .rk2-slot-no { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: #fff; box-shadow: 0 3px 8px rgba(20, 45, 90, .25); margin-bottom: 2px; } .rk2-slot-1 .rk2-slot-no { background: linear-gradient(180deg, #ffd94e, #f5b800); } .rk2-slot-2 .rk2-slot-no { background: linear-gradient(180deg, #cfd8e3, #9fb0c3); } .rk2-slot-3 .rk2-slot-no { background: linear-gradient(180deg, #d9a06b, #b97b45); } /* 금·은·동 원형 테두리 — 아바타(공용 컴포넌트)를 감싸기만 한다 */ .rk2-ring { position: relative; flex: none; display: inline-flex; border-radius: 50%; padding: 5px; background: #fff; } .rk2-ring-1 { border: 4px solid #f5b800; } .rk2-ring-2 { border: 4px solid #b7c4d4; } .rk2-ring-3 { border: 4px solid #c08a57; } .rk2-ring-me { border: 4px solid #cfe3ff; } /* 1위 금색 후광 — 테두리 «바깥» 에만 깐다. ⚠ 아바타 뒤 z-index 아래 겹이라 장착 배경 효과를 가리지 않는다 */ .rk2-ring-1::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 214, 90, .45) 0%, rgba(255, 214, 90, 0) 68%); } .rk2-name { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; max-width: 100%; white-space: nowrap; cursor: pointer; } .rk2-name b { font-size: 14px; font-weight: 900; color: #16305e; overflow: hidden; text-overflow: ellipsis; /* 칭호 그림과 «눈에 보이는 글자» 의 세로 중앙을 정확히 맞춘다 (2026-08-15). 기본 줄 높이는 글자 위아래 여백이 비대칭이라 닉네임이 살짝 어긋나 보였다. line-height:1 이면 줄 상자=글자 상자가 되어 flex 중앙 정렬이 잉크 기준이 된다 (실측 0px). */ line-height: 1; position: relative; top: 0; } .rk2-name.is-big b { font-size: 16px; } .rk2-name.is-dim { color: var(--tx-sub); cursor: default; } .rk2-name .gg-title { flex: 0 0 auto; } .rk2-slot-val { font-size: 15px; font-weight: 900; color: #2b53a8; } .rk2-slot-val.is-gold { color: #d99a00; font-size: 16px; } .rk2-slot-val.is-dim { color: var(--tx-sub); } /* 단상 — 문구가 회원 정보(위쪽)를 가리지 않게 마지막 줄에 따로 선다 */ .rk2-stand { width: 100%; margin-top: 10px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; letter-spacing: 1.5px; } .rk2-stand-1 { height: 64px; font-size: 17px; background: linear-gradient(180deg, #ffd254, #f5a623); box-shadow: 0 8px 18px rgba(245, 166, 35, .35); } .rk2-stand-2 { height: 46px; font-size: 14px; background: linear-gradient(180deg, #ccd6e2, #a8b8ca); } .rk2-stand-3 { height: 42px; font-size: 14px; background: linear-gradient(180deg, #d8a06b, #bd7f49); } .rk2-empty { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef4fb; color: #b9c6d8; font-size: 34px; font-weight: 900; } /* ---------- TOP 100 + 우측 칸 ---------- */ .rk2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; } .rk2-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rk2-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .rk2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fae63; display: inline-block; margin-right: 6px; } /* 프로필형 행 — 순위 | 아바타·회원 정보 | 금액 */ .rk2-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 80px; padding: 10px 12px; border-bottom: 1px solid #edf3fa; } .rk2-row:last-of-type { border-bottom: none; } .rk2-row.is-me { background: #f2f8ff; border-radius: 12px; } .rk2-row-no { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5fb; color: #5f6f92; font-size: 14px; font-weight: 900; } .rk2-row.is-me .rk2-row-no { background: #dcebff; color: #1d6bfa; } .rk2-row-user { display: flex; align-items: center; gap: 12px; min-width: 0; } .rk2-row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rk2-row-info .rk2-name { justify-content: flex-start; } .rk2-row-sub { font-size: 11.5px; font-weight: 700; color: #1d6bfa; } .rk2-row-val { font-size: 14.5px; font-weight: 900; color: #16305e; white-space: nowrap; text-align: right; } .rk2-row-none { padding: 26px 8px; text-align: center; font-size: 13px; font-weight: 700; color: var(--tx-sub); } /* ---------- 우측: 랭킹 현황 · 내 순위 ---------- */ .rk2-stats { display: flex; flex-direction: column; } .rk2-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 2px; border-bottom: 1px solid #edf3fa; font-size: 13px; font-weight: 700; color: var(--tx-sub); } .rk2-stat:last-child { border-bottom: none; } .rk2-stat b { font-weight: 900; color: #16305e; white-space: nowrap; } .rk2-me-body { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 4px; } .rk2-me-rank { font-size: 30px; font-weight: 900; color: #16305e; line-height: 1.1; } .rk2-me-rank small { font-size: 18px; } .rk2-me-out { font-size: 16px; font-weight: 900; color: var(--tx-sub); } .rk2-me-val { font-size: 15px; font-weight: 900; color: #1d6bfa; } .rk2-me-note { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); text-align: center; line-height: 1.6; } /* ---------- 모바일 (시안: 1위 첫 줄 · 2·3위 둘째 줄 · 우측 칸은 아래로) ---------- */ @media (max-width: 1023px) { .rk2-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .gg-rk-page .rk2-hero { flex-direction: column; align-items: stretch; } .rk2-tabs { justify-content: stretch; } .rk2-tab { flex: 1 1 0; justify-content: center; } .rk2-tab { padding: 10px 6px; font-size: 11.5px; gap: 4px; } .rk2-tab img { width: 16px; height: 16px; } .rk2-record-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px; } .rk2-record-tab { padding: 9px 8px; } /* 1위가 첫 줄 전체 · 2위와 3위가 둘째 줄 좌우 */ .rk2-podium { flex-wrap: wrap; gap: 14px; } .rk2-slot-1 { order: 1; flex: 1 1 100%; max-width: none; } .rk2-slot-2 { order: 2; flex: 1 1 40%; } .rk2-slot-3 { order: 3; flex: 1 1 40%; } .rk2-stand-1 { height: 52px; } /* 목록 — 금액은 회원 정보 «아래» (잘림·가로 스크롤 금지) */ .rk2-row { grid-template-columns: 34px minmax(0, 1fr); min-height: 0; padding: 10px 8px; } .rk2-row-no { width: 30px; height: 30px; font-size: 12.5px; } .rk2-row-val { grid-column: 2; text-align: left; font-size: 13.5px; padding-left: 62px; /* 아바타(50px) + 간격만큼 들여서 이름과 나란히 */ } .rk2-row-user { gap: 10px; } /* 칭호가 길면: ① 비율 유지 축소 → ② 간격 축소 → ③ 그 줄 안에서만 줄바꿈 */ .rk2-name { gap: 4px; flex-wrap: wrap; white-space: normal; row-gap: 2px; } .rk2-name .gg-title { max-width: min(100px, 46vw); width: auto; } .rk2-name b { white-space: nowrap; } .rk2-hero-title { font-size: 20px; } } /* ============================================================ 아바타 개편 v3 (2026-08-24) — 새 2등신 오리 + 의상 레이어 + 효과 기준점 ============================================================ */ /* 축소 품질 (2026-08-24 «아바타가 잘 안 보여» 2차 수정) 원본(649px)을 화면에서는 34~162px 로 «줄여» 그린다. pixelated 는 가장 가까운 한 점만 골라 쓰는 방식이라 줄일 때는 얇은 외곽선 픽셀이 듬성듬성 버려져 오리 윤곽이 끊기고 허옇게 떠 보였다 (실측 비교 확인). 부드러운 축소(auto)가 외곽선을 진하고 온전하게 남긴다 — 픽셀 느낌은 그림 자체의 큼직한 픽셀이 지킨다. (pixelated 는 원본보다 «크게» 그릴 때만 유효한 방식이라 현재 쓰는 자리가 없다) */ .gg-avatar-box .gg-avatar-base, .gg-avatar-box .gg-avatar-cloth, .gg-avatar-box .gg-avatar-equipped, .gg-avatar-box .gg-avatar-bankrupt { image-rendering: auto; } /* 의상 레이어 — 본체와 같은 정사각 좌표계에 그대로 겹친다 (좌표 재계산 없음) */ .gg-avatar-box .gg-avatar-cloth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* 겹 순서(아래→위): 배경 효과 0 → 등 뒤 무기 1 → 본체·의상 2 → 머리 효과·손 무기 3 */ .gg-avatar-box .gg-avatar-fx-bg { z-index: 0; } /* 손에 드는 무기는 본체 «앞». 등 뒤에 메는 무기(뇌전의 사신낫)만 아래 규칙에서 뒤로 내린다. (2026-08-26) 손 그립 패치 레이어는 정면 아바타 개편과 함께 없앴다. */ .gg-avatar-box .gg-avatar-cloth-weapon { z-index: 3; } .gg-avatar-box .gg-avatar-base, .gg-avatar-box .gg-avatar-equipped, .gg-avatar-box .gg-avatar-anim, .gg-avatar-box .gg-avatar-bankrupt, .gg-avatar-box .gg-avatar-cloth:not(.gg-avatar-cloth-weapon) { z-index: 2; } .gg-avatar-box .gg-avatar-fx-head { z-index: 5; } /* 낫(3)·손바닥(4) 보다 위 — 2026-08-27 */ /* 뇌전의 사신낫 (2026-08-27 손바닥 그립) — 몸 «앞» 으로 들고 왼손 손바닥을 통과시킨다. ⚠ 그림 파일 자체가 최종 좌표로 완성돼 있다 — 회전·이동·확대·축소·clip-path 를 «절대» 걸지 않는다 (걸면 GIF 20프레임이 통째로 어긋난다). ⚠ 낫 그림판은 974×974 이다 (오른쪽 방향 오리 649 의 150%). 낫날과 손잡이가 아바타 상자 밖으로 나가야 해서(사장님 승인) 이 레이어만 상자보다 사방 25% 크게 잡는다. inset:-25% + 150% 크기 = 974 판이 649 상자에 정확히 정렬된다. → width/height 100% 를 반드시 함께 덮어써야 한다 (기본 규칙이 100% 라서). z-index 3 = 오리 본체·망토(2) 보다 앞, 손바닥 조각(4) 보다 뒤. */ .gg-avatar-box .gg-avatar-cloth-weapon.is-lightning-reaper-scythe { z-index: 3; inset: -25%; width: 150%; height: 150%; /* ⚠ 이 두 줄을 지우지 말 것 (2026-08-27) — responsive.css 의 1199px 이하 규칙에 `img, svg, canvas, video { max-width: 100% }` 가 있어서 150% 로 잡은 이 레이어가 100% 로 «되눌린다». 그러면 낫이 작아지면서 손에서 떨어져 나간다 (실측: 상자 200px 에서 41px 어긋남 · 68px 에서 14px). 데스크톱만 멀쩡하고 모바일과 «PC 120% 이상 확대»(화면 폭이 1199px 밑으로 내려가 모바일 규칙이 켜짐)에서 깨졌던 원인이다. */ max-width: none; max-height: none; transform: none; transform-origin: 50% 50%; overflow: visible; clip-path: none; } /* (2026-08-27g) ⚠ 정렬 버그 수정 — 원형 자리에서 낫만 «본체보다 크게» 그려지던 문제. `.gg-avatar-onblue .gg-avatar-layer` 가 본체·망토·손조각을 inset:4% / 92% 로 줄여 그리는데, 위 낫 규칙(클래스 3개)이 그보다 우선순위가 높아 낫만 100% 기준의 150% 로 남아 있었다. → 낫이 본체보다 8.7% 크고 손에서 (−1.1%, +1.8%) 어긋난 채, 날 끝은 상자 아래로 18.9% 나 흘러내려 랭킹 시상대에서 닉네임을 덮었다 (실측: 118px 아바타에서 22.3px). 본체와 같은 92% 축척으로 맞춘 값 — 974 판은 649 판의 150% 이므로 크기 = 150% × 92% = 138%, 들여쓰기 = 4% − 25% × 92% = −19%. 이 값으로 낫과 본체가 정확히 같은 좌표계에 놓인다 (실측 오차 0.1% 미만). ⚠ 순서 주의: 위 규칙과 우선순위가 같아서 «반드시 뒤» 에 있어야 이긴다. */ .gg-avatar-onblue .gg-avatar-cloth-weapon.is-lightning-reaper-scythe { inset: -19%; width: 138%; height: 138%; } /* 랭킹/내 아바타 원형 박스 — «장비 미착용 기본 오리» 를 원 정중앙에 놓는 고정 기준점. ⚠ 값의 근거 (실측 · 2026-08-28): default-duck-v3.png 은 649 판 안에서 알파 실루엣 중심이 (312.5, 339.0) 이고 판 중심은 (324, 324) 이다 → 왼쪽으로 11.5px · 아래로 15px 치우쳐 그려져 있다. 그래서 되돌리는 양 = +11.5/649 = 1.772% · -15/649 = -2.3112% 다. (옛 값 4% / -2.5% 는 «망토+낫» 모습을 가운데로 맞추려고 잡은 값이라 정작 «미착용 오리» 가 오른쪽으로 쏠렸다 — 그래서 되돌린다.) ⚠ 이 보정은 «장착 상태와 무관하게 언제나 같은 값» 이다. 장비를 끼고 빼도 본체 레이어의 좌표는 1px도 바뀌지 않는다 (조건부 보정 금지). ⚠ 배경·머리 효과(.gg-avatar-fx)와 원 테두리는 건드리지 않는다. ⚠ 낫 레이어는 «언제나 본체의 정확히 1.5배» 다 (원형자리 138% / 92% = 1.5 · 그 밖 150% / 100% = 1.5). translate 의 % 는 «그 요소 자신의 크기» 기준이므로, 같은 실제 거리만큼 옮기려면 본체 값을 1.5 로 나눈다 → 1.772/1.5 = 1.1813 · 2.3112/1.5 = 1.5408. (옛 값 2.8986 은 138 로 나눈 값이라 실제 이동량이 본체와 8% 어긋나 있었다) */ :is(.rk2-ring, .mya-preview) .gg-avatar-box > img:not(.gg-avatar-fx):not(.gg-avatar-cloth-weapon) { translate: 1.772% -2.3112%; } :is(.rk2-ring, .mya-preview) .gg-avatar-box > img.gg-avatar-cloth-weapon.is-lightning-reaper-scythe { translate: 1.1813% -1.5408%; } /* 손바닥 조각 — 오리 그림에서 오려낸 «손 픽셀만». 낫 막대 위에 얹혀서 막대가 손바닥 안에서만 가려지게 한다. 본체와 같은 640 판이라 좌표 보정이 없다. */ .gg-avatar-box .gg-avatar-palm-grip { z-index: 4; } .gg-avatar-box.is-bankrupt .gg-avatar-palm-grip { display: none; } /* 원형 프로필은 본체와 배경 효과만 원 안에 유지하고 낫 레이어만 밖으로 허용한다. */ .gg-avatar-box.has-lightning-reaper-scythe.gg-avatar-onblue, .gg-avatar-box.has-midnight-cape-exact.gg-avatar-onblue, .gg-profile-chip .gg-avatar-box.has-lightning-reaper-scythe, .gg-profile-chip .gg-avatar-box.has-midnight-cape-exact, .bd-run-b .gg-avatar-box.has-lightning-reaper-scythe, .bd-run-b .gg-avatar-box.has-midnight-cape-exact, .gg-avatar-box.has-lightning-reaper-scythe.pm-avatar, .gg-avatar-box.has-midnight-cape-exact.pm-avatar { overflow: visible; } /* (2026-08-27g) 반지름 50% → 58% — 망토 «왼쪽 아래 자락» 이 잘리던 것을 푼다. 실측: 완성형 망토(649 판)의 알파가 중심에서 최대 369.5px = 판 폭의 56.9% 까지 나간다. 50% 로 자르면 3,434 픽셀(왼쪽 아래 소맷자락)이 통째로 잘려 나갔다 — 사장님이 지적한 그 부분이다. 58% 면 잘리는 픽셀이 0 이다 (55% 는 542 픽셀 남아 부족). 기본 오리는 45.9% 라 애초에 안 잘린다. → 원 밖으로 최대 8% 만 삐져나온다 («박스를 조금 벗어나도 좋다» 사장님 승인). 배경·머리 효과는 아래 규칙이 예전 그대로 50% 로 눌러 둔다. */ .gg-avatar-box.has-lightning-reaper-scythe.gg-avatar-onblue > img:not(.gg-avatar-cloth-weapon), .gg-avatar-box.has-midnight-cape-exact.gg-avatar-onblue > img:not(.gg-avatar-cloth-weapon), .gg-profile-chip .gg-avatar-box.has-lightning-reaper-scythe > img:not(.gg-avatar-cloth-weapon), .gg-profile-chip .gg-avatar-box.has-midnight-cape-exact > img:not(.gg-avatar-cloth-weapon), .bd-run-b .gg-avatar-box.has-lightning-reaper-scythe > img:not(.gg-avatar-cloth-weapon), .bd-run-b .gg-avatar-box.has-midnight-cape-exact > img:not(.gg-avatar-cloth-weapon), .gg-avatar-box.has-lightning-reaper-scythe.pm-avatar > img:not(.gg-avatar-cloth-weapon), .gg-avatar-box.has-midnight-cape-exact.pm-avatar > img:not(.gg-avatar-cloth-weapon) { clip-path: circle(58% at 50% 50%); } /* 배경·머리 효과는 예전처럼 원 안에 가둔다 (효과가 원 밖으로 새면 지저분해진다) */ .gg-avatar-box.has-lightning-reaper-scythe.gg-avatar-onblue > img.gg-avatar-fx, .gg-avatar-box.has-midnight-cape-exact.gg-avatar-onblue > img.gg-avatar-fx, .gg-profile-chip .gg-avatar-box.has-lightning-reaper-scythe > img.gg-avatar-fx, .gg-profile-chip .gg-avatar-box.has-midnight-cape-exact > img.gg-avatar-fx, .bd-run-b .gg-avatar-box.has-lightning-reaper-scythe > img.gg-avatar-fx, .bd-run-b .gg-avatar-box.has-midnight-cape-exact > img.gg-avatar-fx, .gg-avatar-box.has-lightning-reaper-scythe.pm-avatar > img.gg-avatar-fx, .gg-avatar-box.has-midnight-cape-exact.pm-avatar > img.gg-avatar-fx { clip-path: circle(50% at 50% 50%); } /* 심연의 마도 망토 (2026-08-26 정면 개편) ⚠ 이제는 «오리가 없는 투명 의상 한 장» 이라 전용 규칙이 필요 없다 — 기본 오리 위에 그냥 얹히는 일반 의상 레이어로 그린다. 옛 3/4 아바타용 예외(본체 레이어 전부 숨김 · translateX(-3.8%) scale(.86) · 완성형 합성 레이어 · 손 패치 되살리기)는 전부 걷어냈다. 파산 처리는 아래 «파산이면 의상도 함께 숨긴다» 공통 규칙이 그대로 맡는다. */ /* 파산이면 의상도 함께 숨긴다 (오리구이만 남는다 · 효과는 기존 규칙대로 유지) */ .gg-avatar-box.is-bankrupt .gg-avatar-cloth { display: none; } /* ---------- 효과 기준점(anchor) ---------- 단순 고정 px 가 아니라 «상자 크기 대비 비율 + 기준점» 으로 배치한다. 기준점: headTop(머리 꼭대기) · bodyCenter(머리~발끝 정중앙) · backCenter(등 중앙) · avatarCenter(전체 중심 — 기존 배경 확대 배치 그대로) */ /* 효과 원본(300×300)은 프레임 안에 이미 위치가 그려져 있다 (천사링 = 프레임 위쪽 등). 그래서 «프레임을 아바타 상자에 정렬»하고 배율·높이만 새 2등신 오리에 맞춘다. (실측: 천사링 내용 중심 = 프레임 y 11.7% · 헤일로 50.8% · 날개 48%) */ .gg-avatar-box { --fx-headtop-scale: 1.15; /* 천사링·하트 프레임 배율 → 링이 머리 꼭대기(y≈6%)에 온다 */ --fx-headtop-y: 50%; --fx-body-scale: 1.1; /* 헤일로: 내용(84%)×1.1 ≈ 오리 전신(92%) — bodyCenter 정중앙 */ --fx-back-y: 46%; /* 날개: 등 중앙 (상자 중앙보다 살짝 위) */ } /* 머리 꼭대기 — 천사링 · 빙글빙글 하트 */ .gg-avatar-box .gg-avatar-fx.fx-anchor-headtop { width: calc(100% * var(--fx-headtop-scale)); height: calc(100% * var(--fx-headtop-scale)); left: 50%; top: var(--fx-headtop-y); transform: translate(-50%, -50%); } /* 몸 정중앙 — 황금 헤일로 (머리부터 발끝까지의 수직 중앙) */ .gg-avatar-box .gg-avatar-fx.fx-anchor-body { width: calc(100% * var(--fx-body-scale)); height: calc(100% * var(--fx-body-scale)); left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 등 중앙 — 황금 날개 · 찬란한 빛의 날개 (크기는 기존 배경 배율 그대로, 높이만 등에 맞춘다) */ .gg-avatar-box .gg-avatar-fx.fx-anchor-back { top: var(--fx-back-y); } /* 은하수 날개 — 원본 날개 뿌리가 프레임 중앙보다 위에 있어 세로 보정만 적용한다. 가로 기준점은 모든 화면에서 아바타 박스의 정확한 중앙을 사용한다. */ .gg-avatar-box .gg-avatar-fx.fx-cosmic-nebula { left: 50%; top: 55%; } /* 은하수 날개 표시 규격 통일 (2026-08-24) 프리셋·게임 내 정보·랭킹·헤더·회원 팝업 모두 같은 155% 배율을 쓴다. 원형 아바타의 기존 95% 마스크는 다른 효과에는 그대로 유지하되, 은하수 날개만 낫과 비슷한 범위까지 원/박스 밖으로 보이도록 허용한다. */ .gg-avatar-box.has-cosmic-nebula-wings { --fx-bg-scale: 1.55; overflow: visible; } .gg-avatar-box.has-cosmic-nebula-wings .gg-avatar-fx.fx-cosmic-nebula { width: 155%; height: 155%; left: 50%; top: 55%; clip-path: none !important; } /* 홈/게임 내 정보의 바깥 원도 은하수 날개만 자르지 않는다. */ .gg-home-me-avatar:has(.gg-avatar-box.has-cosmic-nebula-wings) { overflow: visible; } /* 전체 중심(avatarCenter) — 무지개·폭죽·파티·은하수: 기존 확대 배치 그대로 (덮어쓰지 않음) */ /* 헤더 칩 — 흰 바탕에 흰 오리가 묻히지 않게 은은한 파란 원을 깔아준다 (2026-08-24) */ .gg-profile-chip .gg-avatar-box { box-sizing: border-box; background: radial-gradient(circle at 50% 38%, #ffffff 0%, #dcebfc 100%); border: 1px solid #d9e8fa; } /* 원형 마스크 자리(랭킹 원형·프로필 칩 등)에서는 원 밖으로 나가지 않게 축소 */ .gg-avatar-box.gg-avatar-onblue, .gg-profile-chip .gg-avatar-box, .bd-run-b .gg-avatar-box, .gg-avatar-box.pm-avatar { --fx-headtop-scale: .95; --fx-headtop-y: 50%; --fx-body-scale: .95; --fx-back-y: 50%; }