/* ==================================================================== MASPANALO 손보정 — 자동 생성 테마(panalo77-theme.css) 위에 얹는다. 원칙 : 파랑은 "지금 여기(활성)" 와 보조 버튼, 골드는 "돈이 되는 행동(CTA)·금액" 에만. ==================================================================== */ :root{ --pan-bg:#0B1026; --pan-panel:#141C3F; --pan-panel2:#1A2350; --pan-panel3:#1E2A5A; --pan-line:#2A3870; --pan-blue:#2F5BFF; --pan-gold:#FFC83D; --pan-gold2:#E0A21F; --pan-red:#E63946; --pan-ink:#F4F6FF; --pan-mute:#9AA3C7; --pan-gold-grad:linear-gradient(180deg,#FFE38A 0%,#FFC83D 55%,#E0A21F 100%); } html, :root body{ background-color:var(--pan-bg); } /* 탑바 : 로열 네이비 + 골드 한 줄 */ :root .top-nav{ background-color:var(--pan-panel); border-bottom:2px solid var(--pan-gold); } /* 히어로 CTA : 골드 */ :root .p77-hero .p77-hero__cta{ background:var(--pan-gold-grad); color:#0B1026; border-radius:10px; } :root .p77-hero .p77-hero__cta:hover, :root .p77-hero .p77-hero__cta:focus{ background:#FFE38A; color:#0B1026; } /* 모바일 드로어 가입 버튼 : 골드 채움 (헤더 .btn-signup 은 원래의 골드 테두리 반짝임을 그대로 둔다) */ :root .drawer-auth-btn--signup{ background:var(--pan-gold-grad); color:#0B1026; border-color:transparent; } :root .drawer-auth-btn--signup:hover{ background:#FFE38A; color:#0B1026; } /* 뷰에 직접 박힌 inline style 의 초록 — 뷰를 고치지 않고(upstream merge 보호) 속성 선택자로 덮는다 */ :root [style*="#00a868" i]{ background:var(--pan-gold-grad) !important; border-color:transparent !important; color:#0B1026 !important; } :root [style*="#5ac8a6" i], :root [style*="#16b98c" i], :root [style*="#0b7a5c" i]{ color:var(--pan-gold) !important; } :root [style*="#08df8d" i]{ color:var(--pan-gold) !important; } :root [style*="#c9f5e4" i]{ color:var(--pan-ink) !important; } :root [style*="#123832" i]{ background:var(--pan-panel) !important; border-color:var(--pan-line) !important; } /* 대비 실측 보정 (harness contrast : 4건 → 0) */ :root .p77-rw2__num--extra{ color:#0B1026; } /* 골드 원 위 흰 숫자 2.24 → 네이비 */ :root .kyc-help{ background-color:#C62834; } /* 흰 ? on 레드 4.17 → 5.4 */ /* MASPANALO 로고 v2(엠블럼+워드마크, 3.6:1, 2026-09-28) — 폭을 줄여 탑바 높이 안에 맞춘다 */ :root{ --top-nav-logo-width: 196px; --top-nav-logo-mobile-width: 128px; } /* 좌측 메뉴 — 항목마다 테두리 [2026-09-28 CK 지시] 사이드바와 항목 배경이 같은 #1E2A5A 라 경계가 안 보였다 → 옅은 골드 테두리 + 한 톤 밝은 면, hover 는 골드 테두리로 또렷하게. */ :root .menu-list li a{ background-color:var(--pan-panel2); border:1px solid rgba(255,200,61,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:background .2s ease, border-color .2s ease; } :root .menu-list li a:hover, :root .menu-list li a:focus-visible{ background-color:#24316A; border-color:var(--pan-gold); } /* 모바일 하단바 — MASPANALO 스킨 [2026-09-28 CK 지시] CK: "좌측 하단에 햄버거 버튼이 안 보여. 색상만 바꾸지 말고 아이콘이나 이미지를 넣어서 예쁘게." 원인 : burger.svg 는 fill 이 없는 검정 선 + main.css 의 grayscale/brightness(.5) 필터 → 네이비 위에서 사라짐. ★ 는 지우지 않고 숨긴다 — script.js 가 그 img.src 를 burger/close 로 바꿔 끼우며 열림 상태를 표시한다. 아이콘은 버튼의 ::before 로 그리고, 열림 상태는 aria-expanded 로 따라간다. */ @media (max-width: 1024px){ :root .mobile-bottom-nav{ height:64px; gap:8px; padding:0 10px; background:linear-gradient(180deg,#1C2656 0%,#0E1433 100%); border-top:1px solid rgba(255,200,61,.38); box-shadow:0 -8px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,227,138,.10); } /* 메뉴 · 검색 — 골드 테두리 타일 + 아이콘 + 작은 라벨 */ :root .mobile-bottom-nav #mobile-menu-btn, :root .mobile-bottom-nav .mobile-search-btn{ flex:0 0 54px !important; min-width:54px; height:50px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:radial-gradient(120% 90% at 50% 0%, rgba(255,200,61,.16) 0%, rgba(255,200,61,.04) 60%, rgba(255,200,61,.02) 100%); border:1px solid rgba(255,200,61,.32); border-radius:14px; color:#FFE38A; transition:border-color .2s, background .2s, transform .12s; } :root .mobile-bottom-nav #mobile-menu-btn img, :root .mobile-bottom-nav .mobile-search-btn img{ display:none !important; } :root .mobile-bottom-nav #mobile-menu-btn::before, :root .mobile-bottom-nav .mobile-search-btn::before{ content:""; width:22px; height:22px; display:block; background:center/contain no-repeat url(/resources/img/icons/mas-menu.svg?v=mas-0003); filter:drop-shadow(0 1px 4px rgba(255,200,61,.35)); } :root .mobile-bottom-nav .mobile-search-btn::before{ background-image:url(/resources/img/icons/mas-search.svg?v=mas-0003); } :root .mobile-bottom-nav #mobile-menu-btn[aria-expanded="true"]::before{ background-image:url(/resources/img/icons/mas-close.svg?v=mas-0003); } :root .mobile-bottom-nav #mobile-menu-btn[aria-expanded="true"]{ border-color:#FFC83D; background:rgba(255,200,61,.14); } :root .mobile-bottom-nav .mnav-lbl{ font-size:10px; line-height:1; font-weight:600; letter-spacing:.02em; color:#E9D9A6; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :root .mobile-bottom-nav #mobile-menu-btn:active, :root .mobile-bottom-nav .mobile-search-btn:active{ transform:scale(.95); border-color:#FFC83D; } /* Login — 골드 테두리 + 사람 아이콘 */ :root .mobile-bottom-nav .btn-login-mobile{ height:46px; gap:7px; font-weight:700; font-size:15px; color:#FFC83D; background:rgba(11,16,38,.55); border:1.5px solid rgba(255,200,61,.75); border-radius:14px !important; } :root .mobile-bottom-nav .btn-login-mobile:not(.mobile-logout-btn)::before{ content:""; width:18px; height:18px; flex:none; background:center/contain no-repeat url(/resources/img/icons/mas-user.svg?v=mas-0003); } /* Sign Up — 골드 그라디언트 + 선물 아이콘 + 반짝임 */ :root .mobile-bottom-nav .btn-signup-mobile[data-open-auth="signup"]{ position:relative; overflow:hidden; height:46px; gap:7px; color:#0B1026; font-weight:800; font-size:15px; letter-spacing:.01em; background:linear-gradient(180deg,#FFE38A 0%,#FFC83D 55%,#E0A21F 100%); border:0; border-radius:14px !important; box-shadow:0 4px 14px rgba(255,200,61,.35), inset 0 1px 0 rgba(255,255,255,.55); } :root .mobile-bottom-nav .btn-signup-mobile[data-open-auth="signup"]::before{ content:""; width:18px; height:18px; flex:none; background:center/contain no-repeat url(/resources/img/icons/mas-gift.svg?v=mas-0003); } :root .mobile-bottom-nav .btn-signup-mobile[data-open-auth="signup"]::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%); transform:skewX(-18deg); animation:masSheen 3.6s ease-in-out infinite; } /* 로그인 상태 — 계정 버튼도 같은 타일 결 */ :root .mobile-bottom-nav .mobile-user-btn{ height:50px; background:rgba(255,200,61,.06) !important; border:1px solid rgba(255,200,61,.32); border-radius:14px !important; } :root .mobile-bottom-nav .mobile-user-btn .mobile-user-name{ color:#F4F6FF; } } @keyframes masSheen{ 0%,62%{ left:-60%; } 100%{ left:130%; } } @media (prefers-reduced-motion: reduce){ :root .mobile-bottom-nav .btn-signup-mobile[data-open-auth="signup"]::after{ animation:none; display:none; } } /* 모바일 메뉴(하단바 Menu 로 여는 시트)의 아이콘 칸도 좌측 메뉴와 같은 골드 테두리 */ :root .mobile-menu-box .menu-box-bg{ border:1px solid rgba(255,200,61,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } :root .mobile-menu-box:active .menu-box-bg{ border-color:#FFC83D; } /* ── [2026-09-28 CK 제보 ②] 데일리 체크인 모달 글씨가 안 읽힌다 ────────────── 테마 생성기가 PESO77 의 --dci-* 변수(글자·보조글자까지)를 전부 골드로 매핑했다. 골드 면(오늘 칸·Check in 버튼) 위에 골드 글자가 얹혀 글자가 사라졌고, 파란 헤더 위 골드 설명문은 대비가 낮았다. 변수를 역할대로 다시 준다. */ :root .lt-dci{ --dci-bg:#0B1026; --dci-header:#1A2350; --dci-accent:#FFC83D; --dci-text:#F4F6FF; --dci-muted:#AEB6D8; --dci-line:rgba(255,255,255,.10); --dci-cell:#1A2350; --dci-success:#5B8CFF; --dci-danger:#FF6B75; } :root .lt-dci__header{ background:linear-gradient(135deg,#1C2A66 0%,#141C3F 100%); border-bottom-color:rgba(255,200,61,.35); } :root .lt-dci__heading{ color:#FFFFFF; } :root .lt-dci__intro{ color:#C9D0EE; } :root .lt-dci__close{ color:#F4F6FF; border-color:rgba(255,255,255,.18); } :root .lt-dci__close-count{ color:#FFE38A; } :root .lt-dci__summary-label{ color:#FFC83D; } :root .lt-dci__summary-value{ color:#FFFFFF; } :root .lt-dci__streak{ color:#FFC83D; } :root .lt-dci__month{ color:#FFFFFF; } :root .lt-dci__nav{ color:#F4F6FF; } :root .lt-dci__weekdays{ color:#AEB6D8; } :root .lt-dci__day, :root .lt-dci__day--future, :root .lt-dci__day--before{ color:#E6EAFA; } :root .lt-dci__day--today{ color:#0B1026; font-weight:800; background:linear-gradient(180deg,#FFE38A,#FFC83D); border-color:#FFE38A; } :root .lt-dci__day--today.lt-dci__day--reward::after{ color:#0B1026; } :root .lt-dci__day--missed{ color:#7F88AE; } :root .lt-dci__legend{ color:#AEB6D8; } :root .lt-dci__legend-item--claimed{ color:#8FB0FF; } :root .lt-dci__claim{ color:#0B1026; font-weight:800; background:linear-gradient(180deg,#FFE38A 0%,#FFC83D 55%,#E0A21F 100%); border-color:#FFE38A; } :root .lt-dci__claim:disabled{ color:#AEB6D8; background:#1A2350; border-color:rgba(255,255,255,.14); } :root .lt-dci__rules{ color:#AEB6D8; } :root .lt-dci__notice{ color:#F4F6FF; } /* ── [2026-09-28 CK 제보 ③] 탑바 리워드 버튼이 노란 덩어리 ──────────────────── 받을 것이 있을 때(is-ready) 골드로 채우는데, 아이콘·글자 색도 골드로 매핑돼 전부 사라졌다. CK 요청대로 준비 상태에도 아이콘 + "Rewards / Play to add" 를 보이고, READY 는 작은 딱지로. */ :root .top-nav .dci-badge.is-ready{ background:linear-gradient(180deg,#FFE38A 0%,#FFC83D 55%,#E0A21F 100%); border-color:#FFE38A; box-shadow:0 2px 12px rgba(255,200,61,.40); gap:7px; } :root .top-nav .dci-badge.is-ready:hover{ background:linear-gradient(180deg,#FFF0B8,#FFD45E); } :root .top-nav .dci-badge.is-ready .dci-badge__ico{ color:#0B1026; } :root .top-nav .dci-badge.is-ready .dci-badge__done{ display:inline-flex; } :root .top-nav .dci-badge.is-ready .dci-badge__t1{ color:#0B1026; } :root .top-nav .dci-badge.is-ready .dci-badge__t2{ color:#2A3561; } :root .top-nav .dci-badge.is-ready .dci-badge__ready{ order:3; color:#FFE38A; background:#0B1026; border-radius:999px; padding:2px 6px; font-size:9px; letter-spacing:.06em; } :root .top-nav .dci-badge.is-done .dci-badge__ico, :root .top-nav .dci-badge.is-done .dci-badge__t1{ color:#FFC83D; } :root .top-nav .dci-badge.is-done .dci-badge__t2{ color:#C9D0EE; } /* 모바일 메뉴 안의 줄형 배지(dci-badge--row) — 같은 규칙 */ :root .dci-badge--row.is-ready .dci-badge__done{ display:inline-flex; } /* ── [2026-09-28 CK 제보 ④] 우측 하단 버블 버튼 세트(lt-dock)가 없다 ───────────── footer 의