body {
  font-family: sans-serif;
  padding: 20px;
}

#tree-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.node {
  text-align: center;
  position: relative;
}

.node img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #333;
}

.connector {
  height: 20px;
  width: 2px;
  background-color: black;
  margin: 0 auto;
}

#intro {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
}

#search {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

#search input {
  margin: 5px;
  padding: 10px;
  width: 300px;
}

#search button {
  margin: 5px;
  padding: 10px 20px;
}

#suggestions {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  max-width: 300px;
  z-index: 10;
}

#suggestions div {
  padding: 5px;
  cursor: pointer;
}

.tree-block {
  display: inline-block;
  text-align: center;
  margin: 20px;
}

.tree-node {
  display: inline-block;
  padding: 10px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 10px;
  margin: 10px;
  width: 120px;
}

.tree-node img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #555;
}

.connect-line {
  width: 2px;
  height: 20px;
  background: #555;
  margin: 0 auto;
}

.subtree {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.label {
  font-size: 13px;
  margin-top: 5px;
  font-weight: bold;
}

.count {
  font-size: 11px;
  color: #666;
}


#suggestions div:hover {
  background: #eee;
}

#tree-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 20px;
}

.judge-wrapper {
    margin-bottom: 60px;
}

.judge-card {
    text-align: center;
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.judge-card img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
}

.judge-card h2 {
    margin: 15px 0 5px;
}

.judge-region {
    color: #666;
    margin-bottom: 10px;
}

.judge-count {
    font-weight: bold;
    color: #b22222;
}

.defendants-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));

    gap: 20px;
}

.defendant-card {

    background: white;

    border-radius: 12px;

    padding: 15px;

    text-align: center;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

    transition: .2s;
}

.defendant-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 6px 15px rgba(0,0,0,.12);
}

.defendant-card img {

    width: 100px;
    height: 100px;

    object-fit: cover;

    border-radius: 50%;
}

.defendant-name {

    margin-top: 10px;

    font-weight: bold;
}

.defendant-article {

    margin-top: 8px;

    color: #666;

    font-size: 14px;
}

.site-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    font-size:42px;
    font-weight:700;

    margin-bottom:20px;
}

.site-title img{
    width:160px;
    height:160px;
    object-fit:contain;
}