/*
 * TPL-COMMUNITY — 커뮤니티 page (templates/tpl-community.php, from
 * .design/community.html; feed column from .cursor/templates/community/
 * middle-section.css). Loads after alpha-category.css, whose body grid,
 * sidebar and Nova Finda styles the page reuses; this file adds the page
 * header, topic list, the feed column (ask card, list header, question
 * cards with their reply thread, sponsor) and the sidebar's 이번주 인기 글
 * card.
 * Every rule is nested under .wmsf-tpl-community. Tokens: global.css
 * (--wmsf-*); the feed's own colours are the --wmsf-cm-* props below.
 */

/* ---- Page accent (the mockup's .tp-cm) + feed palette ------------------ */

.wmsf-alpha-category--v2.wmsf-tpl-community {
	--tp: var(--wmsf-accent);
	--tp-text: var(--wmsf-accent);
	--tp-tint: color-mix(in srgb, var(--wmsf-accent) 9%, transparent);

	--wmsf-cm-ink: #1f1d1a;
	--wmsf-cm-ink-2: #36332d;
	--wmsf-cm-ink-3: #55514a;
	--wmsf-cm-ink-4: #2b2823;
	--wmsf-cm-muted: #6b675f;
	--wmsf-cm-muted-2: #7a756c;
	--wmsf-cm-faint: #a19c92;
	--wmsf-cm-faint-2: #8a857b;
	--wmsf-cm-rank: #b5b0a6;
	--wmsf-cm-hot-hover: #f7f5f1;
	--wmsf-cm-line: #e8e4dc;
	--wmsf-cm-line-hover: #d3d9e1;
	--wmsf-cm-thread: #d3d9e1;
	--wmsf-cm-chip: #f4f1eb;
	--wmsf-cm-chip-hover: #ebe7df;
	--wmsf-cm-src: #f1eee8;
	--wmsf-cm-bubble: #fbfcff;
	--wmsf-cm-sep: #c9c3b8;
	--wmsf-cm-blue: #1d4ed8;
	--wmsf-cm-blue-hover: oklch(0.45 0.13 252);
	--wmsf-cm-new: oklch(0.58 0.17 35);
	--wmsf-cm-new-bg: oklch(0.95 0.04 35);
	--wmsf-cm-bot-irs: oklch(0.66 0.14 40);
	--wmsf-cm-bot-ftb: oklch(0.6 0.1 190);
	--wmsf-cm-bot-tip: oklch(0.85 0.13 95);
	--wmsf-cm-bot-screen: oklch(0.97 0.02 90);
	--wmsf-cm-bot-cheek: oklch(0.8 0.1 20);
	--wmsf-cm-shadow: 0 6px 24px -12px rgba(40, 30, 10, .18);
}

.wmsf-tpl-community .wmsf-tpl-community__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Page header: title, tagline, counts, 질문하기 --------------------- */

.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-tpl-community__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding-bottom: clamp(24px, 3vw, 36px);
}
.wmsf-tpl-community .wmsf-tpl-community__intro { min-width: 0; }
.wmsf-tpl-community .wmsf-tpl-community__h1 {
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--wmsf-ink);
	text-align: center;
}
.wmsf-tpl-community .wmsf-tpl-community__sub { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--wmsf-ink-2); text-align: center;}
.wmsf-tpl-community .wmsf-tpl-community__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin-top: 10px;
	font-size: 14px;
	color: var(--wmsf-ink-3);
	font-variant-numeric: tabular-nums;
}
.wmsf-tpl-community .wmsf-tpl-community__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.wmsf-tpl-community .wmsf-tpl-community__stats span + span::before { content: "·"; margin-right: 10px; color: var(--wmsf-ink-3); }
.wmsf-tpl-community .wmsf-tpl-community__new-q {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--wmsf-r-pill);
	background: var(--wmsf-accent);
	color: var(--wmsf-accent-ink);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, transform .15s var(--wmsf-ease-out);
}
.wmsf-tpl-community .wmsf-tpl-community__new-q .wmsf-i { width: 16px; height: 16px; }
.wmsf-tpl-community .wmsf-tpl-community__new-q:active { transform: scale(.97); }

