/* ===== 왼쪽 60 / 20 / 20 레이아웃 ===== */
:root{
  --left-panel-w: 364px;
  --left-gap: 12px;
  --tw-rail-w: 99px;
  --tw-rail-left: 8px;
  --tw-rail-gap: 14px;
  --tw-left-panel-left: calc(var(--tw-rail-left) + var(--tw-rail-w) + var(--tw-rail-gap));
  --tw-right-panel-right: 8px;
  --left-top: 12px;
  --left-bottom: 48px;
  --left-total-h: calc(100vh - 24px);
  --left-cat-h: calc((var(--left-total-h) - 24px) * 0.75);
  --left-ctrl-h: calc((var(--left-total-h) - 24px) * 0.25);
  --left-edit-h: calc((var(--left-total-h) - 24px) * 0.25);
  --panel-bg: #0c1018;
  --panel-border: rgba(255,255,255,0.12);
  --panel-accent: #6db0ff;
  --panel-radius: 18px;
  --panel-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
html, body {
	height: 100%;
	margin: 0;
}
html, body {
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

svg text {
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
#wrap {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #0b0e14;
}

#timewebLayout {
	display: flex;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

#timewebMain {
	flex: 1;
	order: 3;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

#timewebSide {
	position: absolute;
	left: var(--tw-rail-w);
	top: 0;
	height: 100%;
	z-index: 20;
	width: 0;
	overflow: hidden;
	border-right: 0;
	background: #fff;
	transition: width 0.2s ease, border-right 0.2s ease;
}

#timewebSide.has-content {
	width: 18%;
	min-width: 425px;
	border-right: 1px solid #ddd;
}



@media (max-width: 768px) {
  #timewebLayout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  #timewebMain {
    flex: 1;
    order: 3;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  #timewebSide {
    position: absolute;
    left: var(--tw-rail-w);
    top: 60%;
    height: 40%;
    z-index: 20;
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-right: 0;
    border-top: 0;
    background: #fff;
  }

  #timewebSide.has-content {
    width: 85%;
    min-width: 0;
    border-right: 0;
  }
  
	.tw-arrange{
	  left: 8px !important;
	  top: 105px !important;
	  transition: none !important;
	}
	/*#timewebLayout.with-side #timewebMain {
		width: 100%;
	}*/
	.toolbar{
		width: max(40vw, 300px) !important;
	}
	.toolbar .webdropbar {
		width: 50px !important;
	}
	.toolbar .inputkeyword_or_code::placeholder {
		font-size: 11px !important;
		transform: translateY(-3px) !important;
	}
	
}

#sideFrame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s ease;
}

#sideFrame.is-ready {
	visibility: visible;
	opacity: 1;
}
.node .node-box {
  rx: 8;
  ry: 8;
  width: 80px;
  height: 80px;
  fill: #1c2433;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.2;
}

.node text {
	fill: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	pointer-events: none;
}

.node:hover .node-box {
  stroke: rgba(255, 255, 255, 0.45);
}

.node.base .node-box {
  stroke: rgba(120, 255, 160, 0.95);
  stroke-width: 2;
}

.node.path-intermediate .node-box {
  stroke: rgba(255, 140, 0, 0.85);
  stroke-width: 2;
}

.node.selected .node-box {
  stroke: rgba(120, 180, 255, 0.95);
  stroke-width: 2;
}

/* === 선택 노드 이웃 — 지속 하이라이트 + 일시 glow 애니메이션 === */

/* persistent: stays as long as the node is a selected-neighbor */
.node.selected-neighbor .node-box {
  filter: drop-shadow(0 0 5px rgba(255, 180, 60, 0.3));
}

/* temporary replay animation (class is removed after animation ends) */
@keyframes twNeighborGlowBlink {
  0%   { filter: drop-shadow(0 0 0px  rgba(255, 180, 60, 0)); }
  25%  { filter: drop-shadow(0 0 10px rgba(255, 180, 60, 0.95))
                 drop-shadow(0 0 18px rgba(255, 180, 60, 0.55)); }
  50%  { filter: drop-shadow(0 0 0px  rgba(255, 180, 60, 0)); }
  75%  { filter: drop-shadow(0 0 10px rgba(255, 180, 60, 0.95))
                 drop-shadow(0 0 18px rgba(255, 180, 60, 0.55)); }
  100% { filter: drop-shadow(0 0 5px  rgba(255, 180, 60, 0.3)); }
}

.node.selected-neighbor-replay .node-box {
  animation: twNeighborGlowBlink 0.9s ease-in-out 1 forwards;
}

/* === 카테고리 hover — 해당 노드 지속 하이라이트 === */
/* LOD 0: box glow */
.node.cat-hover-lit .node-box {
  filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.75))
          drop-shadow(0 0 14px rgba(255, 200, 100, 0.35));
}
/* LOD 1/2: star dot glow is applied via inline filter from makeStarGlowFilter (cathover state) */


/* === 노드 버튼 공통: 텍스트 선택 불가 (scoped) === */
#wrap svg .node-expand-btn,
#wrap svg .node-expand-btn * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

/* === 노드 확장 버튼 (+ top-right) === */
.node-expand-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
.node-expand-icon {
  fill: rgba(180, 200, 255, 0.6) !important;
  font-size: 24px !important;
  text-anchor: middle;       /* 가로 중앙 */
  dominant-baseline: middle; /* 세로 중앙 */
  pointer-events: none;
  transition: fill 0.12s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

.node .node-box-alert {
	fill: none;
	stroke: transparent;
	stroke-width: 3;
	pointer-events: none;
}

.node.inside-foreign-hull .node-box-alert {
	stroke: #ff4d4f;
	stroke-width: 3;
	stroke-dasharray: 8 6;     /* 더 촘촘하게 */
	stroke-linecap: butt;      /* round 빼기 */
	stroke-linejoin: round;    /* 코너만 부드럽게 */
}

/* hover 시 +만 색 변경 */
.node-expand-hit:hover + .node-expand-icon,
.node-expand-icon:hover {
  fill: #000 !important;  /* 검은색 */
}

/* === 우측 hover 액션 버튼 그룹 === */
.node-hover-actions {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: opacity 0.14s ease, transform 0.14s ease;
  user-select: none;
  -webkit-user-select: none;
}
.node-hover-actions.is-visible {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}
.nha-btn {
  cursor: pointer;
}
.nha-circle {
  fill: #1c2433;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.2;
  transition: fill 0.12s, stroke 0.12s;
}
.nha-btn:hover .nha-circle {
  fill: #2d3f5a;
  stroke: rgba(255, 255, 255, 0.6);
}
.nha-icon {
  fill: rgba(180, 200, 255, 0.6) !important;
  font-size: 13px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* SVG 아이콘(예: nha-btn-go)도 텍스트 아이콘과 동일 색을 쓰도록 stroke를 맞춰 적용한다.
   원형은 fill 없음(아이콘 외형만 stroke). */
.node-hover-actions .nha-icon-svg circle,
.node-hover-actions .nha-icon-svg line {
  stroke: rgba(180, 200, 255, 0.6);
}
.node-hover-actions .nha-icon-svg circle {
  fill: none;
}
/* + button home-mode sparkle */
@keyframes sparkle-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(255,200,60,0)); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 5px rgba(255,200,60,0.95)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(255,200,60,0)); }
}
.node-expand-btn.is-sparkling {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkle-pulse 0.55s ease-in-out;
}

/* === iframe 로딩 스피너 === */
.side-spinner {
	display: none;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10;
	align-items: center;
	justify-content: center;
	background: rgba(24, 24, 28, 0.55);
	pointer-events: none;
}
.side-spinner.is-visible {
	display: flex;
}
.side-spinner-ring {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: rgb(128, 128, 128);
	border-radius: 50%;
	animation: side-spin 0.75s linear infinite;
}
@keyframes side-spin {
	to { transform: rotate(360deg); }
}


