/* =========================================================================
   Soulfriend — global stylesheet
   "Refined Editorial — 치유의 여백"
   Body: SUIT 300/400/700  /  Display: BookkMyungjo 400/700
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    --sf-bg:         #fbf9f5;
    --sf-bg-soft:    #f4ecdc;
    --sf-paper:      #ffffff;
    --sf-ink:        #1c1f24;
    --sf-ink-soft:   #4a5160;
    --sf-muted:      #8a92a0;
    --sf-line:       #e9e3d4;
    --sf-line-soft:  #f0eadd;
    --sf-primary:    #2c4a5e;
    --sf-primary-dark: #16293a;
    --sf-accent:     #b86b3c;
    --sf-accent-soft:rgba(184,107,60,0.12);
    --sf-glass:      rgba(251,249,245,0.82);

    --sf-radius-sm:  6px;
    --sf-radius:     12px;
    --sf-radius-lg:  20px;

    --sf-shadow-1:   0 1px 2px rgba(28,31,36,0.04), 0 4px 12px rgba(28,31,36,0.04);
    --sf-shadow-2:   0 6px 24px rgba(28,31,36,0.08), 0 1px 3px rgba(28,31,36,0.04);
    --sf-shadow-3:   0 24px 60px -20px rgba(22,41,58,0.32);

    --sf-ease:       cubic-bezier(0.32, 0.72, 0.32, 1);
    --sf-fast:       180ms;
    --sf-mid:        320ms;
    --sf-slow:       560ms;

    --sf-max:        1200px;
    --sf-gutter:     clamp(20px, 4vw, 48px);
    --sf-section-y:  clamp(80px, 10vw, 144px);
    --sf-section-y-tight: clamp(48px, 6vw, 80px);

    --sf-display:    "BookkMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Apple SD Gothic Neo", serif;
    --sf-sans:       "Suit", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;

    --sf-hd: 88px;       /* header height (desktop) */
    --sf-hd-tight: 68px; /* scrolled */
    --sf-hd-mobile: 64px;
}

/* ---------- Reset polish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sf-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sf-ink);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--sf-primary); text-decoration: none; transition: color var(--sf-fast) var(--sf-ease); }
a:hover { color: var(--sf-primary-dark); }
:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 3px; border-radius: 3px; }

.sf-no-scroll { overflow: hidden; }

.sf-skiplink {
    position: absolute; top: -100px; left: 16px;
    padding: 8px 14px;
    background: var(--sf-primary); color: #fff;
    border-radius: var(--sf-radius-sm);
    z-index: 1000;
    transition: top var(--sf-fast) var(--sf-ease);
}
.sf-skiplink:focus { top: 12px; color: #fff; }

/* ---------- Typography scale ---------- */
.sf-section__title,
.sf-hero__title,
h1.entry-title,
.sf-counselor-single__name,
.sf-counselor__name,
.sf-program__title,
.sf-news__panel h2 {
    font-family: var(--sf-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: var(--sf-ink);
}

h1, h2, h3, h4 { color: var(--sf-ink); margin: 0; }
p { margin: 0 0 1em; }
hr { border: 0; height: 1px; background: var(--sf-line); margin: 2em 0; }

/* ---------- Layout ---------- */
.sf-main { min-height: 60vh; padding-top: var(--sf-hd); }
.sf-section { padding: var(--sf-section-y) 0; }
.sf-section__inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 0 var(--sf-gutter);
}
.sf-section__head { text-align: center; margin-bottom: clamp(28px, 4vw, 56px); }
.sf-section__title {
    font-size: clamp(1.7rem, 2.2vw + 0.6rem, 2.4rem);
    margin: 0 0 .5rem;
}
.sf-section__lead {
    color: var(--sf-ink-soft);
    margin: 0;
    font-size: 1.0625rem;
}
.sf-section__more { text-align: center; margin-top: clamp(28px, 4vw, 56px); }
.sf-section__empty { text-align: center; color: var(--sf-muted); padding: 48px 0; }

/* Subtle alternating background for sections */
.sf-section--quick      { background: var(--sf-paper); }
.sf-section--news       { background: var(--sf-paper); }
.sf-section--counselor-archive { padding-top: clamp(80px, 10vw, 120px); }

/* ---------- Buttons ---------- */
.sf-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--sf-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: background var(--sf-fast) var(--sf-ease), transform var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
    box-shadow: var(--sf-shadow-1);
}
.sf-button:hover {
    background: var(--sf-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--sf-shadow-2);
}
.sf-button--ghost {
    background: transparent;
    color: var(--sf-primary);
    border-color: currentColor;
    box-shadow: none;
}
.sf-button--ghost:hover { background: rgba(44,74,94,0.06); color: var(--sf-primary-dark); }

/* ========================================================================
   Header
   ======================================================================== */
.sf-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 90;
    background: var(--sf-glass);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: height var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease);
    height: var(--sf-hd);
}
.sf-header.is-scrolled {
    height: var(--sf-hd-tight);
    border-bottom-color: var(--sf-line);
    box-shadow: var(--sf-shadow-1);
}
.sf-header__inner {
    max-width: var(--sf-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--sf-gutter);
    display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
}
.sf-header__logo {
    display: flex; align-items: center;
    flex-shrink: 0;
}
.sf-header__logo img {
    height: clamp(34px, 3vw, 44px);
    width: auto;
}

.sf-header__nav { flex: 1; display: flex; justify-content: center; }
.sf-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sf-header__user {
    display: flex; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.sf-header__user a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--sf-ink-soft);
    border-radius: 999px;
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.sf-header__user a:hover { background: rgba(28,31,36,0.06); color: var(--sf-ink); }
.sf-header__user a.sf-header__user-admin {
    background: var(--sf-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.sf-header__user a.sf-header__user-admin:hover {
    background: var(--sf-primary-dark);
    color: #fff;
}

/* Admin dropdown (header user-area) — separate from .sf-menu, but reuses
   the same visual language. Anchored to the right edge so it stays inside
   the viewport when "웹사이트관리" sits near the header's right side. */
.sf-admin-dropdown { position: relative; }
.sf-admin-dropdown > .sub-menu {
    list-style: none; padding: 8px; margin: 0;
    position: absolute;
    top: calc(100% + 4px); right: 0;
    transform: translateY(8px);
    min-width: 200px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sf-fast) var(--sf-ease),
                transform var(--sf-mid) var(--sf-ease),
                visibility var(--sf-fast) var(--sf-ease);
    z-index: 100;
}
.sf-admin-dropdown:hover > .sub-menu,
.sf-admin-dropdown:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.sf-admin-dropdown > .sub-menu li a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--sf-ink-soft);
    border-radius: var(--sf-radius-sm);
    white-space: nowrap;
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.sf-admin-dropdown > .sub-menu li a:hover {
    background: var(--sf-accent-soft);
    color: var(--sf-primary-dark);
}
.sf-admin-submenu__sep {
    height: 1px;
    background: var(--sf-line);
    margin: 6px 8px;
}

/* ========================================================================
   Primary menu (desktop)
   ======================================================================== */
.sf-menu {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center;
    gap: clamp(2px, 0.8vw, 16px);
    flex-wrap: nowrap;
}
.sf-menu > li { position: relative; flex-shrink: 0; }
.sf-menu > li > a,
.sf-menu > li > .menu-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 8px;
    font-size: clamp(13px, 0.95vw, 14.5px);
    font-weight: 400;
    color: var(--sf-ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: color var(--sf-fast) var(--sf-ease);
    position: relative;
}
.sf-menu > li > a::after,
.sf-menu > li > .menu-link::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px; bottom: 8px;
    height: 1px;
    background: var(--sf-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sf-mid) var(--sf-ease);
}
.sf-menu > li:hover > a::after,
.sf-menu > li:focus-within > a::after,
.sf-menu > li.current-menu-item > a::after,
.sf-menu > li.current-menu-parent > a::after { transform: scaleX(1); }

.sf-menu > li:hover > a,
.sf-menu > li:focus-within > a { color: var(--sf-primary); }

.sf-menu .menu-item-has-children > a::before {
    /* small caret — explicit color so it stays legible on light backgrounds */
    content: '';
    width: 6px; height: 6px;
    border-right: 1.6px solid var(--sf-primary);
    border-bottom: 1.6px solid var(--sf-primary);
    transform: rotate(45deg);
    margin-right: 4px;
    margin-bottom: 4px;
    opacity: 0.85;
    order: 2;
    transition: transform var(--sf-fast) var(--sf-ease),
                opacity var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.sf-menu > li.menu-item-has-children:hover > a::before,
.sf-menu > li.menu-item-has-children:focus-within > a::before {
    opacity: 1;
    border-color: var(--sf-accent);
    transform: rotate(225deg) translate(-1px, -1px);
}

/* Sub-menu (dropdown) */
.sf-menu .sub-menu {
    list-style: none; padding: 8px; margin: 0;
    position: absolute;
    top: calc(100% - 4px); left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sf-fast) var(--sf-ease),
                transform var(--sf-mid) var(--sf-ease),
                visibility var(--sf-fast) var(--sf-ease);
    z-index: 100;
}
.sf-menu li:hover > .sub-menu,
.sf-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.sf-menu .sub-menu li a,
.sf-menu .sub-menu li .menu-link {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--sf-ink-soft);
    border-radius: var(--sf-radius-sm);
    white-space: nowrap;
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.sf-menu .sub-menu li a:hover,
.sf-menu .sub-menu li.current-menu-item a {
    background: var(--sf-accent-soft);
    color: var(--sf-primary-dark);
}

/* ========================================================================
   Burger + mobile off-canvas
   ======================================================================== */
.sf-burger {
    display: none; /* shown <980px below */
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 999px;
    align-items: center; justify-content: center;
    flex-direction: column;
    gap: 5px;
    margin-left: 4px;
    transition: background var(--sf-fast) var(--sf-ease);
}
.sf-burger:hover { background: rgba(28,31,36,0.06); }
.sf-burger__icon {
    display: block;
    overflow: visible;
    color: var(--sf-ink);
}
.sf-burger__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform var(--sf-mid) var(--sf-ease),
                opacity var(--sf-fast) var(--sf-ease);
}
.sf-burger[aria-expanded="true"] .sf-burger__line--top { transform: translateY(5px) rotate(45deg); }
.sf-burger[aria-expanded="true"] .sf-burger__line--mid { opacity: 0; }
.sf-burger[aria-expanded="true"] .sf-burger__line--bot { transform: translateY(-5px) rotate(-45deg); }

.sf-mobile {
    position: fixed; inset: 0; z-index: 200;
}
.sf-mobile[hidden] { display: none; }
.sf-mobile__scrim {
    position: absolute; inset: 0;
    background: rgba(20,28,36,0.5);
    opacity: 0;
    transition: opacity var(--sf-mid) var(--sf-ease);
}
.sf-mobile__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 84vw);
    background: var(--sf-paper);
    box-shadow: -24px 0 60px rgba(20,28,36,0.18);
    transform: translateX(100%);
    transition: transform var(--sf-mid) var(--sf-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex; flex-direction: column;
}
.sf-mobile.is-open .sf-mobile__scrim { opacity: 1; }
.sf-mobile.is-open .sf-mobile__panel { transform: translateX(0); }
.sf-mobile__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--sf-line);
}
.sf-mobile__brand {
    font-family: var(--sf-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--sf-primary);
}
.sf-mobile__close {
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--sf-ink);
    transition: background var(--sf-fast) var(--sf-ease);
}
.sf-mobile__close:hover { background: rgba(28,31,36,0.06); }

.sf-mobile__nav { padding: 8px 0; flex: 1; }
.sf-mobile-menu, .sf-mobile-menu .sub-menu { list-style: none; padding: 0; margin: 0; }
.sf-mobile-menu > li {
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-mobile-menu > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    font-size: 16px; font-weight: 400;
    color: var(--sf-ink);
}
.sf-mobile-menu .menu-item-has-children > a::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.6px solid var(--sf-muted);
    border-bottom: 1.6px solid var(--sf-muted);
    transform: rotate(45deg);
    transition: transform var(--sf-fast) var(--sf-ease);
    margin-bottom: 3px;
}
.sf-mobile-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(225deg);
    margin-bottom: -3px;
}
.sf-mobile-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    background: var(--sf-bg);
    transition: max-height var(--sf-mid) var(--sf-ease);
}
.sf-mobile-menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }
.sf-mobile-menu .sub-menu a {
    display: block;
    padding: 12px 24px 12px 40px;
    font-size: 15px;
    color: var(--sf-ink-soft);
}
.sf-mobile-menu .sub-menu a:hover { background: var(--sf-accent-soft); color: var(--sf-primary-dark); }

.sf-mobile__cta {
    padding: 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    border-top: 1px solid var(--sf-line);
}
.sf-mobile__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--sf-primary);
    color: #fff;
    font-weight: 700; font-size: 14px;
}
.sf-mobile__btn--ghost { background: transparent; color: var(--sf-primary); border: 1px solid currentColor; }
.sf-mobile__btn--admin {
    grid-column: 1 / -1;
    background: var(--sf-primary-dark);
    color: #fff;
}
.sf-mobile__btn--admin:hover { background: var(--sf-ink); color: #fff; }

/* Mobile admin dropdown — <details>/<summary> with a sub-menu list */
.sf-mobile__admin {
    grid-column: 1 / -1;
    display: block;
}
.sf-mobile__admin > summary {
    list-style: none;
    cursor: pointer;
    width: 100%;
    position: relative;
}
.sf-mobile__admin > summary::-webkit-details-marker { display: none; }
.sf-mobile__admin > summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    transition: transform var(--sf-fast) var(--sf-ease);
}
.sf-mobile__admin[open] > summary::after { transform: rotate(225deg); }
.sf-mobile__admin > .sub-menu {
    list-style: none; padding: 8px 4px 0; margin: 8px 0 0;
    display: grid; gap: 2px;
}
.sf-mobile__admin > .sub-menu li a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--sf-ink-soft);
    border-radius: var(--sf-radius-sm);
}
.sf-mobile__admin > .sub-menu li a:hover {
    background: var(--sf-accent-soft);
    color: var(--sf-primary-dark);
}
.sf-mobile__admin .sf-admin-submenu__sep {
    height: 1px;
    background: var(--sf-line);
    margin: 6px 8px;
}

