/*
 * GLOBAL — every page. Tokens + base + header/footer/nav only.
 * Per-view styles live in assets/css/<view>.css (see README.md).
 *
 * The token values below are neutral starter defaults: design transfer runs
 * replace them with the mockup's palette/type per site. Everything carries
 * the wmsf- prefix.
 */

:root {
	/* Design tokens — replaced per site from the mockups. */
	--wmsf-color-ink:     #1c1c1c;
	--wmsf-color-muted:   #5c5c5c;
	--wmsf-color-surface: #ffffff;
	--wmsf-color-subtle:  #f4f4f4;
	--wmsf-color-accent:  #0a5cad;
	--wmsf-color-line:    #e2e2e2;

	/* Noto Sans KR is supplied by the WMSNova Fonts plugin; until it is present
	   the stack degrades to each OS's native Korean UI face. */
	--wmsf-font-sans: "Noto Sans KR", "Noto Sans CJK KR", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
	--wmsf-font-body: var(--wmsf-font-sans);
	--wmsf-font-heading: var(--wmsf-font-sans);

	--wmsf-space-1: 0.5rem;
	--wmsf-space-2: 1rem;
	--wmsf-space-3: 2rem;
	--wmsf-space-4: 4rem;

	--wmsf-radius: 8px;
	--wmsf-content-max: 1200px;
	--wmsf-narrow-max: 760px;

	/* ---- Bootstrap-compatible container scale (Phase 1) --------------
	   Container MAX-WIDTH tokens only. These are safe to use in var()
	   because they appear only in `max-width` declarations, never in
	   @media queries (see the .wmsf-shell banner below for why that
	   distinction matters). Values are Bootstrap's container scale. */
	--wmsf-shell-sm:  540px;
	--wmsf-shell-md:  720px;
	--wmsf-shell-lg:  960px;
	--wmsf-shell-xl:  1200px;
	--wmsf-shell-xxl: 1320px;
	--wmsf-measure-reading: 800px;   /* article body — deliberate reading width */
	--wmsf-measure-narrow:  720px;   /* forms / narrow pages */
	--wmsf-shell-gutter: 1.5rem;     /* intentional deviation from Bootstrap's .75rem:
	                                    there are no .row/.col gutters to compensate */
}

/* ---- Base ---------------------------------------------------------- */

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

body {
	margin: 0;
	font-family: var(--wmsf-font-body);
	color: var(--wmsf-color-ink);
	background: var(--wmsf-color-surface);
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* One face per element type site-wide; views may size/colour, not re-face. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wmsf-font-heading);
	line-height: 1.3;
	letter-spacing: -0.02em;
}
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

p, li, dd, dt, blockquote, figcaption, td, th, label { font-family: var(--wmsf-font-body); }

button, input, select, textarea { font-family: inherit; }

img { max-width: 100%; height: auto; }

a { color: var(--wmsf-color-accent); text-decoration: none;}

.wmsf-container {
	max-width: var(--wmsf-content-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.wmsf-container--narrow { max-width: var(--wmsf-narrow-max); }

/* =====================================================================
 * BOOTSTRAP-COMPATIBLE CONTAINER + BREAKPOINT SYSTEM  (Phase 1, additive)
 * ---------------------------------------------------------------------
 * Nothing uses .wmsf-shell yet. It ships alongside the legacy
 * .wmsf-container so views can migrate one at a time in later phases.
 *
 * 1. CANONICAL BREAKPOINTS (Bootstrap numbers, written as LITERAL px):
 *        576  sm   ·   768  md   ·   992  lg   ·   1200  xl   ·   1400  xxl
 *    CSS custom properties CANNOT be used inside a media condition:
 *    a min-width written as a var() token is invalid and silently
 *    never matches, which would strand every layout on its mobile rules.
 *    So breakpoints are hard-coded px here; the --wmsf-shell-* tokens
 *    are for container max-widths only, never for @media conditions.
 *
 * 2. REMAP from the theme's old breakpoints -> new canonical set:
 *        700 -> 768     960 -> 992     1100 -> 1200     640 -> 576
 *
 * 3. CONTAINER-WIDTH MIGRATION TABLE (the nine widths currently living in
 *    the per-view stylesheets — guidance for later phases; each view's
 *    own run confirms its mapping visually):
 *        1240 -> --wide       1200 -> default     1180 -> default
 *        1080 -> default       960 -> default      880 -> reading
 *         860 -> reading       800 -> reading      760 -> narrow
 *
 * 4. LEGACY: .wmsf-container (and .wmsf-container--narrow) is still used by
 *    header.php, footer.php, page.php, single.php, archive.php,
 *    category.php, index.php, search.php, 404.php and tpl-narrow.php.
 *    It is retired only after every view has migrated to .wmsf-shell.
 *
 * Mobile-first: base is the mobile rule, enhanced with min-width queries
 * only, no !important. box-sizing is border-box globally (see Base above),
 * so each max-width INCLUDES the horizontal gutter.
 *
 * The flat modifiers (--fluid / --narrow / --reading) are declared AFTER
 * the stepped @media blocks so, at equal specificity, their plain rules
 * win over the breakpoint max-widths at every viewport — giving a truly
 * flat width without !important.
 * ===================================================================== */

.wmsf-shell {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--wmsf-shell-gutter);
}

@media (min-width: 576px)  { .wmsf-shell { max-width: var(--wmsf-shell-sm); } }
@media (min-width: 768px)  { .wmsf-shell { max-width: var(--wmsf-shell-md); } }
@media (min-width: 992px)  { .wmsf-shell { max-width: var(--wmsf-shell-lg); } }
@media (min-width: 1200px) { .wmsf-shell { max-width: var(--wmsf-shell-xl); } }

/* --wide continues past the xl cap to xxl at the 1400 breakpoint. */
@media (min-width: 1400px) { .wmsf-shell--wide { max-width: var(--wmsf-shell-xxl); } }

/* Flat modifiers — see banner note on ordering. */
.wmsf-shell--fluid   { max-width: none; }
.wmsf-shell--narrow  { max-width: var(--wmsf-measure-narrow); }
.wmsf-shell--reading { max-width: var(--wmsf-measure-reading); }

.wmsf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wmsf-color-ink);
	color: #fff;
	padding: var(--wmsf-space-1) var(--wmsf-space-2);
	z-index: 100;
}
.wmsf-skip-link:focus { left: 0; }

