/* ผังองค์กร /org-chart — วาดจาก tbl_organize ของ e-humanities (templates/pages/about_org_chart.php) */
.oc { --oc-line: #6b6b6b; --oc-gap: 1.25rem; font-size: 0.9rem; line-height: 1.35; padding-bottom: 1rem; }
.oc a { color: inherit; text-decoration: none; }
.oc a:hover { text-decoration: underline; }
.oc-center { display: flex; justify-content: center; }
.oc-box { display: block; text-align: center; border-radius: 4px; padding: 0.6rem 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.oc-uni { min-width: 16rem; font-size: 1.25rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, #3346d3, #a066e0); border: 1px solid #3a2a6a; }
.oc-fac { min-width: 12rem; font-size: 1.15rem; font-weight: 700; color: #2d1a40; background: linear-gradient(180deg, #ecdcf8, #d6b9ee); border: 1px solid #5b3a7a; }
.oc-vline { width: 2px; height: 1.75rem; margin: 0 auto; background: var(--oc-line); }

.oc-groups { display: grid; grid-template-columns: repeat(var(--oc-cols, 4), minmax(0, 1fr)); gap: var(--oc-gap); align-items: start; }
.oc-group { position: relative; padding-top: 1.5rem; min-width: 0; }
/* เส้นแนวนอนเชื่อมทุกกลุ่ม + เส้นตั้งลงหัวกลุ่ม */
.oc-group::before { content: ""; position: absolute; top: 0; left: calc(var(--oc-gap) / -2); right: calc(var(--oc-gap) / -2); border-top: 2px solid var(--oc-line); }
.oc-group:first-child::before { left: 50%; }
.oc-group:last-child::before { right: 50%; }
.oc-group:only-child::before { display: none; }
.oc-group::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 1.5rem; background: var(--oc-line); }

.oc-l1 { font-weight: 600; color: #fff; background: #7a4f9e; border: 1px solid #3f2756; }
.oc-l2list { list-style: none; margin: 0 0 0 0.75rem; padding: 0.9rem 0 0 1rem; border-left: 2px solid var(--oc-line); }
.oc-l2 { position: relative; margin-bottom: 0.9rem; }
.oc-l2:last-child { margin-bottom: 0; }
/* เส้นสั้นจากเส้นตั้งเข้ากล่อง ; ตัวสุดท้ายปิดเส้นตั้งด้านล่าง */
.oc-l2::before { content: ""; position: absolute; left: -1rem; top: 1.2rem; width: 1rem; border-top: 2px solid var(--oc-line); }
.oc-l2:last-child::after { content: ""; position: absolute; left: calc(-1rem - 2px); top: calc(1.2rem + 2px); bottom: 0; width: 2px; background: #fff; }
.oc-l2box { color: #fff; background: #a0569c; border: 1px solid #4d2a4b; }
.oc-l3 { margin: 0.5rem 0 0 0.75rem; padding: 0.5rem 0.75rem; background: #ececec; border: 1px solid #555; border-radius: 4px; text-align: left; }
.oc-l3 ul { list-style: disc; margin: 0; padding-left: 1.1rem; }
.oc-l3 ul ul { list-style: circle; }
.oc-l3 li { margin: 0.15rem 0; }

/* จอแคบ: เรียงกลุ่มลงแนวตั้ง ไม่วาดเส้นแนวนอน */
@media (max-width: 1023px) {
    .oc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-group::before, .oc-group::after { display: none; }
    .oc-group { padding-top: 0; }
    .oc-vline-last { display: none; }
    .oc-groups { margin-top: 1.25rem; }
}
@media (max-width: 639px) {
    .oc-groups { grid-template-columns: minmax(0, 1fr); }
    .oc-uni, .oc-fac { min-width: 0; width: 100%; }
}
@media print {
    .oc-box { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}