@charset "utf-8"; /* ═══════════════════════════════════════════════════════════ PRAG GAME — 메인페이지 스타일 (단일 원본 / 네온 아케이드) ※ 그누보드 기본 CSS(default.css)는 메인에서 로드하지 않으므로 선택자 중복 · 리셋 충돌이 없습니다. ═══════════════════════════════════════════════════════════ */ /* ═════════ 1. 토큰 ═════════ */ :root{ --bg: #0a0616; --bg2: #120b26; --bg3: #1a1035; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14); --cyan: #00e5ff; --pink: #ff2d95; --violet: #7c3aed; --lime: #c9f31d; --gold: #ffc53d; --wh: #ffffff; --tx: #e7e2f5; --gr: #9b8fb8; --gr2: #6b5f8c; --r: 14px; --r-lg: 20px; --W: 1320px; --hd-h: 72px; --f-disp: 'Chakra Petch', 'Pretendard', sans-serif; --f-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; } /* ═════════ 2. 리셋 ═════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--f-body); background:var(--bg); color:var(--tx); line-height:1.6; overflow-x:hidden; word-break:keep-all; } img{max-width:100%;height:auto;display:block;border:0} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} input{font-family:inherit} em{font-style:normal} .sound_only{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap} /* ═════════ 3. 키프레임 ═════════ */ @keyframes pg-pulse {0%,100%{opacity:1}50%{opacity:.25}} @keyframes pg-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes pg-shimmer {0%{background-position:-200% center}100%{background-position:200% center}} @keyframes pg-ticker {0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes pg-spin {to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes pg-spinR {to{transform:translate(-50%,-50%) rotate(-360deg)}} @keyframes pg-glow {0%,100%{opacity:.45}50%{opacity:.9}} @keyframes pg-up {from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes pg-scan {0%{transform:translateY(-120%)}100%{transform:translateY(320%)}} @keyframes pg-sweep {0%{left:-60%}100%{left:150%}} @keyframes pg-blink {0%,100%{box-shadow:0 0 6px var(--pink)}50%{box-shadow:0 0 18px var(--pink),0 0 34px rgba(255,45,149,.6)}} /* 스크롤 진입 ─ .pg-js 는 의 인라인 스크립트가 에 붙입니다. 자바스크립트가 동작하지 않는 환경에서는 이 규칙이 적용되지 않으므로 콘텐츠가 숨겨진 채로 남는 일이 없습니다. */ .pg-js .rv{opacity:0;transform:translateY(30px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)} .pg-js .rv.on{opacity:1;transform:none} .pg-js .rv.d1{transition-delay:.07s}.pg-js .rv.d2{transition-delay:.14s} .pg-js .rv.d3{transition-delay:.21s}.pg-js .rv.d4{transition-delay:.28s} /* ═════════ 4. 공통 레이아웃 ═════════ */ .pg-wrap{max-width:var(--W);margin:0 auto;padding:0 20px} /* scroll-margin-top: 원페이지 앵커(#live, #games …) 이동 시 고정 헤더에 가리지 않도록 */ .pg-sec{padding:clamp(52px,7vw,92px) 0;position:relative;scroll-margin-top:calc(var(--hd-h) + 8px)} /* 헤더를 쓰지 않을 때 (body.pg-nohd) — 가릴 헤더가 없으므로 여백 정리 */ .pg-nohd .pg-sec{scroll-margin-top:8px} .pg-nohd .pg-hero{padding-top:clamp(72px,11vw,130px)} .pg-sec--alt{background: radial-gradient(ellipse 70% 50% at 50% 0%,rgba(124,58,237,.10),transparent 70%), var(--bg)} .pg-sechd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,3vw,34px);flex-wrap:wrap} .pg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px} .pg-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pg-pulse 1.4s ease-in-out infinite} .pg-eyebrow.is-live{color:var(--pink)} .pg-eyebrow.is-live i{background:var(--pink);box-shadow:0 0 8px var(--pink)} .pg-h2{font-family:var(--f-disp);font-size:clamp(26px,3.6vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--wh)} .pg-h2 em{background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .pg-more{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--gr); border:1px solid var(--line2);border-radius:999px;padding:9px 18px;transition:.2s} .pg-more:hover{color:var(--wh);border-color:var(--cyan);background:rgba(0,229,255,.08);box-shadow:0 0 18px rgba(0,229,255,.18)} .pg-more span{transition:transform .2s} .pg-more:hover span{transform:translateX(3px)} /* 버튼 */ .pg-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 32px;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:.01em;transition:transform .2s,box-shadow .2s} .pg-btn--primary{color:#0a0616;background:linear-gradient(100deg,var(--cyan),#7ef9ff 40%,var(--cyan));background-size:200% auto; animation:pg-shimmer 3s linear infinite;box-shadow:0 6px 28px rgba(0,229,255,.38)} .pg-btn--primary::after{content:'';position:absolute;top:0;left:-60%;width:38%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:pg-sweep 3s ease-in-out infinite} .pg-btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 38px rgba(0,229,255,.6)} .pg-btn--ghost{color:var(--wh);border:1px solid var(--line2);background:rgba(255,255,255,.04)} .pg-btn--ghost:hover{border-color:var(--pink);background:rgba(255,45,149,.1);box-shadow:0 0 24px rgba(255,45,149,.22);transform:translateY(-2px)} .pg-btn i{font-style:normal;transition:transform .2s} .pg-btn:hover i{transform:translateX(3px)} /* 뱃지 */ .pg-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-size:11px;font-weight:700; letter-spacing:.1em;padding:4px 10px;border-radius:5px;text-transform:uppercase} .pg-badge--live{background:var(--pink);color:#fff;animation:pg-blink 2s ease-in-out infinite} .pg-badge--live b{width:5px;height:5px;border-radius:50%;background:#fff;animation:pg-pulse 1s ease-in-out infinite} .pg-badge--hot{background:linear-gradient(90deg,var(--pink),#ff7a3d);color:#fff} .pg-badge--new{background:linear-gradient(90deg,var(--cyan),var(--lime));color:#0a0616} .pg-badge--etc{background:rgba(255,255,255,.12);color:var(--wh);backdrop-filter:blur(6px)} /* ═════════ 5. 헤더 ═════════ */ .pg-hd{position:sticky;top:0;z-index:200;height:var(--hd-h); background:rgba(10,6,22,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .pg-hd.is-scrolled{background:rgba(10,6,22,.96);box-shadow:0 6px 30px rgba(0,0,0,.5)} .pg-hd__in{max-width:var(--W);height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px} .pg-logo{flex-shrink:0;display:flex;align-items:center;font-family:var(--f-disp);font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--wh)} .pg-logo b{font-weight:700;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .pg-logo img{max-height:38px;width:auto} .pg-gnb{flex:1;min-width:0} .pg-gnb>ul{display:flex;align-items:center;gap:2px} .pg-gnb__li{position:relative} .pg-gnb__a{display:block;padding:10px 15px;border-radius:9px;font-size:15px;font-weight:600;color:var(--gr);transition:.18s;white-space:nowrap} .pg-gnb__a:hover{color:var(--wh);background:rgba(255,255,255,.06)} .pg-gnb__li:hover>.pg-gnb__a{color:var(--cyan)} .pg-gnb__sub{position:absolute;top:100%;left:0;min-width:172px;padding:8px;border-radius:12px; background:rgba(18,11,38,.98);border:1px solid var(--line2);box-shadow:0 18px 48px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s} .pg-gnb__li:hover .pg-gnb__sub{opacity:1;visibility:visible;transform:none} .pg-gnb__sub a{display:block;padding:9px 13px;border-radius:8px;font-size:14px;color:var(--gr);transition:.15s} .pg-gnb__sub a:hover{color:var(--wh);background:rgba(0,229,255,.12)} .pg-hd__util{flex-shrink:0;display:flex;align-items:center;gap:8px} /* 관리자로 로그인했을 때만 보이는 링크 (일반 방문자에게는 출력되지 않음) */ .pg-hd__adm{flex-shrink:0;padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600; color:var(--gr);border:1px solid var(--line);transition:.18s;white-space:nowrap} .pg-hd__adm:hover{color:var(--wh);background:rgba(255,255,255,.07);border-color:var(--line2)} /* 헤더 LIVE 버튼 (라이브 스트리밍 + 채팅으로 이동) */ .pg-hd__live{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 17px;border-radius:999px; font-size:14px;font-weight:800;letter-spacing:.01em;color:#fff;white-space:nowrap; background:linear-gradient(100deg,var(--pink),#ff5fae);box-shadow:0 4px 18px rgba(255,45,149,.36);transition:.2s} .pg-hd__live b{width:7px;height:7px;border-radius:50%;background:#fff;animation:pg-pulse 1.1s ease-in-out infinite} .pg-hd__live:hover{transform:translateY(-1px);box-shadow:0 7px 26px rgba(255,45,149,.6)} .pg-hd__toggle{display:none;width:40px;height:40px;border-radius:10px;color:var(--wh);font-size:20px} .pg-mnav{display:none;position:fixed;inset:var(--hd-h) 0 0;z-index:199;background:rgba(10,6,22,.98);backdrop-filter:blur(10px);overflow-y:auto;padding:18px 20px 40px} .pg-mnav.is-open{display:block} .pg-mnav>ul>li{border-bottom:1px solid var(--line)} .pg-mnav>ul>li>a{display:block;padding:16px 4px;font-size:17px;font-weight:700;color:var(--wh)} .pg-mnav ul ul{padding:0 0 12px 12px} .pg-mnav ul ul a{display:block;padding:9px 4px;font-size:15px;color:var(--gr)} .pg-mnav__live{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding:15px;border-radius:999px; font-size:16px;font-weight:800;color:#fff;background:linear-gradient(100deg,var(--pink),#ff5fae);box-shadow:0 4px 20px rgba(255,45,149,.4)} .pg-mnav__live b{width:8px;height:8px;border-radius:50%;background:#fff;animation:pg-pulse 1.1s ease-in-out infinite} .pg-mnav__auth{display:flex;gap:8px;margin-top:10px} .pg-mnav__auth a{flex:1;text-align:center;padding:13px;border-radius:999px;font-weight:700;color:var(--gr);border:1px solid var(--line2)} /* ═════════ 6. 히어로 ═════════ */ /* «심우주» 배경 — 자연스러움 우선 · 화면의 대부분은 어둡게 두고, 밝은 것은 «별»만 남깁니다. · 성운은 채도를 낮추고 길쭉하게 기울여 겹쳐서 «흐린 원»으로 보이지 않게 합니다. · 별은 background-size 타일 반복 → 화면이 넓어져도 밀도가 유지됩니다. · 이동 거리는 타일 크기의 정수배라 이음매 없이 순환합니다. */ .pg-hero{position:relative;overflow:hidden;padding:clamp(60px,9vw,110px) 0 clamp(44px,6vw,72px);text-align:center} .pg-hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden; background: radial-gradient(ellipse 80% 60% at 74% 6%,rgba(92,44,150,.30),transparent 66%), radial-gradient(ellipse 70% 55% at 16% 18%,rgba(28,66,140,.26),transparent 66%), radial-gradient(ellipse 160% 120% at 50% -22%,#120c2c 0%,#0b0821 34%,#06040f 68%,#030208 100%)} /* ② 별 — 타일 반복 3겹 */ .pg-hero__stars{position:absolute;inset:-15%} .pg-hero__stars i{position:absolute;inset:0;display:block;background-repeat:repeat} .pg-hero__stars i:nth-child(1){opacity:.8;background-size:280px 280px; animation:pg-star-far 150s linear infinite; background-image: radial-gradient(1px 1px at 4% 9%,#fff,transparent), radial-gradient(1px 1px at 17% 31%,#cfe6ff,transparent), radial-gradient(1px 1px at 26% 71%,#fff,transparent), radial-gradient(1px 1px at 34% 12%,#fff,transparent), radial-gradient(1px 1px at 45% 52%,#e6d4ff,transparent),radial-gradient(1px 1px at 53% 88%,#fff,transparent), radial-gradient(1px 1px at 62% 24%,#fff,transparent), radial-gradient(1px 1px at 71% 63%,#cfe6ff,transparent), radial-gradient(1px 1px at 79% 38%,#fff,transparent), radial-gradient(1px 1px at 88% 80%,#ffd9f2,transparent), radial-gradient(1px 1px at 95% 17%,#fff,transparent), radial-gradient(1px 1px at 9% 58%,#fff,transparent), radial-gradient(1px 1px at 38% 94%,#cfe6ff,transparent),radial-gradient(1px 1px at 67% 6%,#fff,transparent), radial-gradient(1px 1px at 22% 47%,#fff,transparent), radial-gradient(1px 1px at 84% 55%,#fff,transparent)} .pg-hero__stars i:nth-child(2){opacity:.95;background-size:450px 450px; animation:pg-star-mid 210s linear infinite, pg-twinkle 5s ease-in-out infinite; background-image: radial-gradient(1.6px 1.6px at 11% 19%,#fff,transparent), radial-gradient(1.5px 1.5px at 29% 44%,#cfe6ff,transparent), radial-gradient(1.7px 1.7px at 42% 8%,#fff,transparent), radial-gradient(1.4px 1.4px at 57% 67%,#ffe9f6,transparent), radial-gradient(1.6px 1.6px at 68% 28%,#fff,transparent), radial-gradient(1.5px 1.5px at 81% 55%,#cfe6ff,transparent), radial-gradient(1.7px 1.7px at 92% 13%,#fff,transparent), radial-gradient(1.4px 1.4px at 21% 82%,#fff,transparent), radial-gradient(1.6px 1.6px at 49% 91%,#e6d4ff,transparent),radial-gradient(1.5px 1.5px at 76% 88%,#fff,transparent)} .pg-hero__stars i:nth-child(3){background-size:820px 820px; animation:pg-twinkle2 7s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(200,230,255,.8)); background-image: radial-gradient(2.2px 2.2px at 14% 22%,#fff,transparent), radial-gradient(2.4px 2.4px at 39% 61%,#dff2ff,transparent), radial-gradient(2.1px 2.1px at 58% 14%,#fff,transparent), radial-gradient(2.3px 2.3px at 84% 47%,#ffe9f6,transparent), radial-gradient(2.2px 2.2px at 70% 82%,#fff,transparent), radial-gradient(2.1px 2.1px at 26% 90%,#dff2ff,transparent)} @keyframes pg-star-far{to{transform:translate3d(-280px,280px,0)}} @keyframes pg-star-mid{to{transform:translate3d(450px,-450px,0)}} @keyframes pg-twinkle {0%,100%{opacity:.95}50%{opacity:.5}} @keyframes pg-twinkle2{0%,100%{opacity:1}45%{opacity:.55}} /* ③ 은하수 — 넓고 옅게, 별 위에 얇게 깔림 */ .pg-hero__milky{position:absolute;inset:-30%;filter:blur(40px);opacity:.55; background:linear-gradient(108deg, transparent 26%, rgba(120,100,190,.16) 40%, rgba(205,220,245,.13) 49%, rgba(70,140,200,.15) 58%, transparent 74%)} /* ④ 성운 — 길쭉하게 기울여 겹치고, 채도·밝기를 낮춤 */ .pg-hero__nebula{position:absolute;inset:0} .pg-hero__nebula i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform} .pg-hero__nebula i:nth-child(1){width:78vw;height:34vw;max-width:1400px;max-height:620px;top:-6%;left:-18%; opacity:.42;background:radial-gradient(ellipse,rgba(108,52,178,.9),rgba(60,26,110,.3) 46%,transparent 72%); animation:pg-neb1 34s ease-in-out infinite} .pg-hero__nebula i:nth-child(2){width:66vw;height:30vw;max-width:1180px;max-height:540px;top:-14%;right:-16%; opacity:.38;background:radial-gradient(ellipse,rgba(168,48,116,.8),rgba(96,22,66,.26) 46%,transparent 72%); animation:pg-neb2 40s ease-in-out infinite} .pg-hero__nebula i:nth-child(3){width:86vw;height:28vw;max-width:1560px;max-height:500px;bottom:-4%;left:6%; opacity:.34;background:radial-gradient(ellipse,rgba(30,120,190,.75),rgba(14,58,100,.24) 48%,transparent 74%); animation:pg-neb3 46s ease-in-out infinite} @keyframes pg-neb1{0%,100%{transform:translate3d(0,0,0) rotate(-14deg) scale(1)} 50% {transform:translate3d(5%,4%,0) rotate(-10deg) scale(1.1)}} @keyframes pg-neb2{0%,100%{transform:translate3d(0,0,0) rotate(16deg) scale(1)} 50% {transform:translate3d(-6%,4%,0) rotate(12deg) scale(1.08)}} @keyframes pg-neb3{0%,100%{transform:translate3d(0,0,0) rotate(-7deg) scale(1)} 50% {transform:translate3d(4%,-4%,0) rotate(-4deg) scale(1.12)}} /* ⑤ 유성 */ .pg-hero__shoot{position:absolute;inset:0;overflow:hidden} .pg-hero__shoot i{position:absolute;display:block;width:190px;height:1.5px;border-radius:2px;opacity:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 30%,#fff); filter:drop-shadow(0 0 6px rgba(200,230,255,.9));transform-origin:right center} .pg-hero__shoot i:nth-child(1){top:11%;right:6%; animation:pg-shoot 9s ease-in infinite 2s} .pg-hero__shoot i:nth-child(2){top:30%;right:33%;animation:pg-shoot 12s ease-in infinite 6s} .pg-hero__shoot i:nth-child(3){top:6%; right:63%;animation:pg-shoot 15s ease-in infinite 10s} @keyframes pg-shoot{ 0% {opacity:0;transform:translate3d(0,0,0) rotate(24deg) scaleX(.15)} 2.5% {opacity:1} 12% {opacity:.85;transform:translate3d(-440px,196px,0) rotate(24deg) scaleX(1)} 17%,100%{opacity:0;transform:translate3d(-540px,240px,0) rotate(24deg) scaleX(.5)}} /* ⑥ 행성 지평 — 원의 «윗선»이 곧 대기光 (뷰포트와 무관하게 고정) */ .pg-hero__planet{position:absolute;left:50%;top:84%;width:min(180vw,2000px);aspect-ratio:1; transform:translateX(-50%);border-radius:50%; background:radial-gradient(circle at 50% 10%,#1a1140 0%,#110a2e 24%,#08051a 52%,#03020a 78%); border-top:1px solid rgba(130,205,255,.45); box-shadow:0 -14px 54px rgba(0,150,220,.20),0 -44px 140px rgba(110,55,190,.20); animation:pg-planet 10s ease-in-out infinite} @keyframes pg-planet{ 0%,100%{box-shadow:0 -14px 54px rgba(0,150,220,.20),0 -44px 140px rgba(110,55,190,.20)} 50% {box-shadow:0 -20px 72px rgba(0,150,220,.32),0 -58px 175px rgba(110,55,190,.30)}} /* ⑦ 비네트 — 가운데는 건드리지 않고 가장자리만 자연스럽게 */ .pg-hero__vig{position:absolute;inset:0; background:radial-gradient(ellipse 105% 92% at 50% 44%,transparent 40%,rgba(3,2,8,.55) 78%,rgba(3,2,8,.85) 100%)} #pgParticles{position:absolute;inset:0;pointer-events:none;z-index:0} .pg-hero__in{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:0 20px; display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,22px)} .pg-hero__badge{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:999px; font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--pink); border:1px solid rgba(255,45,149,.4);background:rgba(255,45,149,.1);animation:pg-up .5s ease both} .pg-hero__badge b{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);animation:pg-pulse 1.1s ease-in-out infinite} .pg-hero__logo{animation:pg-float 5s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(124,58,237,.6))} .pg-hero__logo img{max-height:150px;width:auto;margin:0 auto} .pg-hero__h1{font-family:var(--f-disp);font-size:clamp(38px,7.6vw,86px);font-weight:700;line-height:1.02;letter-spacing:-.01em;animation:pg-up .7s .1s ease both} .pg-hero__h1 .l1{display:block;color:var(--wh);text-shadow:0 2px 18px rgba(3,2,8,.95),0 6px 46px rgba(3,2,8,.8)} .pg-hero__h1 .l2{display:block;background:linear-gradient(90deg,var(--cyan),var(--violet) 40%,var(--pink));background-size:200% auto; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pg-shimmer 4s linear infinite} .pg-hero__desc{font-size:clamp(15px,1.7vw,19px);color:#c9c0e2;text-shadow:0 2px 16px rgba(3,2,8,.95),0 4px 32px rgba(3,2,8,.75);line-height:1.85;max-width:600px;animation:pg-up .7s .2s ease both} .pg-hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px;animation:pg-up .7s .3s ease both} /* 통계 바 */ .pg-stats{position:relative;z-index:2;max-width:var(--W);margin:clamp(34px,5vw,56px) auto 0;padding:0 20px; display:grid;grid-template-columns:repeat(4,1fr);gap:12px;animation:pg-up .7s .4s ease both} .pg-stat{position:relative;overflow:hidden;text-align:center;padding:22px 12px;border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line);transition:.3s} .pg-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)} .pg-js .pg-stat::before{transform:scaleX(0)} .pg-stat:nth-child(1)::before{background:linear-gradient(90deg,var(--cyan),transparent)} .pg-stat:nth-child(2)::before{background:linear-gradient(90deg,var(--pink),transparent)} .pg-stat:nth-child(3)::before{background:linear-gradient(90deg,var(--violet),transparent)} .pg-stat:nth-child(4)::before{background:linear-gradient(90deg,var(--lime),transparent)} .pg-stats.on .pg-stat::before{transform:scaleX(1)} .pg-stat:hover{transform:translateY(-4px);border-color:var(--line2);background:rgba(255,255,255,.06)} .pg-stat__n{display:block;font-family:var(--f-disp);font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1;color:var(--wh)} .pg-stat:nth-child(1) .pg-stat__n{color:var(--cyan)} .pg-stat:nth-child(2) .pg-stat__n{color:var(--pink)} .pg-stat:nth-child(3) .pg-stat__n{color:#a78bfa} .pg-stat:nth-child(4) .pg-stat__n{color:var(--lime)} .pg-stat__l{margin-top:9px;font-size:13px;color:var(--gr)} /* ═════════ 7. 티커 ═════════ */ .pg-ticker{overflow:hidden;white-space:nowrap;padding:11px 0; background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(0,229,255,.12),rgba(255,45,149,.16)); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pg-ticker__in{display:inline-flex;animation:pg-ticker 26s linear infinite} .pg-ticker__in:hover{animation-play-state:paused} .pg-ticker__it{display:inline-flex;align-items:center;gap:10px;padding:0 30px;font-size:14px;font-weight:600;color:var(--tx)} .pg-ticker__it::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} /* ═════════ 8. 배너 슬라이더 ═════════ */ .pg-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg2)} .pg-slider__track{display:flex;transition:transform .6s cubic-bezier(.22,1,.36,1)} .pg-slide{flex:0 0 100%;position:relative;aspect-ratio:1320/380;min-height:190px;display:block;overflow:hidden} .pg-slide img{width:100%;height:100%;object-fit:cover} .pg-slide__ph{position:absolute;inset:0;background:linear-gradient(120deg,var(--bg3),#2a1a55 45%,#3d1440)} .pg-slide__ph::after{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:38px 38px} .pg-slide__body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:10px; padding:0 clamp(24px,5vw,64px);background:linear-gradient(90deg,rgba(10,6,22,.88) 0%,rgba(10,6,22,.55) 45%,transparent 80%)} .pg-slide__tag{align-self:flex-start} .pg-slide__t{font-family:var(--f-disp);font-size:clamp(22px,3.4vw,40px);font-weight:700;line-height:1.15;color:var(--wh);max-width:60%} .pg-slide__d{font-size:clamp(13px,1.4vw,16px);color:var(--gr);max-width:52%} .pg-slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%; display:grid;place-items:center;font-size:18px;color:var(--wh);background:rgba(10,6,22,.6);border:1px solid var(--line2); backdrop-filter:blur(6px);transition:.2s} .pg-slider__nav:hover{background:var(--cyan);color:#0a0616;border-color:transparent} .pg-slider__nav.prev{left:14px} .pg-slider__nav.next{right:14px} .pg-slider__dots{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;gap:7px} .pg-slider__dots button{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.3);transition:.25s} .pg-slider__dots button.on{width:24px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)} /* ═════════ 8-B. 콘텐츠 섹션 (에디터 본문) ═════════ main.css 는 전역 리셋을 쓰므로, 에디터로 쓴 글이 정상으로 보이도록 이 블록 안에서만 기본 문서 스타일을 되살립니다. */ .pg-intro{max-width:900px;margin:0 auto;font-size:15px;line-height:1.9;color:var(--gr);word-break:break-word} .pg-intro > *:first-child{margin-top:0} .pg-intro > *:last-child{margin-bottom:0} .pg-intro p{margin:0 0 1.1em} .pg-intro br{line-height:inherit} .pg-intro h1,.pg-intro h2,.pg-intro h3,.pg-intro h4{ font-family:var(--f-disp);color:var(--wh);line-height:1.35;margin:1.8em 0 .7em;font-weight:700} .pg-intro h1{font-size:clamp(24px,3vw,32px)} .pg-intro h2{font-size:clamp(21px,2.5vw,27px)} .pg-intro h3{font-size:clamp(18px,2vw,22px)} .pg-intro h4{font-size:17px} .pg-intro strong,.pg-intro b{color:var(--wh);font-weight:700} .pg-intro em,.pg-intro i{font-style:italic} .pg-intro a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px} .pg-intro a:hover{color:#7ef9ff} .pg-intro ul,.pg-intro ol{margin:0 0 1.1em;padding-left:1.4em} .pg-intro ul{list-style:disc} .pg-intro ol{list-style:decimal} .pg-intro li{margin:.35em 0} .pg-intro img{max-width:100%;height:auto;border-radius:12px;margin:1.2em auto;border:1px solid var(--line)} .pg-intro iframe,.pg-intro video{max-width:100%;border-radius:12px;margin:1.2em auto;display:block} .pg-intro blockquote{margin:1.2em 0;padding:14px 20px;border-left:3px solid var(--cyan); background:rgba(0,229,255,.05);border-radius:0 10px 10px 0;color:var(--tx)} .pg-intro hr{margin:2em 0;border:0;border-top:1px solid var(--line)} .pg-intro table{width:100%;margin:1.2em 0;border-collapse:collapse;font-size:14px} .pg-intro th,.pg-intro td{padding:10px 14px;border:1px solid var(--line);text-align:left} .pg-intro th{background:rgba(255,255,255,.04);color:var(--wh);font-weight:700} /* 에디터가 넣는 인라인 색상이 어두운 배경에서 안 보이는 경우 방지 */ .pg-intro [style*="color:#000"],.pg-intro [style*="color: #000"], .pg-intro [style*="color:black"]{color:var(--tx)!important} /* ═════════ 9. LIVE 채널 카드 ═════════ */ .pg-chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)} .pg-ch{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden; background:var(--bg2);border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .pg-ch::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:6;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)} .pg-ch:hover{transform:translateY(-8px)} .pg-ch:hover::before{transform:scaleX(1)} .pg-ch--cyan::before {background:linear-gradient(90deg,var(--cyan),transparent)} .pg-ch--pink::before {background:linear-gradient(90deg,var(--pink),transparent)} .pg-ch--violet::before{background:linear-gradient(90deg,var(--violet),transparent)} .pg-ch--lime::before {background:linear-gradient(90deg,var(--lime),transparent)} .pg-ch--gold::before {background:linear-gradient(90deg,var(--gold),transparent)} .pg-ch--cyan:hover {border-color:rgba(0,229,255,.45); box-shadow:0 22px 60px rgba(0,229,255,.16)} .pg-ch--pink:hover {border-color:rgba(255,45,149,.45);box-shadow:0 22px 60px rgba(255,45,149,.16)} .pg-ch--violet:hover{border-color:rgba(124,58,237,.5); box-shadow:0 22px 60px rgba(124,58,237,.2)} .pg-ch--lime:hover {border-color:rgba(201,243,29,.42);box-shadow:0 22px 60px rgba(201,243,29,.14)} .pg-ch--gold:hover {border-color:rgba(255,197,61,.45);box-shadow:0 22px 60px rgba(255,197,61,.16)} .pg-ch__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center} .pg-ch__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)} .pg-ch:hover .pg-ch__thumb img{transform:scale(1.06)} .pg-ch__ph{position:absolute;inset:0} .pg-ch--cyan .pg-ch__ph{background:linear-gradient(135deg,#04203a,#0a3f6b)} .pg-ch--pink .pg-ch__ph{background:linear-gradient(135deg,#2a0620,#5e1044)} .pg-ch--violet .pg-ch__ph{background:linear-gradient(135deg,#1b0940,#3a1580)} .pg-ch--lime .pg-ch__ph{background:linear-gradient(135deg,#0d2206,#1f4a0d)} .pg-ch--gold .pg-ch__ph{background:linear-gradient(135deg,#2b1e02,#5c400a)} .pg-ch__ph::after{content:'';position:absolute;inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(255,255,255,.02) 16px,rgba(255,255,255,.02) 17px)} .pg-ch__scan{position:absolute;left:0;right:0;height:70px;z-index:2; background:linear-gradient(transparent,rgba(0,229,255,.07),transparent);animation:pg-scan 3.6s linear infinite} .pg-ch__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(10,6,22,.9),transparent 58%)} .pg-ch__play{position:relative;z-index:3;width:60px;height:60px;border-radius:50%;display:grid;place-items:center; font-size:19px;color:var(--wh);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);opacity:0;transform:scale(.7);transition:.35s cubic-bezier(.34,1.56,.64,1)} .pg-ch:hover .pg-ch__play{opacity:1;transform:scale(1)} .pg-ch__badge{position:absolute;top:12px;left:12px;z-index:4} .pg-ch__meta{position:absolute;bottom:12px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:5px; padding:5px 12px;border-radius:6px;font-size:13px;font-weight:700;color:var(--wh); background:rgba(10,6,22,.72);border:1px solid var(--line2);backdrop-filter:blur(6px)} .pg-ch__body{flex:1;display:flex;flex-direction:column;gap:11px;padding:clamp(16px,2vw,22px)} .pg-ch__t{font-family:var(--f-disp);font-size:clamp(19px,2.1vw,24px);font-weight:700;line-height:1.2;color:var(--wh);transition:color .25s} .pg-ch--cyan:hover .pg-ch__t{color:var(--cyan)} .pg-ch--pink:hover .pg-ch__t{color:var(--pink)} .pg-ch--violet:hover .pg-ch__t{color:#a78bfa} .pg-ch--lime:hover .pg-ch__t{color:var(--lime)} .pg-ch--gold:hover .pg-ch__t{color:var(--gold)} .pg-ch__now{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--gr);line-height:1.55} .pg-ch__now b{flex-shrink:0;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pg-pulse 1.5s ease-in-out infinite} .pg-ch__now strong{color:var(--wh);font-weight:700} .pg-ch__hr{height:1px;background:var(--line)} .pg-ch__foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .pg-tags{display:flex;flex-wrap:wrap;gap:5px} .pg-tags span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--gr);background:rgba(255,255,255,.05);border:1px solid var(--line)} .pg-ch__enter{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:999px; font-size:13px;font-weight:700;color:var(--wh);background:rgba(255,255,255,.07);border:1px solid var(--line2);transition:.2s;white-space:nowrap} .pg-ch__enter:hover{background:var(--cyan);color:#0a0616;border-color:transparent;box-shadow:0 4px 18px rgba(0,229,255,.4)} /* ═════════ 11. 게임 그리드 ═════════ */ .pg-games{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.3vw,16px)} .pg-game{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--bg2); border:1px solid var(--line);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .pg-game:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.5);box-shadow:0 18px 44px rgba(0,229,255,.18)} .pg-game__thumb{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center} .pg-game__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)} .pg-game:hover .pg-game__thumb img{transform:scale(1.08)} .pg-game__ph{position:absolute;inset:0} .pg-game--cyan .pg-game__ph{background:linear-gradient(150deg,#04203a,#0b4b78)} .pg-game--pink .pg-game__ph{background:linear-gradient(150deg,#2a0620,#6b1250)} .pg-game--violet .pg-game__ph{background:linear-gradient(150deg,#1b0940,#42198f)} .pg-game--lime .pg-game__ph{background:linear-gradient(150deg,#0d2206,#255708)} .pg-game--gold .pg-game__ph{background:linear-gradient(150deg,#2b1e02,#6b4a08)} .pg-game__ph b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-disp); font-size:34px;font-weight:700;color:rgba(255,255,255,.22)} .pg-game__ov{position:absolute;inset:0;z-index:2;display:grid;place-items:center; background:rgba(10,6,22,.6);opacity:0;transition:.28s} .pg-game:hover .pg-game__ov{opacity:1} .pg-game__ov span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:16px; color:#0a0616;background:var(--cyan);box-shadow:0 0 24px rgba(0,229,255,.7);transform:scale(.7);transition:.28s cubic-bezier(.34,1.56,.64,1)} .pg-game:hover .pg-game__ov span{transform:scale(1)} .pg-game__badge{position:absolute;top:9px;left:9px;z-index:3} .pg-game__body{display:block;padding:11px 12px 13px} .pg-game__t{font-size:14px;font-weight:700;color:var(--wh);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em} .pg-game__sub{display:block;margin-top:4px;font-size:11px;color:var(--gr2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pg-game__meta{display:block;margin-top:7px;font-family:var(--f-disp);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--cyan)} /* ═════════ 11-A. 게임 정보 버튼 · 모달 ═════════ */ .pg-gamewrap{position:relative} .pg-game__info{position:absolute;top:9px;right:9px;z-index:4;width:24px;height:24px;border-radius:50%; display:grid;place-items:center;font-family:var(--f-disp);font-size:13px;font-weight:700;font-style:italic; color:var(--wh);background:rgba(10,6,22,.7);border:1px solid var(--line2); backdrop-filter:blur(4px);opacity:.65;transition:.2s} .pg-game__info:hover{opacity:1;color:#0a0616;background:var(--cyan);border-color:transparent; box-shadow:0 0 16px rgba(0,229,255,.6)} .pg-modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px} .pg-modal[hidden]{display:none} .pg-modal__bg{position:absolute;inset:0;background:rgba(3,2,10,.82);backdrop-filter:blur(6px);animation:pg-fade .25s ease} .pg-modal__box{position:relative;z-index:1;display:flex;width:min(760px,100%);max-height:86vh;overflow:hidden; border-radius:var(--r-lg);background:var(--bg2);border:1px solid var(--line2); box-shadow:0 30px 90px rgba(0,0,0,.7);animation:pg-pop .3s cubic-bezier(.22,1,.36,1)} @keyframes pg-fade{from{opacity:0}to{opacity:1}} @keyframes pg-pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}} .pg-modal__x{position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;font-size:24px;line-height:1;color:var(--wh); background:rgba(10,6,22,.6);border:1px solid var(--line2);transition:.2s} .pg-modal__x:hover{background:var(--pink);border-color:transparent} .pg-modal__img{flex:0 0 40%;position:relative;background:var(--bg3);overflow:hidden} .pg-modal__img img{width:100%;height:100%;object-fit:cover;display:block} .pg-modal__img:empty,.pg-modal__img.is-none{display:none} .pg-modal__body{flex:1;min-width:0;padding:clamp(20px,3vw,30px);overflow-y:auto} .pg-modal__t{font-family:var(--f-disp);font-size:clamp(20px,2.4vw,27px);font-weight:700;color:var(--wh);line-height:1.25} .pg-modal__sub{margin-top:5px;font-size:13px;color:var(--cyan);font-weight:600} .pg-modal__sub:empty{display:none} .pg-modal__desc{margin-top:14px;font-size:14px;line-height:1.75;color:var(--gr)} .pg-modal__desc:empty{display:none} .pg-modal__spec{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:1px; border-radius:10px;overflow:hidden;background:var(--line)} .pg-modal__spec:empty{display:none} .pg-modal__spec dt{padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--gr);background:rgba(255,255,255,.03);white-space:nowrap} .pg-modal__spec dd{padding:9px 14px;font-size:13px;font-weight:700;color:var(--wh);background:rgba(255,255,255,.015)} .pg-modal__go{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:11px 22px;border-radius:999px; font-size:14px;font-weight:800;color:#0a0616;background:linear-gradient(100deg,var(--cyan),#7ef9ff); box-shadow:0 4px 18px rgba(0,229,255,.32);transition:transform .2s,box-shadow .2s} .pg-modal__go[hidden]{display:none} .pg-modal__go:hover{transform:translateY(-2px);box-shadow:0 7px 26px rgba(0,229,255,.55)} /* ═════════ 11-B. 이용자 후기 (그누보드 게시판 연동) ═════════ */ .pg-rvwrite{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-bottom:clamp(16px,2vw,24px);padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px); border-radius:var(--r);border:1px solid var(--line); background:linear-gradient(100deg,rgba(0,229,255,.06),rgba(255,45,149,.05))} .pg-rvwrite__msg{font-size:14px;color:var(--gr)} .pg-rvwrite__msg b{color:var(--wh);font-weight:700} .pg-rvwrite__btn{flex-shrink:0;display:inline-flex;align-items:center;gap:7px; padding:11px 22px;border-radius:999px;font-size:14px;font-weight:800;color:#0a0616; background:linear-gradient(100deg,var(--cyan),#7ef9ff); box-shadow:0 4px 18px rgba(0,229,255,.32);transition:transform .2s,box-shadow .2s;white-space:nowrap} .pg-rvwrite__btn:hover{transform:translateY(-2px);box-shadow:0 7px 26px rgba(0,229,255,.55)} .pg-rvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)} .pg-rv{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--bg2); border:1px solid var(--line);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .pg-rv:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.45);box-shadow:0 18px 44px rgba(0,229,255,.16)} .pg-rv__thumb{position:relative;display:block;aspect-ratio:var(--rv-ar,16/9);overflow:hidden} .pg-rv__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)} .pg-rv:hover .pg-rv__thumb img{transform:scale(1.07)} .pg-rv__ph{position:absolute;inset:0} .pg-rv--cyan .pg-rv__ph{background:linear-gradient(140deg,#04203a,#0b4b78)} .pg-rv--pink .pg-rv__ph{background:linear-gradient(140deg,#2a0620,#6b1250)} .pg-rv--violet .pg-rv__ph{background:linear-gradient(140deg,#1b0940,#42198f)} .pg-rv--lime .pg-rv__ph{background:linear-gradient(140deg,#0d2206,#255708)} .pg-rv--gold .pg-rv__ph{background:linear-gradient(140deg,#2b1e02,#6b4a08)} .pg-rv__new{position:absolute;top:9px;left:9px;z-index:2; font-family:var(--f-disp);font-size:10px;font-weight:700;letter-spacing:.08em; padding:3px 8px;border-radius:4px;color:#0a0616;background:linear-gradient(90deg,var(--cyan),var(--lime))} /* 카드 본문 — 업체명과 혜택 문구를 가운데 정렬합니다. (배너 이미지가 가운데 정렬이라 글자만 왼쪽이면 어긋나 보입니다) */ .pg-rv__body{display:flex;flex-direction:column;flex:1;padding:14px 14px 16px;text-align:center} .pg-rv__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:15px;font-weight:700;line-height:1.4;color:var(--wh)} .pg-rv__t a{color:inherit;transition:color .25s} .pg-rv:hover .pg-rv__t,.pg-rv:hover .pg-rv__t a{color:var(--cyan)} /* 혜택 · 한 줄 설명 — 관리자 글쓰기의 «혜택 · 한 줄 설명» 칸. 업체를 고르는 기준이 되는 문구라 잘 읽히도록 밝게 둡니다. (3줄까지) */ .pg-rv__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; margin-top:8px;padding-top:9px;border-top:1px solid var(--line); font-size:12.5px;line-height:1.65;color:var(--gr)} /* 카드 아래 버튼 — «상세보기»(테두리) / «바로가기»(금색) 설명이 짧아도 버튼이 항상 카드 맨 아래에 붙도록 margin-top:auto 를 씁니다. */ .pg-rv__btns{display:flex;gap:8px;margin-top:auto;padding-top:12px} /* min-width:0 이 «반드시» 있어야 합니다. flex 항목은 기본값(min-width:auto)이면 글자 폭보다 작아지지 않아, 좁은 화면에서 버튼이 카드 밖으로 삐져나갑니다. */ .pg-rv__btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px; padding:10px 6px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:-.01em; white-space:nowrap; transition:transform .2s,background .2s,border-color .2s,color .2s,box-shadow .2s} .pg-rv__btn i{font-style:normal;transition:transform .2s} .pg-rv__btn.ghost{color:var(--tx);background:rgba(255,255,255,.05);border:1px solid var(--line2)} .pg-rv__btn.ghost:hover{color:var(--wh);background:rgba(124,58,237,.2); border-color:rgba(124,58,237,.6);transform:translateY(-2px)} .pg-rv__btn.gold{color:#0a0616;background:linear-gradient(90deg,var(--gold),#ffd76a); box-shadow:0 4px 16px rgba(255,197,61,.3)} .pg-rv__btn.gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,197,61,.48)} .pg-rv__btn.gold:hover i{transform:translateX(3px)} @media (max-width:767px){ .pg-rv__btns{gap:6px;padding-top:10px} .pg-rv__btn{padding:9px 5px;font-size:12.5px} } /* 아주 좁은 화면(2열 카드가 150px 남짓) — 버튼 두 개를 나란히 두면 글자가 잘립니다. 위아래로 쌓고 화살표를 뺍니다. */ @media (max-width:560px){ .pg-rv__btns{flex-direction:column;gap:6px} .pg-rv__btn{width:100%;padding:10px 4px;font-size:12.5px} .pg-rv__btn i{display:none} } .pg-rv__empty{padding:44px 16px;text-align:center;font-size:14px;color:var(--gr2); border:1px dashed var(--line2);border-radius:var(--r)} /* ═════════ 12. 이벤트 ═════════ */ .pg-events{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)} .pg-ev{position:relative;display:flex;align-items:stretch;gap:0;min-height:170px;border-radius:var(--r-lg);overflow:hidden; background:var(--bg2);border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s} .pg-ev:hover{transform:translateY(-5px);box-shadow:0 20px 52px rgba(0,0,0,.4)} .pg-ev--cyan:hover {border-color:rgba(0,229,255,.45)} .pg-ev--pink:hover {border-color:rgba(255,45,149,.45)} .pg-ev--violet:hover{border-color:rgba(124,58,237,.5)} .pg-ev--lime:hover {border-color:rgba(201,243,29,.42)} .pg-ev--gold:hover {border-color:rgba(255,197,61,.45)} .pg-ev__img{flex:0 0 38%;position:relative;overflow:hidden} .pg-ev__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .pg-ev:hover .pg-ev__img img{transform:scale(1.06)} .pg-ev__ph{position:absolute;inset:0} .pg-ev--cyan .pg-ev__ph{background:linear-gradient(135deg,#04203a,#0a3f6b)} .pg-ev--pink .pg-ev__ph{background:linear-gradient(135deg,#2a0620,#6b1250)} .pg-ev--violet .pg-ev__ph{background:linear-gradient(135deg,#1b0940,#3a1580)} .pg-ev--lime .pg-ev__ph{background:linear-gradient(135deg,#0d2206,#255708)} .pg-ev--gold .pg-ev__ph{background:linear-gradient(135deg,#2b1e02,#6b4a08)} .pg-ev__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(18px,2.2vw,26px)} .pg-ev__badge{align-self:flex-start} .pg-ev__t{font-family:var(--f-disp);font-size:clamp(18px,2.1vw,23px);font-weight:700;color:var(--wh);line-height:1.25} .pg-ev__sub{font-size:14px;font-weight:600;color:var(--cyan)} .pg-ev__d{font-size:13px;color:var(--gr);line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pg-ev__go{margin-top:4px;font-size:13px;font-weight:700;color:var(--gr)} .pg-ev:hover .pg-ev__go{color:var(--cyan)} /* ═════════ 13. 푸터 ═════════ */ .pg-ft{border-top:1px solid var(--line)} .pg-ft__in{max-width:var(--W);margin:0 auto;padding:clamp(22px,3vw,32px) 20px; display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .pg-ft__logo{opacity:.4;transition:opacity .3s} .pg-ft__logo:hover{opacity:.75} .pg-ft__logo img{max-height:46px;width:auto;margin:0 auto} .pg-ft__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px} .pg-ft__links a{font-size:12px;color:var(--gr2);transition:color .2s} .pg-ft__links a:hover{color:var(--cyan)} .pg-ft__copy{font-size:12px;line-height:1.8;color:rgba(155,143,184,.34)} /* 푸터 로그인 — 눈에 띄지 않게, 필요한 사람만 찾도록 */ .pg-ft__login{margin-top:4px;padding:7px 20px;border-radius:999px;font-size:12px;font-weight:600; color:var(--gr2);border:1px solid var(--line);transition:.2s} .pg-ft__login:hover{color:var(--wh);border-color:rgba(0,229,255,.45);background:rgba(0,229,255,.07)} .pg-top{position:fixed;right:20px;bottom:24px;z-index:150;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;font-size:17px;color:var(--wh); background:rgba(18,11,38,.9);border:1px solid var(--line2);backdrop-filter:blur(8px); opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s} .pg-top.on{opacity:1;visibility:visible;transform:none} .pg-top:hover{background:var(--cyan);color:#0a0616;border-color:transparent;box-shadow:0 6px 24px rgba(0,229,255,.5)} /* ═════════ 14. 반응형 ═════════ */ @media (max-width:1200px){ .pg-games{grid-template-columns:repeat(4,1fr)} } @media (max-width:1024px){ .pg-gnb{display:none} .pg-hd__toggle{display:grid;place-items:center} .pg-hd__in{gap:12px} .pg-hd__util{margin-left:auto} .pg-chgrid{grid-template-columns:repeat(2,1fr)} .pg-rvgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ :root{--hd-h:60px} .pg-hd__adm{display:none} /* 관리 작업은 데스크톱에서 */ .pg-stats{grid-template-columns:repeat(2,1fr)} .pg-chgrid{grid-template-columns:1fr} .pg-rvgrid{grid-template-columns:repeat(2,1fr)} .pg-rvwrite{flex-direction:column;align-items:stretch;text-align:center} .pg-modal__box{flex-direction:column;max-height:90vh} .pg-modal__img{flex:0 0 170px} .pg-rvwrite__btn{justify-content:center} .pg-games{grid-template-columns:repeat(3,1fr)} .pg-events{grid-template-columns:1fr} .pg-slide__t{max-width:100%;font-size:clamp(18px,4.6vw,26px)} .pg-slide__d{max-width:82%} .pg-slide__body{background:linear-gradient(90deg,rgba(10,6,22,.92) 0%,rgba(10,6,22,.7) 60%,rgba(10,6,22,.35) 100%)} .pg-slider__nav{width:34px;height:34px;font-size:15px} /* 배너 — 좁은 화면에서 잘리지 않게 PC 는 aspect-ratio 1320:380 + min-height 190px 로 높이를 잡습니다. 화면이 좁아지면 «비율로 계산한 높이»보다 min-height 가 커져 상자가 세로로 길어지고, object-fit:cover 가 그림의 좌우를 잘라 냅니다. → 높이를 그림에 맡겨 통째로 보이게 합니다. */ .pg-slide{aspect-ratio:auto;min-height:0} .pg-slide img{height:auto} .pg-slide__ph{position:relative;inset:auto;aspect-ratio:1320/380} /* 이벤트 카드 — 같은 이유로 132px 고정 높이를 풀어 줍니다. */ .pg-ev{flex-direction:column;min-height:0} .pg-ev__img{flex:0 0 auto} .pg-ev__img img{height:auto} .pg-ev__ph{position:relative;inset:auto;aspect-ratio:16/9} } @media (max-width:480px){ .pg-games{grid-template-columns:repeat(2,1fr)} /* 헤더가 좁아지므로 LIVE 버튼은 숨기고 모바일 메뉴 안의 버튼을 사용 */ .pg-hd__live{display:none} } /* ═════════ 16. 모바일 성능 최적화 ═════════ 모바일에서는 매 프레임 다시 그려야 하는 효과를 줄입니다. (box-shadow · background-position · backdrop-filter 애니메이션은 합성이 아닌 «페인트»를 유발해 저사양 기기에서 버벅임의 주원인) 시각적 손실은 거의 없고 TBT/INP 가 크게 좋아집니다. */ @media (max-width:768px){ /* 대형 회전 링 3개 — 화면 밖이라 보이지도 않으면서 계속 합성됨 */ /* 무거운 레이어 정리 — blur / 유성 / 반짝임 최소화 */ .pg-hero__nebula i{filter:blur(52px);animation:none} .pg-hero__nebula i:nth-child(3){display:none} .pg-hero__shoot{display:none} .pg-hero__milky{filter:blur(26px);opacity:.45} .pg-hero__stars i{animation:none} .pg-hero__planet{animation:none;top:88%} /* 반투명 블러: 모바일 GPU 부담이 큼 → 불투명 배경으로 대체 */ .pg-hd{backdrop-filter:none;background:rgba(10,6,22,.95)} .pg-hd.is-scrolled{backdrop-filter:none;background:#0a0616} .pg-mnav{backdrop-filter:none;background:#0a0616} .pg-ch__meta,.pg-badge--etc,.pg-slider__nav,.pg-top,.pg-ch__play{backdrop-filter:none} /* box-shadow 애니메이션 → 정지 (LIVE 배지) */ .pg-badge--live{animation:none;box-shadow:0 0 12px rgba(255,45,149,.55)} /* background-position 애니메이션 → 정지 (버튼·타이틀 반짝임) */ .pg-btn--primary{animation:none;background-position:0 0} .pg-hero__h1 .l2{animation:none;background-position:0 0} /* 카드 위를 훑는 스캔 라인 — 카드 수만큼 무한 반복 */ .pg-ch__scan{display:none} /* 히어로 그리드 패턴의 mask 연산 제거 */ } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .pg-js .rv{opacity:1;transform:none} .pg-js .pg-stat::before{transform:scaleX(1)} } /* ═════════ 15. 그누보드 연동 최소 스타일 ═════════ */ /* 관리자 > 팝업레이어(새창) — default.css 를 로드하지 않으므로 최소 규칙만 둡니다 */ #hd_pop{z-index:1000;position:relative;margin:0 auto;height:0} #hd_pop h2{position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{position:absolute;border:1px solid #2a2140;background:#fff;color:#000} .hd_pops img{max-width:100%} .hd_pops_con{overflow:auto} .hd_pops_footer{padding:0;background:#0a0616;color:#fff;text-align:left;position:relative} .hd_pops_footer:after{display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button{padding:10px;border:0;color:#fff;background:#0a0616;cursor:pointer;font-family:inherit} .hd_pops_footer .hd_pops_reject{text-align:left} .hd_pops_footer .hd_pops_close{position:absolute;top:0;right:0;background:#2a2140} /* ═══════════════════════════════════════════════════════ 하단 안내 박스 (#notice) — 공식 도메인 · 사칭 주의 안내 ═══════════════════════════════════════════════════════ */ /* 하단 안내 박스 — 위아래 여백을 0 으로 둡니다. .pg-sec 는 위아래 각각 clamp(52px,7vw,92px) 의 여백을 갖습니다. 섹션이 이어지면 두 여백이 «합쳐져» 두 배가 됩니다. 게시판(아래 92) + 안내박스(위 0) = 92 안내박스(아래 92) + 이벤트(위 92) = 184 ← 위아래가 2배 차이 여백을 0 으로 두면 앞뒤 섹션이 각각 92 씩 내주어 양쪽이 같아집니다. (안내 박스가 마지막일 때만 아래 여백을 되살립니다) */ .pg-sec--tight{padding-top:0;padding-bottom:0} .pg-sec--tight:last-of-type{padding-bottom:clamp(52px,7vw,92px)} .pg-notice{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))} .pg-notice__bar{display:flex;justify-content:space-between;align-items:center;gap:14px; padding:15px 28px;border-bottom:1px solid var(--line2); background:rgba(255,255,255,.03);font-size:14px;color:var(--gr2)} .pg-notice__bar span:last-child{flex-shrink:0;opacity:.75} .pg-notice__in{padding:34px 28px 36px} .pg-notice__hd{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin:0 0 22px} .pg-notice__badge{flex-shrink:0;padding:9px 16px;border-radius:8px; background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#07040f;font-size:14px;font-weight:800;letter-spacing:-.2px} .pg-notice__t{font-size:22px;font-weight:800;line-height:1.45;color:var(--wh)} .pg-notice__t strong{color:var(--cyan)} .pg-notice__body{font-size:16.5px;line-height:2.1;color:var(--gr1)} .pg-notice__body strong{color:var(--cyan);font-weight:700} @media (max-width:1023px){ .pg-notice__bar{padding:13px 20px;font-size:13px} .pg-notice__in{padding:26px 20px 28px} .pg-notice__t{font-size:19px} .pg-notice__body{font-size:15px;line-height:2} } @media (max-width:767px){ .pg-notice__bar{font-size:12px;padding:12px 16px} .pg-notice__bar span:last-child{display:none} .pg-notice__in{padding:22px 16px 24px} .pg-notice__hd{gap:10px;margin-bottom:16px} .pg-notice__badge{font-size:12.5px;padding:7px 13px} .pg-notice__t{font-size:16.5px} .pg-notice__body{font-size:14px;line-height:1.95} } /* ═══════════════════════════════════════════════════════ 보증업체 · 먹튀검증 카드 (프라그라이브 PARTNER 형) --------------------------------------------------------- · 마크업 : /skin/latest/prag_partner/latest.skin.php · 켜는 곳 : 관리자 > 메인 기본설정 > 게시판 연동 섹션 > 카드 스타일 · 일반 카드(.pg-rv)와 다른 점 - 로고가 잘리지 않도록 16:9 프레임 + object-fit:contain - 코드 배지 / 판정 배지 / 금색 «바로가기» 버튼 ═══════════════════════════════════════════════════════ */ /* 섹션 배경 — 카드가 도드라져 보이도록 뒤에서 은은하게 흐릅니다 */ .pg-sec--pt{position:relative;overflow:hidden} .pg-sec--pt > .pg-wrap{position:relative;z-index:2} .pg-ptbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .pg-ptbg i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform} .pg-ptbg .o1{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-10%;top:-18%; background:radial-gradient(circle,rgba(124,58,237,.5),transparent 70%);animation:pg-ptf1 22s ease-in-out infinite} .pg-ptbg .o2{width:40vw;height:40vw;max-width:540px;max-height:540px;right:-8%;top:10%; background:radial-gradient(circle,rgba(255,197,61,.24),transparent 70%);animation:pg-ptf2 26s ease-in-out infinite} .pg-ptbg .o3{width:38vw;height:38vw;max-width:500px;max-height:500px;left:35%;bottom:-22%; background:radial-gradient(circle,rgba(0,229,255,.26),transparent 70%);animation:pg-ptf3 30s ease-in-out infinite} .pg-ptbg .mesh{position:absolute;inset:-2px;border-radius:0;filter:none;opacity:1; background-image:linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 100%); mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 100%); animation:pg-ptmesh 40s linear infinite} @keyframes pg-ptf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.12)}} @keyframes pg-ptf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,10%) scale(1.15)}} @keyframes pg-ptf3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10%,-8%) scale(1.1)}} @keyframes pg-ptmesh{100%{background-position:64px 64px,64px 64px}} /* 카드 그리드 */ .pg-ptgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} .pg-pt{position:relative;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line2);border-radius:var(--r-lg); background:linear-gradient(180deg,#1a1035 0%,#120b26 100%); box-shadow:0 12px 34px rgba(0,0,0,.4); transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s,border-color .38s} .pg-pt:hover{transform:translateY(-9px);border-color:rgba(255,197,61,.55); box-shadow:0 28px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,197,61,.25)} /* 위쪽 그라데이션 선 — 마우스를 올리면 왼쪽에서 오른쪽으로 그어집니다 */ .pg-pt::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3; background:linear-gradient(90deg,var(--violet),var(--pink) 45%,var(--gold)); transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,1,.36,1)} .pg-pt:hover::after{transform:scaleX(1)} /* 로고 프레임 — 원본 비율을 지켜 «잘리지 않게» 넣습니다 */ .pg-pt__thumb{position:relative;display:block;text-decoration:none} .pg-pt__frame{position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:16/9;overflow:hidden;background:#07040f;border-radius:19px 19px 0 0} .pg-pt__frame img{width:100%;height:100%;object-fit:contain;display:block; transition:transform .5s cubic-bezier(.22,1,.36,1)} .pg-pt:hover .pg-pt__frame img{transform:scale(1.05)} .pg-pt__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#150c2e,#2c1b5c); font-family:var(--f-disp);font-size:30px;font-weight:700;color:rgba(155,143,184,.5)} .pg-pt__hover{position:absolute;inset:0;border-radius:19px 19px 0 0; display:flex;align-items:center;justify-content:center; background:rgba(10,6,22,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s} .pg-pt__hover b{font-size:13px;font-weight:700;color:var(--wh); border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 18px} .pg-pt:hover .pg-pt__hover{opacity:1} .pg-pt__new{position:absolute;top:10px;left:10px;z-index:2; font-family:var(--f-disp);font-size:10px;font-weight:700;letter-spacing:.08em; padding:3px 8px;border-radius:4px;color:#0a0616;background:linear-gradient(90deg,var(--cyan),var(--lime))} /* 판정 배지 (먹튀검증) — 게시판 «분류»가 그대로 올라옵니다 */ .pg-pt__vd{position:absolute;top:10px;right:10px;z-index:2; font-size:11.5px;font-weight:800;letter-spacing:-.01em;padding:5px 11px;border-radius:999px;color:#0a0616} .pg-pt__vd--safe{background:linear-gradient(90deg,var(--lime),#8fe000)} .pg-pt__vd--warn{background:linear-gradient(90deg,var(--gold),#ff9f1c)} .pg-pt__vd--bad {background:linear-gradient(90deg,var(--pink),#ff5c5c);color:#fff} .pg-pt__vd--etc {background:linear-gradient(90deg,var(--cyan),#4aa8ff)} /* 카드 본문 */ .pg-pt__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 16px 16px} .pg-pt__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .pg-pt__name{min-width:0;margin:0;font-size:clamp(16px,1.5vw,19px);font-weight:800;line-height:1.3; letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pg-pt__name a{color:var(--wh);text-decoration:none;transition:color .25s} .pg-pt:hover .pg-pt__name a{color:var(--gold)} .pg-pt__code{flex-shrink:0;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.06em; color:#0a0616;background:linear-gradient(90deg,#ffd76a,var(--gold));border-radius:999px;padding:5px 11px} .pg-pt__code b{font-weight:900} .pg-pt__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; margin:0;font-size:13px;line-height:1.65;color:var(--gr)} /* 버튼 */ .pg-pt__btns{display:flex;gap:8px;margin-top:auto;padding-top:2px} /* min-width:0 — 없으면 좁은 화면에서 버튼이 카드 밖으로 삐져나갑니다 */ .pg-pt__btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px; padding:11px 6px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:-.01em; text-align:center;text-decoration:none;white-space:nowrap; transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s} .pg-pt__btn i{font-style:normal;transition:transform .2s} .pg-pt__btn.gold{position:relative;overflow:hidden;isolation:isolate;color:#0a0616; background:linear-gradient(90deg,var(--gold),#ffd76a 25%,#ff9f1c 50%,#ffd76a 75%,var(--gold)); background-size:220%;animation:pg-ptshine 3s linear infinite,pg-ptglow 2.6s ease-in-out infinite} .pg-pt__btn.gold::before{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-18deg);animation:pg-ptsweep 3s ease-in-out infinite} .pg-pt__btn.gold:hover{transform:translateY(-2px);animation-duration:1.4s,1.4s} .pg-pt__btn.gold:hover i{transform:translateX(3px)} .pg-pt__btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--tx)} .pg-pt__btn.ghost:hover{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.6); color:var(--wh);transform:translateY(-2px)} @keyframes pg-ptshine{0%{background-position:0% 50%}100%{background-position:220% 50%}} @keyframes pg-ptsweep{0%{left:-65%}55%,100%{left:130%}} @keyframes pg-ptglow{0%,100%{box-shadow:0 4px 16px rgba(255,197,61,.3)} 50%{box-shadow:0 6px 26px rgba(255,197,61,.62),0 0 0 1px rgba(255,224,138,.35)}} @media (max-width:1023px){ .pg-ptgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ /* 모바일 렌더링 부하 감소 — 배경 오브 · 블러 · 반짝임을 멈춥니다 */ .pg-ptbg{display:none} .pg-pt__hover{display:none} .pg-pt__btn.gold{animation:none;background-size:100%;box-shadow:0 4px 14px rgba(255,197,61,.3)} .pg-pt__btn.gold::before{display:none} .pg-pt__body{padding:12px 13px 14px;gap:8px} .pg-pt__desc{font-size:12.5px;-webkit-line-clamp:2} .pg-pt__btn{padding:10px 5px;font-size:12.5px} } /* 아주 좁은 화면 — 버튼을 위아래로 쌓습니다 (글자 잘림 방지) */ @media (max-width:560px){ .pg-pt__btns{flex-direction:column;gap:6px} .pg-pt__btn{width:100%} .pg-pt__btn i{display:none} } @media (max-width:479px){ .pg-ptgrid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .pg-ptbg i,.pg-pt__btn.gold,.pg-pt__btn.gold::before{animation:none} .pg-pt__btn.gold::before{opacity:0} } /* ═══════════════════════════════════════════════════════ LIVE 채널 (#live) --------------------------------------------------------- · 마크업 : /main/main.php «LIVE 채널» 구역 · 등록 : 관리자 > LIVE 채널 · 카드 색은 항목의 «색상» 을 따릅니다. «골드» 로 고른 채널은 위쪽 띠가 항상 켜진 대표 채널이 됩니다. ═══════════════════════════════════════════════════════ */ .pg-chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(17px,2.2vw,26px)} /* 색상 — 카드마다 강조색과 썸네일 배경을 바꿉니다 */ .pg-ch--cyan {--ch:var(--cyan); --ch-rgb:0,229,255; --chb1:#04203a;--chb2:#0b4b78} .pg-ch--pink {--ch:var(--pink); --ch-rgb:255,45,149; --chb1:#2a0620;--chb2:#6b1250} .pg-ch--violet{--ch:#a78bfa; --ch-rgb:167,139,250;--chb1:#1b0940;--chb2:#42198f} .pg-ch--lime {--ch:var(--lime); --ch-rgb:201,243,29; --chb1:#0d2206;--chb2:#255708} .pg-ch--gold {--ch:var(--gold); --ch-rgb:255,197,61; --chb1:#2b1e02;--chb2:#6b4a08} .pg-ch{position:relative;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line);border-radius:19px;background:var(--bg2); transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s} .pg-ch:hover{transform:translateY(-12px);border-color:rgba(var(--ch-rgb),.45); box-shadow:0 28px 76px rgba(var(--ch-rgb),.18)} /* 위쪽 띠 — 마우스를 올리면 왼쪽에서 오른쪽으로 그어집니다 */ .pg-ch::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:5; background:linear-gradient(90deg,var(--violet),var(--ch)); transform:scaleX(0);transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.36,1)} .pg-ch:hover::before{transform:scaleX(1)} /* 대표 채널(골드) — 띠가 항상 켜져 있고 흐릅니다 */ .pg-ch.is-feat{border-color:rgba(255,197,61,.24);box-shadow:0 4px 32px rgba(255,197,61,.07)} .pg-ch.is-feat:hover{border-color:rgba(255,197,61,.5);box-shadow:0 28px 76px rgba(255,197,61,.16)} .pg-ch.is-feat::before{transform:scaleX(1);background-size:200%; background:linear-gradient(90deg,var(--gold),#fff2c4,var(--gold),#ff9f1c,var(--gold)); animation:pg-chshimmer 2.5s linear infinite} @keyframes pg-chshimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} /* 썸네일 */ .pg-ch__thumb{position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:16/9;overflow:hidden;text-decoration:none; background:linear-gradient(135deg,var(--chb1),var(--chb2))} .pg-ch__thumb img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .45s cubic-bezier(.22,1,.36,1)} .pg-ch:hover .pg-ch__thumb img{transform:scale(1.06)} /* 사선 결 + 아래쪽 어둡게 */ .pg-ch__thumb::before{content:"";position:absolute;inset:0;z-index:1; background:repeating-linear-gradient(45deg,transparent,transparent 18px, rgba(255,255,255,.02) 18px,rgba(255,255,255,.02) 19px)} .pg-ch__thumb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(10,6,22,.85) 0%,transparent 55%)} /* 위에서 아래로 훑고 지나가는 빛 */ .pg-ch__scan{position:absolute;left:0;right:0;height:96px;z-index:2; background:linear-gradient(transparent,rgba(var(--ch-rgb),.07),transparent); animation:pg-chscan 3s linear infinite} @keyframes pg-chscan{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}} .pg-ch__icon{position:relative;z-index:3;font-size:clamp(55px,7vw,82px);line-height:1; filter:drop-shadow(0 0 20px rgba(var(--ch-rgb),.55)); transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .3s} .pg-ch:hover .pg-ch__icon{transform:scale(1.18) translateY(-7px); filter:drop-shadow(0 0 30px rgba(var(--ch-rgb),.85))} /* LIVE 배지 */ .pg-ch__live{position:absolute;top:14px;left:14px;z-index:4; display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:4px; font-family:var(--f-disp);font-size:13px;font-weight:900;letter-spacing:.07em;color:#fff; background:#ff3737;animation:pg-chglow 2s ease-in-out infinite} .pg-ch__live b{width:6px;height:6px;border-radius:50%;background:#fff; animation:pg-pulse 1s ease-in-out infinite} @keyframes pg-chglow{0%,100%{box-shadow:0 0 8px rgba(255,55,55,.3)} 50%{box-shadow:0 0 22px rgba(255,55,55,.75)}} /* LIVE 가 아닌 배지(HOT · NEW 등)는 깜빡이지 않습니다 */ .pg-ch__live--hot{background:linear-gradient(90deg,var(--pink),#ff5c5c);animation:none} .pg-ch__live--new{background:linear-gradient(90deg,var(--cyan),var(--lime));color:#0a0616;animation:none} .pg-ch__live--etc{background:rgba(10,6,22,.8);border:1px solid var(--line2);animation:none} .pg-ch__live--hot b,.pg-ch__live--new b,.pg-ch__live--etc b{display:none} /* 시청자 수 */ .pg-ch__view{position:absolute;bottom:14px;right:14px;z-index:4; padding:5px 14px;border-radius:4px;border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.75);backdrop-filter:blur(6px); font-size:clamp(14px,1.4vw,17px);font-weight:700;color:var(--wh)} .pg-ch__view i{font-style:normal;opacity:.85} /* 본문 */ .pg-ch__body{display:flex;flex-direction:column;gap:13px;flex:1;padding:clamp(19px,2.5vw,26px)} .pg-ch__name{font-family:var(--f-disp);font-size:clamp(22px,2.6vw,31px);font-weight:700; line-height:1.1;letter-spacing:-.01em;color:var(--wh);transition:color .25s} .pg-ch:hover .pg-ch__name{color:var(--ch)} .pg-ch.is-feat .pg-ch__name{color:var(--gold)} .pg-ch__now{display:flex;align-items:flex-start;gap:8px;margin:0; font-size:clamp(13px,1.35vw,15.5px);line-height:1.5;color:var(--gr)} .pg-ch__now i{flex-shrink:0;width:6px;height:6px;margin-top:6px;border-radius:50%; background:var(--ch);box-shadow:0 0 7px var(--ch);animation:pg-pulse 1.4s ease-in-out infinite} .pg-ch__now strong{color:var(--wh);font-weight:700} .pg-ch__div{height:1px;background:linear-gradient(to right,rgba(255,255,255,.06),rgba(255,255,255,.02))} .pg-ch__foot{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:auto} .pg-ch__tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .pg-ch__tag{padding:3px 8px;border-radius:3px; font-size:clamp(11px,1.1vw,13px);font-weight:700;letter-spacing:.04em;color:var(--ch); background:rgba(var(--ch-rgb),.1);border:1px solid rgba(var(--ch-rgb),.22); transition:background .2s,border-color .2s} .pg-ch:hover .pg-ch__tag{background:rgba(var(--ch-rgb),.18);border-color:rgba(var(--ch-rgb),.45)} .pg-ch__btn{align-self:stretch;display:inline-flex;align-items:center;justify-content:center; padding:12px 19px;border-radius:6px;white-space:nowrap; font-size:clamp(13px,1.3vw,16px);font-weight:700;color:var(--ch); background:rgba(var(--ch-rgb),.12);border:1px solid rgba(var(--ch-rgb),.3); transition:background .2s,border-color .2s,box-shadow .2s,transform .2s} .pg-ch__btn:hover{background:rgba(var(--ch-rgb),.26);border-color:var(--ch); box-shadow:0 4px 19px rgba(var(--ch-rgb),.22);transform:translateY(-1px)} @media (max-width:1023px){ .pg-chgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ /* 모바일 렌더링 부하 감소 — 훑고 지나가는 빛과 블러를 멈춥니다 */ .pg-chgrid{grid-template-columns:1fr} .pg-ch__scan{display:none} .pg-ch__view{backdrop-filter:none;background:rgba(0,0,0,.85)} .pg-ch.is-feat::before{animation:none} .pg-ch:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .pg-ch__scan,.pg-ch__live,.pg-ch__live b,.pg-ch__now i,.pg-ch.is-feat::before{animation:none} }