/* ---- Header / nav (mobile-first) ----------------------------------- */

.wmsf-header {
	--wmsf-header-link:       #24354C;
	--wmsf-header-link-hover: #16273F;
	--wmsf-header-hover-bg:   #FAF6EF;
	--wmsf-header-focus:      #E9B860;

	border-bottom: 1px solid var(--wmsf-color-line);
	background: var(--wmsf-color-surface);
}

.wmsf-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wmsf-space-2);
	padding-block: var(--wmsf-space-1);
}

.wmsf-header__site-name {
	font-weight: 700;
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--wmsf-color-ink);
}

.wmsf-header__brand { flex: 0 0 auto; }

.wmsf-header__logo,
.wmsf-header__brand .custom-logo-link { display: block; }

.wmsf-header__logo-img,
.wmsf-header__brand .custom-logo {
	display: block;
	width: auto;
	height: 36px;
}

.wmsf-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wmsf-space-1);
	background: none;
	border: none;
	border-radius: var(--wmsf-radius);
	padding: var(--wmsf-space-1) var(--wmsf-space-2);
	font: inherit;
	cursor: pointer;
}

.wmsf-nav-toggle__icon,
.wmsf-nav-toggle__icon::before,
.wmsf-nav-toggle__icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--wmsf-color-ink);
	position: relative;
	content: "";
}
.wmsf-nav-toggle__icon::before { position: absolute; top: -6px; }
.wmsf-nav-toggle__icon::after  { position: absolute; top: 6px; }

/* Fallback nav: hidden on mobile until toggled; horizontal on desktop.
   A megamenu plugin attached to the `primary` location replaces all of this. */
.wmsf-nav { display: none; width: 100%; }
.wmsf-nav.is-open { display: block; }

.wmsf-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wmsf-nav__list a {
	display: block;
	padding: var(--wmsf-space-1) 0;
	font-weight: 600;
	text-decoration: none;
	color: var(--wmsf-header-link);
}
.wmsf-nav__list a:hover { color: var(--wmsf-header-link-hover); }
.wmsf-nav__list a:focus-visible {
	outline: 3px solid var(--wmsf-header-focus);
	outline-offset: 2px;
}
.wmsf-nav__list .sub-menu {
	list-style: none;
	padding-left: var(--wmsf-space-2);
}

/* Home renders as an icon; the link text stays in the DOM as its accessible name. */
.wmsf-nav__list .menu-item-home > a {
	position: relative;
	box-sizing: content-box;
	width: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -999em;
}
.wmsf-nav__list .menu-item-home > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11h13V9'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11h13V9'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 960px) {
	.wmsf-header__bar { min-height: 72px; }
	.wmsf-nav-toggle { display: none; }
	.wmsf-nav { display: block; width: auto; margin-left: auto; }
	.wmsf-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 2px;
	}
	.wmsf-nav__list a {
		padding: 8px 11px;
		border-radius: 8px;
		font-size: 15.5px;
		white-space: nowrap;
	}
	.wmsf-nav__list a:hover,
	.wmsf-nav__list a:focus-visible { background: var(--wmsf-header-hover-bg); }
	.wmsf-nav__list .sub-menu { display: none; } /* desktop dropdowns are the menu plugin's job */
}

