/* core_lab.css — CORE AI 연구실 전용 스타일 (core_lab.html 인라인 <style>에서 추출).
   페이지 전용이라 전역 style.css가 아닌 별도 파일 — 다른 페이지는 로드 안 함(경량).
   뇌맵·노드그래프·블록의 categorical 색은 데이터 시각화라 하드코딩 유지,
   chrome(에디터·패널·텍스트)만 테마 변수로 전환. */
.rlab-grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap:16px; align-items:start; }
@media (max-width:1100px){ .rlab-grid{ grid-template-columns:1fr; } }
.rlab-card { background:var(--surface); border:1px solid var(--border);
             border-radius:12px; padding:16px; }
.rlab-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.rlab-input, .rlab-select { background:var(--bg); color:var(--text);
             border:1px solid var(--border); border-radius:8px;
             padding:7px 10px; font-size:13px; }
.rlab-config { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
.rlab-config label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text-muted); }
.rlab-config input { width:100%; box-sizing:border-box; }
#rlab-code { width:100%; box-sizing:border-box; min-height:420px; resize:vertical;
             font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; line-height:1.55;
             background:var(--code-bg); color:var(--code-fg); border:1px solid var(--border);
             border-radius:8px; padding:12px; tab-size:4; spellcheck:false; }
