/*
 * 목록·그림 보기·관리 목록 화면.
 */

/* ---------- 태그 꼬리표 목록 (꼬리표는 줄을 바꾸지 않으므로 줄바꿈은 여기서) ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.tags li::before {
  content: none;
}

.tags li[hidden] {
  display: none;
}

.tag-more {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--text-small);
}

.tags data {
  margin-left: 0.25em;
  font-size: var(--text-small);
}

.tag-group-name {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-small);
}

.tag-group-name::before {
  content: "●";
  margin-right: 0.4em;
  color: var(--category-color, var(--muted));
}

.sidebar-search {
  margin-bottom: var(--space-3);
}

.sidebar-search kot-text-field {
  width: 100%;
}

/* ---------- 목록 제목 줄: 영문 머리글 + 굵은 제목 + 한 줄 설명, 오른쪽 손글씨 한마디 ---------- */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.list-eyebrow {
  margin: 0;
  color: var(--kot-color-accent-text);
  font-size: 0.6875rem;
  font-weight: bold;
  letter-spacing: 0.15em;
}

.list-heading {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.list-lede {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}

.list-hand {
  margin: 0;
  color: var(--site-accent-large);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  transform: rotate(-3deg);
}

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.list-count {
  margin: 0;
  font-weight: bold;
}

.list-kind ul {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}

.list-kind li::before {
  content: none;
}

.list-kind a[aria-current="page"] {
  font-weight: bold;
}

/* 정렬: "날짜 최신순 ▾" 글자를 누르면 고르는 칸 (<details>, JS 없이도) */
.sort-picker {
  position: relative;
  margin-left: auto;
  font-size: var(--text-small);
}

.sort-picker summary {
  cursor: pointer;
  list-style: none;
}

.sort-picker summary::-webkit-details-marker {
  display: none;
}

.sort-picker ul {
  position: absolute;
  right: 0;
  z-index: 5;
  min-width: 10em;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid currentColor;
  border-radius: 8px;
  background: var(--hd-paper, #fff);
  list-style: none;
}

.sort-picker li::before {
  content: none;
}

.sort-picker a {
  display: block;
  padding: var(--space-1) 0;
  color: inherit;
}

.sort-picker a[aria-current="true"] {
  font-weight: bold;
  color: var(--kot-color-accent-text);
}

.list-mode {
  display: flex;
  gap: var(--space-2);
}

/* 지금 보기는 강조색, 다른 것은 흐리게 (figma.md "탭") */
.list-mode a {
  display: inline-flex;
  padding: var(--space-1);
  color: var(--muted);
  opacity: 0.6;
}

.list-mode a[aria-current="page"] {
  color: var(--kot-color-accent-text);
  opacity: 1;
}

.list-empty {
  padding: var(--space-5) 0;
  text-align: center;
}

/* ---------- 바둑판 ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards li::before {
  content: none;
}

.card kot-card-image {
  width: 100%;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}

.note-count {
  white-space: nowrap;
}

@media (max-width: 390px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* ---------- 목록 보기 행 ---------- */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows li.row::before {
  content: none;
}

.row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.row-thumb img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.row-title {
  margin: 0;
  font-size: 1.0625rem;
}

.row .muted {
  margin: var(--space-1) 0 var(--space-2);
}

.row .tags {
  margin: 0;
}

/* ---------- 쪽 넘기기 ---------- */
/* kot-pagination은 자기 폭으로 넓은지 좁은지 고른다(container-type: inline-size).
   flex 칸 안에 두면 폭이 0으로 줄어 칸이 세로로 쌓이므로, 감싼 칸은 그냥 블록으로 두고 가운데 놓기는 부품에 맡긴다. */
.pager {
  margin-top: var(--space-5);
}

/* ---------- 그림 보기 ---------- */
.breadcrumb {
  font-size: var(--text-small);
  color: var(--muted);
}

.image-title {
  margin: var(--space-2) 0;
  font-size: 1.75rem;
}

.image-figure {
  margin: var(--space-3) 0;
  text-align: center;
}

.image-figure img {
  max-height: 85vh;
  width: auto;
  object-fit: contain;
}

/* 쪽지 층(kot-note-layer): 그림 칸을 가운데로, 아래 쪽지 목록은 왼쪽 맞춤 */
.image-figure .kot-note-layer__stage {
  margin-inline: auto;
}

.image-figure .note-list {
  margin-top: var(--space-3);
  text-align: start;
}

.linked-heading {
  font-family: var(--font-hand);
  font-size: 1.25rem;
}

.linked-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.linked-list li::before {
  content: none;
}

.linked-list li {
  width: 128px;
  font-size: var(--text-small);
}

.linked-list a {
  display: block;
  color: inherit;
}

.linked-list img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border: 2px solid var(--hd-line, #3a3a3a);
}

/* ---------- 연결 그림 보기 ---------- */
.image-tabs {
  margin: var(--space-2) 0 var(--space-3);
}

/* 가운데 그림은 늘 화면 가운데: 둘레의 종류 칸(다른 판본·다시 그린 것·함께 보기)은 아래에 쌓이고,
   없는 종류는 그리지 않는다(자리를 차지하지 않음). 그림은 칸을 넘치지 않게 비율을 지켜 줄인다. */
.links-center {
  display: grid;
  justify-items: center;
  margin: var(--space-3) 0 var(--space-4);
}

.links-figure {
  margin: 0;
  max-width: min(560px, 100%);
  text-align: center;
}

.links-figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
}

.links-group {
  margin-bottom: var(--space-5);
}

.linked-more {
  margin-left: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.description {
  white-space: pre-line;
}

.note-list {
  margin: 0;
  padding-left: 1.5em;
}

.note-list li {
  margin-bottom: var(--space-2);
  white-space: pre-line;
}

.image-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-small);
}

.image-info dt {
  color: var(--muted);
}

.image-info dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- 관리 목록 ---------- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  text-align: left;
  vertical-align: middle;
}

.admin-table img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
}