body{
box-sizing: border-box;
background: #E4EBF5;
min-height: 100vh;
}
.broadcast-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));/*index.php var minCard = 300; 와 동일*/
padding: 1.5rem;
}
.popular-card {
display: flex;
overflow: hidden;
align-items: center;
width: 100%;
min-width: 0;
background-color: #E4EBF5;
border-radius: 16px;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7,-0.2rem -0.2rem 0.5rem #FFFFFF;
padding: 0.7rem;
opacity: 0;
transform: translateY(50px);
transition: transform 0.5s ease-out,
box-shadow 0.2s ease,
opacity 0.6s ease-out;
}
.popular-card.visible {
opacity: 1;
transform: translateY(0);
}
.popular-card:hover {
transform: translateY(-4px);
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
}

.popular-card .cardimg {
overflow: hidden;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 14px;
margin-right: 1rem;
flex-shrink: 0;
border: 0px solid #FFF;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
}
.popular-card .cardimg a img.img_container {
width: 120px;
height: 120px;
object-fit: cover;
transition: 1s ease-in-out;
}
.popular-card .info {
flex: 1;
overflow: hidden;
}
.game_title {
margin: 0 0 6px 0;
font-size: 0.85rem;
font-weight: 700;
color:#344A67;
}
.listen{
margin: 0;
font-size: 0.75rem;
color:#344A67;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.Loading {
margin: 0;
font-size: 0.75rem;
color:#344A67;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.play_button {
font-size: .9rem;
font-weight:700;
padding: 7px 20px;
margin: 10px 0 0;
max-width:90%;
text-align:center;
-webkit-appearance: none;
appearance: none;
background-color: #ff0081;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.play_button:hover {
transform: scale(1.03);
background-color:#FF3E9E;
}
.popular-card .cardimg a img.img_container:hover {
transform: scale(1.2);
filter: brightness(1.05) contrast(1.15) saturate(1.4) hue-rotate(-10deg);
/*filter: brightness(0.9) saturate(1.8);*/
}
.cast-button{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 8px;
}
.bubbly-button50.active {
background-color: #ff9800;
color: #fff;
}
.emoji-list .emoji {
display: inline-block;
width: 1rem;
/*vertical-align: middle;*/
vertical-align: -0.1em;
margin-right: 5px;
padding: 0;
line-height: 1;
}
.skeleton-card {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
background-color: #E4EBF5;
border-radius: 16px;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7,-0.2rem -0.2rem 0.5rem #FFFFFF;
padding: 0.7rem;
animation: cardBreathe 1.8s ease-in-out infinite;
}
.skeleton-card:nth-child(2n) { animation-delay: 0.25s; }
.skeleton-card:nth-child(3n) { animation-delay: 0.5s; }
@keyframes cardBreathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.82; }
}
.skeleton-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 14px;
margin-right: 1rem;
flex-shrink: 0;
background: linear-gradient(90deg, #dfe6f2 25%, #eef2f9 37%, #dfe6f2 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
.skeleton-thumb i {
font-size: 2rem;
color: #b9c6dc;
opacity: 0.4;
}
.skeleton-info {
flex: 1;
}
.skeleton-line {
height: 12px;
border-radius: 6px;
margin-bottom: 10px;
background: linear-gradient(90deg, #dfe6f2 25%, #eef2f9 37%, #dfe6f2 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
.skeleton-line.title { width: 62%; height: 13px; }
.skeleton-line.text { width: 88%; }
.skeleton-line.text.short { width: 50%; margin-bottom: 12px; }
.skeleton-pill {
width: 78px;
height: 26px;
border-radius: 13px;
background: linear-gradient(90deg, #ffc2de 25%, #ffe0ef 37%, #ffc2de 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}

@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 8px 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: #E4EBF5;
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;
}
.banner:hover { background: #f4f8fd; }
.icon-wrap {
flex-shrink: 0;
width: 32px;
height: 32px;
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;
animation: arrowBounce 1.5s ease-in-out infinite;
}