/* ═══════════════════════════════════════════════════════════════════════
   โครงสร้างองค์กร — organizationStructure.php
   โรงเรียนเทศบาล ๑ กิตติขจร

   รอบ 24 ก.ย. 2569: หน้าตาไปทางเดียวกับ /zerodropout/ ตามที่ ผอ. ขอ
   หัวหน้าแถบน้ำเงินไล่เฉด การ์ดตัวเลขลอยทับขอบล่าง หัวเรื่องย่อยมีขีดสีนำ
   ผังบริหารที่เส้นโยงลากลงไปถึงฝ่าย แล้วต่อลงไปถึงกลุ่มงานเมื่อเลื่อนถึง
   (รอบสอง 24 ก.ย.: ผอ. ให้ตัดส่วนกำลังคนกับส่วนสิ่งที่ยังไม่ครบ และให้หน่วยย่อยต่อจากผัง)

   ★ โทเคนของหน้าทุกตัวเป็น alias ที่ชี้ไป --tb1-* โหมดมืดจึงพลิกให้เอง
     เขียนบล็อกโหมดมืดเองแค่สีเตือนกับเงา
   ★ สีประจำฝ่ายมีสี่สีคงที่ ผูกกับลำดับฝ่ายในทะเบียน (data-tone 1–4)
     ฝ่ายที่ห้าขึ้นไปได้โทนกลาง (data-tone 0) ไม่ไล่สีใหม่ให้อัตโนมัติ
     สีเหล่านี้ใช้กับของที่เป็นของฝ่ายเท่านั้น และมีชื่อฝ่ายกำกับอยู่เสมอ
     การ์ดตัวเลขด้านบนจึงเป็นสีแบรนด์ล้วน ไม่ใช้สีฝ่ายซ้ำในความหมายอื่น
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่งการ์ดและความยาวแถบ
   ═══════════════════════════════════════════════════════════════════════ */

