: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);
	--tw-top-center-x: calc(50% + var(--tw-rail-w)/2);
	--tw-main-top-w: max(25vw, 410px);
	--tw-landing-more-size: 54px;
	--tw-landing-more-gap: 14px;
}

/* ===== Landing header overlay ===== */
.tw-landing-header-overlay {
	position: fixed;
	top: 120px;
	left: var(--tw-top-center-x);
	transform: translateX(-50%);
	width: var(--tw-main-top-w);
	box-sizing: border-box;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-size: 24px;
	line-height: 1.1;
	font-weight: 500;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

.tw-landing-title-text {
	width: calc(100% - 10px);
	box-sizing: border-box;
	margin: 0 auto;
	background: var(--panel-bg);
	border-top: 1px solid var(--panel-accent);
	border-bottom: 1px solid var(--panel-accent);
	border-radius: 3px;
	padding: 2px 5px 5px 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tw-landing-header-overlay .tw-landing-base-title {
	color: var(--tw-base-color, #37b24d);
}

.tw-landing-header-overlay .tw-landing-more-btn {
	position: absolute;
	left: calc(100% + var(--tw-landing-more-gap));
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: var(--tw-landing-more-size);
	height: var(--tw-landing-more-size);
	border-radius: 999px;
	border: 3px solid rgba(255, 255, 255, 0.85);
	background: rgba(10, 14, 24, 0.78);
	color: rgba(255, 255, 255, 0.95);
	font-size: 42px;
	font-weight: 900;
	line-height: 1;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.12s, background 0.12s, color 0.12s;
}

.tw-landing-header-overlay .tw-landing-more-btn:hover {
	transform: translateY(-50%) scale(1.06);
}

body:not(.is-landing-mode) .tw-landing-header-overlay {
	display: none !important;
}

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 : 1800px) {
	.tw-landing-header-overlay {
		font-size: 20px;
	}
}

@media ( max-width : 1024px) {
	#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: 50%;
		height: 50%;
		z-index: 20;
		width: 0;
		min-width: 0;
		overflow: hidden;
		border-right: 0;
		border-top: 0;
		background: #fff;
		border-radius: 18px 18px 0 0;
	}
	#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%;
	}*/
	:root {
		--tw-rail-w: 66px;
		--tw-main-top-w: max(40vw, 300px);
	}
	.toolbar .webdropbar {
		width: 50px !important;
	}
	.toolbar .inputkeyword_or_code::placeholder {
		font-size: 11px !important;
		transform: translateY(-3px) !important;
	}
	.tw-landing-header-overlay {
		font-size: 16px;
	}
}

#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: 50;
	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: 16px;
	display: none;
	pointer-events: none;
	max-width: none;
	width: max-content;
	white-space: nowrap;
	line-height: 1.5;
	text-align: center;
	overflow: visible;
}
/* Node-button tooltips (showTipRight): 1.3× size */
.tip.tip--btn {
	font-size: 16px; /* 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;
  justify-content: center;
	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(120, 255, 160, 0.95);
	font-weight: 700;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.78);
	font-size: 16px;
}

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

.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 in the main graph area without CSS transform.
     This preserves the previous visual center:
     old center = 50vw + railWidth/2
     new area   = [railWidth, viewportRight], auto-margin centered. */
	left: var(--tw-rail-w);
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transform: none;
	z-index: 25;
	width: var(--tw-main-top-w);
	padding: 10px 6px;
	box-sizing: border-box;
	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;
}

.tw-mobile-side-close-btn {
	display: none;
}

.tw-mobile-side-close-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.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);
}
/* Main Timeweb search toolbar: remove padding dead-bands so hit area matches visible row */
#ctrl.toolbar {
	padding-top: 0;
	padding-bottom: 0;
}

#ctrl .toolbar-main-row {
	height: 40px;
	align-items: center;
}

#ctrl #btnGo {
	align-self: center;
	height: 28px;
	line-height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

#ctrl #baseCode.inputkeyword_or_code {
	height: 40px;
	line-height: normal;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