/* ---- Footer --------------------------------------------------------- */

.wmsf-footer {
	--wmsf-footer-bg:        #fffdf7;
	--wmsf-footer-text:      #C3CDDB;
	--wmsf-footer-head:      #152238;
	--wmsf-footer-muted:     #152238;
	--wmsf-footer-link:      #7a5310;
	--wmsf-footer-pill:      #2C3F5B;
	--wmsf-footer-cta:       #96610D;
	--wmsf-footer-cta-hover: #A46A0E;
	--wmsf-footer-divider:   #23364F;

	margin-top: 0);
	background: var(--wmsf-footer-bg);
	color: var(--wmsf-footer-text);
	padding-block: clamp(40px, 5.5vw, 64px) 18px;
}
body:not(.home) .wmsf-footer {
	background: #152238;
}

body:not(.home) .wmsf-footer__brand, body:not(.home) .wmsf-footer__tagline, body:not(.home) .wmsf-footer__link, body:not(.home) .wmsf-footer__head, body:not(.home) .wmsf-footer__disclaimer, body:not(.home) .wmsf-footer__copyright {
	color: white;
}

body:not(.home) .wmsf-footer__pill {
	color: #fcf3de;
	border: 1px solid #fcf3de;
}

.wmsf-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 40px);
}

.wmsf-footer__brand {
	display: block;
	font-family: var(--wmsf-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--wmsf-footer-head);
	letter-spacing: -0.01em;
}

.wmsf-footer__tagline {
	margin-top: 12px;
	max-width: 300px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wmsf-footer-muted);
}

.wmsf-footer__cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--wmsf-footer-cta);
	color: #FFF;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.wmsf-footer__cta:hover,
.wmsf-footer__cta:focus {
	background: var(--wmsf-footer-cta-hover);
	color: var(--wmsf-footer-head);
}

.wmsf-footer__head {
	display: block;
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wmsf-footer-muted);
}

.wmsf-footer__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wmsf-footer__pill {
	padding: 5px 14px;
	border: 1px solid var(--wmsf-footer-pill);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wmsf-footer-link);
	text-decoration: none;
	letter-spacing: .5px;
}

.wmsf-footer__pill:hover,
.wmsf-footer__pill:focus {
	background: #1D3050;
	border-color: #3D5474;
	color: white;
}

.wmsf-footer__topics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}

.wmsf-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.wmsf-footer__link {
	font-size: 14px;
	color: var(--wmsf-footer-link);
	text-decoration: none;
}

.wmsf-footer__link:hover,
.wmsf-footer__link:focus {
	color: var(--wmsf-footer-head);
}

.wmsf-footer__disclaimer {
	margin-top: clamp(25px, 4vw, 40px);
	padding-top: 20px;
	border-top: 1px solid var(--wmsf-footer-divider);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wmsf-footer-muted);
	text-align: center;
}

