/* Clean, BetterDocs-achtig maar neutraal */
:root{
  --kbs-gap: 24px;
  --kbs-radius: 14px;
  --kbs-border: 1px;
  --kbs-muted: rgba(0,0,0,.10);
  --kbs-muted-2: rgba(0,0,0,.06);
  --kbs-soft: #f7f8fb;
  --kbs-hero: linear-gradient(180deg, #fbfcff, #f4f6fb);
  --kbs-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.kbs-badge{display:inline-block;font-size:.78rem;line-height:1;border:1px solid var(--kbs-muted);padding:.35rem .55rem;border-radius:999px;text-decoration:none;background:#fff}

.kbs-hero{position:relative;margin:0 0 18px}
.kbs-hero:before{content:"";position:absolute;z-index:-1;left:50%;right:50vw;transform:translateX(-50%);top:0;bottom:0;background:var(--kbs-hero)}
.kbs-hero-inner{padding:80px 0;}
.kbs-hero-title{margin:0 0 4px;font-size:clamp(1.4rem, 2vw, 1.8rem)}
.kbs-hero-sub{margin:0;opacity:.7}

.kbs-archive-head{margin:16px 0 20px}
.kbs-archive-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kbs-archive-search input[type=search], .kbs-archive-search select{
  padding:.7rem .9rem;border:1px solid var(--kbs-muted);border-radius:12px;min-width:230px;background:#fff
}
.kbs-archive-search button{
  padding:.7rem 1rem;border:1px solid var(--kbs-muted);border-radius:12px;background:#fff;cursor:pointer;box-shadow:var(--kbs-shadow)
}


.kbs-grid{
  display:grid;
  gap:var(--kbs-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px){ .kbs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .kbs-grid{ grid-template-columns:1fr; } }

.kbs-card{background:#fff;border:var(--kbs-border) solid var(--kbs-muted-2);border-radius:var(--kbs-radius);overflow:hidden;display:flex;flex-direction:column;min-height:100%;box-shadow:var(--kbs-shadow);transition:transform .2s ease, box-shadow .2s ease}
.kbs-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.08)}
.kbs-card-thumb{display:block;aspect-ratio:16/9;background:linear-gradient(180deg,#f6f7f9, #f1f3f5)}
.kbs-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kbs-card-thumb--ph{display:block;width:100%;height:100%}
.kbs-card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.kbs-card-meta{display:flex;align-items:center;gap:10px;font-size:.85rem;opacity:.8}
.kbs-card-title{margin:0;font-size:1.05rem;line-height:1.3}
.kbs-card-excerpt{margin:0;color:#555}
.kbs-card-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kbs-muted);padding:8px 12px;border-radius:999px;text-decoration:none}

.kbs-pagination{margin-top:var(--kbs-gap)}
.kbs-pagination ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.kbs-pagination a, .kbs-pagination span{display:inline-block;padding:8px 12px;border:var(--kbs-border) solid var(--kbs-muted);border-radius:12px;text-decoration:none;background:#fff;box-shadow:var(--kbs-shadow)}
.kbs-pagination .current{background:#eef1f8}

.kbs-empty{opacity:.8}

/* Single layout with optional right TOC */
.kbs-article-grid{display:grid;grid-template-columns: minmax(0,1fr) 320px;gap:32px}
@media (max-width: 1100px){ .kbs-article-grid{grid-template-columns:1fr} }

.kbs-toc{position:sticky;top:120px;align-self:start}
.kbs-toc-inner{background:#fff;border:var(--kbs-border) solid var(--kbs-muted);border-radius:14px;padding:14px;box-shadow:var(--kbs-shadow)}
.kbs-toc-title{font-weight:600;margin:0 0 10px}
.kbs-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.kbs-toc-list a{text-decoration:none;border-left:2px solid transparent;padding:4px 6px 4px 10px;display:block}
.kbs-toc-list a.is-active{border-left-color:#999;background:#f7f8fb;border-radius:8px}
.kbs-toc-list .toc-h3 a{padding-left:18px;font-size:.92rem;opacity:.9}

.kbs-breadcrumbs-wrap{position:relative;margin:0 0 calc(var(--kbs-gap) * 1.25)}
.kbs-breadcrumbs-wrap::before{content:"";position:absolute;z-index:-1;left:50%;right:50vw;transform:translateX(-50%);top:0;bottom:0;background:var(--kbs-soft)}
.kbs-breadcrumbs{padding:.75rem 0;font-size:.9rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:var(--kbs-border) solid var(--kbs-muted-2)}
.kbs-breadcrumbs a{text-decoration:none}

.kbs-article-head{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--kbs-gap)}
.kbs-article-title{margin:.25rem 0 0}
.kbs-article-meta{opacity:.8;font-size:.95rem;display:flex;align-items:center;gap:10px}
.kbs-dot{opacity:.5}
.kbs-article-thumb{margin:10px 0 0}
.kbs-article-thumb img{border-radius:14px}

.kbs-article-content p{line-height:1.7}
.kbs-article-content img{max-width:100%;height:auto;border-radius:10px}

.kbs-related{margin-top:32px}
.kbs-related h2{margin:0 0 12px;font-size:1.1rem}
.kbs-related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kbs-related a{text-decoration:none}
.kbs-article-foot{margin-top:calc(var(--kbs-gap) * 1.25)}
.kbs-back{text-decoration:none;border:var(--kbs-border) solid var(--kbs-muted);padding:8px 12px;border-radius:999px;background:#fff;box-shadow:var(--kbs-shadow)}

.kbs-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
}
.kbs-toc-list a {
  text-decoration: none;
  color: #1f2937;
  border-left: 2px solid transparent;
  padding: 6px 6px 6px 10px;
  display: block;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.kbs-toc-list a:hover {
  background: #f9f5f0;
  border-left-color: #f97316;
}
.kbs-toc-list a.is-active {
  font-weight: bold;
  background: #fff4eb;
  border-left-color: #f97316;
}
.kbs-toc-list .toc-h3 a {
  padding-left: 20px;
  font-size: 0.92rem;
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .kbs-article-grid {
    padding-left: 200px;
  }
}