.mode-bar{padding:20px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#e9e5d8}
.atlas-view-label{display:inline-block;color:#344d45;font-size:15px;letter-spacing:.04em}
.mode-switch{display:flex;gap:5px}.mode-switch button{padding:10px 18px;border-radius:24px;border-color:#b8b8a7;font-size:14px}.mode-switch button[aria-pressed=true]{background:#344d45;color:#fff;border-color:#344d45}.mode-switch small{font-size:11px;margin-left:4px}.mode-bar p{font-size:12px;line-height:1.7;margin:9px 0 0;color:#53604e}
.person-search{position:relative;display:flex;align-items:center;gap:10px}.person-search label{font-size:12px}.person-search input{background:#fffdf6;border:1px solid #b8b8a7;padding:11px 14px;border-radius:6px;font:13px 'Noto Sans KR',sans-serif;color:#344d45;width:240px;max-width:100%}
#searchResults{position:absolute;top:46px;right:0;z-index:20;width:350px;max-width:85vw;max-height:320px;overflow:auto;background:#fffdf6;border:1px solid #b8b8a7;border-radius:6px;box-shadow:0 12px 25px #344d4522;padding:6px}
#searchResults button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e6e3d5;border-radius:0;padding:12px 8px;font-size:13px;line-height:1.6}#searchResults button:hover{background:#e9efdf;color:#344d45}
.detail-options{display:none;flex-basis:100%;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px}.detail-options button{padding:7px 12px;border-radius:20px}.detail-options button[aria-pressed=true]{background:#f8f5ec;border-color:#8b967f}.detail-options button[aria-pressed=false]{opacity:.5}body[data-mode=detail] .detail-options{display:flex}
body[data-design=tree] #viewport{height:calc(100dvh - 360px);min-height:470px}
body[data-mode=detail] #viewport{height:calc(100dvh - 420px)}
body[data-mode=detail] .person-node .expand-branch{font-size:12px;white-space:nowrap}
body[data-design=tree] .tree-tools{padding-inline:32px}
.connection-list small{max-width:58%;text-align:right;line-height:1.6}
@media(max-width:600px){.mode-bar{padding:16px;gap:12px}.person-search{width:100%}.person-search input{flex:1;width:0}.mode-switch button{padding:9px 15px}.mode-bar p{font-size:11px}body[data-design=tree] .tree-tools{padding-inline:15px}body[data-design=tree] #viewport{min-height:430px}.detail-options span{flex-basis:100%}}