#graphWrap {
	width: 100%;
	height: 100%;
	position: relative;
}

.sideHeader {
	height: 48px;
	padding: 0 12px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
}

#sideTitle {
	font-size: 14px;
	font-weight: 600;
}

#btnCloseSide {
	border: 1px solid #ccc;
	background: #fff;
	padding: 4px 8px;
	cursor: pointer;
}

#sideEmpty {
	padding: 16px;
	color: #666;
	font-size: 14px;
}





/* 링크(선) */
.edge {
	stroke: rgba(180, 200, 255, 0.25);
	stroke-width: 1.4;
}

/* 간단 툴팁 */
.tip {
	position: fixed;
	z-index: 10;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(30, 40, 60, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	display: none;
	pointer-events: none;
	max-width: 260px;
	white-space: normal;
	line-height: 1.5;
	text-align: center;
	overflow: hidden;
}
/* Node-button tooltips (showTipRight): 1.3× size */
.tip.tip--btn {
	font-size: 15.6px;      /* 12px × 1.3 */
	padding: 10px 13px;     /* 8px × 1.3 / 10px × 1.3 */
	max-width: 338px;       /* 260px × 1.3 */
}
.tip-years {
	display: block;
	background: #000;
	color: rgba(180,180,200,0.85);
	font-size: 11px;
	padding: 6px 10px;
	border-radius: 0;
	margin: -8px -10px 8px;
	text-align: center;
}
.tip-groups {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 4px;
}
.tip-gitem {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tip-gyears {
	font-weight: 400;
	color: rgba(200,200,220,0.7);
	font-size: 11px;
}
.tip-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}
.tip-pill {
	padding: 1px 6px;
	border-radius: 10px;
	background: rgba(255,255,255,0.1);
	color: rgba(220,220,240,0.85);
	font-size: 10px;
	white-space: nowrap;
}

/* ===== Time Galaxy (LOD3 글로벌 오버뷰) =====
   timeweb-galaxy.js 가 root.append("g.time-galaxy-layer") 로 생성한 레이어 안에
   <circle class="galaxy-node"> 만 렌더한다. 라벨/엣지 없음. */
.time-galaxy-layer { pointer-events: none; }

/* 일반 LOD3 별(.node .node-dot-star) 와 동일한 fill/glow 로 맞춰서
   갤럭시 모드 ↔ LOD2 hydrate 후 transition 에 시각 차이가 없도록 한다.
   LOD3 별의 인라인 글로우(makeStarGlowFilter) "default" preset 을
   r=8 버킷 기준으로 정적 근사: drop-shadow 0.7r / 2.0r, alpha 0.90 / 0.48. */
.galaxy-node {
	fill: rgba(160, 190, 255, 0.7);
	stroke: none;
	filter: drop-shadow(0 0 6px  rgba(160, 190, 255, 0.90))
	        drop-shadow(0 0 16px rgba(160, 190, 255, 0.48));
}

/* base 노드: 일반 LOD2 .node.base 와 동일한 초록 톤 + 더 강한 글로우. */
.galaxy-node.galaxy-base-node {
	fill: rgba(120, 255, 160, 0.95);
	stroke: rgba(120, 255, 160, 1);
	stroke-width: 0.6;
	filter: drop-shadow(0 0 8px  rgba(120, 255, 160, 0.95))
	        drop-shadow(0 0 22px rgba(120, 255, 160, 0.55));
}

/* base 노드 타이틀 라벨 — 점 바로 아래. flag 와 동일한 scale 보정 패턴이라
   font-size 는 g 의 transform scale 로 맞추고 여기서는 색/획만 정의. */
.galaxy-base-label { pointer-events: none; }
.galaxy-base-label text {
	fill: rgba(220, 255, 235, 0.98);
	font-weight: 700;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.78);
	stroke-width: 3px;
	font-size: 16px;
}

/* 갤럭시 모드 활성 동안엔 viewportG 의 일반 레이어들을 숨겨 점만 남긴다.
   CSS-only 가드라서 enterGalaxyMode 직후 render() 가 곧장 그려도 화면엔 보이지 않는다. */
.viewport.is-galaxy-active > g:not(.time-galaxy-layer) {
	display: none;
}

/* 카테고리 깃발(LOD3 전용 텍스트 라벨) — 배경/보더 없이 텍스트만, paint-order stroke 로 가독.
   visibleDepth 한 단계만 그리므로 depth 끼리 동시 출현 없음. */
.galaxy-category-flag {
	pointer-events: none;
}

.galaxy-category-flag text {
	fill: rgba(245, 250, 255, 0.95);
	font-weight: 700;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.75);
	stroke-width: 3px;
}

.galaxy-category-flag.depth-1 text { font-size: 22px; }
.galaxy-category-flag.depth-2 text { font-size: 16px; }
.galaxy-category-flag.depth-3 text { font-size: 12px; }

.galaxy-category-flag.depth-uncat text {
	font-size: 18px;
	fill: rgba(220, 230, 250, 0.85);
}

/* ===== 메인 상단 베이스노드 선택창 ===== */
.toolbar{
  position: fixed;
  top: 40px;
  /* Center on graph-area center (viewport − rail), not full viewport center.
     Graph area starts at var(--tw-rail-w); its center = 50vw + rail/2 */
  left: calc(50% + var(--tw-rail-w) / 2);
  transform: translateX(-50%);
  z-index: 3;

  /* Responsive: 25% of viewport, never narrower than 320px. */
  width: max(25vw, 410px);

  padding: 10px 6px;
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  overflow: visible;
}
.toolbar-main-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  height:40px;
  padding: 0 8px;
}

.toolbar-label{
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  margin:5px 0;
}

.toolbar .webdropbar {
	height: 28px;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #0f1420;
	color: #fff;
	padding: 0 8px;
}

.inputkeyword_or_code {
    width: 100%;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #000;
    padding: 0 5px;
    outline: none;
    vertical-align: middle;
}

.inputkeyword_or_code::placeholder {
    color: #999;
    font-size: 15px;
    opacity: 1;
    transform: translateY(-1px);
}
/* 공통 박스 */
.cat-filter,
.tw-ctrl,
.tw-edit,
.compare-block{
  position: fixed;
  width: var(--left-panel-w);
  box-sizing: border-box;
  overflow: hidden;

  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  color: #fff;

  isolation: isolate;
}

/* 위쪽 강조 */
.cat-filter::before,
.tw-ctrl::before,
.tw-edit::before,
.compare-block::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;

  border: 1px solid var(--panel-accent);

  /* 위쪽만 남김 */
  -webkit-mask: linear-gradient(to bottom,
    black 0px,
    black 12px,
    transparent 12px
  );
  mask: linear-gradient(to bottom,
    black 0px,
    black 12px,
    transparent 12px
  );
}

/* 아래쪽 강조 */
.cat-filter::after,
.tw-ctrl::after,
.tw-edit::after,
.compare-block::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;

  border: 1px solid var(--panel-accent);

  /* 아래쪽만 남김 */
  -webkit-mask: linear-gradient(to top,
    black 0px,
    black 12px,
    transparent 12px
  );
  mask: linear-gradient(to top,
    black 0px,
    black 12px,
    transparent 12px
  );
}
/* 내부 패딩 통일 */
.cat-filter-head,
.cat-filter-body,
.tw-ctrl,
.tw-edit{
  position: relative;
  z-index: 1;
}