.og {
    --og-ink: var(--tb1-ink-1, #0f172a);
    --og-ink-2: var(--tb1-ink-2, #334155);
    --og-muted: var(--tb1-ink-3, #5a697f);
    --og-page: var(--tb1-page, #f8fafc);
    --og-paper: var(--tb1-surface, #ffffff);
    --og-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --og-line: var(--tb1-border, #e2e8f0);
    --og-line-bold: var(--tb1-border-bold, #cbd5e1);
    --og-brand: var(--tb1-brand, #1d4ed8);
    --og-page-max: var(--tb1-page-max-width, 1440px);
    --og-gutter: var(--tb1-shell-gutter, 20px);
    /* ★ โทเคนสีเตือนของธีมในโหมดสว่างได้ 4.41:1 ซึ่งไม่ผ่าน AA ทุกหน้าใช้ #B91C1C เอง */
    --og-warn: #b91c1c;
    --og-ease: cubic-bezier(.4, 0, .2, 1);
    --og-r: var(--tb1-radius-md, 16px);
    --og-rs: var(--tb1-radius-sm, 10px);
    /* เงาชั้นเดียว ระยะไกล ความทึบต่ำ กับเส้นแสงบนขอบบน */
    --og-shadow: var(--tb1-shadow-card, 0 0 16px rgba(15, 23, 42, .05));
    --og-shadow-float: 0 24px 48px -30px rgba(15, 23, 42, .45);
    /* หัวหน้า: เข้มพอให้ตัวอักษรขาวผ่าน AA ทุกจุด ทั้งสองโหมด */
    --og-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --og-hero-b: var(--tb1-banner-1, #1d4ed8);
    --og-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));
    --og-tone: var(--og-muted);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .og {
    --og-warn: var(--tb1-text-danger, #fda4af);
    --og-shadow: var(--tb1-shadow-card, none);
    --og-shadow-float: 0 22px 44px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* สีประจำฝ่าย ใช้โทเคนตัวอักษรของธีม จึงอ่านออกทั้งสองโหมดเมื่อใช้เป็นสีตัวหนังสือ */
.og [data-tone="1"] {
    --og-tone: var(--tb1-brand, #1d4ed8);
}

.og [data-tone="2"] {
    --og-tone: var(--tb1-text-info, #0e7490);
}

.og [data-tone="3"] {
    --og-tone: var(--tb1-text-success, #047857);
}

.og [data-tone="4"] {
    --og-tone: var(--tb1-text-warning, #b45309);
}

.og [data-tone="0"] {
    --og-tone: var(--og-muted);
}

/* ── เปลือกหน้า ────────────────────────────────────────────────────────
   ★ หน้าที่ไม่ทาพื้น body เอง จะได้ตัวอักษรสว่างบนพื้นขาวในโหมดมืด (1.1:1) */

/* ★ หน้านี้ไม่ได้โหลด Bootstrap จึงไม่มีใครล้าง margin 8px ของ UA ให้
   ฉบับก่อนหน้าแถบเมนูและส่วนท้ายจึงหดเข้ามาจากขอบจอข้างละ 8px */
body.og-page {
    margin: 0;
    background: var(--tb1-page, #f8fafc);
    color: var(--tb1-ink-2, #334155);
}

/* ★ แถบเมนู sticky สูง 57px การกระโดดไป anchor และการไล่ Tab ต้องไม่ถูกมันบัง
   ตั้งที่ html ที่เดียว ไม่ใส่ scroll-margin-top ซ้ำที่ตัวเป้าหมาย เพราะสองค่านี้บวกกัน */
html:has(body.og-page) {
    scroll-padding-top: 4.5rem;
}

main.og {
    padding: 0 var(--og-gutter) clamp(36px, 5vw, 64px);
}

/* ★ ขอบเนื้อหาต้องตรงแนวกับแถบเมนู สูตรเดียวกับ .tb1-navbar-container */
.og-wrap {
    max-width: calc(var(--og-page-max) - 2 * var(--og-gutter));
    margin-inline: auto;
}

.og :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure) {
    margin: 0;
}

.og :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.og *,
.og *::before,
.og *::after {
    box-sizing: border-box;
}

.og [hidden] {
    display: none !important;
}

.og-icon {
    display: block;
    flex: 0 0 auto;
}

/* ★ ลิงก์ข้ามไปเนื้อหาซ่อนด้วย clip ไม่ใช่ left:-9999px ซึ่งจะไปโดนตัวตรวจล้นแนวนอน
   ★ พื้นใช้ --tb1-banner-* ที่เข้มทั้งสองโหมด */
.og-skip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body.og-page a.og-skip:focus {
    width: auto;
    height: auto;
    clip: auto;
    padding: 12px 18px;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 0;
    text-decoration: underline;
}

html.tb1-contrast-high body.og-page a.og-skip:focus {
    color: #facc15;
    background: #000000;
    outline: 3px solid #facc15;
}

.og .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.og-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(-1 * var(--og-gutter));
    padding: clamp(34px, 5vw, 58px) var(--og-gutter) clamp(92px, 9vw, 120px);
    color: #ffffff;
    text-align: center;
    /* ★ สีพื้นทึบอยู่ใต้ไล่เฉด ตัวตรวจคอนทราสต์อ่านค่านี้ และเป็นสีที่เห็นจริงตรงกลางหัวหน้า */
    background-color: var(--og-hero-b);
    background-image: linear-gradient(135deg, var(--og-hero-a) 0%, var(--og-hero-b) 52%, var(--og-hero-c) 100%);
}

/* แสงนวลสองดวงกับตารางเส้นบาง ตกแต่งล้วน อยู่หลังตัวอักษร */
.og-hero.is-plain {
    padding-bottom: clamp(34px, 5vw, 58px);
}

.og-hero::before,
.og-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.og-hero::before {
    background-image:
        radial-gradient(circle at 18% 40%, rgba(255, 255, 255, .09) 0%, transparent 48%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .07) 0%, transparent 40%);
}

.og-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000000 35%, transparent);
    mask-image: linear-gradient(180deg, #000000 35%, transparent);
}

.og-hero-in {
    max-width: 60rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.og-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.og-hero-eyebrow .og-icon {
    width: 17px;
    height: 17px;
}

.og-hero-title {
    margin-top: 16px;
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    text-wrap: balance;
}

.og-hero-sub {
    margin-top: 10px;
    max-width: 44rem;
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.75;
    color: #e0e7ff;
}

.og-hero-date {
    margin-top: 4px;
    font-size: var(--tb1-fs-sm, 1rem);
    color: #e0e7ff;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดตัวเลข ลอยทับขอบล่างของหัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.og-figs {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(66px, 7vw, 86px));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: clamp(10px, 1.5vw, 18px);
}

.og-fig {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 18px 16px;
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-radius: var(--og-r);
    box-shadow: var(--og-shadow-float);
}

/* แถบสีบนขอบการ์ด */
.og-fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
    transform-origin: left center;
}

.og-fig.is-warn::before {
    background: var(--og-warn);
}

.og-fig-k {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-fig-ic {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 11px;
}

.og-fig.is-warn .og-fig-ic {
    background: linear-gradient(135deg, #991b1b, #dc2626);
}

.og-fig-v {
    margin-top: 2px;
    color: var(--og-muted);
    font-size: var(--tb1-fs-sm, 1rem);
}

/* หน่วยหลังตัวเลข (<small>) ไม่เล็กกว่าขั้นต่ำของโทเคน — ค่าตั้งต้นของเบราว์เซอร์ (smaller) ได้ราว 12 px */
.og-fig-v small {
    font-size: var(--tb1-fs-xs, .875rem);
}

.og-fig-v b {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: clamp(1.75rem, 2.6vw, 2.15rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--og-ink);
    font-variant-numeric: tabular-nums;
}

.og-fig.is-warn .og-fig-v b {
    color: var(--og-warn);
}

.og-fig-s {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.5;
    color: var(--og-muted);
    overflow-wrap: anywhere;
}

.og .og-fig-link {
    display: inline-block;
    min-height: 24px;
    color: var(--og-warn);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.og .og-fig-link:hover {
    text-decoration-thickness: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ระยะของผัง
   ═══════════════════════════════════════════════════════════════════════ */

.og-sec {
    margin-top: clamp(42px, 5.5vw, 68px);
}

/* ผังต่อจากการ์ดตัวเลขเลย ไม่มีหัวเรื่องคั่น (ผอ. ให้ตัดออก) */
.og-sec-chart {
    margin-top: clamp(30px, 4vw, 48px);
}

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนที่ 1: ผังบริหาร
   ═══════════════════════════════════════════════════════════════════════ */

.og-chart {
    --og-gap: clamp(12px, 1.4vw, 18px);
    --og-link: 30px;
    margin-top: 22px;
}

.og-chart + .og-chart {
    margin-top: 36px;
}

.og-top {
    position: relative;
    display: flex;
    justify-content: center;
}

.og-top-card {
    position: relative;
    width: min(100%, 34rem);
    padding: 20px 22px 22px;
    text-align: center;
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-radius: var(--og-r);
    box-shadow: var(--og-shadow);
}

.og-top-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
}

/* ชื่อหน่วยยอดผังเป็นคำบรรยายเล็ก ๆ คนที่อยู่ในการ์ดคือจุดเด่น */
.og-top-name {
    font-family: var(--tb1-font-body, 'Sarabun', sans-serif);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--og-muted);
}

.og .og-top-link {
    display: inline-block;
    min-height: 24px;
    color: var(--og-muted);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.og .og-top-link:hover {
    color: var(--og-ink);
    text-decoration: underline;
}

/* ★ ทั้งการ์ดผู้บริหารกดได้ เปิดรายชื่อของยอดผัง ลิงก์จริงยังมีตัวเดียว */
.og .og-top-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--og-r);
}

.og .og-top-link:focus-visible {
    outline: none;
}

.og .og-top-link:focus-visible::after {
    outline: 3px solid var(--og-brand);
    outline-offset: -3px;
}

.og-top-card {
    transition: transform .25s var(--og-ease), border-color .25s var(--og-ease);
}

.og-top-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--og-brand) 35%, var(--og-line));
}

.og-leads {
    display: grid;
    gap: 12px;
}

.og-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.og-lead-text {
    min-width: 0;
}

.og-lead-name b {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    color: var(--tb1-heading, var(--og-ink));
}

.og-lead-pos {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.5;
    color: var(--og-ink-2);
}

.og-lead-name,
.og-lead-pos {
    overflow-wrap: anywhere;
}

.og-lead.is-vacant .og-lead-name b,
.og-lead.is-missing .og-lead-pos {
    color: var(--og-warn);
}

.og-leads-top {
    margin-top: 12px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.og-leads-top .og-lead {
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.og-leads-top .og-lead-name b {
    font-size: var(--tb1-fs-lg, 1.25rem);
}

.og-leads-top .og-lead-pos {
    font-size: var(--tb1-fs-sm, 1rem);
}

.og-leads-team {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--og-line);
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    text-align: left;
}

/* ── รูปประจำตัว ──────────────────────────────────────────────────────── */

.og-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--og-paper-alt);
    border: 1px solid var(--og-line-bold);
}

.og-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 600;
    color: var(--og-muted);
}

/* ตำแหน่งว่าง: วงเส้นประ ไม่มีอักษรย่อ เพราะยังไม่มีใคร */
.og-avatar-vacant {
    display: inline-block;
    background: transparent;
    border: 2px dashed var(--og-warn);
}

.og-leads-top .og-avatar {
    width: 88px;
    height: 88px;
    font-size: 1.8rem;
    border: 0;
    box-shadow: 0 0 0 4px var(--og-paper), 0 0 0 6px var(--og-brand);
}

.og-leads-top .og-avatar-vacant {
    border: 2px dashed var(--og-warn);
    box-shadow: none;
}

.og-leads-team .og-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--tb1-fs-sm, 1rem);
}

/* ── ชื่อและรูปที่กดไปหน้าประวัติ ─────────────────────────────────────────
   ★ อยู่ในการ์ดที่ทั้งใบกดได้ (เปิดหน้าต่างรายชื่อ) จึงต้องยกขึ้นเหนือพื้นที่กดของการ์ด
     กดที่ชื่อหรือรูป = ไปหน้าประวัติ กดที่อื่นในการ์ด = เปิดรายชื่อของหน่วย */
.og-avatar-link,
.og .og-person-link {
    position: relative;
    z-index: 2;
}

.og-avatar-link {
    flex: 0 0 auto;
    display: inline-flex;
    border-radius: 50%;
    transition: transform .16s var(--og-ease);
}

.og-avatar-link:hover {
    transform: scale(1.04);
}

.og-avatar-link:hover .og-avatar {
    outline: 2px solid var(--og-brand);
    outline-offset: 2px;
}

.og .og-person-link {
    display: inline-block;
    min-height: 24px;
    color: var(--og-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.og .og-person-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--og-brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.og .og-person-link:focus-visible {
    outline: 3px solid var(--og-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── เส้นโยงจากผู้บริหารลงไปแต่ละฝ่าย ───────────────────────────────────
   ★ วาดด้วย pseudo-element บนตัวการ์ดเอง ไม่ใช้ SVG ที่คำนวณพิกัดเป็นพิกเซล
     จำนวนฝ่ายเปลี่ยนได้โดยไม่ต้องแก้อะไร เพราะตำแหน่งคำนวณจากจำนวนคอลัมน์ */

.og-chart.has-divs .og-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--og-link));
    width: 2px;
    height: var(--og-link);
    margin-left: -1px;
    background: var(--og-line-bold);
    transform-origin: top center;
}

.og-divs {
    --og-n: 4;
    position: relative;
    margin-top: var(--og-link);
    padding-top: var(--og-link);
    display: grid;
    grid-template-columns: repeat(var(--og-n), minmax(0, 1fr));
    gap: var(--og-gap);
    align-items: start;
}

.og-divs[data-count="1"] { --og-n: 1; }
.og-divs[data-count="2"] { --og-n: 2; }
.og-divs[data-count="3"] { --og-n: 3; }
.og-divs[data-count="4"] { --og-n: 4; }
.og-divs[data-count="5"] { --og-n: 5; }
.og-divs[data-count="6"] { --og-n: 6; }
.og-divs[data-count="7"] { --og-n: 4; }

/* เส้นนอนเชื่อมกึ่งกลางคอลัมน์แรกถึงคอลัมน์สุดท้าย */
.og-divs::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((100% - (var(--og-n) - 1) * var(--og-gap)) / (2 * var(--og-n)));
    right: calc((100% - (var(--og-n) - 1) * var(--og-gap)) / (2 * var(--og-n)));
    height: 2px;
    background: var(--og-line-bold);
    transform-origin: center;
}

.og-div {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--og-gap);
}

/* ★ การ์ดฝ่ายทั้งแถวสูงเท่ากัน ส่วนกลุ่มงานข้างล่างยาวไม่เท่ากันได้
   subgrid ให้ทุกคอลัมน์ใช้แถวเดียวกัน เบราว์เซอร์เก่าได้การ์ดสูงตามเนื้อหาของตัวเอง */
@supports (grid-template-rows: subgrid) {
    .og-div {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: var(--og-gap);
    }
}

.og-div::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--og-link));
    width: 2px;
    height: var(--og-link);
    margin-left: -1px;
    background: var(--og-line-bold);
    transform-origin: top center;
}

/* ฝ่ายที่เกินสี่ขึ้นแถวใหม่ เส้นนอนเส้นเดียวโยงไม่ถึง ตัดเส้นตั้งของแถวถัดไป */
.og-divs[data-count="7"] .og-div:nth-child(n + 5)::before {
    display: none;
}

.og-div-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px 16px;
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-radius: var(--og-r);
    box-shadow: var(--og-shadow);
    overflow: hidden;
    transition: transform .25s var(--og-ease), border-color .25s var(--og-ease);
}

.og-div-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--og-tone);
}