/* ========================================================================
   Footer
   ======================================================================== */
.sf-footer {
    background: #11171f;
    color: rgba(245,245,245,0.7);
    padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 56px);
    margin-top: clamp(56px, 10vw, 120px);
    font-size: 14px;
}
.sf-footer__inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 0 var(--sf-gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 4vw, 48px);
}
.sf-footer__legal {
    grid-column: 1 / -1;
    display: flex; gap: 18px;
    list-style: none; padding: 0; margin: 0 0 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 16px;
    font-size: 13px;
}
.sf-footer__legal a { color: rgba(255,255,255,0.78); }
.sf-footer__legal a:hover { color: #fff; }

/* Support links (후원·자원봉사) — moved out of GNB into the footer, given
   display-font emphasis above the legal row. */
.sf-footer__support {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.sf-footer__support a {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-footer__support a:hover { color: var(--sf-accent); }

/* Closing band — warm cream coda outside the footer, mirroring the hero. */
.sf-closing {
    background: var(--sf-bg-soft);
    padding: clamp(56px, 8vw, 96px) var(--sf-gutter);
    text-align: center;
}
.sf-closing__line {
    font-family: var(--sf-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--sf-primary);
    margin: 0;
    word-break: keep-all;
}
.sf-footer__org p { margin: 4px 0; }
.sf-footer__org strong { color: #fff; font-weight: 700; margin-right: 6px; }
.sf-footer__copy { margin-top: 24px !important; color: rgba(255,255,255,0.4); font-size: 12px; }
.sf-footer__sns {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.sf-footer__sns a {
    display: inline-flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,0.78);
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-footer__sns a:hover { color: #fff; }
.sf-footer__sns-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.78);
    transition: color var(--sf-fast) var(--sf-ease), transform var(--sf-fast) var(--sf-ease);
}
.sf-footer__sns a:hover .sf-footer__sns-icon { color: #fff; transform: translateY(-1px); }

/* ========================================================================
   Sub-page header
   ======================================================================== */
.sf-page-header {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4.5vw, 60px);
    background-color: var(--sf-bg-soft);
    background-image:
        linear-gradient(180deg, rgba(251,249,245,0.55) 0%, rgba(251,249,245,0.4) 45%, rgba(251,249,245,0.78) 100%),
        url('/wp-content/uploads/2026/05/freepik-header-pastel-room.jpg');
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
    isolation: isolate;
}
/* Hide the legacy inline SVG decoration — the photo background replaces it. */
.sf-page-header__bg { display: none; }
.sf-page-header__inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 0 var(--sf-gutter);
    text-align: center;
}
.sf-page-header__inner > * { margin-left: auto; margin-right: auto; }
.sf-page-header__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 16px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    color: var(--sf-accent);
    font-family: var(--sf-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(184,107,60,0.2);
}
.sf-page-header__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem);
    letter-spacing: -0.035em;
    line-height: 1.16;
    margin: 0 0 28px;
    color: var(--sf-ink);
}

/* ---------- Breadcrumbs ---------- */
.sf-breadcrumbs {
    font-family: var(--sf-sans);
    font-size: 12.5px;
    color: var(--sf-muted);
    letter-spacing: 0.01em;
}
.sf-breadcrumbs ol {
    list-style: none; margin: 0; padding: 0;
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}
.sf-breadcrumbs li {
    display: inline-flex; align-items: center; gap: 8px;
}
.sf-breadcrumbs li + li::before {
    content: '';
    width: 4px; height: 4px;
    border-right: 1px solid rgba(28,31,36,0.28);
    border-bottom: 1px solid rgba(28,31,36,0.28);
    transform: rotate(-45deg);
}
.sf-breadcrumbs a {
    color: var(--sf-ink-soft);
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-breadcrumbs a:hover { color: var(--sf-primary); }
.sf-breadcrumbs [aria-current="page"] {
    color: var(--sf-primary-dark);
    font-weight: 700;
}

/* ========================================================================
   Sub-page body
   ======================================================================== */
.sf-page {
    padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
    background: var(--sf-paper);
}
.sf-page__inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 0 var(--sf-gutter);
}
.sf-page__inner--narrow { max-width: 760px; }
.sf-page__intro { margin-bottom: clamp(32px, 4vw, 56px); }
.sf-page__lead {
    color: var(--sf-ink-soft);
    font-size: 16px;
    line-height: 1.75;
    max-width: 640px;
    margin: 0;
}

/* ---------- Prose body ---------- */
/* The .sf-prose body holds imported i-web markup that carries inline
   font-family / font-size / table-border attributes. We override aggressively
   so the page reads in SUIT 400 / 16px / 1.5 line-height regardless of source.
   Headings escape this rule via the more-specific selectors below. */
.sf-prose {
    font-family: var(--sf-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sf-ink-soft);
    word-break: keep-all;
}
.sf-prose,
.sf-prose * {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.sf-prose p { margin: 0 0 1em; }
.sf-prose strong, .sf-prose b { font-weight: 700 !important; color: var(--sf-ink); }
.sf-prose em, .sf-prose i { font-style: italic; }

/* Belt-and-suspenders: hide any i-web footer/SNS markup that survives the
   import-time cleaner so the dark site footer is the only one users see. */
.sf-prose footer,
.sf-prose #footer,
.sf-prose #footer004,
.sf-prose .site-footer,
.sf-prose .footer-legal,
.sf-prose .footer-sns,
.sf-prose .sns-links,
.sf-prose [class*="footer"] { display: none !important; }

/* Remove the i-web table grid that wraps imported page content. */
.sf-prose table,
.sf-prose tbody,
.sf-prose thead,
.sf-prose tr,
.sf-prose td,
.sf-prose th {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.sf-prose table { width: 100% !important; border-collapse: collapse; margin: 0; }
.sf-prose td, .sf-prose th { vertical-align: top; }
.sf-prose [bgcolor] { background: transparent !important; }

/* Headings still use the display serif at their own scale. */
.sf-prose h1, .sf-prose h2, .sf-prose h3, .sf-prose h4 {
    font-family: var(--sf-display) !important;
    color: var(--sf-ink);
    letter-spacing: -0.03em;
    font-weight: 700 !important;
}
.sf-prose h2 { font-size: 1.625rem !important;  line-height: 1.34 !important; margin: 2.2em 0 0.7em; }
.sf-prose h3 { font-size: 1.3125rem !important; line-height: 1.4 !important;  margin: 1.9em 0 0.55em; }
.sf-prose h4 { font-size: 1.125rem !important;  line-height: 1.5 !important;  margin: 1.5em 0 0.4em; }
.sf-prose ul, .sf-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.sf-prose li { margin: 0.4em 0; }
.sf-prose blockquote {
    margin: 2em 0;
    padding: 20px 28px;
    border-left: 3px solid var(--sf-accent);
    background: var(--sf-bg);
    color: var(--sf-ink);
    font-family: var(--sf-display);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.7;
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
}
.sf-prose img { max-width: 100%; height: auto; border-radius: var(--sf-radius); margin: 1.6em 0; }
.sf-prose figure { margin: 1.6em 0; }
.sf-prose a {
    color: var(--sf-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-prose a:hover { color: var(--sf-accent); }
.sf-prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--sf-line); }
.sf-prose table {
    width: 100%; border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 15px;
}
.sf-prose th, .sf-prose td {
    padding: 12px 14px;
    border: 1px solid var(--sf-line);
    text-align: left;
}
.sf-prose th { background: var(--sf-bg); font-weight: 700; color: var(--sf-ink); }
.sf-prose iframe { max-width: 100%; }

/* Spacing between block elements (rhythm with 1.7 line-height) */
.sf-prose p + p { margin-top: 0.9em; }
.sf-prose img + p,
.sf-prose figure + p { margin-top: 1.4em; }

/* ==========================================================================
   About-History page — flip "우리의 여정" before the timeline, then style the
   timeline (.timelinewrap > .timeline-item × N) as a vertical chronicle with
   spine line + accent dots so each event is clearly delineated.
   ========================================================================== */
.sf-prose .section1 .bot:has(.timelinewrap) {
    display: flex !important;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
    margin-top: clamp(48px, 6vw, 80px);
}
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap { order: 1; }
.sf-prose .section1 .bot:has(.timelinewrap) > .timelinewrap { order: 2; }

/* The "우리의 여정" card — image-left, text-right two-column layout.
   The image spans both rows of the grid, so rows split its height evenly.
   We pull the heading to the bottom of row 1 and the paragraph to the top
   of row 2 (with a tight 12px gap), keeping the text block visually
   centered while the title and body stay close together. */
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 0;
    align-items: center;
    text-align: left;
}
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    text-align: left;
    margin: 0 0 12px !important;
}
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: left;
    margin: 0 !important;
}
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > div[style*="margin-top"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0 !important;
    text-align: left !important;
}
.sf-prose .section1 .bot:has(.timelinewrap) > .titwrap img {
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-2);
    margin: 0;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
}
@media (max-width: 720px) {
    .sf-prose .section1 .bot:has(.timelinewrap) > .titwrap {
        grid-template-columns: 1fr;
    }
    .sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > h3,
    .sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > p,
    .sf-prose .section1 .bot:has(.timelinewrap) > .titwrap > div[style*="margin-top"] {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Section eyebrow above the timeline so users know they're entering "연혁" */
.sf-prose .timelinewrap {
    position: relative;
    padding: 28px 0 0 calc(120px + 12px);
    margin: 0;
}
.sf-prose .timelinewrap::after {
    content: '연혁  ·  Chronicle';
    display: block;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--sf-display) !important;
    font-size: 0.95rem !important;
    color: var(--sf-muted) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
}
/* Vertical spine line */
.sf-prose .timelinewrap::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 64px; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%, var(--sf-line) 4%, var(--sf-line) 96%, transparent 100%);
}

/* Each event row: year (left) + dot (on spine) + content (right) */
.sf-prose .timeline-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 0 1fr;
    column-gap: 32px;
    padding: 14px 0 14px 0;
    align-items: baseline;
    transition: transform var(--sf-fast) var(--sf-ease);
}
.sf-prose .timeline-item:hover { transform: translateX(4px); }
/* Year — positioned in the gutter to the left of the spine */
.sf-prose .timeline-item .year {
    position: absolute !important;
    left: -120px !important;
    top: 14px !important;
    width: 96px !important;
    text-align: right !important;
    font-family: var(--sf-display) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--sf-primary) !important;
    letter-spacing: 0 !important;
}
/* Dot on the spine */
.sf-prose .timeline-item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 22px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--sf-paper);
    border: 2px solid var(--sf-accent);
    box-shadow: 0 0 0 5px var(--sf-bg);
    z-index: 1;
    transition: transform var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
}
.sf-prose .timeline-item:hover::before {
    transform: scale(1.25);
    border-color: var(--sf-primary);
}
/* Content body */
.sf-prose .timeline-item .content {
    grid-column: 2;
    padding: 4px 0;
}
.sf-prose .timeline-item .content p {
    margin: 0 0 6px !important;
    line-height: 1.55 !important;
    color: var(--sf-ink) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    transition: font-size var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.sf-prose .timeline-item .content p:last-child { margin-bottom: 0 !important; }
.sf-prose .timeline-item:hover .content p {
    font-size: 16.5px !important;
    color: var(--sf-primary-dark) !important;
}

/* Tighter spacing for mobile + collapse year above content */
@media (max-width: 720px) {
    .sf-prose .timelinewrap { padding-left: 24px; }
    .sf-prose .timelinewrap::before { left: 12px; }
    .sf-prose .timeline-item { padding-left: 0; }
    .sf-prose .timeline-item .year {
        position: static !important;
        width: auto !important;
        text-align: left !important;
        margin-bottom: 4px;
        display: block;
    }
    .sf-prose .timeline-item::before { left: -18px; top: 14px; }
    .sf-prose .timeline-item .content { padding-left: 12px; }
}

/* About-Board page — organisational chart images.
   The PC and mobile variants both render in DOM order; show only the
   appropriate one and center-align it within the prose width. */
.sf-prose .org-scroll { text-align: center; margin: clamp(56px, 7vw, 96px) 0 24px; }
.sf-prose .org-scroll img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.sf-prose .org-scroll .m-img { display: none; }
@media (max-width: 720px) {
    .sf-prose .org-scroll .pc-img { display: none; }
    .sf-prose .org-scroll .m-img { display: block; }
}

/* i-web slogan block (.slg with .txt1/.txt2 wrapping single-letter spans) —
   displayed as oversized display-font ornament above the section title. */
.sf-prose .slg {
    display: block !important;
    margin: 0 0 32px !important;
    line-height: 1.05 !important;
}
.sf-prose .slg .txt1,
.sf-prose .slg .txt2 {
    display: block !important;
    font-family: var(--sf-display) !important;
    font-size: 2rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    font-weight: 400 !important;
    color: var(--sf-accent) !important;
}
.sf-prose .slg .txt1 span,
.sf-prose .slg .txt2 span {
    display: inline !important;
    font-family: var(--sf-display) !important;
    font-size: 2rem !important;
    line-height: 1.05 !important;
    color: inherit !important;
}

/* i-web sub-page sections that carry both an image (.imgwrap) and a text
   block (.txtwrap / .titwrap) — render side-by-side following DOM order so
   alternating sections naturally zigzag (image-left ↔ text-left). The
   image column is intentionally narrower than text so headings and body
   copy carry the visual weight. */
.sf-prose .section .top:has(.imgwrap),
.sf-prose .section .bot:has(.imgwrap) {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    margin-top: clamp(48px, 6vw, 80px);
}
.sf-prose .section .imgwrap { margin: 0; max-width: 420px; width: 100%; }
/* Image hugs the outer edge of the content area: first child → left edge,
   last child → right edge. */
.sf-prose .section .top > .imgwrap:first-child,
.sf-prose .section .bot > .imgwrap:first-child { justify-self: start; }
.sf-prose .section .top > .imgwrap:last-child,
.sf-prose .section .bot > .imgwrap:last-child { justify-self: end; }
.sf-prose .section .imgwrap img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-2);
    margin: 0;
}
.sf-prose .section .img1 { position: relative; }
.sf-prose .section .img1 .front { display: none; }
.sf-prose .section .titwrap,
.sf-prose .section .txtwrap { margin: 0; }
.sf-prose .section .titwrap h3,
.sf-prose .section .txtwrap h3 { margin-top: 0; margin-bottom: 0.6em; }
@media (max-width: 768px) {
    .sf-prose .section .top:has(.imgwrap),
    .sf-prose .section .bot:has(.imgwrap) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sf-prose .section .imgwrap { max-width: 360px; }
}

