/* ===========================================================================
   이슈 해설(인디고) 강조색 토큰
   ---------------------------------------------------------------------------
   이 테마의 강조색을 하드코딩하면 다크모드에서 어두운 배경에 어두운 글자가 되어
   글자가 보이지 않습니다. (실측 대비 2.4~3.4:1)
   표면 위 '글자'로 쓰는 값과 '배경'으로 쓰는 값을 분리합니다.
   =========================================================================== */
:root {
	--tt-accent:      #4f46e5;   /* 배경용 (흰 글자와 조합) */
	--tt-accent-text: #4f46e5;   /* 밝은 표면 위 글자 */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--tt-accent-text: #a5b4fc;
	}
}

:root[data-theme="dark"] {
	--tt-accent-text: #a5b4fc;
}

@keyframes fadeInUp {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	/* b.php와 동일한 기본 스타일 (GNB 보호) */
	body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; margin: 0; padding: 0; background: var(--tt-ink-100); color: var(--tt-ink-900); line-height: 1.55; }
	header { padding: 15px; }
	h1 { font-size: 22px; font-weight: 700; margin: 0; padding: 0; }

	/* b1 콘텐츠 영역만 스코프된 리셋 */
	.b1-wrapper, .b1-wrapper *, .b1-wrapper *::before, .b1-wrapper *::after { box-sizing: border-box; }
	.b1-wrapper { 
		font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; 
		color: var(--tt-ink-900); 
		line-height: 1.7; 
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.b1-wrapper { 
		max-width: 728px; 
		margin: 0 auto; 
		padding: 0 0 48px 0; 
		min-height: 100vh; 
		background: var(--tt-surface);
		box-shadow: 0 0 40px rgba(0,0,0,0.04);
	}

	/* ===== 히어로 ===== */
	.hero {
		padding: 40px 24px 32px;
		border-bottom: 1px solid #eef0f4;
		background: var(--tt-surface);
		animation: fadeIn 0.5s ease;
	}
	.hero-breadcrumb {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		color: var(--tt-ink-500);
		margin-bottom: 16px;
	}
	.hero-breadcrumb a {
		color: var(--tt-ink-500);
		text-decoration: none;
		transition: color 0.2s;
	}
	.hero-breadcrumb a:hover { color: var(--tt-accent-text); }
	.hero-breadcrumb .sep { color: #d1d5db; }

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		background: var(--tt-blue-50);
		color: var(--tt-blue-text);
		font-size: 12px;
		font-weight: 700;
		padding: 5px 12px;
		border-radius: 6px;
		margin-bottom: 14px;
		letter-spacing: 0.3px;
	}
	.hero-title {
		font-size: 26px;
		font-weight: 900;
		color: var(--tt-ink-900);
		line-height: 1.4;
		margin-bottom: 14px;
		animation: fadeInUp 0.5s ease;
		word-break: keep-all;
	}
	.hero-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 14px;
		font-size: 13px;
		color: var(--tt-ink-500);
		animation: fadeInUp 0.6s ease;
	}
	.hero-meta-item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}
	.hero-meta-divider {
		width: 1px;
		height: 12px;
		background: var(--tt-ink-100);
	}

	/* ===== 콘텐츠 ===== */
	.content-area {
		padding: 0 20px;
	}

	/* ===== 광고 공통 ===== */
	.ad-unit {
		margin: 28px 0 !important;
		text-align: center !important;
		min-height: 280px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	.ad-unit .ad-label {
		display: block;
		font-size: 11px;
		color: var(--tt-ink-500);
		text-align: center;
		margin-bottom: 6px;
		letter-spacing: 0.3px;
	}

	/* ===== 요약 박스 (GEO: 핵심 요약) ===== */
	.summary-box {
		background: var(--tt-blue-50);
		border: 1px solid #e0e7ff;
		border-left: 4px solid #6366f1;
		border-radius: 0 12px 12px 0;
		padding: 20px 22px;
		margin: 28px 0;
		animation: fadeInUp 0.5s ease;
	}
	.summary-box-label {
		font-size: 12px;
		font-weight: 700;
		color: var(--tt-accent-text);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 8px;
	}
	.summary-box-text {
		font-size: 15px;
		line-height: 1.7;
		color: var(--tt-ink-700);
		word-break: keep-all;
	}

	/* ===== 해설 본문 ===== */
	.analysis-section {
		margin: 28px 0;
		animation: fadeInUp 0.6s ease;
	}
	.section-heading {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 18px;
		font-weight: 700;
		color: var(--tt-ink-900);
		margin-bottom: 20px;
		padding-bottom: 12px;
		border-bottom: 2px solid #f3f4f6;
	}
	.section-heading-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		background: linear-gradient(135deg, #6366f1, #818cf8);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		flex-shrink: 0;
	}
	.analysis-paragraph {
		font-size: 16px;
		line-height: 1.95;
		color: var(--tt-ink-700);
		margin-bottom: 18px;
		word-break: keep-all;
		text-align: justify;
	}
	.analysis-paragraph:last-child {
		margin-bottom: 0;
	}
	.analysis-subheading {
		font-size: 18px;
		font-weight: 700;
		color: var(--tt-ink-900);
		margin: 28px 0 12px 0;
		line-height: 1.4;
		border-left: 3px solid #6366f1;
		padding-left: 8px;
	}
	.analysis-paragraph strong {
		color: var(--tt-ink-900);
		font-weight: 700;
		background: linear-gradient(to top, rgba(99, 102, 241, 0.15) 40%, transparent 40%);
		padding: 0 2px;
	}

	/* ===== 찬반 쟁점 ===== */
	.opinion-section {
		margin: 32px 0;
		animation: fadeInUp 0.7s ease;
	}
	.opinion-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	@media (max-width: 768px) {
		.opinion-grid { grid-template-columns: 1fr; }
	}
	.opinion-card {
		border-radius: 14px;
		padding: 22px 18px;
		position: relative;
		overflow: hidden;
		transition: transform 0.2s, box-shadow 0.2s;
		min-width: 0; /* grid item overflow 방지 */
	}
	.opinion-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	}
	.opinion-card::before {
		content: '';
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 3px;
	}
	.opinion-card.pros {
		background: var(--tt-ok-bg);
		border: 1px solid #bbf7d0;
	}
	.opinion-card.pros::before {
		background: linear-gradient(90deg, #22c55e, #16a34a);
	}
	.opinion-card.cons {
		background: var(--tt-err-bg);
		border: 1px solid #fecaca;
	}
	.opinion-card.cons::before {
		background: linear-gradient(90deg, #ef4444, #dc2626);
	}
	.opinion-card-header {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 14px;
		display: flex;
		align-items: center;
		flex-wrap: wrap; /* 긴 제목 줄바꿈 허용 */
		gap: 6px;
	}
	.opinion-card.pros .opinion-card-header { color: var(--tt-ok); }
	.opinion-card.cons .opinion-card-header { color: var(--tt-err); }
	.opinion-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.opinion-list li {
		font-size: 14px;
		line-height: 1.7;
		color: var(--tt-ink-700);
		padding: 8px 0 8px 20px;
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,0.04);
	}
	.opinion-list li:last-child { border-bottom: none; }
	.opinion-list li::before {
		content: '';
		position: absolute;
		left: 0; top: 17px;
		width: 6px; height: 6px;
		border-radius: 50%;
	}
	.opinion-card.pros .opinion-list li::before { background: #22c55e; }
	.opinion-card.cons .opinion-list li::before { background: #ef4444; }

	/* ===== 투표 ===== */
	.poll-container {
		background: var(--tt-ink-100);
		border: 1px solid var(--tt-ink-300);
		border-radius: 16px;
		padding: 24px 22px;
		margin: 28px 0;
		animation: fadeInUp 0.8s ease;
	}
	.poll-question {
		font-size: 16px;
		font-weight: 700;
		color: var(--tt-ink-900);
		margin: 0 0 16px 0;
		line-height: 1.5;
		text-align: center;
	}
	.poll-options {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.poll-option-btn {
		width: 100%;
		padding: 13px 16px;
		background: var(--tt-surface);
		border: 1px solid var(--tt-ink-300);
		border-radius: 10px;
		font-size: 14px;
		font-weight: 500;
		color: var(--tt-ink-700);
		cursor: pointer;
		text-align: center;
		transition: all 0.2s ease;
		font-family: inherit;
	}
	@media (hover: hover) {
		.poll-option-btn:hover {
			background: var(--tt-blue-50);
			border-color: var(--tt-accent-text);
			color: var(--tt-accent-text);
			transform: translateY(-1px);
			box-shadow: 0 4px 12px rgba(99,102,241,0.1);
		}
	}
	.poll-result-bar {
		width: 100%;
		background: var(--tt-ink-100);
		border-radius: 10px;
		font-size: 14px;
		position: relative;
		overflow: hidden;
		height: 44px;
		border: 1px solid var(--tt-ink-300);
	}
	.poll-result-fill {
		background: linear-gradient(90deg, #6366f1, #818cf8);
		height: 100%;
		position: absolute;
		left: 0; top: 0;
		border-radius: 10px 0 0 10px;
		transition: width 0.6s ease-out;
	}
	.poll-result-bar.is-voted .poll-result-fill {
		background: linear-gradient(90deg, #22c55e, #16a34a);
	}
	.poll-result-text {
		position: absolute;
		left: 14px; top: 50%;
		transform: translateY(-50%);
		color: var(--tt-ink-900);
		font-weight: 500;
		z-index: 2;
		font-size: 13px;
		white-space: nowrap;
	}
	.poll-result-percent {
		position: absolute;
		right: 14px; top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		font-weight: 700;
		color: var(--tt-accent-text);
		z-index: 2;
	}
	.poll-total-votes {
		text-align: center;
		font-size: 13px;
		color: var(--tt-ink-500);
		margin-top: 12px;
	}
	.poll-footer {
		margin-top: 14px;
		text-align: center;
	}
	.btn-poll-archive {
		font-size: 13px;
		font-weight: 700;
		color: var(--tt-accent-text);
		text-decoration: none;
		padding: 8px 14px;
		border-radius: 8px;
		transition: background-color 0.2s;
	}
	.btn-poll-archive:hover {
		background-color: var(--tt-blue-50);
	}
	.poll-notice {
		text-align: center;
		font-size: 13px;
		color: var(--tt-ink-500);
		margin-top: 12px;
	}

	/* ===== 원문 참조 (종) ===== */
	.source-ref {
		display: flex;
		align-items: center;
		gap: 14px;
		background: var(--tt-ink-100);
		border: 1px solid var(--tt-ink-300);
		border-radius: 12px;
		padding: 16px 18px;
		margin: 28px 0;
		text-decoration: none;
		transition: all 0.2s ease;
		animation: fadeInUp 0.8s ease;
	}
	.source-ref:hover {
		background: var(--tt-ink-100);
		border-color: var(--tt-ink-300);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.04);
	}
	.source-ref-icon {
		width: 42px; height: 42px;
		border-radius: 10px;
		background: var(--tt-blue-50);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		flex-shrink: 0;
	}
	.source-ref-body { flex: 1; min-width: 0; }
	.source-ref-label {
		font-size: 11px;
		font-weight: 700;
		color: var(--tt-ink-500);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 2px;
	}
	.source-ref-title {
		font-size: 14px;
		color: var(--tt-accent-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
		font-weight: 500;
	}
	.source-ref-domain {
		font-size: 11px;
		color: var(--tt-ink-500);
		margin-top: 2px;
	}
	.source-ref-arrow {
		font-size: 20px;
		color: #d1d5db;
		flex-shrink: 0;
		transition: all 0.2s;
	}
	.source-ref:hover .source-ref-arrow {
		transform: translateX(3px);
		color: var(--tt-accent-text);
	}

	/* ===== 액션 버튼 ===== */
	.action-row {
		display: flex;
		gap: 10px;
		margin: 28px 0;
	}
	.share-btn {
		flex: 1;
		background: linear-gradient(135deg, #4f46e5, #6366f1);
		color: #fff;
		padding: 14px;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		border: none;
		cursor: pointer;
		transition: all 0.2s ease;
		font-family: inherit;
	}
	.share-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(79,70,229,0.25);
	}
	.share-btn:active {
		transform: translateY(0);
	}
	.share-btn.copy-fallback {
		background: linear-gradient(135deg, #6b7280, #9ca3af);
	}

	/* ===== 텔레그램 CTA ===== */
	.telegram-cta {
		background: var(--tt-blue-50);
		border: 1px solid #bae6fd;
		border-radius: 16px;
		padding: 24px 22px;
		text-align: center;
		margin: 28px 0;
		animation: fadeInUp 0.9s ease;
	}
	.telegram-cta p {
		font-size: 15px;
		color: var(--tt-ink-700);
		margin-bottom: 14px;
		line-height: 1.6;
		margin-top: 0;
	}
	.telegram-cta p strong {
		color: var(--tt-blue-text);
		font-weight: 700;
	}
	.telegram-btn {
		background: linear-gradient(135deg, #0369a1, #025a87);
		color: #fff;
		padding: 14px;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		text-align: center;
		display: block;
		transition: all 0.2s ease;
		font-family: inherit;
	}
	.telegram-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(2,132,199,0.2);
	}

	/* ===== 관련 콘텐츠 ===== */
	.related-section {
		margin: 36px 0 0;
		animation: fadeInUp 1s ease;
	}
	.related-item {
		display: flex;
		align-items: center;
		padding: 14px 0;
		text-decoration: none;
		border-bottom: 1px solid #f3f4f6;
		transition: all 0.2s ease;
	}
	.related-item:last-child { border-bottom: none; }
	.related-item:hover { padding-left: 8px; }
	.related-item-number {
		width: 28px; height: 28px;
		border-radius: 8px;
		background: var(--tt-ink-100);
		color: var(--tt-accent-text);
		font-size: 12px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14px;
		flex-shrink: 0;
		transition: all 0.2s;
		flex: 0 0 auto !important;
	}
	.related-item:hover .related-item-number {
		background: var(--tt-blue-50);
		color: var(--tt-accent-text);
	}
	.related-item-title {
		flex: 1;
		font-size: 14px;
		color: var(--tt-ink-700);
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		transition: color 0.2s;
	}
	.related-item:hover .related-item-title {
		color: var(--tt-accent-text);
	}

	/* ===== GNB 오버라이드 ===== */
	.b-gnb-container {
		position: relative;
		z-index: 10;
	}

/* ===== Mobile Responsive Image & Layout Overflow Fix v2.0 ===== */
html, body {
	max-width: 100% !important;
	width: 100% !important;
	overflow-x: hidden !important;
}

*, *::before, *::after {
	box-sizing: border-box;
}

img, video, iframe, embed, object, picture, figure, canvas, svg {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
}

figure {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

.b1-wrapper, .container, .content-area, .hero, .analysis-card, 
.threads-post, .related-section, .related-card-list, .content-header-container {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.main-image, .content-header-container img, .analysis-card img, 
.threads-body img, .hero img, .article-body img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.hero {
		padding: 24px 16px 20px !important;
		max-width: 100% !important;
	}
	.content-area, .b1-wrapper {
		padding-left: 12px !important;
		padding-right: 12px !important;
		max-width: 100% !important;
	}
	.hero-title {
		font-size: 20px !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
}

	/* ===== 반응형 ===== */
	@media (max-width: 768px) {
		.hero { padding: 32px 18px 24px; }
		.hero-title { font-size: 22px; }
		.content-area { padding: 0 16px; }
		.b1-wrapper { box-shadow: none; }
		.related-item-number {
			width: 24px;
			height: 24px;
			font-size: 11px;
			margin-right: 10px;
			border-radius: 6px;
		}
	}

/* ===== Desktop PC (width > 768px): Centered Layout with Margins ===== */
@media (min-width: 769px) {
	.e1-wrapper, .b1-wrapper, .container, .content-area, .hero, .content-header-container, .analysis-section {
		max-width: 860px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box !important;
	}
}

/* ===== Mobile Pros & Cons Containment Fix ===== */
.opinion-section, .opinion-grid, .opinion-card, .opinion-list, .opinion-list li {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
	.opinion-grid {
		grid-template-columns: 1fr !important;
		width: 100% !important;
		gap: 12px !important;
	}
	.opinion-card {
		padding: 16px 14px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ===== Google Auto Ads Exclusion Protection ===== */
.summary-box, .summary-box *, .google-auto-ads-no-ad, .google-auto-ads-no-ad * {
	google-auto-ads: ignore !important;
}