/* ══ components ══════════════════════════════════════════
   ชิ้นส่วนที่ใช้ซ้ำ: ปุ่ม / วิวเวอร์ 3D / แถบโหมด /
   การ์ดงาน / โลโก้แอป / ป้าย
   ═══════════════════════════════════════════════════════ */

/* ── ปุ่ม ─────────────────────────────────────────────── */
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:99px; text-decoration:none;
  font-weight:600; font-size:var(--fs1); line-height:1.35;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-dk)}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-text{
  font-weight:600; text-decoration:none; color:var(--green-dk);
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn-text:hover{gap:.65rem}
.btn-text::after{content:"→"; transition:transform .16s ease}

/* ── วิวเวอร์ 3D (ไม่มีกรอบ โมเดลลอยบนหน้าเว็บ) ───────── */
.viewer{
  position:relative; width:100%; aspect-ratio:1/1;
  cursor:grab; touch-action:pan-y;
}
.viewer:active{cursor:grabbing}
.viewer canvas{display:block; width:100%; height:100%}
.viewer::before{   /* วงแสงจางใต้ชิ้นงาน แทนกรอบ */
  content:""; position:absolute; inset:auto 8% 4% 8%; height:34%;
  background:radial-gradient(60% 100% at 50% 100%, #DCEDD2 0%, transparent 72%);
  z-index:-1;
}
.viewer .posterimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:4%;
}
.viewer[data-ready] .posterimg{display:none}

/* ── แถบเลือกโหมด ─────────────────────────────────────── */
.modebar{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-top:var(--s1);
  border:1px solid var(--line); background:var(--card);
  padding:.35rem; border-radius:99px; width:max-content; max-width:100%;
  box-shadow:var(--shadow);
}
.modebar button{
  font-family:var(--body); font-size:var(--fs-1); font-weight:500;
  padding:.4rem .9rem; border-radius:99px; cursor:pointer;
  border:0; background:transparent; color:var(--ink-2);
  transition:background .15s ease, color .15s ease;
}
.modebar button:hover{color:var(--green-dk); background:#EAF4E4}
.modebar button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* ── การ์ดงาน ─────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:var(--s2)}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--ac) 45%, var(--line));
  box-shadow:0 1px 2px rgba(14,36,23,.05), 0 22px 40px -18px color-mix(in srgb, var(--ac) 55%, transparent);
}
.stage{
  position:relative; aspect-ratio:4/3; border-bottom:1px solid var(--line);
  background:
    radial-gradient(115% 85% at 50% 108%, color-mix(in srgb, var(--ac) 20%, #fff) 0%, transparent 62%),
    #FBFDF9;
  overflow:hidden;
}
.stage canvas{display:block; width:100%; height:100%}
.stage .posterimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:6% 6% 3%;
}
.load3d{
  position:absolute; inset:0; display:grid; place-items:center; gap:.65rem;
  align-content:center; cursor:pointer; border:0; background:transparent;
  font-family:var(--body); font-size:var(--fs0); color:var(--ink-2); width:100%;
}
.load3d .ring{
  width:58px; height:58px; border-radius:99px; display:grid; place-items:center;
  background:var(--card); border:1.5px solid color-mix(in srgb, var(--ac) 50%, var(--line));
  color:var(--ac); box-shadow:var(--shadow);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.load3d:hover .ring{transform:scale(1.08); background:var(--ac); color:#fff}
.load3d .ring svg{display:block}

.tag{
  position:absolute; left:12px; top:12px; z-index:2;
  font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  padding:.28rem .65rem; border-radius:99px;
  display:inline-flex; align-items:center; gap:.4rem;
}
.dot{width:7px; height:7px; border-radius:99px; flex:none}

.card .body{padding:var(--s2) var(--s2) 1.4rem; display:flex; flex-direction:column; flex:1}
.card .body h3{margin-bottom:.35rem}
.card .body p{margin-bottom:var(--s2); font-size:var(--fs0); color:var(--ink-2)}
.stats{
  margin-top:auto; display:flex; gap:1.4rem; flex-wrap:wrap;
  font-size:var(--fs-1); color:var(--ink-3);
  border-top:1px dashed var(--line); padding-top:.9rem;
}
.stats b{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink); font-weight:500; font-size:var(--fs0); line-height:1.5;
}

/* ── โลโก้แอปที่ใช้ ───────────────────────────────────── */
.apps{border-block:1px solid var(--line); background:var(--card)}
.apps .wrap{
  display:flex; gap:var(--s2) var(--s3); flex-wrap:wrap;
  padding:var(--s2) 0; align-items:center;
}
.app{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-1); color:var(--ink-2); text-decoration:none;
}
.app img{
  width:24px; height:24px; display:block; flex:none;
  filter:saturate(.9);
}
.app span{white-space:nowrap}

/* แถบโหมดที่อยู่ในการ์ด — เต็มความกว้าง ไม่มีขอบมน */
.card .modebar{
  margin:0; width:100%; max-width:none; border-radius:0;
  border-width:0 0 1px 0; justify-content:center; box-shadow:none;
}
.card .modebar button{padding:.38rem .6rem; font-size:.72rem}