/* ==========================================================================
   About-Coop "주요사업 / 기타사업" — diagram-style icon-card grid
   The imported markup is a flat list of <div class="business-card"> /
   <div class="other-business-item"> blocks; we transform them into a
   3-column grid of cards, each card carries a numbered SVG icon at the
   top, a display-font title, and soft-ink description body. The first
   <p> in each card is the title; remaining content is treated as body.
   ========================================================================== */
.sf-prose .business-cards,
.sf-prose .other-business-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin: 24px 0 0 !important;
    counter-reset: sf-biz-counter;
}
@media (max-width: 880px) {
    .sf-prose .business-cards,
    .sf-prose .other-business-list { grid-template-columns: 1fr; }
}

.sf-prose .business-card,
.sf-prose .other-business-item {
    counter-increment: sf-biz-counter;
    position: relative;
    padding: 28px 24px 26px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-1);
    overflow: hidden;
    transition: transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.sf-prose .business-card:hover,
.sf-prose .other-business-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}

/* Numbered ribbon in the upper-right corner */
.sf-prose .business-card::after,
.sf-prose .other-business-item::after {
    content: counter(sf-biz-counter, decimal-leading-zero) !important;
    position: absolute;
    top: 18px; right: 22px;
    font-family: var(--sf-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--sf-accent) !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
}

/* Icon bubble at the top of each card */
.sf-prose .business-card::before,
.sf-prose .other-business-item::before {
    content: '' !important;
    display: block;
    width: 52px; height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background-color: var(--sf-bg-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    box-shadow: inset 0 0 0 1px var(--sf-line);
}

/* 주요사업 — 3 distinctive icons */
/* 1. People / community heart — 전 국민 정신건강 증진 */
.sf-prose .business-cards > .business-card:nth-child(1)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b86b3c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-9.5-9.5C0 7 3.5 3 7.5 3c1.8 0 3.2 0.9 4.5 2.5C13.3 3.9 14.7 3 16.5 3 20.5 3 24 7 21.5 11.5 19 16.5 12 21 12 21z"/></svg>') !important;
}
/* 2. Shield / protection — 자살예방 */
.sf-prose .business-cards > .business-card:nth-child(2)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b86b3c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>') !important;
}
/* 3. Building / institutional partnership — 위탁 정신건강증진 */
.sf-prose .business-cards > .business-card:nth-child(3)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b86b3c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-7h6v7"/><path d="M3 21h18"/></svg>') !important;
}

/* 기타사업 — 3 distinctive icons */
/* 1. Book / education — 조합원 교육 */
.sf-prose .other-business-list > .other-business-item:nth-child(1)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c4a5e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v16H6.5a2.5 2.5 0 0 0-2.5 2.5V4.5z"/><path d="M4 4.5v16"/><path d="M8 7h8M8 11h6"/></svg>') !important;
}
/* 2. Clasped hands / cooperation — 협력 사업 */
.sf-prose .other-business-list > .other-business-item:nth-child(2)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c4a5e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="3"/><circle cx="16" cy="8" r="3"/><path d="M2 21c0-3 2.5-5.5 6-5.5"/><path d="M22 21c0-3-2.5-5.5-6-5.5"/><path d="M9 16c0-2 1.3-3.5 3-3.5s3 1.5 3 3.5v5h-6v-5z"/></svg>') !important;
}
/* 3. Megaphone — 홍보 사업 */
.sf-prose .other-business-list > .other-business-item:nth-child(3)::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232c4a5e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a2 2 0 0 0 2 2h2l8 5V4L7 9H5a2 2 0 0 0-2 2z"/><path d="M19 8a4 4 0 0 1 0 8"/></svg>') !important;
}

/* Card title — first <p> directly under .business-card / .other-business-item */
.sf-prose .business-card > p:first-of-type,
.sf-prose .other-business-item > p:first-of-type {
    font-family: var(--sf-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 14px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sf-line-soft);
}

/* Card body — unified bulleted style across 주요사업 / 기타사업 */
.sf-prose .business-card .card-content p,
.sf-prose .other-business-item > p:not(:first-of-type) {
    position: relative;
    padding-left: 14px;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 0 8px !important;
}
.sf-prose .business-card .card-content p::before,
.sf-prose .other-business-item > p:not(:first-of-type)::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sf-accent);
    opacity: 0.6;
}
.sf-prose .business-card .card-content p:last-child,
.sf-prose .other-business-item > p:last-child { margin-bottom: 0 !important; }
.sf-prose .business-card .card-content strong,
.sf-prose .other-business-item strong {
    font-weight: 700 !important;
    color: var(--sf-primary) !important;
    margin-right: 4px;
}

/* Vertical rhythm between the two diagram blocks */
.sf-prose .section2 .bot {
    display: block;
    margin-top: clamp(64px, 8vw, 112px);
}
.sf-prose .section2 .bot > .titwrap { margin-top: clamp(48px, 6vw, 72px) !important; }
.sf-prose .section2 .bot > .titwrap:first-child { margin-top: 0 !important; }
.sf-prose .section2 .bot h3 {
    text-align: center;
    margin-bottom: 8px !important;
}
.sf-prose .section2 .bot h3 + p,
.sf-prose .section2 .bot h3 ~ p:first-of-type {
    text-align: center;
    color: var(--sf-ink-soft) !important;
}

/* ---------- Single post extras ---------- */
.sf-post__meta { color: var(--sf-muted); font-size: 12.5px; margin: 0 0 18px; letter-spacing: 0.02em; }
.sf-post__cat { color: var(--sf-accent); font-weight: 700; }
.sf-post__hero { margin: 0 0 32px; }
.sf-post__hero img { width: 100%; border-radius: var(--sf-radius); }
.sf-post__nav {
    display: flex; justify-content: space-between; gap: 16px;
    padding-top: 32px; margin-top: 56px;
    border-top: 1px solid var(--sf-line);
    font-size: 13px;
}
.sf-post__nav a { color: var(--sf-ink-soft); transition: color var(--sf-fast) var(--sf-ease); }
.sf-post__nav a:hover { color: var(--sf-primary); }

/* ---------- Archive list (resource/faq/donor + categories) ---------- */
.sf-archive { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sf-archive__link {
    display: flex; gap: 24px;
    padding: 20px 24px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    color: var(--sf-ink);
    transition: box-shadow var(--sf-mid) var(--sf-ease),
                transform var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease);
}
.sf-archive__link:hover {
    box-shadow: var(--sf-shadow-2);
    border-color: transparent;
    transform: translateY(-2px);
    color: var(--sf-ink);
}
.sf-archive__thumb {
    width: 220px; height: 140px;
    object-fit: cover;
    border-radius: var(--sf-radius-sm);
    flex-shrink: 0;
}
.sf-archive__body { flex: 1; }
.sf-archive__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0 0 8px;
    line-height: 1.4;
    letter-spacing: -0.03em;
}
.sf-archive__excerpt {
    font-size: 13.5px;
    color: var(--sf-ink-soft);
    margin: 0 0 12px;
    line-height: 1.7;
}
.sf-archive__meta {
    color: var(--sf-muted);
    font-size: 12px;
    margin: 0;
    font-feature-settings: "tnum";
}

/* WP pagination override */
.sf-page .pagination,
.sf-page .nav-links {
    display: flex; gap: 6px; justify-content: center;
    margin-top: 48px;
}
.sf-page .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--sf-ink-soft);
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.sf-page .page-numbers:hover { background: var(--sf-accent-soft); color: var(--sf-accent); }
.sf-page .page-numbers.current { background: var(--sf-primary); color: #fff; }

@media (max-width: 640px) {
    .sf-archive__link { flex-direction: column; }
    .sf-archive__thumb { width: 100%; height: 180px; }
}

/* ========================================================================
   Counselor archive + single — editorial portrait roster (no card borders)
   --------------------------------------------------------------------------
   The visual unit is the photograph itself. Each portrait sits in a 4:5
   frame with subtle rounded corners and a soft shadow on hover; the meta
   (name / title / tags) flows underneath without a containing box, so
   varying tag-row heights never disturb the grid's photographic rhythm.
   ======================================================================== */

/* Editorial intro for the archive page (eyebrow + display heading) */
.sf-page--counselor-archive .sf-page__intro {
    text-align: center;
    margin: 0 auto clamp(48px, 6vw, 80px);
    max-width: 720px;
}
.sf-page--counselor-archive .sf-roster-eyebrow,
.sf-page--program-status .sf-roster-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sf-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sf-accent);
    line-height: 1;
    margin: 0 0 16px;
}
.sf-page--counselor-archive .sf-roster-eyebrow::before,
.sf-page--counselor-archive .sf-roster-eyebrow::after,
.sf-page--program-status .sf-roster-eyebrow::before,
.sf-page--program-status .sf-roster-eyebrow::after {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--sf-accent);
}
.sf-page--counselor-archive .sf-roster-heading,
.sf-page--program-status .sf-roster-heading {
    font-family: var(--sf-display);
    font-size: clamp(1.875rem, 3.2vw + 0.4rem, 2.625rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.035em;
    color: var(--sf-ink);
    margin: 0 0 18px;
}
.sf-page--counselor-archive .sf-page__lead {
    font-family: var(--sf-sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--sf-ink-soft);
    margin: 0;
    word-break: keep-all;
}

/* Grid */
.sf-counselors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
    list-style: none; padding: 0; margin: 0;
    counter-reset: sf-roster;
}
@media (max-width: 1080px) { .sf-counselors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .sf-counselors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Card — borderless, transparent background. The whole tile is the link. */
.sf-counselor { counter-increment: sf-roster; }
.sf-counselor__link {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--sf-ink);
    text-decoration: none;
    transition: transform var(--sf-fast) var(--sf-ease);
}
.sf-counselor__link:hover { transform: translateY(-3px); color: var(--sf-ink); }

/* Photograph — uniform 4:5 portrait frame; hover lift + image scale-up */
.sf-counselor__photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--sf-radius);
    background: var(--sf-bg-soft);
    aspect-ratio: 4 / 5;
    box-shadow: 0 1px 2px rgba(28,31,36,0.04);
    transition: box-shadow var(--sf-mid) var(--sf-ease);
}
.sf-counselor__link:hover .sf-counselor__photo-wrap {
    box-shadow: 0 18px 32px -16px rgba(28,31,36,0.22);
}
.sf-counselor__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--sf-slow) var(--sf-ease),
                filter var(--sf-mid) var(--sf-ease);
    filter: saturate(0.92);
}
.sf-counselor__link:hover .sf-counselor__photo {
    transform: scale(1.04);
    filter: saturate(1);
}

/* Counselor index numeral (01/02/...) — top-left corner of photo */
.sf-counselor__photo-wrap::before {
    content: counter(sf-roster, decimal-leading-zero);
    position: absolute;
    top: 14px; left: 14px;
    z-index: 1;
    padding: 4px 10px;
    font-family: var(--sf-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--sf-paper);
    background: rgba(28,31,36,0.42);
    backdrop-filter: blur(4px);
    border-radius: 999px;
}

/* Portrait silhouette placeholder when no thumbnail — soft line-art on cream */
.sf-counselor__photo--placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sf-bg-soft) 0%, #efe2c8 100%);
    color: var(--sf-primary);
    user-select: none;
}
.sf-counselor__photo--placeholder svg {
    width: 46%; height: auto;
    opacity: 0.36;
    transition: opacity var(--sf-mid) var(--sf-ease),
                transform var(--sf-mid) var(--sf-ease);
}
.sf-counselor__link:hover .sf-counselor__photo--placeholder svg {
    opacity: 0.5;
    transform: translateY(-2px);
}

