/* kfbeta16 — recs (from template-public-history.php) */
    #primary .entry-header {
        background: none; border: none; padding: 0 0 15px 0;
        margin-bottom: 25px; border-bottom: 3px solid #0073aa;
        display: flex; justify-content: space-between; align-items: flex-end;
    }
    #primary .entry-title {
        color: #ffffff; font-size: 1.8em; font-weight: 700;
        margin: 0; padding: 0; line-height: 1.3;
        font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; 
    }

    .ext-json-grid { display: grid; gap: 15px; margin-top: 20px; grid-template-columns: repeat(2, 1fr);  }
    @media (min-width: 768px) { .ext-json-grid { grid-template-columns: repeat(4, 1fr); } }
    
    .ext-json-item { background-color: #1e1e1e; border-radius: 8px; overflow: hidden; border: 1px solid #333; transition: transform 0.2s ease; position: relative; }
    .ext-json-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    .ext-json-item a { text-decoration: none; }
    
    .ext-json-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background-color: #1a1a1a; }
    .ext-json-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s; }
    .ext-json-thumb img.loaded { opacity: 1; }

    .watcher-badge {
        position: absolute; top: 8px; left: 8px; 
        background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px);
        color: #fff; padding: 3px 8px; border-radius: 4px; 
        font-size: 0.75em; font-weight: bold; z-index: 2;
        display: flex; align-items: center; gap: 5px; border: 1px solid #444;
    }
    .watcher-icon { color: #4caf50; font-size: 1.1em; }

    .ext-json-info { padding: 12px; }
    .ext-json-name { font-size: 0.9em; font-weight: bold; color: #eee; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Malgun Gothic', sans-serif; }
    
    .ext-json-meta { font-size: 0.8em; color: #999; margin-top: 6px; display: flex; justify-content: space-between; }
    .view-time { color: #61dafb; }

    #pagination-container { 
        display: flex; justify-content: center; align-items: center; gap: 5px; 
        margin-top: 40px; padding-bottom: 30px; 
    }
    .page-btn { 
        padding: 8px 14px; background: #2c2c2c; color: #aaa; 
        border: 1px solid #444; border-radius: 4px; cursor: pointer; 
        font-weight: bold; transition: all 0.2s;
    }
    .page-btn:hover:not(:disabled) { background: #3f3f3f; color: #fff; }
    .page-btn.active { background: #0073aa; color: #fff; border-color: #0073aa; }
    .page-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #222; }
    
    .page-info-text { color: #888; margin: 0 10px; font-size: 0.9em; }

    @keyframes sk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    .skeleton {
        background: #2a2a2a;
        background-image: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
        background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
    }
    .skeleton-card { background: #1e1e1e; border-radius: 8px; overflow: hidden; border: 1px solid #333; }
    .skeleton-thumb { width: 100%; aspect-ratio: 16/9; display: block; }
    .skeleton-text { height: 16px; margin: 12px; width: 80%; border-radius: 4px; }

    .status-msg { text-align: center; padding: 50px; color: #777; font-style: italic; }