gpttemp

code/public/static/css/modules/recommend/recommend_04.css

@@ -0,0 +1,80 @@
+/* recommend_04.css */
+.__PFX__-recD-section{
+    margin:12px 10px 4px;
+    padding:8px 8px 10px;
+    border-radius:14px;
+    border:1px solid var(--color_border, var(--border-color));
+    background:var(--bg-color);
+}
+.__PFX__-recD-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:flex-end;
+    margin-bottom:6px;
+}
+.__PFX__-recD-caption{
+    font-size:14px;
+    font-weight:600;
+    display:flex;
+    align-items:center;
+    gap:6px;
+    color:var(--primary-color);
+}
+.__PFX__-recD-dot{
+    width:8px;
+    height:8px;
+    border-radius:50%;
+    background:var(--accent-color);
+}
+.__PFX__-recD-more{
+    font-size:11px;
+    color:var(--text-muted-color);
+}
+.__PFX__-recD-grid{
+    display:grid;
+    grid-template-columns:repeat(2,minmax(0,1fr));
+    gap:8px;
+}
+@media(min-width:768px){
+    .__PFX__-recD-grid{
+        grid-template-columns:repeat(3,minmax(0,1fr));
+    }
+}
+.__PFX__-recD-cell{}
+.__PFX__-recD-cellLink{
+    display:flex;
+    text-decoration:none;
+    gap:8px;
+    padding:5px 6px;
+    border-radius:10px;
+    background:var(--bg-soft-color);
+    color:var(--text-color, var(--text-primary-color));
+}
+.__PFX__-recD-thumbBox{
+    width:36%;
+    max-width:90px;
+    border-radius:8px;
+    overflow:hidden;
+    background:#000;
+}
+.__PFX__-recD-thumb{
+    width:100%;
+    aspect-ratio:2/3;
+    object-fit:cover;
+    display:block;
+}
+.__PFX__-recD-info{
+    flex:1;
+    min-width:0;
+}
+.__PFX__-recD-infoName{
+    font-size:12px;
+    line-height:1.3;
+    max-height:2.6em;
+    overflow:hidden;
+}
+.__PFX__-recD-infoSub{
+    margin-top:3px;
+    font-size:11px;
+    color:var(--text-muted-color);
+}