/* Body — flows under the photo without a containing box */
.sf-counselor__body {
    padding: 18px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sf-counselor__name {
    font-family: var(--sf-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.03em;
    color: var(--sf-ink);
    line-height: 1.2;
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-counselor__link:hover .sf-counselor__name { color: var(--sf-accent); }

.sf-counselor__title {
    font-family: var(--sf-sans);
    color: var(--sf-ink-soft);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}

/* Specialty tags — minimal type chips (no fill, hairline divider above) */
.sf-counselor__tags {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    padding: 10px 0 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--sf-line-soft);
}
.sf-counselor__tags li {
    font-family: var(--sf-sans);
    font-size: 12px;
    line-height: 1.4;
    color: var(--sf-accent);
    font-weight: 400;
    letter-spacing: -0.005em;
    position: relative;
}
.sf-counselor__tags li:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -10px;
    color: var(--sf-line);
}

/* People page (page-templates/people.php) — static, non-linked counselor
   cards grouped into sections. Reuses .sf-counselor* but drops the <a> hover. */
.sf-counselor__static {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sf-people-group { margin-top: clamp(56px, 7vw, 104px); }
.sf-people-group:first-of-type { margin-top: clamp(28px, 4vw, 48px); }
.sf-people-group__head {
    margin-bottom: clamp(22px, 2.6vw, 34px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-people-group__title {
    font-family: var(--sf-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--sf-ink);
    margin: 6px 0 0;
}
.sf-people-group__desc {
    font-family: var(--sf-sans);
    color: var(--sf-ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 10px 0 0;
    max-width: 64ch;
    word-break: keep-all;
}

/* Gallery (page-templates/gallery.php) — photo wall from `gallery` category. */
.sf-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 720px) { .sf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-gallery__link { display: block; text-decoration: none; color: var(--sf-ink); }
.sf-gallery__photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--sf-radius);
    background: var(--sf-bg-soft);
    aspect-ratio: 4 / 3;
    box-shadow: var(--sf-shadow-1);
    transition: box-shadow var(--sf-mid) var(--sf-ease);
}
.sf-gallery__link:hover .sf-gallery__photo-wrap { box-shadow: var(--sf-shadow-2); }
.sf-gallery__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--sf-slow) var(--sf-ease);
}
.sf-gallery__link:hover .sf-gallery__photo { transform: scale(1.04); }
.sf-gallery__photo--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--sf-bg-soft) 0%, #efe2c8 100%);
}
.sf-gallery__caption {
    font-family: var(--sf-sans);
    font-size: 14px;
    color: var(--sf-ink-soft);
    margin: 10px 0 0;
    word-break: keep-all;
}

.sf-counselor-single {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.sf-counselor-single__photo img { width: 100%; border-radius: var(--sf-radius); }
.sf-counselor-single__name { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 6px; }
.sf-counselor-single__title { color: var(--sf-muted); margin: 0 0 18px; }
.sf-counselor-single__bio { margin: 28px 0; line-height: 1.85; color: var(--sf-ink-soft); }
.sf-counselor-single__cta { margin-top: 32px; }

/* ========================================================================
   Forms (register / donate / volunteer)
   ======================================================================== */
.sf-form {
    display: grid; gap: 14px;
    max-width: 520px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--sf-shadow-1);
}
.sf-form label {
    display: grid; gap: 6px;
    font-size: 13px; font-weight: 400; color: var(--sf-ink-soft);
}
.sf-form input[type="text"],
.sf-form input[type="email"],
.sf-form input[type="tel"],
.sf-form input[type="password"],
.sf-form select,
.sf-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm);
    font: inherit; font-size: 15px;
    background: var(--sf-bg);
    transition: border-color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus {
    outline: none;
    border-color: var(--sf-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(44,74,94,0.08);
}
.sf-form textarea { resize: vertical; min-height: 90px; }
.sf-form__checkbox { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.sf-form__msg { margin: 4px 0 0; font-size: 13px; color: var(--sf-primary); }
.sf-form button[type="submit"] { justify-self: flex-start; margin-top: 6px; }

/* ========================================================================
   Reveal-on-scroll
   ======================================================================== */
[data-sf-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--sf-slow) var(--sf-ease), transform var(--sf-slow) var(--sf-ease);
}
[data-sf-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-sf-reveal][data-sf-delay="1"] { transition-delay: 80ms; }
[data-sf-reveal][data-sf-delay="2"] { transition-delay: 160ms; }
[data-sf-reveal][data-sf-delay="3"] { transition-delay: 240ms; }
[data-sf-reveal][data-sf-delay="4"] { transition-delay: 320ms; }

/* ========================================================================
   Breakpoints
   ======================================================================== */
@media (max-width: 1280px) {
    .sf-menu .menu-item-has-children > a::before { display: none; }
    .sf-menu > li > a { padding: 10px 6px; }
}
@media (max-width: 980px) {
    .sf-header__nav, .sf-header__user { display: none; }
    .sf-burger { display: inline-flex; }
    .sf-header { height: var(--sf-hd-mobile); }
    .sf-header.is-scrolled { height: var(--sf-hd-mobile); }
    .sf-header__actions { margin-left: auto; }
    .sf-main { padding-top: var(--sf-hd-mobile); }
    .sf-counselor-single { grid-template-columns: 1fr; }
    .sf-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sf-section { padding: clamp(40px, 12vw, 80px) 0; }
    .sf-footer__legal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 10px;
    }
    .sf-footer__legal li { min-width: 0; }
    .sf-footer__legal a { display: inline-block; }
}

/* ==========================================================================
   Location page (오시는 길)
   --------------------------------------------------------------------------
   Editorial layout: hero with display-font heading + Google Maps embed,
   contact trio in numbered cards, transit cards with Seoul Metro line pills.
   All selectors prefixed `.sf-prose .sf-loc` to override the
   `.sf-prose * { ... !important }` reset.
   ========================================================================== */
.sf-prose .sf-loc { display: block; }
.sf-prose .sf-loc * { box-sizing: border-box; }

/* — Hero ——————————————————————————————————————————————————————— */
.sf-prose .sf-loc__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: clamp(36px, 5vw, 72px);
    row-gap: 32px;
    align-items: center;
    margin: 0 0 clamp(80px, 9vw, 128px) !important;
    animation: sfLocFade 0.8s var(--sf-ease) both;
}
.sf-prose .sf-loc__hero-text { display: flex; flex-direction: column; gap: 18px; }

.sf-prose .sf-loc__eyebrow,
.sf-prose .sf-loc__sec-eyebrow {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
    color: var(--sf-accent) !important;
    text-transform: uppercase;
    margin: 0 0 4px !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.sf-prose .sf-loc__eyebrow::before,
.sf-prose .sf-loc__sec-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--sf-accent);
}

.sf-prose .sf-loc__heading {
    font-family: var(--sf-display) !important;
    font-size: clamp(2rem, 3.4vw + 0.4rem, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.035em !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
}
.sf-prose .sf-loc__heading em {
    font-style: normal !important;
    color: var(--sf-accent) !important;
    font-weight: 700 !important;
}

.sf-prose .sf-loc__tagline {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    max-width: 28em;
}

.sf-prose .sf-loc__address {
    margin: 18px 0 0 !important;
    padding: 22px 26px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-left: 3px solid var(--sf-accent);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-1);
    font-style: normal;
    display: grid;
    gap: 4px;
}
.sf-prose .sf-loc__address-label {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    color: var(--sf-muted) !important;
    margin: 0 0 6px !important;
}
.sf-prose .sf-loc__address-line {
    display: block;
    font-family: var(--sf-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: var(--sf-ink) !important;
    letter-spacing: -0.005em !important;
}
.sf-prose .sf-loc__address-line strong {
    font-weight: 700 !important;
    font-size: 17px !important;
    color: var(--sf-primary) !important;
    letter-spacing: -0.015em !important;
}

.sf-prose .sf-loc__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px !important;
}
.sf-prose .sf-loc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-family: var(--sf-sans) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
    color: var(--sf-primary) !important;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow-1);
    transition: transform var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
    text-decoration: none !important;
}
.sf-prose .sf-loc__btn:hover {
    transform: translateY(-2px);
    border-color: var(--sf-accent-soft);
    color: var(--sf-accent) !important;
}
.sf-prose .sf-loc__btn--primary {
    background: var(--sf-primary);
    color: #fff !important;
    border-color: var(--sf-primary);
}
.sf-prose .sf-loc__btn--primary:hover {
    background: var(--sf-primary-dark);
    color: #fff !important;
    border-color: var(--sf-primary-dark);
}
.sf-prose .sf-loc__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* — Map embed ——————————————————————————————————————————————————— */
.sf-prose .sf-loc__map {
    position: relative;
    margin: 0 !important;
    aspect-ratio: 5 / 4;
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    background: var(--sf-bg-soft);
    box-shadow: var(--sf-shadow-2);
    border: 1px solid var(--sf-line);
}
.sf-prose .sf-loc__map iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    filter: saturate(0.85) contrast(1.02);
}
.sf-prose .sf-loc__map-caption {
    position: absolute;
    top: 16px; left: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    border: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow-1);
    pointer-events: none;
}
.sf-prose .sf-loc__map-label {
    font-family: var(--sf-display) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
}
.sf-prose .sf-loc__map-coords {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    color: var(--sf-ink-soft) !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
}

/* — Section heads (used by contact + transit) ——————————————————————— */
.sf-prose .sf-loc__sec-head {
    margin: 0 0 36px !important;
    text-align: center;
}
.sf-prose .sf-loc__sec-eyebrow { justify-content: center; }
.sf-prose .sf-loc__sec-eyebrow::after {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--sf-accent);
}
.sf-prose .sf-loc__sec-title {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.5rem, 2.2vw + 0.4rem, 2.05rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 12px 0 0 !important;
}