/* 컨트롤/수정 박스 내부 패딩 */
.tw-ctrl,
.tw-edit{
  padding: 14px;
}
.cat-filter-head,
.cat-filter-body{
  background: transparent;
  position: relative;
  z-index: 3;
}

/* 카테고리 박스 헤더/바디도 톤 맞춤 */
.cat-filter-head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cat-filter-body{
  padding: 10px 14px 14px;
}

.cat-filter-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}

.cat-filter-body::-webkit-scrollbar{
  width: 5px;
}

.cat-filter-body::-webkit-scrollbar-track{
  background: transparent;
}

.cat-filter-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}

.cat-filter-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.20);
}

/* ===== cat-filter 탭/경로 패널 ===== */
.cat-filter{
  display: flex;
  flex-direction: column;
}

/* 탭 버튼 행 — 항상 열림 모드에서는 숨김 */
.cat-filter-tabs{
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cat-tab-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.38);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
  font-family: inherit;
}
.cat-tab-icon{
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.5;
  flex: 0 0 auto;
  transition: opacity 0.14s;
}
.cat-tab-btn.is-active .cat-tab-icon{
  opacity: 1;
}
.cat-tab-btn:hover:not(.is-active) .cat-tab-icon{
  opacity: 0.75;
}
.cat-tab-btn.is-active{
  color: #fff;
  border-bottom-color: var(--panel-accent);
}
.cat-tab-btn:hover:not(.is-active){
  color: rgba(255,255,255,0.65);
}

/* Panel wrappers — one visible at a time via .is-path / .is-topic on wrapper */
.path-panel,
.category-panel{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: none;
  flex-direction: column;
}

/* path tab active */
.cat-filter.is-path .path-panel{
  display: flex;
}
.cat-filter.is-path .category-panel{
  display: none;
}

/* topic tab active */
.cat-filter.is-topic .path-panel{
  display: none;
}
.cat-filter.is-topic .category-panel{
  display: flex;
}

/* 비교 버튼 블록 — catFilter 아래 고정 위치 */
.compare-block{
  display: none !important;
}
.compare-btn,
.view-timeline-btn{
  flex: 1 1 0;
  height: 50px;
  border-radius: 10px;
  color: rgba(255,255,255,0.95);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.compare-btn{
  background: rgba(80,140,255,0.22);
  border: 1px solid rgba(120,170,255,0.35);
}
.compare-btn:hover:not(:disabled){
  background: rgba(80,140,255,0.34);
}
.compare-btn:disabled{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.28);
  pointer-events: none;
  cursor: default;
}
.view-timeline-btn{
  background: rgba(60,185,140,0.22);
  border: 1px solid rgba(80,210,160,0.35);
}
.view-timeline-btn:hover{
  background: rgba(60,185,140,0.34);
}
@media (max-width: 900px){
  .compare-block{
    top: calc(76px + calc(100vh - 250px) + 4px);
    width: 220px;
  }
}

/* Subhead row (전체선택 버튼) */
.cat-filter-subhead{
  flex-shrink: 0;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: flex-end;
}

/* Path panel body — outer flex container, no scroll itself */
.path-panel-body{
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Top section: existing path — shrinks to content, caps at 50%, then scrolls */
.tw-path-top{
  flex: 0 0 auto;
  max-height: 50%;
  overflow-y: auto;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.tw-path-top::-webkit-scrollbar{ width: 5px; }
.tw-path-top::-webkit-scrollbar-track{ background: transparent; }
.tw-path-top::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* Bottom section: neighbor list — takes remaining space */
.tw-path-neighbors{
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,0.07);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.tw-path-neighbors::-webkit-scrollbar{ width: 5px; }
.tw-path-neighbors::-webkit-scrollbar-track{ background: transparent; }
.tw-path-neighbors::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* Neighbor section label */
.nb-section-label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin: 8px 0 15px;
}
.nb-section-label:first-child{ margin-top: 2px; }

/* Neighbor item */
.nb-item{
  margin-bottom: 6px;
}

/* Line 1: direction icon + reason */
.nb-item-line1{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.nb-dir-icon{
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255,255,255,0.32); /* default: dim white */
  line-height: 1;
}
.nb-reason{
  flex: 0 1 auto;
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,255,0.26);
  word-break: break-word;
}

/* Neighbor item semantic states — reuse same color tokens as graph highlights */
/* path: same as .path-arrow / .path-reason */
.nb-item--path .nb-dir-icon  { color: rgba(255,155,40,0.75); }
.nb-item--path .nb-reason    { color: rgba(255,195,80,0.65); }
/* selected-neighbor: same as g.edge-label.adj = rgba(100,160,255,0.9) */
.nb-item--sel-nb .nb-dir-icon { color: rgba(100,160,255,0.85); }
.nb-item--sel-nb .nb-reason   { color: rgba(100,160,255,0.55); }
/* base-neighbor: same as g.edge-label.lbl-out = rgba(120,255,160,0.8) */
.nb-item--base-nb .nb-dir-icon { color: rgba(120,255,160,0.80); }
.nb-item--base-nb .nb-reason   { color: rgba(120,255,160,0.50); }