.og-div-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--og-tone) 45%, var(--og-line));
}

.og-div-name {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    line-height: 1.45;
}

/* ★ ทั้งการ์ดกดได้ ด้วยลิงก์ที่ขยายพื้นที่คลุมการ์ด ลิงก์จริงยังมีตัวเดียว */
.og .og-div-link {
    display: inline-block;
    min-height: 24px;
    color: var(--og-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.og .og-div-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--og-r);
}

.og .og-div-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--og-tone);
    text-underline-offset: 4px;
}

.og .og-div-link:focus-visible {
    outline: none;
}

.og .og-div-link:focus-visible::after {
    outline: 3px solid var(--og-brand);
    outline-offset: -3px;
}

.og-stats {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--og-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(78px, 100%), 1fr));
    gap: 10px 12px;
}

.og-stat {
    min-width: 0;
    padding-left: 10px;
    border-left: 3px solid var(--og-line-bold);
}

.og-stat.is-warn {
    border-left-color: var(--og-warn);
}

.og-stat dt {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-stat dd {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-stat dd b {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--og-ink);
    font-variant-numeric: tabular-nums;
}

.og-stat.is-warn dd b {
    color: var(--og-warn);
}

/* ═══════════════════════════════════════════════════════════════════════
   กลุ่มงานต่อลงมาใต้การ์ดฝ่าย
   ★ ผอ. ขอ (24 ก.ย. 2569 รอบสอง) ให้หน่วยย่อยแสดงต่อจากแผนผังเลย
     ไม่แยกเป็นส่วนกำลังคนหรือส่วนสิ่งที่ยังไม่ครบ
   ★ เส้นโยงเป็นหวีด้านซ้ายของแต่ละคอลัมน์ ทุกใบมีขีดแยกออกจากเส้นตั้ง
     เส้นตั้งวาดทีละช่วงบนตัวการ์ดเอง จึงจบที่การ์ดใบสุดท้ายพอดี ไม่ห้อยเลยลงไป
   ═══════════════════════════════════════════════════════════════════════ */

.og-grps {
    --og-gg: 10px;
    --og-tick: 26px;
    --og-spine: color-mix(in srgb, var(--og-tone) 40%, var(--og-line-bold));
    position: relative;
    min-width: 0;
    padding-left: 20px;
    display: grid;
    gap: var(--og-gg);
    align-content: start;
}

.og-grp {
    position: relative;
    min-width: 0;
}

/* เส้นตั้ง: จากช่องว่างเหนือการ์ดลงไปถึงขอบล่างของการ์ด */
.og-grp::before {
    content: "";
    position: absolute;
    left: -12px;
    top: calc(-1 * var(--og-gg));
    bottom: 0;
    width: 2px;
    background: var(--og-spine);
    transform-origin: top center;
}

/* ใบแรกต่อขึ้นไปถึงขอบล่างของการ์ดฝ่าย */
.og-grp:first-child::before {
    top: calc(-1 * var(--og-gap));
}

/* ใบสุดท้าย เส้นตั้งหยุดที่ขีดของตัวเอง */
.og-grp:last-child::before {
    bottom: auto;
    height: calc(var(--og-gg) + var(--og-tick) + 1px);
}

.og-grp:first-child:last-child::before {
    height: calc(var(--og-gap) + var(--og-tick) + 1px);
}

/* ขีดแยกจากเส้นตั้งเข้าหาการ์ด */
.og-grp::after {
    content: "";
    position: absolute;
    left: -12px;
    top: var(--og-tick);
    width: 12px;
    height: 2px;
    background: var(--og-spine);
    transform-origin: left center;
}

.og-grp-card {
    position: relative;
    padding: 12px 14px 12px;
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-left: 3px solid var(--og-tone);
    border-radius: var(--og-rs);
    box-shadow: var(--og-shadow);
    transition: transform .2s var(--og-ease), border-color .2s var(--og-ease);
}

.og-grp-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--og-tone) 40%, var(--og-line));
    border-left-color: var(--og-tone);
}

/* หน่วยที่ยังไม่มีรายชื่อ: กรอบเส้นประ พื้นโปร่ง ไม่มีเงา ไม่ใช้สีแดง */
.og-grp.is-empty .og-grp-card {
    background: transparent;
    border-style: dashed;
    border-left-style: dashed;
    border-color: var(--og-line-bold);
    box-shadow: none;
}

.og-grp-name {
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.5;
}

.og .og-grp-link {
    display: inline-block;
    min-height: 24px;
    color: var(--og-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* ★ ทั้งการ์ดกดได้ ลิงก์งานย่อยในการ์ดยกขึ้นเหนือพื้นที่กดของการ์ด */
.og .og-grp-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--og-rs);
}

.og .og-grp-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--og-tone);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.og .og-grp-link:focus-visible {
    outline: none;
}

.og .og-grp-link:focus-visible::after {
    outline: 3px solid var(--og-brand);
    outline-offset: -3px;
}

.og-grp-lead {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.og-grp-lead .og-avatar {
    width: 36px;
    height: 36px;
    font-size: var(--tb1-fs-sm, 1rem);
}

.og-grp-lead-text {
    min-width: 0;
}

.og-grp-lead-name b {
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    color: var(--tb1-heading, var(--og-ink));
}

.og-grp-lead-pos {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--og-muted);
}

.og-grp-lead-name,
.og-grp-lead-pos,
.og-sub-link,
.og-sub-lead {
    overflow-wrap: anywhere;
}

.og-grp-note {
    margin-top: 6px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-grp-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

/* งานย่อยทุกชั้นเป็นรายการในการ์ด เยื้องตามชั้น */
.og-sub {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--og-line-bold);
    display: grid;
    gap: 4px;
}

.og-sub-item {
    position: relative;
    padding-left: 14px;
    display: grid;
}

.og-sub-item[data-level="2"] {
    margin-left: 14px;
}

.og-sub-item[data-level="3"],
.og-sub-item[data-level="4"] {
    margin-left: 28px;
}

.og-sub-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--og-tone);
}

.og-sub-item.is-empty::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--og-line-bold);
}

.og .og-sub-link {
    display: inline-block;
    min-height: 24px;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.5;
    color: var(--og-ink-2);
    text-decoration: none;
}

.og .og-sub-link:hover {
    color: var(--og-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.og-sub-lead {
    margin-top: -2px;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--og-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   รายการที่ยังไม่อยู่ในผัง และหน้าแจ้งปัญหา
   ═══════════════════════════════════════════════════════════════════════ */

.og-loose-wrap {
    margin-top: 18px;
}

/* ★ ข้อสังเกตคือรายการมีสันซ้ายบอกความเร่งด่วน พื้นย้อมจางแค่ใบที่ต้องลงมือ */
.og-callout {
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-left: 4px solid var(--og-line-bold);
    border-radius: var(--og-rs);
    box-shadow: var(--og-shadow);
}

.og-callout.is-warn {
    border-left-color: var(--og-warn);
    background: color-mix(in srgb, var(--og-warn) 4%, var(--og-paper));
}

.og-callout:focus {
    outline: none;
}

.og-callout-title {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--tb1-heading, var(--og-ink));
}

.og-callout.is-warn .og-callout-title {
    color: var(--og-warn);
}

.og-callout-intro {
    margin-top: 3px;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.6;
    color: var(--og-ink-2);
}

.og-callout-sub {
    margin-top: 14px;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    color: var(--og-ink);
}

.og-loose {
    margin-top: 8px;
    display: grid;
}

.og-loose-row {
    padding: 10px 0 10px 12px;
    border-top: 1px solid var(--og-line);
    border-left: 3px solid var(--og-warn);
}

.og-loose-row:first-child {
    border-top: 0;
}

.og-loose-what b {
    color: var(--og-ink);
    font-weight: 600;
}

.og-loose-code {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-loose-why {
    margin-top: 2px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-ink-2);
}

.og-loose-what,
.og-loose-why {
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   หน้าต่างรายชื่อ
   ★ ผอ. ขอ (24 ก.ย. 2569 รอบสาม) ให้กดการ์ดแล้วรายชื่อบุคลากรขึ้นเป็นหน้าต่าง
     และไม่ต้องมีส่วนรายชื่อทุกหน่วยใต้ผังอีก
   ★ <dialog> มีตัวเดียว สองสถานะ
     - ลอย (showModal) เมื่อมีสคริปต์
     - แผงในหน้า (.is-static + open) เมื่อเปิดผ่านลิงก์ ?unit= โดยไม่มีสคริปต์
   ═══════════════════════════════════════════════════════════════════════ */

html.og-modal-open {
    overflow: hidden;
}

.og-modal {
    width: min(100% - 32px, 60rem);
    max-width: none;
    max-height: min(100% - 48px, 56rem);
    padding: 0;
    color: var(--og-ink-2);
    background: transparent;
    border: 0;
    overflow: visible;
}

.og-modal::backdrop {
    background: rgba(8, 15, 35, .58);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* แผงในหน้า: สำหรับลิงก์ ?unit= ที่เปิดโดยไม่มีสคริปต์ */
.og-modal.is-static[open] {
    position: static;
    display: block;
    width: 100%;
    max-height: none;
    margin: 28px 0 0;
}

.og-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    /* ★ ความสูงต้องผูกกับจอตรง ๆ ที่กล่องนี้ เปอร์เซ็นต์ของ <dialog> ที่สูงตามเนื้อหาไม่มีผล
       รายชื่อฝ่ายบริหารทั่วไป 31 คนเคยยืดกล่องเลยขอบล่างจอจนปุ่มเลื่อนในกล่องไม่ทำงาน */
    max-height: min(56rem, calc(100vh - 48px));
    max-height: min(56rem, calc(100dvh - 48px));
    background: var(--og-paper);
    border: 1px solid var(--og-line);
    border-radius: var(--og-r);
    box-shadow: 0 30px 70px -30px rgba(2, 6, 23, .7);
    overflow: hidden;
}

.og-modal.is-static .og-modal-box {
    max-height: none;
    box-shadow: var(--og-shadow);
}

/* แถบสีฝ่ายบนขอบหน้าต่าง */
.og-modal-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--og-tone);
}

.og-modal[data-tone="0"] .og-modal-box::before {
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
}

.og-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--og-line);
}