/* — Contact trio ————————————————————————————————————————————————— */
.sf-prose .sf-loc__contact {
    margin: 0 0 clamp(80px, 9vw, 128px) !important;
}
.sf-prose .sf-loc__info {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    counter-reset: sf-loc-info;
}
.sf-prose .sf-loc__info-item {
    counter-increment: sf-loc-info;
    position: relative;
    padding: 32px 28px 30px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-1);
    overflow: hidden;
    transition: transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-loc__info-item::before {
    content: counter(sf-loc-info, decimal-leading-zero);
    position: absolute;
    top: 22px; right: 26px;
    font-family: var(--sf-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
}
.sf-prose .sf-loc__info-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}
.sf-prose .sf-loc__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--sf-bg-soft);
    box-shadow: inset 0 0 0 1px var(--sf-line);
}
.sf-prose .sf-loc__info-icon svg {
    width: 24px; height: 24px;
    color: var(--sf-accent);
}
.sf-prose .sf-loc__info-label {
    font-family: var(--sf-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 12px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-prose .sf-loc__info-value {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--sf-ink) !important;
    margin: 0 0 6px !important;
    word-break: keep-all;
}
.sf-prose .sf-loc__info-value strong {
    font-family: var(--sf-display) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--sf-primary) !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
}
.sf-prose .sf-loc__info-value a {
    color: var(--sf-primary) !important;
    text-decoration: none !important;
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-loc__info-value a:hover { color: var(--sf-accent) !important; }
.sf-prose .sf-loc__info-note {
    font-family: var(--sf-sans) !important;
    font-size: 12.5px !important;
    color: var(--sf-muted) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.005em !important;
    margin: 6px 0 0 !important;
}

/* — Transit cards ——————————————————————————————————————————————— */
.sf-prose .sf-loc__transit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}
.sf-prose .sf-trans {
    position: relative;
    padding: 36px clamp(28px, 3vw, 40px) 32px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-1);
    overflow: hidden;
}
.sf-prose .sf-trans::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 4px;
    background: var(--sf-accent);
    border-bottom-right-radius: 4px;
}
.sf-prose .sf-trans__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 24px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sf-line-soft);
    position: relative;
}
.sf-prose .sf-trans__num {
    font-family: var(--sf-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
}
.sf-prose .sf-trans__title {
    font-family: var(--sf-display) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
    flex: 1;
}
.sf-prose .sf-trans__icon {
    color: var(--sf-muted);
    display: inline-flex;
}
.sf-prose .sf-trans__icon svg { width: 26px; height: 26px; }

/* Subway lines */
.sf-prose .sf-trans__lines {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.sf-prose .sf-trans__line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: 0 !important;
}
.sf-prose .sf-trans__pills {
    display: inline-flex;
    gap: 6px;
    padding-top: 2px;
}
.sf-prose .sf-trans__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sf-prose .sf-trans__pill--1 { background: #0052A4; }
.sf-prose .sf-trans__pill--2 { background: #00A84D; }
.sf-prose .sf-trans__pill--3 { background: #EF7C1C; }
.sf-prose .sf-trans__pill--4 { background: #00A4E3; }
.sf-prose .sf-trans__pill--5 { background: #996CAC; }
.sf-prose .sf-trans__pill--6 { background: #CD7C2F; }
.sf-prose .sf-trans__pill--7 { background: #747F00; }
.sf-prose .sf-trans__pill--8 { background: #E6186C; }
.sf-prose .sf-trans__pill--9 { background: #BDB092; }

.sf-prose .sf-trans__detail { min-width: 0; }
.sf-prose .sf-trans__station {
    font-family: var(--sf-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-primary) !important;
    margin: 0 0 6px !important;
}
.sf-prose .sf-trans__directions {
    font-family: var(--sf-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all;
}
.sf-prose .sf-trans__directions em {
    font-style: normal !important;
    color: var(--sf-accent) !important;
    font-weight: 400 !important;
}

/* Bus rows */
.sf-prose .sf-trans__buses {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sf-prose .sf-trans__bus-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 16px !important;
    background: var(--sf-bg);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-line-soft);
    transition: border-color var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-trans__bus-row:hover {
    border-color: var(--sf-line);
    background: var(--sf-paper);
}
.sf-prose .sf-trans__bus-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 6px;
    font-family: var(--sf-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
}
.sf-prose .sf-trans__bus-tag--blue  { background: #2E5697; }
.sf-prose .sf-trans__bus-tag--green { background: #4A8E3D; }
.sf-prose .sf-trans__bus-tag--red   { background: #C44131; }
.sf-prose .sf-trans__bus-tag--yellow{ background: #D4A93C; color: #2c4a5e !important; }
.sf-prose .sf-trans__bus-nums {
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--sf-ink) !important;
    letter-spacing: 0.005em !important;
    line-height: 1.4 !important;
}
.sf-prose .sf-trans__stop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    border-radius: 999px;
    background: var(--sf-accent-soft);
    color: var(--sf-accent) !important;
    font-family: var(--sf-sans) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
}
.sf-prose .sf-trans__stop svg { width: 14px; height: 14px; }

/* — Initial fade-in (per section, staggered) ————————————————————— */
.sf-prose .sf-loc__contact,
.sf-prose .sf-loc__transit {
    animation: sfLocFade 0.8s var(--sf-ease) both;
}
.sf-prose .sf-loc__contact { animation-delay: 0.15s; }
.sf-prose .sf-loc__transit { animation-delay: 0.3s; }
@keyframes sfLocFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-prose .sf-loc__hero,
    .sf-prose .sf-loc__contact,
    .sf-prose .sf-loc__transit { animation: none; }
}

/* — Responsive ——————————————————————————————————————————————————— */
@media (max-width: 960px) {
    .sf-prose .sf-loc__hero {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .sf-prose .sf-loc__map { aspect-ratio: 16 / 11; }
    .sf-prose .sf-loc__info { grid-template-columns: 1fr; }
    .sf-prose .sf-loc__transit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sf-prose .sf-loc__heading { font-size: 1.875rem !important; }
    .sf-prose .sf-loc__address { padding: 18px 20px; }
    .sf-prose .sf-loc__quick { gap: 8px; }
    .sf-prose .sf-loc__btn { padding: 10px 16px; font-size: 13px !important; }
    .sf-prose .sf-trans { padding: 28px 22px 26px; }
    .sf-prose .sf-trans__title { font-size: 1.25rem !important; }
}

/* ==========================================================================
   Counseling programs page (상담프로그램 안내)
   --------------------------------------------------------------------------
   Editorial multi-program guide. CSS-only tabs via radio inputs + :has().
   Each tab carries a hero (icon + display title + subtitle), structured
   content sections, features grid, and contact CTA.
   ========================================================================== */
.sf-prose .sf-cp { display: block; }
.sf-prose .sf-cp * { box-sizing: border-box; }
.sf-prose .sf-cp input.sf-cp__radio {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}

/* — Tab nav ———————————————————————————————————————————————————— */
.sf-prose .sf-cp__nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 clamp(40px, 5vw, 64px) !important;
}
.sf-prose .sf-cp__tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 18px 22px !important;
    text-align: left;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-1);
    cursor: pointer;
    user-select: none;
    transition: transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}
.sf-prose .sf-cp__tab-num {
    font-family: var(--sf-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    color: var(--sf-accent) !important;
    transition: color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__tab-label {
    font-family: var(--sf-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    transition: color var(--sf-fast) var(--sf-ease);
}

/* Active tab — filled slate-blue */
.sf-prose .sf-cp:has(#sf-cp-tab-1:checked) label[for="sf-cp-tab-1"],
.sf-prose .sf-cp:has(#sf-cp-tab-2:checked) label[for="sf-cp-tab-2"],
.sf-prose .sf-cp:has(#sf-cp-tab-3:checked) label[for="sf-cp-tab-3"],
.sf-prose .sf-cp:has(#sf-cp-tab-4:checked) label[for="sf-cp-tab-4"] {
    background: var(--sf-primary);
    border-color: var(--sf-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(44,74,94,0.45);
}
.sf-prose .sf-cp:has(#sf-cp-tab-1:checked) label[for="sf-cp-tab-1"] .sf-cp__tab-num,
.sf-prose .sf-cp:has(#sf-cp-tab-2:checked) label[for="sf-cp-tab-2"] .sf-cp__tab-num,
.sf-prose .sf-cp:has(#sf-cp-tab-3:checked) label[for="sf-cp-tab-3"] .sf-cp__tab-num,
.sf-prose .sf-cp:has(#sf-cp-tab-4:checked) label[for="sf-cp-tab-4"] .sf-cp__tab-num {
    color: rgba(255,255,255,0.7) !important;
}
.sf-prose .sf-cp:has(#sf-cp-tab-1:checked) label[for="sf-cp-tab-1"] .sf-cp__tab-label,
.sf-prose .sf-cp:has(#sf-cp-tab-2:checked) label[for="sf-cp-tab-2"] .sf-cp__tab-label,
.sf-prose .sf-cp:has(#sf-cp-tab-3:checked) label[for="sf-cp-tab-3"] .sf-cp__tab-label,
.sf-prose .sf-cp:has(#sf-cp-tab-4:checked) label[for="sf-cp-tab-4"] .sf-cp__tab-label {
    color: #fff !important;
}

/* Keyboard focus ring on labels */
.sf-prose .sf-cp__radio:focus-visible + label[for] {
    outline: 2px solid var(--sf-accent);
    outline-offset: 3px;
}

/* — Panels (CSS-only tab gating) ————————————————————————————————— */
.sf-prose .sf-cp__panel { display: none; }
.sf-prose .sf-cp:has(#sf-cp-tab-1:checked) .sf-cp__panel[data-panel="1"],
.sf-prose .sf-cp:has(#sf-cp-tab-2:checked) .sf-cp__panel[data-panel="2"],
.sf-prose .sf-cp:has(#sf-cp-tab-3:checked) .sf-cp__panel[data-panel="3"],
.sf-prose .sf-cp:has(#sf-cp-tab-4:checked) .sf-cp__panel[data-panel="4"] {
    display: block;
    animation: sfCpPanelIn 0.4s var(--sf-ease) both;
}
@keyframes sfCpPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-prose .sf-cp__panel { animation: none; }
}

/* — Program hero (per panel) ———————————————————————————————————— */
.sf-prose .sf-cp__hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
    padding: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 44px);
    margin: 0 0 clamp(32px, 4vw, 56px) !important;
    background: linear-gradient(180deg, var(--sf-bg-soft) 0%, var(--sf-bg) 100%);
    border-radius: var(--sf-radius-lg);
    border: 1px solid var(--sf-line);
    position: relative;
    overflow: hidden;
}
.sf-prose .sf-cp__hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: clamp(120px, 14vw, 180px);
    height: clamp(120px, 14vw, 180px);
    background: radial-gradient(circle at 70% 30%, var(--sf-accent-soft) 0%, transparent 70%);
    pointer-events: none;
}
.sf-prose .sf-cp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 8vw, 96px);
    height: clamp(72px, 8vw, 96px);
    border-radius: 22px;
    background: var(--sf-paper);
    box-shadow: inset 0 0 0 1px var(--sf-line), var(--sf-shadow-1);
    color: var(--sf-accent);
    flex-shrink: 0;
}
.sf-prose .sf-cp__icon svg { width: 44%; height: 44%; }
.sf-prose .sf-cp__hero-text { min-width: 0; position: relative; }
.sf-prose .sf-cp__hero-eyebrow {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
    margin: 0 0 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.sf-prose .sf-cp__hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--sf-accent);
}
.sf-prose .sf-cp__title {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.625rem, 2.6vw + 0.5rem, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.035em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 10px !important;
}
.sf-prose .sf-cp__subtitle {
    font-family: var(--sf-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    max-width: 56ch;
    word-break: keep-all;
}

/* — Section heads inside a panel ——————————————————————————————— */
.sf-prose .sf-cp__sec {
    margin: 0 0 clamp(40px, 5vw, 64px) !important;
}
.sf-prose .sf-cp__sec-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 22px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-prose .sf-cp__sec-num {
    font-family: var(--sf-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
}
.sf-prose .sf-cp__sec-title {
    font-family: var(--sf-display) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
    flex: 1;
}

/* — Treatment category cards ——————————————————————————————————— */
.sf-prose .sf-cp__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sf-prose .sf-cp__cards--single { grid-template-columns: 1fr; }
.sf-prose .sf-cp__card {
    padding: 28px 26px 24px !important;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-1);
    transition: transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}
.sf-prose .sf-cp__card-title {
    font-family: var(--sf-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-primary) !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-prose .sf-cp__card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sf-prose .sf-cp__card li {
    position: relative;
    padding: 6px 0 6px 16px !important;
    font-family: var(--sf-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--sf-ink) !important;
    word-break: keep-all;
}
.sf-prose .sf-cp__card li::before {
    content: '';
    position: absolute;
    top: 14px; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sf-accent);
}

/* — Numbered steps timeline ————————————————————————————————————— */
.sf-prose .sf-cp__steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: sf-cp-step;
}
.sf-prose .sf-cp__steps li {
    counter-increment: sf-cp-step;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px 22px !important;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    transition: border-color var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__steps li:hover {
    border-color: var(--sf-accent-soft);
    background: var(--sf-bg);
}
.sf-prose .sf-cp__steps li::before {
    content: counter(sf-cp-step, decimal-leading-zero);
    font-family: var(--sf-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: var(--sf-accent) !important;
    text-align: left;
}
.sf-prose .sf-cp__steps li > p,
.sf-prose .sf-cp__steps li > span {
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
    word-break: keep-all;
}

/* — Features grid (4-up) ———————————————————————————————————————— */
.sf-prose .sf-cp__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sf-prose .sf-cp__features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-prose .sf-cp__features--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-prose .sf-cp__feature {
    position: relative;
    padding: 28px 22px 24px !important;
    background: var(--sf-bg);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-radius);
    transition: transform var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__feature:hover {
    transform: translateY(-2px);
    background: var(--sf-paper);
    border-color: var(--sf-line);
}
.sf-prose .sf-cp__feature::before {
    content: '';
    display: block;
    width: 22px; height: 1px;
    background: var(--sf-accent);
    margin: 0 0 14px;
}
.sf-prose .sf-cp__feature-title {
    font-family: var(--sf-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 8px !important;
    word-break: keep-all;
}
.sf-prose .sf-cp__feature-body {
    font-family: var(--sf-sans) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all;
}

/* — Contact CTA ——————————————————————————————————————————————— */
.sf-prose .sf-cp__cta {
    margin: clamp(32px, 4vw, 56px) 0 0 !important;
    padding: clamp(32px, 4vw, 48px) clamp(28px, 3.5vw, 44px);
    background: var(--sf-primary);
    color: #fff;
    border-radius: var(--sf-radius-lg);
    position: relative;
    overflow: hidden;
}
.sf-prose .sf-cp__cta::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(184,107,60,0.32) 0%, transparent 70%);
    pointer-events: none;
}
.sf-prose .sf-cp__cta-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 3vw, 36px);
    align-items: center;
    position: relative;
}
.sf-prose .sf-cp__cta-eyebrow {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
    margin: 0 0 12px !important;
}
.sf-prose .sf-cp__cta-title {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.625rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
    margin: 0 0 14px !important;
}
.sf-prose .sf-cp__cta-meta {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-family: var(--sf-sans) !important;
}
.sf-prose .sf-cp__cta-meta li {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 0 !important;
    word-break: keep-all;
}
.sf-prose .sf-cp__cta-meta li strong {
    font-weight: 700 !important;
    color: #fff !important;
    margin-right: 6px;
}
.sf-prose .sf-cp__cta-phone {
    font-family: var(--sf-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    line-height: 1 !important;
}
.sf-prose .sf-cp__cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.sf-prose .sf-cp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px !important;
    border-radius: 999px;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease);
}
.sf-prose .sf-cp__btn--primary {
    background: var(--sf-accent);
    color: #fff !important;
}
.sf-prose .sf-cp__btn--primary:hover {
    background: #a45d33;
    transform: translateY(-2px);
}
.sf-prose .sf-cp__btn--ghost {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}
.sf-prose .sf-cp__btn--ghost:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

/* — Hero animation on tab switch ——————————————————————————————— */
.sf-prose .sf-cp__panel { animation-fill-mode: both; }

/* — Note text (small print after sections) ——————————————————————— */
.sf-prose .sf-cp__note {
    margin: 14px 0 0 !important;
    padding: 12px 16px !important;
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--sf-ink-soft) !important;
    background: var(--sf-bg-soft);
    border-radius: var(--sf-radius-sm);
    word-break: keep-all;
}
.sf-prose .sf-cp__note strong {
    font-weight: 700 !important;
    color: var(--sf-ink) !important;
}

/* — Section lead + card description/label (static content pages) ——— */
.sf-prose .sf-cp__sec-lead {
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 0 20px !important;
    max-width: 74ch;
    word-break: keep-all;
}
.sf-prose .sf-cp__card-desc {
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 0 14px !important;
    word-break: keep-all;
}
.sf-prose .sf-cp__card-label {
    font-family: var(--sf-sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--sf-muted) !important;
    margin: 0 0 6px !important;
}

/* — Responsive ——————————————————————————————————————————————— */
@media (max-width: 960px) {
    .sf-prose .sf-cp__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-prose .sf-cp__cards { grid-template-columns: 1fr; }
    .sf-prose .sf-cp__features,
    .sf-prose .sf-cp__features--3,
    .sf-prose .sf-cp__features--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-prose .sf-cp__cta-grid { grid-template-columns: 1fr; }
    .sf-prose .sf-cp__cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .sf-prose .sf-cp__hero {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 24px;
    }
    .sf-prose .sf-cp__features,
    .sf-prose .sf-cp__features--3,
    .sf-prose .sf-cp__features--5 { grid-template-columns: 1fr; }
    .sf-prose .sf-cp__steps li { grid-template-columns: 40px 1fr; gap: 12px; }
}

/* ========================================================================
   Education programs — info / status / applications
   ------------------------------------------------------------------------
   Three families of components share the same vocabulary:
     · sf-edu-intro       : section opener (eyebrow → display title → lead)
     · sf-edu-tabs        : three-tab toggle for 상담수련교육 / 임상목회교육 / 상담과 돌봄 워크숍
     · sf-program-grid    : taxonomy archive — program cards
     · sf-cohort-grid     : current cohort cards on the apply page
     · sf-form (extended) : edu-apply form fields with refined typography
   ======================================================================== */

/* ---- Shared section opener ---- */
.sf-edu-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 80px);
}
.sf-edu-intro__eyebrow {
    display: inline-block;
    font-family: var(--sf-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin: 0 0 18px;
}
.sf-edu-intro__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.4vw + 0.5rem, 2.5rem);
    letter-spacing: -0.035em;
    line-height: 1.22;
    color: var(--sf-ink);
    margin: 0 0 20px;
}
.sf-edu-intro__lead {
    color: var(--sf-ink-soft);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0;
    word-break: keep-all;
}

/* ---- Education tabs (info page) ---- */
.sf-edu-tabs {
    display: grid;
    gap: clamp(40px, 5vw, 64px);
}
.sf-edu-tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
}
.sf-edu-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--sf-line);
    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px);
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: baseline;
    color: var(--sf-ink-soft);
    cursor: pointer;
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
    position: relative;
}
.sf-edu-tab:last-child { border-right: 0; }
.sf-edu-tab:hover { background: var(--sf-bg-soft); color: var(--sf-primary); }
.sf-edu-tab.is-active {
    background: var(--sf-paper);
    color: var(--sf-ink);
}
.sf-edu-tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    background: var(--sf-accent);
}
.sf-edu-tab__index {
    grid-row: 1 / span 2;
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--sf-accent);
    line-height: 1;
}
.sf-edu-tab__label {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: inherit;
    line-height: 1.3;
}
.sf-edu-tab__sub {
    grid-column: 2;
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin-top: 4px;
}

.sf-edu-panel {
    display: none;
    animation: sfEduFade var(--sf-mid) var(--sf-ease);
}
.sf-edu-panel.is-active { display: block; }
@keyframes sfEduFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sf-edu-panel__head {
    max-width: 720px;
    margin: 0 0 clamp(32px, 4vw, 56px);
}
.sf-edu-panel__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin: 0 0 14px;
}
.sf-edu-panel__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: clamp(1.625rem, 2vw + 0.5rem, 2.125rem);
    letter-spacing: -0.035em;
    line-height: 1.22;
    color: var(--sf-ink);
    margin: 0 0 16px;
}
.sf-edu-panel__lead {
    color: var(--sf-ink-soft);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    word-break: keep-all;
}

/* Editorial callout block */
.sf-edu-callout {
    background: var(--sf-bg-soft);
    border-left: 3px solid var(--sf-accent);
    padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 36px);
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    margin: 0 0 clamp(40px, 5vw, 64px);
}
.sf-edu-callout p {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.85;
    margin: 0;
    word-break: keep-all;
}

/* Three-column meta blocks */
.sf-edu-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
    margin: 0 0 clamp(40px, 5vw, 64px);
}
.sf-edu-block {
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: clamp(20px, 2.5vw, 28px);
}
.sf-edu-block__eyebrow {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sf-accent);
    padding-bottom: 12px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--sf-line-soft);
}
.sf-edu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sf-edu-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.9375rem;
    color: var(--sf-ink-soft);
    line-height: 1.6;
    word-break: keep-all;
}
.sf-edu-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sf-accent);
}