/* Line 1: edge direction chips row (bi → two chips) */
.nb-chips-row{
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Single edge direction chip */
.nb-edge-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  line-height: 1;
  border-radius: 20px;
  /* 14.4px at 2560px baseline → proportional clamp */
  font-size: clamp(10px, 0.5625vw, 14.4px);
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Line 2: plain title + rival button */
.nb-item-line2{
  display: flex;
  align-items: center;
  gap: 6px;
}
.nb-node-title{
  flex: 1 1 auto;
  /* 23px at 2560px baseline → proportional clamp, −25% */
  font-size: clamp(16px, 0.8vw, 20px);
  color: #fff;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.35;
  margin-bottom: 8px;
}
.path-panel-empty{
  color: rgba(255,255,255,0.28);
  font-size: 12px;
  text-align: center;
  margin-top: 22px;
}

/* Node pill — black bg / white text / original border colors (fully opaque) */
.path-node-pill{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  background: #000;
  border: 2px solid rgba(204,204,204,1);
  color: #fff;
  /* 23px at 2560px baseline → proportional clamp */
  font-size: clamp(15px, 0.898vw, 23px);
  font-weight: 500;
  line-height: 1.35;
}
.path-node-title{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.path-node-pill .path-rival-btn{
  flex: 0 0 auto;
  margin-left: 8px;
}
.path-node-pill.is-selected {
  background: #000;
  border-color: rgba(96,144,204,1);
  color: #fff;
}
.path-node-pill.is-path {
  background: #000;
  border-color: rgba(204,112,0,1);
  color: #fff;
}
.path-node-pill.is-base,
.path-node-pill.is-base.is-path {
  background: #000 !important;
  border-color: rgba(96,204,128,1) !important;
  color: #fff !important;
}
.path-node-pill.is-base.has-base-label {
  border-top-left-radius: 0;
}

/* Base node label tag */
.path-node-slot {
  display: block;
}
.path-node-base-label {
  display: inline-block;
  width: 25%;
  min-width: 56px;
  background: rgba(96,204,128,1);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: bottom;
}

/* Path panel pill row (pill + compare button) */
.path-node-row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.path-node-row .path-node-pill{
  flex: 1 1 auto;
}
.path-rival-btn{
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  color: rgba(200,215,240,0.70);
  font-size: 13px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.path-rival-btn:hover{
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.95);
}

/* Connector between pills */
.path-connector{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  margin: 5px 0;
  gap: 3px;
}
.path-edge-row{
  cursor: pointer;
}
.path-edge-row:hover .path-reason{
  color: rgba(255,215,120,0.95);
}
.path-connector--down{
  justify-content: flex-start;
}
.path-connector--down .path-arrow{
  margin-left: 20px;
}
.path-connector--down .path-reason{
  text-align: left;
}
.path-connector--up{
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.path-connector--up .path-arrow{
  margin-right: 50px;
}
.path-connector--up .path-reason{
  text-align: right;
}
.path-arrow{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px at 2560px baseline → proportional clamp */
  width: clamp(28px, 1.7188vw, 44px);
  height: clamp(28px, 1.7188vw, 44px);
}
.path-arrow svg{
  display: block;
}
.path-reason{
  flex: 0 1 auto;
  color: rgba(255,195,80,0.65);
  /* 17px at 2560px baseline → proportional clamp */
  font-size: clamp(11px, 0.664vw, 17px);
  font-style: normal;
  font-weight: 500;
  word-break: break-word;
  max-width: 200px;
  position: relative;
  top: -2px;
}

/* ===== 오른쪽 아래 컨트롤/수정툴 ===== */
.tw-ctrl{
  position: fixed;
  right: var(--tw-right-panel-right);
  top: calc(var(--left-top) + var(--left-cat-h) + 12px);
  width: var(--left-panel-w);
  height: var(--left-ctrl-h);
  z-index: 30;

  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.tw-edit{
  position: fixed;
  right: var(--tw-right-panel-right);
  top: calc(var(--left-top) + var(--left-cat-h) + 12px + var(--left-ctrl-h) + 12px);
  width: var(--left-panel-w);
  height: var(--left-edit-h);
  z-index: 30;

  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tw-panel-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.95);
  flex: 0 0 auto;
}

.tw-row1{
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  height: 100%;
  margin-bottom: 0;
}
.tw-legs{
	color: rgb(115,172,244);
}
.tw-branches{
	color: rgb(0,170,75);
}

.tw-field{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2px 10px;
}
.tw-field img{
	width: 24px;
	height: 24px;
}
.tw-field span {
	font-size: clamp(11px, 1.5vh, 16px);
	font-weight: 500;
	white-space: nowrap;
}
.tw-field .textwithimg{
	display:flex;
	align-items: center;
	gap: 5px;
}

.tw-field input {
	width: 90%;
  	height: clamp(22px, 3vh, 28px);
  	font-size: clamp(11px, 1.5vh, 16px);
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	padding: 0 8px;
	outline: none;
}

.tw-field input:focus {
	border-color: rgba(255, 255, 255, 0.35);
}

.tw-edit .tw-tools{
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  height: calc(100% - 22px);
  margin-top: 0;
  align-items: stretch;
  flex: 1 1 auto;
}

.tw-edit .icon-btn{
  width: 100%;
  height: 100%;
  min-width: 0;
}

.tw-edit .link-btn{
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 6px;
  margin-top: 0;
  font-size: 16px;
}

/* ===== 낮은 해상도 대응 ===== */
@media (max-height: 768px){

  .tw-panel-title{
    font-size: 11px;
  }
  
  .tw-field span{
    font-size: 11px;
  }

  .tw-field input{
    font-size: 11px;
  }
  
  .tw-edit .link-btn{
    font-size: 11px;
  }
}
/* Home mode: hide timebar entirely */
body.is-home-mode #timebar { display: none !important; }

/* ===== 가운데 아래 타임바 ===== */
#timebar{
  position: fixed;
  /* Same graph-area centering as .toolbar */
  left: calc(50% + var(--tw-rail-w) / 2);
  bottom: 35px;
  transform: translateX(-50%);
  z-index: 35;
  color: #fff;
  /* Proportional to graph area, calibrated to 2560px baseline (760 / (2560−99) ≈ 30.9%).
     × 1.2 scale-up: 300→360px min, 0.309→0.3708 ratio, 760→912px max. */
  width: clamp(500px, calc((100vw - var(--tw-rail-w)) * 0.5), 912px);
  padding: 10px 14px;
}
#timebar .tw-timebar-toggle,
#timebar .tw-label,
#timebar .tw-tooltip,
#timebar .tw-btn{
  color: #fff;
}
#timebar .tw-timebar{
  flex: 1 1 auto;
}

#timebar .tw-label{
  min-width: 64px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

/* ===== 오른쪽 카테고리 ===== */
.cat-filter{
  position: fixed;
  right: 0;
  top: 0;
  width: var(--left-panel-w);
  height: 100vh;
  max-height: none;
  z-index: 25;
}

.cat-filter-body{
  max-height: none;
  flex: 1 1 auto;
}


/* ===== 자동완성 박스 ===== */
.acBox {
	position: absolute; /* ★ toolbar 기준으로 뜸 */
	left: 50%;
	right: auto;
  	top: calc(100% + 8px);
  	width: min(520px, calc(100vw - 40px));
	max-height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	display: none;
	z-index: 10;
	background: rgba(20, 24, 34, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  	transform: translateX(-50%);
	-webkit-overflow-scrolling: touch;
}

/* ===== 모바일/좁은 폭 ===== */
@media (max-width: 1200px){
  /* toolbar and timebar widths handled by base clamp rules — no overrides needed */
}

@media (max-width: 900px){
  .cat-filter{
    width: 240px;
    height: calc(100vh - 210px);
  }

  .tw-ctrl{
    width: 240px;
  }

  /* timebar width handled by base clamp rule */
}

/* ===== 메뉴 레일 768px 이하: 2/3 크기 ===== */
@media (max-width: 768px) {
  :root {
    /* Rail collapses to 2/3: 99px → 66px.
       This automatically adjusts #timewebSide left, toolbar/timebar center
       via var(--tw-rail-w) references throughout the stylesheet. */
    --tw-rail-w: 66px;
  }
  .tw-rail-btn {
    min-height: 52px !important;   /* 78px × 2/3 */
    padding: 8px 4px 6px !important;
    gap: 4px !important;
  }
  .tw-rail-icon svg {
    width: 18px !important;        /* 27px × 2/3 */
    height: 18px !important;
  }
  .tw-rail-label {
    font-size: 10px !important;    /* 15px × 2/3 */
  }
  .tw-rail-divider {
    width: 40px !important;        /* 60px × 2/3 */
  }

  .tw-ctrl{
    width: 220px;
  }

  #timebar{
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
  }
}
.icon-btn {
  	height: clamp(22px, 3vh, 28px);
  	width: clamp(24px, 3vw, 34px);
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: #1c2433;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.link-btn {
	margin-top: 6px;
  	height: clamp(22px, 3vh, 28px);
  	font-size: clamp(12px, 1.6vh, 18px);
	width: 100%;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .15);
	background:	rgb(115,172,244);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-weight: 500;
}
.link-btn img{
	width: 24px;
	height: 24px;
}
.link-btn:hover{
	background: #1c2433;
	color: #fff;
}
.link-btn:hover img {
  filter: invert(1);
}

#btnLinkMode.on {
	border-color: rgba(255, 210, 120, 0.9);
	box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.18) inset;
}
/* 컨트롤바 */
.tw-ctrl {
	position: fixed;
	left: 12px;
	bottom: 12px;
	transform: none;
	width: 280px;
	z-index: 9999;
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 12px;
}

.tw-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tw-row1 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 0;
}

.tw-arrange{
  position: absolute;

  left: 8px;
  top: var(--left-top);

  display: flex;
  flex-direction: column;   /* 세로 버튼 */
  gap: 8px;

  z-index: 40;
  transition: left 0.2s ease;
}

.btn-arr{
  display: border-box;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: #2b3446;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.btn-arr:hover{
  background: #1f2633;
}

.btn-arr.active{
  background: #1a3a5c;
  border-color: rgba(100,160,255,.45);
  color: #8ac4ff;
}

.btn-arrange::before{
  content: "↔";
}

.btn-group::before{
  content: "◎";
}

