/* ============================================================
   tonari — 制作サンプル（works.html）専用
   デザイントークンは css/style.css の :root を継承して使う。
   ここには works ページにしか出ない部品だけを書く。
   ============================================================ */

/* ---------- カードの格子（6枚＝3列×2段。端数の段落ちを作らない） ---------- */
.works-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}
.works-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--cream-hi);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.works-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 50px -30px rgba(42,36,32,.35);
}
/* カード全体を覆う透明のクリックレイヤー。
   読み上げ・キーボードには下の .works-more が応えるので、こちらは隠す */
.works-cover{position:absolute;inset:0;z-index:3}

/* ---------- 縮小ライブプレビュー ----------
   iframe は実寸 1280×800 で読み込み、transform:scale で枠に収める。
   倍率（--shot-scale）はページ側のスクリプトが枠の幅から計算する。
   --shot-bg／--shot-fg は各サンプルの地色・文字色（カードごとにHTML側で指定） */
.works-shot{
  position:relative;
  aspect-ratio:1280/800;
  background:var(--shot-bg,var(--cream-lo));
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.works-shot iframe{
  position:absolute;top:0;left:0;
  width:1280px;height:800px;border:0;
  transform:scale(var(--shot-scale,.28));
  transform-origin:0 0;
  pointer-events:none;
  background:var(--shot-bg,transparent);
}
/* JSが動かない環境向けの静的な代替（色票と店名のみ） */
.works-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:.6em;
  padding:0 1.2rem;text-align:center;
  color:var(--shot-fg,var(--ink));
  font-size:.92rem;font-weight:700;letter-spacing:.05em;
}

/* ---------- カード本文 ---------- */
.works-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.4rem,2vw,1.8rem) clamp(1.4rem,2vw,1.8rem) clamp(1.6rem,2.2vw,2rem);
}
.works-genre{color:var(--clay-text);margin-bottom:.85rem}
.works-name{font-size:1.16rem;font-weight:700;letter-spacing:.03em;margin-bottom:.7rem}
.works-style{
  display:flex;align-items:center;gap:.5em;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--ink-soft);
  margin-bottom:.9rem;
}
.works-swatch{
  flex:none;display:inline-block;
  width:13px;height:13px;border-radius:4px;
  background:var(--swatch,var(--clay));
  border:1px solid rgba(42,36,32,.18);
}
.works-desc{font-size:.9rem;color:var(--ink-soft);margin-bottom:1rem}
.works-points{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.3rem}
.works-points li{
  font-size:.8rem;color:var(--ink-soft);
  padding-left:1.3em;position:relative;
}
.works-points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:3px;background:var(--clay);
}
.works-more{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.82rem;font-weight:600;color:var(--clay-deep);
}
.works-more .btn-arrow{font-family:var(--font-en)}
.works-card:hover .works-more .btn-arrow{transform:translateX(5px)}

/* ---------- 注意書き ---------- */
.works-notes{display:flex;flex-direction:column;gap:.55rem;max-width:52em}
.works-notes li{
  font-size:.88rem;color:var(--ink-soft);
  padding-left:1.5em;position:relative;
}
.works-notes li::before{
  content:"—";position:absolute;left:0;color:var(--clay);
}

/* ---------- レスポンシブ（2列×3段 → 1列。どちらも端数なし） ---------- */
@media (max-width:1024px){
  .works-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .works-grid{grid-template-columns:1fr}
}