:root {
  color-scheme: light;
  --paper: #f2f2f0; --panel: #f7f7f5; --ink: #151515; --muted: #666663;
  --line: #cececa; --soft-line: rgba(21,21,21,.13); --panel-width: clamp(390px, 34vw, 590px);
  font-family: Inter, Pretendard, "Noto Sans KR", Arial, sans-serif; font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; height: 100%; }
body { overflow: hidden; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; } button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: white; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.atlas { height: 100dvh; display: grid; grid-template-columns: minmax(0,1fr) var(--panel-width); }
.map-pane { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 35% 28%,rgba(255,255,255,.82),transparent 35%), radial-gradient(circle at 68% 66%,rgba(0,0,0,.035),transparent 45%), repeating-radial-gradient(circle at 0 0,rgba(0,0,0,.018) 0 1px,transparent 1px 4px), var(--paper); }
.map-pane::after { content:""; pointer-events:none; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px); background-size:80px 80px; }
.map-header { position:absolute; z-index:5; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; padding:24px 28px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--ink); border-radius:50%; font-size:11px; font-weight:800; letter-spacing:.04em; }
.brand>span:last-child { display:grid; gap:3px; }.brand strong { font-size:14px; letter-spacing:-.01em; }.brand small { color:var(--muted); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.map-tools { display:flex; align-items:center; gap:10px; }
.round-button { width:46px; height:46px; border-radius:50%; cursor:pointer; color:white; background:var(--ink); font-size:26px; line-height:1; transform:rotate(-18deg); }
.info-button { min-height:42px; padding:0 15px; cursor:pointer; border:1px solid var(--line); border-radius:999px; background:rgba(247,247,245,.78); font-size:12px; letter-spacing:.04em; }
.round-button:hover { transform:rotate(-18deg) translateY(-2px); }.info-button:hover { transform:translateY(-2px); }
.guide { position:absolute; z-index:8; top:82px; right:28px; width:min(310px,calc(100% - 56px)); padding:18px; border:1px solid var(--ink); background:var(--panel); box-shadow:8px 8px 0 rgba(0,0,0,.1); }
.guide strong { font-size:13px; }.guide p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }

