@charset "UTF-8";
/* =========================================================
   Prompt Lab Discover UI (Altsociety-like)
   Scope: body.pl-discover-page / .pl-discover
   File: assets/pl-discover.css
========================================================= */

/* ---- Page background & layout ---- */
body.pl-discover-page{
  background:
    radial-gradient(1100px 700px at 18% 8%, rgba(79,209,197,.35), rgba(79,209,197,0) 60%),
    radial-gradient(1100px 700px at 92% 14%, rgba(59,130,246,.35), rgba(59,130,246,0) 58%),
    radial-gradient(900px 600px at 70% 70%, rgba(168,85,247,.18), rgba(168,85,247,0) 60%),
    linear-gradient(180deg, #f7fafc 0%, #f3f4f6 45%, #f8fafc 100%);
  min-height: 100vh;
}

/* SWELLのコンテナ制約を外して「中央パネル」を作る */
.pl-discover-page #content.l-content{
  max-width: none !important;
  padding: 0 !important;
}

.pl-discover-page .l-container{
  max-width: 1200px;
}

.pl-discover-page #sidebar{
  display: none !important; /* Discoverはフル幅のほうが“それっぽい” */
}
.pl-discover-page .l-main{
  width: 100% !important;
  max-width: none !important;
}

.pl-discover{
  margin: 28px auto 72px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.12);
  overflow: hidden;
}

/* ---- Typography ---- */
.pl-hero{
  display: grid;
  gap: 8px;
  padding: 6px 4px 14px;
}
.pl-hero__title{
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: .01em;
}
.pl-hero__lead{
  margin: 0;
  opacity: .78;
  line-height: 1.7;
}

/* ---- Filter Bar ---- */
.pl-controls{
  margin-top: 10px;
}

.pl-controls__row{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: center;
}

.pl-search{
  position: relative;
}

.pl-search input[type="search"]{
  width: 100%;
  padding: 12px 14px 12px 52px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.pl-search::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: .55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm11 3-6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm11 3-6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pl-search input[type="search"]:focus{
  border-color: rgba(47,128,237,.35);
  box-shadow: 0 0 0 4px rgba(47,128,237,.12);
}

.pl-sort select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  outline: none;
}

/* ---- Tag chips ---- */
.pl-tags{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pl-tags::-webkit-scrollbar{ display:none; }

.pl-tagchip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.74);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.pl-tagchip:hover{ transform: translate3d(0,-1px,0); }

.pl-tagchip__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-weight: 900;
  font-size: 12px;
  opacity: .85;
}

.pl-tagchip.is-active{
  border-color: rgba(47,128,237,.28);
  background: rgba(47,128,237,.12);
  box-shadow: 0 12px 26px rgba(47,128,237,.12);
}

/* ---- Status ---- */
.pl-status{
  margin-top: 6px;
  padding: 6px 2px 0;
  font-size: 13px;
  opacity: .70;
}

/* ---- Cards ---- */
.pl-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .pl-controls__row{ grid-template-columns: 1fr; }
  .pl-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .pl-grid{ grid-template-columns: 1fr; }
}

.pl-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pl-card:hover{
  transform: translate3d(0,-2px,0);
  box-shadow: 0 18px 46px rgba(0,0,0,.11);
}

.pl-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.pl-card__top{
  padding: 0;
}

.pl-card__thumb{
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.05);
}
.pl-thumb--wide{ aspect-ratio: 16/9; }
.pl-thumb--sq{ aspect-ratio: 1/1; }

.pl-thumbImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .32s ease;
}
.pl-card:hover .pl-thumbImg{ transform: scale(1.03); }

/* no-thumb placeholder */
.pl-thumbPh{
  width: 100%;
  height: 100%;
  background:
    radial-gradient(650px 380px at 30% 25%, rgba(79,209,197,.22), rgba(79,209,197,0) 60%),
    radial-gradient(650px 380px at 75% 45%, rgba(59,130,246,.22), rgba(59,130,246,0) 60%),
    linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
}

.pl-card__title{
  padding: 12px 12px 0;
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.pl-card__desc{
  padding: 6px 12px 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .74;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-card__bottom{
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.pl-taglist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pl-taglist__item{ margin: 0; }
.pl-tag{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  color: inherit;
  opacity: .86;
}
.pl-tag:hover{ opacity: 1; }

.pl-meta{
  font-size: 12px;
  opacity: .65;
}

/* actions (save/like) */
.pl-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pl-action{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pl-action svg{
  width: 18px;
  height: 18px;
  fill: rgba(0,0,0,.55);
}
.pl-action:hover{
  transform: translate3d(0,-1px,0);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.pl-action.is-on{
  background: rgba(47,128,237,.12);
  border-color: rgba(47,128,237,.22);
}
.pl-action.is-on svg{
  fill: rgba(47,128,237,.85);
}

/* ---- Load more ---- */
.pl-loadmoreWrap{
  margin-top: 18px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.pl-loadmore{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  cursor: pointer;
}
.pl-loadmore[disabled]{ opacity:.5; cursor: not-allowed; }

.pl-spinner{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.14);
  border-top-color: rgba(0,0,0,.55);
  animation: plspin .9s linear infinite;
  display:none;
}
.pl-spinner.is-show{ display:block; }
@keyframes plspin{ to{ transform: rotate(360deg); } }

/* SEO pagination (hide when JS active) */
.pl-seoPagination{ margin-top: 16px; }
html.pl-js .pl-seoPagination{ display:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pl-card, .pl-thumbImg, .pl-tagchip, .pl-action,
  .pl-search input[type="search"]{ transition:none !important; }
}

/* ===============================
   Masonry（画像比率が混ざっても上に詰める）
   追記するだけでOK
================================ */
.pl-grid{
  display:block;             /* grid を無効化 */
  columns: 3;                /* 3列 */
  column-gap: 14px;
}

.pl-card{
  display:inline-block;      /* columns内で必須 */
  width:100%;
  margin: 0 0 14px;          /* 縦の間隔 */
  break-inside: avoid;       /* 途中で分割されない */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 980px){
  .pl-grid{ columns: 2; }
}
@media (max-width: 680px){
  .pl-grid{ columns: 1; }
}