.pf-hub-page, .pf-hub-learn, .pf-hub-content, .pf-hub-panel {
	--pf-loop-accent: #0E6FA8;
	--pf-loop-title: #12344D;
	--pf-loop-soft: #EAF6FB;
	--pf-loop-border: #B9DDF0;
	--pf-task-warning: #C2410C;
}
.pf-hub-task-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.pf-hub-task-badge { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; min-height: 28px; padding: 3px 6px; border: 1px solid var(--pf-loop-border); border-radius: 4px; background: #fff; color: var(--pf-loop-accent); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; }
a.pf-hub-task-badge:hover { color: var(--pf-loop-accent); text-decoration: underline; }
.pf-hub-task-badge.is-revise { border-color: var(--pf-task-warning); color: var(--pf-task-warning); text-decoration: underline; }
a.pf-hub-task-badge.is-revise:hover { color: var(--pf-task-warning); }
a.pf-hub-task-badge:focus-visible { outline: 2px solid var(--pf-loop-accent); outline-offset: 2px; }
.pf-hub-item-main { display: flex; align-items: center; flex: 1 1 200px; min-width: 0; min-height: 28px; gap: 12px; }
.pf-hub-task-help { margin: 4px 0 0; color: #52606D; font-size: 12px; }
.pf-hub-panel .pf-hub-task-badges { flex-basis: 100%; }
@media (max-width: 600px) {
	.pf-hub-content .pf-hub-item-row.has-tasks { flex-wrap: wrap; }
	.pf-hub-item-main, .pf-hub-content .pf-hub-task-badges { flex-basis: 100%; }
}
.pf-hub-content,
.pf-hub-content *,
.pf-hub-nav,
.pf-hub-nav * {
	box-sizing: border-box;
}

.pf-hub-content {
	padding: 24px;
	border: 1px solid #9FB3C8;
	border-radius: 4px;
	background: #fff;
	color: #1F2933;
	font-size: 14px;
	line-height: 1.5;
}

.pf-hub-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.pf-hub-content .pf-hub-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
}

.pf-hub-content .pf-hub-toggle-all {
	appearance: none;
	flex-shrink: 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #52606D;
	font: inherit;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
}

.pf-hub-content .pf-hub-toggle-all[hidden] {
	display: none;
}

.pf-hub-overview {
	margin-bottom: 20px;
	padding: 14px 16px;
	border-radius: 4px;
	background: #F1F4F8;
}

.pf-hub-content .pf-hub-overview-title {
	margin: 0 0 8px;
	padding: 0;
	color: inherit;
	font: inherit;
	font-weight: 700;
}

.pf-hub-content .pf-hub-counts,
.pf-hub-content .pf-hub-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-hub-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.pf-hub-content .pf-hub-count {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	color: #52606D;
	font-size: 13px;
}

.pf-hub-section {
	margin: 0 0 12px;
	padding: 0;
	border: 1px solid #D9E2EC;
	border-radius: 4px;
	background: #fff;
}

.pf-hub-section:last-child {
	margin-bottom: 0;
}

.pf-hub-section > .pf-hub-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 4px;
	background: #F1F4F8;
	color: inherit;
	font: inherit;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.pf-hub-section-heading::-webkit-details-marker {
	display: none;
}

.pf-hub-section[open] > .pf-hub-section-heading {
	border-bottom: 1px solid #D9E2EC;
	border-radius: 4px 4px 0 0;
}

.pf-hub-section-title,
.pf-hub-item-title {
	min-width: 0;
	overflow-wrap: anywhere;
}
.pf-hub-section-title { flex: 1 1 0%; color: #12344D; font-size: 15px; }

.pf-hub-chevron {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 1.5px solid #52606D;
	border-bottom: 1.5px solid #52606D;
	transform: rotate(45deg) translateY(-2px);
}

.pf-hub-section[open] .pf-hub-chevron {
	transform: rotate(225deg) translate(-2px, -1px);
}

.pf-hub-content .pf-hub-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #D9E2EC;
}

.pf-hub-item:last-child {
	border-bottom: 0;
}

.pf-hub-content .pf-hub-item-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	color: inherit;
	font: inherit;
	text-decoration: none;
	box-shadow: none;
}