/* Numbered course cards */
.sf-edu-section__eyebrow {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin: 0 0 24px;
}
.sf-edu-courses { margin: 0 0 clamp(40px, 5vw, 64px); }
.sf-edu-courses__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.sf-edu-course {
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: clamp(24px, 3vw, 32px);
    position: relative;
    transition: transform var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
}
.sf-edu-course:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}
.sf-edu-course__num {
    display: inline-block;
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--sf-accent);
    margin: 0 0 14px;
}
.sf-edu-course__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.03em;
    color: var(--sf-ink);
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-line-soft);
    line-height: 1.4;
}
.sf-edu-course__desc {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}

/* Notes / two-column */
.sf-edu-notes { margin: 0 0 clamp(40px, 5vw, 64px); }
.sf-edu-notes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
}
.sf-edu-note {
    background: var(--sf-bg);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: clamp(24px, 3vw, 32px);
}
.sf-edu-note__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.03em;
    color: var(--sf-primary);
    margin: 0 0 14px;
}
.sf-edu-note__list {
    margin: 0;
    padding-left: 1.25em;
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.85;
}
.sf-edu-note__list li { padding: 4px 0; word-break: keep-all; }

/* Panel CTA */
.sf-edu-panel__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 40px);
    background: linear-gradient(135deg, rgba(44,74,94,0.06) 0%, rgba(184,107,60,0.08) 100%);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    margin-top: clamp(40px, 5vw, 64px);
}
.sf-edu-panel__cta-text {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    flex: 1;
    word-break: keep-all;
}

/* ---- Program status taxonomy archive ---- */
.sf-page--program-status .sf-program-intro {
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 80px);
    text-align: center;
}
.sf-page--program-status .sf-program-intro__lead {
    color: var(--sf-ink-soft);
    font-size: 1.0625rem;
    line-height: 1.85;
    margin: 0;
    word-break: keep-all;
}
.sf-program-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(56px, 7vw, 96px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
}
.sf-program-card {
    display: block;
}
.sf-program-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    color: var(--sf-ink);
    transition: transform var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
}
.sf-program-card__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-3);
    border-color: var(--sf-accent-soft);
    color: var(--sf-ink);
}
.sf-program-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sf-bg-soft);
}
.sf-program-card__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform var(--sf-mid) var(--sf-ease);
}
.sf-program-card__link:hover .sf-program-card__img { transform: scale(1.04); }
.sf-program-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, hsl(var(--ph-hue), 35%, 92%), hsl(var(--ph-hue), 30%, 84%));
}
.sf-program-card__glyph {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: -0.04em;
    color: hsl(var(--ph-hue), 35%, 38%);
    opacity: 0.85;
}
.sf-program-card__index {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--sf-paper);
    color: var(--sf-accent);
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.02em;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: var(--sf-shadow-1);
}
.sf-program-card__body {
    padding: clamp(20px, 2.5vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.sf-program-card__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: var(--sf-ink);
    margin: 0;
}
.sf-program-card__excerpt {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
    flex: 1;
}
.sf-program-card__more {
    font-family: var(--sf-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sf-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
    margin-top: auto;
}
.sf-program-card__link:hover .sf-program-card__more {
    gap: 10px;
    color: var(--sf-accent);
}

.sf-program-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(32px, 4vw, 48px);
    background: var(--sf-bg-soft);
    border-radius: var(--sf-radius-lg);
}
.sf-program-cta__eyebrow {
    display: block;
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin-bottom: 12px;
}
.sf-program-cta__text {
    color: var(--sf-ink);
    font-family: var(--sf-display);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
    letter-spacing: -0.02em;
    margin: 0;
    word-break: keep-all;
    flex: 1;
}

/* ---- Cohort grid (apply page) ---- */
.sf-cohort-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(56px, 7vw, 88px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
}
.sf-cohort {
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    padding: clamp(28px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    transition: transform var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
    position: relative;
}
.sf-cohort:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-accent-soft);
}
.sf-cohort__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.sf-cohort__index {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--sf-accent);
    line-height: 1;
}
.sf-cohort__status {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
}
.sf-cohort--closing .sf-cohort__status {
    background: rgba(220,120,80,0.16);
    color: #c25533;
}
.sf-cohort--closed .sf-cohort__status {
    background: var(--sf-line-soft);
    color: var(--sf-muted);
}
.sf-cohort__eyebrow {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin: 0 0 10px;
}
.sf-cohort__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -0.035em;
    line-height: 1.3;
    color: var(--sf-ink);
    margin: 0 0 24px;
    word-break: keep-all;
}
.sf-cohort__meta {
    margin: 0 0 24px;
    padding: 20px 0;
    border-top: 1px solid var(--sf-line-soft);
    border-bottom: 1px solid var(--sf-line-soft);
    display: grid;
    gap: 10px;
}
.sf-cohort__meta > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: baseline;
}
.sf-cohort__meta dt {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin: 0;
}
.sf-cohort__meta dd {
    margin: 0;
    color: var(--sf-ink);
    font-size: 0.9375rem;
    line-height: 1.6;
    word-break: keep-all;
}
.sf-cohort__deadline { color: var(--sf-accent) !important; font-weight: 700; }
.sf-cohort__notes {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}
.sf-cohort__notes li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 0.9375rem;
    color: var(--sf-ink-soft);
    line-height: 1.6;
    word-break: keep-all;
}
.sf-cohort__notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sf-accent);
}
.sf-cohort__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--sf-primary);
    color: var(--sf-primary);
    font-weight: 700;
    font-size: 14px;
    transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease), gap var(--sf-fast) var(--sf-ease);
}
.sf-cohort__cta:hover {
    background: var(--sf-primary);
    color: #fff;
    gap: 12px;
}

.sf-edu-divider {
    border: 0;
    border-top: 1px solid var(--sf-line);
    margin: clamp(48px, 6vw, 80px) auto;
    max-width: 280px;
    position: relative;
}
.sf-edu-divider::after {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--sf-paper);
    color: var(--sf-accent);
    padding: 0 16px;
    font-size: 14px;
}

/* ---- Apply form (extends .sf-form) ---- */
.sf-edu-apply {
    background: var(--sf-bg);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-lg);
    padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
    margin: 0 0 clamp(48px, 6vw, 80px);
}
.sf-edu-apply__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(40px, 5vw, 64px);
}
.sf-edu-apply__eyebrow {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin: 0 0 14px;
}
.sf-edu-apply__title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw + 0.4rem, 2rem);
    letter-spacing: -0.035em;
    color: var(--sf-ink);
    margin: 0 0 16px;
    line-height: 1.2;
}
.sf-edu-apply__lead {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.75;
    margin: 0;
    word-break: keep-all;
}

.sf-form--edu-apply {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.sf-form--edu-apply .sf-form__fieldset { width: 100%; }
.sf-form--edu-apply .sf-form__actions {
    justify-content: center;
    margin-top: clamp(8px, 1vw, 16px);
}
.sf-form--edu-apply .sf-form__actions .sf-button {
    min-width: 220px;
    padding: 16px 32px;
}
.sf-form--edu-apply .sf-form__msg {
    flex-basis: 100%;
    text-align: center;
}
.sf-form__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}
.sf-form__fieldset > legend {
    font-family: var(--sf-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sf-primary);
    padding: 0 0 12px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--sf-line);
    width: 100%;
}
.sf-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.sf-form__field {
    display: grid;
    gap: 8px;
}
.sf-form__field > span {
    font-size: 13px;
    font-weight: 700;
    color: var(--sf-ink);
    letter-spacing: -0.01em;
}
.sf-form__field > span > em {
    color: var(--sf-accent);
    font-style: normal;
    margin-left: 4px;
}
.sf-form__field input,
.sf-form__field select,
.sf-form__field textarea,
.sf-form input[type="text"],
.sf-form input[type="tel"],
.sf-form input[type="email"],
.sf-form input[type="password"],
.sf-form select,
.sf-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm);
    font-family: var(--sf-sans);
    font-size: 15px;
    color: var(--sf-ink);
    transition: border-color var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-form__field input:focus,
.sf-form__field select:focus,
.sf-form__field textarea:focus {
    outline: 0;
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px rgba(44,74,94,0.12);
}
.sf-form__field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.sf-form__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.sf-form__choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: border-color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease);
}
.sf-form__choice:hover { border-color: var(--sf-accent-soft); }
.sf-form__choice input[type="radio"] {
    accent-color: var(--sf-accent);
    margin-top: 4px;
    width: 18px;
    height: 18px;
}
.sf-form__choice:has(input:checked) {
    border-color: var(--sf-accent);
    background: var(--sf-accent-soft);
}
.sf-form__choice-body { display: grid; gap: 4px; }
.sf-form__choice-title {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--sf-ink);
}
.sf-form__choice-sub {
    font-size: 12px;
    color: var(--sf-muted);
    letter-spacing: 0.04em;
}

