/* ==========================================================================
   YKC Clinical — 主樣式
   1. 變數與基礎   2. 版面與頁首頁尾   3. 按鈕與標籤   4. 文章卡片
   5. 單篇文章     6. 留言與表單       7. 短代碼        8. Elementor 輔助 class
   ========================================================================== */

/* 1. 變數與基礎 ---------------------------------------------------------- */
:root {
	--ykc-accent: #0B6E6E;
	--ykc-accent-dark: #074F4F;
	--ykc-accent-soft: #E3F1F0;
	--ykc-ink: #0E1A2B;
	--ykc-ink-2: #2D3A4D;
	--ykc-muted: #4A5568;
	--ykc-faint: #5B6576;
	--ykc-line: #E2E6EC;
	--ykc-line-2: #EEF1F5;
	--ykc-bg: #F5F7FA;
	--ykc-surface: #FFFFFF;
	--ykc-teal-bg: #DCEFEE;  --ykc-teal-ink: #1F4E4C;  --ykc-teal: #0B6E6E;
	--ykc-blue-bg: #DDE6F4;  --ykc-blue-ink: #1D3F70;  --ykc-blue: #23508F;
	--ykc-amber-bg: #F4E9D8; --ykc-amber-ink: #6E480E; --ykc-amber: #8A5A12;
	--ykc-gray-bg: #E6E9EE;  --ykc-gray-ink: #3A4658;  --ykc-gray: #3A4658;
	--ykc-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
	--ykc-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--ykc-radius: 14px;
	--ykc-max: 1200px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ykc-bg);
	color: var(--ykc-ink);
	font-family: var(--ykc-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--ykc-accent); text-underline-offset: 3px; }
a:hover { color: var(--ykc-accent-dark); }
:focus-visible { outline: 3px solid var(--ykc-accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
	z-index: 1000; padding: 12px 18px; background: var(--ykc-ink); color: #fff; border-radius: 8px;
}

.ykc-icon { flex: none; vertical-align: middle; }
.ykc-eyebrow {
	margin: 0 0 10px; font-family: var(--ykc-mono); font-size: 13px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ykc-faint);
}

/* 2. 版面與頁首頁尾 ------------------------------------------------------- */
.ykc-wrap { max-width: var(--ykc-max); margin: 0 auto; padding: 0 24px; }
.ykc-wrap--read { max-width: 808px; }
.ykc-wrap--list { padding-bottom: 80px; }

.ykc-header { position: sticky; top: 0; z-index: 50; background: var(--ykc-surface); border-bottom: 1px solid var(--ykc-line); }
.admin-bar .ykc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ykc-header { top: 0; position: relative; } }

.ykc-header__inner {
	max-width: var(--ykc-max); margin: 0 auto; padding: 10px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px;
}
.ykc-brand { display: flex; align-items: center; gap: 12px; color: var(--ykc-ink); text-decoration: none; }
.ykc-brand:hover { color: var(--ykc-ink); }
.ykc-brand__mark, .ykc-brand__logo {
	width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover;
}
.ykc-brand__mark {
	display: flex; align-items: center; justify-content: center; background: var(--ykc-accent);
	color: #fff; font-family: var(--ykc-mono); font-weight: 500; font-size: 15px;
}
.ykc-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.ykc-brand__name { font-weight: 700; font-size: 17px; }
.ykc-brand__en { font-family: var(--ykc-mono); font-size: 12px; letter-spacing: .08em; color: var(--ykc-faint); text-transform: uppercase; }

.ykc-nav { display: flex; align-items: center; gap: 8px; }
.ykc-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ykc-menu li { position: relative; }
.ykc-menu a {
	display: block; padding: 11px 14px; border-radius: 8px; color: var(--ykc-ink-2);
	text-decoration: none; font-size: 15px;
}
.ykc-menu a:hover { background: var(--ykc-bg); color: var(--ykc-ink); }
.ykc-menu .current-menu-item > a, .ykc-menu .current_page_item > a, .ykc-menu .current-menu-ancestor > a {
	background: var(--ykc-accent-soft); color: var(--ykc-accent); font-weight: 500;
}
.ykc-menu .sub-menu {
	list-style: none; margin: 0; padding: 6px; position: absolute; top: 100%; left: 0; min-width: 200px;
	background: var(--ykc-surface); border: 1px solid var(--ykc-line); border-radius: 12px;
	box-shadow: 0 12px 32px rgba(14, 26, 43, .1); display: none;
}
.ykc-menu li:hover > .sub-menu, .ykc-menu li:focus-within > .sub-menu { display: block; }

