/* 蔡玉乖孫團：族親表、關係圖、個人頁、影集 */
body.cy {
  margin: 0; padding-top: 48px; min-height: 100vh;
  background: #f7f3ea url("../tileable-wood-colored.png");
  color: #3b2a1e; font-family: "Noto Serif TC", "PMingLiU", "新細明體", serif;
}
.cy main a, .cy .lz-sheet a { color: #6c4f3a; }

/* 頭像 */
.cy-av { display: inline-block; flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eee6d6; vertical-align: middle; }
.cy-av-txt { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; }
.cy-av-txt.m { background: #8b6a4f; }
.cy-av-txt.f { background: #b0705f; }
.cy-av.lg { width: 96px; height: 96px; font-size: 38px; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }

/* 滑鼠移到族親上浮出的代表照 */
.cy-pop {
  position: fixed; z-index: 25000; pointer-events: none;
  padding: 6px 6px 4px; background: #fffdf6; border: 1px solid #e0d2b4; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.cy-pop[hidden] { display: none; }
.cy-pop img { display: block; max-width: 260px; max-height: 260px; border-radius: 6px; background: #eee6d6; }
.cy-pop div { padding: 4px 2px 0; font-size: 15px; text-align: center; color: #3b2a1e; }
.cy-pop small { margin-left: 6px; font-size: 12px; color: #8a7766; }

/* 照片格子 */
.cy-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cy-tile { position: relative; margin: 0; cursor: zoom-in; border-radius: 8px; overflow: hidden; background: #eee6d6; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.cy-tile img, .cy-tile .cy-noth { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cy-tile .cy-noth { display: flex; align-items: center; justify-content: center; font-size: 34px; color: #b8976a; }
.cy-tile .play {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; box-sizing: border-box;
}
.cy-tile figcaption { padding: 4px 8px 6px; font-size: 13px; color: #6b5442; background: #fffdf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-tile:hover img { filter: brightness(1.06); }

/* 燈箱 */
.cy-lb { position: fixed; inset: 0; z-index: 30000; display: flex; flex-direction: column; background: rgba(0, 0, 0, .9); }
.cy-lb[hidden] { display: none; }
.cy-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 48px 56px 8px; }
.cy-lb-stage img, .cy-lb-stage video { max-width: 100%; max-height: 100%; border-radius: 4px; background: #000; }
.cy-lb-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 8px 16px 18px; color: #eee; font-size: 15px; }
.cy-lb-cap a { color: #f3e3c3; }
.cy-lb-cap .n { color: #aaa; }
.cy-lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; border-radius: 50%; }
.cy-lb button:hover { background: rgba(255, 255, 255, .25); }
.cy-lb-x { top: 10px; right: 12px; width: 40px; height: 40px; font-size: 26px; line-height: 40px; }
.cy-lb-prev, .cy-lb-next { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 8px !important; font-size: 34px; }
.cy-lb-prev { left: 8px; }
.cy-lb-next { right: 8px; }
@media (max-width: 600px) {
  .cy-lb-stage { padding: 52px 4px 4px; }
  .cy-lb-prev, .cy-lb-next { top: auto; bottom: 8px; transform: none; height: 44px; }
}

/* 工具列（族親表、關係圖、影集） */
.cy-bar {
  position: sticky; top: 48px; z-index: 6;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #fbf8f0; border-bottom: 1px solid #e6dcc6;
}
.cy-bar button, .cy-bar select {
  padding: 5px 12px; border: 1px solid #e6dcc6; border-radius: 16px; background: #fff;
  color: #3b2a1e; font: inherit; font-size: 15px; cursor: pointer;
}
.cy-bar button.on { background: #6c4f3a; border-color: #6c4f3a; color: #fff; }
.cy-bar input[type=search] {
  width: 180px; padding: 5px 12px; border: 1px solid #e6dcc6; border-radius: 16px; font: inherit; font-size: 15px; background: #fff;
}
.cy-bar .sep { width: 1px; height: 22px; background: #e6dcc6; margin: 0 4px; }
.cy-bar .hint { margin-left: auto; font-size: 13px; color: #8a7766; }
.cy-search-box { position: relative; z-index: 12; display: flex; flex: 0 1 520px; align-items: center; gap: 8px; min-width: 240px; }
.cy-search-box input[type=search] { flex: 1 1 auto; width: auto; min-width: 110px; }
.cy-bar .cy-same-toggle { flex: none; padding: 6px 14px; border-color: #e4d5bc; color: #6c4f3a; background: #fffdf8; white-space: nowrap; }
.cy-bar .cy-same-toggle:hover, .cy-bar .cy-same-toggle[aria-expanded=true] { background: #f1e7d4; border-color: #c7aa7d; }
.cy-search-options { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(520px, calc(100vw - 20px)); max-height: min(58vh, 440px); overflow: auto; padding: 8px; border: 1px solid #e2d2b6; border-radius: 15px; background: rgba(255,253,248,.99); box-shadow: 0 12px 30px rgba(45,32,21,.18); }
.cy-search-options[hidden] { display: none; }
.cy-search-head { padding: 7px 11px 9px; border-bottom: 1px solid #eee5d5; color: #9b7156; font-size: 13px; letter-spacing: 1px; }
.cy-search-option { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: #3b2a1e; font: inherit; text-align: left; cursor: pointer; }
.cy-search-option:hover, .cy-search-option.active { background: #f6efdf; }
.cy-search-option .cy-av { width: 34px; height: 34px; }
.cy-search-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.cy-search-option-name { font-size: 16px; }
.cy-search-option-meta { color: #8a96aa; font-size: 13px; }
.cy-search-empty { padding: 18px 12px; color: #8a7766; text-align: center; }
.cy-search-group { padding: 4px 0 7px; }
.cy-search-group-title { display: flex; justify-content: space-between; padding: 8px 11px 4px; color: #6c4f3a; font-size: 15px; }
.cy-search-group-title span { color: #9a8770; font-size: 12px; }
@media (max-width: 767px) {
  .cy-bar { padding: 6px 10px; gap: 4px; }
  .cy-bar input[type=search] { width: 120px; flex: 1; }
  .cy-bar .hint { display: none; }
  .cy-search-box { flex: 1 1 100%; min-width: 0; }
  .cy-search-box input[type=search] { width: auto; min-width: 0; }
  .cy-search-options { width: min(520px, calc(100vw - 20px)); }
}

/* ---------- 族親表 ---------- */
.cy-table { max-width: 1180px; margin: 0 auto; padding: 14px 12px 70px; }
/* 用 clip 而不是 hidden：hidden 會讓表格變成捲動容器，表頭的 sticky 位置就會跑到表格中間 */
.cy-table table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, .94); border-radius: 10px; overflow: clip; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.cy-table th { position: sticky; top: calc(48px + var(--bar-h, 49px)); z-index: 2; padding: 10px 8px; background: #6c4f3a; color: #fff; font-weight: 500; text-align: left; white-space: nowrap; }
.cy-table td { padding: 9px 8px; border-bottom: 1px solid #efe6d2; vertical-align: top; font-size: 16px; }
.cy-table tbody tr:nth-child(even) td { background: #fdfaf2; }
.cy-table tbody tr:hover td { background: #fef8e2; }
.cy-table tr.gen-head td { background: #eee6d6 !important; color: #6c4f3a; font-weight: 700; letter-spacing: 2px; padding: 7px 12px; }
.cy-table tr.hit td { background: #fff3c4 !important; }
.cy-table .td-code { white-space: nowrap; color: #8a7766; }
.cy-table .td-name { white-space: nowrap; }
.cy-table .td-name .who { display: flex; align-items: center; gap: 8px; }
.cy-table .td-name a { font-size: 17px; text-decoration: none; color: #3b2a1e; }
.cy-table .td-name a:hover { color: #6c4f3a; text-decoration: underline; }
.cy-table .mate { margin: 2px 0 0 42px; font-size: 14px; color: #6b5442; }
.cy-table .dead { font-size: 12px; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: #e7e1d6; color: #6b5442; }
.cy-table .td-rec { font-size: 15px; line-height: 1.7; color: #4d3d34; }
.cy-table .td-rec .kids { color: #6b5442; }
.cy-table .td-rec .ph { color: #b8976a; font-size: 13px; white-space: nowrap; }
.cy-empty { padding: 40px 16px; text-align: center; color: #8a7766; }
@media (max-width: 767px) {
  .cy-table { padding: 8px 0 70px; }
  .cy-table table { border-radius: 0; }
  .cy-table .th-rec, .cy-table .td-rec, .cy-table .th-code, .cy-table .td-code { display: none; }
  .cy-table th { position: static; }
  .cy-table td { padding: 8px 6px; font-size: 15px; }
  .cy-table tbody tr[data-u] { cursor: pointer; }
}

/* 樹狀目錄（沿用 lz-tv） */
.cy-tv-wrap { max-width: 1000px; margin: 0 auto; }
.lz-tv .cy-av { width: 24px; height: 24px; font-size: 12px; align-self: center; }

/* ---------- 關係圖 ---------- */
body.cy-tree { display: flex; flex-direction: column; box-sizing: border-box; height: 100vh; height: 100dvh; overflow: hidden; }
.ft-view { position: relative; flex: 1; min-height: 0; overflow: auto; cursor: grab; touch-action: pan-x pan-y; }
.ft-view.drag { cursor: grabbing; user-select: none; }
.ft { display: inline-block; padding: 30px 60px 60px 30px; }
.ft ul { position: relative; display: flex; flex-direction: column; margin: 0 0 0 28px; padding: 0; list-style: none; }
.ft > ul { margin-left: 0; }
.ft li { position: relative; display: flex; align-items: center; padding: 5px 0 5px 28px; }
.ft > ul > li { padding-left: 0; }
.ft li::before { content: ''; position: absolute; left: 0; top: 50%; width: 28px; border-top: 2px solid #b8976a; }
.ft li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid #b8976a; }
.ft li:first-child::after { top: 50%; }
.ft li:last-child::after { bottom: 50%; }
.ft li:only-child::after, .ft > ul > li::before, .ft > ul > li::after { display: none; }
.ft li > ul::before { content: ''; position: absolute; left: -28px; top: 50%; width: 28px; border-top: 2px solid #b8976a; }
.ft-node {
  position: relative; display: flex; align-items: center; gap: 9px; flex: none;
  min-width: 150px; padding: 7px 12px 7px 8px; border-radius: 10px;
  background: #fffdf6; border: 1px solid #e0d2b4; box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  cursor: pointer; transition: box-shadow .15s, transform .15s;
}
.ft-node:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .16); transform: translateY(-1px); }
.ft-node.f { border-left: 4px solid #c98b7a; }
.ft-node.m { border-left: 4px solid #8b6a4f; }
.ft-node.hit { box-shadow: 0 0 0 3px #fbba00, 0 4px 12px rgba(0, 0, 0, .2); }
.ft-node .cy-av { width: 40px; height: 40px; font-size: 17px; }
.ft-node .nm { font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.ft-node .sub { font-size: 12.5px; color: #8a7766; white-space: nowrap; }
.ft-node .mt { font-size: 12.5px; color: #6b5442; white-space: nowrap; }
.ft-node.dead { background: #f5f1e8; }
.ft-node.dead .nm::after { content: '歿'; margin-left: 5px; padding: 0 4px; font-size: 11px; border-radius: 6px; background: #e7e1d6; color: #6b5442; vertical-align: 2px; }
.ft-tog {
  position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #b8976a; background: #fff;
  color: #6c4f3a; font-size: 13px; line-height: 17px; text-align: center; cursor: pointer; padding: 0;
}
.ft-tog:hover { background: #fef8e2; }
.ft-zoom { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; font-size: 14px; color: #6b5442; }

/* 同頁彈出的族親資料（沿用 lz-sheet） */
.lz-sheet-head .cy-av { width: 56px; height: 56px; font-size: 22px; align-self: center; }
.lz-sheet-rec .row { margin-bottom: 4px; }
.lz-sheet-rec .row b { display: inline-block; width: 4.2em; color: #8a7766; font-weight: 400; }
.lz-sheet .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lz-sheet .acts a { padding: 7px 14px; border-radius: 6px; font-size: 15px; text-decoration: none; border: 1px solid #e6dcc6; color: #3b2a1e; background: #fff; }
.lz-sheet .acts a.primary { background: #6c4f3a; border-color: #6c4f3a; color: #fff; }
.lz-sheet .cy-tiles { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

/* ---------- 個人頁 ---------- */
.rc { max-width: 820px; margin: 0 auto; padding: 20px 14px 60px; }
.rc .crumbs { font-size: 14px; color: #6b5442; margin-bottom: 10px; line-height: 1.8; }
.rc .card { padding: 24px 24px 26px; background: rgba(255, 255, 255, .94); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
.rc .top { display: flex; gap: 18px; align-items: center; }
.rc h1 { margin: 0; font-size: 30px; letter-spacing: 4px; }
.rc .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.rc .meta span { padding: 2px 10px; border-radius: 12px; background: #d8ce89; font-size: 14px; }
.rc .meta span.lt { background: #eee6d6; }
.rc .rel { display: grid; grid-template-columns: 5em 1fr; gap: 10px 10px; margin: 20px 0 4px; font-size: 16px; }
.rc .rel dt { color: #8a7766; padding-top: 3px; }
.rc .rel dd { margin: 0; }
.rc .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc .chips a {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border: 1px solid #e6dcc6; border-radius: 18px;
  background: #fffdf6; text-decoration: none; font-size: 15px; color: #3b2a1e;
}
.rc .chips a .cy-av { width: 26px; height: 26px; font-size: 12px; }
.rc .chips a:hover { border-color: #b8976a; background: #fef8e2; }
.rc .chips a small { color: #8a7766; }
.rc .story { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6dcc6; font-size: 17px; line-height: 1.9; white-space: pre-line; }
.rc h2 { margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e6dcc6; font-size: 19px; letter-spacing: 2px; color: #6c4f3a; }
.rc .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rc .acts a { padding: 8px 14px; border-radius: 6px; font-size: 15px; text-decoration: none; border: 1px solid #e6dcc6; color: #3b2a1e; background: #fff; }
.rc .acts a.primary { background: #6c4f3a; border-color: #6c4f3a; color: #fff; }
.rc .pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.rc .pager a { padding: 8px 14px; border-radius: 6px; background: rgba(255, 255, 255, .9); text-decoration: none; font-size: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
@media (max-width: 600px) {
  .rc .card { padding: 18px 16px 22px; }
  .rc h1 { font-size: 25px; letter-spacing: 2px; }
  .cy-av.lg { width: 76px; height: 76px; font-size: 30px; }
  .rc .rel { grid-template-columns: 4em 1fr; }
}

/* ---------- 影集 ---------- */
.al { max-width: 1180px; margin: 0 auto; padding: 16px 14px 70px; }
.al section { margin-bottom: 22px; padding: 14px 16px 16px; background: rgba(255, 255, 255, .88); border-radius: 12px; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.al section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; letter-spacing: 1px; }
.al section h3 a { color: #3b2a1e; text-decoration: none; }
.al section h3 a:hover { text-decoration: underline; }
.al section h3 small { font-size: 13px; color: #8a7766; font-weight: 400; letter-spacing: 0; }
.al .count { margin: 0 2px 12px; font-size: 14px; color: #6b5442; }
@media (max-width: 600px) {
  .al { padding: 10px 8px 60px; }
  .al section { padding: 12px 10px 12px; }
  .cy-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
}

@media print {
  .cy-bar, .lz-nav { display: none !important; }
  body.cy { padding-top: 0; background: #fff; }
  .cy-table th { position: static; }
}

/* ---------- 族親樹狀圖：典藏畫卷色彩 ---------- */
body.cy-tree {
  background:
    radial-gradient(ellipse at 52% 38%, rgba(255, 249, 228, .96), rgba(255, 249, 228, 0) 56%),
    linear-gradient(135deg, rgba(255,255,255,.3), rgba(218,180,119,.12)),
    #f5ecd9 url("../tileable-wood-colored.png");
}
.cy-tree .ft-view {
  background-image:
    radial-gradient(circle at 50% 14%, rgba(230, 185, 85, .12), transparent 30%),
    linear-gradient(rgba(255,253,245,.2), rgba(255,250,235,.12));
  scrollbar-color: #b58a4b #eee2ca;
}
.cy-tree .ft { padding: 38px 70px 70px 38px; }
.cy-tree .ft li::before,
.cy-tree .ft li::after,
.cy-tree .ft li > ul::before { border-color: #b58a4b; }
.cy-tree .ft li::before,
.cy-tree .ft li > ul::before { border-top-width: 3px; }
.cy-tree .ft li::after { border-left-width: 3px; }
.cy-tree .ft-node {
  min-width: 174px;
  padding: 10px 18px 10px 11px;
  border: 1px solid rgba(177, 137, 71, .62);
  border-radius: 15px 10px 15px 10px;
  background: linear-gradient(145deg, #fffdf5 0%, #fff7e4 100%);
  box-shadow: 0 5px 13px rgba(83, 53, 22, .16), inset 0 0 0 3px rgba(255,255,255,.68);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cy-tree .ft-node::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(190, 151, 87, .25);
  border-radius: 11px 7px 11px 7px;
  pointer-events: none;
}
.cy-tree .ft-node:hover {
  z-index: 2;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(83, 53, 22, .24), inset 0 0 0 3px rgba(255,255,255,.75);
  filter: saturate(1.08);
}
.cy-tree .ft-node.m {
  border-left: 5px solid #478dbd;
  background: linear-gradient(145deg, #fff 0%, #e9f5ff 100%);
}
.cy-tree .ft-node.f {
  border-left: 5px solid #d77891;
  background: linear-gradient(145deg, #fff 0%, #fff0f2 100%);
}
.cy-tree .ft > ul > li > .ft-node {
  border: 2px solid #d09a32;
  border-left: 6px solid #c88918;
  background: linear-gradient(145deg, #fff9df 0%, #ffe4a0 100%);
  box-shadow: 0 0 0 4px rgba(226, 177, 71, .18), 0 8px 20px rgba(99, 61, 12, .23), inset 0 0 0 3px rgba(255,255,255,.64);
}
.cy-tree .ft-node.dead { filter: saturate(.68); }
.cy-tree .ft-node .cy-av {
  width: 48px; height: 48px;
  border: 3px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 8px rgba(54, 38, 24, .24);
}
.cy-tree .ft-node .nm { font-weight: 700; color: #39271c; }
.cy-tree .ft-node .sub { color: #75604c; }
.cy-tree .ft-node .mt { color: #815b37; }
.cy-tree .ft-tog {
  width: 23px; height: 23px; line-height: 20px;
  border: 2px solid #c79a52;
  background: linear-gradient(#fffef9, #f3dfb8);
  box-shadow: 0 2px 6px rgba(72, 48, 24, .18);
  font-weight: 700;
}
.cy-tree .ft-tog:hover { background: #f7d98c; }
.cy-tree .cy-bar {
  background: rgba(255, 251, 241, .96);
  box-shadow: 0 3px 12px rgba(91, 64, 34, .1);
}
.cy-tree .cy-bar button {
  border-color: #d6bd91;
  box-shadow: 0 1px 4px rgba(80, 55, 30, .08);
}
.cy-tree .cy-bar button:hover { background: #f6e5bd; border-color: #bd8e43; }
.cy-tree .cy-bar button#zFit,
.cy-tree .cy-bar button#expand { background: #70452e; color: #fff7e5; border-color: #70452e; }
.cy-tree .cy-bar button#zFit:hover,
.cy-tree .cy-bar button#expand:hover { background: #8a5a37; }
@media (max-width: 767px) {
  .cy-tree .ft { padding: 24px 35px 50px 18px; }
  .cy-tree .ft-node { min-width: 145px; padding: 8px 15px 8px 8px; }
  .cy-tree .ft-node .cy-av { width: 38px; height: 38px; }
}

.cy-tree .ft > ul > li > .ft-node.m,
.cy-tree .ft > ul > li > .ft-node.f {
  border-color: #d09a32;
  border-left: 6px solid #c88918;
  background: linear-gradient(145deg, #fff9df 0%, #ffe4a0 100%);
}

/* ---------- 世系樹：橫向世代圖譜 ---------- */
.cy-tree .ft { width: max-content; min-width: 100%; }
.cy-tree .ft > ul { flex-direction: row; align-items: flex-start; gap: 16px; }
.cy-tree .ft ul ul {
  flex-direction: row;
  gap: 17px;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
}
.cy-tree .ft li {
  flex-direction: column;
  align-items: center;
  padding: 27px 10px 0;
}
.cy-tree .ft > ul > li { padding: 0; }
.cy-tree .ft li::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: auto;
  border-top: 3px solid #b58a4b;
}
.cy-tree .ft li::after {
  left: 50%;
  right: auto;
  top: 0;
  bottom: auto;
  width: 0;
  height: 27px;
  border-left: 3px solid #b58a4b;
}
.cy-tree .ft li:first-child::before { left: 50%; }
.cy-tree .ft li:last-child::before { right: 50%; }
.cy-tree .ft li:only-child::before,
.cy-tree .ft > ul > li::before,
.cy-tree .ft > ul > li::after { display: none; }
.cy-tree .ft li > ul::before {
  left: 50%;
  top: -28px;
  bottom: auto;
  width: 0;
  height: 28px;
  border: 0;
  border-left: 3px solid #b58a4b;
}
.cy-tree .ft-node {
  min-width: 184px;
  border-radius: 16px 10px 16px 10px;
}
.cy-tree .ft-node.m {
  border-color: #64a9d8;
  border-left: 6px solid #2685c1;
  background: linear-gradient(145deg, #fff 0%, #e1f1ff 100%);
  box-shadow: 0 5px 14px rgba(31, 96, 142, .2), inset 0 0 0 3px rgba(255,255,255,.72);
}
.cy-tree .ft-node.f {
  border-color: #e39aab;
  border-left: 6px solid #d56484;
  background: linear-gradient(145deg, #fff 0%, #ffe7ed 100%);
  box-shadow: 0 5px 14px rgba(150, 58, 87, .18), inset 0 0 0 3px rgba(255,255,255,.72);
}
.cy-tree .ft > ul > li > .ft-node.m,
.cy-tree .ft > ul > li > .ft-node.f {
  border: 2px solid #d09a32;
  border-left: 7px solid #c88918;
  background: linear-gradient(145deg, #fff9df 0%, #ffe4a0 100%);
  box-shadow: 0 0 0 5px rgba(226,177,71,.2), 0 9px 23px rgba(99,61,12,.24), inset 0 0 0 3px rgba(255,255,255,.7);
}
.cy-tree .ft-node .nm { font-size: 19px; letter-spacing: 1.5px; }
.cy-tree .ft-node .sub { margin-top: 2px; color: #725b40; }
.cy-tree .ft-node .mt { margin-top: 2px; color: #8b5d28; }
.cy-tree .ft-tog {
  right: 50%;
  top: auto;
  bottom: -13px;
  transform: translateX(50%);
  z-index: 3;
  width: 25px;
  height: 25px;
  line-height: 21px;
  border: 2px solid #c58d37;
  color: #70451f;
  background: linear-gradient(#fffdf5, #efd195);
  box-shadow: 0 3px 8px rgba(87,57,24,.22);
}
.cy-tree .ft-tog:hover { background: #ffe29b; }
@media (max-width: 767px) {
  .cy-tree .ft { padding: 22px 24px 58px 16px; }
  .cy-tree .ft ul ul { gap: 8px; margin-top: 22px; }
  .cy-tree .ft li { padding: 22px 5px 0; }
  .cy-tree .ft li::after { height: 22px; }
  .cy-tree .ft li > ul::before { top: -23px; height: 23px; }
  .cy-tree .ft-node { min-width: 150px; }
  .cy-tree .ft-node .nm { font-size: 17px; }
  .cy-tree .ft-tog { bottom: -11px; }
}

/* ---------- 族親樹狀：世代典藏卡片 ---------- */
.cy-tv-wrap {
  max-width: none; height: calc(100vh - 48px - var(--bar-h, 52px)); min-height: 420px; overflow: auto;
  background: radial-gradient(ellipse at 52% 12%, rgba(255,246,216,.96), rgba(255,246,216,0) 44%), linear-gradient(135deg,rgba(255,255,255,.32),rgba(210,176,117,.12));
  scrollbar-color: #b58a4b #eee2ca;
}
.cy-tv-wrap .lz-tv { width: max-content; min-width: 100%; overflow: visible; white-space: normal; padding: 35px 45px 80px; }
.cy-tv-wrap .lz-tv > ul { display:flex; flex-direction:row; align-items:flex-start; gap:14px; }
.cy-tv-wrap .lz-tv ul ul { display:flex; flex-direction:row; gap:14px; margin:30px 0 0; padding:0; border:0; }
.cy-tv-wrap .lz-tv li { position:relative; display:flex; flex-direction:column; align-items:center; padding:26px 8px 0; }
.cy-tv-wrap .lz-tv > ul > li { padding-top:0; }
.cy-tv-wrap .lz-tv li::before { content:''; position:absolute; left:0; right:0; top:0; width:auto; border-top:3px solid #bb8b45; }
.cy-tv-wrap .lz-tv li::after { content:''; position:absolute; left:50%; top:0; bottom:auto; height:26px; border-left:3px solid #bb8b45; }
.cy-tv-wrap .lz-tv li:first-child::before { left:50%; }
.cy-tv-wrap .lz-tv li:last-child::before { right:50%; }
.cy-tv-wrap .lz-tv li:only-child::before, .cy-tv-wrap .lz-tv > ul > li::before, .cy-tv-wrap .lz-tv > ul > li::after { display:none; }
.cy-tv-wrap .lz-tv li > ul::before { content:''; position:absolute; left:50%; top:-30px; width:0; height:30px; border:0; border-left:3px solid #bb8b45; }
.cy-tv-wrap .tv-row {
  position:relative; display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto auto; align-items:center; column-gap:11px;
  width:218px; min-height:104px; padding:9px 13px 11px; border:1px solid #80b5d8; border-left:6px solid #348cc4; border-radius:16px 10px 16px 10px;
  background:linear-gradient(145deg,#fff 0%,#e4f3ff 100%); box-shadow:0 6px 16px rgba(30,90,135,.2),inset 0 0 0 3px rgba(255,255,255,.72); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;
}
.cy-tv-wrap .tv-row::before { content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.82); border-radius:11px 7px 11px 7px; pointer-events:none; }
.cy-tv-wrap .tv-row:hover { z-index:2; transform:translateY(-3px); box-shadow:0 11px 22px rgba(30,70,105,.25),inset 0 0 0 3px rgba(255,255,255,.78); }
.cy-tv-wrap .tv-row.f { border-color:#dfa0ad; border-left-color:#d56b86; background:linear-gradient(145deg,#fff 0%,#ffedf1 100%); box-shadow:0 6px 16px rgba(147,52,78,.17),inset 0 0 0 3px rgba(255,255,255,.72); }
.cy-tv-wrap .tv-row.root { border:2px solid #d09a32; border-left:7px solid #c88918; background:linear-gradient(145deg,#fff9df 0%,#ffe5a4 100%); box-shadow:0 0 0 5px rgba(226,177,71,.18),0 9px 22px rgba(99,61,12,.23),inset 0 0 0 3px rgba(255,255,255,.72); }
.cy-tv-wrap .tv-row .cy-av { grid-column:1; grid-row:2 / span 2; align-self:center; width:52px; height:52px; border:3px solid #fff; box-shadow:0 2px 8px rgba(55,38,23,.22); }
.cy-tv-wrap .tv-gen { grid-column:1 / -1; grid-row:1; display:inline-flex; width:max-content; max-width:100%; padding:2px 9px; border-radius:12px; color:#fff; background:#398cc1; font-size:12px; line-height:1.4; }
.cy-tv-wrap .tv-row.f .tv-gen { background:#d76683; }
.cy-tv-wrap .tv-row.root .tv-gen { background:#9e671d; }
.cy-tv-wrap .tv-name { grid-column:2; grid-row:2; align-self:end; overflow:hidden; color:#30251d; font-size:18px; font-weight:700; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.cy-tv-wrap .tv-name:hover { color:#9d3e32; text-decoration:underline; }
.cy-tv-wrap .tv-sub { grid-column:2; grid-row:3; align-self:start; color:#806c55; font-size:13px; line-height:1.55; white-space:normal; }
.cy-tv-wrap .tv-tog { position:absolute; z-index:3; right:7px; top:7px; display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; margin:0; padding:0; border:1px solid #c4954c; border-radius:50%; color:#70451f; background:linear-gradient(#fffef8,#f1d89f); box-shadow:0 2px 6px rgba(87,57,24,.18); font-size:14px; line-height:1; cursor:pointer; }
.cy-tv-wrap .tv-tog:hover { background:#ffe29b; }
.cy-tv-wrap .tv-row.hit { outline:3px solid #f3b528; outline-offset:2px; background-color:#fff3c4; }
@media (max-width:767px) {
  .cy-tv-wrap { height:calc(100vh - 48px - var(--bar-h,52px)); min-height:340px; }
  .cy-tv-wrap .lz-tv { padding:22px 18px 65px; }
  .cy-tv-wrap .lz-tv ul ul { gap:7px; margin-top:24px; }
  .cy-tv-wrap .lz-tv li { padding:22px 4px 0; }
  .cy-tv-wrap .lz-tv li::after { height:22px; }
  .cy-tv-wrap .lz-tv li > ul::before { top:-24px; height:24px; }
  .cy-tv-wrap .tv-row { width:178px; min-height:92px; grid-template-columns:44px 1fr; column-gap:8px; padding:8px 10px; }
  .cy-tv-wrap .tv-row .cy-av { width:42px; height:42px; }
  .cy-tv-wrap .tv-name { font-size:16px; }
  .cy-tv-wrap .tv-sub { font-size:12px; }
}

/* ---------- 心智圖／樹狀圖雙模式 ---------- */
.cy-tv-modes { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; padding:10px 14px; border:1px solid #e0c99e; border-radius:0 0 14px 0; background:rgba(255,251,241,.96); box-shadow:0 3px 10px rgba(75,51,25,.12); color:#725638; font-size:14px; }
.cy-tv-modes button { padding:6px 14px; border:1px solid #d8bd8b; border-radius:18px; color:#6b4a2d; background:#fffdf7; font:inherit; cursor:pointer; }
.cy-tv-modes button:hover { background:#f7e9c8; }
.cy-tv-modes button.on { color:#fff7e4; border-color:#70452e; background:#70452e; box-shadow:0 2px 6px rgba(76,48,27,.2); }
.cy-tv-wrap .tv-row { width:190px; min-height:88px; grid-template-columns:38px 1fr; column-gap:8px; padding:8px 11px 9px; }
.cy-tv-wrap .tv-row .cy-av { width:36px; height:36px; border-width:2px; }
.cy-tv-wrap .tv-name { font-size:16px; }
.cy-tv-wrap .tv-sub { font-size:12px; line-height:1.45; }
.cy-tv-wrap .tv-tog { width:21px; height:21px; font-size:12px; }
.cy-tv-wrap.tree-classic { max-width:1000px; height:auto; min-height:0; overflow:visible; background:transparent; scrollbar-color:auto; }
.cy-tv-wrap.tree-classic .lz-tv { width:auto; min-width:0; overflow-x:auto; white-space:nowrap; padding:12px 16px 80px; }
.cy-tv-wrap.tree-classic .lz-tv > ul { display:block; }
.cy-tv-wrap.tree-classic .lz-tv ul ul { display:block; margin:0 0 0 10px; padding:0 0 0 14px; border-left:1px dotted #b8976a; }
.cy-tv-wrap.tree-classic .lz-tv li { position:static; display:list-item; padding:0; }
.cy-tv-wrap.tree-classic .lz-tv li::before,
.cy-tv-wrap.tree-classic .lz-tv li::after,
.cy-tv-wrap.tree-classic .lz-tv li > ul::before { content:none; display:none; }
.cy-tv-wrap.tree-classic .tv-row,
.cy-tv-wrap.tree-classic .tv-row.f,
.cy-tv-wrap.tree-classic .tv-row.root {
  position:relative; display:flex; grid-template-columns:none; grid-template-rows:none; align-items:baseline; gap:6px;
  width:auto; min-height:0; margin:0; padding:6px 8px; border:0; border-radius:6px;
  color:#3b2a1e; background:transparent; box-shadow:none; transition:none;
}
.cy-tv-wrap.tree-classic .tv-row::before { content:none; }
.cy-tv-wrap.tree-classic .tv-row:hover { transform:none; background:#fef8e2; box-shadow:none; }
.cy-tv-wrap.tree-classic .tv-row.hit { background:#fff3c4; outline:0; box-shadow:inset 0 0 0 2px #fbba00; }
.cy-tv-wrap.tree-classic .tv-row .cy-av { display:inline-block; flex:none; grid-column:auto; grid-row:auto; align-self:center; width:24px; height:24px; border:0; box-shadow:none; }
.cy-tv-wrap.tree-classic .tv-gen { display:none; }
.cy-tv-wrap.tree-classic .tv-name { display:inline; grid-column:auto; grid-row:auto; align-self:auto; overflow:visible; color:#3b2a1e; font-size:16px; font-weight:400; }
.cy-tv-wrap.tree-classic .tv-name:hover { color:#6c4f3a; }
.cy-tv-wrap.tree-classic .tv-sub { display:inline; grid-column:auto; grid-row:auto; align-self:auto; color:#8a7766; font-size:13px; }
.cy-tv-wrap.tree-classic .tv-tog { position:relative; right:auto; top:auto; display:inline-block; flex:none; width:20px; height:auto; margin:-9px -14px -9px -8px; padding:9px 14px 9px 8px; border:0; border-radius:0; color:#a89a86; background:transparent; box-shadow:none; font-size:inherit; line-height:normal; }
.cy-tv-wrap.tree-classic .tv-tog.has { color:#3b2a1e; }
@media (max-width:767px) {
  .cy-tv-modes { position:sticky; top:0; padding:7px 10px; gap:5px; font-size:13px; }
  .cy-tv-modes button { padding:5px 10px; }
  .cy-tv-wrap .lz-tv { padding-top:22px; }
  .cy-tv-wrap .tv-row { width:164px; min-height:82px; grid-template-columns:34px 1fr; column-gap:6px; padding:7px 9px; }
  .cy-tv-wrap .tv-row .cy-av { width:32px; height:32px; }
  .cy-tv-wrap.tree-classic .lz-tv { padding:10px 10px 70px; }
}
.cy-tv-zoom { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding-left:10px; border-left:1px solid #decba5; font-variant-numeric:tabular-nums; }
.cy-tv-zoom > span { min-width:3.5em; text-align:center; color:#6b4a2d; }
.cy-tv-zoom button { min-width:34px; padding:5px 10px; font-size:13px; }
.cy-tv-zoom #tvZoomFit { min-width:auto; }
.cy-tv-wrap.tree-classic .cy-tv-zoom { display:none; }
@media (max-width:767px) {
  .cy-tv-modes { flex-wrap:wrap; }
  .cy-tv-zoom { gap:3px; margin-left:3px; padding-left:6px; }
  .cy-tv-zoom button { min-width:30px; padding:4px 8px; }
}
.cy-tv-depth { display:inline-flex; align-items:center; gap:5px; margin-left:5px; color:#725638; white-space:nowrap; }
.cy-tv-depth select { max-width:112px; padding:6px 10px; border:1px solid #d8bd8b; border-radius:14px; color:#6b4a2d; background:#fffdf7; font:inherit; cursor:pointer; }
.cy-tv-depth select:focus-visible { outline:2px solid #b58a4b; outline-offset:2px; }
@media (max-width:767px) { .cy-tv-depth { margin-left:0; } .cy-tv-depth select { max-width:92px; padding:5px 7px; } }
.cy-tv-wrap.tree-mindmap { cursor:grab; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; }
.cy-tv-wrap.tree-mindmap.is-panning,
.cy-tv-wrap.tree-mindmap.is-panning * { cursor:grabbing !important; user-select:none !important; }

/* ---------- 心智圖：由左至右的分枝版 ---------- */
.cy-tv-wrap.tree-mindmap .lz-tv > ul { flex-direction:row; align-items:center; gap:24px; }
.cy-tv-wrap.tree-mindmap .lz-tv ul ul {
  flex-direction:column; align-items:stretch; gap:12px;
  margin:0 0 0 30px; padding:0 0 0 27px;
  border-left:3px solid #bb8b45;
}
.cy-tv-wrap.tree-mindmap .lz-tv li { flex-direction:row; align-items:center; padding:0; }
.cy-tv-wrap.tree-mindmap .lz-tv > ul > li { padding:0; }
.cy-tv-wrap.tree-mindmap .lz-tv li::before {
  left:-27px; right:auto; top:50%; bottom:auto; width:27px;
  border-top:3px solid #bb8b45;
}
.cy-tv-wrap.tree-mindmap .lz-tv li::after { display:none; }
.cy-tv-wrap.tree-mindmap .lz-tv li:only-child::before { display:block; }
.cy-tv-wrap.tree-mindmap .lz-tv > ul > li::before { display:none; }
.cy-tv-wrap.tree-mindmap .lz-tv li > ul::before {
  left:-30px; top:50%; bottom:auto; width:30px; height:0;
  border:0; border-top:3px solid #bb8b45;
}
.cy-tv-wrap.tree-mindmap .tv-row { width:190px; }
@media (max-width:767px) {
  .cy-tv-wrap.tree-mindmap .lz-tv { padding:22px 18px 65px; }
  .cy-tv-wrap.tree-mindmap .lz-tv ul ul { gap:8px; margin-left:22px; padding-left:20px; }
  .cy-tv-wrap.tree-mindmap .lz-tv li::before { left:-20px; width:20px; }
  .cy-tv-wrap.tree-mindmap .lz-tv li > ul::before { left:-22px; width:22px; }
  .cy-tv-wrap.tree-mindmap .tv-row { width:164px; }
}
.cy-tv-wrap.tree-standard { cursor:grab; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; }
.cy-tv-wrap.tree-standard.is-panning,
.cy-tv-wrap.tree-standard.is-panning * { cursor:grabbing !important; user-select:none !important; }

/* ---------- 心智圖：米金紙箋與柔和曲線 ---------- */
.cy-tv-wrap.tree-mindmap .lz-tv ul ul { border-left-color:#b99b67; }
.cy-tv-wrap.tree-mindmap .lz-tv li::before {
  left:-27px; top:calc(50% - 15px); right:auto; bottom:auto;
  width:27px; height:15px;
  border:0; border-left:2.5px solid #b99b67; border-bottom:2.5px solid #b99b67;
  border-radius:0 0 0 15px;
}
.cy-tv-wrap.tree-mindmap .lz-tv li > ul::before { border-top-color:#b99b67; }
.cy-tv-wrap.tree-mindmap .tv-row,
.cy-tv-wrap.tree-mindmap .tv-row.f {
  border:1px solid #cdb57f;
  border-left:5px solid #b79a5e;
  border-radius:5px;
  background:linear-gradient(145deg,#fffdf6 0%,#f8f0d9 100%);
  box-shadow:0 3px 8px rgba(91,67,35,.13),inset 0 0 0 2px rgba(255,255,255,.7);
}
.cy-tv-wrap.tree-mindmap .tv-row::before { border:1px solid rgba(191,165,105,.28); border-radius:3px; }
.cy-tv-wrap.tree-mindmap .tv-row:hover { box-shadow:0 6px 14px rgba(91,67,35,.2),inset 0 0 0 2px rgba(255,255,255,.75); }
.cy-tv-wrap.tree-mindmap .tv-row.root {
  border:2px solid #b98b3e; border-left:7px solid #a97b2d;
  background:linear-gradient(145deg,#fff8dc 0%,#f2dfa4 100%);
  box-shadow:0 0 0 4px rgba(205,169,86,.16),0 7px 17px rgba(91,67,35,.2),inset 0 0 0 2px rgba(255,255,255,.7);
}
.cy-tv-wrap.tree-mindmap .tv-gen { color:#554629; background:#c9bd72; }
.cy-tv-wrap.tree-mindmap .tv-row.f .tv-gen { color:#554629; background:#d9c88d; }
.cy-tv-wrap.tree-mindmap .tv-row.root .tv-gen { color:#fff9e9; background:#9d7436; }
.cy-tv-wrap.tree-mindmap .tv-sub { color:#877354; }
.cy-tv-wrap.tree-mindmap .tv-tog { border-color:#b99a5c; color:#5f4928; background:linear-gradient(#fffdf5,#e8d49d); box-shadow:0 2px 5px rgba(82,61,32,.16); }
.cy-tv-wrap.tree-mindmap .tv-tog:hover { background:#f1dfab; }
.cy-tv-wrap.tree-mindmap .tv-row.hit { outline-color:#c99d2e; }
@media (max-width:767px) {
  .cy-tv-wrap.tree-mindmap .lz-tv li::before { left:-20px; top:calc(50% - 12px); width:20px; height:12px; border-bottom-left-radius:12px; }
}

/* 心智圖族親姓名依性別著色 */
.cy-tv-wrap.tree-mindmap .tv-row.m .tv-name { color:#496b87; }
.cy-tv-wrap.tree-mindmap .tv-row.f .tv-name { color:#9c5a58; }
.cy-tv-wrap.tree-mindmap .tv-row.m .tv-name:hover { color:#2f526f; }
.cy-tv-wrap.tree-mindmap .tv-row.f .tv-name:hover { color:#813e43; }

/* 心智圖卡片沿用標準圖的男女與始祖配色 */
.cy-tv-wrap.tree-mindmap .tv-row.m {
  border:1px solid #80b5d8; border-left:6px solid #348cc4; border-radius:16px 10px 16px 10px;
  background:linear-gradient(145deg,#fff 0%,#e4f3ff 100%);
  box-shadow:0 6px 16px rgba(30,90,135,.2),inset 0 0 0 3px rgba(255,255,255,.72);
}
.cy-tv-wrap.tree-mindmap .tv-row.f {
  border:1px solid #dfa0ad; border-left:6px solid #d56b86; border-radius:16px 10px 16px 10px;
  background:linear-gradient(145deg,#fff 0%,#ffedf1 100%);
  box-shadow:0 6px 16px rgba(147,52,78,.17),inset 0 0 0 3px rgba(255,255,255,.72);
}
.cy-tv-wrap.tree-mindmap .tv-row.m::before,
.cy-tv-wrap.tree-mindmap .tv-row.f::before { border:1px solid rgba(255,255,255,.82); border-radius:11px 7px 11px 7px; }
.cy-tv-wrap.tree-mindmap .tv-row.m .tv-gen { color:#fff; background:#398cc1; }
.cy-tv-wrap.tree-mindmap .tv-row.f .tv-gen { color:#fff; background:#d76683; }
.cy-tv-wrap.tree-mindmap .tv-row.root {
  border:2px solid #d09a32; border-left:7px solid #c88918; border-radius:16px 10px 16px 10px;
  background:linear-gradient(145deg,#fff9df 0%,#ffe5a4 100%);
  box-shadow:0 0 0 5px rgba(226,177,71,.18),0 9px 22px rgba(99,61,12,.23),inset 0 0 0 3px rgba(255,255,255,.72);
}
.cy-tv-wrap.tree-mindmap .tv-row.root .tv-gen { color:#fff9e9; background:#9e671d; }

/* 個人頁：右上角「回上頁」 */
.rc .card { position: relative; }
.rc-back {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  padding: 4px 12px; border: 1px solid #e0d2b4; border-radius: 16px; background: #fffdf6;
  color: #6c4f3a; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.rc-back:hover { background: #fef8e2; border-color: #b8976a; }
@media (max-width: 600px) { .rc .top { padding-right: 64px; } .rc-back { top: 10px; right: 10px; padding: 3px 10px; font-size: 13px; } }

/* 心智圖連接線：每位子女各畫自己那段直線，直線只到第一位與最後一位子女的中線，
   父卡片的橫線接在子女群的正中間；分枝顏色依子女性別（男藍、女粉） */
.cy-tv-wrap.tree-mindmap .lz-tv ul ul { --g:12px; --pl:27px; --ml:30px; position:relative; gap:var(--g); margin-left:var(--ml); padding-left:var(--pl); border-left:0; }
.cy-tv-wrap.tree-mindmap .lz-tv li > ul::before {
  content:''; display:block; position:absolute; left:calc(-1 * var(--ml)); right:auto; top:50%; bottom:auto;
  width:var(--ml); height:0; margin-top:-1px; border:0; border-top:2.5px solid #b99b67; border-radius:0;
}
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li::before,
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:first-child::before,
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:last-child::before,
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:only-child::before {
  content:''; display:block; position:absolute; left:calc(-1 * var(--pl)); right:auto; top:50%; bottom:auto;
  width:var(--pl); height:0; margin-top:-1px; border:0; border-top:2.5px solid #b99b67; border-radius:0;
}
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li::after {
  content:''; display:block; position:absolute; left:calc(-1 * var(--pl)); right:auto; width:0; height:auto;
  top:calc(var(--g) / -2); bottom:calc(var(--g) / -2); margin-left:-1px; border:0; border-left:2.5px solid #b99b67;
}
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:first-child::after { top:50%; }
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:last-child::after { bottom:50%; }
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li:only-child::after { display:none; }
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li.m::before { border-top-color:#4b93c6; }
.cy-tv-wrap.tree-mindmap .lz-tv ul ul > li.f::before { border-top-color:#d9768f; }
@media (max-width:767px) {
  .cy-tv-wrap.tree-mindmap .lz-tv ul ul { --g:8px; --pl:20px; --ml:22px; }
}

/* 清單式樹狀：姓名依性別著色（男藍、女粉） */
.cy-tv-wrap.tree-classic .tv-row.m .tv-name { color:#2f6a98; }
.cy-tv-wrap.tree-classic .tv-row.f .tv-name { color:#b4506a; }
.cy-tv-wrap.tree-classic .tv-row.m .tv-name:hover { color:#1d4c73; }
.cy-tv-wrap.tree-classic .tv-row.f .tv-name:hover { color:#8f3550; }
.cy-tv-wrap.tree-classic .tv-row.root .tv-name { color:#3b2a1e; font-weight:700; }

/* 族親表列：親戚關係圖（稱謂對照），和表列、樹狀同一排切換 */
.cy-kin { max-width:820px; margin:14px auto 40px; padding:10px; border:3px double #a4825a; border-radius:6px; background:#fbf6ea; box-shadow:0 6px 20px rgba(60,40,20,.18); }
.cy-kin[hidden] { display:none; }
.cy-kin img { display:block; width:100%; height:auto; }
@media (max-width:600px) { .cy-kin { margin:8px; padding:5px; } }

/* 燈箱照片：小照片也撐滿畫面；點一下可放大 */
.cy-lb-stage { overflow:hidden; }
.cy-lb-stage img { width:100%; height:100%; object-fit:contain; background:transparent; cursor:zoom-in; transition:transform .25s ease; touch-action:pinch-zoom; }
.cy-lb-stage img.zoomed { cursor:zoom-out; transition:transform .25s ease, transform-origin .08s linear; }
.cy-lb button { z-index:2; }