/* ---- Topics (a sticky pill row above the feed; a left column from 992px) */

.wmsf-tpl-community .wmsf-alpha-category__col { gap: 0; }
/* Grid items: without this the scrolling chip row sets its minimum width
   and the whole feed runs off the side of a phone. */
.wmsf-tpl-community :is(.wmsf-tpl-community__bar, .wmsf-tpl-community__list, .wmsf-tpl-community__hot) { min-width: 0; }

.wmsf-tpl-community .wmsf-tpl-community__bar {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + 84px);
	z-index: 8;
	padding: 10px 0 12px;
	background: linear-gradient(var(--wmsf-bg) 82%, transparent);
}
.wmsf-tpl-community .wmsf-tpl-community__cats {
	display: flex;
	gap: 6px;
	margin: -2px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
.wmsf-tpl-community .wmsf-tpl-community__cats::-webkit-scrollbar { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__cat {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	margin: 0;
	padding: 0 13px;
	border-radius: var(--wmsf-r-pill);
	border: 1px solid var(--wmsf-line);
	background: var(--wmsf-bg);
	font: 600 14px var(--wmsf-font);
	color: var(--wmsf-ink-2);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__cat-n { font-size: 12px; font-weight: 600; color: var(--wmsf-ink-3); font-variant-numeric: tabular-nums; }
.wmsf-tpl-community .wmsf-tpl-community__cat[aria-pressed="true"] { background: var(--wmsf-ink); border-color: var(--wmsf-ink); color: var(--wmsf-bg); }
.wmsf-tpl-community .wmsf-tpl-community__cat[aria-pressed="true"] .wmsf-tpl-community__cat-n { color: inherit; opacity: .7; }
.wmsf-tpl-community .wmsf-tpl-community__cat:focus-visible { outline: 2px solid var(--wmsf-accent); outline-offset: 2px; }

/* ---- Feed column: ask card, list header, cards, sponsor ---------------- */

.wmsf-tpl-community :is(.wmsf-tpl-community__list, .wmsf-tpl-community__board) {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	color: var(--wmsf-cm-ink);
	-webkit-font-smoothing: antialiased;
}
.wmsf-tpl-community .wmsf-tpl-community__list button { font-family: inherit; }
.wmsf-tpl-community .wmsf-tpl-community__board { scroll-margin-top: 150px; }

/* 1. Ask card — static copy around Nova Finda 12-topic-irs-guide-search,
   its ask box styled as a mini homepage composer (home.css .nf-home-composer).
   The card is a stacking context: the field's halo (z-index -1) stays under
   the field, and the suggestions still paint over the feed below. */
.wmsf-tpl-community .wmsf-tpl-community__ask {
	position: relative;
	z-index: 2;
	isolation: isolate;
	padding: 24px 24px 20px;
	border: 1px solid var(--wmsf-line);
	border-radius: 20px;
	background:
		radial-gradient(90% 70% at 0 0, color-mix(in srgb, var(--wmsf-glow-a) 10%, transparent), transparent 70%),
		radial-gradient(90% 70% at 100% 0, color-mix(in srgb, var(--wmsf-glow-b) 8%, transparent), transparent 70%),
		var(--wmsf-bg);
}
.wmsf-tpl-community .wmsf-tpl-community__ask-eyebrow {
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid var(--wmsf-glass-line);
	border-radius: var(--wmsf-r-pill);
	background: var(--wmsf-glass);
	color: var(--wmsf-accent-text);
	font-size: 12.5px;
	font-weight: 600;
}
.wmsf-tpl-community .wmsf-tpl-community__ask-title {
	margin: 10px 0 0;
	color: var(--wmsf-ink);
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.2;
	text-align: center;
}
.wmsf-tpl-community .wmsf-tpl-community__ask-accent {
	padding-bottom: .14em;
	color: var(--wmsf-accent-text);
	background-image: linear-gradient(90deg, var(--wmsf-glow-a), var(--wmsf-glow-b));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 3px;
}
/* Rotating title word (tpl-community.js §5), after home.css .wmsf-home__rot. */
.wmsf-tpl-community .wmsf-tpl-community__rot {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	vertical-align: top;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	transition: width .5s var(--wmsf-ease-in-out);
}
.wmsf-tpl-community .wmsf-tpl-community__rot .wmsf-tpl-community__ask-accent { display: inline-block; white-space: nowrap; transition: transform .38s var(--wmsf-ease-in-out), opacity .38s ease; }
.wmsf-tpl-community .wmsf-tpl-community__rot.is-out .wmsf-tpl-community__ask-accent { opacity: 0; transform: translateY(-110%); }
.wmsf-tpl-community .wmsf-tpl-community__rot-measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; text-align: center; }
.wmsf-tpl-community .wmsf-tpl-community__ask-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--wmsf-ink-2);  text-align: center; }
.wmsf-tpl-community .wmsf-tpl-community__ask-note { margin: 10px 0 0; font-size: 12px; color: var(--wmsf-cm-faint-2); }