#ctrl .webdropbar {
	align-self: center;
}
/* 공통 박스 */
.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 : 1024px) {
	.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 — JS-controlled height via CSS variables */
.tw-path-top {
	flex: 0 0 var(--tw-path-top-h, auto);
	height: var(--tw-path-top-h, auto);
	max-height: var(--tw-path-top-max-h, none);
	min-height: 0;
	overflow-y: auto;
	box-sizing: border-box;
	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 — JS-controlled height via CSS variables */
.tw-path-neighbors {
	flex: 0 0 var(--tw-path-neighbor-h, auto);
	height: var(--tw-path-neighbor-h, auto);
	max-height: var(--tw-path-neighbor-max-h, none);
	min-height: 0;
	overflow-y: auto;
	box-sizing: border-box;
	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;
}

.nb-year-basis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 4px 0;
	opacity: 0.95;
}

.nb-year-basis-text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nb-year-basis-status {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
}

.nb-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.nb-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(16px, 0.8vw, 20px);
	color: #fff;
	font-weight: 500;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.35;
	margin-bottom: 8px;
	cursor: pointer;
}

.nb-year-status {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
	font-size: 16px;
	opacity: 0.9;
	color: rgba(255, 255, 255, 0.9);
	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: left;
    padding-left: 10px;
}

.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: 24;
	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;
}

/* Timebar must not block graph interaction outside its real controls */
#timebar {
	pointer-events: none;
}

#timebar .tw-timebar {
	pointer-events: none;
}

#timebar .tw-btn,
#timebar #tb_prev,
#timebar #tb_next,
#timebar .tw-bar,
#timebar .tw-timebar-toggle,
#timebar .tw-timebar-toggle input,
#timebar #tb_enable {
	pointer-events: auto;
}

#timebar .tw-label,
#timebar .tw-label-min,
#timebar .tw-label-max,
#timebar .tw-track,
#timebar .tw-fill,
#timebar .tw-main-seg,
#timebar .tw-thumb,
#timebar .tw-tooltip {
	pointer-events: none;
}

#timebar .tw-bar {
	touch-action: none;
}

/* ===== 오른쪽 카테고리 ===== */
.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: 90;
	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 : 1024px) {
	.cat-filter {
		width: 240px;
		height: calc(100vh - 210px);
	}
	.tw-ctrl {
		width: 240px;
	}
	
	.path-node-base-label {
		width: 35%;
	}

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

.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: 70;
	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: 20;
	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;
	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: 109;
	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;
}

.tw-base-label-overlay {
	pointer-events: auto;
	cursor: pointer;
	display: block;
}

.tw-base-label-overlay-text {
	fill: rgba(120, 255, 160, 0.95);
	font-weight: 700;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.78);
	text-anchor: middle;
	dominant-baseline: hanging;
	pointer-events: visiblePainted;
	cursor: pointer;
}

.tw-base-label-overlay-hit {
	pointer-events: all;
	cursor: pointer;
}

#catFilterHandle.tw-cat-handle-pulse {
	animation: twCatHandlePulseNoTransform 0.54s ease-out 1;
}

@keyframes twCatHandlePulseNoTransform {
  0% {
    background-color: rgba(12, 16, 24, 0.95);
    box-shadow: none;
  }
  30% {
    background-color: rgba(35, 65, 105, 0.95);
    box-shadow: 0 0 14px rgba(109, 176, 255, 0.7);
  }
  100% {
    background-color: rgba(12, 16, 24, 0.95);
    box-shadow: none;
  }
}
.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 : 1024px) {
	.cat-filter {
		width: min(280px, calc(100vw - 24px));
		top: auto;
		bottom: 0px;
		max-height: 68vh;
	}
	#catFilterHandle {
		right: 280px !important;
		top: auto !important;
		bottom: 50vh !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: 150;
}
/* ===== 링크 모달 공통 ===== */
#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: 101;
	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: 150;
}

.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;
}

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

/* 정렬 버튼 숨기기 — 슬라이더는 그대로 유지 */
body.is-galaxy-mode #btnArrangeDefault, body.is-galaxy-mode #btnArrangeClean,
	body.is-galaxy-mode #btnArrangeGroup, body.is-galaxy-mode #btnArrangeRadial,
	body.is-galaxy-mode #btnToggleEdgeLabels, body.is-galaxy-mode #btnToggleGroups,
	body.is-galaxy-mode .tw-rail-edit-divider, body.is-galaxy-mode .tw-rail-btn[data-action="import"],
	body.is-galaxy-mode .tw-rail-btn[data-action="link"], body.is-galaxy-mode .tw-rail-btn[data-action="group-manage"],
	body.is-galaxy-mode .tw-rail-btn[data-action="settings"] {
	display: none !important;
}

