:root{
  --bg:#0b0f14;
  --panel:#111722;
  --panel-2:#0e141e;
  --text:#e7edf7;
  --muted:#a7b4c8;
  --brand:#61a0ff;
  --chip:#203047;
  --chip-on:#2a4670;
  --border:#1b2533;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif}

.wk-container{max-width:1120px;margin:0 auto;padding:0 16px}

.wk-header{
  background:linear-gradient(180deg,#0e1522, #0b0f14);
  border-bottom:1px solid var(--border);
}
.wk-title{margin:0;padding:32px 0 4px;font-size:32px;letter-spacing:.2px}
.wk-sub{margin:0 0 24px;color:var(--muted)}

.wk-controls{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  margin:22px 0 10px;
}
.wk-search input{
  width:min(680px, 100%); padding:12px 14px; font-size:14px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:12px; outline:none;
  box-shadow: var(--shadow);
}
.wk-search input::placeholder{color:#7f8aa1}
.wk-right{display:flex;gap:8px}
.wk-right select{
  appearance:none; padding:10px 12px; border-radius:10px;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  font-size:14px; box-shadow: var(--shadow);
}

.wk-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px;
}
.wk-tag{
  border:none; background:var(--chip); color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:12px;
  transition:transform .1s ease, background .2s ease, opacity .2s ease;
  border:1px solid var(--border);
}
.wk-tag:hover{ transform:translateY(-1px); opacity:.95 }
.wk-tag.is-active{ background:var(--chip-on); box-shadow: inset 0 0 0 1px #35507a }
.wk-clear{ background:transparent; color:var(--muted); border-style:dashed }

.wk-count{ margin:6px 0 12px; color:var(--muted); font-size:13px }

.wk-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width:960px){ .wk-grid{ grid-template-columns: repeat(2, 1fr)} }
@media (max-width:640px){ .wk-grid{ grid-template-columns: 1fr } }

.wk-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow);
  display:flex; flex-direction:column; min-height:100%;
}
.wk-thumb img{ width:100%; height:180px; object-fit:cover; display:block }
.wk-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px }
.wk-card-title{ margin:0; font-size:16px; line-height:1.4 }
.wk-card-title a{ color:var(--text); text-decoration:none }
.wk-card-title a:hover{ color:var(--brand) }
.wk-desc{ margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
.wk-meta{ display:flex; gap:10px; align-items:center; color:#8ea2c2; font-size:12px }
.wk-type{ background:#173055; color:#bcd4ff; padding:2px 8px; border-radius:999px; border:1px solid #27456f }
.wk-tagsline{ display:flex; flex-wrap:wrap; gap:6px }
.wk-chip{ background:#1c2b42; color:#b6c6dd; padding:4px 8px; border-radius:999px; font-size:11px; border:1px solid #2d425f }

.wk-empty{ color:var(--muted); padding:20px 2px }

.wk-footer{ margin:40px 0 28px; color:#7485a3 }
.wk-search-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.wk-search {
  width: 60%;
  max-width: 400px;
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: 25px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.2s ease;
}

.wk-search:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}
<style>
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.8;
}