#timeline-app {
				width: 100%;
				max-width: 1200px;
				
				
				
				overflow: hidden;
			}

			.main-layout {
				display: flex;
				gap: 28px;
				align-items: stretch;
				min-height: 520px;
				padding: 32px;
			}

			/* ===== Left: Image + Circle ===== */
			.left-panel {
				flex: 0 0 512px;
				position: relative;
				border-radius: 16px;
				overflow: hidden;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bg-image {
				max-width: 100%;
				max-height: 100%;
				border-radius: 16px;
				display: block;
				transition: opacity 0.6s ease;
			}

			.circle-svg {
				position: relative;
				width: 100%;
				height: auto;
				display: block;
			}

			/* ===== Right: Semicircle Carousel ===== */
			.right-panel {
				flex: 1;
				position: relative;
				min-width: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.arc-svg {
				width: 100%;
				height: auto;
				display: block;
				overflow: visible;
			}

			.node {
				cursor: pointer;
				transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
			}

			.node-circle {
				transition: r 0.4s ease, fill 0.4s ease, stroke-width 0.4s ease;
			}

			.node-year {
				font-size: 12px;
				font-weight: 600;
				transition: fill 0.4s ease, font-size 0.4s ease;
				pointer-events: none;
				user-select: none;
			}

			/* center detail text */
			.center-detail {
				position: absolute;
				top: 50%;
				left: 35%;
				transform: translate(-50%, -50%);
				text-align: right;
				width: 60%;
				pointer-events: none;
			}

			.cd-year {
				font-size: 46px;
				font-weight: 700;
				letter-spacing: 2px;
				line-height: 1;
				transition: color 0.4s ease;
			}

			.cd-title {
				font-size: 17px;
				font-weight: 600;
				margin-top: 4px;
				color: #333;
			}

			.cd-desc {
				font-size: 13px;
				line-height: 1.7;
				color: #777;
				margin-top: 12px;
			}

			/* nav arrows */
			.nav-btn {
				position: absolute;
				right: -6px;
				top: 50%;
				transform: translateY(-50%);
				width: 36px;
				height: 36px;
				border-radius: 50%;
				border: 1.5px solid #d0d0d0;
				background: #fff;
				color: #888;
				font-size: 18px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
				transition: all 0.25s ease;
				z-index: 5;
			}

			.nav-btn:hover {
				border-color: #378ADD;
				color: #378ADD;
				background: rgba(55, 138, 221, 0.05);
			}

			.nav-btn.prev {
				right: 34px;
			}