.wmsf-footer__copyright {
	margin-top: 14px;
	/*display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;*/
	font-size: .75rem;
	color: var(--wmsf-footer-muted);
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 991.98px) {
	.wmsf-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.wmsf-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
 * REDESIGN 2026-10 (.design/index.html) — dark-launched: everything below
 * applies only under the `wmsf-rd` body class (inc/redesign.php) or to the
 * new markup it renders (parts/site/header.php, parts/site/footer.php).
 * New token names, so the legacy rules above keep their look meanwhile.
 * Fonts: Pretendard / Noto Sans KR when the visitor has them, otherwise
 * each OS's Korean UI face (no font files are vendored).
 * ===================================================================== */

:root {
	--wmsf-bg:           #ffffff;
	--wmsf-bg-2:         #f3f5f7;
	--wmsf-bg-3:         #e9edf1;
	--wmsf-ink:          #17202b;
	--wmsf-ink-2:        #465262;
	--wmsf-ink-3:        #647080;
	--wmsf-line:         #e3e7ec;
	--wmsf-line-2:       #cfd6de;
	--wmsf-accent:       #0b6e64;
	--wmsf-accent-hover: #09594f;
	--wmsf-accent-ink:   #ffffff;
	--wmsf-accent-tint:  #e5f3f0;
	--wmsf-accent-tint-2:#cce8e2;
	--wmsf-accent-text:  #0a6157;
	--wmsf-glow-a:       #3cc2ae;
	--wmsf-glow-b:       #2a79d4;
	--wmsf-glow-c:       #8ad8a0;
	--wmsf-glass:        rgb(255 255 255 / .72);
	--wmsf-glass-line:   rgb(23 32 43 / .08);
	--wmsf-ad-ink:       #6b5418;
	--wmsf-ad-gold:      #c9a227;
	--wmsf-sp-blue:      #2563eb;
	--wmsf-dir-accent:       #2563eb;
	--wmsf-dir-accent-hover: #1d4ed8;
	--wmsf-dir-tint:         rgb(37 99 235 / .12);
	--wmsf-dir-text:         #1d4ed8;
	--wmsf-dir-sky:          #7dd3fc;
	--wmsf-shadow-1: 0 1px 2px rgb(23 32 43 / .06), 0 4px 14px rgb(23 32 43 / .06);
	--wmsf-shadow-2: 0 2px 6px rgb(23 32 43 / .06), 0 22px 48px -16px rgb(23 32 43 / .22);
	--wmsf-skeleton:     #e9edf1;
	--wmsf-skeleton-hi:  #f6f8fa;
	--wmsf-font: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
	--wmsf-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
	--wmsf-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--wmsf-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
	--wmsf-r-surface: 22px;
	--wmsf-r-pill:    999px;
	--wmsf-gutter:    clamp(16px, 4vw, 32px);
	--wmsf-page:      1160px;
	--wmsf-nav-max:   100%;
	--wmsf-top-offset: 84px;
}
@media (min-width: 576px)  { :root { --wmsf-nav-max: 540px; } }
@media (min-width: 768px)  { :root { --wmsf-nav-max: 720px; } }
@media (min-width: 992px)  { :root { --wmsf-nav-max: 960px; } }
@media (min-width: 1200px) { :root { --wmsf-nav-max: 1140px; } }
@media (min-width: 1400px) { :root { --wmsf-nav-max: 1320px; } }

:root:has(body.wmsf-rd) { scroll-padding-top: 96px; }

/* ---- Base (redesign) ---------------------------------------------- */

body.wmsf-rd {
	padding-top: var(--wmsf-top-offset);
	background: var(--wmsf-bg);
	color: var(--wmsf-ink);
	font-family: var(--wmsf-font);
	font-size: 17px;
	line-height: 1.65;
	letter-spacing: -0.005em;
	word-break: keep-all;
	overflow-wrap: break-word;
}
body.wmsf-rd.wmsf-flush-top { padding-top: 0; }

body.wmsf-rd :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, td, th, label) { font-family: var(--wmsf-font); }
body.wmsf-rd :is(h1, h2, h3) { letter-spacing: -0.028em; line-height: 1.22; text-wrap: balance; }
body.wmsf-rd ::selection { background: var(--wmsf-accent-tint-2); color: var(--wmsf-ink); }
body.wmsf-rd :focus-visible { outline: 2px solid var(--wmsf-accent); outline-offset: 2px; }

.wmsf-rd .wmsf-i { width: 1.15em; height: 1.15em; flex: none; }
.wmsf-rd .wmsf-wrap { max-width: var(--wmsf-page); margin-inline: auto; padding-inline: var(--wmsf-gutter); }
.wmsf-rd .wmsf-wrap--nav { max-width: calc(var(--wmsf-nav-max) + var(--wmsf-gutter) * 2); }

.wmsf-rd .wmsf-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wmsf-ink);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
}
.wmsf-rd .wmsf-brand__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--wmsf-accent);
	color: var(--wmsf-accent-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.wmsf-rd .wmsf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--wmsf-r-pill);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .14s var(--wmsf-ease-out), box-shadow .2s ease;
}
.wmsf-rd .wmsf-btn .wmsf-i { width: 16px; height: 16px; }
.wmsf-rd .wmsf-btn:active { transform: scale(.97); }
.wmsf-rd .wmsf-btn--primary { background: var(--wmsf-accent); color: var(--wmsf-accent-ink); }
.wmsf-rd .wmsf-btn--quiet { background: transparent; color: var(--wmsf-ink); }

@media (min-width: 768px) {
	.wmsf-rd .wmsf-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
	.wmsf-rd .wmsf-btn .wmsf-i { width: 18px; height: 18px; }
}
@media (hover: hover) and (pointer: fine) {
	.wmsf-rd .wmsf-btn--primary:hover { background: var(--wmsf-accent-hover); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--wmsf-accent) 70%, transparent); }
	.wmsf-rd .wmsf-btn--quiet:hover { background: var(--wmsf-bg-2); }
}

/* ---- Header: floating glass pill ---------------------------------- */

.wmsf-top {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 30;
	padding: 12px var(--wmsf-gutter) 0;
	pointer-events: none;
}
body.admin-bar .wmsf-top { top: 46px; }

