/* ============================================================ GAMEBOY.KR 개편 P6 — 마이페이지(5탭) 본문 리스타일 오버레이 ------------------------------------------------------------ · mypage.css(1,470줄·~29KB, 전부 .gn-* 다크 하드코딩, :root·var·라이트분기 전무) 위에 덮는 오버라이드. · 원본 page-mypage.php / mypage.css / inc/mypage-chzzk-donation.php 는 미수정, 시각만. · 토큰 = redesign-chrome.css :root --gb-*. · 스코프 = body.gb-mypage (mu-plugin body_class 필터가 프리뷰 한정 부착). enqueue=wp_enqueue_scripts(prio99) deps ['gb-redesign-chrome','gamernews-mypage'](mypage.css 뒤)·?v=filemtime. · 탭 = 서버 렌더 ?tab=overview|points|activity|settings|hub (활성 탭만 DOM에 존재). 로그인 월 외 전부 로그인 필요. · 라이트모드 무관: mypage.css에 라이트 분기 없음(항상 다크) + .gn-* 고유 → board처럼 다크 강제 아님, 그냥 토큰 리스킨. · 시맨틱 보존: 골드=앰버 · 랭크/포인트 보라텍스트=#c4b9ff · 성공/긍정=그린 · 오류/마이너스=절제빨강 #d98a8a · 방송인=시안 · 포디움 1금/2은/3동. 장식(그라데·radial글로우·hover lift/glow·gradient-text) 평탄화, 기능모션(랭크바 width·focus 링) 보존. · 인라인 한계(미오버라이드): ① 구걸 .gn-beg-item border-left 상태색(PHP 인라인, 클래스無 — 의미색 보존) ② HUB 탭 내부 통계카드/CTA/빠른링크(전부 인라인 style + onmouseover hover, 보라 그라데 #6c5ce7~#a29bfe) — 컨테이너/헤더만 토큰화, 내부는 템플릿 수정 별도과제. 로그인+방송인 게이트라 니치. · !important: mypage.css가 탭/more-link/beg-title·action/security-link/save-btn/broadcast에 !important 사용 → 동일 대응. ============================================================ */ /* ── 0) 베이스 ── */ body.gb-mypage .gn-mypage-wrap { font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; color: var(--gb-txt); } /* 로그인 월(로그아웃 시) */ body.gb-mypage .gn-mypage-login-wall { background: var(--gb-bg2); border: 1px solid var(--gb-line); } body.gb-mypage .gn-mypage-login-wall h2 { color: var(--gb-txt); } body.gb-mypage .gn-mypage-login-wall p { color: var(--gb-mut); } body.gb-mypage .gn-mypage-login-btn { background: var(--gb-pink); color: #fff !important; } body.gb-mypage .gn-mypage-login-btn:hover { box-shadow: none; transform: none; background: #d41f87; } /* ── 1) 히어로 ── */ body.gb-mypage .gn-mypage-hero-bg { background: var(--gb-bg2); } /* 4스톱 보라 그라데 → 플랫 */ body.gb-mypage .gn-mypage-hero-bg::after { background: none; } /* 핑크/보라 radial 글로우 제거 */ body.gb-mypage .gn-mypage-hero { border: 1px solid var(--gb-line); border-radius: 16px; overflow: hidden; } body.gb-mypage .gn-mypage-avatar { border: 3px solid rgba(231,43,153,.5); box-shadow: none; } /* 아이덴티티 링=핑크, 섀도 제거 */ body.gb-mypage .gn-mypage-role-badge { background: var(--gb-pink); color: #fff; box-shadow: none; } body.gb-mypage .gn-mypage-displayname { color: var(--gb-txt); } body.gb-mypage .gn-mypage-joindate { color: var(--gb-mut); } body.gb-mypage .gn-mypage-hero-points { background: var(--gb-bg3); border: 1px solid var(--gb-line); } /* GOLD 숫자: 앰버 그라데텍스트 → 플랫 앰버 */ body.gb-mypage .gn-mypage-points-number { background: none; -webkit-text-fill-color: var(--gb-amber); color: var(--gb-amber); } body.gb-mypage .gn-mypage-points-label { color: var(--gb-mut); } body.gb-mypage .gn-mypage-rank-badge { background: rgba(146,41,247,.15); color: #c4b9ff; } body.gb-mypage .gn-mypage-rank-badge i { color: var(--gb-amber); } /* ── 2) 탭 내비 (활성=핑크 / 방송인 탭 활성=시안) ── */ body.gb-mypage .gn-mypage-tabs { background: var(--gb-bg2); border: 1px solid var(--gb-line); } body.gb-mypage .gn-mypage-tab { color: var(--gb-mut) !important; border-bottom: 2px solid transparent; } body.gb-mypage .gn-mypage-tab:hover { color: var(--gb-txt2) !important; background: var(--gb-bg3); } body.gb-mypage .gn-mypage-tab.active { color: var(--gb-pink) !important; border-bottom-color: var(--gb-pink); background: rgba(231,43,153,.07); } body.gb-mypage .gn-mypage-tab-broadcast.active { color: var(--gb-cyan) !important; border-bottom-color: var(--gb-cyan); background: rgba(39,192,214,.07); } body.gb-mypage .gn-mypage-tab-broadcast:hover { color: rgba(39,192,214,.75) !important; } body.gb-mypage .gn-mypage-tab-broadcast.active i { color: var(--gb-cyan); } /* ── 3) 알림 (성공=그린 / 오류=절제빨강) ── */ body.gb-mypage .gn-mypage-notice.success { background: rgba(27,189,138,.12); border: 1px solid rgba(27,189,138,.28); color: var(--gb-green); } body.gb-mypage .gn-mypage-notice.error { background: rgba(217,138,138,.12); border: 1px solid rgba(217,138,138,.3); color: #d98a8a; } /* ── 4) 공통 섹션 카드 + 헤더 ── */ body.gb-mypage .gn-mypage-section { background: var(--gb-bg2); border: 1px solid var(--gb-line); } body.gb-mypage .gn-mypage-section-header { border-bottom: 1px solid var(--gb-line); } body.gb-mypage .gn-mypage-section-header h2 { color: var(--gb-txt); } body.gb-mypage .gn-mypage-section-header h2 i { color: var(--gb-pink); } body.gb-mypage .gn-mypage-more-link { color: var(--gb-mut) !important; } body.gb-mypage .gn-mypage-more-link:hover { color: var(--gb-pink) !important; } body.gb-mypage .gn-mypage-section-badge { background: rgba(231,43,153,.15); color: var(--gb-pink); } body.gb-mypage .gn-mypage-empty { color: var(--gb-mut2); } /* ── 5) 개요 통계 4카드 (아이콘 의미색: 골드/랭크보라/출석그린/글핑크) ── */ body.gb-mypage .gn-mypage-stat-card { background: var(--gb-bg2); border: 1px solid var(--gb-line); } body.gb-mypage .gn-mypage-stat-card:hover { border-color: rgba(231,43,153,.25); transform: none; box-shadow: none; } body.gb-mypage .gn-stat-points .gn-stat-icon { background: rgba(240,167,48,.18); color: var(--gb-amber); } body.gb-mypage .gn-stat-rank .gn-stat-icon { background: rgba(146,41,247,.18); color: #c4b9ff; } body.gb-mypage .gn-stat-attend .gn-stat-icon { background: rgba(27,189,138,.18); color: var(--gb-green); } body.gb-mypage .gn-stat-posts .gn-stat-icon { background: rgba(231,43,153,.18); color: var(--gb-pink); } body.gb-mypage .gn-stat-value { color: var(--gb-txt); } body.gb-mypage .gn-stat-label { color: var(--gb-mut); } /* ── 6) 랭킹 리스트 + 포디움 ── */ body.gb-mypage .gn-rank-item { border-bottom: 1px solid var(--gb-line); } body.gb-mypage .gn-rank-item:hover { background: var(--gb-bg3); } body.gb-mypage .gn-rank-item.is-me { background: rgba(231,43,153,.07); } body.gb-mypage .gn-rank-num { color: var(--gb-mut); } body.gb-mypage .gn-rank-name { color: var(--gb-txt); } body.gb-mypage .gn-rank-me-tag { background: var(--gb-pink); color: #fff; } body.gb-mypage .gn-rank-bar-wrap { background: var(--gb-bg4); } body.gb-mypage .gn-rank-bar-fill { background: var(--gb-pink); } /* 핑크→보라 그라데 → 플랫 핑크 (width 인라인·transition 보존) */ body.gb-mypage .gn-rank-pts { color: #c4b9ff; } body.gb-mypage .gn-rank-item.is-me .gn-rank-pts { color: var(--gb-pink); } body.gb-mypage .gn-rank-separator { color: var(--gb-mut2); } body.gb-mypage .gn-rank-myline { border-top: 1px dashed rgba(231,43,153,.25); } /* 포디움: 1=금 / 2=은(슬레이트) / 3=동 */ body.gb-mypage .gn-podium-card { background: var(--gb-bg3); border: 1px solid var(--gb-line); } body.gb-mypage .gn-podium-card:hover { transform: none; box-shadow: none; } body.gb-mypage .gn-podium-1 { border-color: rgba(240,167,48,.3); background: rgba(240,167,48,.07); } body.gb-mypage .gn-podium-2 { border-color: #3a3a46; background: rgba(205,210,218,.04); } body.gb-mypage .gn-podium-3 { border-color: #4a3420; background: rgba(216,160,106,.05); } body.gb-mypage .gn-podium-card.is-me { border-color: rgba(231,43,153,.3); background: rgba(231,43,153,.08); } body.gb-mypage .gn-podium-avatar { border: 2px solid var(--gb-line2); } body.gb-mypage .gn-podium-1 .gn-podium-avatar { border-color: rgba(240,167,48,.5); } body.gb-mypage .gn-podium-name { color: var(--gb-txt); } body.gb-mypage .gn-podium-pts { color: #c4b9ff; } body.gb-mypage .gn-podium-1 .gn-podium-pts { color: var(--gb-amber); } /* ── 7) 골드 변동 내역 (+ 그린 / − 절제빨강) ── */ body.gb-mypage .gn-point-log-item { border-bottom: 1px solid var(--gb-line); } body.gb-mypage .gn-point-log-item:hover { background: var(--gb-bg3); } body.gb-mypage .gn-point-log-amount.positive { color: var(--gb-green); } body.gb-mypage .gn-point-log-amount.negative { color: #d98a8a; } body.gb-mypage .gn-point-log-desc { color: var(--gb-txt2); } body.gb-mypage .gn-point-log-date { color: var(--gb-mut2); } /* ── 8) 골드 탭: 골드 히어로 + 적립/사용 가이드 ── */ body.gb-mypage .gn-mypage-point-hero { background: var(--gb-bg2); border: 1px solid rgba(146,41,247,.2); } body.gb-mypage .gn-mypage-point-hero::before { background: none; } /* radial 글로우 제거 */ body.gb-mypage .gn-point-hero-label { color: var(--gb-mut); } body.gb-mypage .gn-point-hero-value { background: none; -webkit-text-fill-color: var(--gb-amber); color: var(--gb-amber); } body.gb-mypage .gn-phs-val { color: var(--gb-txt); } body.gb-mypage .gn-phs-label { color: var(--gb-mut); } body.gb-mypage .gn-point-hero-divider { background: var(--gb-line2); } body.gb-mypage .gn-point-guide-card { background: var(--gb-bg3); border: 1px solid var(--gb-line); } body.gb-mypage .gn-point-guide-card:hover { border-color: rgba(231,43,153,.25); transform: none; } body.gb-mypage .gn-pg-title { color: var(--gb-txt); } body.gb-mypage .gn-pg-desc { color: var(--gb-mut); } body.gb-mypage .gn-pg-reward { background: rgba(146,41,247,.15); color: #c4b9ff; } body.gb-mypage .gn-pg-coming .gn-pg-reward { background: rgba(231,43,153,.12); color: var(--gb-pink); } body.gb-mypage .gn-pg-coming { opacity: .82; } /* 준비중 카드 살짝 디밍 */ /* ── 9) 활동 탭: 활동 7카드 + 출석 요약 ── */ body.gb-mypage .gn-activity-card { background: var(--gb-bg2); border: 1px solid var(--gb-line); } body.gb-mypage .gn-activity-card:hover { border-color: rgba(231,43,153,.25); transform: none; box-shadow: none; } body.gb-mypage .gn-act-header { color: var(--gb-mut); } body.gb-mypage .gn-act-header i { color: var(--gb-pink); } body.gb-mypage .gn-act-number { color: var(--gb-txt); } body.gb-mypage .gn-act-desc { color: var(--gb-mut2); } body.gb-mypage .gn-attend-stat { border-right: 1px solid var(--gb-line); } body.gb-mypage .gn-attend-num { color: var(--gb-txt); } body.gb-mypage .gn-attend-label { color: var(--gb-mut); } /* ── 10) 구걸 내역 (컨테이너/텍스트만 토큰; 상태 border-left는 PHP 인라인 의미색 보존) ── */ body.gb-mypage .gn-beg-item { border-bottom: 1px solid var(--gb-line); } body.gb-mypage .gn-beg-item:hover { background: var(--gb-bg3); } body.gb-mypage .gn-beg-title a { color: var(--gb-txt) !important; } body.gb-mypage .gn-beg-title a:hover { color: var(--gb-pink) !important; } body.gb-mypage .gn-beg-meta { color: var(--gb-mut); } body.gb-mypage .gn-beg-dot { color: var(--gb-mut2); } body.gb-mypage .gn-beg-date { color: var(--gb-mut2); } body.gb-mypage .gn-beg-msg { color: var(--gb-mut2); } /* 받은 구걸 수락/거부 링크 = 그린(수락 액션) */ body.gb-mypage .gn-beg-action-link { color: var(--gb-green) !important; border: 1px solid rgba(27,189,138,.28); } body.gb-mypage .gn-beg-action-link:hover { background: rgba(27,189,138,.1); border-color: rgba(27,189,138,.5); } /* ── 11) 설정 탭: 프로필 폼 ── */ body.gb-mypage .gn-form-group label { color: var(--gb-txt); } body.gb-mypage .gn-form-group input[type=text], body.gb-mypage .gn-form-group input[type=url], body.gb-mypage .gn-form-group select, body.gb-mypage .gn-form-group textarea { background: var(--gb-bg3); border: 1px solid var(--gb-line2); color: var(--gb-txt); } body.gb-mypage .gn-form-group input:focus, body.gb-mypage .gn-form-group select:focus, body.gb-mypage .gn-form-group textarea:focus { border-color: var(--gb-pink); box-shadow: 0 0 0 3px rgba(231,43,153,.15); /* 포커스 링(a11y) 유지 */ } body.gb-mypage .gn-form-help { color: var(--gb-mut); } body.gb-mypage .gn-form-avatar-preview { border: 2px solid var(--gb-line2); } body.gb-mypage .gn-form-avatar-text { color: var(--gb-mut); } body.gb-mypage .gn-form-avatar-text a { color: #c4b9ff !important; } /* 저장 버튼 = 핑크(주 CTA, 그라데/lift/글로우 제거) */ body.gb-mypage .gn-form-save-btn { background: var(--gb-pink); color: #fff; } body.gb-mypage .gn-form-save-btn:hover { transform: none; box-shadow: none; background: #d41f87; } /* ── 12) 보안 안내 ── */ body.gb-mypage .gn-security-info p { color: var(--gb-mut); } body.gb-mypage .gn-security-link { background: var(--gb-bg3); border: 1px solid var(--gb-line2); color: var(--gb-txt) !important; } body.gb-mypage .gn-security-link:hover { background: var(--gb-bg4); border-color: rgba(231,43,153,.3); } /* ── 13) 치지직 후원 연동 (인라인