/**
 * illustration-search.css
 * いらすとこーなー テキスト検索
 * トーンは ugdata-realtime-search.css（スタンプ検索）に合わせている
 */

/* 見出しのフォント。スタンプ検索と同じ Yomogi を使う */
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

.ugi-search {
  /* スマホでの列数。切り替えボタンで 2 / 4 が入る */
  --ugi-cols: 4;
  --ugi-radius-l: 20px;
  --ugi-radius-m: 14px;
  --ugi-line: #e8e8e8;
  --ugi-ink: #222;
  --ugi-muted: #888;
  --ugi-shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 8px rgba(0, 0, 0, .05);
  --ugi-shadow-2: 0 4px 12px rgba(0, 0, 0, .09), 0 12px 28px rgba(0, 0, 0, .09);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

.ugi-search.is-cols-2 {
  --ugi-cols: 2;
}

/* ========== 列数の切り替え（スマホのみ） ========== */
.ugi-cols-switch {
  display: none; /* PCは幅に応じて自動で列数が決まるため出さない */
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.ugi-cols-switch__label {
  font-size: 12px;
  color: var(--ugi-muted);
}

.ugi-cols-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--ugi-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ugi-muted);
  cursor: pointer;
  transition: all .15s;
}

.ugi-cols-btn[aria-pressed="true"] {
  background: #222;
  border-color: #222;
  color: #fff;
}

/* ========== 検索バー ========== */
.ugi-searchbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 16px 0 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.ugi-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

#ugi-input {
  padding: 11px 16px;
  font-size: 16px; /* iOS のズーム防止 */
  border: 1px solid var(--ugi-line);
  border-radius: var(--ugi-radius-m);
  outline: none;
  background: #f7f7f7;
  color: var(--ugi-ink);
  transition: border-color .2s, background .2s;
}

#ugi-input:focus {
  border-color: #aaa;
  background: #fff;
}

#ugi-input::placeholder {
  color: #bbb;
}

/* ========== ボタン ========== */
.ugi-btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--ugi-line);
  border-radius: var(--ugi-radius-m);
  background: #fff;
  color: var(--ugi-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.ugi-btn-clear {
  color: var(--ugi-muted);
}

.ugi-btn-clear:hover {
  background: #f0f0f0;
  color: var(--ugi-ink);
}

.ugi-btn-more {
  display: block;
  margin: 24px auto;
  padding: 12px 40px;
  background: #222;
  border-color: #222;
  color: #fff;
  letter-spacing: .05em;
}

.ugi-btn-more:hover {
  background: #444;
  border-color: #444;
}

/* ========== 年・コーナー絞り込み ========== */
.ugi-groups-disclosure {
  margin-top: 10px;
}

.ugi-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ugi-line);
  border-radius: var(--ugi-radius-l);
  background: #fff;
  font-size: 13px;
  color: var(--ugi-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.ugi-group-toggle::-webkit-details-marker {
  display: none;
}

.ugi-group-toggle:hover {
  background: #f7f7f7;
}

.ugi-groups-disclosure[open] .ugi-group-toggle__chevron {
  transform: rotate(180deg);
}

.ugi-group-toggle__chevron {
  transition: transform .15s;
}

.ugi-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 4px 4px;
}

.ugi-group-item {
  padding: 5px 13px;
  font-size: 13px;
  border: 1px solid var(--ugi-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ugi-muted);
  cursor: pointer;
  transition: all .15s;
}

.ugi-group-item:hover {
  background: #f0f0f0;
  color: var(--ugi-ink);
}

.ugi-group-item[aria-pressed="true"] {
  background: #222;
  border-color: #222;
  color: #fff;
}

/* ========== 件数表示 ========== */
/* 未検索のときは余白を作らない（既存ページの上に置いても詰まって見えるように） */
.ugi-count:empty {
  display: none;
}

.ugi-count {
  margin: 4px 0 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ugi-muted);
  letter-spacing: .03em;
}

