/*
Theme Name: ColorMag Child Tamtam
Template: colormag
Description: Travel magazine child theme for Tamtam
Version: 1.4.0
Text Domain: colormag-child
*/

/* ===== 디자인 토큰 ===== */
:root {
	--tam-ink: #0f172a;
	--tam-body: #334155;
	--tam-muted: #64748b;
	--tam-line: #e2e8f0;
	--tam-bg-soft: #f8fafc;
	--tam-accent: #0ea5e9;
	--tam-accent-dark: #0369a1;
	--tam-accent-deep: #075985;
	--tam-coral: #f97362;
	--tam-radius: 14px;
	--tam-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
	--tam-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 36px -12px rgba(15, 23, 42, 0.26);
	/* 기존 변수 호환 */
	--tamtam-accent: var(--tam-accent-dark);
	--tamtam-accent-dark: var(--tam-accent-deep);
}

/* ===== 타이포그래피 ===== */
body,
button,
input,
select,
textarea,
.cm-entry-title,
.cm-widget-title,
.cm-primary-menu {
	font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif !important;
	letter-spacing: -0.01em;
}

body {
	color: var(--tam-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.cm-entry-title {
	color: var(--tam-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	word-break: keep-all;
	line-height: 1.35;
}

a {
	transition: color 0.15s ease, opacity 0.15s ease;
}

/* ===== 헤더 · 내비게이션 ===== */
.cm-header {
	box-shadow: 0 1px 0 var(--tam-line);
}

.cm-primary-menu > li > a {
	font-weight: 600;
	font-size: 15px;
}

.cm-primary-menu > li > a:hover,
.cm-primary-menu > li.current-menu-item > a {
	color: var(--tam-accent-dark) !important;
}

/* 사이트 제목 */
.cm-site-title a {
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* ===== 섹션(위젯) 타이틀 — 박스형 → 모던 언더라인 ===== */
.cm-widget-title {
	position: relative;
	margin-bottom: 22px;
	padding: 0 0 12px !important;
	background: none !important;
	border: 0 !important;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cm-widget-title span {
	background: none !important;
	color: var(--tam-ink) !important;
	padding: 0 !important;
}

.cm-widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tam-accent), var(--tam-coral));
}

/* ===== 카드 · 썸네일 ===== */
.cm-featured-posts img,
.cm-post img,
.cm-featured-image img,
article img.wp-post-image {
	border-radius: var(--tam-radius);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cm-featured-posts article:hover img,
article:hover img.wp-post-image {
	transform: translateY(-3px);
	box-shadow: var(--tam-shadow-hover);
}

.cm-entry-title a:hover {
	color: var(--tam-accent-dark) !important;
}

/* 카테고리 뱃지 모던화 */
.cm-post-categories a,
.cm-categories a {
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 12px !important;
}

/* ===== 본문 기사 ===== */
.cm-entry-content {
	font-size: 17px;
	line-height: 1.9;
	word-break: keep-all;
	color: var(--tam-body);
}

.cm-entry-content h2 {
	margin-top: 2.4em;
	padding: 0 0 0.4em;
	border-bottom: 0;
	font-size: 1.45em;
	position: relative;
}

.cm-entry-content h2::after {
	content: "";
	display: block;
	margin-top: 0.45em;
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tam-accent), var(--tam-coral));
}

.cm-entry-content h3 {
	margin-top: 1.9em;
	font-size: 1.18em;
	color: var(--tam-accent-deep);
}

.cm-entry-content ul li,
.cm-entry-content ol li {
	margin-bottom: 0.4em;
}

.cm-entry-content blockquote {
	border-left: 4px solid var(--tam-accent);
	background: var(--tam-bg-soft);
	border-radius: 0 var(--tam-radius) var(--tam-radius) 0;
	padding: 1em 1.4em;
	color: var(--tam-muted);
}

.cm-entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95em;
	border-radius: var(--tam-radius);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--tam-line);
}

.cm-entry-content table th {
	background: var(--tam-bg-soft);
	font-weight: 700;
	color: var(--tam-ink);
}

.cm-entry-content table th,
.cm-entry-content table td {
	padding: 10px 14px;
	border: 1px solid var(--tam-line);
}

/* ===== 어필리에이트 CTA 박스 ===== */
.tamtam-affiliate-box {
	margin: 2.2em 0;
	padding: 1.6em 1.8em;
	border: 1px solid #bae6fd;
	border-left: 0;
	border-radius: var(--tam-radius);
	background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
	box-shadow: var(--tam-shadow);
}

.tamtam-affiliate-box__label {
	display: inline-block;
	margin-bottom: 0.7em;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(14, 165, 233, 0.12);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tam-accent-deep);
}

.tamtam-affiliate-box__title {
	margin: 0 0 0.9em;
	font-size: 1.12em;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--tam-ink);
}

.tamtam-affiliate-box__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tamtam-affiliate-box__btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--tam-accent) 0%, var(--tam-accent-dark) 100%);
	color: #fff !important;
	font-size: 0.93em;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 4px 14px -6px rgba(2, 132, 199, 0.55);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tamtam-affiliate-box__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 8px 20px -6px rgba(2, 132, 199, 0.6);
}

.tamtam-affiliate-box__btn--klook {
	background: linear-gradient(135deg, #ff7452 0%, #f4511e 100%);
	box-shadow: 0 4px 14px -6px rgba(244, 81, 30, 0.55);
}

.tamtam-affiliate-box__btn--coupang {
	background: linear-gradient(135deg, #4f7cff 0%, #2f5ae0 100%);
	box-shadow: 0 4px 14px -6px rgba(47, 90, 224, 0.55);
}

.tamtam-disclosure {
	margin: 1.4em 0;
	padding: 0.75em 1.1em;
	background: var(--tam-bg-soft);
	border: 1px solid var(--tam-line);
	border-radius: 10px;
	font-size: 0.78em;
	color: var(--tam-muted);
}

/* ===== 언어 전환기 ===== */
.tamtam-lang-switcher > a {
	font-weight: 700;
}

.tamtam-lang-switcher .sub-menu a {
	font-size: 14px;
}

/* ===== 푸터 · 사업자 정보 ===== */
.tamtam-bizinfo {
	background: #0f172a;
	color: #94a3b8;
	padding: 26px 0;
	font-size: 13px;
	line-height: 1.8;
}

.tamtam-bizinfo__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.tamtam-bizinfo__brand {
	color: #e2e8f0;
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 4px;
	letter-spacing: -0.02em;
}

.tamtam-bizinfo span {
	white-space: nowrap;
}

.tamtam-bizinfo .sep {
	margin: 0 10px;
	color: #334155;
}