@charset "UTF-8";
/* CSS Document */

    :root {
      --card: #ffffff;
      --text: #000;
      --sub: #333;
      --line: #d9deea;
      --point-color-soft: #f5b2af;
      --danger: #c53030;
      --shadow: 0 2px 4px rgba(0,0,0,0.06);
      --radius: 0;
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 0;
      box-shadow: var(--shadow);
      padding: 16px;
      margin-bottom: 18px;
    }

    .toolbar {
      display: grid;
      gap: 14px;
    }

    .toolbar-top {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--point-color-soft);
      color: var(--point-color);
      border: 1px solid #cfe0f7;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
    }

    .muted {
      color: var(--sub);
      font-size: 14px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    button {
      appearance: none;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 14px;
      cursor: pointer;
      transition: .18s ease;
    }

    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0,0,0,.06);
    }

    button.is-active {
      background: var(--point-color);
      color: #fff;
      border-color: var(--point-color);
    }

    button.is-danger {
      color: var(--danger);
      border-color: #efc2c2;
      background: #fff7f7;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag-btn {
      background: var(--gray-color);
      border-color: transparent;
      padding: 8px 12px;
      font-size: 13px;
    }

    .tag-btn.is-active {
      background: var(--point-color);
      color: #fff;
    }

    .search-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .search-box {
      flex: 1 1 320px;
      min-width: 240px;
    }

    .search-box input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 12px;
      font-size: 15px;
      outline: none;
      background: #fff;
    }

    .search-box input:focus {
      border-color: #9bbbe4;
      box-shadow: 0 0 0 4px rgba(43,108,176,.08);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 0;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

@media (max-width: 640px) {
  .card {
    min-height: auto;
    display: block;
  }
  .card-body {
    gap: 8px;
  }
}

    .thumb {
      aspect-ratio: 4 / 3;
      background: linear-gradient(135deg, #edf3fb, #f8fafc);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      position: relative;
      cursor: zoom-in;
      padding: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      border-radius: 0;
  appearance: none;
  border: none;
  background: none;
    }

.thumb:hover,
.thumb:focus,
.thumb:active {
  transform: none !important;
  box-shadow: none !important;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .thumb:hover img {
    transform: scale(1.03);
  }
}

@media (hover: none), (pointer: coarse) {
  .thumb:hover img {
    transform: none;
  }
}

    .thumb-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      text-align: center;
      color: var(--point-color);
      font-weight: 700;
      font-size: 18px;
      cursor: default;
    }

    .card-body {
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .card-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.2;
    }

    .card-desc {
      margin: 0;
      color: var(--sub);
      font-size: 15px;
      line-height: 1.5;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }

    .chip {
      display: inline-block;
      background: var(--gray-color);
      color: #445;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 13px;
      line-height: 1;
    }

    .card-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: auto;
    }

    .vote-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;

    }

    .vote-wrap input[type="checkbox"] {

      accent-color: var(--point-color);
      cursor: pointer;
      transform: scale(1.5);
    }


/* チェック時のハイライト */
.card.is-picked {
  border-color: color-mix(in srgb, var(--point-color) 45%, white);
  box-shadow: 0 5px 12px rgba(204,151,138,0.18);
  transform: translateY(-2px);
  background: linear-gradient(to bottom, rgba(204,151,138,0.05), #fff 28%);
}

    .download-link {
      font-weight: 700;
      white-space: nowrap;
      line-height: 1;
      padding-top:0.1em;
      color: var(--point-color);
    }

    .empty {
      background: #fff;
      border: 1px dashed var(--line);
      border-radius: 0;
      padding: 28px 18px;
      text-align: center;
      color: var(--sub);
    }

    .notice {
      margin: 0px;
      color: var(--sub);
      font-size: 15px;
      text-indent:-1em;
    }

    .notice li {
      list-style: none; 
      padding-left:1em;
      text-indent:-1em;
      line-height: 1.5em;
    }

    .limit-note {
      color: var(--danger);
      font-weight: 700;
      font-size: 13px;
      min-height: 1.2em;
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(17, 24, 39, 0.84);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 9999;
    }

    .modal.is-open {
      display: flex;
    }

    .modal-inner {
      position: relative;
      width: min(100%, 1100px);
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .modal-stage {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      padding-bottom: 90px;
    }

    .modal-image {
      max-width: 100%;
      max-height: calc(100vh - 220px);
      width: auto;
      height: auto;
      border-radius: 0;
      box-shadow: 0 12px 36px rgba(0,0,0,.35);
      background: #fff;
      display: block;
    }

    .modal-bottom-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 72px;
      padding: 12px 16px;
      background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18));
    }

    .modal-caption {
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 1.6;
      max-width: 720px;
      margin: 12px auto 10px;
      padding: 0 16px;
    }

    .modal-pdf-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 180px;
      padding: 10px 18px;
      background: #fff;
      color: var(--point-color);
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }

    .modal-pdf-link:hover {
      text-decoration: none;
      opacity: .95;
    }

    .modal-btn,
    .modal-close {
      position: absolute;
      border: none;
      background: rgba(204,151,138,.14);
      color: var(--point-color);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .modal-btn:hover,
    .modal-close:hover {
      transform: none;
      background: rgba(255,151,138,.48);
      box-shadow: none;
    }

    .modal-close {
      top: -8px;
      right: 0;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      font-size: 28px;
      line-height: 1;
      z-index: 2;
    }

    .modal-btn {
      top: calc(50% - 36px);
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 999px;
      font-size: 22px;
      font-weight: 700;
      z-index: 2;
    }

    .modal-btn:hover {
      transform: translateY(-50%);
    }

    .modal-prev {
      left: -20px;
    }

    .modal-next {
      right: -20px;
    }

    body.modal-open {
      overflow: hidden;
    }

    @media (max-width: 640px) {

      .toolbar-top {
        align-items: flex-start;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      .modal {
        padding: 14px;
      }

      .modal-close {
        top: -2px;
        right: -2px;
      }

      .modal-btn {
        width: 42px;
        height: 42px;
      }

      .modal-prev {
        left: 4px;
      }

      .modal-next {
        right: 4px;
      }

      .modal-image {
        max-height: calc(100vh - 240px);
      }

      .modal-stage {
        padding-bottom: 78px;
      }

      .modal-bottom-bar {
        min-height: 78px;
        padding: 12px;
      }

      .modal-pdf-link {
        width: 100%;
        max-width: 320px;
      }
    }


/* ランキング表示用
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.rank-crown {
  display: inline-block;
  margin-right: 4px;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  color:var(--point-color);
}

.rank-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 999px;
  background: #f1f1f1;
  color: #555;
  vertical-align: middle;
}

.rank-badge-hot {
  background: #cc0000;
  color: #fff;
}

.card-title-text {
  vertical-align: middle;
}

/* 吹き出し表示用
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9999;
}

.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}