.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-chips,
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-ic { display: none; }
/* Ring: a transparent border showing the spinning conic gradient. */
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask {
	align-items: center;
	gap: 8px;
	max-width: none;
	margin: 16px 0 0;
	padding: 6px 6px 6px 14px;
	border: 1.5px solid transparent;
	border-radius: 20px;
	background:
		linear-gradient(var(--wmsf-bg), var(--wmsf-bg)) padding-box,
		conic-gradient(from var(--wmsf-cm-ang), var(--wmsf-glow-a), var(--wmsf-glow-b), var(--wmsf-glow-c), var(--wmsf-glow-a)) border-box;
	box-shadow: none;
	animation: wmsf-cm-spin 7s linear infinite;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask::after {
	--wmsf-cm-ang: inherit;
	content: "";
	position: absolute;
	inset: -4px;
	z-index: -1;
	border-radius: 24px;
	background: conic-gradient(from var(--wmsf-cm-ang), var(--wmsf-glow-a), var(--wmsf-glow-b), var(--wmsf-glow-c), var(--wmsf-glow-a));
	opacity: .45;
	filter: blur(14px);
	pointer-events: none;
	transition: opacity .4s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask:focus-within { animation-duration: 3s; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask:focus-within::after { opacity: .75; }
/* The suggestions drop from the whole row, not just the input. */
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-field { position: static; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-autocomplete { top: calc(100% + 8px); left: 0; right: 0; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-field input {
	height: auto;
	padding: 6px 0;
	color: var(--wmsf-ink);
	caret-color: var(--wmsf-accent);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-field input::placeholder { color: var(--wmsf-ink-3); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn {
	position: relative;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--wmsf-r-pill);
	background: var(--wmsf-accent);
	color: var(--wmsf-accent-ink);
	transition: background-color .15s ease, transform .2s var(--wmsf-ease-out), box-shadow .2s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn svg { width: 15px; height: 15px; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn .nf-submit-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn:active { transform: scale(.95); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn:focus-visible { outline: 2px solid var(--wmsf-accent); outline-offset: 2px; }
/* Answer thread (alpha-category.js adds .is-thread): Finda's question,
   live steps and answer replace the static copy. */
.wmsf-tpl-community .wmsf-tpl-community__ask.is-thread [data-wmsf-idle] { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__ask:not(.is-thread) .nf-stage { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-thread { gap: 14px; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-q { font-size: 20px; letter-spacing: -0.02em; line-height: 1.35; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-stage { margin-top: 16px; box-shadow: none; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-cite {
	display: inline;
	min-width: 0;
	height: auto;
	margin-left: 2px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wmsf-accent-text);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	vertical-align: baseline;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-cite + .nf-cite { margin-left: 5px; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-cite sup { font-size: 11px; font-weight: 600; line-height: 0; vertical-align: super; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-cite:is(:hover, :focus-visible) { background: none; color: var(--wmsf-accent-text); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nova-finda .nf-cite:is(:hover, :focus-visible) sup { text-decoration: underline; }

/* Finda's live steps (alpha-category.js setStep()) as numbered dots. */
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wmsf-cm-ink-3);
	counter-reset: wmsf-cm-step;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li { display: flex; align-items: center; gap: 6px; counter-increment: wmsf-cm-step; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li + li::before { content: "—"; margin-right: 2px; color: var(--wmsf-cm-sep); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-step-mark {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 1px solid var(--wmsf-line);
	border-radius: 50%;
	background: transparent;
	color: var(--wmsf-ink-3);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
}
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-step-mark::before { content: counter(wmsf-cm-step); grid-area: 1 / 1; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-step-mark svg { grid-area: 1 / 1; width: 11px; height: 11px; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-active { color: var(--wmsf-ink); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-active .nf-tp-step-mark { border-color: var(--wmsf-accent); color: var(--wmsf-accent-text); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-active .nf-tp-step-mark::after { content: none; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-done { color: var(--wmsf-cm-ink-3); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-done .nf-tp-step-mark { border-color: var(--wmsf-accent); background: var(--wmsf-accent); }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-done .nf-tp-step-mark::before { visibility: hidden; }
.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps li.is-done .nf-tp-step-mark svg { color: var(--wmsf-accent-ink); opacity: 1; transform: none; }

/* 2. List header + sort tabs (최신순 / 답변 많은순). */
.wmsf-tpl-community .wmsf-tpl-community__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.wmsf-tpl-community .wmsf-tpl-community__head-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--wmsf-cm-ink); }
.wmsf-tpl-community .wmsf-tpl-community__tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--wmsf-cm-thread); }
.wmsf-tpl-community .wmsf-tpl-community__tab {
	margin: 0;
	padding: 7px 13px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wmsf-cm-muted-2);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__tab[aria-pressed="true"] { background: var(--wmsf-bg); color: var(--wmsf-cm-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.wmsf-tpl-community .wmsf-tpl-community__tab:focus-visible { outline: 2px solid var(--wmsf-cm-blue); outline-offset: 2px; }

/* 3. Question cards. */
.wmsf-tpl-community .wmsf-tpl-community__feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.wmsf-tpl-community .wmsf-tpl-community__feed > li { min-width: 0; }
.wmsf-tpl-community .wmsf-tpl-community__feed > li[hidden] { display: none; }

.wmsf-tpl-community .wmsf-tpl-community__post {
	padding: 20px 22px 16px;
	border: 1px solid var(--wmsf-line);
	border-radius: 16px;
	background: var(--wmsf-bg);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wmsf-tpl-community .wmsf-tpl-community__post-meta { display: flex; align-items: center; gap: 10px; }
.wmsf-tpl-community .wmsf-tpl-community__av {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: oklch(0.9 0.05 35);
	color: var(--wmsf-cm-ink-4);
	font-size: 14px;
	font-weight: 700;
}
/* Tints: the mockup's hues [35,150,252,300,80,200,10], by data-h. */
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="1"] { background: oklch(0.9 0.05 150); }
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="2"] { background: oklch(0.9 0.05 252); }
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="3"] { background: oklch(0.9 0.05 300); }
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="4"] { background: oklch(0.9 0.05 80); }
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="5"] { background: oklch(0.9 0.05 200); }
.wmsf-tpl-community .wmsf-tpl-community__av[data-h="6"] { background: oklch(0.9 0.05 10); }
.wmsf-tpl-community .wmsf-tpl-community__post-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.wmsf-tpl-community .wmsf-tpl-community__post-nick { font-size: 14px; font-weight: 700; color: var(--wmsf-cm-ink); }
.wmsf-tpl-community .wmsf-tpl-community__post-time { color: var(--wmsf-cm-faint); }
.wmsf-tpl-community .wmsf-tpl-community__post-time::before { content: "· "; }
.wmsf-tpl-community .wmsf-tpl-community__new {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--wmsf-cm-new-bg);
	color: var(--wmsf-cm-new);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .04em;
}
.wmsf-tpl-community .wmsf-tpl-community__new[hidden] { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__chip {
	flex: none;
	padding: 4px 9px;
	border-radius: 20px;
	background: var(--wmsf-cm-chip);
	color: var(--wmsf-cm-muted);
	font-size: 12px;
	white-space: nowrap;
}

.wmsf-tpl-community .wmsf-tpl-community__q {
	margin: 12px 0 0 5px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.45;
	color: var(--wmsf-cm-ink);
	text-wrap: pretty;
}
.wmsf-tpl-community .wmsf-tpl-community__q a { color: inherit; text-decoration: none; }
.wmsf-tpl-community .wmsf-tpl-community__q a:focus-visible { outline: 2px solid var(--wmsf-cm-blue); outline-offset: 2px; border-radius: 4px; }
.wmsf-tpl-community .wmsf-tpl-community__post-stats { flex: none; font-size: 12.5px; color: var(--wmsf-cm-muted-2); white-space: nowrap; }
.wmsf-tpl-community .wmsf-tpl-community__post-stats b { color: var(--wmsf-cm-ink); }

/* Thread: a rail under the avatar's centre and a curved elbow into each
   reply; the footer's elbow (or the last reply's, without a footer) ends it. */
.wmsf-tpl-community .wmsf-tpl-community__thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0 0 17px;
	padding: 4px 0 0 27px;
}
.wmsf-tpl-community .wmsf-tpl-community__reply { position: relative; display: flex; gap: 10px; }
.wmsf-tpl-community .wmsf-tpl-community__reply[hidden] { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__reply:focus { outline: none; }
.wmsf-tpl-community .wmsf-tpl-community__reply::before,
.wmsf-tpl-community .wmsf-tpl-community__thread-foot::before {
	content: "";
	position: absolute;
	left: -29px;
	width: 20px;
	height: 22px;
	border-left: 2px solid var(--wmsf-cm-thread);
	border-bottom: 2px solid var(--wmsf-cm-thread);
	border-bottom-left-radius: 10px;
}
.wmsf-tpl-community .wmsf-tpl-community__reply::before { top: -2px; }
.wmsf-tpl-community .wmsf-tpl-community__thread-foot::before,
.wmsf-tpl-community .wmsf-tpl-community__thread--open > .wmsf-tpl-community__reply:last-child::before {
	background: var(--wmsf-bg);
	box-shadow: -3px 14px 0 1px var(--wmsf-bg);
}
.wmsf-tpl-community .wmsf-tpl-community__thread-foot::before { top: -6px; }
.wmsf-tpl-community .wmsf-tpl-community__thread-foot::after,
.wmsf-tpl-community .wmsf-tpl-community__thread--open > .wmsf-tpl-community__reply:last-child::after {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 0;
	left: -31px;
	width: 6px;
	background: var(--wmsf-bg);
}
.wmsf-tpl-community .wmsf-tpl-community__thread-foot::after { top: 16px; }

/* Bot avatar 세무봇 아이리 (CSS only): coral, teal for FTB sources. */
.wmsf-tpl-community .wmsf-tpl-community__bot { --wmsf-cm-bot: var(--wmsf-cm-bot-irs); position: relative; flex: none; width: 39px; height: 39px; margin-top: 2px; }
.wmsf-tpl-community .wmsf-tpl-community__bot--ftb { --wmsf-cm-bot: var(--wmsf-cm-bot-ftb); }
.wmsf-tpl-community .wmsf-tpl-community__bot-stem { position: absolute; left: 50%; top: -1px; width: 2px; height: 7px; margin-left: -1px; background: var(--wmsf-cm-bot); }
.wmsf-tpl-community .wmsf-tpl-community__bot-tip { position: absolute; left: 50%; top: -5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--wmsf-cm-bot-tip); animation: wmsf-cm-glow 2.4s ease-in-out infinite; }
.wmsf-tpl-community .wmsf-tpl-community__bot-head { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-radius: 7px; background: var(--wmsf-cm-bot); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1); }
.wmsf-tpl-community .wmsf-tpl-community__bot-screen { position: absolute; left: 5px; right: 5px; top: 7px; height: 15px; border-radius: 4px; background: var(--wmsf-cm-bot-screen); }
.wmsf-tpl-community .wmsf-tpl-community__bot-eye { position: absolute; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--wmsf-cm-ink-4); animation: wmsf-cm-blink 4s ease-in-out infinite; }
.wmsf-tpl-community .wmsf-tpl-community__bot-eye--l { left: 11px; }
.wmsf-tpl-community .wmsf-tpl-community__bot-eye--r { right: 11px; }
.wmsf-tpl-community .wmsf-tpl-community__bot-cheek { position: absolute; top: 17px; width: 4px; height: 3px; border-radius: 50%; background: var(--wmsf-cm-bot-cheek); opacity: .9; }
.wmsf-tpl-community .wmsf-tpl-community__bot-cheek--l { left: 7px; }
.wmsf-tpl-community .wmsf-tpl-community__bot-cheek--r { right: 7px; }
.wmsf-tpl-community .wmsf-tpl-community__bot-mouth { position: absolute; left: 50%; top: 25px; width: 10px; height: 5px; margin-left: -5px; border: 2px solid var(--wmsf-bg); border-top: 0; border-radius: 0 0 3px 3px; }

.wmsf-tpl-community .wmsf-tpl-community__reply-body { flex: 1; min-width: 0; }
.wmsf-tpl-community .wmsf-tpl-community__reply-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; }
.wmsf-tpl-community .wmsf-tpl-community__reply-name { font-size: 13.5px; font-weight: 700; color: var(--wmsf-cm-ink); }
.wmsf-tpl-community .wmsf-tpl-community__reply-src { padding: 1px 7px; border-radius: 5px; background: var(--wmsf-cm-src); color: var(--wmsf-cm-ink-3); font-size: 11.5px; }
.wmsf-tpl-community .wmsf-tpl-community__reply-ok { font-weight: 600; color: #0d6e64; }
.wmsf-tpl-community .wmsf-tpl-community__reply-date { color: var(--wmsf-cm-faint); font-variant-numeric: tabular-nums; }
.wmsf-tpl-community .wmsf-tpl-community__reply-date::before { content: "· "; }
.wmsf-tpl-community .wmsf-tpl-community__reply-bubble {
	margin: 5px 0 0;
	padding: 8px 12px 10px 12px;
	border-radius: 0px 15px 15px 15px;
	background: var(--wmsf-cm-bubble);
	color: var(--wmsf-cm-ink-2);
	font-size: 14px;
	line-height: 1.5;
	text-wrap: pretty;
	border-left: 1px solid #1d4ed8;
}

.wmsf-tpl-community .wmsf-tpl-community__thread-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wmsf-tpl-community .wmsf-tpl-community__reveal {
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--wmsf-line-2);
	border-radius: 20px;
	background: transparent;
	color: var(--wmsf-cm-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__reveal[hidden] { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__all { margin-left: auto; padding: 7px 4px; color: var(--wmsf-cm-blue); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.wmsf-tpl-community :is(.wmsf-tpl-community__reveal, .wmsf-tpl-community__all):focus-visible { outline: 2px solid var(--wmsf-cm-blue); outline-offset: 2px; border-radius: 20px; }

/* 4. Sponsor — slot wrapper only; VIP card styling comes from
   nova-lista-vip.css (generic, loaded wherever the template renders).
   Container query: at 992–1199px the feed column is ≈360px wide, which
   is below the plugin's 721px media breakpoint yet the viewport is above
   it — the plugin's wide three-column layout fires but the container is
   too narrow.  Re-apply the plugin's own stacked (mobile) values below
   520px column width.  Values copied verbatim from nova-lista-vip.css. */
.wmsf-tpl-community .wmsf-tpl-community__ad { min-width: 0; container-type: inline-size; }
@container (max-width: 520px) {
	.wmsf-tpl-community .wmsf-tpl-community__ad .nova-lista-ad--vip {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 12px 14px;
	}
	.wmsf-tpl-community .wmsf-tpl-community__ad .nova-lista-ad-vip__side {
		display: contents;
	}
	.wmsf-tpl-community .wmsf-tpl-community__ad .nova-lista-ad-vip__tag {
		grid-column: 1 / -1;
		justify-self: start;
	}
	.wmsf-tpl-community .wmsf-tpl-community__ad .nova-lista-ad-vip__cta {
		grid-column: 1 / -1;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		padding-top: 0;
	}
}

.wmsf-tpl-community .wmsf-tpl-community__empty {
	padding: 28px;
	border-radius: 16px;
	border: 1px dashed var(--wmsf-cm-line-hover);
	text-align: center;
	color: var(--wmsf-cm-muted);
}

/* ---- Pagination (7 cards a page; built by tpl-community.js) ------------ */
.wmsf-tpl-community .wmsf-tpl-community__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}
.wmsf-tpl-community .wmsf-tpl-community__pager[hidden] { display: none; }
.wmsf-tpl-community .wmsf-tpl-community__pager button {
	min-width: 38px;
	height: 38px;
	margin: 0;
	padding: 0 12px;
	border-radius: var(--wmsf-r-pill);
	border: 1px solid var(--wmsf-line);
	background: var(--wmsf-bg);
	font: 600 14px var(--wmsf-font);
	color: var(--wmsf-ink-2);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__pager button:hover:not(:disabled, [aria-current]) { border-color: var(--wmsf-ink-3); color: var(--wmsf-ink); }
.wmsf-tpl-community .wmsf-tpl-community__pager button[aria-current="page"] { background: var(--wmsf-ink); border-color: var(--wmsf-ink); color: var(--wmsf-bg); }
.wmsf-tpl-community .wmsf-tpl-community__pager button:disabled { opacity: .4; cursor: default; }
.wmsf-tpl-community .wmsf-tpl-community__pager button:focus-visible { outline: 2px solid var(--wmsf-accent); outline-offset: 2px; }

/* ---- 이번주 인기 글 (the sidebar's first card; popular-questions.html) ---- */

.wmsf-tpl-community .wmsf-tpl-community__hot {
	padding: 16px;
	border: 1px solid var(--wmsf-line);
	border-radius: 14px;
	background: var(--wmsf-bg);
	color: var(--wmsf-cm-ink);
	-webkit-font-smoothing: antialiased;
}
/* Two-column sidebar (768–991px): the list takes the whole row. */
.wmsf-tpl-community .wmsf-alpha-category__side > .wmsf-tpl-community__hot { grid-column: 1 / -1; }
.wmsf-tpl-community .wmsf-tpl-community__hot-h { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--wmsf-cm-ink); }
.wmsf-tpl-community .wmsf-tpl-community__hot-list { margin: 0; padding: 0; list-style: none; }
.wmsf-tpl-community .wmsf-tpl-community__hot-item {
	display: flex;
	gap: 2px;
	padding: 9px 6px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background-color .2s ease;
}
.wmsf-tpl-community .wmsf-tpl-community__hot-item:focus-visible { outline: 2px solid var(--wmsf-cm-blue); outline-offset: 2px; }
.wmsf-tpl-community .wmsf-tpl-community__hot-n { flex: none; width: 18px; color: var(--wmsf-cm-rank); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wmsf-tpl-community .wmsf-tpl-community__hot-list li:nth-child(-n+3) .wmsf-tpl-community__hot-n { color: var(--wmsf-cm-blue); }
.wmsf-tpl-community .wmsf-tpl-community__hot-q {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* ---- Motion ------------------------------------------------------------- */

@keyframes wmsf-cm-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes wmsf-cm-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Ask-card ring angle; registered so the conic gradient can animate. */
@property --wmsf-cm-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wmsf-cm-spin { to { --wmsf-cm-ang: 360deg; } }

@keyframes wmsf-cm-underline { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
@keyframes wmsf-cm-rot-in { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
	.wmsf-tpl-community .wmsf-tpl-community__rot.is-in .wmsf-tpl-community__ask-accent { animation: wmsf-cm-rot-in .6s cubic-bezier(.16, 1, .3, 1) both, wmsf-cm-underline .5s var(--wmsf-ease-in-out) .15s both; }
}

/* ---- Breakpoints -------------------------------------------------------- */

@media (min-width: 992px) {
	/* Header and body are inset by the nav pill's end radius (half its 60px
	   height) so they line up with the flat part of the header's border. */
	.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-tpl-community__top { padding-inline: calc(var(--wmsf-gutter) + 30px); }

	/* Three columns in one row — topics | feed | sidebar — so all three start
	   level with the first post. The column wrapper steps aside so the topic
	   bar and the feed become grid items of the body. */
	.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-alpha-category__body { grid-template-columns: 180px minmax(0, 1fr) 280px; gap: 24px; padding-inline: calc(var(--wmsf-gutter) + 30px); }
	.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-alpha-category__col { display: contents; }
	.wmsf-tpl-community .wmsf-tpl-community__bar { grid-column: 1; grid-row: 1; }
	.wmsf-tpl-community .wmsf-tpl-community__list { grid-column: 2; grid-row: 1; }
	.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-alpha-category__side { grid-column: 3; grid-row: 1; }

	.wmsf-tpl-community .wmsf-tpl-community__bar {
		top: 96px;
		padding: 8px;
		border: 1px solid var(--wmsf-line);
		border-radius: 16px;
		background: var(--wmsf-bg);
		box-shadow: var(--wmsf-shadow-1);
	}
	.wmsf-tpl-community .wmsf-tpl-community__cats { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
	.wmsf-tpl-community .wmsf-tpl-community__cat {
		justify-content: space-between;
		height: 40px;
		padding: 0 12px;
		border: 0;
		border-radius: 10px;
		background: none;
		text-align: left;
		font-size: 15px;
		color: var(--wmsf-ink);
	}
	.wmsf-tpl-community .wmsf-tpl-community__cat[aria-pressed="true"] { background: var(--wmsf-cm-blue); color: var(--wmsf-accent-ink); }
}

@media (min-width: 1200px) {
	.wmsf-alpha-category--v2.wmsf-tpl-community .wmsf-alpha-category__body { grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 28px; }
}

@media (hover: hover) and (pointer: fine) {
	.wmsf-tpl-community .wmsf-tpl-community__new-q:hover { background: var(--wmsf-accent-hover); }
	.wmsf-tpl-community .wmsf-tpl-community__cat:not([aria-pressed="true"]):hover { border-color: var(--wmsf-accent); color: var(--wmsf-ink); }
	.wmsf-tpl-community .wmsf-tpl-community__hot-item:hover { background: var(--wmsf-cm-hot-hover); color: inherit; }

	.wmsf-tpl-community .wmsf-tpl-community__post:hover { border-color: var(--wmsf-cm-line-hover); box-shadow: var(--wmsf-cm-shadow); }
	.wmsf-tpl-community .wmsf-tpl-community__q a:hover { color: var(--wmsf-cm-blue); }
	.wmsf-tpl-community .wmsf-tpl-community__reveal:hover { background: var(--wmsf-cm-chip-hover); }
	.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn:hover { background: var(--wmsf-accent-hover); box-shadow: 0 8px 20px -10px var(--wmsf-accent); }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.wmsf-tpl-community .wmsf-tpl-community__cat:not([aria-pressed="true"]):hover { background: var(--wmsf-bg-2); }
}

@media (prefers-reduced-motion: reduce) {
	.wmsf-tpl-community :is(.wmsf-tpl-community__new-q, .wmsf-tpl-community__cat, .wmsf-tpl-community__tab, .wmsf-tpl-community__post, .wmsf-tpl-community__reveal, .wmsf-tpl-community__hot-item) { transition: none; }
	.wmsf-tpl-community .wmsf-tpl-community__ask :is(.nf-tp-ask, .nf-tp-ask-btn) { transition: none; }
	.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask { animation: none; }
	.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask::after { transition: none; }
	.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-ask-btn:active { transform: none; }
	.wmsf-tpl-community .wmsf-tpl-community__ask .nf-tp-steps :is(li, .nf-tp-step-mark, .nf-tp-step-mark svg) { transition: none; animation: none; }
	.wmsf-tpl-community :is(.wmsf-tpl-community__bot-tip, .wmsf-tpl-community__bot-eye) { animation: none; }
	.wmsf-tpl-community :is(.wmsf-tpl-community__rot, .wmsf-tpl-community__rot .wmsf-tpl-community__ask-accent) { transition: none; animation: none; }
}