.og-modal-headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.og-modal-context {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
    overflow-wrap: anywhere;
}

.og-modal-title {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-xl, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--tb1-heading, var(--og-ink));
    overflow-wrap: anywhere;
}

.og-modal-meta {
    margin-top: 2px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og .og-modal-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--og-ink-2);
    background: var(--og-paper-alt);
    border: 1px solid var(--og-line);
    border-radius: 50%;
    transition: background-color .16s var(--og-ease), transform .16s var(--og-ease);
}

.og .og-modal-close:hover {
    color: var(--og-ink);
    background: var(--og-paper);
    border-color: var(--og-line-bold);
    transform: rotate(90deg);
}

.og .og-modal-close:focus-visible {
    outline: 3px solid var(--og-brand);
    outline-offset: 2px;
}

.og-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 22px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.og-modal.is-static .og-modal-body {
    overflow: visible;
}

/* รายชื่อของหน่วยหนึ่ง: หน่วยที่เปิดอยู่ไม่มีหัวซ้ำ หน่วยย่อยมีหัวและสันสีฝ่าย */
.og-md-unit + .og-md-unit {
    margin-top: 20px;
}

.og-md-unit[data-rel] {
    padding-left: 14px;
    border-left: 3px solid color-mix(in srgb, var(--og-tone) 45%, var(--og-line));
}

.og-md-unit[data-rel="2"],
.og-md-unit[data-rel="3"] {
    margin-left: 18px;
}

.og-md-unit.is-self > .og-md-unit-title,
.og-md-unit.is-self > .og-md-unit-meta {
    display: none;
}

.og-md-unit-title {
    font-family: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--tb1-heading, var(--og-ink));
    overflow-wrap: anywhere;
}

.og-md-unit-meta {
    margin: 1px 0 10px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-muted);
}

.og-md-empty {
    padding: 12px 14px;
    color: var(--og-muted);
    border: 1.5px dashed var(--og-line-bold);
    border-radius: var(--tb1-radius-sm, 10px);
}

/* หน่วยย่อยที่ยังว่างในหน้าต่างของฝ่าย เหลือบรรทัดเดียว ไม่ต้องเป็นกล่อง
   ฝ่ายบริหารทั่วไปมีหน่วยว่าง 13 หน่วย กล่องเส้นประ 13 กล่องจะดันรายชื่อจริงลงไปไกล */
.og-md-unit[data-rel] .og-md-empty {
    padding: 0;
    font-size: var(--tb1-fs-xs, .875rem);
    border: 0;
}

/* ── คนหนึ่งคนในหน้าต่าง ─────────────────────────────────────────────── */

.og-people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px clamp(12px, 2vw, 20px);
    align-items: start;
}

.og-person {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    background: var(--og-paper-alt);
    border: 1px solid var(--og-line);
    border-radius: var(--tb1-radius-sm, 10px);
}

/* ผู้นำหน่วยกินเต็มแถวและมีสันสีฝ่าย แยกจากสมาชิกโดยไม่ต้องใช้สีพื้น */
.og-person.is-head {
    grid-column: 1 / -1;
    background: var(--og-paper);
    border-left: 4px solid var(--og-tone);
}

.og-modal[data-tone="0"] .og-person.is-head {
    border-left-color: var(--og-brand);
}

.og-person.is-vacant {
    grid-column: 1 / -1;
    background: transparent;
    border: 1.5px dashed var(--og-warn);
}

.og-person.is-vacant .og-person-name b {
    color: var(--og-warn);
}

.og-person.is-head .og-avatar,
.og-person.is-vacant .og-avatar {
    width: 64px;
    height: 64px;
}

.og-person-text {
    flex: 1 1 auto;
}

.og-person-name b {
    color: var(--tb1-heading, var(--og-ink));
    font-weight: 600;
}

.og-person-pos {
    margin-top: 1px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-ink-2);
}

.og-job {
    margin-top: 7px;
    padding-left: 12px;
    border-left: 2px solid var(--og-line);
    display: grid;
    gap: 2px;
}

.og-job li {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--og-ink-2);
}

.og-person,
.og-person-text {
    min-width: 0;
}