.rlab-actions { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.rlab-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.rlab-metric { background:var(--bg); border:1px solid var(--border);
               border-radius:10px; padding:12px 14px; }
.rlab-metric .v {
    font-size:22px; font-weight:700; font-family:"Space Grotesk",sans-serif;
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rlab-metric .k { font-size:11px; color:var(--text-muted); margin-top:2px; }
.rlab-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.rlab-table th, .rlab-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
.rlab-table th { color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.rlab-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.rlab-banner { border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px; }
.rlab-ok   { background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.3); color:#86efac; }
.rlab-err  { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.3); color:#fca5a5; white-space:pre-wrap; }
.rlab-muted{ color:var(--text-muted); font-size:13px; }
.rlab-pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
             background:rgba(124,131,253,.15); color:#a8aeff; margin-left:6px; }

/* ── 뇌 ↔ CORE AI 개념 지도 (2D 모식도) ── */
.brain-card { margin-bottom:14px; }
.brain-wrap { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
#brain-2d   { width:min(960px,100%); position:relative; }
.bedit { position:fixed; z-index:200; background:var(--card-bg); border:1px solid var(--border);   /* fixed = 2D·3D 공통, 커서 위치에 뜸 */
         border-radius:10px; padding:12px; width:200px; box-shadow:0 8px 24px rgba(0,0,0,.45); font-size:12px;
         max-height:calc(100vh - 16px); overflow-y:auto; }   /* 팝업이 화면보다 길면 내부 스크롤(하단 버튼 접근 보장) */
.bedit label { display:block; margin:9px 0 3px; color:var(--text-muted); font-size:11px; }
.bedit input[type=text], .bedit input[type=range], .bedit input[type=color] { width:100%; box-sizing:border-box; }
.bedit input[type=color] { height:28px; padding:0; }
.bedit .row { display:flex; gap:8px; margin-top:12px; }
.ng-label { font-size:10px; fill:#cfe3ff; pointer-events:none; font-weight:600; }
/* ── 뇌 = 성운(nebula): 정적 SVG라 글로우 필터는 레이아웃당 1회만 계산 → 렉 없음 ── */
.brain-svg  { width:100%; height:auto;
              background:
                radial-gradient(58% 54% at 50% 46%, rgba(var(--primary-rgb),.10), transparent 70%),
                var(--overlay);
              border:1px solid var(--border); border-radius:12px; }
.brain-outline  { fill:rgba(120,110,200,.06); stroke:rgba(150,170,255,.6); stroke-width:2.5;
                  filter:drop-shadow(0 0 5px rgba(var(--primary-rgb),.45)); }        /* 성운 윤곽 후광 */
.brain-fissure  { fill:none; stroke:rgba(160,180,255,.42); stroke-width:2; stroke-linecap:round; }
.brain-fold     { fill:none; stroke:rgba(150,170,255,.2); stroke-width:1.4; stroke-linecap:round; }   /* 이랑(gyri) 결 — 은은한 뇌 디테일 */
.brain-arcuate  { fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:5 4; opacity:.7;
                  filter:drop-shadow(0 0 3px rgba(245,201,123,.5)); }
.brain-region        { cursor:pointer; }
.brain-region ellipse{ opacity:.58; stroke:transparent; stroke-width:2.5; transition:opacity .12s, filter .12s;
                       filter:drop-shadow(0 0 4px rgba(var(--primary-rgb),.3)); }     /* 발광 오브 */
.brain-region:hover ellipse { opacity:.85; filter:drop-shadow(0 0 7px rgba(var(--primary-rgb),.5)); }
.brain-region.sel ellipse   { opacity:.95; stroke:#fff; }
.brain-region text   { font-size:11px; font-weight:700; fill:var(--text); pointer-events:none;   /* 테마 적응 — 블록 라벨과 동일 처리 */
                       paint-order:stroke; stroke:rgba(8,7,22,.55); stroke-width:2.6px; stroke-linejoin:round; }
[data-theme="light"] .brain-region text { stroke:rgba(255,255,255,.6); }   /* 라이트: 밝은 후광으로 파스텔 오브 위 대비 확보 */
/* 우반구 = 좌반구를 좌우 반전(거울상). 라벨 텍스트는 다시 뒤집어 읽기 정상 유지 */
#brain-geo.flip      { transform:translate(540px,0) scale(-1,1); }   /* 즉시 전환(애니메이션 없음) */
#brain-geo.flip text { transform:scaleX(-1); transform-box:fill-box; transform-origin:center; }
.brain-info  { width:min(960px,100%); flex:none; background:var(--card-bg); border:1px solid var(--border);
               border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.7; }
.brain-info h4 { margin:0 0 2px; font-size:15px; color:var(--text); }
.brain-info .bi-core { margin-top:10px; padding:9px 11px; background:var(--primary-dim);
                       border-radius:8px; font-size:12.5px; }
.brain-legend { font-size:11px; color:var(--text-muted); margin-top:10px; }
.brain-status { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.brain-region.mapped ellipse { stroke:var(--gold); stroke-width:3; opacity:.78;
                               filter:drop-shadow(0 0 6px rgba(245,201,123,.55)); }   /* 매핑된 영역 = 골드 발광 */
/* ── 내 뇌 빚기: 윤곽 조절점 핸들 + 편집 상태 ── */
.brain-handle { fill:var(--gold); stroke:#fff; stroke-width:1.5; cursor:grab; opacity:.92;
                filter:drop-shadow(0 0 4px rgba(245,201,123,.7)); transition:fill .1s, r .1s; }
.brain-handle:hover { fill:#fff; r:7.5; }
.brain-handle:active { cursor:grabbing; }
.brain-svg.shaping .brain-outline { stroke:var(--gold); stroke-dasharray:5 3;
                                    filter:drop-shadow(0 0 6px rgba(245,201,123,.5)); }   /* 편집 중 윤곽 강조 */
.brain-svg.shaping #brain-nodes, .brain-svg.shaping #brain-edges { opacity:.32; pointer-events:none; }   /* 편집 중 노드는 흐리게+비활성 → 오조작 방지 */
.bi-map { margin-top:10px; padding:9px 11px; background:rgba(255,215,92,.12);
          border:1px solid rgba(255,215,92,.4); border-radius:8px; font-size:12px; line-height:1.7; }
.bview { background:none; border:1px solid var(--border); border-radius:7px; color:var(--text-muted);
         font-size:12px; font-weight:600; padding:4px 12px; cursor:pointer; }
.bview.on { color:var(--text); border-color:var(--primary); background:var(--primary-dim); }
#brain-3d { width:100%; height:560px; overscroll-behavior:contain; touch-action:none;   /* 캔버스 스크롤이 페이지로 안 넘침(체이닝 방지) */
            background:var(--overlay); border:1px solid var(--border); border-radius:12px; }
#brain-3d canvas { border-radius:12px; display:block; }
/* 3D 캔버스 우측 하단 오버레이 컨트롤(이모지만) — 회전 토글 + 투명/불투명 토글 */
.brain3d-controls { position:absolute; right:12px; bottom:12px; z-index:5; display:flex; gap:6px; }
.brain3d-btn { font-size:17px; line-height:1; padding:5px 9px; border-radius:9px;
               background:var(--surface); border:1px solid var(--border); opacity:.88;
               box-shadow:0 2px 8px var(--shadow); }
.brain3d-btn:hover { opacity:1; border-color:var(--primary); }
.brain3d-btn.on { border-color:var(--primary); background:var(--primary-dim); opacity:1; }
/* ── 노드/연결 그래프 ── */
.ng-palette { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:11px; color:var(--text-muted); }
.ng-source  { width:20px; height:20px; border-radius:50%; background:#6aa6ff; border:2px solid #cfe3ff;
              cursor:grab; flex:none; box-shadow:0 0 7px rgba(120,160,255,.65); touch-action:none; }
.ng-source:active { cursor:grabbing; }
.ng-node  { stroke:transparent; stroke-width:2.5; opacity:.5; cursor:grab; touch-action:none; transition:opacity .12s; }
.ng-node-g:hover ellipse { opacity:.8; }
.ng-edge  { stroke:rgba(150,185,255,.85); stroke-width:1.3; pointer-events:none; }
.ng-edge-hit { stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer; }
.ng-edge-hit:hover + .ng-edge { stroke:#ffd75c; }
.ng-node-g { cursor:grab; }
.bn-sel ellipse { stroke:#ffd75c; stroke-width:3; }
.bn-msel ellipse { stroke:var(--primary); stroke-width:3.5; filter:brightness(1.15); }   /* Shift 다중선택(논리 그룹) */
.bn-grab { cursor:grabbing; }
.bn-grab ellipse { stroke:#ffd75c; stroke-width:3; filter:brightness(1.15); }
/* 시각적 신경망 설계 */
.nnv-chip { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:3px; opacity:.85;
            box-shadow:0 0 5px currentColor; }
/* 블록 이름: 어떤 계열색 위에서도 선명하게 — 심우주색 얇은 후광(paint-order로 글자 뒤에 stroke) */
.nnv-name { font-size:13px; font-weight:700; fill:var(--text);
            paint-order:stroke; stroke:rgba(6,5,18,.6); stroke-width:2.6px; stroke-linejoin:round; }
.nnv-dim  { font-size:12px; fill:var(--text-sub); font-variant-numeric:tabular-nums; }
/* 블록 hover = 코스믹 퍼플 글로우(편집 캔버스에서만) */
.nnv-editing .nnv-node { transition:filter .12s; }
.nnv-editing .nnv-node:hover { filter:drop-shadow(0 0 6px rgba(var(--primary-rgb),.55)); }
.nnv-wl   { font-size:11px; font-weight:700; }
.nnv-cap  { font-size:10px; fill:var(--text-muted); }
.nnv-ehit { cursor:pointer; }   /* 연결선(화살표) 클릭=삭제 */
.nnv-editing { -webkit-user-select:none; user-select:none; touch-action:none; }
.nnv-editing .nnv-node { cursor:grab; }
.nnv-editing .nnv-ehit { cursor:pointer; }
/* ── 우클릭 컨텍스트 메뉴 ── */
.nn-ctx-item { display:block; width:100%; text-align:left; border:none; background:none; color:var(--text);
               font-size:12px; padding:5px 10px; border-radius:5px; cursor:pointer; }
.nn-ctx-item:hover { background:var(--primary-dim); }
/* ── 내 작품 갤러리 ── */
.works-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:12px; }
.work-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.work-thumb { width:100%; height:120px; background:var(--overlay); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.work-thumb svg { width:100%; height:100%; display:block; }
.work-empty-thumb { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-muted); font-size:12px; }
.work-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.work-meta { font-size:11px; color:var(--text-muted); }
.work-acts { display:flex; gap:5px; flex-wrap:wrap; }
.work-acts .bview { font-size:11px; padding:2px 7px; }
/* ── 연구 노트 ── */
.note-h3 { font-size:16px; font-weight:700; margin:0 0 2px; }
.note-h4 { font-size:13px; font-weight:700; color:var(--accent); margin:18px 0 6px; }
.note-body { font-size:13px; line-height:1.8; }
.note-body p { margin:0 0 8px; }
.note-body ul { margin:4px 0 8px; padding-left:18px; }
.note-body li { margin:3px 0; }
.note-flow { background:var(--primary-dim); border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.8; }
.note-list { display:flex; flex-wrap:wrap; gap:10px; }
.note-card-btn { display:flex; align-items:center; gap:9px; background:var(--card-bg); border:1px solid var(--border);
                 border-radius:10px; padding:12px 16px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; }
.note-card-btn:hover { border-color:var(--primary); background:var(--primary-dim); }
.note-dot { width:12px; height:12px; border-radius:50%; flex:none; }

/* ── 상단 서브 탭 (데이터셋 페이지와 동일 패턴) ── */
.seg-tabs { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.seg-tab  { background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted);
            font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer; }
.seg-tab.active { color:var(--text); border-bottom-color:var(--primary); }

/* 신경망 설계 캔버스 스크롤이 페이지로 넘치지 않게(체이닝 방지) — 챗봇 대화박스와 동일 처리.
   JS가 높이를 바꿔도 유지되도록 인라인이 아닌 여기서 지정. */
#nn-viz-scroll { overscroll-behavior: contain; }