.ykc-nav__tools { display: flex; align-items: center; gap: 8px; padding-left: 8px; border-left: 1px solid var(--ykc-line); }
.ykc-iconbtn, .ykc-navtoggle {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 8px; background: transparent; color: var(--ykc-ink-2); cursor: pointer;
}
.ykc-iconbtn:hover, .ykc-navtoggle:hover { background: var(--ykc-bg); }
.ykc-lang { display: flex; border: 1px solid #D5DBE3; border-radius: 8px; overflow: hidden; }
.ykc-lang a {
	min-width: 44px; padding: 9px 10px; text-align: center; font-family: var(--ykc-mono); font-size: 13px;
	color: var(--ykc-ink-2); text-decoration: none;
}
.ykc-lang a.is-current { background: var(--ykc-ink); color: #fff; }

.ykc-navtoggle { display: none; }
.ykc-navtoggle__close { display: none; }

.ykc-search { border-top: 1px solid var(--ykc-line); background: var(--ykc-surface); }
.ykc-search__inner { max-width: 720px; margin: 0 auto; padding: 16px 24px; }

@media (max-width: 960px) {
	.ykc-navtoggle { display: inline-flex; }
	.ykc-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 20px;
		background: var(--ykc-surface); border-bottom: 1px solid var(--ykc-line);
		box-shadow: 0 16px 32px rgba(14, 26, 43, .08);
	}
	.ykc-header { position: relative; }
	.ykc-header.is-open .ykc-nav { display: flex; }
	.ykc-header.is-open .ykc-navtoggle__open { display: none; }
	.ykc-header.is-open .ykc-navtoggle__close { display: inline; }
	.ykc-menu { flex-direction: column; }
	.ykc-menu a { padding: 12px; }
	.ykc-menu .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 12px; }
	.ykc-nav__tools { border-left: 0; padding: 8px 0 0; border-top: 1px solid var(--ykc-line); }
}

.ykc-main { display: block; min-height: 50vh; }

.ykc-pagehead { padding: 64px 0 32px; }
.ykc-pagehead__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; margin: 0; }
.ykc-pagehead__desc { margin-top: 12px; color: var(--ykc-ink-2); font-size: 18px; max-width: 44em; }
.ykc-pagehead__desc p { margin: 0; }
.ykc-pagehead__search { margin-top: 20px; max-width: 560px; }
.ykc-pagehead .ykc-chips { margin-top: 28px; }