/* ========== ランダムギャラリー ========== */
.ugi-random-panel.is-hidden {
  display: none;
}

.ugi-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 16px;
  font-family: 'Yomogi', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ugi-ink);
  letter-spacing: .04em;
}

.ugi-section-title::before,
.ugi-section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to right,
    #ccc 0px, #ccc 5px,
    transparent 5px, transparent 11px
  );
}

.ugi-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* 見出しの真下に置く */
.ugi-btn-shuffle {
  display: block;
  margin: 0 auto 16px;
  padding: 8px 28px;
  font-size: 13px;
  color: var(--ugi-muted);
}

/* 後続の年グリッドとの仕切り */
.ugi-list-divider {
  margin-bottom: 4px;
}

.ugi-btn-shuffle:hover {
  background: #f0f0f0;
  color: var(--ugi-ink);
}

/* ランダムギャラリーは画像だけ見せる（日付は出さない） */
#ugi-random .ugi-caption {
  display: none;
}

/* ========== グリッド ========== */
.ugi-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

@media (max-width: 767px) {
  .ugi-search {
    padding: 0 12px;
  }
  .ugi-cols-switch {
    display: flex;
  }
  /* 検索結果・ランダムギャラリーとも既定は4列（スタンプ検索に合わせる） */
  .ugi-gallery {
    grid-template-columns: repeat(var(--ugi-cols, 4), 1fr);
    gap: 6px;
  }
  /* 2列のときは1枚が大きいので余白も広げる */
  .ugi-search.is-cols-2 .ugi-gallery {
    gap: 10px;
  }
}

/* ========== カード ========== */
.ugi-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--ugi-line);
  border-radius: var(--ugi-radius-l);
  overflow: hidden;
  box-shadow: var(--ugi-shadow-1);
  transition: transform .08s ease, box-shadow .12s ease;
  animation: ugi-fade-in .2s ease-out;
}

.ugi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ugi-shadow-2);
}

.ugi-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #fafafa;
  cursor: zoom-in;
}

/* 検索でヒットした文字が切れないよう、切り抜かず全体を表示する */
.ugi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ugi-caption {
  padding: 8px 10px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.ugi-date {
  display: block;
  color: var(--ugi-muted);
  font-size: 11px;
  letter-spacing: .03em;
  /* コーナー名が長くても1行に収め、カードの高さを揃える */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ugi-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ugi-ink);
  word-break: break-word;
}

.ugi-caption mark {
  background: #ffe9a8;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ========== 状態表示 ========== */
.ugi-loading,
.ugi-no-results {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: #bbb;
  font-size: 14px;
}

.ugi-error {
  grid-column: 1 / -1;
  margin: 20px 0;
  padding: 20px;
  text-align: center;
  color: #d33;
  background: #fff0f0;
  border: 1px solid #fcc;
  border-radius: var(--ugi-radius-m);
}

.ugi-gallery[aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}

/* ========== ライトボックス ========== */
.ugi-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.ugi-lightbox.is-open {
  display: flex;
}

.ugi-lb-inner {
  position: relative;
  line-height: 0;
  cursor: default;
}

.ugi-lb-inner img {
  display: block;
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .5);
}

.ugi-lb-ig {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #fff !important;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.ugi-lb-ig:hover {
  opacity: .85;
}

@keyframes ugi-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== スマホのキャプション ==========
   カード幅が狭いので日付を詰める。
   .ugi-date の基本定義より後ろに置くこと（同じ詳細度のため） */
@media (max-width: 767px) {
  .ugi-caption {
    padding: 5px 2px 7px;
  }
  .ugi-date {
    font-size: 8px;
    letter-spacing: -.02em;
    text-align: center;
  }

  /* 2列はカード幅に余裕があるので日付を読みやすい大きさに戻す */
  .ugi-search.is-cols-2 .ugi-caption {
    padding: 8px 10px 10px;
  }
  .ugi-search.is-cols-2 .ugi-date {
    font-size: 11px;
    letter-spacing: .03em;
  }
}