/* =========================================
   [Design System] 
   ========================================= */
:root {
	--brand-blue: #2563eb;
	--brand-dark: #0f172a;
	--brand-darker: #020617;
	
	--text-primary-dark: #f8fafc;
	--text-secondary-dark: #94a3b8;
	
	--text-primary-light: #1e293b;
	--text-secondary-light: #64748b;

	--accent-cyan: #22d3ee;
	
	/* Card Styles */
	--card-bg-glass: rgba(255, 255, 255, 0.7);
	--card-border: rgba(226, 232, 240, 0.8);
	--card-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
	
	/* Typography Scale */
	--font-h1: clamp(2.2rem, 5vw, 3.5rem);
	--font-h2: clamp(1.8rem, 4vw, 2.5rem);
	--font-h3: clamp(1.4rem, 3vw, 1.8rem);
	--font-body: clamp(1rem, 1.5vw, 1.05rem);
}

/* Typography Utilities */
h1, .h1 { font-size: var(--font-h1); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
h2, .h2 { font-size: var(--font-h2); line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }
h3, .h3 { font-size: var(--font-h3); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
p, .body-text { font-size: var(--font-body); line-height: 1.7; letter-spacing: -0.01em; color: var(--text-secondary-light); }

/* --- Hero Section Styles (Dark Theme) --- */
.section-hero-bg {
	background: radial-gradient(circle at 50% 30%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
				linear-gradient(180deg, #020617 0%, #0f172a 100%);
	color: white;
	position: relative;
	padding-bottom: 120px;
}
.section-hero-bg::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background-image: 
		radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.2;
	pointer-events: none;
}

.hero-highlight { 
	position: relative; display: inline-block; z-index: 1; 
	background: linear-gradient(120deg, #60a5fa, #22d3ee);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-header h2.sub-section-title {
  font-size: var(--font-h2); 
  margin-bottom: 20px; 
  color: var(--text-primary-light);
}

/* --- 서비스 탭 (Glassmorphism) --- */
.industry-tab {
  position: relative; overflow: hidden; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: white; 
  border: 1px solid #E2E8F0; 
  color: var(--text-secondary-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.industry-tab:hover { 
	transform: translateY(-4px); 
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
	border-color: #93C5FD;
}
.industry-tab.active { 
	background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); 
	border-color: transparent; 
	color: white; 
	box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.4); 
}

.tab-object { position: absolute; right: -10px; bottom: -10px; width: 64px; height: 64px; opacity: 0.1; transition: all 0.5s ease; }
.industry-tab.active .tab-object { opacity: 0.3; transform: scale(1.2) rotate(-10deg); fill: white; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.industry-tab.active .tab-object svg { animation: float 3s ease-in-out infinite; }

/* --- 포스트 카드 (Refined) --- */
.post-card { 
	border-radius: 24px; 
	background: white; 
	border: 1px solid rgba(226, 232, 240, 0.8);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
	cursor: pointer; 
	position: relative; 
	overflow: hidden; 
	padding: 32px; 
	display: flex; 
	flex-direction: column; 
}
.post-card:hover { 
	transform: translateY(-8px); 
	border-color: #60A5FA; 
	box-shadow: var(--card-shadow);
}
.card-object-area { 
	margin-bottom: 24px; 
	border-radius: 16px; 
	overflow: hidden; 
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.card-title { 
	font-size: 1.35rem; 
	font-weight: 600; 
	color: var(--text-primary-light); 
	line-height: 1.4; 
	margin-bottom: 12px; 
}

.tag-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 24px; }
.tag-badge { 
	font-size: 0.75rem; 
	font-weight: 600; 
	padding: 6px 12px; 
	border-radius: 99px; 
	letter-spacing: -0.01em; 
}
.tag-industry { background: #EFF6FF; color: #2563EB; border: 1px solid #DBEAFE; }
.tag-budget { background: #F0FDF4; color: #16A34A; border: 1px solid #DCFCE7; }
.tag-type { background: #F8FAFC; color: #475569; border: 1px solid #E2E8F0; }

/* --- [New Sidebar Filter Styles] --- */
/* --- Filter Sidebar Styles --- */
.filter-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 16px;
}
.filter-pill-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px; /* 간격 소폭 축소 */
	margin-bottom: 12px;
}
.filter-pill {
	padding: 7px 16px; /* 높이 축소 (기존 10px -> 7px) */
	border-radius: 99px;
	border: 1px solid #e2e8f0;
	background: white;
	font-size: 0.9rem; /* 폰트 사이즈 미세 조정 */
	color: #475569;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	user-select: none;
	line-height: 1.4;
}
.filter-pill:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
	transform: translateY(-1px);
}
.filter-pill.active {
	border-color: var(--brand-blue);
	background: #eff6ff;
	color: var(--brand-blue);
	font-weight: 600;
	box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
}

/* --- New Expand Motion (CSS Grid Track Transition) --- */
.extra-items-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}
.extra-items-wrapper.is-open {
	grid-template-rows: 1fr;
}
.extra-items-content {
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.4s ease;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.is-open .extra-items-content {
	opacity: 1;
	transform: translateY(0);
	margin-top: 6px;
	margin-bottom: 12px;
}

.more-trigger {
	font-size: 0.85rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	margin-top: 4px;
	margin-bottom: 24px;
	transition: all 0.2s;
	font-weight: 600;
	width: fit-content;
}
.more-trigger:hover {
	color: var(--brand-blue);
}
.more-trigger svg {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.more-trigger.is-active svg {
	transform: rotate(-180deg);
}

.filter-status-box {
	padding-bottom: 20px;
	margin-bottom: 32px;
	border-bottom: 1px solid #e2e8f0;
}
.filter-status-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 6px;
}
.filter-status-empty {
	font-size: 0.9rem;
	color: #94a3b8;
	word-break: keep-all;
}
.filter-reset-btn {
	width: 100%;
	padding: 14px;
	border: 1px solid #e2e8f0;
	border-radius: 99px;
	background: white;
	color: #64748b;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s;
	margin-top: 20px;
}
.filter-reset-btn:hover:not(:disabled) {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}
.filter-reset-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Bar Chart Range Slider Styles --- */
.cost-chart-container {
	padding: 0 10px 30px 10px;
}
.bars-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 50px;
	gap: 4px;
	margin-bottom: 12px;
}
.bar {
	flex: 1;
	background: #f1f5f9;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	transition: all 0.3s ease;
}
.bar.highlight {
	background: var(--brand-blue);
	opacity: 0.25;
}
.bar.active {
	background: var(--brand-blue);
	opacity: 1;
}

.range-input-container {
	position: relative;
	height: 20px;
	display: flex;
	align-items: center;
}
#costRangeSlider {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: #e2e8f0;
	outline: none;
	border-radius: 2px;
}
#costRangeSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2px solid var(--brand-blue);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.current-cost-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--brand-blue);
	text-align: center;
	margin-bottom: 16px;
	min-height: 1.5rem;
}

/* --- 상세 페이지 (Modal) --- */
#detailView { display: none; position: fixed; inset: 0; z-index: 5000; background: white; overflow-y: auto; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
#detailView.active { transform: translateY(0); }

.article-header { margin-bottom: 80px; text-align: center; }
.article-title { font-size: var(--font-h1); line-height: 1.2; color: var(--text-primary-light); margin-bottom: 24px; letter-spacing: -0.02em; font-weight:600;}
@media (min-width: 768px) { .article-title { font-size: 3rem; } }

.article-meta { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; }
.article-body { font-size: 1.125rem; line-height: 1.8; color: #334155; }

.article-section { margin-bottom: 120px; }

.article-h3 { 
	font-size: var(--font-h2); font-weight: 600; color: var(--brand-dark); 
	display: flex; align-items: center; gap: 16px; 
}

.article-h4 { 
	font-size: 1.25rem; font-weight: 600; color: var(--text-primary-light); 
	margin-top: 0; margin-bottom: 12px;
	display: flex; align-items: center; gap: 10px;
}
.article-h4::before { 
	content: ''; display: block; width: 6px; height: 6px; background: var(--brand-blue); border-radius: 50%; flex-shrink: 0; margin-top: 2px;
}

.article-p { 
	word-break: keep-all; 
	color: var(--text-secondary-light); 
	font-size: 1.1rem; 
	line-height: 1.75;
	font-weight: 400;
}

.article-img-box { 
	margin: 40px 0 80px 0; 
	border-radius: 24px; overflow: hidden; 
	box-shadow: var(--card-shadow); border: 1px solid rgba(0,0,0,0.05);
}
.article-img-box img { width: 100%; height: auto; display: block; }

/* Visual Placeholder */
.visual-placeholder {
	width: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: #94A3B8;
	transition: all 0.3s;
	overflow:hidden;
}
.visual-placeholder:hover { border-color: #CBD5E1; color: #64748B; background-color: #F1F5F9; }
.visual-placeholder svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.5; }
.visual-placeholder span { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: "Plus Jakarta Sans"; }

.article-quote { 
	background: #F8FAFC; border: 1px solid #E2E8F0; padding: 48px; 
	border-radius: 32px; margin: 40px 0; font-size: 1.5rem; 
	font-weight: 600; color: var(--brand-dark); font-style: normal; text-align: center;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}
.article-divider { border: 0; height: 1px; background: #E2E8F0; margin: 80px 0; }

/* Info Card */
.info-card { 
	background: white; 
	border: 1px solid var(--card-border); 
	border-radius: 24px; 
	padding: 32px; 
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.info-card:hover { 
	border-color: #93C5FD; 
	box-shadow: var(--card-shadow); 
	transform: translateY(-4px); 
}
.feature-card { 
	display: flex; gap: 16px; align-items: flex-start; 
	background: #F8FAFC; padding: 24px; border-radius: 20px; 
	border: 1px solid transparent; transition: all 0.3s;
}
.feature-card:hover { border-color: #CBD5E1; background: white; }

/* [REFINED] Detail Bottom CTA - Cleaner Graphic */
.detail-bottom-cta {
	position: relative;
	overflow: hidden;
	background: #020617; 
	border-radius: 32px; padding: 80px 64px; text-align: center; color: white; margin-top: 100px;
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}
.detail-bottom-cta::before {
	content: ''; position: absolute; inset: 0;
	background-image: 
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.3;
	z-index: 1;
	pointer-events: none;
}
.detail-bottom-cta::after {
	content: ''; position: absolute; inset: 0;
	background: 
		radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 90% 90%, rgba(34, 211, 238, 0.1) 0%, transparent 50%);
	z-index: 0;
	pointer-events: none;
}

.detail-bottom-cta h3 { font-size: 2.2rem; font-weight: 600; margin-bottom: 20px; position: relative; z-index: 10; }
.detail-bottom-cta p { font-size: 1.25rem; color: #94a3b8; margin-bottom: 48px; position: relative; z-index: 10; }
.detail-bottom-cta a {
	position: relative; z-index: 10;
	background: var(--brand-blue); color: white; 
	padding: 16px 48px; /* Reduced Height */
	border-radius: 99px; font-weight: 600; font-size: 1.1rem;
	transition: all 0.3s; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}
.detail-bottom-cta a:hover { background: #1d4ed8; transform: translateY(-2px) scale(1.02); }

/* --- [Image Slider Trigger] --- */
.img-comp-container { 
	position: relative; height: 400px; border-radius: 32px; overflow: hidden; 
	cursor: pointer; margin-top: 24px; 
	background: #f1f5f9; box-shadow: var(--card-shadow);
}
.img-comp-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 10; }
.img-comp-img.overlay { z-index: 20; width: 50%; }
.img-comp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.img-comp-overlay { 
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
	background: rgba(0,0,0,0.0); transition: background 0.3s; z-index: 30; 
	display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.img-comp-container:hover .img-comp-overlay { background: rgba(0,0,0,0.1); }

.slider-handle {
  position: absolute; z-index: 40; top: 50%; left: 50%; width: 48px; height: 48px; 
  background: var(--brand-blue); border: 3px solid white; border-radius: 50%;
  transform: translate(-50%, -50%); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); pointer-events: none; 
  display: flex; align-items: center; justify-content: center; color: white;
}
.slider-line { 
	position: absolute; z-index: 35; top: 0; bottom: 0; width: 2px; 
	background: white; left: 50%; pointer-events: none; 
	box-shadow: 0 0 10px rgba(0,0,0,0.2); 
}

/* --- [Comparison Popup] --- */
#comparisonPopup {
	display: none; position: fixed; inset: 0; z-index: 6000;
	background: rgba(2, 6, 23, 0.7); backdrop-filter: blur(16px);
	align-items: center; justify-content: center; 
	padding: 20px; opacity: 0; transition: opacity 0.3s ease;
}
#comparisonPopup.active { opacity: 1; }

.popup-content {
	background: #0F172A; width: 100%; max-width: 1000px; border-radius: 32px; overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative; border: 1px solid rgba(255,255,255,0.1);
}
#comparisonPopup.active .popup-content { transform: scale(1); }

.popup-close {
	position: absolute; top: 20px; right: 20px; z-index: 50;
	width: 44px; height: 44px; background: rgba(255,255,255,0.1); border-radius: 50%;
	color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;
}
.popup-close:hover { background: rgba(255,255,255,0.2); }

.popup-slider-container { position: relative; height: 500px; width: 100%; user-select: none; }
.ps-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.ps-before { background: #1e293b; width: 50%; border-right: 1px solid rgba(255,255,255,0.1); z-index: 2; }
.ps-after { background: linear-gradient(135deg, #2563eb 0%, #172554 100%); z-index: 1; display: flex; justify-content: flex-end; }

.ps-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: white; z-index: 10; cursor: ew-resize; display: flex; align-items: center; justify-content: center; }
.ps-handle-btn { width: 56px; height: 56px; background: white; border-radius: 50%; color: var(--brand-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.ps-inner { width: 100vw; max-width: 1000px; height: 100%; padding: 60px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.ps-before .ps-inner { width: 1000px; } 
.ps-after .ps-inner { width: 1000px; margin-left: auto; text-align: right; align-items: flex-end; }

#bottomFloatingCTA { position: fixed; bottom: -120px; left: 0; right: 0; z-index: 4500; transition: bottom 0.5s ease; padding: 16px; pointer-events: none; }
#bottomFloatingCTA.visible { bottom: 0; }
.cta-inner { 
	max-width: 1200px; margin: 0 auto; 
	background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px); 
	border-radius: 16px; 
	padding: 24px 48px; 
	display: flex; align-items: center; justify-content: space-between; 
	pointer-events: auto; 
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); 
	border: 1px solid rgba(255,255,255,0.1); 
}