ที่ไม่ขยับตอนเอาเมาส์ไปชี้
ถ้าปล่อยเป็น .figure:hover กล่องจะดูเหมือนกดได้แต่กดแล้วไม่มีอะไรเกิดขึ้น */
a.figure:hover { text-decoration: none; }
a.figure:hover .figure-value { color: var(--primary-hover); }
.figure-value {
font-size: 1.9rem; font-weight: 700; line-height: 1.1;
color: var(--primary); font-variant-numeric: tabular-nums;
transition: color var(--dur-fast);
}
.figure-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
/* ---------- บรรทัดขอบเขตงาน (ชิปหมวดหมู่ + จำนวน) ---------- */
.profile-scope {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
max-width: none; margin-bottom: var(--sp-6);
font-size: var(--fs-sm); color: var(--text-muted);
}
.profile-scope > span:first-child { font-weight: 600; }
.profile-scope .chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* ความเชี่ยวชาญบนการ์ดทีมงาน — ต่อจาก §35 */
.team-card-tags {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1);
margin-top: var(--sp-1);
}
/* ============================================================
36) หน้า R&D Department — Core value · Mission · Vision
ตั้งใจให้เปิดโชว์บนจอประชุมได้ ตัวอักษรจึงใหญ่กว่าหน้าอื่น
============================================================ */
.dept-hero { max-width: 72ch; margin-bottom: var(--sp-7); }
.dept-hero h1 { font-size: 1.75rem; line-height: 1.25; }
@media (min-width: 1024px) { .dept-hero h1 { font-size: 2.125rem; } }
.value-grid {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.value-card {
position: relative; padding: var(--sp-5);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
/* เลขลำดับเป็นของประดับ ไม่ใช่เนื้อหา — จางไว้ให้หัวข้อเด่นกว่าเสมอ */
.value-num {
display: block; font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .12em; color: var(--primary); opacity: .65;
margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums;
}
.value-title { font-size: var(--fs-md); font-weight: 700; }
.value-text {
margin-top: var(--sp-2);
font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted);
}
/* พันธกิจบนหน้าแผนกอ่านเป็นรายการยาว ไม่ใช่กล่องข้างหน้าแรก จึงขยายขนาดขึ้น */
.mission-list-lg li { font-size: var(--fs-base); color: var(--text); }
.vision-card { border-left: 3px solid var(--primary); }
.vision-quote {
margin: 0; font-size: var(--fs-md); font-weight: 600;
line-height: var(--lh-body); color: var(--text);
}
@media (min-width: 768px) { .vision-quote { font-size: 1.25rem; } }
/* ============================================================
37) รายการความเชี่ยวชาญ 0-5
ตัวหลอดพลังเองอยู่ใน §44 (.power) — ที่นี่คือแถวรายการที่ห่อมันไว้
============================================================ */
.skill-list { display: grid; gap: var(--sp-2); }
.skill-item {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
font-size: var(--fs-sm);
}
.skill-name { font-weight: 600; }
.skill-label { font-size: var(--fs-xs); color: var(--text-muted); }
.skill-list.is-tight { gap: var(--sp-1); font-size: var(--fs-xs); }
.skill-list.is-tight .skill-label { display: none; }
.skill-people { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.skill-person {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-sm);
}
/* ฟอร์มให้คะแนน — ชื่อทักษะกว้างเต็ม แล้วระดับกับปุ่มลบต่อท้าย */
.skill-rows { display: grid; gap: var(--sp-2); }
.skill-row {
display: grid; gap: var(--sp-2); align-items: center;
grid-template-columns: minmax(0, 1fr) auto;
}
.skill-row select { grid-column: 1 / -1; }
@media (min-width: 640px) {
.skill-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.skill-row select { grid-column: auto; }
}
.scale-list {
margin: var(--sp-3) 0 0; padding-left: var(--sp-5);
font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted);
}
/* ============================================================
38) การ์ดรายการแบบมีแถบซ้าย — ใช้กับ Product และ Tool
(ชื่อ .deliver-* มาจากหน้า Deliverables ที่ถอดออกไปแล้ว · คงชื่อไว้เพราะ
เป็นโครงการ์ดที่ใช้ซ้ำหลายที่ ไม่ได้ผูกกับหน้าใดหน้าหนึ่งอีกต่อไป)
============================================================ */
.deliver-list { display: grid; gap: var(--sp-4); }
.deliver-card {
display: grid; gap: var(--sp-3);
padding: var(--sp-5);
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--success);
border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.deliver-head {
display: flex; flex-wrap: wrap; align-items: flex-start;
justify-content: space-between; gap: var(--sp-3);
}
.deliver-title { font-size: var(--fs-md); font-weight: 700; }
.deliver-parent {
margin-top: 2px;
font-size: var(--fs-xs); color: var(--text-muted);
}
.deliver-sum { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.deliver-foot {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-2);
padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
/* ============================================================
39) คำขอจากหน่วยงานอื่น
============================================================ */
.req-head {
display: flex; flex-wrap: wrap; align-items: flex-start;
justify-content: space-between; gap: var(--sp-3);
}
.req-actions {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
padding-top: var(--sp-4); border-top: 1px dashed var(--border);
}
.req-actions .field { margin-bottom: 0; }
/* .filter-tab ถูกเขียนไว้สำหรับ