/* 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-label {
	display: none;
}

.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: 100;
	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;
}

/* Base label inverse-scale fallback: sets world font-size so first frame is not 26px */
.node-title-lod-base-inv {
	font-size: 184.615px;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.78);
}

/* 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: 10;
	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;
}

/* ── Initial Galaxy loading overlay ──────────────────────────────────── */
#twGalaxyInitialLoader {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: radial-gradient(circle at center, rgba(0, 0, 0, 0.92),
		rgba(0, 0, 0, 0.98));
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.45s ease;
}

#twGalaxyInitialLoader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: var(--tw-rail-w, 99px);
	box-sizing: border-box;
}

#twGalaxyInitialLoader.is-hiding {
	opacity: 0;
}

.tw-galaxy-loader-stage {
	width: min(52vw, 520px);
	height: min(52vw, 520px);
}

.tw-galaxy-loader-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.tw-galaxy-loader-t {
	fill: white;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 220px;
	text-anchor: middle;
	dominant-baseline: middle;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center center;
	animation: twGalaxyLoaderT 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

@keyframes twGalaxyLoaderT {
  0% {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

@keyframes twGalaxyParticle {
  0% {
    transform: translate(400px, 400px) scale(0);
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--x), var(--y)) scale(var(--s));
    opacity: 0;
  }
}

/* ── Galaxy 추천 버블 ─────────────────────────────────────────────────── */
#twGalaxyRecommendationBubbles {
	position: fixed;
	top: 22px;
	right: 24px;
	z-index: 105;
	width: 260px;
	pointer-events: auto;
	color: #fff;
	font-family: inherit;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#twGalaxyRecommendationBubbles.is-hiding {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.tw-galaxy-reco-title {
	margin: 0 0 8px 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.tw-galaxy-reco-list {
	position: relative;
	height: 242px; /* 42*5 + 8*4 = 242 */
}

/* absolute 배치로 top 애니메이션 가능하게 */
.tw-galaxy-reco-item {
	position: absolute;
	left: 0;
	right: 0;
	min-height: 42px;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 11px;
	box-sizing: border-box;
	border: 1px solid rgba(160, 190, 255, 0.32);
	border-radius: 999px;
	background: rgba(8, 14, 32, 0.62);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 0 18px
		rgba(120, 170, 255, 0.10);
	color: #fff;
	cursor: pointer;
	text-align: left;
	opacity: 1;
	transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s
		cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s
		cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, background
		0.18s ease, box-shadow 0.18s ease;
}

.tw-galaxy-reco-item.is-animating {
	transition: top 0.52s ease, opacity 0.24s ease, transform 0.52s ease;
}

.tw-galaxy-reco-item:not(.is-screen-hidden):not(.is-exiting-right):hover
	{
	transform: translateX(-4px);
	border-color: rgba(180, 215, 255, 0.72);
	background: rgba(20, 34, 72, 0.76);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 18px
		rgba(120, 170, 255, 0.25), inset 0 0 18px rgba(120, 170, 255, 0.16);
}

/* 6번째 pill: 같은 y 위치에 있지만 오른쪽 바깥에 숨김 */
.tw-galaxy-reco-item.is-next-hidden {
	transform: translateX(calc(100% + 36px));
	opacity: 0;
	pointer-events: none;
}

.tw-galaxy-reco-item.is-screen-hidden {
	display: none !important;
	pointer-events: none !important;
}

.tw-galaxy-reco-item.is-screen-hidden.is-entering-from-hidden,
	.tw-galaxy-reco-item.is-entering-from-hidden {
	display: flex !important;
	pointer-events: none !important;
	opacity: 0;
}

.tw-galaxy-reco-item.is-entering-from-hidden.is-animating {
	transition: top 0.52s ease, opacity 0.24s ease, transform 0.52s ease;
}

/* 첫 번째 pill 퇴장 */
.tw-galaxy-reco-item.is-exiting-right {
	transform: translateX(calc(100% + 36px));
	opacity: 0;
	pointer-events: none;
}

.tw-galaxy-reco-rank {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(120, 170, 255, 0.20);
	color: transparent;
	text-shadow: none;
	user-select: none;
}

.tw-galaxy-reco-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.tw-galaxy-reco-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
}

.tw-galaxy-reco-reason {
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	color: rgba(220, 235, 255, 0.68);
}

#twGalaxyRecommendationBubbles.is-shifting .tw-galaxy-reco-item {
	animation: twGalaxyRecoShift 0.34s ease;
}