.wmsf-top__pill {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: var(--wmsf-nav-max);
	height: 60px;
	margin-inline: auto;
	padding: 0 8px 0 14px;
	background: var(--wmsf-glass);
	border: 1px solid var(--wmsf-glass-line);
	border-radius: var(--wmsf-r-pill);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
	backdrop-filter: saturate(170%) blur(18px);
	box-shadow: var(--wmsf-shadow-1);
	pointer-events: auto;
}
.wmsf-top__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.wmsf-top__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wmsf-glow-a), var(--wmsf-glow-b));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.wmsf-top__nav { display: none; }
.wmsf-top__list { display: flex; margin: 0; padding: 0; list-style: none; }
.wmsf-top__item { position: relative; display: flex; align-items: center; }
.wmsf-top__link {
	padding: 7px;
	border-radius: var(--wmsf-r-pill);
	color: var(--wmsf-ink-2);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.wmsf-top__link[aria-current="page"],
.wmsf-top__link.is-parent { color: var(--wmsf-ink); font-weight: 700; }

/* Nav icons: Home = icon only; 커뮤니티 = chat icon + label. */
.wmsf-top__link.has-icon { display: inline-flex; align-items: center; gap: 5px; }
.wmsf-top__link.has-icon .wmsf-navico { width: 17px; height: 17px; flex: none; }
.wmsf-top__link.has-icon--home .wmsf-navico { width: 18px; height: 18px; }
.wmsf-mnav a .wmsf-navico { width: 18px; height: 18px; flex: none; margin-right: 7px; }
.wmsf-navico--chat path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
	.wmsf-navico--chat .wmsf-chat__a { animation: wmsf-chat-a 5s ease-in-out infinite; }
	.wmsf-navico--chat .wmsf-chat__b { animation: wmsf-chat-b 5s ease-in-out infinite; }
}
/* Mostly still; a short, soft bob of each bubble in turn. */
@keyframes wmsf-chat-a {
	0%, 62%, 100% { transform: translate(0, 0); }
	70% { transform: translate(-.5px, -1.2px); }
	78% { transform: translate(0, 0); }
}
@keyframes wmsf-chat-b {
	0%, 70%, 100% { transform: translate(0, 0); }
	78% { transform: translate(.5px, 1.2px); }
	86% { transform: translate(0, 0); }
}

.wmsf-top__dd-btn {
	display: grid;
	place-items: center;
	width: 18px;
	height: 28px;
	margin-left: -6px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--wmsf-ink-2);
	cursor: pointer;
}
.wmsf-top__dd-btn .wmsf-i { width: 12px; height: 12px; opacity: .6; transition: transform .25s var(--wmsf-ease-out); }
.wmsf-top__dd-btn[aria-expanded="true"] .wmsf-i { transform: rotate(180deg); }

.wmsf-top__dd {
	position: absolute;
	top: calc(100% + 20px);
	left: -6px;
	display: grid;
	gap: 2px;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--wmsf-line);
	border-radius: 16px;
	background: var(--wmsf-bg);
	box-shadow: var(--wmsf-shadow-2);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .3s var(--wmsf-ease-out);
}
.wmsf-top__dd::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 22px; }
.wmsf-top__dd[hidden] { display: none; }
.wmsf-top__dd.is-open { opacity: 1; transform: none; }
.wmsf-top__dd a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--wmsf-ink-2);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.wmsf-top__dd a:first-child { color: var(--wmsf-ink); font-weight: 700; }
.wmsf-top__dd a[aria-current="page"] { background: var(--wmsf-accent-tint); color: var(--wmsf-accent-text); }
.wmsf-top__dd a:focus-visible { outline-offset: -2px; }

.wmsf-top__end { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.wmsf-top__end .wmsf-btn { height: 36px; min-height: 36px; padding: 0 15px; font-size: 13px; }
.wmsf-top__end .wmsf-btn--quiet { display: none; }
.wmsf-top__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wmsf-ink);
	cursor: pointer;
}
.wmsf-top__menu .wmsf-i { width: 22px; height: 22px; }

