@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&family=Outfit:wght@600;700;800&display=swap";:root{--bg:#101314;--panel:#181d1e;--panel-2:#202729;--line:#ffffff1a;--text:#f4f0e8;--muted:#a8b0aa;--gold:#d0a24a;--teal:#53b6a8;--green:#87b96d;--rose:#d78b82;--blue:#7ca7d8;--shadow:0 22px 60px #0000005c}*{box-sizing:border-box}body{background:linear-gradient(180deg, #d0a24a14, transparent 380px), radial-gradient(circle at 16% 12%, #53b6a81f, transparent 28%), var(--bg);min-width:320px;color:var(--text);letter-spacing:0;margin:0;font-family:Noto Sans KR,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1500px,100% - 32px);margin:0 auto;padding:28px 0 48px}.hero{grid-template-columns:minmax(0,1fr) 360px;align-items:stretch;gap:24px;margin-bottom:24px;display:grid}.hero-copy,.hero-panel,.control-panel,.map-stage,.person-panel>*{border:1px solid var(--line);box-shadow:var(--shadow);background:#181d1ed1;border-radius:8px}.hero-copy{min-height:270px;padding:clamp(28px,5vw,52px)}.eyebrow{color:var(--gold);letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-family:Outfit,sans-serif;font-size:.76rem;font-weight:800}.hero h1{letter-spacing:0;max-width:760px;margin:0;font-size:clamp(2.3rem,6vw,5.2rem);line-height:1.02}.hero p:not(.eyebrow){max-width:760px;color:var(--muted);word-break:keep-all;margin:18px 0 0;font-size:1.04rem;line-height:1.75}.hero-panel{gap:12px;padding:22px;display:grid}.hero-panel div{background:var(--panel-2);border-radius:8px;justify-content:space-between;align-items:baseline;padding:18px;display:flex}.hero-panel strong{color:var(--gold);font-family:Outfit,sans-serif;font-size:2.25rem}.hero-panel span{color:var(--muted);font-weight:700}.workspace{grid-template-columns:300px minmax(0,1fr) 330px;align-items:start;gap:18px;display:grid}.control-panel,.person-panel{flex-direction:column;gap:14px;display:flex}.control-panel,.map-stage,.person-panel>*{padding:18px}.panel-block{gap:12px;display:grid}.panel-block h2,.connections-card h3,.reading-card h3{color:var(--text);align-items:center;gap:8px;margin:0;font-size:.98rem;display:flex}.search-box{border:1px solid var(--line);min-height:44px;color:var(--muted);background:#111516;border-radius:8px;align-items:center;gap:8px;padding:0 12px;display:flex}.search-box input{width:100%;color:var(--text);background:0 0;border:0;outline:0}.view-list,.filter-grid,.connection-list{gap:8px;display:grid}.view-list button,.filter-grid button,.connection-list button,.portal-like-button{border:1px solid var(--line);background:var(--panel-2);min-height:40px;color:var(--text);text-align:left;border-radius:8px}.view-list button{align-items:center;gap:8px;padding:0 12px;display:flex}.filter-grid{grid-template-columns:1fr 1fr}.filter-grid button{text-align:center;color:var(--muted);padding:9px 10px;font-size:.8rem;font-weight:800}.view-list button.active,.filter-grid button.active{color:var(--gold);background:#d0a24a1a;border-color:#d0a24a85}.panel-note{border-top:1px solid var(--line);color:var(--muted);gap:10px;padding-top:14px;display:flex}.panel-note svg{color:var(--gold);flex-shrink:0}.panel-note p{margin:0;font-size:.82rem;line-height:1.55}.map-stage{overflow:hidden}.map-header{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px;display:flex}.map-header h2{margin:0;font-size:clamp(1.3rem,3vw,2rem)}.map-header span{color:var(--muted);font-size:.84rem;font-weight:800}.relationship-map{border:1px solid var(--line);background-color:#111516;background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:44px 44px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border-radius:8px;height:min(68vh,760px);min-height:600px;position:relative;overflow:auto}.connection-layer{pointer-events:none;width:1100px;height:760px;position:absolute;top:0;left:0}.relationship-line{stroke:#a8b0aa7a;stroke-width:2px}.relationship-line.parent,.relationship-line.ancestor{stroke:var(--gold)}.relationship-line.spouse{stroke:var(--rose);stroke-dasharray:8 8}.relationship-line.sibling{stroke:var(--blue);stroke-dasharray:4 8}.relationship-line.tribe{stroke:var(--green)}.relationship-line.mentor{stroke:var(--teal);stroke-dasharray:12 6}.relationship-line.selected{stroke-width:4px;filter:drop-shadow(0 0 8px #d0a24a80)}.relationship-label{fill:#f4f0e8b8;paint-order:stroke;stroke:#111516;stroke-width:5px;text-anchor:middle;font-size:13px;font-weight:800}.person-node{left:var(--node-x);top:var(--node-y);min-width:112px;color:var(--text);text-align:center;background:#1d2425;border:1px solid #ffffff26;border-radius:8px;padding:10px 12px;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 10px 26px #00000057}.person-node span{font-size:.95rem;font-weight:800}.person-node small{color:var(--muted);font-size:.68rem;line-height:1.3}.person-node.king,.person-node.messiah{border-color:#d0a24a8a}.person-node.matriarch{border-color:#d78b8280}.person-node.leader,.person-node.priest,.person-node.prophet{border-color:#53b6a880}.person-node.selected{background:var(--gold);color:#17130b;outline:4px solid #d0a24a38}.person-node.selected small{color:#17130bbd}.person-card h2{margin:6px 0 0;font-size:2rem}.person-era{color:var(--gold);background:#d0a24a1f;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800;display:inline-flex}.english-name{color:var(--gold);margin:0 0 14px;font-family:Outfit,sans-serif;font-weight:800}.person-card p:not(.english-name),.reading-card li{color:var(--muted);font-size:.9rem;line-height:1.65}.detail-grid{grid-template-columns:1fr;gap:10px;margin:16px 0;display:grid}.detail-grid div{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:12px}.detail-grid span{color:var(--muted);margin-bottom:4px;font-size:.72rem;display:block}.detail-grid strong{color:var(--text);font-size:.86rem;line-height:1.45}.tag-list{flex-wrap:wrap;gap:7px;display:flex}.tag-list span{color:var(--teal);background:#53b6a81f;border-radius:999px;padding:5px 8px;font-size:.72rem;font-weight:800}.connection-list button{color:var(--text);justify-content:space-between;gap:10px;padding:10px;display:flex}.connection-list small{color:var(--gold);font-weight:800}.reading-card ul{margin:12px 0 0;padding-left:18px}@media (width<=1180px){.hero,.workspace{grid-template-columns:1fr}.hero-panel{grid-template-columns:repeat(3,1fr)}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.panel-note{grid-column:1/-1}}@media (width<=720px){.app-shell{width:min(100% - 20px,1500px);padding-top:12px}.hero-panel,.control-panel{grid-template-columns:1fr}.hero-copy,.hero-panel,.control-panel,.map-stage,.person-panel>*{padding:14px}.relationship-map{height:640px}}