.btn-round::before{
  content: "◌";
}


/* 래퍼 정렬 */
.tw-timebar-wrap {
	width: 100%;
	display:flex;
	flex-direction: column;
	align-items:center;
}

/* 체크 토글 */
.tw-timebar-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	user-select: none;
}

.tw-timebar-toggle input {
	transform: translateY(1px);
}

/* 전체 바(버튼+바+라벨) */
.tw-timebar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 22px; /* 기존 높이 */
	user-select: none;
	touch-action: none;
	outline: none;
}

/* 버튼 */
.tw-btn {
	height: 22px;
	line-height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	cursor: pointer;
}

/* 라벨 */
.tw-label {
	font-size: 12px;
	white-space: nowrap;
	opacity: 0.9;
}

/* 바 영역(트랙/필/썸) */
.tw-bar {
	position: relative;
	flex: 1 1 auto;
	height: 22px;
	border-radius: 999px;
	cursor: pointer;
}

/* range는 숨기고 값/키보드만 쓸 수도 */
.tw-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none; /* 우리가 직접 드래그 처리할 거라서 */
}

/* 네 기존 디자인 그대로 */
.tw-track {
	position: absolute;
	inset: 7px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}

.tw-fill {
	position: absolute;
	left: 6px;
	top: 7px;
	bottom: 7px;
	width: 0%;
	border-radius: 999px;
	background: rgba(0, 180, 0, 0.85);
}

.tw-thumb {
	position: absolute;
	top: 50%;
	left: 6px;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.tw-tooltip {
	position: absolute;
	/* Moved up slightly to accommodate 1.5× font (18px → 27px) */
	top: -40px;
	transform: translateX(-50%);
	padding: 3px 6px;
	color: #fff;
	/* 1.5× the original 18px */
	font-size: 27px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity 120ms ease;
}

/* data-tip 글로벌 툴팁: 모달(z-index:10000) 위에 떠야 하고, 큰 timebar 툴팁 스타일을 그대로 쓰면
   안 되므로 #twTooltip 한정으로 별도 박스 스타일을 부여한다. JS는 clientX/Y로 좌표를 찍으므로
   position:fixed 로 두어야 위치가 정확하다. */
#twTooltip.tw-tooltip {
	position: fixed;
	top: auto;
	left: auto;
	transform: none;
	z-index: 99999;
	max-width: 260px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(24, 28, 36, 0.96);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
	pointer-events: none;
	white-space: pre-line; /* setImportanceTooltip 텍스트의 \n 줄바꿈을 보여주기 위함 */
}

.tw-main-seg {
	position: absolute;
	top: 7px;
	bottom: 7px;
	border-radius: 999px;
	background: rgba(255, 200, 0, 0.28);
	pointer-events: none;
}



/* 비활성화(체크 끄면) */
#timebar .tw-timebar.is-disabled {
	opacity: 0.45;
}

.tw-timebar.is-disabled .tw-bar {
	cursor: default;
}
.tw-timebar.is-disabled .tw-tooltip {
	display: none;
}


/* 사망/물음표 마크 */
g.node text.death-mark {
	font-weight: 800;
	font-size: 48px;
	paint-order: stroke; /* 글자 외곽선(선택) */
	stroke: rgba(0, 0, 0, 0.35);
	stroke-width: 2px;
}

g.node text.death-mark.is-dead {
	fill: #e30000;
} /* 빨강 */
g.node text.death-mark.is-unk {
	fill: #10a010;
} /* 초록 */

/* 작은 화면에서는 폭만 줄여주기 */
@media ( max-width : 540px) {
	.tw-ctrl {
		width: min(500px, calc(100vw - 20px));
	}
}

.edge-hit {
	stroke: #fff; /* transparent 금지 */
	stroke-opacity: 0.001; /* 거의 안 보이게 */
	stroke-width: 14; /* 클릭 폭 */
	pointer-events: stroke; /* ★ 이게 핵심 */
	cursor: pointer;
}

.edge-tip-hit {
	fill: transparent;
	pointer-events: all;
	cursor: pointer;
}

.edge {
	stroke: rgba(180, 200, 255, 0.25);
	stroke-width: 1.4;
	/* 클릭은 .edge-hit / .edge-tip-hit / g.edge-label 가 받는다.
	   시각용 라인 자체는 hit-test에서 빠진다. */
	pointer-events: none;
}

.edge.selected {
	stroke: rgba(255, 210, 120, 0.75);
	stroke-width: 2.2;
}

.edge.path {
	stroke: rgba(255, 165, 0, 0.75);
	stroke-width: 2.2;
}

.edge-label {
	font-size: 11px;
	pointer-events: none;
	text-anchor: middle;
	dominant-baseline: middle;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.edge-label.path {
	fill: rgba(255, 165, 0, 0.9) !important;
	font-weight: 600;
}

.edge-label.lbl-both {
	fill: rgba(100, 160, 255, 0.9)
} /* 파랑 */
.edge-label.lbl-out {
	fill: rgba(120, 255, 160, 0.8);
} /* 초록(기존) */
.edge-label.lbl-in {
	fill: rgba(255, 255, 255, 0.85);
} /* 흰색 */
.edge-label.lbl-none {
	fill: rgba(220, 220, 220, 0.65);
} /* 회색 */
.edge-label.selected {
	fill: orange !important;
	font-weight: 600;
}

.lmItem.is-selected {
	background: rgba(19, 115, 183, 0.18);
	outline: 1px solid rgba(19, 115, 183, 0.55);
}

.lmItem.is-selected:hover {
	background: rgba(19, 115, 183, 0.24);
}
/* 기본은 그대로 두고 */
line.edge.adj {
	stroke: rgba(100, 160, 255, 0.9);
	stroke-width: 2px;
}

text.edge-label.adj {
	fill: rgba(100, 160, 255, 0.9);
	font-weight: 700;
}

/* selectedEdgeKey가 최우선이면 */
line.edge.selected {
	stroke-width: 2px;
}

text.edge-label.selected {
	font-weight: 600;
}
/* path가 더 우선이면(원하면) */
line.edge.path {
	stroke-width: 2px;
}

text.edge-label.path {
	font-weight: 600;
}
/* 둘 다 붙을 때 확실히 */
line.edge.adj.path {
	stroke: orange;
}

text.edge-label.adj.path {
	fill: orange;
}

g.edge-label {
	color: #BBB; /* 기본 pill 색 */
}
g.edge-label text {
	fill: currentColor;
}

/* pill 배경 — 클릭 hit 영역으로 사용 */
g.edge-label path.edge-label-bg {
	fill: currentColor;
	fill-opacity: 0.18;
	stroke: none;
	pointer-events: all;
}

/* 방향 쐐기 (>> / <<) — 클릭 hit 영역에 포함 */
g.edge-label path.edge-label-dir {
	fill: currentColor;
	fill-opacity: 0.55;
	stroke: none;
	pointer-events: all;
}

/* 라벨 텍스트 — 배경이 클릭을 받게 텍스트는 hit 대상에서 제외 */
g.edge-label text.edge-label-text {
	fill: currentColor;
	pointer-events: none;
}

g.edge-label.path {
	color: orange;
}

g.edge-label.adj {
	color: rgba(100, 160, 255, 0.9);
}

g.edge-label.selected {
	color: orange;
}

g.edge-label.adj.path {
	color: orange;
}

g.edge-label.lbl-out {
	color: rgba(120, 255, 160, 0.8);
} /* 초록(기존) */

/* ===== 카테고리 필터 ===== */
.cat-filter {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 25;
	width: var(--left-panel-w);
	height: 100vh;
	max-height: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
}

.cat-filter::before,
.cat-filter::after {
	display: none;
}

.cat-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cat-filter-title {
	font-weight: 700;
	font-size: 13px;
}

.cat-filter-btn {
	height: 28px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: #1c2433;
	color: #fff;
	cursor: pointer;
}

.cat-filter-body {
	overflow: auto;
	padding: 8px 10px 10px;
	max-height: calc(100vh - 80px);
}

.cat-filter-empty {
	opacity: .65;
	padding: 8px 4px;
}

/* catFilter collapse / expand slide */
#catFilter {
  transition: transform 0.3s ease;
}
#catFilter.is-collapsed {
  transform: translateX(100%);
}
#catFilterHandle {
  position: fixed;
  right: var(--left-panel-w);
  top: 50vh;
  transform: translateY(-50%);
  z-index: 26;
  width: 12px;
  height: 100px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px 0 0 12px;
  border: none;
  color: #bbb;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: right 0.3s ease;
}
#catFilterHandle.is-collapsed {
  right: 0;
}

