:root{
  --rose:#fff6fb;
  --rad:12px;
  --gap:1.8rem;
  --cardW:clamp(56px,14vw,90px);
  --gap-r:clamp(8px,2vw,18px);
}

.spread-board{
  grid-area:content;
  background:var(--card);
  border-radius:var(--rad);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  padding:var(--gap);
  padding-bottom:calc(var(--gap) + 3.2rem);
  display:grid;
  grid-template-columns:repeat(var(--cols,6),var(--cardW));
  grid-auto-rows:calc(var(--cardW)*1.54);
  gap:var(--gap-r);
  justify-content:center;
  margin-bottom:var(--gap);
  overflow-x:auto;
}
.card-slot{
  background:var(--rose);
  position:relative;
  border-radius:var(--rad);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:.25s;
  aspect-ratio:65/100;
}
.card-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card-slot::after{
  content:'';
  position:absolute;
  left:50%;
  top:calc(100% + .6rem);
  transform:translateX(-50%);
  font-size:1.3rem;
  white-space:nowrap;
  color:var(--muted);
  pointer-events:none;
}
.card-slot.selected{background:var(--accent);transform:translateY(-4px);z-index:20}
.card-slot.selected::after{
  content:attr(data-title);
  color:var(--accent);
  background:var(--card);
  padding:.2rem .8rem;
  border-radius:var(--rad);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-weight:600;
}
.spinner{width:40px;height:40px;border:4px solid #ccc;border-top-color:var(--prim);border-radius:50%;animation:spin 1s linear infinite;margin:2rem auto}
.spinner-inline{display:inline-block;width:1em;height:1em;margin:0 0 0 .5em;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.slot-desc{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65;color:var(--muted)}
.slot-desc h2{font-size:2.4rem;color:var(--txt);margin-bottom:.8rem;font-weight:700}
.ask-box{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65}
.ask-box h2{font-size:2.4rem;color:var(--txt);margin-bottom:1rem;font-weight:700}
.query-form{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.query-form textarea{flex:1 1 320px;min-height:56px;padding:1rem 1.2rem;border:1px solid #ccc;border-radius:var(--rad);resize:vertical;font-family:inherit;font-size:1.6rem}
.query-form button{flex:0 0 160px;padding:1.2rem;border:0;border-radius:var(--rad);font-weight:700;background:var(--accent);color:#fff;cursor:pointer;transition:.25s}
.query-form button:disabled{opacity:.6;cursor:not-allowed}
.query-form button:hover:enabled{background:#a60077}
@media(max-width:480px){
  .query-form textarea{flex:1 1 100%}
  .query-form button{flex:1 1 100%}
}

@media(max-width:480px){
  :root{--cardW:clamp(45px,10vw,72px)}
}