.ykc-footer { background: var(--ykc-surface); border-top: 1px solid var(--ykc-line); }
.ykc-footer__inner {
	max-width: var(--ykc-max); margin: 0 auto; padding: 32px 24px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
	font-size: 14px; color: var(--ykc-muted);
}
.ykc-footer__id { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ykc-footer__name { color: var(--ykc-ink); font-weight: 500; }
.ykc-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ykc-footer__menu a { display: inline-block; padding: 8px 0; }

.ykc-404 { padding: 96px 24px; max-width: 640px; }
.ykc-404 .ykc-searchform { margin: 24px 0; }

/* 3. 按鈕與標籤 ----------------------------------------------------------- */
.ykc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
	font: inherit; font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.ykc-btn--primary { background: var(--ykc-accent); color: #fff; }
.ykc-btn--primary:hover { background: var(--ykc-accent-dark); color: #fff; }
.ykc-btn--ghost { background: var(--ykc-surface); color: var(--ykc-ink); border-color: #C9D1DC; }
.ykc-btn--ghost:hover { border-color: var(--ykc-ink); color: var(--ykc-ink); }
.ykc-btn--block { display: flex; width: 100%; }

.ykc-textlink { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 500; text-decoration: none; }

.ykc-pill {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--ykc-mono);
	font-size: 12px; line-height: 1.6; text-decoration: none;
}
.ykc-tone-teal { background: var(--ykc-teal-bg); color: var(--ykc-teal-ink); }
.ykc-tone-blue { background: var(--ykc-blue-bg); color: var(--ykc-blue-ink); }
.ykc-tone-amber { background: var(--ykc-amber-bg); color: var(--ykc-amber-ink); }
.ykc-tone-gray { background: var(--ykc-gray-bg); color: var(--ykc-gray-ink); }
a.ykc-pill:hover { filter: brightness(.96); }

.ykc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ykc-chips a, .ykc-filter button {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px;
	border: 1px solid #C9D1DC; background: var(--ykc-surface); color: var(--ykc-ink-2);
	font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.ykc-chips a:hover, .ykc-filter button:hover { border-color: var(--ykc-ink); color: var(--ykc-ink); }
.ykc-chips a[aria-current], .ykc-filter button[aria-pressed="true"] { background: var(--ykc-ink); border-color: var(--ykc-ink); color: #fff; }
.ykc-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.ykc-filter-item.is-hidden { display: none !important; }

/* 4. 文章卡片 ------------------------------------------------------------- */
.ykc-posts .ykc-chips { margin-bottom: 24px; }
.ykc-post {
	display: flex; flex-direction: column; background: var(--ykc-surface); border: 1px solid var(--ykc-line);
	border-radius: var(--ykc-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.ykc-post:hover { border-color: #C9D1DC; box-shadow: 0 8px 24px rgba(14, 26, 43, .06); }
.ykc-post__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.ykc-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ykc-post__noimg {
	display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
	font-family: var(--ykc-mono); font-size: 13px; letter-spacing: .06em;
}
.ykc-post__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ykc-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--ykc-mono); font-size: 12px; color: var(--ykc-faint); }
.ykc-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.ykc-post__title { margin: 0; font-size: 18px; line-height: 1.45; }
.ykc-post__title a { color: var(--ykc-ink); text-decoration: none; }
.ykc-post__title a:hover { color: var(--ykc-accent); }
.ykc-post__title a::after { content: ""; position: absolute; inset: 0; }
.ykc-post { position: relative; }
.ykc-post .ykc-pill, .ykc-post .ykc-textlink { position: relative; z-index: 1; }
.ykc-post__excerpt { margin: 0; font-size: 14px; color: var(--ykc-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ykc-post--featured { flex-direction: row; flex-wrap: wrap; margin-bottom: 24px; }
.ykc-post--featured .ykc-post__media { flex: 1 1 460px; aspect-ratio: auto; min-height: 300px; }
.ykc-post--featured .ykc-post__body { flex: 1 1 400px; min-width: 0; padding: 32px; gap: 14px; }
.ykc-post--featured .ykc-post__title { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.35; }
.ykc-post--featured .ykc-post__excerpt { font-size: 16px; -webkit-line-clamp: 4; }
.ykc-post--featured .ykc-textlink { margin-top: auto; align-self: flex-start; }

.ykc-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.ykc-posts__more { margin: 32px 0 0; text-align: center; }

.ykc-pagination { margin-top: 40px; }
.ykc-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ykc-pagination .page-numbers {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px; border-radius: 10px; border: 1px solid var(--ykc-line); background: var(--ykc-surface);
	color: var(--ykc-ink-2); text-decoration: none;
}
.ykc-pagination .page-numbers.current { background: var(--ykc-ink); border-color: var(--ykc-ink); color: #fff; }
.ykc-pagination .dots { border: 0; background: none; }

.ykc-emptybox { padding: 48px 24px; text-align: center; background: var(--ykc-surface); border: 1px dashed #C9D1DC; border-radius: var(--ykc-radius); }
.ykc-emptybox .ykc-searchform { max-width: 480px; margin: 16px auto 0; }
.ykc-empty { color: var(--ykc-muted); }

/* 5. 單篇文章 ------------------------------------------------------------- */
.ykc-article__head { padding: 56px 0 24px; }
.ykc-article__title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.3; margin: 16px 0 16px; }
.ykc-article__byline { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ykc-muted); font-size: 14px; }
.ykc-article__avatar { border-radius: 50%; }
.ykc-article__cover { margin: 8px auto 40px; }
.ykc-article__cover img { width: 100%; border-radius: var(--ykc-radius); display: block; }
.ykc-article__foot { padding-top: 32px; padding-bottom: 56px; }

.ykc-prose { font-size: 17px; line-height: 1.85; color: #1B2738; }
.ykc-prose > * + * { margin-top: 1.1em; }
.ykc-prose p { margin: 0; }
.ykc-prose h2 { font-size: 26px; margin-top: 2em; padding-bottom: 8px; border-bottom: 1px solid var(--ykc-line); }
.ykc-prose h3 { font-size: 21px; margin-top: 1.6em; }
.ykc-prose img { border-radius: 10px; }
.ykc-prose figure { margin-left: 0; margin-right: 0; }
.ykc-prose figcaption { font-size: 14px; color: var(--ykc-muted); text-align: center; margin-top: 8px; }
.ykc-prose blockquote {
	margin-left: 0; margin-right: 0; padding: 16px 20px; background: var(--ykc-surface);
	border: 1px solid var(--ykc-line); border-radius: 12px; color: var(--ykc-ink-2);
}
.ykc-prose ul, .ykc-prose ol { padding-left: 1.4em; }
.ykc-prose li + li { margin-top: .35em; }
.ykc-prose code { font-family: var(--ykc-mono); font-size: .9em; background: var(--ykc-gray-bg); padding: .1em .4em; border-radius: 4px; }
.ykc-prose pre { background: var(--ykc-ink); color: #E6EDF5; padding: 18px; border-radius: 12px; overflow-x: auto; font-size: 14px; }
.ykc-prose pre code { background: none; padding: 0; color: inherit; }
.ykc-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.ykc-prose th, .ykc-prose td { border: 1px solid var(--ykc-line); padding: 10px 12px; text-align: left; }
.ykc-prose th { background: var(--ykc-bg); }
.ykc-prose .alignwide { max-width: 1000px; margin-left: auto; margin-right: auto; }

.ykc-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.ykc-tagcloud a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ykc-line); background: var(--ykc-surface); font-size: 14px; text-decoration: none; color: var(--ykc-ink-2); }
.ykc-tagcloud a::before { content: "#"; color: var(--ykc-faint); }

.ykc-postnav .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ykc-postnav a {
	display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; background: var(--ykc-surface);
	border: 1px solid var(--ykc-line); border-radius: 12px; text-decoration: none; color: var(--ykc-ink);
}
.ykc-postnav a:hover { border-color: var(--ykc-accent); }
.ykc-postnav .nav-next { text-align: right; }
.ykc-postnav .ykc-eyebrow { margin: 0; }
.ykc-postnav__title { font-weight: 500; }

/* 6. 留言與表單 ----------------------------------------------------------- */
.ykc-comments { padding-bottom: 72px; }
.ykc-comments__title { font-size: 22px; margin: 0 0 20px; }
.ykc-comments__list, .ykc-comments__list .children { list-style: none; margin: 0 0 32px; padding: 0; }
.ykc-comments__list .children { margin: 16px 0 0 24px; }
.ykc-comments__list .comment-body { padding: 18px 20px; background: var(--ykc-surface); border: 1px solid var(--ykc-line); border-radius: 12px; margin-bottom: 12px; }
.ykc-comments__list .comment-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ykc-muted); }
.ykc-comments__list .avatar { border-radius: 50%; }
.ykc-comments__list .reply a { font-size: 14px; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #C9D1DC; border-radius: 10px;
	background: var(--ykc-surface); color: var(--ykc-ink); font: inherit;
}
textarea { min-height: 140px; }
input:focus, textarea:focus { border-color: var(--ykc-accent); outline: 2px solid var(--ykc-accent-soft); }
.comment-form p { margin: 0 0 16px; }
.comment-form label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ykc-ink-2); }
.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form-cookies-consent label { margin: 0; }

.ykc-searchform { display: flex; gap: 8px; }
.ykc-searchform input { flex: 1; min-width: 0; }
.ykc-searchform button {
	display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border: 0;
	border-radius: 10px; background: var(--ykc-ink); color: #fff; font: inherit; cursor: pointer;
}

/* 7. 短代碼 --------------------------------------------------------------- */
.ykc-actions { display: flex; flex-direction: column; gap: 8px; }
.ykc-actions__grid { display: grid; grid-template-columns: repeat(var(--ykc-cols, 4), minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.ykc-actions__tile {
	min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	border-radius: 12px; border: 1px solid var(--ykc-line); background: var(--ykc-surface);
	color: var(--ykc-ink); text-decoration: none; font-size: 13px;
}
.ykc-actions__tile .ykc-icon { color: var(--ykc-accent); }
.ykc-actions__tile:hover { border-color: var(--ykc-accent); color: var(--ykc-ink); }
.ykc-actions .ykc-btn--primary { min-height: 52px; font-size: 16px; font-weight: 700; }

.ykc-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ykc-qr__code { background: #fff; border-radius: 12px; padding: 10px; }
.ykc-qr__code svg, .ykc-qr__code img { width: 100%; height: 100%; display: block; }
.ykc-qr figcaption { font-size: 14px; }

/* 8. Elementor 輔助 class -------------------------------------------------
   在 Elementor 的「進階 › CSS 類別」填入下列名稱即可套用。
   以 body 開頭提高權重，蓋過 Elementor 預設值；在 Elementor 面板裡個別調整的樣式仍會優先。 */

body .elementor-widget-heading .elementor-heading-title { color: inherit; font-family: inherit; font-weight: 700; line-height: 1.3; }
body .elementor-widget-text-editor { color: inherit; font-family: inherit; }
body .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body .elementor-widget-image .widget-image-caption { font-size: 14px; color: var(--ykc-ink); font-weight: 500; margin-top: 12px; text-align: left; }

/* 區段：欄位自動換行（做卡片格線用） */
body .elementor-section.ykc-s-wrap > .elementor-container { flex-wrap: wrap; }
body .elementor-section.ykc-s-wrap > .elementor-container > .elementor-column { align-self: stretch; }

/* 標題與文字 */
body .ykc-eyebrow .elementor-heading-title {
	font-family: var(--ykc-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--ykc-faint);
}
body .ykc-display .elementor-heading-title { font-size: clamp(36px, 5vw, 52px); line-height: 1.15; letter-spacing: -.01em; }
body .ykc-title .elementor-heading-title { font-size: clamp(32px, 4vw, 44px); line-height: 1.2; }
body .ykc-h2 .elementor-heading-title { font-size: clamp(24px, 3vw, 30px); }
body .ykc-h3 .elementor-heading-title { font-size: 19px; }
body .ykc-h4 .elementor-heading-title { font-size: 16px; line-height: 1.45; }
body .ykc-lead { font-size: 18px; color: var(--ykc-ink-2); }
body .ykc-lead p { max-width: 44em; }
body .ykc-muted { font-size: 14px; color: var(--ykc-muted); }
body .ykc-mono { font-family: var(--ykc-mono); font-size: 12px; color: var(--ykc-faint); letter-spacing: .04em; }

/* 按鈕 */
body .elementor-widget.ykc-btn-primary .elementor-button,
body .elementor-widget.ykc-btn-ghost .elementor-button,
body .elementor-widget.ykc-btn-light .elementor-button {
	min-height: 48px; padding: 14px 22px; border-radius: 10px; font-family: inherit; font-size: 15px;
	font-weight: 500; line-height: 1.2; border: 1px solid transparent;
}
body .elementor-widget.ykc-btn-primary .elementor-button { background: var(--ykc-accent); color: #fff; }
body .elementor-widget.ykc-btn-primary .elementor-button:hover { background: var(--ykc-accent-dark); }
body .elementor-widget.ykc-btn-ghost .elementor-button { background: var(--ykc-surface); color: var(--ykc-ink); border-color: #C9D1DC; }
body .elementor-widget.ykc-btn-ghost .elementor-button:hover { border-color: var(--ykc-ink); }
body .elementor-widget.ykc-btn-light .elementor-button { background: #fff; color: var(--ykc-ink); font-weight: 700; }
body .elementor-widget.ykc-btn-light .elementor-button:hover { background: var(--ykc-accent-soft); }
body .elementor-widget.ykc-btn-text .elementor-button { background: none; padding: 10px 0; color: var(--ykc-accent); font-weight: 500; font-size: 14px; }

/* 卡片欄位：在「欄位」的 CSS 類別填 ykc-card */
body .elementor-column.ykc-card > .elementor-widget-wrap,
body .elementor-column.ykc-topic > .elementor-widget-wrap,
body .elementor-column.ykc-cert > .elementor-widget-wrap,
body .elementor-column.ykc-record > .elementor-widget-wrap,
body .elementor-column.ykc-work > .elementor-widget-wrap {
	margin: 8px; background: var(--ykc-surface); border: 1px solid var(--ykc-line); border-radius: var(--ykc-radius);
	align-content: flex-start;
}
body .elementor-column.ykc-card > .elementor-widget-wrap,
body .elementor-column.ykc-topic > .elementor-widget-wrap { padding: 24px !important; }
body .ykc-card .elementor-widget:not(:last-child),
body .ykc-topic .elementor-widget:not(:last-child),
body .ykc-cert .elementor-widget:not(:last-child),
body .ykc-work .elementor-widget:not(:last-child) { margin-bottom: 10px; }

/* 卡片頂端色條 */
body .ykc-bar-teal > .elementor-widget-wrap { border-top: 4px solid var(--ykc-teal) !important; }
body .ykc-bar-blue > .elementor-widget-wrap { border-top: 4px solid var(--ykc-blue) !important; }
body .ykc-bar-amber > .elementor-widget-wrap { border-top: 4px solid var(--ykc-amber) !important; }
body .ykc-bar-gray > .elementor-widget-wrap { border-top: 4px solid var(--ykc-gray) !important; }
body .ykc-dashed > .elementor-widget-wrap { border-style: dashed !important; border-color: #C9D1DC !important; }

/* 主題卡（首頁四個領域） */
body .ykc-topic .elementor-icon {
	width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; background: var(--ykc-teal-bg); color: var(--ykc-teal);
}
body .ykc-topic .elementor-icon svg { width: 20px; height: 20px; fill: currentColor; }
body .ykc-topic.ykc-c-blue .elementor-icon { background: var(--ykc-blue-bg); color: var(--ykc-blue); }
body .ykc-topic.ykc-c-amber .elementor-icon { background: var(--ykc-amber-bg); color: var(--ykc-amber); }
body .ykc-topic.ykc-c-gray .elementor-icon { background: var(--ykc-gray-bg); color: var(--ykc-gray); }
body .ykc-topic .elementor-icon-wrapper { text-align: left; }
body .ykc-topic .elementor-heading-title a { color: var(--ykc-ink); text-decoration: none; }
body .ykc-topic .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; }
body .ykc-topic > .elementor-widget-wrap { position: relative; transition: border-color .15s; }
body .ykc-topic > .elementor-widget-wrap:hover { border-color: #C9D1DC; }

/* 個人資料卡（首頁右側） */
body .elementor-column.ykc-record > .elementor-widget-wrap { padding: 0 !important; overflow: hidden; }
body .ykc-record .elementor-widget { margin-bottom: 0 !important; }
body .ykc-record-bar .elementor-heading-title {
	display: flex; justify-content: space-between; padding: 14px 20px; background: var(--ykc-ink); color: #fff;
	font-family: var(--ykc-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em;
}
body .ykc-record-who { padding: 24px 20px; border-bottom: 1px solid var(--ykc-line); }
body .ykc-record-who .ykc-who { display: flex; align-items: center; gap: 20px; }
body .ykc-record-body { padding: 8px 20px 20px; }

/* 大頭照 */
body .ykc-avatar img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
body .ykc-avatar-lg img {
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	border: 4px solid #fff; box-shadow: 0 0 0 1px var(--ykc-line);
}

/* 文字編輯器內可用的結構 class */
.ykc-dl { margin: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; font-size: 15px; }
.ykc-dl dt { padding: 12px 0; border-bottom: 1px solid var(--ykc-line-2); font-family: var(--ykc-mono); font-size: 12px; letter-spacing: .08em; color: var(--ykc-faint); }
.ykc-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ykc-line-2); }
.ykc-dl dt:last-of-type, .ykc-dl dd:last-of-type { border-bottom: 0; }

.ykc-kv { margin: 0; display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); }
.ykc-kv dt { padding: 18px 24px; background: #F8FAFC; border-bottom: 1px solid var(--ykc-line-2); font-family: var(--ykc-mono); font-size: 13px; color: var(--ykc-gray-ink); }
.ykc-kv dd { margin: 0; padding: 14px 24px; border-bottom: 1px solid var(--ykc-line-2); display: flex; flex-wrap: wrap; gap: 8px; }
.ykc-kv dt:last-of-type, .ykc-kv dd:last-of-type { border-bottom: 0; }
.ykc-kv dd span { padding: 6px 12px; border-radius: 8px; border: 1px solid #D5DBE3; font-size: 14px; background: #fff; }
body .elementor-column.ykc-card.ykc-flush > .elementor-widget-wrap { padding: 0 !important; overflow: hidden; }
@media (max-width: 640px) {
	.ykc-kv { grid-template-columns: 1fr; }
	.ykc-kv dt { padding: 12px 16px; border-bottom: 0; }
	.ykc-kv dd { padding: 12px 16px; }
}

.ykc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ykc-tags span, .ykc-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--ykc-teal-bg); color: var(--ykc-teal-ink); }
.ykc-tags.ykc-tone-blue, .ykc-tags.ykc-tone-amber, .ykc-tags.ykc-tone-gray, .ykc-tags.ykc-tone-teal { background: none; }
.ykc-tags.ykc-tone-blue span { background: var(--ykc-blue-bg); color: var(--ykc-blue-ink); }
.ykc-tags.ykc-tone-amber span { background: var(--ykc-amber-bg); color: var(--ykc-amber-ink); }
.ykc-tags.ykc-tone-gray span { background: var(--ykc-gray-bg); color: var(--ykc-gray-ink); }
.ykc-tags span.ykc-tone-blue { background: var(--ykc-blue-bg); color: var(--ykc-blue-ink); }
.ykc-tags span.ykc-tone-amber { background: var(--ykc-amber-bg); color: var(--ykc-amber-ink); }

.ykc-list { list-style: none; margin: 0; padding: 0; }
.ykc-list li { padding: 12px 0; border-bottom: 1px solid var(--ykc-line-2); }
.ykc-list li:last-child { border-bottom: 0; }
.ykc-list strong { font-weight: 500; }
.ykc-list small { display: block; font-size: 14px; color: var(--ykc-muted); }
.ykc-list .ykc-badge { float: right; margin-left: 12px; }
.ykc-list--compact li { padding: 10px 0; font-size: 14px; }
.ykc-list--row li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.ykc-list--row li span:last-child { flex: none; font-family: var(--ykc-mono); font-size: 12px; color: var(--ykc-faint); }

.ykc-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-family: var(--ykc-mono); font-size: 12px; background: var(--ykc-teal-bg); color: var(--ykc-teal-ink); }
.ykc-badge.ykc-tone-amber { background: var(--ykc-amber-bg); color: var(--ykc-amber-ink); }
.ykc-badge.ykc-tone-blue { background: var(--ykc-blue-bg); color: var(--ykc-blue-ink); }

.ykc-split { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--ykc-mono); font-size: 12px; color: var(--ykc-faint); }

.ykc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; background: var(--ykc-teal); }
.ykc-dot.ykc-tone-blue { background: var(--ykc-blue); }
.ykc-dot.ykc-tone-amber { background: var(--ykc-amber); }
.ykc-dot.ykc-tone-gray { background: var(--ykc-gray); }

.ykc-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ykc-mini li { padding: 10px 12px; border-radius: 10px; background: var(--ykc-bg); font-size: 14px; }

/* 證照卡：左邊縮圖、右邊文字 */
body .elementor-column.ykc-cert > .elementor-widget-wrap {
	display: grid !important; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 16px !important;
}
body .ykc-cert .elementor-widget-image { grid-row: 1 / span 3; margin: 0 !important; }
body .ykc-cert .elementor-widget-image img {
	width: 72px; height: 92px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--ykc-line);
	background: var(--ykc-bg);
}
body .ykc-cert .elementor-widget { min-width: 0; }

/* 作品縮圖卡 */
body .elementor-column.ykc-work > .elementor-widget-wrap { padding: 0 !important; overflow: hidden; }
body .ykc-work .elementor-widget-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; background: var(--ykc-bg); }
body .ykc-work .elementor-widget-image .widget-image-caption { padding: 0 16px 16px; }
body .ykc-work .elementor-widget-image figure { margin: 0; }

/* 深色行動呼籲區 */
body .elementor-column.ykc-cta > .elementor-widget-wrap {
	margin: 8px; padding: 36px 40px !important; border-radius: 18px; background: var(--ykc-ink); color: #fff; align-items: center;
}
body .ykc-cta .ykc-eyebrow .elementor-heading-title { color: #9FB3C8; }
body .ykc-cta .ykc-muted, body .ykc-cta .elementor-widget-text-editor { color: #C8D3E0; }

/* 錨點連結列（作品頁） */
.ykc-anchors { display: flex; flex-wrap: wrap; gap: 8px; }
.ykc-anchors a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid #C9D1DC;
	background: #fff; color: var(--ykc-ink-2); text-decoration: none; font-size: 14px;
}
.ykc-anchors a:first-child { background: var(--ykc-ink); color: #fff; border-color: var(--ykc-ink); }

/* 電子名片頁 */
body.ykc-blank { background: var(--ykc-bg); }
body .ykc-card-band { background: var(--ykc-accent); }
body .ykc-card-band .elementor-heading-title { color: #fff !important; }
body .elementor-column.ykc-namecard > .elementor-widget-wrap {
	margin: -72px 16px 0; padding: 0 20px 24px !important; background: #fff; border: 1px solid var(--ykc-line);
	border-radius: 20px; text-align: center; justify-content: center;
}
body .ykc-namecard .ykc-avatar-lg { margin-top: -56px; }
body .ykc-namecard .elementor-widget:not(:last-child) { margin-bottom: 12px; }
body .ykc-namecard .ykc-roles { text-align: left; }
.ykc-roles p, .ykc-role {
	margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--ykc-bg); font-size: 14px; color: var(--ykc-muted);
}
.ykc-roles strong { display: block; font-size: 15px; font-weight: 500; color: var(--ykc-ink); }
body .elementor-column.ykc-mcard > .elementor-widget-wrap {
	margin: 16px 16px 0; padding: 20px !important; background: #fff; border: 1px solid var(--ykc-line); border-radius: 20px;
}
body .ykc-mcard .elementor-widget:not(:last-child) { margin-bottom: 12px; }
body .elementor-column.ykc-mcard.ykc-mcard-dark > .elementor-widget-wrap { background: var(--ykc-ink); border-color: var(--ykc-ink); color: #C8D3E0; text-align: center; }

@media (max-width: 767px) {
	body .elementor-column.ykc-cta > .elementor-widget-wrap { padding: 28px 24px !important; }
	.ykc-dl { grid-template-columns: 72px minmax(0, 1fr); }
}

/* 連結底線：按鈕與卡片不需要 */
body .elementor a.elementor-button, body .elementor a.elementor-button:hover { text-decoration: none; }
.ykc-post__media, .ykc-post__title a, .ykc-textlink, .ykc-btn, .ykc-chips a, .ykc-anchors a, .ykc-pill { text-decoration: none; }
body .ykc-topic .elementor-heading-title a { text-decoration: none; }

/* 並排的文字按鈕留間距；卡片內圖片限制高度 */
body .elementor-widget.ykc-btn-text.elementor-widget__width-auto { margin-right: 20px; }
body .ykc-card .elementor-widget-image img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }