@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@300;400;500;600;700&family=The+Nautigal:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
@font-face {
font-family: 'Tenada';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family:'PyeongChangPeace-Bold';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight:700;
font-style:normal;
}
:root{
--bg: #E4EBF5;
--bg-alt: #f4f5f8;
--surface: #ffffff;
--line: #eaebf1;
--line-strong: #dcdee6;
--text: #344A67;
--text-dim: #6b7080;
--text-faint: #9ea3b0;
--accent: #2f6fed;
--accent-deep: #344A67;
--accent-soft: #eaf1ff;
--accent-ink: #ffffff;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 12px;
--shadow-card: 0 1px 2px rgba(20,22,31,0.04), 0 6px 16px rgba(20,22,31,0.05);
--shadow-pop: 0 10px 24px rgba(20,22,31,0.10);
--ease: cubic-bezier(.22,.9,.32,1.1);
--section-gap: 10px;
}
*{padding:0;margin:0;box-sizing:border-box;}
*,:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
margin: 0;
padding: 0;
font-family:"NEXON Lv1 Gothic OTF","Noto Sans KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, sans-serif;
background-color: var(--bg);
color: var(--text);
text-shadow:none;
padding-bottom:120px;
-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar {
width: 7px;
background:var(--bg);/*#724ae8 #344A67*/
}
::-webkit-scrollbar-thumb {
background: linear-gradient(transparent, #bbcce6, transparent);
border-radius:7px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(transparent, #0FFFF0, transparent);
}
a {
color: var(--text);
text-decoration-line:none;
color:inherit;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
outline: none;
}
input:focus {
outline: none;
}
button{
cursor:pointer;
text-shadow:none;
font-family:inherit;
}
ul li {
list-style: none;
}
.fontAwesome {
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free","NEXON Lv1 Gothic OTF", sans-serif;
font-weight:600;
}
#smartweb{
position: relative;
}
/* ===================== TOP NAV ===================== */
.top-naviagation{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
z-index: 20;
width: 100%;
}
.fire_games-nav {
width: 100vw;
height: 58px;
border: none;
padding: 0px;
margin: 0px;
color: #FFF;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
box-shadow: 0 3px 9px -3px rgba(0,0,0,.12);
background-image:none;
position:relative;
}
.fire_games-nav::before{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(46,74,224,.25), transparent);
}

.fire_games_logo a{
color:var(--text);
background:transparent;
font-size:1.02rem;
font-family:"PyeongChangPeace-Bold","NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight:800;
letter-spacing:.02em;
text-shadow:none;
display:inline-flex;
align-items:center;
gap:8px;
}
.fire_games_logo a::before{
content:"\f445"; /* fa-solid fa-tv */
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:900;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px; height:32px;
border-radius:10px;
color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
font-size:.85rem;
box-shadow:0 4px 10px rgba(46,74,224,.35);
}
.fire_games_logo{
position:absolute;
top:50%;
left:16px;
transform:translate(0,-50%);
background:transparent;
}
.power a i{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:50%;
color: #FFF !important;
background: rgba(0, 0, 0, 0.2);
font-size: 0.85rem;
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free", sans-serif;
text-shadow:none;
letter-spacing:0.1px;
}
.power{
position: absolute;
top:50%;
right:20px;
transform:translate(0%,-50%);
display:flex;
align-items:center;
}
.power a{
margin-left:16px;
color: var(--text-dim);
transition: color 140ms var(--ease);
}
.power a:active{ color: var(--accent); }
/* ===================== PAGE LAYOUT ===================== */
.wrapper {
position: absolute;
top: 58px;
width: 100%;
text-align: left;
padding-bottom: 60px;
background: var(--bg-alt);
}
/* ---- 섹션 세로 리듬: 예외 없이 이 규칙 하나로만 통일 ---- */
section{
display:block;
width:100%;
max-width:96vw;
margin:0 auto;
padding: 0 14px;
}
section:first-of-type{
margin-top: 18px;
}
section + section{
margin-top: var(--section-gap);
}
.section-title{
position:relative;
display:inline-block;
font-size:0.9rem;
font-weight:700;
color:var(--text);
margin:10px 0 12px 2px;
letter-spacing:-0.2px;
}
.section-title i{
margin-right:6px;
}
/* ===================== SEARCH SECTION ===================== */
.my-container{
position: relative;
white-space : normal;
width:100%;
height:46px;
min-width:0;
max-width:96vw;
margin:10px 0;
padding:0px;
text-align:center;
}
.my-input{
position: absolute;
top:0px;
left:0px;
width:100%;
height:46px;
line-height:46px;
margin-right:0px;
padding:0 84px 0 18px;
font-size:0.8em;
font-weight:600;
color: var(--text);
border-radius: 23px;
text-align: left;
border:1px solid var(--line-strong);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.my-input::placeholder{
color: var(--text-faint);
text-shadow:none;
}
.my-close-btn{
position: absolute;
top:5px;
right:5px;
cursor:pointer;
color: #fff;
border:0px;
width:74px;
height:36px;
border-radius:18px;
font-weight:700;
font-size:0.82em;
background: var(--accent);
box-shadow:none;
transition: transform 140ms var(--ease), filter 140ms var(--ease);
}
.my-close-btn:active{
transform: scale(0.95);
filter: brightness(0.92);
}
/* ===================== 바로가기 / 더보기 : 단일 컬러 아이콘 4열 그리드 ===================== */
.menu-section .page_categories,
.menu-section .page_categories2,
.menu-section--secondary .page_categories2{
width: 100%;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
gap: 8px 4px;
align-items:start;
text-align:center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 16px 6px;
}
.gallery {
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 6px 2px 8px;
border-radius: var(--radius-sm);
transition: background-color 140ms var(--ease), transform 140ms var(--ease);
}
.gallery:active{
background-color: var(--bg-alt);
transform: scale(0.95);
}
.gallery h1{
position: static;
transform: none;
width: 100%;
height:auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
white-space: normal;
overflow: visible;
color: var(--text);
font-size: 0.66rem;
font-weight:700;
line-height:1.25;
}
.gallery h1 a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:6px;
width:100%;
}
/* 아이콘 폰트(<i>)와, 이모지만 있던 항목에 새로 감싼 <span class="gallery-icon">
둘 다 완전히 동일한 배지 스타일을 받도록 통일 — 항목별로 아이콘이
있다 없다 하며 깨져 보이던 문제의 원인 자체를 제거 */
.gallery h1 i,
.gallery h1 .gallery-icon{
font-size: 1.2rem;
line-height:1;
color: var(--accent);
width: 38px;
height: 38px;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
background: var(--accent-soft);
border-radius: 12px;
}
.gallery h1 .gallery-icon{
font-size: 1.05rem;
}

/* ===================== 인기 콘텐츠 / VIP 콘텐츠 : 3열 그리드, 스크롤 없음 ===================== */
.popular_games {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 10px;
width: 100%;
margin: 0;
padding: 0;
}
.popular-card {
position:relative;
width: 100%;
height: auto;
margin: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
overflow:hidden;
display:flex;
flex-direction:column;
}
.popular-card:active{
transform: scale(0.97);
box-shadow: var(--shadow-pop);
}

/* 색상 클래스 이름은 기존 그대로 유지(기능 무관하게 선택자 보존),
다만 카드마다 색이 제각각이던 것을 그만두고 하나의 절제된
톤으로 통일 — 재생 아이콘 오버레이만 공통으로 사용 */
.shooting, .sports, .fighting, .racing, .racing2, .purple, .pink, .pink2,
.yllow, .yllow2, .AQAyellow, .REDyllow, .PUY, .YllowPink, .girls, .RBG{
background: var(--surface);
}

.popular-card .img_container{
width: 100%;
height: 96px;
margin: 0;
border-radius: 0;
object-fit: cover;
object-position: center;
display:block;
background: var(--bg-alt);
}
.popular-card::after{
content:"";
position:absolute;
top:72px;
right:8px;
width:22px;
height:22px;
border-radius:50%;
background: var(--accent);
box-shadow: 0 3px 8px rgba(47,111,237,0.30);
z-index:2;
pointer-events:none;
}
.popular-card::before{
content:"";
position:absolute;
top:79px;
right:15.5px;
border-style: solid;
border-width: 4px 0 4px 7px;
border-color: transparent transparent transparent #fff;
z-index:3;
pointer-events:none;
}

.game_title {
color: var(--text);
font-size:0.76em;
font-weight:700;
margin: 9px 9px 0;
text-align: center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.download_button {
color: var(--accent-deep);
width: calc(100% - 18px);
border: none;
padding: 6px 0;
outline: none;
background: var(--accent-soft);
margin: 7px 9px 9px;
font-size: 0.66em;
font-weight:700;
border-radius: 999px;
text-decoration: none;
box-shadow:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition: 140ms ease-in-out;
}
/* ===================== FOOTER ===================== */
.footer{
font-family:"NEXON Lv1 Gothic OTF","Noto Sans KR", "Malgun Gothic" ,Georgia, helvetica, meiryo, sans-serif;
color: var(--text-faint);
font-size:0.74rem;
font-weight:500;
text-shadow: none;
margin: var(--section-gap) auto 8px;
padding: 20px 14px 0;
z-index:10;
text-align:center;
letter-spacing:0.2px;
max-width:720px;
}
.footer span {
font-weight:700;
color: var(--accent);
position: relative;
top: 2px;
display: inline-block;
-webkit-animation: bounce .3s ease infinite alternate;
animation: bounce .3s ease infinite alternate;
}

.footer span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
.footer span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }
.footer span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.footer span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }
.footer span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }
.footer span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.footer span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }
.footer span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; }
.footer span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; }
.footer span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.footer span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.footer span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.footer span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

@-webkit-keyframes bounce {
100% {
top: -2px;
}
}
@keyframes bounce {
100% {
top: -2px;
}
}
/* ===================== VIP SECTION ===================== */
.vip-section .page_categories{
background:none;
border:none;
box-shadow:none;
padding:0;
display:block;
}
.vipview{
display:none;
}
.vip_on{
font-size: 0.86rem;
font-weight:800;
letter-spacing: 0.2px;
text-transform: none;
color: var(--accent-deep);
}
.vipgallery {
position: relative;
width: 100%;
max-width:96vw;
height: auto;
min-height:50px;
margin: 0 auto 10px;
padding: 10px 14px;
border-radius: var(--radius-md);
background: var(--accent-soft);
border: 1px solid var(--line);
box-shadow:none;
transition: 200ms ease-in-out;
display:flex;
align-items:center;
justify-content:center;
}
.vipgallery h1{
width: auto;
max-width:100%;
display: flex;
align-items:center;
justify-content:center;
gap:8px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
color: var(--accent-deep);
font-size: 0.82rem;
font-weight:700;
position: static;
transform:none;
}

#policeaudioControl {
position:fixed;
top:12px;
left:50%;
transform:translateX(-50%);
font-size: 1.7rem;
cursor: pointer;
user-select: none;
z-index:99;
filter: drop-shadow(0 2px 6px rgba(20,22,31,0.25));
transition: transform 140ms var(--ease);
}
#policeaudioControl:active{
transform:translateX(-50%) scale(0.9);
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.blink {
animation: blink 1.1s infinite;
color: var(--accent);
}

.rotate-icon {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.rotate-vip {
color: var(--accent);
transition: transform 0.3s ease;
}

/* ===================== SCROLL TOP/BOTTOM FAB ===================== */
#up{
display:none;
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.heroEffectsarrow {
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
}
.heroEffectsbouncy {
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#up svg{
transform: scaleY(-1);
}
#up svg polygon, .heroEffectsarrow svg polygon{
fill: #ffffff;
stroke: var(--accent);
stroke-width: 1.4;
}
@-webkit-keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}

@keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}

/* ===================== MODAL ===================== */
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(20,22,31,0.45);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
display: none; z-index: 9998;
}
.modal-box {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: var(--surface);
padding: 30px 24px;
width:88%;
max-width:360px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center; line-height: 1.6;
font-size: 14px; z-index: 9999;
color: var(--text);
box-shadow: var(--shadow-pop);
}
.modal-box button {
margin: 20px 8px 0 8px; padding: 11px 22px;
font-size: 14px; border: none; border-radius: 30px;
color: #fff; font-weight:700;
background: var(--accent);
cursor: pointer; box-shadow:none;
transition: transform 140ms var(--ease), filter 140ms var(--ease);
}
.modal-box button:active {
transform: scale(0.96);
filter: brightness(0.92);
}
#modalNo{
background: var(--bg-alt);
color: var(--text);
box-shadow: none;
border: 1px solid var(--line);
}

#toast{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
color:#fff;
font-size:15px;
font-weight:600;
opacity:0;
visibility:hidden;
transition:opacity .25s ease;
z-index:99999999;
pointer-events:none;
}
#toast.show{
opacity:1;
visibility:visible;
}
#toast span{
padding:14px 24px;
background:rgba(0,0,0,.85);
border-radius:12px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes arrowBounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(55,138,221,0.3); }
70% { box-shadow: 0 0 0 14px rgba(55,138,221,0); }
100% { box-shadow: 0 0 0 0 rgba(55,138,221,0); }
}
.cast-samsung {
margin: 0 25px;
}
.cast-samsung a:hover {
color: #3b82f6;
}
.banner {
display: flex;
align-items: center;
gap: 12px;
padding: 0.85rem 1.1rem;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
border: 1px solid #b5d4f4;
border-left: 3px solid #378ADD;
border-radius: 8px;
margin: 1.5rem auto 0;
animation: fadeIn 0.45s ease both;
text-decoration: none;
transition: background 0.15s;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
cursor: pointer;
}
.banner:hover { background: #f7f9fd }
.icon-wrap {
flex-shrink: 0;
width: 45px;
height: 45px;
border-radius: 8px;
background: #e6f1fb;
display: flex;
align-items: center;
justify-content: center;
animation: pulseRing 2.5s ease-in-out infinite;
}
.banner-text {
flex: 1;
font-size: .75rem;
line-height: 1.5;
margin: 0;
}
.banner-text strong { font-weight: 700;}
.arrow {
flex-shrink: 0;
margin-left: auto;
cursor: pointer;
animation: arrowBounce 1.5s ease-in-out infinite;
}
.copy-toast{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.85);
color:#fff;
padding:12px 22px;
border-radius:8px;
font-size:.85rem;
z-index:999999999;
opacity:0;
visibility:hidden;
transition:.25s;
pointer-events:none;
}
.copy-toast.show{
opacity:1;
visibility:visible;
}