.map-canvas { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; }
.map-canvas.is-dragging { cursor:grabbing; }
.connections { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; }
.connections line { stroke:rgba(21,21,21,.18); stroke-width:1; vector-effect:non-scaling-stroke; }.connections line.is-active { stroke:rgba(21,21,21,.75); stroke-width:1.25; }
.cluster-label { position:absolute; z-index:0; margin:0; color:rgba(21,21,21,.075); font-size:clamp(24px,3.3vw,58px); line-height:.9; font-weight:800; letter-spacing:-.05em; white-space:nowrap; }
.cluster-proof { top:17%; left:4%; transform:rotate(-5deg); }.cluster-opt { top:12%; right:6%; transform:rotate(4deg); }.cluster-learning { right:4%; bottom:10%; transform:rotate(-4deg); }
.research-node { --diameter:calc(var(--size)*1px); position:absolute; z-index:3; top:calc(var(--y)*1%); left:calc(var(--x)*1%); display:grid; place-content:center; width:var(--diameter); height:var(--diameter); padding:7px; border:1px solid rgba(21,21,21,.2); border-radius:50%; cursor:pointer; text-align:center; background:rgba(91,91,87,.74); color:white; opacity:var(--depth-opacity,1); transform:translate(-50%,-50%) scale(var(--node-scale,1)); transition:background .2s ease,box-shadow .2s ease,opacity .16s ease; box-shadow:inset 0 0 24px rgba(255,255,255,.08),0 8px 28px rgba(0,0,0,var(--node-shadow,.08)); will-change:left,top,transform,opacity; }
.research-node span { font-size:clamp(11px,1vw,14px); line-height:1.18; font-weight:680; word-break:keep-all; }.research-node small { margin-top:3px; font-size:8px; letter-spacing:.13em; opacity:.65; }
.research-node:hover { background:#353533; filter:brightness(.9); }
.research-node.is-selected { z-index:4; color:var(--ink); background:var(--panel); border:2px solid var(--ink); box-shadow:0 0 0 6px rgba(21,21,21,.1),0 14px 28px rgba(0,0,0,.12); }
.research-node.is-muted { opacity:.12; }
.ambient-dot { position:absolute; z-index:2; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.55; }
.d1{left:39%;top:28%}.d2{left:58%;top:35%}.d3{left:22%;top:57%}.d4{left:80%;top:58%}.d5{left:39%;top:76%}.d6{left:67%;top:56%}
.space-particle { position:absolute; display:block; border-radius:50%; background:var(--ink); pointer-events:none; transform:translate(-50%,-50%); will-change:left,top,opacity; }
.map-footer { position:absolute; z-index:5; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px; min-height:76px; padding:8px 28px; border-top:1px solid var(--soft-line); background:linear-gradient(transparent,rgba(242,242,240,.94) 42%); font-size:12px; }
.map-footer p { margin:0; color:var(--muted); }.map-footer p strong { color:var(--ink); font-size:15px; }.map-footer p span { margin:0 6px; }
.control-hint { margin-top:5px!important; font-size:9px; letter-spacing:.13em; }
.legend { display:flex; gap:14px; color:var(--muted); }.legend span { display:inline-flex; align-items:center; gap:6px; }.legend-dot { width:9px; height:9px; border:1px solid var(--ink); border-radius:50%; }.legend-dot.experiment { background:linear-gradient(90deg,var(--ink) 50%,transparent 50%); }.legend-dot.verified { background:var(--ink); }
.reset-view { min-height:36px; padding:0 13px; cursor:pointer; border:1px solid var(--line); border-radius:999px; background:rgba(247,247,245,.78); font-size:11px; }
.reset-view:hover { border-color:var(--ink); }
.read-link { font-size:14px; text-underline-offset:4px; padding:12px 5px; }
.zoom-controls { display:flex; gap:6px; }
.zoom-controls button { min-width:44px; min-height:44px; }
#data-status { font-size:14px; line-height:1.6; }
.detail-intro h1 { line-height:1.14; }
.detail-section h2 { font-size:13px; letter-spacing:.08em; }
.related button { min-height:44px; }

.detail-panel { min-width:0; height:100dvh; display:grid; grid-template-rows:minmax(0,1fr) 86px; background:var(--panel); }
.detail-scroll { overflow:auto; padding:28px 36px 46px; scrollbar-width:thin; }
.detail-meta { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.16em; }.detail-meta strong { color:var(--ink); font-size:14px; }
.detail-intro { padding:38px 0 32px; }.status { display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--muted); font-size:12px; }.status i { width:8px; height:8px; border:1px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.detail-intro h1 { margin:0; max-width:10ch; font-size:clamp(44px,4.2vw,72px); line-height:.96; letter-spacing:-.065em; font-weight:720; word-break:keep-all; }.lead { margin:24px 0 0; max-width:40rem; font-size:17px; line-height:1.65; color:#40403d; word-break:keep-all; }
.detail-section { padding:23px 0; border-top:1px solid var(--line); }.detail-section h2 { margin:0 0 16px; color:var(--muted); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }.question { margin:0; font-size:19px; line-height:1.55; font-weight:580; word-break:keep-all; }
.section-line { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }.section-line>span { color:var(--muted); font-size:12px; }
.progress-list { display:grid; gap:15px; }.progress-list p { display:flex; justify-content:space-between; margin:0 0 7px; font-size:12px; }.progress-list b { font-weight:500; color:var(--muted); }.track { display:block; height:2px; background:#d9d9d5; }.track i { display:block; height:100%; background:var(--ink); transition:width .35s ease; }
.updates { margin:0; padding:0; list-style:none; border-top:1px solid var(--soft-line); }.updates li { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:13px 0; border-bottom:1px solid var(--soft-line); }.updates li>span { color:var(--muted); font-size:11px; }.updates div { display:grid; gap:4px; }.updates strong { font-size:14px; font-weight:620; }.updates small { color:var(--muted); font-size:12px; }
.related { display:flex; flex-wrap:wrap; gap:7px; }.related button { min-height:32px; padding:0 12px; cursor:pointer; border:1px solid var(--line); border-radius:999px; background:transparent; font-size:12px; }.related button:hover { color:white; border-color:var(--ink); background:var(--ink); }
.detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:26px; border-top:1px solid var(--line); }.detail-actions button { min-height:48px; padding:0 14px; cursor:pointer; }.primary-action { display:flex; align-items:center; justify-content:space-between; color:white; background:var(--ink); }.secondary-action { border:1px solid var(--ink); background:transparent; }.detail-actions button:hover { filter:invert(.12); }
.panel-navigation { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }.panel-navigation button { min-width:0; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:1fr 1fr; align-items:center; gap:0 12px; padding:16px 20px; cursor:pointer; text-align:left; background:transparent; }.panel-navigation button+button { border-left:1px solid var(--line); text-align:right; }.panel-navigation button>span { grid-row:1/3; font-size:20px; }.panel-navigation small { align-self:end; color:var(--muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }.panel-navigation strong { align-self:start; overflow:hidden; font-size:12px; font-weight:560; white-space:nowrap; text-overflow:ellipsis; }.panel-navigation button:hover { background:#ebebe8; }

dialog { max-width:none; max-height:none; padding:0; border:0; color:var(--ink); background:transparent; }dialog::backdrop { background:rgba(15,15,15,.46); backdrop-filter:blur(5px); }
.search-dialog { width:min(620px,calc(100% - 32px)); }.search-shell,.opinion-shell { background:var(--panel); border:1px solid var(--ink); box-shadow:14px 14px 0 rgba(0,0,0,.18); }.search-shell header,.opinion-shell header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px; border-bottom:1px solid var(--line); }.search-shell header small,.opinion-shell header small { color:var(--muted); font-size:9px; letter-spacing:.16em; }.search-shell h2,.opinion-shell h2 { margin:4px 0 0; font-size:28px; letter-spacing:-.04em; }.search-shell header button,.opinion-shell header button { width:38px; height:38px; cursor:pointer; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:22px; }
.search-field { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin:20px 24px 8px; padding:0 14px; border:1px solid var(--ink); }.search-field span { font-size:24px; transform:rotate(-18deg); }.search-field input { width:100%; min-height:52px; border:0; outline:0; background:transparent; font-size:16px; }.search-results { max-height:52vh; overflow:auto; padding:8px 24px 24px; }.search-results button { width:100%; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:15px 0; cursor:pointer; text-align:left; border-bottom:1px solid var(--line); background:transparent; }.search-results button>span { color:var(--muted); font-size:11px; }.search-results button strong { font-size:15px; }.search-results button small { color:var(--muted); font-size:10px; }.empty-result { padding:28px 0; color:var(--muted); text-align:center; }
.opinion-dialog { width:min(620px,calc(100% - 32px)); }.opinion-shell { display:grid; gap:18px; padding-bottom:24px; }.opinion-context,.opinion-shell>label,.opinion-shell>p,.dialog-actions { margin-inline:24px; }.opinion-context { display:grid; gap:5px; padding:14px; border:1px solid var(--line); }.opinion-context small,.opinion-shell label { color:var(--muted); font-size:12px; }.opinion-context strong { color:var(--ink); font-size:16px; }.opinion-shell>label { display:grid; gap:7px; }.opinion-shell input,.opinion-shell select,.opinion-shell textarea { width:100%; padding:11px 12px; border:1px solid var(--line); background:white; font-size:15px; resize:vertical; }.opinion-shell>p { margin-block:0; color:var(--muted); font-size:12px; line-height:1.5; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }.dialog-actions button { min-height:42px; padding:0 18px; cursor:pointer; border:1px solid var(--ink); background:transparent; }.dialog-actions button:last-child { color:white; background:var(--ink); }

@media (max-width:960px) { :root{--panel-width:390px}.map-footer{grid-template-columns:1fr auto}.legend{display:none}.detail-scroll{padding-inline:26px}.detail-actions{grid-template-columns:1fr} }
@media (max-width:720px) { body{overflow:auto}.atlas{min-height:100dvh;height:auto;display:block}.map-pane{height:66dvh;min-height:500px;border-right:0;border-bottom:1px solid var(--ink)}.map-header{padding:16px}.brand>span:last-child{display:none}.info-button{font-size:0;width:42px;padding:0}.info-button::after{content:"i";font-size:14px}.guide{top:70px;right:16px}.research-node{--diameter:calc(var(--size)*.76px)}.map-footer{min-height:68px;padding:6px 16px}.legend{display:none}.control-hint{letter-spacing:.08em}.detail-panel{height:auto;min-height:78dvh;grid-template-rows:auto 80px}.detail-scroll{overflow:visible;padding:24px 22px 40px}.detail-intro h1{max-width:none;font-size:48px}.lead{font-size:16px} }
@media (max-width:420px) { .research-node{--diameter:calc(var(--size)*.64px)}.research-node span{font-size:10px}.cluster-label{font-size:24px}.panel-navigation button{padding-inline:14px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important} }