/* B 版理監事名錄與燈箱；token 僅限此範圍。 */
.governance { --c-ink: #262422; --c-paper: #F5F5F2; --c-grid: #E6E6E1; --c-line: #D4D4CE; --f-mono: 'IBM Plex Mono', monospace; --container: 1240px; --section-y: 88px; color: var(--c-ink); }
.governance .mono { font-family: var(--f-mono); }
#board { background: var(--c-paper); }

/* ---------- A 版組織架構 ---------- */
/* 連接線：每層之間 = 24px 直線(.org__drop) + 水平匯流線(::before) + 24px 節點短線(.org-node::before)
   第 i 欄中心 = (i - .5) × (W - (n-1)×gap) / n + (i-1) × gap                                   */
#org .org { --gap: 16px; --line: 1px solid var(--c-ink); }
#org .org__root { display: flex; justify-content: center; }
#org .org__drop { width: 1px; height: 24px; margin: 0 auto; background: var(--c-ink); }
#org .org__lv { position: relative; display: grid; column-gap: var(--gap); row-gap: 12px; margin-top: 24px; }
#org .org__lv::before { content: ""; position: absolute; top: -24px; border-top: var(--line); }
#org .org__lv > .org-node { position: relative; }
#org .org__lv > .org-node::before { content: ""; position: absolute; top: -24px; left: 50%; height: 24px; border-left: var(--line); }

#org .org__lv--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#org .org__lv--2::before { left: calc((100% - 2 * var(--gap)) / 6); right: 50%; }
#org .org__lv--3 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#org .org__lv--3::before { left: calc((100% - 6 * var(--gap)) / 14); right: calc((100% - 6 * var(--gap)) * 3 / 14 + var(--gap)); }
#org .org__lv--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; margin-left: auto; margin-right: auto; }
#org .org__lv--4::before { left: calc((100% - 2 * var(--gap)) / 6); right: calc((100% - 2 * var(--gap)) / 6); }
#org .org__lv--5 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
#org .org__lv--5::before { left: calc((100% - 7 * var(--gap)) / 16); right: calc((100% - 7 * var(--gap)) / 16); }

#org .org-node { background: var(--c-white); border: 1px solid var(--c-line-2); padding: 14px 8px; text-align: center; font-size: 14px; line-height: 1.5; }
#org .org-node--root { background: var(--c-ink); color: var(--c-white); border: 0; padding: 16px 56px; font-weight: 700; font-size: 17px; letter-spacing: .3em; }
#org .org-node--board { border: 0; border-top: 4px solid; padding: 16px 12px; font-weight: 700; font-size: 16px; letter-spacing: .2em; }
#org .org-node--director { border-top-color: var(--c-yellow); }
#org .org-node--supervisor { border-top-color: var(--c-gray); }
#org .org-node--key { background: var(--c-yellow); border-color: var(--c-yellow); font-weight: 700; font-size: 16px; letter-spacing: .2em; }
#org .org-node--outline { border-color: var(--c-ink); font-weight: 700; font-size: 15px; letter-spacing: .15em; }
#org .org-node--unit { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 112px; padding: 16px 10px; }
#org .org-node__no { font-family: var(--f-en); font-weight: 800; font-size: 12px; color: var(--c-olive); }
#org .org__more { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- Board 理監事名錄・歷屆回顧 ---------- */
.governance .term-ruler__label { margin: 0 0 8px; font-size: 11px; color: var(--c-muted); }
.governance .term-ruler__scroll { overflow-x: auto; margin-bottom: 48px; }
.governance .term-ruler { display: grid; grid-template-columns: repeat(var(--term-columns, 5), minmax(56px, 1fr)); min-width: calc(var(--term-columns, 5) * 56px); border-bottom: 1px solid var(--c-ink); }
.governance .term-ruler__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 56px; padding: 0 0 12px; border: 0; background: transparent; color: var(--c-muted); font-family: var(--f-mono); font-size: 13px; cursor: pointer; }
.governance .term-ruler__btn::before { content: ""; width: 1px; height: 24px; background: var(--c-ink); }
.governance .term-ruler__btn:hover { color: var(--c-ink); }
.governance .term-ruler__btn[aria-current="true"] { color: var(--c-ink); font-weight: 500; }
.governance .term-ruler__btn[aria-current="true"]::before { width: 14px; background: var(--c-yellow); border: 1px solid var(--c-ink); }

.governance .board__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 32px; }
.governance .board__head .mono { font-size: 13px; }
.governance .board__title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: .06em; }

.governance .board-table { border-top: 1px solid var(--c-ink); }
.governance .role-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-ink); }
.governance .role-row__head { flex: 1 1 200px; max-width: 240px; padding: 20px 16px 20px 0; }
.governance .role-row__zh { margin: 0; font-size: 17px; font-weight: 700; }
.governance .role-row__en { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.governance .role-row__people { flex: 999 1 600px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--c-line); }
.governance .person { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-grid); }
.governance .person__photo { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c-grid); border: 1px solid var(--c-line); font-size: 24px; color: var(--c-gray); }
.governance .person__photo img { width: 100%; height: 100%; object-fit: cover; }
.governance .person__name { font-weight: 500; font-size: 18px; }
.governance .person__firm { margin-top: 4px; font-size: 13px; color: var(--c-muted); }


/* ---------- Lightbox ---------- */
.lightbox.governance { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(38, 36, 34, .95); }
.lightbox.governance[hidden] { display: none; }
.governance .lightbox__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--c-white); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.governance .lightbox__title { display: flex; align-items: baseline; gap: 12px; font-weight: 700; letter-spacing: .1em; }
.governance .lightbox__title .mono { font-size: 11px; font-weight: 400; opacity: .7; }
.governance .lightbox__actions { display: flex; gap: 8px; }
.governance .lightbox__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: var(--c-yellow); color: var(--c-ink); cursor: pointer; }
.governance .lightbox__stage { flex: 1; display: flex; overflow: auto; padding: 20px; }
.governance .lightbox__stage img { margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--c-white); cursor: zoom-in; touch-action: none; user-select: none; }
.governance .lightbox__lens { position: fixed; width: clamp(150px, 18vw, 220px); height: clamp(150px, 18vw, 220px); z-index: 1; border: 2px solid var(--c-white); border-radius: 50%; box-shadow: 0 4px 24px #0008; background-color: var(--c-white); background-repeat: no-repeat; pointer-events: none; }


.governance .board-section__title { margin: 32px 0 16px; font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--c-muted); }
.governance .person > div:last-child { min-width: 0; }
.governance .person__name, .governance .person__firm { overflow-wrap: anywhere; }
.no-js .governance .term-panel + .term-panel { margin-top: 64px; }
@media (max-width: 860px) {
  .governance { --section-y: 64px; }
  #org .org__lv--3, #org .org__lv--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--c-ink); }
  #org .org__lv--3::before, #org .org__lv--5::before, #org .org__lv--3 > .org-node::before, #org .org__lv--5 > .org-node::before { display: none; }
  #org .org__lv--3 .org__main { grid-column: 1 / -1; order: 99; }
  #org .org__empty { display: none; }
  #org .org-node--unit { min-height: 0; }
  .governance .board__title { font-size: 24px; }
  .governance .role-row__head { max-width: none; padding-bottom: 8px; }
  .governance .role-row__people { border-left: 0; }
}