/* works-portfolio-v1 — WORKS の一覧を HUB のポートフォリオで「作者」ごとにまとめる足し（works-page.css の見た目のまま）。
   オーナー指示 2026-10-22：作者別だけ・作者ごとに 1 行分（列数）＋残りは帯で開く・制作者のアイコン・札は小さく、絵の枠は 16:9 でそろえる。 */
.wk-lead[hidden] { display: none; }
.wk-archive.wk-archive--groups { display: block; margin-top: 0; }
.wk-group + .wk-group { margin-top: 56px; }
.wk-author-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--wk-paper) 18%, transparent);
}
.wk-author-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: var(--wk-paper);
  font: 600 18px/1.4 var(--wk-jp);
}
.wk-author-name .wk-credit-label { margin-right: -8px; color: var(--wk-quiet); font-weight: 500; font-size: 14px; }
.wk-author-name a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; }
.wk-author-name a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }

/* 作者のアイコン（絵・頭文字の印） */
.wk-avatar { flex: none; display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--wk-paper) 10%, transparent); overflow: hidden; }
.wk-avatar--l { width: 40px; height: 40px; font: 700 17px/1 var(--wk-jp); }
.wk-avatar--s { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; font: 700 10px/1 var(--wk-jp); }
.wk-avatar--initial { color: #fff; background: hsl(var(--wk-av-h, 210) 38% 34%); }
/* 拡大表示の見出しの作者：絵の横で読める大きさ（一覧の見出しと同じ並び） */
.wk-v-foot .wk-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; line-height: 20px; }
.wk-v-foot .wk-credit { display: inline-flex; align-items: center; gap: 10px; color: var(--wk-paper); font-size: 15px; }
.wk-v-foot .wk-avatar--s { width: 36px; height: 36px; margin-right: 0; vertical-align: middle; font-size: 15px; }

/* 札：小さく、どの形式も同じ大きさ（絵の枠 16:9・題 1 行・注記 1 行） */
.wk-group-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 16px;
  align-items: start;
}
.wk-group-grid > .wk-item[hidden] { display: none; }
.wk-group-grid > .wk-item { display: flex; flex-direction: column; min-width: 0; }
.wk-group-grid .wk-media { aspect-ratio: 16 / 9 !important; width: 100%; height: auto; }
.wk-group-grid .wk-media > :is(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; }
.wk-group-grid .wk-media-label { display: none; }
.wk-group-grid .wk-notch { transform: scale(.75); transform-origin: 0 100%; }
.wk-group-grid .wk-item-title { margin-top: 8px; font-size: 13px; line-height: 20px; height: 20px; overflow: hidden; }
.wk-group-grid .wk-item-title > .wk-title-text, .wk-group-grid .wk-title-btn > .wk-title-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wk-group-grid .wk-title-btn { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.wk-group-grid .wk-title-btn > svg { flex: none; width: 12px; height: 12px; }
.wk-group-grid .wk-item-meta { margin-top: 4px; font-size: 11px; line-height: 18px; height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.wk-group-grid .wk-item-meta > span { display: inline; }
.wk-group-grid .wk-item-meta > span + span::before { content: '・'; color: var(--wk-quiet); }

.wk-more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-paper);
  font: 600 13px/1 var(--wk-jp);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.wk-more:focus-visible { outline: 2px solid var(--wk-paper); outline-offset: 4px; }
/* 見出しの右：枠つきの小さなボタン */
.wk-more--head {
  margin-left: auto;
  flex: none;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--wk-paper) 45%, transparent);
  border-radius: 999px;
}
.wk-more--head:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wk-paper) 12%, transparent); }
/* 1 行目の下：横いっぱいの帯 */
.wk-more--bar {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px dashed color-mix(in srgb, var(--wk-paper) 35%, transparent);
  background: color-mix(in srgb, var(--wk-paper) 5%, transparent);
  text-align: center;
}
.wk-more--bar:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wk-paper) 12%, transparent); border-style: solid; }
/* display:block が [hidden] より強いので、残りが無い作者（1件で列が多いとき）は帯を出さない */
.wk-more--bar[hidden] { display: none !important; }
/* 2点以上の札：右下に 1/N。点は画像（丸）と動画（角）。押す対象は札のまま */
.wk-media-count {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(8 9 14 / 0.72);
  color: var(--wk-paper);
  font: 600 12px/1 var(--wk-latin);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.wk-media-dots { display: inline-flex; align-items: center; gap: 3px; }
.wk-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wk-dot--clip { border-radius: 1px; }
.wk-media:is([data-kind="web"], [data-kind="link"]) { background: color-mix(in srgb, var(--wk-paper) 6%, transparent); }
.wk-link-host { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: var(--wk-paper); font: 600 13px/1.4 var(--wk-latin); letter-spacing: 0.06em; text-align: center; word-break: break-all; }
@media (max-width: 1199px) { .wk-group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 959px) { .wk-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .wk-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .wk-author-name { font-size: 16px; }
  .wk-avatar--l { width: 34px; height: 34px; }
  .wk-media-count { font-size: 13px; }
  .wk-v-foot .wk-avatar--s { width: 30px; height: 30px; font-size: 13px; }
  .wk-v-foot .wk-credit { font-size: 14px; }
}