@keyframes twGalaxyRecoShift {
  0% {
    opacity: 0.35;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media ( max-width : 1200px) {
	#twGalaxyRecommendationBubbles {
		width: 180px;
	}
}

@media ( max-width : 1024px) {
	#twGalaxyRecommendationBubbles {
		width: 130px;
		top: 200px;
	}
}

/* ── Galaxy 추천 노드 스타 펄스 ──────────────────────────────────────── */
.galaxy-reco-node-pulse {
	pointer-events: none;
	mix-blend-mode: screen;
}

.galaxy-reco-node-pulse-inner {
	pointer-events: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center center;
	animation: galaxyRecoPulseFade 1s ease-out forwards;
}

.galaxy-reco-pulse-halo {
	opacity: 0.9;
}

.galaxy-reco-pulse-beam-rect {
	opacity: 0.95;
	filter: blur(0.35px);
}

.galaxy-reco-pulse-beam-faint {
	opacity: 0.34;
	filter: blur(0.7px);
}

.galaxy-reco-pulse-core {
	opacity: 1;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
		drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}

@keyframes galaxyRecoPulseFade {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  65% {
    opacity: 0.72;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
.tw-galaxy-reco-item.is-reco-pulsing {
	animation: twGalaxyRecoItemPulse 1s ease-out forwards;
	border-color: rgba(255, 245, 170, 0.95);
	background: rgba(40, 48, 86, 0.86);
	box-shadow: 0 0 0 1px rgba(255, 245, 170, 0.45), 0 0 18px
		rgba(255, 245, 170, 0.45), 0 0 28px rgba(120, 170, 255, 0.32), inset 0
		0 18px rgba(255, 245, 170, 0.16);
}

@keyframes twGalaxyRecoItemPulse {
  0% {
    filter: brightness(1);
  }
  15% {
    filter: brightness(1.65);
  }
  50% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  }
}

/* ── Initial Galaxy pan/zoom tutorial ───────────────────────────────── */
#twGalaxyTutorialOverlay, #twLandingTutorialOverlay {
	position: fixed;
	left: calc(50% + var(--tw-rail-w, 99px)/2);
	bottom: 122px;
	transform: translateX(-50%);
	z-index: 108;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px;
	border-radius: 999px;
	background: rgba(8, 12, 24, 0.74);
	border: 1px solid rgba(160, 190, 255, 0.26);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), inset 0 0 22px
		rgba(120, 170, 255, 0.10);
	backdrop-filter: blur(12px);
	color: rgba(245, 250, 255, 0.94);
	pointer-events: none;
	opacity: 0;
	animation: twGalaxyTutorialIn 0.55s ease-out forwards;
}

#twGalaxyTutorialOverlay.is-hiding, #twLandingTutorialOverlay.is-hiding
	{
	animation: twGalaxyTutorialOut 0.35s ease-in forwards;
}

.tw-galaxy-tutorial-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	white-space: nowrap;
}

.tw-galaxy-tutorial-title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tw-galaxy-tutorial-desc {
	font-size: 12px;
	color: rgba(220, 235, 255, 0.72);
}

.tw-galaxy-tutorial-anim {
	position: relative;
	width: 96px;
	height: 54px;
	flex: 0 0 auto;
}

.tw-galaxy-tutorial-hand {
	position: absolute;
	left: 18px;
	top: 17px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12), 0 0 18px
		rgba(160, 190, 255, 0.45);
	animation: twGalaxyTutorialPan 2.4s ease-in-out infinite;
}

.tw-galaxy-tutorial-wheel {
	position: absolute;
	right: 12px;
	top: 8px;
	width: 24px;
	height: 38px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.72);
	box-shadow: 0 0 14px rgba(160, 190, 255, 0.24);
}

.tw-galaxy-tutorial-wheel::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	transform: translateX(-50%);
	animation: twGalaxyTutorialWheel 1.4s ease-in-out infinite;
}

.tw-galaxy-tutorial-zoom-ring {
	position: absolute;
	right: 2px;
	bottom: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(160, 190, 255, 0.28);
	animation: twGalaxyTutorialZoom 1.8s ease-in-out infinite;
}