.pf-hub-item-title {
	flex: 1 1 0%;
}

.pf-hub-icon {
	display: block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: #52606D;
}

.pf-hub-item-trailing,
.pf-hub-markers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 10px;
	color: #52606D;
	font-size: 12px;
}

.pf-hub-markers:empty {
	display: none;
}

.pf-hub-content .pf-hub-external {
	display: inline-block;
	margin: 0;
	padding: 4px 8px;
	border: 1px solid #9FB3C8;
	border-radius: 4px;
	background: #fff;
	color: #0E6FA8;
	font: inherit;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
}

.pf-hub-content .pf-hub-item-link:hover,
.pf-hub-content .pf-hub-external:hover {
	background: #F1F4F8;
	color: #12344D;
}

.pf-hub-toggle-all:focus-visible,
.pf-hub-section-heading:focus-visible,
.pf-hub-item-link:focus-visible,
.pf-hub-external:focus-visible,
.pf-hub-nav-link:focus-visible {
	outline: 2px solid #0E6FA8;
	outline-offset: 2px;
}

.pf-hub-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	white-space: nowrap;
}

.pf-hub-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 16px 0;
	padding: 12px 0;
	border-bottom: 1px solid #9FB3C8;
	color: #52606D;
	font-size: 13px;
	line-height: 1.5;
}

.pf-hub-nav .pf-hub-nav-link {
	color: #0E6FA8;
	font: inherit;
	text-decoration: none;
	box-shadow: none;
}

.pf-hub-nav .pf-hub-location {
	margin: 0;
	padding: 0;
	font: inherit;
	overflow-wrap: anywhere;
}

.pf-hub-panel, .pf-hub-panel *, .pf-hub-result, .pf-hub-result * { box-sizing: border-box; }
.pf-hub-panel {
	margin-top: 28px;
	padding: 24px 20px;
	border: 1px solid #9FB3C8;
	background: #fff;
	color: #1F2933;
	font-size: 14px;
	line-height: 1.5;
}
.pf-hub-panel-title { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.pf-hub-panel-progress { margin: 12px 0 24px; color: #52606D; }
.pf-hub-panel .pf-hub-panel-section { margin: 24px 0 12px; font-size: 15px; font-weight: 700; }
.pf-hub-panel .pf-hub-timeline { margin: 0; padding: 0; list-style: none; }
.pf-hub-panel .pf-hub-timeline-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
	min-height: 48px;
	margin: 0;
	padding: 10px 0 10px 34px;
}
.pf-hub-timeline-item::after {
	content: '';
	position: absolute;
	left: 11px;
	top: 24px;
	bottom: -24px;
	width: 2px;
	background: #D9E2EC;
}
.pf-hub-timeline-item:last-child::after { display: none; }
.pf-hub-timeline-item.is-line-done::after { background: linear-gradient(#3AB5EE, #5CD5D7); }
.pf-hub-circle {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #627D98;
	border-radius: 50%;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
}
.is-done > .pf-hub-circle { border-color: transparent; background: linear-gradient(135deg, #3AB5EE, #5CD5D7); color: #12344D; }
.is-done .pf-hub-milestone { color: #0E6FA8; font-weight: 700; }
.is-current > .pf-hub-circle { outline: 2px solid #0E6FA8; outline-offset: 3px; }
/* 외부링크의 원은 눌러서 확인을 찍고 푸는 버튼 */
button.pf-hub-circle { box-sizing: border-box; margin: 0; padding: 0; color: inherit; font-family: inherit; line-height: 1; cursor: pointer; box-shadow: none; }
button.pf-hub-circle:hover { border-color: #0E6FA8; }
button.pf-hub-circle:focus-visible { outline: 2px solid #0E6FA8; outline-offset: 2px; }
.is-done > button.pf-hub-circle { color: #12344D; }
.pf-hub-content .pf-hub-check-button { margin: 0; padding: 4px 8px; border: 1px solid #9FB3C8; border-radius: 4px; background: #fff; color: #1F2933; font: inherit; white-space: nowrap; cursor: pointer; box-shadow: none; }
.pf-hub-content .pf-hub-check-button[aria-pressed="true"] { border-color: #0E6FA8; color: #0E6FA8; }
.pf-hub-content .pf-hub-check-button:hover { background: #F1F4F8; }
.pf-hub-check-button:focus-visible { outline: 2px solid #0E6FA8; outline-offset: 2px; }
.pf-hub-panel-link, .pf-hub-panel-item-title { min-width: 0; overflow-wrap: anywhere; }
.pf-hub-panel-link { flex: 1 1 120px; }
.pf-hub-panel .pf-hub-markers { margin-left: auto; }
.pf-hub-completion { margin: 32px 0; text-align: center; }
.pf-hub-completion [hidden] { display: none; }
.pf-hub-completion .pf-hub-confirmed { display: block; margin-bottom: 12px; }
.pf-hub-completion button { min-width: 160px; padding: 12px 28px; font-size: 15px; line-height: 1.4; border-radius: 4px; cursor: pointer; }
.pf-hub-completion .pf-hub-cancel { border: 0; background: #9FB3C8; color: #1F2933; }
.pf-hub-completion .pf-hub-cancel:hover { background: #D9E2EC; }

/* 루프파인더·아일랜드 체크 양식의 서체·색·구역 머리. 웹폰트는 요청하지 않는다. */
.pf-hub-page, .pf-hub-learn, .pf-hub-content, .pf-hub-nav, .pf-hub-panel, .pf-hub-result {
	font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	color: #1F2933;
}
.pf-hub-page, .pf-hub-page * { box-sizing: border-box; }
.pf-hub-page { width: 100%; max-width: 1080px; margin: var(--pf-hub-header-gap, 0px) auto 0; padding: 40px 24px 64px; line-height: 1.6; }
.pf-hub-page-header { margin-bottom: 32px; }
.pf-hub-page-header.has-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 32px; align-items: start; }
.pf-hub-page-heading, .pf-hub-header-side { min-width: 0; }
.pf-hub-eyebrow { display: block; color: #0E6FA8; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; }
.pf-hub-page .pf-hub-page-title { margin: 4px 0 8px; color: #12344D; font-size: 30px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.pf-hub-description, .pf-hub-section-description { margin: 4px 0 0; color: #52606D; font-size: 13px; }
.pf-hub-cover { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; }
.pf-hub-intro { margin-bottom: 32px; }
.pf-hub-application { border: 1.5px solid #0E6FA8; border-radius: 4px; padding: 20px; background: #fff; }
.pf-hub-application h2 { margin: 4px 0 16px; color: #12344D; font-size: 16px; font-weight: 700; }
.pf-hub-application .pf-hub-counts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-hub-count { display: flex; align-items: center; gap: 6px; color: #52606D; font-size: 13px; }
.pf-hub-page a.pf-hub-apply, .pf-hub-completion .pf-hub-complete, .pf-hub-result button {
	display: inline-block; padding: 10px 20px; border: 1px solid #0E6FA8; border-radius: 4px; background: #0E6FA8; color: #fff; font: inherit; font-weight: 700; text-decoration: none; box-shadow: none; cursor: pointer;
}
.pf-hub-page a.pf-hub-apply { display: block; margin-top: 20px; text-align: center; overflow-wrap: anywhere; }
.pf-hub-page a.pf-hub-apply:hover, .pf-hub-completion .pf-hub-complete:hover, .pf-hub-result button:hover { background: #12344D; border-color: #12344D; color: #fff; }
.pf-hub-result button[value="draft"] { background: #F1F4F8; border-color: #9FB3C8; color: #12344D; }
.pf-hub-result textarea { border: 1px solid #9FB3C8; border-radius: 4px; background: #fff; color: #1F2933; font: inherit; padding: 12px; }
.pf-hub-learn-title { color: #12344D; font-weight: 800; }
.pf-hub-panel-title, .pf-hub-panel-section, .pf-hub-content .pf-hub-title { color: #12344D; }
.pf-hub-panel-link, .pf-hub-nav-link { color: #0E6FA8; }
.pf-hub-panel-link:hover, .pf-hub-panel-title:hover, .pf-hub-nav-link:hover { color: #12344D; }
.pf-hub-overview { border: 0; }
.pf-hub-optional { padding: 2px 6px; border: 1px solid #9FB3C8; border-radius: 4px; background: #F1F4F8; }
.pf-hub-lock, .pf-hub-milestone { display: inline-flex; align-items: center; gap: 4px; }
.pf-hub-markers .pf-hub-icon { width: 16px; height: 16px; flex-basis: 16px; color: inherit; }
.pf-hub-panel .pf-hub-markers .pf-hub-icon { width: 24px; height: 24px; flex-basis: 24px; }
.pf-hub-panel .pf-hub-markers { font-size: 14px; }
.pf-hub-content .pf-hub-item.is-anchor { margin: 8px; border: 1.5px solid #0E6FA8; border-radius: 4px; }
.pf-hub-item { scroll-margin-top: 80px; }
.pf-hub-now { display: block; padding: 8px 16px 0; color: #0E6FA8; font-size: 12px; font-weight: 800; }
.pf-hub-section-progress { margin-left: auto; color: #0E6FA8; font-size: 13px; white-space: nowrap; }
.pf-hub-progress { margin: 0 0 28px; padding: 20px 24px; border: 1px solid #9FB3C8; border-radius: 4px; background: #fff; }
.pf-hub-progress-number { margin: 4px 0 0; color: #12344D; font-size: 16px; font-weight: 700; }
.pf-hub-percent { color: #0E6FA8; font-weight: 800; }
/* 진행 바: 사인파 선(SVG) 위에 24px 마커를 같은 좌표로 얹는다. 좁은 화면은 가로로 넘긴다. */
.pf-hub-progress-scroll { overflow-x: auto; margin: 0 -12px; padding: 40px 12px 8px; }
.pf-hub-progress-rail { position: relative; }
.pf-hub-progress-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf-hub-wave-base, .pf-hub-wave-open { fill: none; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pf-hub-wave-base { stroke: #D9E2EC; }
.pf-hub-wave-open { stroke: url(#pf-hub-wave-fill); }
.pf-hub-progress .pf-hub-progress-track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.pf-hub-progress-cell { position: absolute; z-index: 1; width: 24px; height: 24px; margin: 0; padding: 0; transform: translate(-50%, -50%); }
.pf-hub-progress-shape { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border: 2px solid #D9E2EC; border-radius: 50%; background: #fff; color: #12344D; font-size: 12px; font-weight: 800; }
.is-open > .pf-hub-progress-shape { border-color: #627D98; }
.is-write > .pf-hub-progress-shape { border-radius: 5px; }
.is-webinar > .pf-hub-progress-shape { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #9FB3C8; }
.is-backlog:not(.is-done) > .pf-hub-progress-shape { border-color: #0E6FA8; background: #E6F6FD; }
.is-done > .pf-hub-progress-shape { border: 0; background: linear-gradient(135deg, #3AB5EE, #5CD5D7); }
.is-done > .pf-hub-progress-shape::after { content: 'V'; }
.is-missed > .pf-hub-progress-shape { border-color: #C2410C; }
.is-anchor > .pf-hub-progress-shape { outline: 2px solid #0E6FA8; outline-offset: 3px; }
.pf-hub-progress .pf-hub-progress-pin { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 18px)); display: flex; align-items: center; justify-content: center; width: 22px; height: 26px; border-radius: 4px 4px 50% 50%; background: #0E6FA8; color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; }
/* 아이콘·마커 뜻 */
.pf-hub-progress-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.pf-hub-progress-foot .pf-hub-backlog { margin: 0; }
.pf-hub-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: #52606D; font-size: 12px; }
.pf-hub-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pf-hub-progress-legend { margin-left: auto; justify-content: flex-end; }
.pf-hub-legend-mark .pf-hub-progress-shape { width: 16px; height: 16px; font-size: 9px; }
.pf-hub-legend-mark.is-webinar .pf-hub-progress-shape { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #9FB3C8; }
.pf-hub-legend-pin { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 17px; border-radius: 3px 3px 50% 50%; background: #0E6FA8; color: #fff; font-size: 11px; font-weight: 800; }
.pf-hub-panel-legend { justify-content: center; margin-top: 28px; padding-top: 16px; border-top: 1px solid #D9E2EC; }
.pf-hub-panel-legend .pf-hub-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.pf-hub-backlog { margin: 12px 0 0; color: #0E6FA8; font-size: 13px; }
.pf-hub-page [hidden], .pf-hub-content [hidden], .pf-hub-completion [hidden], .pf-hub-progress[hidden], .pf-hub-progress .pf-hub-progress-pin[hidden] { display: none; }
.pf-hub-progress-pin:focus-visible, .pf-hub-apply:focus-visible, .pf-hub-result button:focus-visible, .pf-hub-result textarea:focus-visible, .pf-hub-completion button:focus-visible { outline: 2px solid #0E6FA8; outline-offset: 3px; }

/* 항목 전용 화면: 테마 머리글·바닥글 사이를 화면 폭 전체로 쓰고, 본문은 가운데, 패널은 오른쪽 끝 */
body.pf-hub-has-panel { overflow-x: clip; }
.pf-hub-learn { box-sizing: border-box; margin-top: var(--pf-hub-header-gap, 0px); }
.pf-hub-learn-main { box-sizing: border-box; width: 100%; max-width: 860px; margin: 0 auto; padding: 40px 24px 64px; }
.pf-hub-learn-title { margin: 0 0 16px; font-size: 28px; line-height: 1.3; }
.pf-hub-learn-main .entry-content > *:first-child { margin-top: 0; }
.pf-hub-done, .pf-hub-confirmed { color: #0E6FA8; }
.pf-hub-result { margin: 24px 0; }
.pf-hub-result label { display: block; margin: 16px 0; }
.pf-hub-result textarea { display: block; width: 100%; margin-top: 8px; }
.pf-hub-feedback { font-size: 13px; }
@media (min-width: 1024px) {
	.pf-hub-learn {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		/* 패널 칸의 왼쪽 경계선을 머리글부터 바닥글까지 긋는다 */
		background: linear-gradient(#9FB3C8, #9FB3C8) no-repeat right 320px top / 1px 100%;
	}
	.pf-hub-learn > .pf-hub-panel {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pf-hub-header-height, 0px));
		align-self: start;
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--pf-hub-header-height, 0px));
		margin: 0;
		border: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
@media (max-width: 1023px) {
	.pf-hub-learn > .pf-hub-panel { margin: 0 16px 32px; }
}

@media (max-width: 600px) {
	.pf-hub-page { padding: 24px 16px 40px; }
	.pf-hub-page-header.has-side { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.pf-hub-page .pf-hub-page-title { font-size: 28px; }
	.pf-hub-section > .pf-hub-section-heading { flex-wrap: wrap; gap: 8px; }
	.pf-hub-progress { padding: 16px 12px; }
	.pf-hub-content {
		padding: 16px 12px;
	}

	.pf-hub-content .pf-hub-item-row,
	.pf-hub-section > .pf-hub-section-heading {
		padding: 12px;
	}

	.pf-hub-item-trailing,
	.pf-hub-item-row > .pf-hub-markers {
		flex: 0 1 35%;
		min-width: 0;
	}
}