.sf-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: var(--sf-paper);
    border: 1px solid var(--sf-line-soft);
    border-radius: var(--sf-radius-sm);
    font-size: 13.5px;
    color: var(--sf-ink-soft);
    line-height: 1.6;
}
.sf-form__checkbox input { accent-color: var(--sf-accent); margin-top: 3px; }
.sf-form__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.sf-form__msg {
    margin: 0;
    font-size: 14px;
    color: var(--sf-ink-soft);
}
.sf-form__msg.is-error { color: #c25533; font-weight: 700; }
.sf-form__msg.is-success { color: #2c7a4a; font-weight: 700; }

/* Contact bar at bottom */
.sf-edu-contact {
    text-align: center;
    padding: clamp(20px, 2.5vw, 32px);
    background: var(--sf-bg-soft);
    border-radius: var(--sf-radius);
}
.sf-edu-contact__eyebrow {
    font-family: var(--sf-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin: 0 0 8px;
}
.sf-edu-contact__body {
    color: var(--sf-ink-soft);
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 960px) {
    .sf-edu-cols,
    .sf-edu-courses__list,
    .sf-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-cohort-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .sf-edu-tabs__nav { grid-template-columns: 1fr; }
    .sf-edu-tab { border-right: 0; border-bottom: 1px solid var(--sf-line); }
    .sf-edu-tab:last-child { border-bottom: 0; }
    .sf-edu-cols,
    .sf-edu-courses__list,
    .sf-edu-notes__grid,
    .sf-program-grid { grid-template-columns: 1fr; }
    .sf-edu-panel__cta,
    .sf-program-cta { flex-direction: column; align-items: flex-start; text-align: left; }
    .sf-form__row,
    .sf-form__choices { grid-template-columns: 1fr; }
    .sf-cohort__meta > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ========================================================================
   Donate / Volunteer / Donors — 후원·봉사·감사 페이지 (Editorial)
   --------------------------------------------------------------------------
   세 페이지를 하나의 디자인 언어로 묶음:
   · 명조 디스플레이 비중 ↑ (slogan 2-line stack)
   · UPPERCASE eyebrow + 1px hairline 액센트
   · 카드: paper bg / line border / accent hover lift
   · 데스크톱 generous 여백, 720px 1-col fallback
   · .sf-prose * !important 규칙 우회 위해 모든 선언에 !important 적용
   ======================================================================== */

/* ---------- Common: section heads, eyebrow, slogan stack ---------- */
.sf-prose .sf-donate__section,
.sf-prose .sf-vol__section,
.sf-prose .sf-donors__section,
.sf-prose .sf-donors__cta-sec {
    margin-top: clamp(72px, 9vw, 128px) !important;
}

.sf-prose .sf-donate__sec-head,
.sf-prose .sf-vol__sec-head,
.sf-prose .sf-donors__sec-head {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto clamp(36px, 4.5vw, 56px) !important;
}
.sf-prose .sf-donate__sec-eyebrow,
.sf-prose .sf-vol__sec-eyebrow,
.sf-prose .sf-donors__sec-eyebrow {
    display: inline-block !important;
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
    margin: 0 0 18px !important;
}
.sf-prose .sf-donate__sec-title,
.sf-prose .sf-vol__sec-title,
.sf-prose .sf-donors__sec-title {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.625rem, 2.6vw + 0.5rem, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.035em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 16px !important;
}
.sf-prose .sf-donate__sec-lead,
.sf-prose .sf-vol__sec-lead,
.sf-prose .sf-donors__sec-lead {
    font-family: var(--sf-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}

/* Intro: eyebrow + 2-line slogan + lead */
.sf-prose .sf-donate__intro,
.sf-prose .sf-vol__intro,
.sf-prose .sf-donors__intro {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto clamp(48px, 6vw, 80px) !important;
}
.sf-prose .sf-donate__eyebrow,
.sf-prose .sf-vol__eyebrow,
.sf-prose .sf-donors__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
    margin: 0 0 22px !important;
}
.sf-prose .sf-donate__eyebrow::before,
.sf-prose .sf-donate__eyebrow::after,
.sf-prose .sf-vol__eyebrow::before,
.sf-prose .sf-vol__eyebrow::after,
.sf-prose .sf-donors__eyebrow::before,
.sf-prose .sf-donors__eyebrow::after {
    content: '' !important;
    display: inline-block !important;
    width: 32px !important;
    height: 1px !important;
    background: var(--sf-accent) !important;
}
.sf-prose .sf-donate__slogan,
.sf-prose .sf-vol__slogan,
.sf-prose .sf-donors__slogan {
    font-family: var(--sf-display) !important;
    font-size: clamp(2rem, 3.6vw + 0.4rem, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 24px !important;
}
.sf-prose .sf-donate__slogan span,
.sf-prose .sf-vol__slogan span,
.sf-prose .sf-donors__slogan span {
    display: block !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}
.sf-prose .sf-donate__slogan span:last-child,
.sf-prose .sf-vol__slogan span:last-child,
.sf-prose .sf-donors__slogan span:last-child {
    color: var(--sf-accent) !important;
}
.sf-prose .sf-donate__lead,
.sf-prose .sf-vol__lead,
.sf-prose .sf-donors__lead {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}

/* ========================================================================
   /donate/ — 후원안내
   ======================================================================== */

/* Participate cards (4-up) */
.sf-prose .sf-donate__cards {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.6vw, 22px) !important;
}
.sf-prose .sf-donate__card {
    position: relative !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    padding: 28px 22px 26px !important;
    transition: transform var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease) !important;
}
.sf-prose .sf-donate__card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sf-shadow-2) !important;
    border-color: var(--sf-accent-soft) !important;
}
.sf-prose .sf-donate__card-num {
    font-family: var(--sf-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--sf-accent) !important;
    margin: 0 0 14px !important;
    line-height: 1 !important;
}
.sf-prose .sf-donate__card-title {
    font-family: var(--sf-display) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--sf-line) !important;
}
.sf-prose .sf-donate__card-desc {
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}

/* Account section — paper card with dl + pledge button */
.sf-prose .sf-donate__account {
    background: linear-gradient(180deg, var(--sf-paper) 0%, var(--sf-bg-soft) 220%) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: clamp(28px, 4vw, 52px) !important;
    box-shadow: var(--sf-shadow-1) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 56px) !important;
    align-items: center !important;
}
.sf-prose .sf-donate__account-list {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 14px !important;
}
.sf-prose .sf-donate__account-row {
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    align-items: baseline !important;
    gap: 18px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--sf-line-soft) !important;
}
.sf-prose .sf-donate__account-row:last-child {
    border-bottom: 0 !important;
}
.sf-prose .sf-donate__account-row dt {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--sf-muted) !important;
    margin: 0 !important;
}
.sf-prose .sf-donate__account-row dd {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}
.sf-prose .sf-donate__account-row--accent dd {
    font-family: var(--sf-display) !important;
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: var(--sf-primary) !important;
    font-feature-settings: "tnum" !important;
}
.sf-prose .sf-donate__pledge-btn {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    background: var(--sf-primary) !important;
    border: 1px solid var(--sf-primary) !important;
    border-radius: var(--sf-radius) !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background var(--sf-fast) var(--sf-ease),
                transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease) !important;
    cursor: pointer !important;
}
.sf-prose .sf-donate__pledge-btn:hover {
    background: var(--sf-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 32px -16px rgba(22,41,58,0.38) !important;
    color: #fff !important;
}
.sf-prose .sf-donate__pledge-icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.sf-prose .sf-donate__pledge-icon svg {
    width: 20px !important;
    height: 20px !important;
}
.sf-prose .sf-donate__pledge-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.sf-prose .sf-donate__pledge-title {
    font-family: var(--sf-sans) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
}
.sf-prose .sf-donate__pledge-meta {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.72) !important;
}

/* Receipt card */
.sf-prose .sf-donate__receipt-card {
    max-width: 760px !important;
    margin: 0 auto !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: clamp(28px, 4vw, 48px) !important;
    text-align: center !important;
}
.sf-prose .sf-donate__receipt-lead {
    font-family: var(--sf-sans) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: var(--sf-ink) !important;
    margin: 0 0 12px !important;
    word-break: keep-all !important;
}
.sf-prose .sf-donate__receipt-lead strong {
    color: var(--sf-accent) !important;
    font-weight: 700 !important;
}
.sf-prose .sf-donate__receipt-desc {
    font-family: var(--sf-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 0 24px !important;
}
.sf-prose .sf-donate__receipt-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 22px !important;
    border: 1px solid var(--sf-primary) !important;
    border-radius: 999px !important;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sf-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease),
                transform var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-donate__receipt-link:hover {
    background: var(--sf-primary) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.sf-prose .sf-donate__receipt-link svg {
    width: 16px !important;
    height: 16px !important;
}

/* Benefits — 3-up */
.sf-prose .sf-donate__benefits-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 28px) !important;
}
.sf-prose .sf-donate__benefit {
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    padding: clamp(24px, 3vw, 32px) !important;
    transition: transform var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease) !important;
}
.sf-prose .sf-donate__benefit:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sf-shadow-2) !important;
}
.sf-prose .sf-donate__benefit-title {
    font-family: var(--sf-display) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-primary) !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--sf-line) !important;
}
.sf-prose .sf-donate__benefit-points {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
}
.sf-prose .sf-donate__benefit-points li {
    position: relative !important;
    padding-left: 20px !important;
    font-family: var(--sf-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    word-break: keep-all !important;
    margin: 0 !important;
}
.sf-prose .sf-donate__benefit-points li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--sf-accent) !important;
}

/* Contact grid — 2-up linkable cards */
.sf-prose .sf-donate__contact-grid,
.sf-prose .sf-vol__cta-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 24px) !important;
}
.sf-prose .sf-donate__contact-card,
.sf-prose .sf-vol__cta-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: clamp(28px, 3.5vw, 40px) !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    color: var(--sf-ink) !important;
    text-decoration: none !important;
    transition: transform var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease) !important;
}
.sf-prose .sf-donate__contact-card:hover,
.sf-prose .sf-vol__cta-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--sf-accent-soft) !important;
    box-shadow: var(--sf-shadow-2) !important;
}
.sf-prose .sf-donate__contact-label,
.sf-prose .sf-vol__cta-label {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    margin: 0 0 4px !important;
}
.sf-prose .sf-donate__contact-value,
.sf-prose .sf-vol__cta-value {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.5rem, 2.4vw + 0.3rem, 1.875rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    font-feature-settings: "tnum" !important;
    word-break: break-all !important;
}
.sf-prose .sf-donate__contact-meta,
.sf-prose .sf-vol__cta-meta {
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    color: var(--sf-muted) !important;
    margin: 0 !important;
}

/* Thanks — italic editorial pull-quote */
.sf-prose .sf-donate__thanks {
    margin: clamp(72px, 9vw, 128px) auto 0 !important;
    max-width: 760px !important;
    background: var(--sf-bg-soft) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px) !important;
    text-align: center !important;
    position: relative !important;
}
.sf-prose .sf-donate__thanks-mark {
    font-family: var(--sf-display) !important;
    font-size: 5rem !important;
    line-height: 0.6 !important;
    color: var(--sf-accent) !important;
    margin: 0 0 12px !important;
    opacity: 0.55 !important;
}
.sf-prose .sf-donate__thanks-body {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.4375rem) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: -0.025em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 24px !important;
    word-break: keep-all !important;
}
.sf-prose .sf-donate__thanks-sign {
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
}

/* Toast (후원약정서 다운로드 클릭) */
.sf-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: 36px !important;
    transform: translate(-50%, 16px) !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 22px !important;
    background: var(--sf-ink) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 18px 40px -16px rgba(28,31,36,0.5) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity var(--sf-mid) var(--sf-ease),
                transform var(--sf-mid) var(--sf-ease) !important;
}
.sf-toast.is-show {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
}
.sf-toast__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--sf-accent) !important;
    box-shadow: 0 0 0 4px rgba(184,107,60,0.22) !important;
}

/* ========================================================================
   /volunteer/ — 자원봉사 신청
   ======================================================================== */

/* Activity areas (4-up icon cards) */
.sf-prose .sf-vol__areas {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.8vw, 24px) !important;
}
.sf-prose .sf-vol__area {
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    padding: clamp(24px, 2.6vw, 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    transition: transform var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease) !important;
}
.sf-prose .sf-vol__area:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sf-shadow-2) !important;
    border-color: var(--sf-accent-soft) !important;
}
.sf-prose .sf-vol__area-icon {
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: var(--sf-bg-soft) !important;
    border: 1px solid var(--sf-line) !important;
    color: var(--sf-accent) !important;
    margin: 0 !important;
}
.sf-prose .sf-vol__area-icon svg {
    width: 22px !important;
    height: 22px !important;
}
.sf-prose .sf-vol__area-title {
    font-family: var(--sf-display) !important;
    font-size: 1.1875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
}
.sf-prose .sf-vol__area-desc {
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
    flex-grow: 1 !important;
}
.sf-prose .sf-vol__area-meta {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--sf-accent) !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--sf-line-soft) !important;
}

/* Steps — numbered timeline (horizontal on desktop) */
.sf-prose .sf-vol__steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 28px) !important;
    counter-reset: sf-vol-step !important;
    position: relative !important;
}
.sf-prose .sf-vol__steps::before {
    content: '' !important;
    position: absolute !important;
    top: 22px !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, var(--sf-line) 8%, var(--sf-line) 92%, transparent 100%) !important;
    z-index: 0 !important;
}
.sf-prose .sf-vol__step {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 8px !important;
    z-index: 1 !important;
}
.sf-prose .sf-vol__step-num {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-accent) !important;
    box-shadow: 0 0 0 6px var(--sf-bg) !important;
    font-family: var(--sf-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--sf-accent) !important;
    margin: 0 0 18px !important;
    line-height: 1 !important;
}
.sf-prose .sf-vol__step-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.sf-prose .sf-vol__step-title {
    font-family: var(--sf-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
    color: var(--sf-ink) !important;
    margin: 0 !important;
}
.sf-prose .sf-vol__step-desc {
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}

/* CTA section */
.sf-prose .sf-vol__cta-card--accent {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%) !important;
    border-color: var(--sf-primary) !important;
}
.sf-prose .sf-vol__cta-card--accent .sf-vol__cta-label {
    color: rgba(255,255,255,0.78) !important;
}
.sf-prose .sf-vol__cta-card--accent .sf-vol__cta-value {
    color: #fff !important;
}
.sf-prose .sf-vol__cta-card--accent .sf-vol__cta-meta {
    color: rgba(255,255,255,0.7) !important;
}
.sf-prose .sf-vol__cta-card--accent:hover {
    border-color: var(--sf-primary-dark) !important;
}
.sf-prose .sf-vol__cta-note {
    margin: 28px auto 0 !important;
    text-align: center !important;
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    color: var(--sf-muted) !important;
    word-break: keep-all !important;
}

/* ========================================================================
   /donor/ — 후원자 명단
   ======================================================================== */

/* Stats row */
.sf-prose .sf-donors__stats {
    margin: 36px 0 0 !important;
    padding: 28px clamp(24px, 3vw, 40px) !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 28px) !important;
}
.sf-prose .sf-donors__stat {
    margin: 0 !important;
    padding: 0 clamp(12px, 1.5vw, 24px) !important;
    border-right: 1px solid var(--sf-line-soft) !important;
    text-align: center !important;
}
.sf-prose .sf-donors__stat:last-child {
    border-right: 0 !important;
}
.sf-prose .sf-donors__stat dt {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    margin: 0 0 10px !important;
}
.sf-prose .sf-donors__stat dd {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-family: var(--sf-display) !important;
    line-height: 1 !important;
    color: var(--sf-primary) !important;
}
.sf-prose .sf-donors__num {
    font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    font-feature-settings: "tnum" !important;
}
.sf-prose .sf-donors__unit {
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sf-ink-soft) !important;
    letter-spacing: 0.04em !important;
}