@keyframes twGalaxyTutorialIn {from { opacity:0;
	transform: translateX(-50%) translateY(12px) scale(0.96);
}

to {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
}

}
@keyframes twGalaxyTutorialOut {from { opacity:1;
	transform: translateX(-50%) translateY(0) scale(1);
}

to {
	opacity: 0;
	transform: translateX(-50%) translateY(8px) scale(0.97);
}

}
@keyframes twGalaxyTutorialPan {
  0%, 100% {
    transform: translate(0, 0);
  }
  35% {
    transform: translate(34px, -6px);
  }
  70% {
    transform: translate(12px, 10px);
  }
}
@keyframes twGalaxyTutorialWheel {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) translateY(12px);
    opacity: 0.35;
  }
}
@keyframes twGalaxyTutorialZoom {
  0% {
    transform: scale(0.78);
    opacity: 0;
  }
  35% {
    opacity: 0.8;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

@media ( max-width : 1024px) {
  /* iframe 닫힌 일반 모바일 화면: 기존 fixed 유지 */
  #timebar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
  }

  /* iframe 열린 모바일 화면에서만 컨테이너 기준 배치 */
  body.tw-mobile-side-open #timebar {
    position: absolute;
    bottom: calc(50vh + 16px) !important;
  }
}
/* ── Mobile left rail ──────────────────────────────────────────────────── */
@media ( max-width : 1024px) {
	
	body.tw-mobile-rail-mode .tw-left-rail {
		position: fixed;
		left: auto;
		top: auto;
		right: 12px;
		bottom: 12px;
		z-index: 80;
		transition:
			bottom 0.22s ease,
			width 0.22s ease,
			height 0.22s ease,
			border-radius 0.22s ease,
			background-color 0.22s ease,
			box-shadow 0.22s ease,
			padding 0.22s ease;
	}

	/*
	 * Mobile, iframe closed:
	 * when year-view controls are enabled, keep the collapsed menu tab
	 * above the visible bottom timebar.
	 */
	body.tw-mobile-rail-mode.tw-mobile-timebar-enabled
		.tw-left-rail.is-mobile-collapsed {
		bottom: calc(
			12px + var(--tw-mobile-timebar-stack-h, 0px)
		) !important;
	}

	/*
	 * When the mobile read iframe is open, lift only the collapsed menu tab
	 * above the iframe, matching the timebar placement.
	 * Expanded menu intentionally does not match this selector.
	 */
	body.tw-mobile-rail-mode.tw-mobile-side-open
		.tw-left-rail.is-mobile-collapsed {
		position: absolute;
		bottom: calc(50vh + 16px) !important;
	}

	/*
	 * When the iframe is open and year-view controls are enabled,
	 * stack the collapsed mobile menu tab above the visible timebar.
	 */
	body.tw-mobile-rail-mode.tw-mobile-side-open.tw-mobile-timebar-enabled
		.tw-left-rail.is-mobile-collapsed {
		bottom: calc(
			50vh + 16px + var(--tw-mobile-timebar-stack-h, 0px)
		) !important;
	}

	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed {
		width: 48px;
		height: 48px;
		min-width: 48px;
		max-width: 48px;
		padding: 0;
		border-radius: 999px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed .tw-rail-logo-btn
		{
		width: 48px;
		height: 48px;
		min-height: 48px;
		margin: 0;
		padding: 0;
		border-radius: 999px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed .tw-rail-logo
		{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--tw-rail-logo-size, 34px);
		height: var(--tw-rail-logo-size, 34px);
		font-size: var(--tw-rail-logo-font-size, 18px);
		line-height: 1;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed>:not(.tw-rail-logo-btn)
		{
		display: none !important;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded {
		width: 180px;
		max-width: calc(100vw - 24px);
		height: auto;
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
		border-radius: 18px;
		padding: 10px 8px;
		display: flex;
		flex-direction: column;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded .tw-rail-btn {
		width: 100%;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed .tw-rail-logo-btn .tw-rail-label {
		display: none !important;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded .tw-rail-logo-btn {
		min-height: 78px;
		padding: 12px 6px 9px;
		border-radius: 10px;
		flex-direction: column;
		gap: 6px;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded .tw-rail-logo-btn .tw-rail-logo {
		font-size: 28px;
		line-height: 1;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded .tw-rail-logo-btn .tw-rail-label {
		display: inline;
	}
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-expanded .tw-rail-label
		{
		display: inline;
	}

	/* Rail is now fixed/floating — remove its contribution to layout spacing. */
	body.tw-mobile-rail-mode #timewebLayout {
		padding-left: 0;
	}
	body.tw-mobile-rail-mode #timewebMain {
		margin-left: 0;
	}
	body.tw-mobile-rail-mode #timewebSide {
		left: 0;
	}

	/* Goal A: collapsed T text 2x larger */
	body.tw-mobile-rail-mode .tw-left-rail.is-mobile-collapsed .tw-rail-logo
		{
		font-size: 36px;
	}

	/* Goal B: hide arrange/visibility buttons; scale slider unchanged */
	body.tw-mobile-rail-mode .btn-arr {
		display: none !important;
	}

	/* Goal C: iframe side panel fills full width */
	body.tw-mobile-rail-mode #timewebSide.has-content {
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
	}
	body.tw-mobile-rail-mode #sideFrame {
		width: 100% !important;
	}

	/* Part A: zero out rail-width offset for all var() references */
	body.tw-mobile-rail-mode {
		--tw-rail-w: 0px;
		--tw-top-center-x: 50%;
	}

	/* Part B: toolbar explicit centering */
	body.tw-mobile-rail-mode .toolbar {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: min(calc(var(--tw-main-top-w) + 40px), calc(100vw - 16px)) !important;
	}

	/* Part C: landing header overlay */
	body.tw-mobile-rail-mode .tw-landing-header-overlay {
		left: 50% !important;
		top: 100px !important;
		transform: translateX(-50%) !important;
		width: min(calc(var(--tw-main-top-w) + 40px), calc(100vw - 16px)) !important;
	}

	/* Part D: zoom/pan tutorial overlay */
	body.tw-mobile-rail-mode #twLandingTutorialOverlay {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}

	/* Part E: initial Galaxy loading animation — override hardcoded padding fallback */
	body.tw-mobile-rail-mode #twGalaxyInitialLoader {
		padding-left: 0 !important;
	}

	/* Goal A: timebar lifts above iframe when mobile side panel is open */
	body.tw-mobile-side-open #timebar {
		bottom: calc(50vh + 16px) !important;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		transform: none !important;
	}

	/* Goal B: catFilter handle — dark opaque on mobile */
	body.tw-mobile-rail-mode #catFilterHandle, #catFilterHandle {
		background: #2f3238;
		color: #e2e5ea;
		opacity: 1;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	}
	body.tw-mobile-rail-mode #catFilterHandle.is-collapsed, #catFilterHandle.is-collapsed
		{
		background: #2f3238;
		color: #e2e5ea;
		opacity: 1;
	}
	@keyframes twCatHandlePulseNoTransform {
	  0% {
	    background-color: #2f3238;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	  }
	  30% {
	    background-color: #3f4f66;
	    box-shadow: 0 0 14px rgba(109, 176, 255, 0.75);
	  }
	  100% {
	    background-color: #2f3238;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	  }
	}

/* Goal C / Part H: recommendation slide-in animation (both class names) */
.tw-galaxy-reco-row, .tw-galaxy-reco-item {
	transition: top 0.32s ease, opacity 0.22s ease;
}

.tw-galaxy-reco-row.is-leaving, .tw-galaxy-reco-item.is-leaving {
	opacity: 0;
}

.tw-galaxy-reco-row.is-entering-from-right, .tw-galaxy-reco-item.is-entering-from-right
	{
	animation: twGalaxyRecoEnterFromRight 0.32s ease-out both;
}

@keyframes twGalaxyRecoEnterFromRight {from { opacity:0;
	transform: translateX(42px);
}

to {
	opacity: 1;
	transform: translateX(0);
}

}

/* Part E: search select +5px wider */
body.tw-mobile-rail-mode .toolbar .webdropbar, body.tw-mobile-rail-mode #baseType
	{
	width: 55px !important;
	min-width: 55px !important;
}

/* Part F: recommendation font size -2px */
#twGalaxyRecommendationBubbles .tw-galaxy-reco-name {
	font-size: 11px;
}

#twGalaxyRecommendationBubbles .tw-galaxy-reco-reason {
	font-size: 10px;
}

/* Part G: replaced by bottom-anchored mobile rule — no top override here */

/* Timebar: two-row grid layout — labels move below buttons */
#timebar .tw-timebar-wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 3px;
	width: 100%;
}

