/* ==========================================================================
   MODULE: components/channel-links — 블로그·스레드 바로가기
   마크업: template-parts/components/channel-links.php
   쓰는 곳: 칼럼 목록 제목 옆('bar' — archive.php, index.php), 글 끝('box' — single.php)
   채널 데이터: inc/data/company.php wazuso_social_channels()

   목차
     1) 공통 버튼(점 · 채널 종류 · 채널 안 이름 · ↗)
     2) bar — 칼럼 목록 제목 오른쪽
     3) box — 글 끝
     4) 폰
   ========================================================================== */


/* ==========================================================================
   1) 공통 버튼
   로고 대신 앞의 점 색으로만 채널을 구분한다(네이버 초록 · 스레드 검정) — 상표를 그리지 않는다.
   ========================================================================== */

/* ul 을 붙이는 이유: base/reset.css 의 ul[class](0,1,1)가 클래스 하나를 이긴다 */
ul.wzs-channel-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wzs-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 'box' 는 글(.wzs-article) 안에 들어가 본문 목록 모양(앰버 점 ::before, 왼쪽 들여쓰기, li + li 간격,
   base/typography.css)을 그대로 받는다 — 실제로 버튼 앞에 점이 찍혔다. 명시도(0,2,2)로 되돌린다. */
.wzs-channel-links ul.wzs-channel-links-list > li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: normal;
}

.wzs-channel-links ul.wzs-channel-links-list > li::before {
	content: none;
}

/* .wzs-article a(본문 링크 밑줄·파랑)를 이기도록 a 를 붙여 명시도를 올린다 — 'box' 는 글 안에 들어간다 */
a.wzs-channel-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-sm);
	text-decoration: none;
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		background-color var(--wzs-duration-fast) var(--wzs-ease);
}

a.wzs-channel-link:hover {
	border-color: var(--wzs-ink-muted);
	background: var(--wzs-bg-alt);
}

a.wzs-channel-link:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

.wzs-channel-link-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wzs-ink-muted);
}

.wzs-channel-link--naver-blog .wzs-channel-link-dot {
	background: #03c75a;
}

.wzs-channel-link--threads .wzs-channel-link-dot {
	background: #101010;
}

.wzs-channel-link-kind {
	color: var(--wzs-ink-muted);
	font-weight: 600;
	white-space: nowrap;
}

.wzs-channel-link-name {
	font-weight: 700;
	white-space: nowrap;
}

.wzs-channel-link-out {
	color: var(--wzs-ink-muted);
}


/* ==========================================================================
   2) bar — 칼럼 목록 제목 오른쪽
   제목 줄(.wzs-magazine-archive-head, pages/magazine.css)이 양 끝으로 벌려 놓는다.
   ========================================================================== */

.wzs-channel-links--bar {
	flex: none;
}


/* ==========================================================================
   3) box — 글 끝(문의 CTA 다음, "다른 글 보기" 앞)
   CTA 가 어두운 판이라 여기는 밝은 판 + 가는 테두리로 무게를 낮춘다.
   ========================================================================== */

.wzs-channel-links--box {
	margin-top: var(--wzs-space-5);
	padding: var(--wzs-space-4);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-bg-alt);
}

/* .wzs-article p 의 본문 여백·크기를 받지 않도록 되돌린다 */
.wzs-channel-links--box .wzs-channel-links-title {
	margin: 0;
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-base);
	font-weight: 700;
}

.wzs-channel-links--box .wzs-channel-links-desc {
	margin: 4px 0 var(--wzs-space-3);
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	line-height: 1.6;
}


/* ==========================================================================
   4) 폰
   bar: 제목 아래 한 줄로 내려오므로 채널 종류(네이버 블로그 · 스레드)만 남겨 한 줄에 둔다.
   box: 버튼을 한 줄씩 꽉 채우고, 두 버튼 모두 "위 작은 글씨 = 채널 종류 / 아래 = 채널 안 이름"
        두 줄로 맞춘다. 한 줄로 두면 블로그 제목만 넘쳐 접히고 스레드는 안 접혀 둘이 어긋났다.
   ========================================================================== */

@media (max-width: 640px) {
	.wzs-channel-links--bar .wzs-channel-link-name {
		display: none;
	}

	.wzs-channel-links--box ul.wzs-channel-links-list {
		flex-direction: column;
	}

	.wzs-channel-links--box a.wzs-channel-link {
		display: grid;
		grid-template-columns: 8px 1fr auto;
		grid-template-areas:
			"dot kind out"
			"dot name out";
		column-gap: 12px;
		padding: 10px 18px;
		border-radius: var(--wzs-radius-md);
	}

	.wzs-channel-links--box .wzs-channel-link-dot {
		grid-area: dot;
		align-self: center;
	}

	.wzs-channel-links--box .wzs-channel-link-kind {
		grid-area: kind;
		font-size: 12px;
	}

	.wzs-channel-links--box .wzs-channel-link-name {
		grid-area: name;
		white-space: normal;
	}

	.wzs-channel-links--box .wzs-channel-link-out {
		grid-area: out;
		align-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.wzs-channel-link {
		transition: none;
	}
}