.castio-streams-archive {
--gap: 16px
}
.castio-streams-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--gap);
margin: 0;
padding: 0;
list-style: none
}
.castio-stream-card {
border: 1px solid #e2e4e7;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
}
.castio-stream-thumb {
display: block;
position: relative;
background: #111
}
.castio-stream-thumb img {
display: block;
width: 100%;
height: auto
}
.castio-stream-body {
padding: 10px
}
.castio-stream-title {
margin: 0 0 6px;
font-weight: 600;
font-size: 15px
}
.castio-stream-excerpt {
margin: 0 0 8px;
color: #475569;
font-size: 13px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.castio-stream-meta {
margin: 0 0 8px;
color: #64748b;
font-size: 12px
}
.castio-badges {
display: flex;
flex-wrap: wrap;
gap: 6px
}
.castio-badge {
font-size: 12px;
background: #f1f1f1;
border-radius: 999px;
padding: 3px 8px;
border: 1px solid #e0e0e0
}
.castio-badge.pay {
background: #e3f2fd;
border-color: #bbdefb
}
.castio-badge.pw {
background: #fff3e0;
border-color: #ffe0b2
}
.castio-badge.login {
background: #e8f5e9;
border-color: #c8e6c9
}
.castio-badge.purchased {
background: #e8f5e9;
border-color: #a5d6a7;
color: #2e7d32
}
.castio-archive-pg {
margin-top: 14px;
display: flex;
gap: 8px;
align-items: center
}
.castio-watch {
display: inline-block;
margin-top: 6px;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #f8fafc;
color: #111;
text-decoration: none
}
.castio-watch:hover {
background: #eef2f7
} .castio-my-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px
}
.castio-card {
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
overflow: hidden;
display: flex;
flex-direction: column
}
.castio-card img {
display: block;
width: 100%;
height: auto;
background: #111
}
.castio-card .b {
padding: 10px 12px
}
.castio-card .t {
margin: 0 0 6px;
font-weight: 600
}
.castio-card .m {
margin: 0 0 8px;
color: #64748b;
font-size: 12px
}
.castio-card .x {
margin: 0 0 10px;
color: #475569;
font-size: 13px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden
}
.castio-card .a {
align-self: flex-start;
margin-top: auto;
margin: 0 0 12px 12px;
display: inline-block;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #f8fafc;
color: #111;
text-decoration: none
}
.castio-card .a:hover {
background: #eef2f7
}