#timebar .tw-timebar {
	display: contents;
}

#tb_prev {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

#timebar .tw-bar {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	min-width: 0;
}

#tb_next {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

#tb_label {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	align-self: center;
	min-width: 0 !important;
	font-size: 12px;
	line-height: 1.2;
}

#timebar .tw-timebar-toggle {
	grid-column: 2;
	grid-row: 2;
	justify-self: center;
	align-self: center;
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
}

#tb_label2 {
	grid-column: 3;
	grid-row: 2;
	justify-self: center;
	align-self: center;
	min-width: 0 !important;
	font-size: 12px;
	line-height: 1.2;
}

#timebar .tw-label {
	text-align: center;
	white-space: nowrap;
	font-size: 12px;
}

#timebar .tw-btn {
	min-width: 32px;
}

#timebar {
	padding-top: 8px;
	padding-bottom: 8px;
}

#timebar .tw-tooltip {
	top: -42px;
}

}

/* ── Timebar two-row fix (overrides previous mobile block) ───────────────── */
@media ( max-width : 1024px) {
	#timebar .tw-timebar-wrap {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 2px !important;
		width: 100% !important;
	}
	#timebar .tw-timebar {
		display: contents !important;
	}
	#timebar .tw-timebar .tw-btn:first-of-type {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		align-self: center !important;
	}
	#timebar .tw-timebar .tw-bar {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		align-self: center !important;
	}
	#timebar .tw-timebar .tw-btn:last-of-type {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		align-self: center !important;
	}
	#timebar .tw-label-min, #timebar .tw-timebar .tw-label:first-of-type {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		min-width: 0 !important;
		font-size: 12px !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
	#timebar .tw-timebar-toggle {
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}
	#timebar .tw-label-max, #timebar .tw-timebar .tw-label:last-of-type {
		grid-column: 3 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		min-width: 0 !important;
		font-size: 12px !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
	#timebar .tw-btn {
		min-width: 32px !important;
	}
	#timebar {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

