.archive-painter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.archive-painter a {
  cursor: pointer;
}

.archive-painter .notifications li.error {
  color: red;
}

.archive-painter .painter {
  background-color: var(--sotokabe-bbs-info-bg-color);
  border: solid 1px var(--sotokabe-bbs-info-border-color);
  word-break: break-all;
}

.archive-painter .painter .painter-title a {
  align-items: center;
  color: var(--sotokabe-bbs-info-head-color);
  display: flex;
  justify-content: space-between;
  padding: 20px;
  white-space: nowrap;
}
.archive-painter .painter .painter-title a:hover {
  color: var(--sotokabe-bbs-info-head-color);
  opacity: 1;
}

.archive-painter .painter .painter-title a::before {
  font-size: 1.4em;
  white-space: normal;
}

.archive-painter .painter .painter-info {
  background-color: var(--sotokabe-bbs-info-bg-color);
  display: flex;
}

.archive-painter .painter .painter-info .painter-info-image {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: calc(200px + 5vw);
  min-width: calc(200px + 5vw);
}
.archive-painter .painter .painter-info .painter-info-image:empty {
  display: none;
}

.archive-painter .painter .painter-info :is(.avatar-wrapper, .avatar-wrapper img) {
  max-height: calc(200px + 5vw);
}
.archive-painter .painter .painter-info .avatar-wrapper img {
  object-fit: contain;
}

.archive-painter .painter .painter-info ul {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
  width: 100%;
}

.archive-painter .painter .painter-info li {
  font-size: calc((200px + 5vw) / 6 / 1.5);
}

.archive-painter .painter .painter-info i {
  color: var(--sotokabe-bbs-info-icon-color);
}

.archive-painter .painter .painter-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
}

.archive-painter .painter .painter-info dt {
  align-items: center;
  background: color-mix(in srgb, var(--sotokabe-bbs-info-bg-color) 30%, #fff);
  color: var(--sotokabe-bbs-info-dt-color);
  display: flex;
  font-weight: bold;
  padding: 15px 5vw 15px 6vw;
  white-space: nowrap;
}
.archive-painter .painter .painter-info dt:nth-of-type(even) {
  background: color-mix(in srgb, var(--sotokabe-bbs-info-bg-color) 10%, #fff);
}

.archive-painter .painter .painter-info dd {
  align-items: center;
  background-color: var(--sotokabe-bbs-info-dd-bg-color);
  color: var(--sotokabe-bbs-info-dd-color);
  display: flex;
  padding: 10px;
}
.archive-painter .painter .painter-info dd:not(:first-of-type):last-of-type {
  border-bottom: none;
}

@media screen and (max-width:768px){
  .archive-painter .painter .painter-info {
    align-items: center;
    flex-direction: column;
  }

  .archive-painter .painter .painter-info .painter-info-image {
    max-height: none;
    width: 100%;
  }

  .archive-painter .painter .painter-info .avatar-wrapper {
    display: flex;
    justify-content: center;
  }
}