.og-person-name,
.og-person-pos,
.og-job li {
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   จอกลางและจอแคบ
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ ต่ำกว่า 1080px สี่คอลัมน์แคบเกินไป การ์ดฝ่ายเรียงลงเป็นแถวเดียว
   เส้นโยงเปลี่ยนจากเส้นนอนเป็นเส้นตั้งด้านซ้าย เหมือนสารบัญที่แตกกิ่ง */
@media (max-width: 1079.98px) {
    .og-chart {
        --og-link: 22px;
    }

    .og-chart.has-divs .og-top::after {
        left: 18px;
    }

    .og-divs {
        --og-n: 1;
        padding-top: 0;
        padding-left: 34px;
        grid-template-columns: minmax(0, 1fr);
    }

    .og-divs[data-count] {
        --og-n: 1;
    }

    .og-divs::before {
        top: 0;
        bottom: 0;
        left: 18px;
        right: auto;
        width: 2px;
        height: auto;
        margin-left: -1px;
        transform-origin: top center;
    }

    .og-div::before,
    .og-divs[data-count="7"] .og-div:nth-child(n + 5)::before {
        display: block;
        top: 34px;
        left: -16px;
        width: 16px;
        height: 2px;
        margin-left: 0;
        transform-origin: left center;
    }

    /* ผู้นำของฝ่ายวางคู่กันเมื่อมีที่ */
    .og-div .og-leads {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    }

}

@media (max-width: 640px) {
    .og-hero {
        padding-top: 28px;
    }

    .og-hero-sub {
        font-size: var(--tb1-fs-sm, 1rem);
    }

    .og-fig {
        padding: 16px 14px 14px;
    }

    .og-fig-ic {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .og-top-card {
        padding: 18px 14px 18px;
    }

    .og-leads-top .og-avatar {
        width: 76px;
        height: 76px;
    }

    .og-divs {
        padding-left: 26px;
    }

    .og-divs::before {
        left: 12px;
    }

    .og-chart.has-divs .og-top::after {
        left: 12px;
    }

    .og-div::before,
    .og-divs[data-count="7"] .og-div:nth-child(n + 5)::before {
        left: -14px;
        width: 14px;
    }

    .og-div-card {
        padding: 18px 14px 14px;
    }

    .og-grps {
        padding-left: 16px;
    }

    .og-grp::before,
    .og-grp::after {
        left: -10px;
    }

    .og-grp::after {
        width: 10px;
    }

    .og-grp-card {
        padding: 11px 12px;
    }

    .og-callout {
        padding: 14px 14px 16px;
    }

    /* จอแคบ: หน้าต่างเต็มจอ ขึ้นจากขอบล่างเหมือนแผ่นงาน */
    .og-modal:modal {
        width: 100%;
        max-height: calc(100% - 24px);
        margin: auto 0 0;
    }

    .og-modal:modal .og-modal-box {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: var(--og-r) var(--og-r) 0 0;
        border-bottom: 0;
    }

    .og-modal-head {
        padding: 18px 16px 14px;
    }

    .og-modal-body {
        padding: 14px 16px 22px;
    }

    .og-md-unit[data-rel] {
        padding-left: 10px;
    }

    .og-md-unit[data-rel="2"],
    .og-md-unit[data-rel="3"] {
        margin-left: 8px;
    }

    .og-person.is-head .og-avatar,
    .og-person.is-vacant .og-avatar {
        width: 52px;
        height: 52px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว
   ═══════════════════════════════════════════════════════════════════════

   ★ ทุกอย่างอยู่ใน prefers-reduced-motion: no-preference
   ★ สถานะ "รอเล่น" มีเฉพาะเมื่อสคริปต์ติดคลาส og-motion ที่ <main> แล้วเท่านั้น
     สคริปต์ไม่ทำงานก็ไม่มีอะไรค้างอยู่ในสถานะรอ
   ★ สิ่งที่รอเล่นได้มีสองอย่าง: การ์ดเลื่อนลงจากที่เดิม 26px (ยังมองเห็นเต็มตา)
     และเส้นโยงที่ยังไม่ลาก (เป็นเส้นตกแต่ง ไม่ได้ถือข้อมูล)
   ★ ใช้ property translate แยกจาก transform การ์ดจึงเลื่อนขึ้นตอนเข้าจอ
     และยกขึ้นตอนชี้ได้พร้อมกัน โดยสองจังหวะไม่ทับกัน */

@media (prefers-reduced-motion: no-preference) {

    /* หัวหน้า: จังหวะเดียวตอนโหลด ตัวอักษรเห็นตั้งแต่เฟรมแรก แค่เลื่อนขึ้นเข้าที่ */
    .og-hero-in > * {
        animation: og-hero-rise .7s var(--og-ease) both;
    }

    .og-hero-in > :nth-child(2) { animation-delay: .06s; }
    .og-hero-in > :nth-child(3) { animation-delay: .12s; }
    .og-hero-in > :nth-child(4) { animation-delay: .16s; }

    .og-hero::before {
        animation: og-glow 1.8s var(--og-ease) both;
    }

    .og-rise {
        transition-property: translate, transform, border-color;
        transition-duration: .75s, .25s, .25s;
        transition-timing-function: var(--og-ease);
        transition-delay: var(--og-d, 0s), 0s, 0s;
    }

    .og.og-motion [data-og-reveal]:not(.is-in) .og-rise,
    .og.og-motion [data-og-reveal].og-rise:not(.is-in) {
        translate: 0 26px;
    }

    /* จังหวะไล่ของการ์ดตัวเลขและการ์ดฝ่าย ห่างกันทีละ 70ms ไม่เกินครึ่งวินาที */
    .og-figs > :nth-child(2),
    .og-divs > :nth-child(2) { --og-d: .07s; }
    .og-figs > :nth-child(3),
    .og-divs > :nth-child(3) { --og-d: .14s; }
    .og-figs > :nth-child(4),
    .og-divs > :nth-child(4) { --og-d: .21s; }
    .og-figs > :nth-child(5),
    .og-divs > :nth-child(5) { --og-d: .28s; }
    .og-divs > :nth-child(n + 6) { --og-d: .35s; }

    /* กลุ่มงานใต้การ์ดฝ่าย: เส้นตั้งลากลงทีละช่วง ขีดยื่นออก แล้วการ์ดขึ้นตาม */
    .og-grps > :first-child { --og-d: 0s; }
    .og-grps > :nth-child(2) { --og-d: .06s; }
    .og-grps > :nth-child(3) { --og-d: .12s; }
    .og-grps > :nth-child(4) { --og-d: .18s; }
    .og-grps > :nth-child(5) { --og-d: .24s; }
    .og-grps > :nth-child(6) { --og-d: .3s; }
    .og-grps > :nth-child(7) { --og-d: .36s; }
    .og-grps > :nth-child(8) { --og-d: .42s; }
    .og-grps > :nth-child(n + 9) { --og-d: .48s; }

    .og-grp::before {
        transition: transform .3s linear var(--og-d, 0s);
    }

    .og-grp::after {
        transition: transform .22s var(--og-ease) calc(var(--og-d, 0s) + .2s);
    }

    .og.og-motion .og-grps:not(.is-in) .og-grp::before {
        transform: scaleY(0);
    }

    .og.og-motion .og-grps:not(.is-in) .og-grp::after {
        transform: scaleX(0);
    }

    /* แถบสีบนการ์ดตัวเลขลากจากซ้าย */
    .og-fig::before {
        transition: transform .9s var(--og-ease) calc(var(--og-d, 0s) + .15s);
    }

    .og.og-motion .og-figs:not(.is-in) .og-fig::before {
        transform: scaleX(0);
    }

    /* เส้นโยงของผัง: เส้นตั้งจากผู้บริหาร แล้วเส้นนอน แล้วเส้นลงแต่ละฝ่าย */
    .og-chart.has-divs .og-top::after {
        transition: transform .35s var(--og-ease) .15s;
    }

    .og-divs::before {
        transition: transform .5s var(--og-ease) .45s;
    }

    .og-div::before {
        transition: transform .3s var(--og-ease) .85s;
    }

    .og.og-motion .og-chart:not(.is-in) .og-top::after,
    .og.og-motion .og-chart:not(.is-in) .og-div::before {
        transform: scaleY(0);
    }

    .og.og-motion .og-chart:not(.is-in) .og-divs::before {
        transform: scaleX(0);
    }

    /* การ์ดฝ่ายขึ้นตามหลังเส้นโยง */
    .og-chart .og-div-card.og-rise {
        transition-delay: calc(.55s + var(--og-d, 0s)), 0s, 0s;
    }

    /* ★ จังหวะเดียวที่ชี้ไปที่ของจริงชิ้นเดียว: วงแสงรอบรูปผู้บริหารสูงสุด ครั้งเดียวแล้วหาย
       ใช้ box-shadow ไม่ใช้ scale เพราะเงาไม่กินพื้นที่ผัง */
    .og.og-motion .og-chart.is-in .og-leads-top .og-avatar:not(.og-avatar-vacant) {
        animation: og-ring 1.4s var(--og-ease) .3s 1;
    }

    /* หน้าต่างรายชื่อเลื่อนขึ้นเข้าที่ พื้นมืดค่อย ๆ เข้ม (ตัวหน้าต่างไม่จางหาย เห็นรายชื่อตั้งแต่เฟรมแรก) */
    .og-modal:modal[open] .og-modal-box {
        animation: og-modal-in .32s var(--og-ease) both;
    }

    .og-modal:modal[open]::backdrop {
        animation: og-backdrop-in .28s ease-out both;
    }
}

@keyframes og-modal-in {
    from {
        transform: translateY(22px) scale(.985);
    }

    to {
        transform: none;
    }
}

@keyframes og-backdrop-in {
    from {
        background: rgba(8, 15, 35, 0);
    }
}

@keyframes og-hero-rise {
    from {
        transform: translateY(16px);
    }

    to {
        transform: none;
    }
}

@keyframes og-glow {
    from {
        transform: scale(.9);
        opacity: .2;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes og-ring {
    0% {
        box-shadow: 0 0 0 4px var(--og-paper), 0 0 0 6px var(--og-brand), 0 0 0 6px color-mix(in srgb, var(--og-brand) 45%, transparent);
    }

    100% {
        box-shadow: 0 0 0 4px var(--og-paper), 0 0 0 6px var(--og-brand), 0 0 0 22px color-mix(in srgb, var(--og-brand) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .og *,
    .og *::before,
    .og *::after,
    .og-modal::backdrop {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง
   ไฟล์กลางบังคับ h1-h6, p, li, span, div, b, small เป็นสีขาวด้วย !important และลิงก์เป็น #facc15
   ที่นี่จึงเขียนเฉพาะสิ่งที่ไฟล์กลางไม่รู้จัก: <dt> <dd> เส้นขอบ พื้น และเส้นโยง
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high .og-hero {
    background: #000000;
}

html.tb1-contrast-high .og-hero::before,
html.tb1-contrast-high .og-hero::after {
    display: none;
}

html.tb1-contrast-high .og-hero-eyebrow {
    background: #000000;
    border-color: #facc15;
}

/* <dt> <dd> ไม่อยู่ในรายการที่ไฟล์กลางบังคับสีขาว */
html.tb1-contrast-high .og dt,
html.tb1-contrast-high .og dd {
    color: #ffffff;
}

/* ★ สิ่งที่ต้องลงมือแยกด้วยเส้นใต้กับสันหรือกรอบสีเหลือง ไม่ใช่สีตัวอักษร
   สีเหลืองของตัวอักษรถูกจองไว้ให้ลิงก์ ถ้าข้อความเตือนเป็นสีเหลืองด้วยจะดูเหมือนกดได้ */
html.tb1-contrast-high .og-fig.is-warn .og-fig-v b,
html.tb1-contrast-high .og-stat.is-warn dd b,
html.tb1-contrast-high .og-lead.is-vacant .og-lead-name b,
html.tb1-contrast-high .og-person.is-vacant .og-person-name b {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.tb1-contrast-high .og-fig,
html.tb1-contrast-high .og-top-card,
html.tb1-contrast-high .og-div-card,
html.tb1-contrast-high .og-grp-card,
html.tb1-contrast-high .og-callout,
html.tb1-contrast-high .og-modal-box,
html.tb1-contrast-high .og .og-modal-close,
html.tb1-contrast-high .og-person,
html.tb1-contrast-high .og-avatar,
html.tb1-contrast-high .og-fig-ic {
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .og-fig-ic {
    color: #ffffff;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .og-fig::before,
html.tb1-contrast-high .og-top-card::before,
html.tb1-contrast-high .og-div-card::before,
html.tb1-contrast-high .og-chart.has-divs .og-top::after,
html.tb1-contrast-high .og-divs::before,
html.tb1-contrast-high .og-div::before,
html.tb1-contrast-high .og-grp::before,
html.tb1-contrast-high .og-grp::after,
html.tb1-contrast-high .og-sub-item::before {
    background: #ffffff;
}

html.tb1-contrast-high .og-fig.is-warn::before {
    background: #facc15;
}

html.tb1-contrast-high .og-fig.is-warn .og-fig-ic {
    background: #000000;
    border-color: #facc15;
}

/* หน่วยที่ยังไม่มีรายชื่อ: เส้นประสีเหลือง แยกจากหน่วยปกติด้วยรูปทรงและสี */
html.tb1-contrast-high .og-grp.is-empty .og-grp-card,
html.tb1-contrast-high .og-avatar-vacant,
html.tb1-contrast-high .og-person.is-vacant {
    border-color: #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .og-sub-item.is-empty::before {
    background: #000000;
    box-shadow: inset 0 0 0 1.5px #facc15;
}

html.tb1-contrast-high .og-leads-top .og-avatar {
    box-shadow: 0 0 0 3px #000000, 0 0 0 5px #ffffff;
}

html.tb1-contrast-high .og-stat,
html.tb1-contrast-high .og-stats,
html.tb1-contrast-high .og-leads-team,
html.tb1-contrast-high .og-sub,
html.tb1-contrast-high .og-modal-head,
html.tb1-contrast-high .og-md-unit[data-rel],
html.tb1-contrast-high .og-md-empty,
html.tb1-contrast-high .og-job,
html.tb1-contrast-high .og-loose-row {
    border-color: #ffffff;
}

html.tb1-contrast-high .og-stat.is-warn,
html.tb1-contrast-high .og-callout.is-warn,
html.tb1-contrast-high .og-loose-row {
    border-left-color: #facc15;
}

html.tb1-contrast-high .og-person.is-head,
html.tb1-contrast-high .og-grp:not(.is-empty) .og-grp-card {
    border-left-color: #ffffff;
}

html.tb1-contrast-high .og-modal-box::before {
    background: #ffffff;
}

html.tb1-contrast-high .og-modal::backdrop {
    background: rgba(0, 0, 0, .85);
}

/* ปุ่มปิดที่กำลังชี้กลับสี ไม่งั้นเหมือนปุ่มอื่นทุกประการ */
html.tb1-contrast-high .og .og-modal-close:hover,
html.tb1-contrast-high .og .og-modal-close:focus-visible {
    background: #facc15;
    border-color: #facc15;
}

html.tb1-contrast-high .og .og-modal-close:hover .og-icon,
html.tb1-contrast-high .og .og-modal-close:focus-visible .og-icon {
    color: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   พิมพ์ลงกระดาษ
   ★ ผังโครงสร้างถูกเอาไปแนบเอกสารรายงานจริง ต้องพิมพ์ได้ครบทุกชั้น
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    /* แอนิเมชันที่ค้างอยู่กลางทางต้องไม่ติดไปบนกระดาษ */
    .og *,
    .og *::before,
    .og *::after {
        transition: none !important;
        animation: none !important;
    }

    .og-modal-close,
    .og-fig-ic,
    .og-hero::before,
    .og-hero::after {
        display: none !important;
    }

    main.og {
        padding: 0;
    }

    .og-hero {
        margin: 0;
        padding: 0 0 10px;
        color: #000000;
        text-align: left;
        background: #ffffff;
        border-bottom: 2px solid #000000;
    }

    .og-hero-in {
        max-width: none;
        align-items: flex-start;
    }

    .og-hero-eyebrow {
        padding: 0;
        color: #000000;
        background: none;
        border: 0;
    }

    .og-hero-title,
    .og-hero-sub,
    .og-hero-date {
        color: #000000;
    }

    .og-hero-title {
        margin-top: 4px;
        font-size: 1.6rem;
    }

    .og-figs {
        margin-top: 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .og-fig,
    .og-top-card,
    .og-div-card,
    .og-grp-card,
    .og-callout,
    .og-modal-box,
    .og-person {
        box-shadow: none !important;
        border-color: #999999;
    }

    .og-grp:not(.is-empty) .og-grp-card {
        border-left-color: var(--og-tone);
    }

    .og-sec {
        margin-top: 18px;
    }

    .og .og-rise,
    .og .og-div-card,
    .og .og-grp-card {
        translate: none !important;
        transform: none !important;
    }

    .og .og-fig::before,
    .og .og-top::after,
    .og .og-divs::before,
    .og .og-div::before,
    .og .og-grp::before,
    .og .og-grp::after {
        transform: none !important;
    }

    .og-fig::before,
    .og-top-card::before,
    .og-div-card::before,
    .og-grp-card,
    .og-grp::before,
    .og-grp::after,
    .og-sub-item::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* ★ break-inside: avoid ใส่ที่ชิ้นเล็กเท่านั้น ห้ามใส่ที่ส่วนที่สูงกว่าหนึ่งหน้า */
    .og-fig,
    .og-div-card,
    .og-grp,
    .og-callout-title,
    .og-person,
    .og-loose-row {
        break-inside: avoid;
    }

    /* ★ เปิดหน้าต่างรายชื่อค้างไว้แล้วสั่งพิมพ์ ได้รายชื่อของหน่วยนั้นอย่างเดียว ไม่ใช่ผังทั้งผัง
       ไม่ได้เปิดหน้าต่าง ได้ผังทั้งผัง */
    html.og-modal-open main.og > :not(.og-wrap),
    html.og-modal-open .og-wrap > :not(.og-modal) {
        display: none !important;
    }

    .og-modal[open] {
        position: static;
        display: block;
        width: 100%;
        max-height: none;
        margin: 0;
        overflow: visible;
    }

    .og-modal::backdrop {
        display: none;
    }

    .og-modal-box,
    .og-modal-body {
        max-height: none;
        overflow: visible;
    }

    .og-modal-box::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .og-person {
        background: transparent;
    }

    /* ★ กระดาษ A4 กว้างราว 720px ซึ่งตกช่วงจอแคบ ผังจึงเรียงฝ่ายลงแถวเดียวยาวหลายหน้า
       บนกระดาษให้ฝ่ายละหนึ่งแถบเต็มกว้าง กลุ่มงานเป็นสองคอลัมน์ใต้การ์ดฝ่าย และตัดเส้นโยงออก
       (ลองวางฝ่ายเป็นสองคอลัมน์ด้วย subgrid แล้ว Chrome ตัดหน้ากระดาษกลางแถว
       การ์ดกลุ่มงานใบสุดท้ายของคอลัมน์หนึ่งไปซ้อนใต้การ์ดฝ่ายของแถวถัดไป) */
    .og-divs,
    .og-divs[data-count],
    .og-div {
        display: block;
        padding: 0;
    }

    .og-div + .og-div {
        margin-top: 16px;
    }

    .og-div .og-leads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-grps {
        margin-top: 10px;
        padding-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-chart.has-divs .og-top::after,
    .og-divs::before,
    .og-div::before,
    .og-grp::before,
    .og-grp::after {
        display: none !important;
    }

    /* บนกระดาษไม่ต้องมีรูปในการ์ดกลุ่มงาน รูปที่ยังไม่ได้โหลด (loading="lazy") จะกลายเป็นวงว่าง */
    .og-grp .og-avatar {
        display: none;
    }

    .og-people {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 10px;
    }

    .og-person {
        padding: 5px 8px;
        border-radius: 6px;
    }

    .og a {
        color: #000000 !important;
        text-decoration: none !important;
    }
}