.cat-schema {
	padding: 8px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cat-schema:last-child {
	border-bottom: none;
}

.cat-schema-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cat-schema-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.cat-schema-name {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cat-schema-count {
	opacity: .6;
	font-size: 11px;
}

.cat-children {
	margin-top: 6px;
	padding-left: 18px;
}

/* d2 (중분류) 그룹 */
.cat-d2 {
	margin-top: 4px;
}

.cat-d2-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 0;
}

.cat-d2-title {
	display: flex;
	align-items: center;
	min-width: 0;
}

.cat-d2-name {
	font-size: 13px;
	font-weight: 600;
	opacity: .75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cat-d2-children {
	padding-left: 12px;
}

.cat-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
}

.cat-child-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.cat-child-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.3em;
	line-height: 1.4;
}

.cat-child-count {
	opacity: .55;
	font-size: 11px;
}

.cat-check {
	width: 14px;
	height: 14px;
	accent-color: #7fb3ff;
}

@media ( max-width : 900px) {
	.cat-filter {
		width: min(280px, calc(100vw - 24px));
		top: auto;
		bottom: 12px;
		max-height: 42vh;
	}
	#catFilterHandle {
    right: 280px !important;
    top: auto !important;
    bottom: 21vh !important;
    transform: translateY(-50%) !important;
  }

  #catFilterHandle.is-collapsed {
    right: 0 !important;
  }
}

/* ===== JS-rendered items ===== */
.acItem {
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: transparent;
}

.acItem.is-first {
	border-top: none;
}

.acItem.is-active {
	background: rgba(120, 180, 255, 0.18);
}

.acItem-keyword {
	min-width: 70px;
	font-weight: 600;
}

.acItem-content {
	opacity: .8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tw-list-state {
	padding: 10px;
	opacity: .7;
}

.lmItem {
	padding: 10px 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	cursor: pointer;
}

.lmItem.is-first {
	border-top: none;
}

.lmItem-head {
	font-size: 12px;
	margin-top: 2px;
}

.lmItem-year {
	opacity: .65;
}

.lmItem-title {
	font-weight: 600;
	opacity: .95;
	margin-left: 6px;
}

.lmItem-summary {
	opacity: .70;
	margin-top: 2px;
}

.tw-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
}
/* ===== 링크 모달 공통 ===== */
#linkModal .tw-modal-bg, #linkViewModal .tw-modal-bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

#linkModal .tw-modal-panel, #linkViewModal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow: auto;
	background: rgba(20, 24, 34, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.92);
}

#linkModal .tw-modal-head, #linkViewModal .tw-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#linkModal .tw-modal-title, #linkViewModal .tw-modal-title {
	font-size: 18px;
	font-weight: 700;
}

#linkModal .tw-modal-subtitle, #linkViewModal .tw-modal-subtitle {
	padding: 14px 16px 4px;
	line-height: 1.5;
}

#linkModal .tw-modal-section, #linkViewModal .tw-modal-section {
	padding: 10px 16px;
}

#linkModal .tw-modal-actions, #linkViewModal .tw-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 16px 16px;
}

#linkModal .tw-reason-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 8px;
	align-items: start;
	padding: 0 16px 10px;
}

#linkModal .tw-reason-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 34px;
}

#linkModal .tw-reason-dot {
	line-height: 34px;
	opacity: 0.7;
}

#linkModal .tw-reason-textarea {
	min-height: 84px;
	resize: vertical;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	padding: 10px 12px;
	box-sizing: border-box;
}

#linkModal .tw-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

#linkModal .tw-section-label, #linkViewModal .tw-modal-label {
	font-size: 13px;
	font-weight: 700;
}

#linkModal .tw-field-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

#linkModal .tw-source-select {
	min-width: 120px;
}

#linkModal .tw-search-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
}

#linkModal .tw-search-input {
	flex: 1;
	color: #fff;
}

#linkModal .tw-importance-input {
	width: 84px;
	height: 28px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #0f1420;
	color: #fff;
	padding: 0 8px;
}

#linkModal .tw-list-wrap {
	margin-top: 10px;
}

#linkModal .tw-list-box {
	max-height: 240px;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.tw-link-from-title {
  color: #22c55e;
  font-weight: 700;
}

.tw-link-to-title {
  color: #60a5fa;
  font-weight: 700;
}

#linkModalEdgeTitle2 {
  color: #60a5fa;
  font-weight: 700;
}

#linkViewModal .tw-card-box {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	padding: 14px;
}

#linkViewModal .tw-card-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
}

#linkViewModal .tw-card-content {
	line-height: 1.6;
	white-space: pre-wrap;
}

#linkViewModal .tw-move-wrap {
	margin-top: 12px;
}

#linkViewModal .tw-link-action {
	color: #8fc3ff;
	text-decoration: none;
}

#linkViewModal .tw-link-action:hover {
	text-decoration: underline;
}
/* ===== linkViewModal 컬러 강조 ===== */
#linkViewEdgeTitle {
  color: #22c55e; /* 녹색 */
  font-weight: 700;
}

#linkViewEdgeTitle2 {
  color: #f59e0b; /* 오렌지 */
  font-weight: 700;
}

#lv_reason {
  color: #60a5fa; /* 파랑 */
  font-weight: 700;
}

#groupManageModal .tw-modal-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

#groupManageModal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

#groupManageModal .group-manage-modal {
	width: 820px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	display: flex;
	flex-direction: column;
}

#groupManageModal .tw-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e9e9e9;
}

#groupManageModal .tw-modal-head h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

#groupManageModal .tw-modal-close {
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

#groupManageModal .tw-modal-body {
	padding: 16px 18px;
	overflow: auto;
}

#groupManageModal .tw-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid #e9e9e9;
}

.group-manage-top-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.group-manage-top {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.group-manage-node {
	font-size: 14px;
	color: #333;
}

.group-manage-row {
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fafafa;
	padding: 12px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.group-manage-row.is-primary {
	border-color: #222;
	background: #fffdf2;
	box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08);
}

.group-manage-row:hover {
	border-color: #bbb;
}

.group-manage-row-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	gap: 8px;
}

.group-manage-new-badge {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
	border: 1px solid #9bc2ff;
	background: #eaf3ff;
	color: #2457a6;
	font-weight: 700;
}

.group-manage-primary-badge {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
	border: 1px solid #d8c36a;
	background: #fff4b8;
	color: #6f5600;
	font-weight: 700;
}

.group-manage-row:not(.is-primary) .group-manage-primary-badge {
	opacity: 0.45;
}

.group-manage-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.group-manage-row {
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fafafa;
	padding: 12px;
}

.group-manage-row-top-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.group-manage-delete-btn{
  margin-left:auto;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#ffb3b3;
  font-size:13px;
  cursor:pointer;
  flex:0 0 auto;
}