.wmsf-mnav {
	max-width: var(--wmsf-nav-max);
	max-height: calc(100svh - 96px);
	margin: 8px auto 0;
	padding: 10px 16px 14px;
	overflow: auto;
	background: var(--wmsf-glass);
	border: 1px solid var(--wmsf-glass-line);
	border-radius: 24px;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: var(--wmsf-shadow-2);
	transform-origin: top center;
	pointer-events: auto;
}
.wmsf-mnav[hidden] { display: none; }
.wmsf-mnav__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.wmsf-mnav a {
	display: flex;
	align-items: center;
	min-height: 42px;
	color: var(--wmsf-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.wmsf-mnav a[aria-current="page"] { color: var(--wmsf-accent-text); }
.wmsf-mnav__item--has { grid-column: 1 / -1; }
.wmsf-mnav__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.wmsf-mnav .wmsf-mnav__subs a {
	min-height: 32px;
	padding: 0 12px;
	border-radius: var(--wmsf-r-pill);
	background: var(--wmsf-bg-2);
	color: var(--wmsf-ink-2);
	font-size: 13.5px;
	font-weight: 600;
}
.wmsf-mnav .wmsf-mnav__subs a[aria-current="page"] { background: var(--wmsf-accent-tint); color: var(--wmsf-accent-text); }

@media (prefers-reduced-motion: no-preference) {
	.wmsf-mnav:not([hidden]) { animation: wmsf-drop .26s var(--wmsf-ease-out) both; }
}
@keyframes wmsf-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
	.wmsf-top__dd { transform: none; transition: opacity .1s ease; }
}

@media (min-width: 783px) {
	body.admin-bar .wmsf-top { top: 32px; }
}
@media (min-width: 768px) {
	.wmsf-top__end .wmsf-btn { height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (min-width: 992px) {
	.wmsf-top__nav { display: block; }
	.wmsf-top__end .wmsf-btn { padding: 0 11px; font-size: 13.5px; }
	.wmsf-top__end .wmsf-btn--quiet { display: inline-flex; }
	.wmsf-top__menu,
	.wmsf-mnav { display: none; }
	.wmsf-top .wmsf-brand { gap: 0; font-size: 0; }
	.wmsf-top__link { padding: 7px 6px; font-size: 13px; }
}
@media (min-width: 1200px) {
	.wmsf-top .wmsf-brand { gap: 10px; font-size: 18px; }
	.wmsf-top__link { padding: 7px; font-size: 13.5px; }
	.wmsf-top__end .wmsf-btn { padding: 0 14px; font-size: 14px; }
}
@media (min-width: 1400px) {
	.wmsf-top__pill { gap: 20px; padding-left: 18px; }
	.wmsf-top__list { gap: 2px; }
	.wmsf-top__link { padding: 8px 10px; font-size: 14.5px; }
	.wmsf-top__end { gap: 6px; }
	.wmsf-top__end .wmsf-btn { height: 44px; min-height: 44px; padding: 0 18px; font-size: 15px; }
}
@media (hover: hover) and (pointer: fine) {
	.wmsf-top__link:hover { background: var(--wmsf-bg-2); color: var(--wmsf-ink); }
	.wmsf-top__dd a:hover { background: var(--wmsf-bg-2); color: var(--wmsf-ink); }
}

/* ---- Sponsor row (parts/site/sponsor-row.php) ---------------------- */

.wmsf-sponsors {
	--wmsf-sponsor-hover: var(--wmsf-sp-blue);
	position: relative;
	z-index: 1;
	border-block: 1px solid color-mix(in oklab, var(--wmsf-accent) 16%, transparent);
	background: linear-gradient(90deg, var(--wmsf-accent-tint), color-mix(in oklab, var(--wmsf-accent-tint) 40%, var(--wmsf-bg)));
}
/* Phones: the "광고" tag sits above the row, so the cards run edge to edge
   (gutter to gutter). nova-lista-strip.js fits 2+ whole cards to the width. */
.wmsf-rd .wmsf-sponsors__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
	padding: 6px 0 8px;
}
.wmsf-sponsors__head { flex: none; padding-left: var(--wmsf-gutter); line-height: 1; }
.wmsf-sponsors__tag {
	display: inline-block;
	padding: 0 4px;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: var(--wmsf-accent-text);
	font-size: 10px;
	font-weight: 800;
	line-height: 14px;
}
.wmsf-sponsors__list { flex: none; min-width: 0; padding-inline: var(--wmsf-gutter); }
/* Cards share the row equally and never scroll or get cropped: the strip
   script shows only as many as fit whole (2 on phones, up to the placement's
   "Ads shown at a time"). Until it runs, the row stays invisible (it reveals
   itself after 1.5s regardless) so visitors never see the unshuffled cards. */
.wmsf-sponsors__list .nova-lista-ads {
	display: flex;
	gap: 8px;
	transition: opacity .25s ease;
}
.wmsf-sponsors__list .nova-lista-ads--tpl-strip:not([data-nova-lista-strip-ready]) {
	opacity: 0;
	animation: wmsf-sponsors-reveal 0s linear 1.5s forwards;
}
@keyframes wmsf-sponsors-reveal { to { opacity: 1; } }
.wmsf-sponsors__list .nova-lista-ad {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 320px;
	height: 46px;
	padding: 0 5px 0 5px;
	border: 1px solid var(--wmsf-line);
	border-radius: 18px;
	background: var(--wmsf-bg);
	color: var(--wmsf-ink);
	text-decoration: none;
	transition: transform .25s var(--wmsf-ease-out), border-color .2s ease, box-shadow .25s ease;
}
.wmsf-sponsors__list .nova-lista-ad[hidden] { display: none; }
.wmsf-sponsors__list .nova-lista-ad--premium {
	border-color: transparent;
	background:
		linear-gradient(var(--wmsf-bg), var(--wmsf-bg)) padding-box,
		conic-gradient(from 200deg, var(--wmsf-glow-a), var(--wmsf-glow-b), var(--wmsf-accent), var(--wmsf-glow-a)) border-box;
}
.wmsf-sponsors__list .nova-lista-ad:active { transform: scale(.97); }
.wmsf-sponsors__list :is(.nova-lista-ad__badge, .nova-lista-ad__tags) { display: none; }
.wmsf-sponsors__list .nova-lista-ad__photo {
	flex: none;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wmsf-bg-3);
}
.wmsf-sponsors__list .nova-lista-ad__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s var(--wmsf-ease-out);
}
.wmsf-sponsors__list .nova-lista-ad:not(.nova-lista-ad--premium) .nova-lista-ad__photo img { padding: 3px; background: #fff; object-fit: contain; }
.wmsf-sponsors__list .nova-lista-ad__body { display: grid; min-width: 0; line-height: 1.3; }
/* Always two lines: the name, then the city · category line under it. */
.wmsf-sponsors__list .nova-lista-ad__headline { overflow: hidden; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.wmsf-sponsors__list .nova-lista-ad__description { overflow: hidden; color: var(--wmsf-ink-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.wmsf-sponsors__more {
	display: none;
	flex: none;
	align-items: center;
	gap: 4px;
	color: var(--wmsf-ad-ink);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.wmsf-sponsors__more .wmsf-i { width: 14px; height: 14px; }

/* Before the strip script runs, phones show only the first two cards. */
@media (max-width: 767.98px) {
	.wmsf-sponsors__list .nova-lista-ads:not([data-nova-lista-strip-ready]) .nova-lista-ad:nth-child(n+3) { display: none; }
}
@media (min-width: 768px) {
	.wmsf-rd .wmsf-sponsors__row { flex-direction: row; align-items: center; gap: 16px; min-height: 88px; padding: 12px var(--wmsf-gutter); }
	.wmsf-sponsors__head { padding-left: 0; line-height: normal; }
	.wmsf-sponsors__tag { padding: 0 6px; border-radius: 6px; font-size: 12px; line-height: 20px; }
	.wmsf-sponsors__list { flex: 1; padding-inline: 0; }
	.wmsf-sponsors__more { display: inline-flex; }
	.wmsf-sponsors__list .nova-lista-ad { gap: 12px; height: 64px; padding: 0 16px 0 8px; }
	.wmsf-sponsors__list .nova-lista-ad__photo { width: 48px; height: 48px; border-radius: 14px; }
	.wmsf-sponsors__list .nova-lista-ad__headline { font-size: 15px; }
	.wmsf-sponsors__list .nova-lista-ad__description { font-size: 12.5px; }
}
@media (hover: hover) and (pointer: fine) {
	.wmsf-sponsors__list .nova-lista-ad:hover {
		border-color: var(--wmsf-sponsor-hover);
		box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--wmsf-sponsor-hover) 55%, transparent);
		transform: translateY(-2px);
	}
	.wmsf-sponsors__list .nova-lista-ad--premium:hover {
		background:
			linear-gradient(var(--wmsf-bg), var(--wmsf-bg)) padding-box,
			linear-gradient(var(--wmsf-sponsor-hover), var(--wmsf-sponsor-hover)) border-box;
	}
	.wmsf-sponsors__list .nova-lista-ad:hover .nova-lista-ad__photo img { transform: scale(1.06); }
	.wmsf-sponsors__more:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
	.wmsf-sponsors__list :is(.nova-lista-ads, .nova-lista-ad, .nova-lista-ad img) { transition: none; }
}
/* Tablet + phone: header row (광고 / 광고 문의) above a full-width card row.
   Deliberate max-width exception (owner-supplied breakpoint: 991.98px).
   NOT ported from design: fixed 300px card width, max-width: none, scroll-snap,
   scroll-padding, negative margins, right-edge mask, and 560px peek rule —
   all would break nova-lista-strip.js (whole-card rotation). */
@media (max-width: 991.98px) {
	.wmsf-rd .wmsf-sponsors__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head more" "list list";
		align-items: center;
		gap: 10px 12px;
		min-height: 0;
		padding-block: 14px 16px;
		padding-inline: 0;
	}
	.wmsf-sponsors__head { grid-area: head; padding-left: var(--wmsf-gutter); line-height: normal; }
	.wmsf-sponsors__more { grid-area: more; display: inline-flex; min-height: 36px; padding-right: var(--wmsf-gutter); font-size: 14px; }
	.wmsf-sponsors__list { grid-area: list; padding-inline: var(--wmsf-gutter); }
	.wmsf-sponsors__list .nova-lista-ads { gap: 10px; }
	.wmsf-sponsors__list .nova-lista-ad { height: 68px; padding: 0 16px 0 10px; }
	.wmsf-sponsors__list .nova-lista-ad__photo { width: 48px; height: 48px; border-radius: 14px; }
	.wmsf-sponsors__list .nova-lista-ad__headline { font-size: 16px; font-weight: 740; }
	.wmsf-sponsors__list .nova-lista-ad__description { font-size: 13.5px; }
}

/* ---- Footer (design: .cursor/templates/footer/ 시안 B) ------------ */

.wmsf-foot {
	background: #0f1a22;
	color: #e6edf2;
	padding-block: 0 32px;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.wmsf-foot *, .wmsf-foot *::before, .wmsf-foot *::after { box-sizing: border-box; }
.wmsf-foot :is(h2, p) { margin: 0; }
.wmsf-foot ul { margin: 0; padding: 0; list-style: none; }
.wmsf-foot svg { width: 1em; height: 1em; flex: none; }

/* inner wrapper: 1160px + clamp gutters — matches --wmsf-page / --wmsf-gutter */
.wmsf-foot__wrap { max-width: var(--wmsf-page); margin-inline: auto; padding-inline: var(--wmsf-gutter); }

/* ── CTA banner ────────────────────────────────────────────────────── */
.wmsf-foot__cta-wrap { padding-top: 48px; }
.wmsf-foot__cta {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 20px 32px;
	padding: 32px clamp(20px, 4vw, 40px);
	border-radius: 22px;
	background: radial-gradient(60% 120% at 100% 0%, rgb(60 194 174 / .35), transparent 60%), linear-gradient(135deg, var(--wmsf-accent), #0a4f5c);
	color: #fff;
}
.wmsf-foot__cta-k { font-size: 13px; font-weight: 750; color: #9fe6d8; letter-spacing: .02em; }
.wmsf-foot__cta h2 { margin-top: 6px; font-size: clamp(21px, 2.6vw, 26px); font-weight: 780; letter-spacing: -0.03em; line-height: 1.3; color: #fff; }
.wmsf-foot__cta p { margin-top: 6px; font-size: 15px; color: rgb(255 255 255 / .82); }
.wmsf-foot__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: #fff;
	color: #0b4f49;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.wmsf-foot__cta-btn svg { width: 16px; height: 16px; }
.wmsf-foot__cta-arrow { display: none; } /* secondary label hidden; SVG arrow sufficient */
.wmsf-foot__cta-btn:active { transform: scale(.97); }

/* ── Main grid: brand + nav columns ────────────────────────────────── */
.wmsf-foot__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 48px;
	padding-top: 48px;
}
.wmsf-foot__brand p { margin-top: 14px; color: #a9b7c2; font-size: 15px; line-height: 1.6; max-width: 30ch; }

/* Logo */
.wmsf-foot__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	font-weight: 760;
	letter-spacing: -0.03em;
}
.wmsf-foot__logo-mark {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -0.04em;
	background: var(--wmsf-accent);
	color: #fff;
}

/* Ad-inquiry button */
.wmsf-foot__ad {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgb(255 255 255 / .07);
	border: 1px solid rgb(255 255 255 / .1);
	transition: background-color .2s ease;
}
.wmsf-foot__ad svg { width: 16px; height: 16px; color: #f3c969; }

/* Nav columns grid */
.wmsf-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wmsf-foot__col h2 { font-size: 13px; font-weight: 750; color: #7f909d; margin-bottom: 10px; letter-spacing: .02em; }
.wmsf-foot__col ul { display: grid; gap: 0; }
.wmsf-foot__col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; text-decoration: none; color: #e6edf2; transition: color .15s ease; }
.wmsf-foot__col .wmsf-foot__sub { color: #b4c1cb; font-size: 14.5px; }

/* ── Bottom bar ─────────────────────────────────────────────────────── */
.wmsf-foot__bottom {
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid rgb(255 255 255 / .1);
	display: flex;
	justify-content: space-between;
	gap: 12px 32px;
	flex-wrap: wrap;
	font-size: 13px;
	line-height: 1.65;
	color: #8494a1;
}
.wmsf-foot__bottom p:first-child { max-width: 72ch; }

/* Focus */
.wmsf-foot a:focus-visible { outline: 2px solid #6fe0cc; outline-offset: 3px; border-radius: 6px; }

/* ── Responsive (mobile-first) ──────────────────────────────────────── */
@media (min-width: 641px) {
	.wmsf-foot__cta { grid-template-columns: minmax(0, 1fr) auto; }
	.wmsf-foot__cta-btn { justify-self: auto; }
}
@media (min-width: 961px) {
	.wmsf-foot__main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); }
	.wmsf-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
	.wmsf-foot__col a:hover { color: #6fe0cc; }
	.wmsf-foot__ad:hover { background: rgb(255 255 255 / .12); }
	.wmsf-foot__cta-btn:hover { background: #e9f7f4; }
}