/* Donor cards grid (initial-letter tiles) */
.sf-prose .sf-donors__grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.2vw, 18px) !important;
}
.sf-prose .sf-donors__card {
    aspect-ratio: 1 / 1 !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px !important;
    transition: transform var(--sf-mid) var(--sf-ease),
                background var(--sf-mid) var(--sf-ease),
                border-color var(--sf-mid) var(--sf-ease),
                box-shadow var(--sf-mid) var(--sf-ease) !important;
}
.sf-prose .sf-donors__card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sf-shadow-2) !important;
    border-color: var(--sf-accent-soft) !important;
    background: linear-gradient(180deg, var(--sf-paper) 0%, var(--sf-bg-soft) 240%) !important;
}
.sf-prose .sf-donors__mark {
    font-family: var(--sf-display) !important;
    font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--sf-primary) !important;
    letter-spacing: -0.04em !important;
}
.sf-prose .sf-donors__honor {
    font-family: var(--sf-sans) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--sf-muted) !important;
}
.sf-prose .sf-donors__card--accent {
    background: var(--sf-accent-soft) !important;
    border-color: rgba(184,107,60,0.3) !important;
}
.sf-prose .sf-donors__card--accent .sf-donors__mark {
    color: var(--sf-accent) !important;
}
.sf-prose .sf-donors__card--org {
    background: var(--sf-bg-soft) !important;
}
.sf-prose .sf-donors__mark--org {
    font-family: var(--sf-sans) !important;
    color: var(--sf-accent) !important;
    font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
    font-weight: 300 !important;
}
.sf-prose .sf-donors__note {
    margin: 28px 0 0 !important;
    text-align: center !important;
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    color: var(--sf-muted) !important;
    word-break: keep-all !important;
}

/* CTA panel */
.sf-prose .sf-donors__cta {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px) !important;
    text-align: center !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
}
.sf-prose .sf-donors__cta::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(184,107,60,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(244,236,220,0.1) 0%, transparent 55%) !important;
    pointer-events: none !important;
}
.sf-prose .sf-donors__cta-eyebrow {
    position: relative !important;
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    margin: 0 0 16px !important;
}
.sf-prose .sf-donors__cta-title {
    position: relative !important;
    font-family: var(--sf-display) !important;
    font-size: clamp(1.625rem, 2.6vw + 0.5rem, 2.375rem) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.035em !important;
    color: #fff !important;
    margin: 0 0 16px !important;
}
.sf-prose .sf-donors__cta-desc {
    position: relative !important;
    font-family: var(--sf-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.84) !important;
    margin: 0 0 32px !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    word-break: keep-all !important;
}
.sf-prose .sf-donors__cta-actions {
    position: relative !important;
    display: inline-flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
.sf-prose .sf-donors__cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: transform var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-donors__cta-btn--primary {
    background: var(--sf-accent) !important;
    color: #fff !important;
}
.sf-prose .sf-donors__cta-btn--primary:hover {
    background: #a35d31 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.sf-prose .sf-donors__cta-btn--ghost {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    color: #fff !important;
    font-feature-settings: "tnum" !important;
}
.sf-prose .sf-donors__cta-btn--ghost:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.6) !important;
    color: #fff !important;
}

/* ========================================================================
   Responsive — mobile fallbacks
   ======================================================================== */
@media (max-width: 1080px) {
    .sf-prose .sf-donate__cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sf-prose .sf-vol__areas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sf-prose .sf-donors__grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .sf-prose .sf-donate__benefits-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 880px) {
    .sf-prose .sf-donate__account {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .sf-prose .sf-vol__steps {
        grid-template-columns: 1fr !important;
    }
    .sf-prose .sf-vol__steps::before { display: none !important; }
    .sf-prose .sf-vol__step {
        flex-direction: row !important;
        text-align: left !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }
    .sf-prose .sf-vol__step-num { margin: 0 !important; flex-shrink: 0 !important; }
    .sf-prose .sf-donors__grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
    .sf-prose .sf-donate__cards,
    .sf-prose .sf-vol__areas,
    .sf-prose .sf-donate__contact-grid,
    .sf-prose .sf-vol__cta-grid {
        grid-template-columns: 1fr !important;
    }
    .sf-prose .sf-donors__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .sf-prose .sf-donors__stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .sf-prose .sf-donors__stat {
        border-right: 0 !important;
        border-bottom: 1px solid var(--sf-line-soft) !important;
        padding: 12px 0 16px !important;
    }
    .sf-prose .sf-donors__stat:last-child { border-bottom: 0 !important; }
    .sf-prose .sf-donate__account-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .sf-prose .sf-donate__pledge-btn {
        flex-direction: row !important;
        width: 100% !important;
    }
    .sf-prose .sf-donate__slogan,
    .sf-prose .sf-vol__slogan,
    .sf-prose .sf-donors__slogan {
        font-size: clamp(1.625rem, 7vw, 2.25rem) !important;
    }
}
@media (max-width: 480px) {
    .sf-prose .sf-donors__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ========================================================================
   /register/ — 회원가입 페이지 (editorial)
   --------------------------------------------------------------------------
   wp-login 화면과 동일한 톤(eyebrow + 명조 슬로건 + 흰 카드 + slate-blue CTA).
   .sf-prose * { ... !important } 를 우회하기 위해 모든 선언에 !important.
   ======================================================================== */

.sf-prose .sf-register {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: stretch !important;
}

/* Hero (left column) — image stretches to match the form panel height */
.sf-prose .sf-register__hero {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 480px !important;
    border-radius: var(--sf-radius-lg) !important;
    overflow: hidden !important;
    background-color: var(--sf-bg-soft) !important;
    background-image:
        linear-gradient(180deg, rgba(28,31,36,0.05) 0%, rgba(28,31,36,0.55) 100%),
        url('/wp-content/uploads/2026/05/freepik-header-counseling-hands-1024x682.jpg');
    background-size: cover !important;
    background-position: center !important;
    box-shadow: var(--sf-shadow-2) !important;
}
.sf-prose .sf-register__hero-frame {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 36px) !important;
    color: #fbf9f5 !important;
    text-align: left !important;
    z-index: 1 !important;
}
.sf-prose .sf-register__hero-eyebrow {
    font-family: var(--sf-sans) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: rgba(251,249,245,0.78) !important;
    margin: 0 0 14px !important;
    line-height: 1 !important;
}
.sf-prose .sf-register__hero-quote {
    font-family: var(--sf-display) !important;
    font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.6875rem) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
    margin: 0 0 18px !important;
    word-break: keep-all !important;
}
.sf-prose .sf-register__hero-sign {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.04em !important;
    color: rgba(251,249,245,0.7) !important;
    margin: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(251,249,245,0.22) !important;
    display: inline-block !important;
}

/* Right panel container */
.sf-prose .sf-register__panel {
    min-width: 0 !important;
}

/* Intro — centered title block on every viewport */
.sf-prose .sf-register__intro {
    text-align: center !important;
    margin: 0 0 clamp(24px, 3vw, 36px) !important;
    max-width: none !important;
}
.sf-prose .sf-register__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--sf-accent) !important;
    line-height: 1 !important;
    margin: 0 0 22px !important;
}
.sf-prose .sf-register__eyebrow::before,
.sf-prose .sf-register__eyebrow::after {
    content: '' !important;
    display: inline-block !important;
    width: 32px !important;
    height: 1px !important;
    background: var(--sf-accent) !important;
}
.sf-prose .sf-register__slogan {
    font-family: var(--sf-display) !important;
    font-size: clamp(2.25rem, 4vw + 0.6rem, 3.375rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    color: var(--sf-ink) !important;
    margin: 0 0 22px !important;
}
.sf-prose .sf-register__slogan span { display: block !important; }
.sf-prose .sf-register__slogan span:last-child { color: var(--sf-accent) !important; }
.sf-prose .sf-register__lead {
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--sf-ink-soft) !important;
    margin: 0 !important;
    word-break: keep-all !important;
}

/* Form card */
.sf-prose .sf-register__form {
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius-lg) !important;
    box-shadow: var(--sf-shadow-2) !important;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px) !important;
    display: grid !important;
    gap: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Single-column rows — every field stays the same height regardless of
   whether it has a hint, giving the form a calm vertical rhythm. */
.sf-prose .sf-register__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

/* Field */
.sf-prose .sf-register__field {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sf-prose .sf-register__label {
    font-family: var(--sf-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--sf-ink-soft) !important;
    line-height: 1.2 !important;
}
.sf-prose .sf-register__label em {
    font-style: normal !important;
    color: var(--sf-accent) !important;
    margin-left: 2px !important;
}
.sf-prose .sf-register__optional {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 8px !important;
    background: var(--sf-bg-soft) !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    color: var(--sf-muted) !important;
    vertical-align: middle !important;
}
.sf-prose .sf-register__field input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    color: var(--sf-ink) !important;
    background: var(--sf-bg) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius-sm) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color var(--sf-fast) var(--sf-ease),
                background var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__field input::placeholder {
    color: var(--sf-muted) !important;
    font-weight: 400 !important;
}
.sf-prose .sf-register__field input:focus {
    outline: none !important;
    border-color: var(--sf-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(44,74,94,0.10) !important;
}
/* Accent border only after the user has interacted with an invalid field
   (browsers ≥ Safari 16.5 / Chrome 119 / Firefox 88 support :user-invalid).
   Falls back to no error color on older browsers — preferable to coloring
   pristine required fields red on first paint. */
.sf-prose .sf-register__field input:user-invalid {
    border-color: var(--sf-accent) !important;
}
.sf-prose .sf-register__hint {
    font-family: var(--sf-sans) !important;
    font-size: 12px !important;
    color: var(--sf-muted) !important;
    line-height: 1.5 !important;
    margin: 2px 2px 0 !important;
}

/* Agree row */
.sf-prose .sf-register__agree {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 6px 0 6px !important;
    padding: 14px 16px !important;
    background: var(--sf-bg) !important;
    border: 1px dashed var(--sf-line) !important;
    border-radius: var(--sf-radius-sm) !important;
    font-family: var(--sf-sans) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--sf-ink-soft) !important;
    cursor: pointer !important;
}
.sf-prose .sf-register__agree input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 4px !important;
    background: var(--sf-paper) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__agree input[type="checkbox"]:hover { border-color: var(--sf-primary) !important; }
.sf-prose .sf-register__agree input[type="checkbox"]:checked {
    background: var(--sf-primary) !important;
    border-color: var(--sf-primary) !important;
}
.sf-prose .sf-register__agree input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important; top: 1px !important;
    width: 5px !important; height: 10px !important;
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(45deg) !important;
}
.sf-prose .sf-register__agree-text { display: inline !important; }
.sf-prose .sf-register__agree-text a {
    color: var(--sf-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--sf-line) !important;
    transition: color var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__agree-text a:hover {
    color: var(--sf-accent) !important;
    border-color: var(--sf-accent) !important;
}

/* Submit */
.sf-prose .sf-register__submit {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 16px 24px !important;
    font-family: var(--sf-sans) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    background: var(--sf-primary) !important;
    border: 1px solid var(--sf-primary) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px -10px rgba(44,74,94,0.42) !important;
    cursor: pointer !important;
    transition: background var(--sf-fast) var(--sf-ease),
                border-color var(--sf-fast) var(--sf-ease),
                transform var(--sf-fast) var(--sf-ease),
                box-shadow var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__submit:hover {
    background: var(--sf-primary-dark) !important;
    border-color: var(--sf-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px -12px rgba(44,74,94,0.48) !important;
}
.sf-prose .sf-register__submit:disabled {
    opacity: 0.65 !important;
    cursor: progress !important;
    transform: none !important;
}
.sf-prose .sf-register__submit:focus-visible {
    outline: 2px solid var(--sf-accent) !important;
    outline-offset: 3px !important;
}

/* Status message */
.sf-prose .sf-register__msg {
    margin: 4px 0 0 !important;
    text-align: center !important;
    font-family: var(--sf-sans) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--sf-ink-soft) !important;
    min-height: 1em !important;
}
.sf-prose .sf-register__msg.is-error { color: var(--sf-accent) !important; font-weight: 700 !important; }
.sf-prose .sf-register__msg.is-success { color: var(--sf-primary) !important; font-weight: 700 !important; }

/* Login CTA — sits inside the form card, separated by a hairline divider */
.sf-prose .sf-register__login-cta {
    text-align: center !important;
    font-family: var(--sf-sans) !important;
    font-size: 14px !important;
    color: var(--sf-ink-soft) !important;
    margin: 12px 0 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--sf-line-soft) !important;
}
.sf-prose .sf-register__login-link {
    color: var(--sf-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    transition: background var(--sf-fast) var(--sf-ease),
                color var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__login-link:hover {
    background: var(--sf-accent-soft) !important;
    color: var(--sf-accent) !important;
}
.sf-prose .sf-register__login-link span {
    display: inline-block !important;
    transition: transform var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__login-link:hover span { transform: translateX(3px) !important; }

/* Already-logged-in notice */
.sf-prose .sf-register--logged {
    text-align: center !important;
    padding: clamp(40px, 6vw, 72px) 24px !important;
    background: var(--sf-paper) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius-lg) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}
.sf-prose .sf-register__notice {
    font-family: var(--sf-display) !important;
    font-size: 1.25rem !important;
    color: var(--sf-ink) !important;
    margin: 0 0 18px !important;
}
.sf-prose .sf-register__btn-link {
    display: inline-block !important;
    padding: 12px 28px !important;
    background: var(--sf-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background var(--sf-fast) var(--sf-ease) !important;
}
.sf-prose .sf-register__btn-link:hover { background: var(--sf-primary-dark) !important; color: #fff !important; }

/* Tablet — collapse split layout. Hide the editorial pull-quote because the
   hero shrinks to a wide banner and the quote can no longer breathe inside
   it without overlapping the form below. The image alone keeps the warm
   tone; the quote is a desktop-only flourish. */
@media (max-width: 880px) {
    .sf-prose .sf-register {
        grid-template-columns: 1fr !important;
        gap: clamp(28px, 4vw, 40px) !important;
        max-width: 560px !important;
    }
    .sf-prose .sf-register__hero {
        position: static !important;
        top: auto !important;
        aspect-ratio: 16 / 7 !important;
    }
    .sf-prose .sf-register__hero-frame { display: none !important; }
}
/* Mobile fine-tune */
@media (max-width: 640px) {
    .sf-prose .sf-register__slogan { font-size: clamp(1.875rem, 8vw, 2.5rem) !important; }
    .sf-prose .sf-register__hero { aspect-ratio: 16 / 9 !important; }
}