.group-manage-delete-btn:hover{
  background:rgba(255,80,80,.14);
  border-color:rgba(255,120,120,.35);
  color:#ffd6d6;
}
.group-manage-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 80px 110px 110px;
	gap: 10px;
	align-items: end;
}

.group-manage-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.group-manage-field label {
	font-size: 12px;
	color: #666;
	line-height: 1.2;
}

.group-manage-field input {
	width: 100%;
	height: 34px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	padding: 0 10px;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

/* .gm-group-ac styles consolidated below (second block is canonical) */

.mini-btn {
	height: 30px;
	padding: 0 12px;
	border: 1px solid #cfcfcf;
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
}

.mini-btn.primary {
	background: #222;
	color: #fff;
	border-color: #222;
}

@media ( max-width : 768px) {
	.group-manage-grid {
		grid-template-columns: 1fr 1fr;
	}
}

#newGroupModal .tw-modal-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

#newGroupModal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	width: 360px;
	max-width: calc(100vw - 40px);
}

#newGroupModal .tw-modal-body {
	padding: 14px 16px;
}

.new-group-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

#newGroupColorInput {
	width: 42px;
	height: 32px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 6px;
	cursor: pointer;
}

#newGroupColorText {
	width: 110px;
}

.gm-group-name-field {
  position: relative;
}

.gm-group-ac {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.gm-group-ac.is-open {
  display: block;
}

.gm-group-ac-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.gm-group-ac-item:last-child {
  border-bottom: 0;
}

.gm-group-ac-item:hover,
.gm-group-ac-item.is-active {
  background: #f4f7fb;
}

.gm-group-ac-name {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.gm-group-ac-meta {
  margin-top: 2px;
  font-size: 12px;
  color: #777;
}

.gm-group-ac-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: #888;
}
/* ===== 소형 모달 공통 ===== */
.tw-modal-compact .tw-modal-panel{
  width: auto;
  min-width: 260px;
  max-width: 420px;
  padding: 0;
}

.tw-modal-compact .tw-modal-body{
  padding: 12px 14px;
}

.tw-modal-compact .tw-modal-head{
  padding: 10px 14px;
  font-size: 14px;
}

.tw-modal-compact .tw-modal-head h3{
  font-size: 15px;
  margin: 0;
}

.tw-modal-compact input,
.tw-modal-compact select{
  height: 30px;
  font-size: 13px;
  padding: 0 8px;
}

.tw-modal-compact label{
  font-size: 12px;
  margin-bottom: 2px;
}

.tw-modal-compact .mini-btn{
  height: 28px;
  font-size: 12px;
  padding: 0 10px;
}
.tw-modal-compact .group-manage-field{
  gap: 3px;
}
#newGroupModal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	width: 340px;
	max-width: calc(100vw - 40px);
}

#newGroupModal .tw-modal-body {
	padding: 16px 16px 14px;
}

#newGroupModal h3 {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 700;
	color: #222;
}

#newGroupModal .group-manage-field {
	margin-bottom: 10px;
}

#newGroupModal .group-manage-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: #666;
}

#newGroupModal .group-manage-field input,
#newGroupModal .group-manage-field select {
	width: 100%;
	height: 32px;
	box-sizing: border-box;
	font-size: 13px;
}

#newGroupModal .new-group-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 4px;
}

#newGroupModal .mini-btn {
	min-width: 56px;
	height: 30px;
	padding: 0 12px;
}
#newGroupModal .tw-modal-foot {
	display: flex;
	justify-content: flex-end;

	padding: 16px 18px 18px; /* ← 여기 핵심 */
}
.group-page-modal .tw-modal-foot {
	display: flex;
	justify-content: flex-end;
	padding: 16px 18px 18px;
	gap: 8px;
}
.group-page-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.group-page-modal .tw-modal-dim {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
}
.group-page-modal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#assignGroupPageModal {
	z-index: 20000; /* 기존 10000보다 높게 */
}
#assignGroupPageModal .tw-modal-dim {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 0;
}
#assignGroupPageModal .tw-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;

	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	overflow: hidden;

	width: 340px;
	max-width: calc(100vw - 40px);
}
.node-role {
	fill: rgba(255, 255, 255, 0.72);
	font-size: 11px;
	font-weight: 600;
	pointer-events: none;
}
.node-lifespan {
	fill: rgba(255, 255, 255, 0.55);
	font-size: 10px;
	font-weight: 400;
	pointer-events: none;
}

/* ===== iframe 모드 (body.is-iframe-mode) ===== */

/* 1) 컨트롤/편집 패널 숨기기, 카테고리 패널은 그대로 */
.is-iframe-mode .tw-ctrl,
.is-iframe-mode .tw-edit {
  display: none !important;
}

/* 2-a) 왼쪽 레일 숨기기 */
.is-iframe-mode .tw-left-rail {
  display: none !important;
}

/* 2-b) iframe 모드에서 카테고리 패널 — 오른쪽 고정 그대로 유지 */

/* 2) 정렬 버튼 — iframe 모드: absolute 위치 그대로 유지 */
.is-iframe-mode .tw-arrange {
  top: 12px;
  left: 8px;
}

.is-iframe-mode .btn-arr {
  padding: 5px 10px;
  font-size: 13px;
}

/* 4) 크게보기 플로팅 버튼 */
.btn-iframe-fullview {
  display: none;
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 50;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #2b3446;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.btn-iframe-fullview:hover {
  background: #3a4766;
}

.is-iframe-mode .btn-iframe-fullview {
  display: block;
}

/* ── 홈 모드 오버레이 (SVG world 레이어) ──────────────────────────────────── */
/* SVG g#homeModeOverlayG — pan/zoom에 따라 이동, viewportG 첫 번째 자식 */
.home-mode-overlay {
  pointer-events: none;
  user-select: none;
}
.home-mode-overlay text {
  font-family: inherit;
  line-height: 1.8;
}

/* ===== 왼쪽 레일 메뉴 ===== */
/* twCtrl은 이제 설정 오버레이 안에만 존재 — 기존 fixed 위치 무효화 */
#twCtrl {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
}
#twEdit {
  display: none !important;
}

.tw-left-rail {
  position: relative;
  flex-shrink: 0;
  order: 1;
  margin: 0;
  width: var(--tw-rail-w);
  height: 100%;
  z-index: 40;
  background: var(--panel-bg);
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
}

.tw-rail-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 78px;
  padding: 12px 6px 9px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: color 0.14s, background 0.14s;
}

.tw-rail-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
}

.tw-rail-btn.is-active {
  color: var(--panel-accent);
  background: rgba(109,176,255,0.10);
}

.tw-left-rail .tw-rail-btn.on,
.tw-left-rail .tw-rail-btn[data-action="link"].is-active {
  border-color: rgba(255, 210, 120, 0.9);
  background: rgba(109,176,255,0.40);
  color: var(--panel-accent);
  box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.18) inset;
  color: #fff;
}

/* 좌측 레일 최상단 T 로고 버튼 — 클릭 시 사이트 루트로 이동.
   기존 .tw-rail-icon SVG 자리에 큰 활자(T)를 두고, 다른 레일 버튼보다 25% 낮게(78px → 58.5px). */
.tw-rail-logo-btn {
  min-height: 58.5px;
  padding-top: 9px;
  padding-bottom: 6px;
}
.tw-rail-logo-btn .tw-rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: inherit;
}
.tw-rail-logo-btn:hover .tw-rail-logo {
  color: rgba(255,255,255,0.95);
}

