/* ============================================================
   ガラスリッドの3Dページ
   ============================================================ */

.gl{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(16px,4vw,40px) var(--pad) clamp(20px,4vw,40px);
  display:grid; gap:clamp(18px,4vw,44px);
}
@media (min-width:900px){
  .gl{ grid-template-columns:1.15fr .85fr; align-items:center; }
}

/* 3Dの舞台 */
.gl__stage{
  position:relative;
  aspect-ratio:1/1;
  max-height:66vh;
  border-radius:6px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #232C2E 0%, transparent 62%),
    linear-gradient(165deg, #161C1E 0%, #0A0D0F 100%);
  border:1px solid var(--line);
  cursor:grab;
  touch-action:none;
}
.gl__stage:active{ cursor:grabbing; }
.gl__stage canvas{ width:100%; height:100%; display:block; }

@media (min-width:900px){
  .gl__stage{ aspect-ratio:4/3.4; max-height:none; }
}

.gl__hint{
  position:absolute; left:50%; bottom:16px;
  transform:translateX(-50%);
  margin:0; padding:7px 15px;
  background:rgba(16,20,22,.7);
  backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:999px;
  font-size:11px; color:var(--mute); letter-spacing:.04em;
  white-space:nowrap;
  transition:opacity .5s ease;
  pointer-events:none;
}
.gl__hint.is-gone{ opacity:0; }

.gl__fallback{ display:grid; place-items:center; height:100%; padding:20px; }
.gl__fallback img{ max-width:100%; max-height:80%; object-fit:contain; }
.gl__fallback p{ margin:14px 0 0; font-size:12px; color:var(--mute); }

/* 見出し */
.gl__title{
  margin:0 0 16px;
  font-size:clamp(28px,6vw,46px);
  line-height:1.3; font-weight:700; letter-spacing:.01em;
}
.gl__text{ margin:0; font-size:14px; color:var(--mute); max-width:34em; }

/* 操作パネル */
.gl__panel{
  max-width:var(--max); margin-inline:auto;
  padding:0 var(--pad) clamp(40px,7vw,64px);
  display:grid; gap:16px;
}
.gl__row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px;
  background:var(--ink-2);
  border:1px solid var(--line); border-radius:4px;
}
.gl__label{
  flex:0 0 auto;
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.12em;
}

/* 色を選ぶ丸 */
.gl__colors{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.gl__color{
  width:30px; height:30px; padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  cursor:pointer;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.gl__color:hover{ transform:scale(1.1); }
.gl__color.is-on{
  border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(127,179,166,.25);
  transform:scale(1.12);
}
.gl__cname{
  font-size:12px; color:var(--mute);
  margin-left:4px;
}

.gl__btns{ display:flex; gap:7px; flex-wrap:wrap; }

/* 構造カード */
.gl__card{
  position:relative;
  cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.gl__card:hover{ border-color:var(--sea); transform:translateY(-2px); }
.gl__num{
  position:absolute; top:14px; right:16px;
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.12em;
}

.band__inner .btn + .btn{ margin-left:8px; }
@media (max-width:520px){
  .band__inner .btn{ display:block; width:100%; margin:0 0 9px !important; }
}