/* ── Timebar grid fix: #timebar IS .tw-timebar-wrap, so target it directly ── */
@media ( max-width : 1024px) {
	/* #timebar already IS .tw-timebar-wrap — make it the grid container */
	#timebar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 2px !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* Flatten .tw-timebar children into the parent grid */
	#timebar .tw-timebar {
		display: contents !important;
	}

	/* Row 1: prev | slider | next */
	#tb_prev {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		align-self: center !important;
	}
	#timebar .tw-bar {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		align-self: center !important;
	}
	#tb_next {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		align-self: center !important;
	}

	/* Row 2: min year | checkbox | max year */
	#tb_label, #timebar .tw-label-min {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		min-width: 0 !important;
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}
	#timebar .tw-timebar-toggle {
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}
	#tb_label2, #timebar .tw-label-max {
		grid-column: 3 !important;
		grid-row: 2 !important;
		justify-self: center !important;
		align-self: center !important;
		min-width: 0 !important;
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}
	#timebar .tw-btn {
		min-width: 32px !important;
	}
}

/* ── Timebar disabled styles for display:contents mobile layout ─────────── */
@media ( max-width : 1024px) {
	/* .tw-timebar is display:contents on mobile — opacity must target children */
	#timebar .tw-timebar.is-disabled .tw-btn, #timebar .tw-timebar.is-disabled .tw-label,
		#timebar .tw-timebar.is-disabled .tw-bar {
		opacity: 0.45 !important;
	}
	#timebar .tw-timebar.is-disabled .tw-bar {
		cursor: default !important;
	}
	#timebar .tw-timebar.is-disabled .tw-btn {
		cursor: default !important;
	}
	#timebar .tw-timebar.is-disabled .tw-tooltip {
		display: none !important;
	}

	/* Restore hide states — override display:grid set above */
	body.is-home-mode #timebar, body.is-galaxy-mode #timebar {
		display: none !important;
	}
}