/* ── 연혁 가져오기 팝업 ─────────────────────────────────────────────────── */
.tw-import-popup {
  position: fixed;
  /* left/top set by JS via getBoundingClientRect() on the rail button */
  left: 160px; /* fallback only — JS overrides immediately on open */
  top: 40vh;   /* fallback only — JS overrides immediately on open */
  z-index: 160;
  width: 270px;
  background: rgba(18, 22, 34, 0.97);
  border: 1px solid rgba(120,160,255,0.28);
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.5);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tw-import-popup.is-hidden { display: none !important; }

.tw-import-popup-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(180,200,255,0.75);
  text-transform: uppercase;
}

.tw-import-popup-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.tw-import-popup-body .inputkeyword_or_code {
  width: 100%;
  box-sizing: border-box;
  color: #fff;
}

.tw-import-submit {
  align-self: flex-end;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
}

/* autocomplete box inside popup — override global centering */
.tw-import-ac {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  transform: none !important;
  top: calc(100% + 4px);
  z-index: 10;
  color: #fff;
}

.is-iframe-mode .tw-import-popup { display: none !important; }

.tw-rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tw-rail-icon svg {
  width: 27px;
  height: 27px;
}

/* 레일 아이콘이 PNG <img>일 경우(예: 타임라운지) — SVG와 동일 크기로 정렬. */
.tw-rail-icon img.tw-rail-img {
  width: 80px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.tw-rail-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.tw-rail-divider {
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
  margin: 3px 0;
}

.tw-rail-spacer {
  flex: 1 1 0;
  min-height: 6px;
}



/* ===== 설정 오버레이 (중앙 팝업) ===== */
.tw-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-settings-overlay.is-hidden {
  display: none;
}
.tw-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
  cursor: pointer;
}
.tw-settings-modal {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(109,176,255,0.12);
  color: #fff;
  box-sizing: border-box;
}
.tw-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tw-settings-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.tw-settings-close {
  flex-shrink: 0;
}
/* tw-ctrl inside modal: row layout instead of column */
#twCtrl .tw-row1 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
#twCtrl .tw-field {
  flex: 1 1 90px;
  min-width: 80px;
}
#twCtrl .tw-row2 {
  margin-top: 10px;
}
#twCtrl .tw-checkbox-field {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: clamp(11px, 1.5vh, 14px);
  font-weight: 500;
  color: inherit;
  user-select: none;
}
#twCtrl .tw-checkbox-field input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #7bcfa0;
}

/* ── edge label path/selected 색상 우선순위 보정 ──────────────────────────
   .lbl-out / .lbl-both / .lbl-none 은 .path 보다 나중에 선언되어 있어
   같은 명시도(specificity)에서 뒤에 오는 규칙이 이기는 문제가 발생.
   여기서 compound selector로 명시도를 높여 path/selected 가 항상 이기도록 함.
   !important 없이 specificity 만으로 해결. */
g.edge-label.path,
g.edge-label.selected,
g.edge-label.lbl-out.path,
g.edge-label.lbl-both.path,
g.edge-label.lbl-none.path,
g.edge-label.lbl-out.selected,
g.edge-label.lbl-both.selected,
g.edge-label.lbl-none.selected {
    color: orange;
}

/* ── LOD 1: Constellation Mode ──────────────────────────────────────── */

/* Default node: fill=0.7 (opaque), border=0.2 (transparent) */
.node .node-dot-lod1 {
  fill: rgba(180, 200, 255, 0.70);
  stroke: rgba(180, 200, 255, 0.20);
  stroke-width: 1.4;
}
.node:hover .node-dot-lod1 {
  stroke: rgba(180, 200, 255, 0.40);
}
/* base: green family */
.node.base .node-dot-lod1 {
  fill: rgba(60, 200, 100, 0.70);
  stroke: rgba(120, 255, 160, 0.20);
  stroke-width: 2;
}
/* path-intermediate: orange family */
.node.path-intermediate .node-dot-lod1 {
  fill: rgba(255, 140, 0, 0.70);
  stroke: rgba(255, 140, 0, 0.20);
  stroke-width: 2;
}
/* selected: blue family */
.node.selected .node-dot-lod1 {
  fill: rgba(80, 140, 255, 0.70);
  stroke: rgba(120, 180, 255, 0.20);
  stroke-width: 2;
}
/* group non-member (intruder) indication — reddish fill in LOD 1 (star style) */
/* exception: base and path-intermediate nodes keep their semantic style */
svg[data-lod="1"] .node.inside-foreign-hull:not(.base):not(.path-intermediate) .node-dot-star {
  fill: rgba(255, 80, 80, 0.80);
}

/* LOD 1 edge thickness: 2× default; non-default (selected/path/adj) edges are 2× that */
svg[data-lod="1"] line.edge {
  stroke-width: 2px;
}
svg[data-lod="1"] line.edge.selected,
svg[data-lod="1"] line.edge.path,
svg[data-lod="1"] line.edge.adj {
  stroke-width: 4px;
}

/* LOD 1 node labels: ~26px; pointer-events:all so label is part of hit area */
.node .node-title-lod1 {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  pointer-events: all;
}
.node.base .node-title-lod1 {
  fill: rgba(120, 255, 160, 0.95);
  font-weight: 700;
}
.node.selected .node-title-lod1 {
  fill: rgba(140, 200, 255, 0.95);
}

/* LOD 2: title labels for base/selected — 3× LOD 1 size */
svg[data-lod="2"] .node .node-title-lod2-special {
  font-size: 78px;
}

/* LOD 2: invisible hit circle (pointer-events only) */
.node .node-dot-star-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

/* ── LOD 1/2/3: Star / Night Sky / Galaxy Mode ──────────────────────── */
/* Base fill; per-node glow is applied inline by JS (makeStarGlowFilter) */
.node .node-dot-star {
  fill: rgba(160, 190, 255, 0.7);
  stroke: none;
}
.node.base .node-dot-star {
  fill: rgba(120, 255, 160, 0.95);
}
.node.path-intermediate .node-dot-star {
  fill: rgba(255, 160, 60, 0.9);
}
.node.selected .node-dot-star {
  fill: rgba(140, 200, 255, 0.95);
}
/* cathover core: hidden by default; shown/sized inline by JS */
.node .node-cathover-core {
  stroke: none;
  pointer-events: none;
}

/* ── LOD 슬라이더 ─────────────────────────────────────────────────────── */
.tw-lod-slider-wrap {
  position: relative;
  left: 33px;
  top: 20px; /* JS가 #twArrange 아래로 재계산해 덮어씀 */
  width: 12px;
  z-index: 40;
  background: #2b3446;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.2s ease;
}
@media ( max-width : 768px) {
	.tw-lod-slider-wrap {
		left: 15px;
		width: 6px;
	}
}

.tw-lod-slider-track {
  position: relative;
  width: 4px;
  height: 108px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}

.tw-lod-step {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.30);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s;
}
.tw-lod-step:hover { background: rgba(255,255,255,.55); }
.tw-lod-step.is-active { background: rgba(100,160,255,.85); }

.tw-lod-step[data-lod="0"] { top: 0px; }
.tw-lod-step[data-lod="1"] { top: 36px; }
.tw-lod-step[data-lod="2"] { top: 72px; }
.tw-lod-step[data-lod="3"] { top: 108px; }

.tw-lod-thumb {
  position: absolute;
  left: 2px; /* half of 4px track — combined with translateX(-50%) centers on track */
  transform: translate(-50%, -50%);
  background: #1a3a5c;
  border: 1px solid rgba(100,160,255,.55);
  color: #8ac4ff;
  font-size: 10px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 10px;
  user-select: none;
  z-index: 2;
  pointer-events: none;
  transition: top 0.15s ease;
}

.is-iframe-mode .tw-lod-slider-wrap { display: none; }