/*
 * 글 화면 보조 — 공유 줄 · 읽기 진행률 · 맨 위로.
 *
 * ⚠ 색·간격·모서리를 여기서 정하지 않는다. 전부 --wd-* 토큰을 잇는다.
 *   자기 색을 갖는 순간 사이트 색을 바꿔도 이 조각만 옛 색으로 남는다
 *   (플러그인 CSS 세 벌에서 이미 겪은 일이다).
 *
 * ⚠ 이 파일은 **글 화면에서만** 실린다. wp3-design.css 는 모든 페이지에
 *   실려 크기 한도가 턱밑이라, 글에서만 쓰는 것을 거기 넣지 않는다.
 */

/* ── 공유 줄 ──────────────────────────────────────────────────────────── */

.wd-share {
	margin: var(--wd-s-60) 0 0;
	padding-top: var(--wd-s-40);
	border-top: 1px solid var(--wd-border);
}

.wd-share-title {
	margin: 0 0 var(--wd-s-30);
	font-size: 1rem;
	color: var(--wd-muted);
}

.wd-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wd-s-20);
}

/*
 * <a> 와 <button> 이 한 줄에 섞인다. 기본 모양이 서로 달라서, 둘 다
 * 같은 규칙으로 눌러 준다. 그렇지 않으면 버튼만 글꼴이 다르게 나온다.
 */
.wd-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wd-touch);
	padding: 0 var(--wd-s-30);
	border: 1px solid var(--wd-border-strong);
	border-radius: var(--wd-r-pill);
	background: var(--wd-surface);
	color: var(--wd-text);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.wd-share-btn:hover,
.wd-share-btn:focus-visible {
	border-color: var(--wd-primary);
	color: var(--wd-primary);
}

/* 복사 완료. 색만으로 알리지 않는다 — 글자도 '복사했습니다' 로 바뀐다. */
.wd-share-btn.is-done {
	border-color: var(--wd-success);
	color: var(--wd-success);
}

.wd-share-note {
	margin: var(--wd-s-30) 0 0;
	font-size: 0.85rem;
	color: var(--wd-muted);
}

/* ── 읽기 진행률 ──────────────────────────────────────────────────────── */

.wd-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	/* 머리말 서랍보다 아래에 둔다. 메뉴를 펼쳤을 때 그 위를 덮으면 안 된다. */
	z-index: 40;
	background: transparent;
	pointer-events: none;
}

.wd-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--wd-primary);
}

/* ── 맨 위로 ──────────────────────────────────────────────────────────── */

.wd-totop {
	position: fixed;
	right: var(--wd-s-30);
	/* 휴대폰 아래쪽 손잡이 영역을 피한다. */
	bottom: calc(var(--wd-s-30) + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wd-touch);
	height: var(--wd-touch);
	border: 1px solid var(--wd-border-strong);
	border-radius: var(--wd-r-pill);
	background: var(--wd-surface);
	color: var(--wd-text);
	box-shadow: var(--wd-sh-md);
	font-size: 1.1rem;
	cursor: pointer;
}

.wd-totop[hidden] {
	display: none;
}

.wd-totop:hover,
.wd-totop:focus-visible {
	border-color: var(--wd-primary);
	color: var(--wd-primary);
}

/*
 * 인쇄할 때는 셋 다 뺀다. 종이에서 '맨 위로' 는 뜻이 없고, 공유 버튼은
 * 잉크만 쓴다.
 */
@media print {
	.wd-share,
	.wd-progress,
	.wd-totop {
		display: none !important;
	}
}