/* One content hierarchy at every zoom: identity → role → relationships → life → context. */
body[data-design=tree] #mapLabels .balance-person{display:block;height:auto;min-height:0;padding:4px;overflow:hidden;text-align:left}
body[data-design=tree] #mapLabels .balance-person .depth-identity{display:flex;gap:5px;align-items:center;min-width:0}
body[data-design=tree] #mapLabels .balance-person .person-art-thumb{width:calc(var(--depth-face)*.72);height:var(--depth-face);min-height:0;max-height:none;margin:0;flex-shrink:0}
body[data-design=tree] #mapLabels .balance-person .depth-copy{min-width:0;flex:1}
body[data-design=tree] #mapLabels .balance-person b{font-family:var(--serif);font-weight:600;letter-spacing:-.4px;font-size:var(--depth-title);line-height:1.25;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
#viewport .depth-role{display:block;font-size:var(--depth-role,14px);line-height:1.35;color:#68735b;margin-top:3px;white-space:normal;word-break:keep-all}
#viewport .depth-related{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--depth-text,11px);line-height:1.35;color:#4d6550;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
#viewport .balance-person .depth-related{border-top:1px solid #c4cbb5;margin-top:4px;padding-top:3px;font-size:clamp(9px,calc(var(--map-zoom,1)*22px),12px)}
body[data-design=tree] #viewport:not(.zoom-far) .person-main{display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:5px 10px;padding:10px;min-height:0;height:auto;overflow:hidden;width:280px}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .han{grid-column:1;grid-row:1;width:68px;height:90px;min-height:0;position:relative}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .person-art-thumb{width:68px;height:90px;object-fit:cover}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .node-copy{grid-column:2;grid-row:1;min-width:0;max-height:none;overflow:visible;gap:3px}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .node-copy b{font-size:clamp(22px,calc(22px / var(--map-zoom,1)),32px);line-height:1.25}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .node-copy small{font-size:clamp(14px,calc(14px / var(--map-zoom,1)),20px);line-height:1.35;overflow:visible;max-height:none;display:block}
body[data-design=tree] #viewport:not(.zoom-far) .node-relation{grid-column:1/-1;grid-row:2;display:block;border-top:1px solid #c5ccb6;padding-top:5px;font-size:clamp(12px,calc(12px / var(--map-zoom,1)),17px);line-height:1.35;white-space:normal;color:#526749}
body[data-design=tree] #viewport:not(.zoom-far) .node-life{grid-column:1/-1;grid-row:3;display:block;font-size:clamp(11px,calc(11px / var(--map-zoom,1)),16px);line-height:1.35;color:#72775f}
body[data-design=tree] #viewport:not(.zoom-far) .person-main .node-detail{grid-column:1/-1;grid-row:4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:none;font:16px/1.4 'Noto Sans KR',sans-serif;color:#46513f;text-align:left;word-break:keep-all;margin:0;padding:0}
body[data-design=tree] #viewport[data-depth="100"] .person-main .node-detail{-webkit-line-clamp:3;font-size:14px;line-height:1.4}
body[data-design=tree] #viewport:not(.zoom-far) .family-node-action,body[data-design=tree] #viewport:not(.zoom-far) .family-node-status{font-size:clamp(11px,calc(11px / var(--map-zoom,1)),15px);line-height:1.3;padding:4px 6px;min-height:0;margin-top:2px}
/* Record layout reserves this footprint at every zoom, so expanded text never overlaps. */
#viewport .depth-record{--depth-face:60px;--depth-title:20px;--depth-role:13px;--depth-text:13px;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:9px!important;text-align:left;color:#3d4e37;background:#fffaf0;overflow:hidden;font-family:var(--sans,sans-serif);font-size:13px;line-height:1.4;isolation:auto;border-radius:3px}
#viewport .change-card .depth-record{width:100%;height:100%!important;border:0;visibility:visible}
#viewport .historical-event-card.depth-record{width:330px;min-height:244px;border-radius:3px;box-shadow:0 5px 14px #554a2c16}
#viewport .depth-record>.depth-identity{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0;max-width:none;padding:0;overflow:hidden;-webkit-line-clamp:unset}
#viewport .depth-record .depth-identity>img{position:static!important;inset:auto!important;display:block;width:var(--depth-face)!important;height:calc(var(--depth-face)*1.4)!important;object-fit:cover;flex-shrink:0;border:0;border-radius:2px;margin:0;z-index:auto;max-width:none;min-height:0}
#viewport .depth-record .change-art-tag{display:none}
#viewport .depth-record .depth-copy{display:block;min-width:0;flex:1}
#viewport .depth-record small{display:block;padding:0;margin:0 0 2px;letter-spacing:0;font-size:clamp(9px,calc(var(--map-zoom,1)*12px),12px);line-height:1.3;color:#897442}
#viewport .depth-record b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 var(--depth-title)/1.25 var(--serif,serif);margin:0;padding:0;max-width:none;word-break:keep-all;overflow-wrap:anywhere}
#viewport .depth-record>.depth-related{padding-top:5px;margin:0;border-top:1px solid #c4ccb6;font-size:var(--depth-text);line-height:1.35;flex-shrink:0;max-width:none}
#viewport .depth-record>.depth-summary,#viewport .depth-record>.depth-meaning{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:var(--depth-text);line-height:1.4;white-space:normal;word-break:keep-all;margin:0;padding:0;max-width:none}
#viewport .depth-record>.depth-meaning{font-size:12px;color:#76795f;-webkit-line-clamp:3}
#viewport .depth-record-overlay{position:absolute;pointer-events:auto;transform:none;z-index:2;border:1px solid #b7b99f;border-left:3px solid #9a8253;box-shadow:0 2px 7px #51493012;gap:3px;padding:5px!important}
#viewport .depth-record-overlay .depth-identity{gap:5px}
#viewport .depth-record-overlay .depth-related{padding-top:3px}
#viewport .depth-record-overlay.selected,#viewport .depth-record-overlay.record-selected{outline:2px solid #467c70;outline-offset:2px;background:#f0f4e7}
#viewport[data-depth="70"] .depth-record{--depth-title:24px;--depth-role:16px;--depth-text:16px}
#viewport[data-depth="30"] .depth-role{display:none!important}
#viewport[data-depth="30"] .depth-related,#viewport[data-depth="40"] .depth-related{display:none!important}
#viewport[data-depth="30"] .depth-summary,#viewport[data-depth="40"] .depth-summary,#viewport[data-depth="50"] .depth-summary{display:none!important}
#viewport:not([data-depth="100"]) .depth-meaning{display:none!important}
#viewport.depth-tiny .depth-record-overlay img{display:none!important}
#viewport.depth-tiny .depth-record-overlay b{font-size:8px;-webkit-line-clamp:1}
#viewport.depth-tiny .depth-record-overlay small{font-size:7px}
#viewport.depth-tiny .depth-record-overlay{padding:2px!important}
@media(prefers-reduced-motion:no-preference){#viewport .node-copy,#viewport .depth-copy{transition:color .15s}}

#viewport.zoom-far #world .depth-record{visibility:hidden!important;pointer-events:none}

#viewport .depth-record>.depth-meaning{-webkit-line-clamp:2}
#viewport[data-depth="70"] .depth-record>.depth-summary{-webkit-line-clamp:2}
#viewport .depth-record-overlay{min-height:0;transform:translateY(-50%)}
body[data-design=tree] #viewport[data-depth="70"] .person-main .node-detail{-webkit-line-clamp:1}
body[data-design=tree] #viewport[data-depth="70"] .node-life{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}