/* ==========================================================================
   [DOWNLOAD] · [HISTORY] 모양 (inc/download.php · inc/history.php)
   글 화면에서 두 숏코드가 있을 때만 불러온다.
   색은 테마 변수(v2: --color-primary 등)를 쓰고, 없으면 기본값.
   ========================================================================== */

/* ---- 다운로드 버튼 ---- */
.kh-download-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
/* 크기는 v2 앱 페이지의 다운로드 버튼(.btn)과 같다 — 높이 2.5rem · 글자 12.8px · 보통 굵기 */
.kh-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--radius-field, 0.25rem);
	background: var(--color-primary, #0088cc);
	color: var(--color-primary-content, #fff) !important;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
}
.kh-btn:hover { filter: brightness(1.1); }

/* nosetup — 버튼 + 오른쪽 ▾ 로 설치/무설치 고르기 */
.kh-split { position: relative; display: inline-flex; }
.kh-split > .kh-btn { border-start-end-radius: 0; border-end-end-radius: 0; }
.kh-split-menu > summary {
	padding-inline: 0.75rem;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-left: 1px solid rgb(255 255 255 / 0.35);
	list-style: none;
}
.kh-split-menu > summary::-webkit-details-marker { display: none; }
.kh-split-menu > summary::after { content: "▾"; }
.kh-split-menu > ul {
	position: absolute;
	top: calc(100% + 0.25rem);
	right: 0;
	z-index: 10;
	min-width: 10rem;
	margin: 0 !important;
	padding: 0.375rem 0 !important;
	border: 1px solid var(--color-base-300, #ddd);
	border-radius: var(--radius-box, 0.25rem);
	background: var(--color-base-100, #fff);
	box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.25);
	list-style: none !important;
}
.kh-split-menu > ul li { margin: 0 !important; }
.kh-split-menu > ul a {
	display: block;
	padding: 0.375rem 1rem;
	color: var(--color-base-content, #222) !important;
	text-decoration: none !important;
}
.kh-split-menu > ul a:hover { background: var(--color-base-200, #f5f5f5); }

/* ---- 업데이트 · 히스토리 — 전용 모양 없음, 본문 목록(.wp-block-list)과 같다 (2026-09-26) ---- */

/* 최신 판 — 첫 줄: 배지 · 문장 · 안내 (옛 사이트의 .text-update, 2026-09-26 이모지 대신) */
.entry-content .kh-lead { text-align: center; margin: 0 0 2.25rem; word-break: keep-all; text-wrap: balance; }
.kh-lead-badge {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .2em .75em; border-radius: 999px;
	font-size: .75rem; font-weight: 600; letter-spacing: .06em; line-height: 1.6;
	color: var(--color-primary);
	background: color-mix(in oklab, var(--color-primary) 12%, transparent);
	border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.kh-lead-badge > span { opacity: .6; }
.entry-content .kh-lead-title { display: block; margin-top: .6rem; font-size: 1.15rem; font-weight: 700; color: var(--color-base-content, #222529); }
.kh-lead-badge + .kh-lead-title { margin-top: .6rem; }
.kh-lead > .kh-lead-title:first-child { margin-top: 0; }
.kh-lead-note { display: block; margin-top: .25rem; font-size: .9rem; opacity: .65; }

/* 옛 판 — 새 글 안내 */
.kh-notice {
	margin: 0 0 1.5rem;
	padding: 0.625rem 1rem;
	border: 1px solid #f1aeb5;
	border-radius: var(--radius-box, 0.25rem);
	background: #f8d7da;
	color: #58151c;
	text-align: center;
}
.kh-notice a { color: inherit !important; font-weight: 700; }
html[data-theme="kilho-dark"] .kh-notice { border-color: #842029; background: #2c0b0e; color: #ea868f; }

/* ---- 앱 스토어 ([APPSTORE]) · 다운로드 카드 ([DOWNLOAD], 2026-10-18) — 아이콘 + 이름 + (괄호 글자), 가로로 가운데 ---- */
.kh-appstore { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.5rem 0; }
.kh-store {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 9rem;
	padding: 1.25rem 0.75rem 1rem;
	border: 1px solid var(--color-base-300, #ddd);
	border-radius: var(--radius-box, 0.25rem);
	background: var(--color-base-100, #fff);
	color: var(--color-body, #777) !important;
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
}
.kh-store:hover { border-color: var(--color-primary, #0088cc); }
.kh-store img { width: 64px; height: 64px; object-fit: contain; }
.kh-store svg { flex: none; width: 64px; height: 64px; }   /* 소스보기(GitHub) 아이콘 */
.kh-store strong { color: var(--color-base-content, #222); font-size: 0.9rem; }

/* 윈도우 카드 — 카드 전체가 기본판 링크(::after 가 덮는다), 이름 옆 ▾ 만 그 위로 올라와 오른쪽 메뉴에서 설치·무설치를 고른다 */
/* 카드 폭은 <a>·<div> 모두 같게 고정 — 줄어들거나 글자에 밀려 늘지 않게 */
.kh-appstore > .kh-store { box-sizing: border-box; flex: 0 0 9rem; width: 9rem; max-width: 9rem; }
div.kh-store { position: relative; }
.kh-store a { text-decoration: none !important; }
.kh-store-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* ▾ 는 이름 오른쪽에 띄운다 — 글자 흐름에 넣으면 이름이 ▾ 폭만큼 왼쪽으로 쏠린다(다른 카드와 가운데가 어긋남) */
.kh-store-name { position: relative; display: inline-block; }
.kh-store-menu { position: absolute; top: 0; bottom: 0; left: 100%; display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.kh-store-menu > summary { position: relative; z-index: 1; height: 100%; display: flex !important; align-items: center; margin: 0 !important; padding-inline: 0.25rem; list-style: none; cursor: pointer; color: var(--color-base-content, #222); }
.kh-store-menu > summary::-webkit-details-marker { display: none; }
.kh-store-menu > summary::after { content: "▾"; }
.kh-store-menu > ul {
	position: absolute;
	z-index: 2;
	top: -0.375rem;
	left: calc(100% + 0.25rem);   /* ▾ 바로 오른쪽 (2026-10-18, 카드 아래는 너무 멀었다) */
	margin: 0 !important;
	padding: 0.25rem 0 !important;
	list-style: none !important;
	border: 1px solid var(--color-base-300, #ddd);
	border-radius: var(--radius-box, 0.25rem);
	background: var(--color-base-100, #fff);
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
	text-align: left;
	white-space: nowrap;
}
.kh-store-menu > ul li { margin: 0 !important; }
.kh-store-menu > ul a { display: block; padding: 0.375rem 1rem; color: var(--color-base-content, #222) !important; }
.kh-store-menu > ul a:hover { background: var(--color-base-200, #f5f5f5); }