@media (max-width: 1024px) {

	/* Allow the normal search row to slide away when the iframe opens. */
	#ctrl.toolbar .toolbar-main-row {
		transition: transform 0.18s ease, opacity 0.18s ease;
	}

	/* When mobile iframe or catFilter is open, move search UI upward and disable hits. */
	body.tw-mobile-side-open #ctrl.toolbar .toolbar-main-row,
	body.tw-mobile-catfilter-open #ctrl.toolbar .toolbar-main-row {
		transform: translateY(-110px);
		opacity: 0;
		pointer-events: none;
	}

	/* Do not allow autocomplete to remain visible while another mobile panel is open. */
	body.tw-mobile-side-open #ctrl.toolbar .acBox,
	body.tw-mobile-side-open #ctrl.toolbar #acBox,
	body.tw-mobile-catfilter-open #ctrl.toolbar .acBox,
	body.tw-mobile-catfilter-open #ctrl.toolbar #acBox {
		display: none !important;
		pointer-events: none !important;
	}

	/* Replacement control occupying the toolbar/search position. */
	body.tw-mobile-side-open #twMobileSideCloseBtn,
	body.tw-mobile-catfilter-open #twMobileSideCloseBtn {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%) translateY(-30px);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 20px;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 999px;
		background: rgba(65, 60, 62, 0.7);
		color: rgba(255, 255, 255, 0.96);
		cursor: pointer;
		z-index: 3;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	}

	body.tw-mobile-side-open #twMobileSideCloseBtn:active,
	body.tw-mobile-catfilter-open #twMobileSideCloseBtn:active {
		background: rgba(40, 50, 70, 0.94);
	}

	body.tw-mobile-side-open #twMobileSideCloseBtn .tw-mobile-side-close-arrow,
	body.tw-mobile-catfilter-open #twMobileSideCloseBtn .tw-mobile-side-close-arrow {
		font-size: 16px;
	}

	.tw-landing-header-overlay {
		display: none !important;
	}

	/* Mobile: when 연도별 보기 is OFF, hide the inactive control row entirely.
	   Keep .tw-timebar-toggle visible so it can be turned back on. */
	#timebar .tw-timebar.is-disabled {
		display: none !important;
	}

	/* CSS safety net: tutorials and double-click tip must never appear on mobile. */
	body.tw-mobile-rail-mode #twGalaxyTutorialOverlay,
	body.tw-mobile-rail-mode #twLandingTutorialOverlay,
	body.tw-mobile-rail-mode #homeTip {
		display: none !important;
	}

	/*
	 * Mobile + catFilter open:
	 * compact LOD scale into one visible marker point.
	 * Applied through a JS class so tapping the thumb can temporarily expand it.
	 */
	#twLodSliderWrap.is-mobile-catfilter-collapsed {
		padding-top: 10px;
		padding-bottom: 10px;
		border-radius: 999px;
	}

	#twLodSliderWrap.is-mobile-catfilter-collapsed .tw-lod-slider-track {
		height: 0 !important;
		min-height: 0 !important;
		background: transparent;
	}

	#twLodSliderWrap.is-mobile-catfilter-collapsed .tw-lod-step {
		top: 0 !important;
		pointer-events: none !important;
		opacity: 0.35;
	}

	#twLodSliderWrap.is-mobile-catfilter-collapsed .tw-lod-step.is-active {
		opacity: 1;
		z-index: 2;
	}

	#twLodSliderWrap.is-mobile-catfilter-collapsed .tw-lod-thumb {
		top: 0 !important;
		pointer-events: auto !important;
		cursor: pointer;
		z-index: 3;
	}

	/* Mobile initial-Galaxy recommendation strip: fixed along the bottom. */
	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles {
		--tw-mobile-reco-gap: 6px;
		/*
		 * Container side margins: 8px left + 8px right = 16px.
		 * Gaps between 3 visible slots: 6px * 2 = 12px.
		 * Visible content width = 100vw - 28px.
		 */
		--tw-mobile-reco-slot-w: calc((100vw - 28px) / 3);
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		top: auto !important;
		bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		z-index: 70;
		box-sizing: border-box;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-title {
		text-align: center;
		margin-bottom: 6px;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-list {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-list.is-mobile-horizontal {
		width: calc((var(--tw-mobile-reco-slot-w) * 3) + (var(--tw-mobile-reco-gap) * 2));
		max-width: 100%;
		overflow: hidden;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-mobile-track {
		display: flex;
		align-items: stretch;
		gap: var(--tw-mobile-reco-gap);
		width: max-content;
		transform: translateX(0);
		will-change: transform;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-mobile-track.is-sliding-left {
		transform: translateX(calc(-1 * (var(--tw-mobile-reco-slot-w) + var(--tw-mobile-reco-gap))));
		transition: transform 420ms ease-in-out;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-item {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		flex: 0 0 var(--tw-mobile-reco-slot-w) !important;
		width: var(--tw-mobile-reco-slot-w) !important;
		min-width: var(--tw-mobile-reco-slot-w) !important;
		max-width: var(--tw-mobile-reco-slot-w) !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-item.is-slide-buffer {
		pointer-events: none;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-rank {
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-main {
		flex: 1 1 auto;
		width: 0;
		min-width: 0;
		overflow: hidden;
	}

	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-name,
	body.tw-mobile-rail-mode #twGalaxyRecommendationBubbles .tw-galaxy-reco-reason {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}