/* =============================================================================
 * wireframe.css — 랜딩 스타일 (디자인 수정본 · v2)
 * -----------------------------------------------------------------------------
 * 이 파일은 landing/assets/wireframe.css 의 복사본입니다. 원본은 그대로 두고
 * 여기에만 디자인 시안을 반영했습니다. 두 벌을 나란히 띄워 비교하기 위한
 * 것이지, 아직 교체본이 아닙니다.
 *
 * ▣ 근거 (2026-09-10)
 *   stitch_sba_ai_recruitment_key_visual (2)/ 의 시안(screen.png · code.html)과
 *   DESIGN.md 를 따랐습니다. 시안은 Tailwind 로 짜여 있지만 여기서는 옮겨
 *   심지 않습니다 — 이 페이지는 data.js 를 읽어 그리는 구조이고, 클래스를
 *   전부 바꾸면 그 구조가 같이 무너집니다. 바뀌는 것은 값(색·모서리·그림자·
 *   여백)과 몇 개의 새 부품뿐입니다.
 *
 * ▣ 원본과 달라진 것
 *   1) 바탕이 흰색에서 옅은 파랑(#F4F7FC)으로 바뀌고, 카드가 순백으로 떠오릅니다.
 *      원본은 카드도 바탕도 흰색이라 테두리로만 구분됐습니다.
 *   2) 히어로 네이비(#014895)가 시안의 코발트(#0046C0)로 올라갑니다.
 *   3) 모서리 12px → 16px, 그림자는 검정이 아니라 코발트를 옅게 깝니다.
 *   4) 섹션 사이 가로줄을 지웠습니다. 시안은 줄이 아니라 여백으로 끊습니다.
 *   5) 새 부품 — 상단 공고 띠 · 히어로 낙서 · 혜택 카드 4색 · 어두운 푸터.
 *
 * ▣ 모든 시각 값은 :root 토큰입니다. 색을 바꿀 일이 생기면 여기만 봅니다.
 * ========================================================================== */

/* =============================================================================
 * 웹폰트 — 직접 호스팅합니다
 * -----------------------------------------------------------------------------
 * CSP 가 font-src 'self' 라 구글 폰트·CDN 은 차단됩니다. 파일을 저장소에
 * 넣고 여기서 부릅니다. (vercel.json 은 건드리지 않았습니다)
 *
 * ▣ 왜 이 조합인가
 *   확정 키비주얼의 서체를 뜯어보니 이렇습니다.
 *     본문·정보   Pretendard (Black / Bold / Medium)
 *     큰 제목     TTLovelybabyB — 유료 서체라 웹에 못 씁니다
 *     손글씨      TTGamseongsidaeL — 마찬가지
 *   본문은 키비주얼과 같은 Pretendard 를 그대로 씁니다.
 *   제목만 TTLovelybabyB 를 대신할 둥근 서체가 필요해서 나눔스퀘어라운드
 *   를 씁니다 — 둥글지만 유아적이지 않고, 무료로 배포됩니다.
 *
 * ▣ 본문까지 둥글게 하지 않습니다
 *   둥근 서체는 글자 사이 구분이 약해서 긴 문장에서 눈이 미끄러집니다.
 *   제목·버튼·배지처럼 짧고 큰 글자에만 씁니다.
 *
 * ▣ 용량
 *   한글 폰트를 통째로 실으면 2.4MB 입니다. 상용 2350자(KS X 1001)와
 *   화면에 쓰는 글자만 남겨 681KB 로 줄였습니다. 지금 문구 중 상용 밖
 *   글자는 0자입니다. 운영자가 시트에 희귀한 글자를 넣으면 그 글자만
 *   대체 서체로 나옵니다 — 화면이 깨지지는 않습니다.
 *   다시 만들 때: tools/build-webfont.py
 *
 * ▣ font-display: swap
 *   폰트를 받는 동안 글자가 안 보이면 안 됩니다. 먼저 대체 서체로
 *   보여주고 준비되면 바꿉니다.
 * ========================================================================== */
@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-subset.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("./font/NanumSquareRound-B-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("./font/NanumSquareRound-EB-subset.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- 디자인 토큰 ---------------------------------------------------------- */
:root {
  /* ── 시안 팔레트 ────────────────────────────────────────────────────
     DESIGN.md 의 primary-container(#004bd6) 계열입니다. 확정 키비주얼에서
     실측한 #014895 보다 한 단계 밝고 채도가 높습니다 — 인쇄물은 잉크가
     내려앉아 어두워지지만 화면은 그럴 일이 없어서, 같은 인상을 내려면
     화면 쪽을 올려야 합니다.
     --kv-yellow 는 포스터에서 'AI' 와 '지금'을 가리키는 색이라,
     화면에서도 전환을 유도하는 자리에만 씁니다. */
  --kv-navy:      #0046C0;   /* 시안 cobalt-deep */
  /* 포스터 바탕색 실측값. 히어로가 포스터 그림 한 장을 통째로 얹기
     때문에, 그림 밖 여백이 이 색이어야 이음매가 안 보입니다. */
  --kv-poster:    #01489A;
  --kv-navy-deep: #003598;   /* 시안 cobalt-dark — 공고 띠·푸터 */
  --kv-navy-lift: #155CE8;   /* 시안 cobalt-light — hover */
  --kv-yellow:    #FFE24C;
  --kv-gold:      #F8BA28;
  --kv-pink:      #FF5C93;
  --kv-pink-pale: #FFE8EE;
  --kv-mint:      #36D5B4;
  --kv-sky:       #38BDF8;
  --kv-lilac:     #A78BFA;
  --kv-green:     var(--kv-mint);   /* 이전 이름 — 쓰던 곳이 있어 남겨 둡니다 */

  /* 포스터 조판 — 시안은 굵은 검정 테두리와 한 방향 그림자로 스티커를
     흉내냅니다. 흐린 그림자를 쓰면 인쇄물 느낌이 사라집니다. */
  --kv-ink:       #111C2D;   /* 테두리·글자용 먹 */
  --kv-navy-ink:  #002E8A;   /* 노랑 위에 얹는 진한 파랑 */
  --kv-drop:      #00266B;   /* 스티커 그림자 */
  --wf-sticker:   4px 4px 0 var(--kv-drop);
  --wf-sticker-sm: 3px 3px 0 var(--kv-drop);
  --kv-paper:     #FFFFFF;

  /* ── 표면 ──────────────────────────────────────────────────────────
     원본은 바탕도 카드도 흰색이라 카드가 테두리로만 보였습니다.
     시안처럼 바탕을 한 톤 내리고 카드를 순백으로 올립니다. */
  /* 페이지 바탕 — 구역이 번갈아 깔리도록 tint 보다 한 단계 밝게 둡니다.
     다만 예전 값(#F4F7FC)은 거의 흰색이라 띠가 아니라 빈 줄로 보였습니다.
     둘 다 파랑을 머금은 값으로 올려, 띠는 남기고 흰끼만 뺍니다.
     (2026-09-10) */
  --wf-canvas:      #F4F7FD;   /* 페이지 바탕 — 밝은 띠 */
  --wf-bg:          #FFFFFF;   /* 카드·기본 면 */
  --wf-surface:     #FFFFFF;
  /* 옅은 면을 한 단계씩 내렸습니다 (2026-09-10). 거의 흰색이라
     구역이 나뉜 것이 눈에 안 잡히고 화면이 비어 보였습니다. */
  --wf-surface-2:   #EBF1FC;   /* 표 머리·비활성·보조 칩 */
  --wf-tint:        #EAEFFA;   /* 옅게 깔린 파랑 구역 — 어두운 띠 */
  --wf-line:        #E0E6F1;
  --wf-line-strong: #C9D1E0;
  --wf-text:        #111C2D;
  --wf-text-mute:   #434655;
  --wf-text-faint:  #737686;
  --wf-fill:        var(--kv-navy);   /* 버튼 등 강조 면 */
  --wf-fill-text:   #ffffff;

  /* 시안은 카드 16px, 안쪽 부품 8~12px, 칩·배지는 완전한 알약입니다. */
  --wf-radius:    16px;
  --wf-radius-sm: 10px;
  --wf-gap: 20px;
  --wf-section-pad: 72px;
  --wf-max: 1200px;

  /* 그림자 — DESIGN.md 의 Elevated Card Tier 를 그대로 씁니다.
     무채색 그림자를 쓰면 파란 바탕 위에서 때가 낀 것처럼 보입니다. */
  --wf-shadow:      0 4px 16px -2px rgba(11, 87, 208, .08);
  --wf-shadow-lift: 0 8px 24px -4px rgba(11, 87, 208, .14);
  /* 스티커·메모처럼 종이로 보여야 하는 것만 따로 (DESIGN.md Tactile Tier) */
  --wf-shadow-paper: 0 10px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .06);

  --wf-font: "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  /* 제목·버튼·배지 — 둥근 서체. 본문에는 쓰지 않습니다. */
  --wf-font-display: "NanumSquareRound", "Pretendard", "Malgun Gothic", sans-serif;
  --wf-mono: "D2Coding", "Consolas", ui-monospace, monospace;

  /* SBA CI 색상 — 로고 원본에서 추출한 실제 값입니다(assets/logo/README.md). */
  --sba-blue: #00A4E0;
  --sba-gray: #54565B;
}

:root:not([data-theme="light"]) {
  color-scheme: light;
}

/* 다크 모드 — 시안에는 없습니다. 원본에 있던 것을 코발트 쪽으로만 맞춰
   그대로 둡니다. 지우면 어두운 화면을 쓰는 사람에게 흰 벽이 튑니다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wf-canvas:      #081B38;
    --wf-bg:          #0E2447;
    --wf-surface:     #0E2447;
    --wf-surface-2:   #16315C;
    --wf-tint:        #12294F;
    --wf-line:        #24406F;
    --wf-line-strong: #3D5A8A;
    --wf-text:        #EDF1F8;
    --wf-text-mute:   #A8B4CC;
    --wf-text-faint:  #7E8CA8;
    --wf-fill:        var(--kv-navy-lift);
    --wf-fill-text:   #ffffff;
    --wf-shadow:      0 1px 2px rgba(0, 0, 0, .30), 0 6px 16px rgba(0, 0, 0, .28);
    --wf-shadow-lift: 0 2px 4px rgba(0, 0, 0, .34), 0 12px 26px rgba(0, 0, 0, .38);
    --wf-shadow-paper: 0 10px 25px -5px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wf-canvas:      #081B38;
  --wf-bg:          #0E2447;
  --wf-surface:     #0E2447;
  --wf-surface-2:   #16315C;
  --wf-tint:        #12294F;
  --wf-line:        #24406F;
  --wf-line-strong: #3D5A8A;
  --wf-text:        #EDF1F8;
  --wf-text-mute:   #A8B4CC;
  --wf-text-faint:  #7E8CA8;
  --wf-fill:        var(--kv-navy-lift);
  --wf-fill-text:   #ffffff;
  --wf-shadow:      0 1px 2px rgba(0, 0, 0, .30), 0 6px 16px rgba(0, 0, 0, .28);
  --wf-shadow-lift: 0 2px 4px rgba(0, 0, 0, .34), 0 12px 26px rgba(0, 0, 0, .38);
  --wf-shadow-paper: 0 10px 25px -5px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* 앵커 이동을 부드럽게. 상단 바가 sticky(64px) 라 그냥 두면 목적지
   제목이 바 뒤로 들어갑니다 — scroll-padding-top 으로 그만큼 띄웁니다.
   움직임을 줄이도록 설정한 사람에게는 예전처럼 즉시 이동합니다.
   (2026-09-11) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--wf-canvas);
  color: var(--wf-text);
  font-family: var(--wf-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ── 줄바꿈 (2026-09-11) ──────────────────────────────────────────────
   한글은 기본값이면 어절 한가운데서도 끊깁니다 — '접수 상태|와',
   '준비해|야 하나요?', '(롯|데ON)' 처럼요. 예전에는 부품마다 keep-all 을
   따로 달아서(25곳) 빠진 곳마다 이렇게 떨어졌습니다. 페이지 전체에
   한 번 걸어 띄어쓰기에서만 끊기게 합니다. 띄어쓰기 없이 긴 영문
   (주소 · 파일명)은 넘칠 때만 접힙니다.

   끝줄에 한 단어만 남는 것도 막습니다 — '…HR 문서 AI / 자동화',
   '…도보 / 5분'. 제목류는 줄 길이를 고르게(balance), 본문은 끝줄이
   외톨이가 되지 않게(pretty) 둡니다. 지원하지 않는 브라우저는 예전처럼
   그냥 줄바꿈합니다. white-space: nowrap 을 둔 칩·배지는 그대로입니다. */
h1, h2, h3, h4, summary,
.wf-card__kicker,
.wf-section__head p,
.wf-hero__lede { text-wrap: balance; }

img { max-width: 100%; display: block; }

/* --- 공통 레이아웃 -------------------------------------------------------- */
.wf-wrap {
  max-width: var(--wf-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* 시안은 섹션을 가로줄로 끊지 않습니다. 줄을 지우고 여백으로만 나눕니다.
   대신 한 칸 건너 하나씩 옅은 파랑을 깔아 구역을 눈에 잡히게 합니다. */
.wf-section {
  position: relative;
  padding: var(--wf-section-pad) 0;
}
.wf-section--tint {
  background: var(--wf-tint);
}
/* 옅은 구역 안의 카드는 흰색이 그대로 살아야 떠 보입니다. 바탕과
   같은 색이면 테두리로만 겨우 구분됩니다. */
.wf-section--tint .wf-box,
.wf-section--tint .wf-card,
.wf-section--tint .wf-faq details { background: var(--wf-bg); }

.wf-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; }
/* 시안의 headline-lg(28px/800). 원본 22px 는 카드 제목과 너무 가까웠습니다. */
h2 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }

/* 시안의 섹션 머리 — 배지 · 큰 제목 · 한 줄 설명.
   기본은 가운데 정렬이고, 과정 섹션처럼 오른쪽에 조작이 붙는 곳만
   .wf-section__head--split 으로 좌우로 벌립니다. */
.wf-section__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 44px;
}
.wf-section__head h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  word-break: keep-all;
}
.wf-section__head h2 em { font-style: normal; color: var(--kv-navy); }
.wf-section__head p {
  max-width: 620px;
  color: var(--wf-text-mute);
  font-size: 15px;
  word-break: keep-all;
}
/* 배지 — 포스터의 스티커. 검정 테두리가 있어야 인쇄물로 읽힙니다. */
.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--kv-navy);
  color: #ffffff;
  border: 2px solid var(--kv-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 2px 0 rgba(0, 38, 107, .5);
  white-space: nowrap;
}
.wf-badge svg { width: 17px; height: 17px; flex: none; }
.wf-badge--soft {
  background: rgba(0, 70, 192, .10);
  color: var(--kv-navy);
  border: 0;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 5px 13px;
}
.wf-badge--soft i {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--kv-navy);
  font-style: normal;
}

/* 좌우로 벌리는 머리 (과정 섹션) */
.wf-section__head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  gap: 24px;
}
.wf-section__head--split .wf-section__head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.wf-section__head--split p { max-width: 640px; }
@media (max-width: 860px) {
  .wf-section__head--split { flex-direction: column; align-items: flex-start; }
}
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p  { margin: 0; }

/* --- placeholder 표기 ----------------------------------------------------
 * [ ... ] 로 감싼 미확정 콘텐츠는 전부 이 스타일로 보입니다.
 * 실제 값이 들어가면 자동으로 일반 텍스트로 렌더링됩니다. (app.js 판별)
 * ---------------------------------------------------------------------- */
.ph {
  font-family: var(--wf-mono);
  font-size: 0.92em;
  color: var(--wf-text-faint);
  background: var(--wf-surface-2);
  border: 1px dashed var(--wf-line-strong);
  border-radius: var(--wf-radius);
  padding: 1px 6px;
  display: inline-block;
}

.ph-block {
  display: block;
  padding: 14px;
  min-height: 56px;
}

/* 키비주얼 등 대형 자산 자리 */
.ph-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  border: 1px dashed var(--wf-line-strong);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      var(--wf-surface-2) 10px 11px
    ),
    var(--wf-surface);
  color: var(--wf-text-faint);
  font-family: var(--wf-mono);
  font-size: 13px;
  padding: 20px;
}

/* --- 주석(annotation) ----------------------------------------------------
 * 와이어프레임 설명 라벨. 상단 토글로 켜고 끕니다.
 * ---------------------------------------------------------------------- */
.wf-note {
  font-family: var(--wf-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--wf-text-mute);
  background: var(--wf-surface);
  border-left: 3px solid var(--wf-line-strong);
  padding: 8px 10px;
  margin: 10px 0;
}
.wf-note b { color: var(--wf-text); font-weight: 600; }
body.wf-notes-off .wf-note { display: none; }

/* --- 상단 바 -------------------------------------------------------------- */
/* 시안의 GNB 는 코발트 바탕에 흰 글씨입니다. 스크롤해도 붙어 있고,
   반투명 + 블러라 아래 내용이 비칩니다. */
.wf-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--kv-navy) 95%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  color: #ffffff;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .wf-topbar { background: var(--kv-navy); }
}
.wf-topbar__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 64px;
  flex-wrap: wrap;
}
/* 로고 자리. 안에 <img> 가 있으면 실제 로고, 없으면 placeholder 로 보입니다. */
.wf-topbar__logo {
  font-family: var(--wf-mono);
  font-size: 12px;
  color: var(--wf-text-faint);
  border: 1px dashed var(--wf-line-strong);
  padding: 4px 8px;
}

/* 두 기관을 한 덩어리로 묶습니다 (시안 GNB).
   주최·주관을 같이 걸어야 공고로 읽힙니다. */
.wf-orgs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wf-orgs__x { color: rgba(255, 255, 255, .38); font-size: 12px; }
.wf-orgs__sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  letter-spacing: -.01em;
}
.wf-topbar__brand { min-width: 0; }
.wf-topbar__flag {
  flex: none;
  margin-left: 4px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--kv-yellow);
  color: var(--kv-navy-ink);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 1080px) { .wf-topbar__flag { display: none; } }
@media (max-width: 900px) { .wf-orgs__sub { display: none; } }
.wf-topbar__logo:has(img) {
  border: 0;
  padding: 0;
}
.wf-topbar__logo img {
  display: block;
  height: 22px;
  width: auto;   /* 정비례 유지 — CI 규정상 가로세로를 따로 늘이면 안 됩니다 */
}

/* 다크 모드 — 국문 로고타입이 짙은 회색(#54565B)이라 어두운 배경에서 묻힙니다.
   반전(흰색) 국문 로고 파일을 받기 전까지는 로고를 건드리지 않고
   흰 판 위에 얹어서 보여줍니다. */
.wf-logo-plate {
  display: inline-flex;
  align-items: center;
  border-radius: var(--wf-radius-sm);
}
/* 상단 바가 코발트로 바뀌면서 국문 로고타입(#54565B)이 묻힙니다.
   반전 로고 파일을 받기 전까지는 흰 판을 깔아 규정을 건드리지 않습니다. */
.wf-topbar .wf-logo-plate {
  background: #ffffff;
  padding: 5px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.wf-topbar .wf-logo-plate img { height: 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-logo-plate {
    background: #ffffff;
    padding: 5px 9px;
  }
}
:root[data-theme="dark"] .wf-logo-plate {
  background: #ffffff;
  padding: 5px 9px;
}
/* 푸터가 네이비로 바뀌었으니 밝은 화면에서도 판을 깝니다. */
.wf-footer .wf-logo-plate {
  background: #ffffff;
  padding: 6px 10px;
}
.wf-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}
.wf-nav {
  gap: 2px;
  align-items: center;
}
.wf-nav a {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
}
/* 시안은 hover 에서 글자를 노랑으로 바꿉니다 — 테두리를 그리지 않습니다. */
.wf-nav a:hover { color: var(--kv-yellow); background: rgba(255, 255, 255, .10); }

/* 상단 바 오른쪽 신청 버튼 — 시안에서 가장 강한 자리입니다. */
.wf-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--kv-yellow);
  color: #002E8A;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(255, 226, 76, .35);
  transition: transform .15s ease, background-color .15s ease;
}
.wf-topbar__cta:hover { background: #FFE769; transform: translateY(-1px); }
.wf-topbar__ghost {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.wf-topbar__ghost:hover { background: rgba(255, 255, 255, .20); }
@media (max-width: 1200px) { .wf-topbar__ghost { display: none; } }
@media (prefers-reduced-motion: reduce) { .wf-topbar__cta { transition: none; } }
.wf-topbar__cta::after { /* 화살표. 예전에는 제어문자(U+0011)가 파일에 박혀 있어 화면에
     ◀92 처럼 보였습니다 — →(U+2192) 를 넣으려다 깨진 것으로
     보입니다. CSS 이스케이프로 적어 편집기에서 다시 깨지지
     않게 합니다. (2026-09-10) */
  content: "\2192"; font-weight: 700; }

/* A6 — 햄버거 버튼. 모바일에서만 보입니다. */
.wf-navbtn {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  border-radius: var(--wf-radius);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wf-navbtn__bar {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  transition: transform 160ms ease, opacity 160ms ease;
}
body.wf-nav-open .wf-navbtn__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.wf-nav-open .wf-navbtn__bar:nth-child(2) { opacity: 0; }
body.wf-nav-open .wf-navbtn__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .wf-navbtn__bar { transition: none; }
}

/* --- 버튼 ---------------------------------------------------------------- */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border: 1px solid var(--wf-fill);
  background: var(--wf-fill);
  color: var(--wf-fill-text);
  border-radius: 999px;   /* 시안의 기본 버튼은 알약입니다 */
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.wf-btn:hover { background: var(--kv-navy-lift); border-color: var(--kv-navy-lift); }
@media (prefers-reduced-motion: reduce) { .wf-btn { transition: none; } }
.wf-btn--ghost {
  /* 투명이 아니라 흰색입니다. 투명하면 옅은 바탕 위에 올렸을 때
     테두리만 남아 눌리는 것으로 안 보였습니다. 히어로(남색) 위에서는
     아래 .wf-hero .wf-btn--ghost 가 이깁니다. (2026-09-11) */
  background: var(--wf-bg);
  color: var(--wf-text);
  border-color: var(--wf-line-strong);
  font-weight: 600;
}
.wf-btn--ghost:hover {
  background: #EFF6FF;
  border-color: var(--kv-navy);
  color: var(--kv-navy);
}
.wf-btn--sm { padding: 8px 14px; font-size: 13px; }
.wf-btn--block { width: 100%; }
.wf-btn[aria-disabled="true"],
.wf-btn:disabled {
  background: var(--wf-surface-2);
  color: var(--wf-text-faint);
  border-style: dashed;
  border-color: var(--wf-line-strong);
  cursor: not-allowed;
}
.wf-btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--wf-line-strong);
  outline-offset: 2px;
}

/* --- HERO ---------------------------------------------------------------- */
/* 히어로만 포스터 바탕색을 그대로 씁니다.
   <section> 이고 #wf-root 에 max-width 가 없어서, 배경만 주면 화면 폭을
   채웁니다. 안쪽 .wf-wrap 이 내용을 가둡니다. */
/* 시안의 히어로는 코발트 한 판에 손그림 별과 리본이 흩어져 있습니다.
   별은 이미지가 아니라 배경 SVG 로 깝니다 — 파일이 늘지 않고, 색도
   토큰을 따라갑니다. .ai 원본이 오면 캐릭터로 교체할 자리입니다. */
.wf-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(56, 189, 248, .22) 0%, rgba(0, 70, 192, 0) 60%),
    var(--kv-navy);
  color: #ffffff;
  border-bottom: 0;
}
/* 손그림 낙서 — 별 셋과 리본 하나. pointer-events 를 끄지 않으면
   글자 위를 덮어 선택이 안 됩니다. */
.wf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.8h7.2l-5.8 4.4 2.2 6.8-6-4.2-6 4.2 2.2-6.8-5.8-4.4h7.2z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE24C' stroke-opacity='.75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.8h7.2l-5.8 4.4 2.2 6.8-6-4.2-6 4.2 2.2-6.8-5.8-4.4h7.2z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5C93' stroke-opacity='.8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.8h7.2l-5.8 4.4 2.2 6.8-6-4.2-6 4.2 2.2-6.8-5.8-4.4h7.2z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23FF5C93' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10,40 Q25,10 40,35 T55,20'/%3E%3C/svg%3E");
  /* 오른쪽 절반은 키비주얼이 씁니다. 배경 낙서는 왼쪽(글자 쪽)에만
     남깁니다 — 그림 위에 또 낙서가 겹치면 둘 다 안 보입니다. */
  background-position: 21% 26px, 44% calc(100% - 26px), -100px -100px, -100px -100px;
  background-size: 30px 30px, 24px 24px, 0, 0;
}
@media (max-width: 860px) {
  /* 좁은 화면에는 낙서를 놓을 빈 자리가 없습니다. 글자 위를 덮느니
     오른쪽 위 하나만 남기고, 그 하나가 앉을 여백을 위에 만듭니다. */
  .wf-hero { padding-top: 52px; }
  .wf-hero::before {
    background-position: 91% 14px, -100px -100px, -100px -100px, -100px -100px;
    background-size: 22px 22px, 0, 0, 0;
  }
}
.wf-hero .wf-wrap { position: relative; z-index: 1; }

/* ── 포스터 윗단을 한 장으로 쓰는 히어로 ──────────────────────────
   그림이 말풍선·제목·캐릭터·메모지·낙서를 다 갖고 있습니다.
   바탕은 포스터 실측색이라 그림 가장자리가 안 보입니다. */
.wf-hero--band {
  padding: 14px 0 56px;
  background: var(--kv-poster);
}
.wf-hero--band::before { content: none; }   /* CSS 낙서는 그림과 겹칩니다 */
.wf-hero__band {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}
.wf-hero__band img {
  display: block;
  width: 100%;
  height: auto;
}
/* 그림 아래 — 한 줄 소개 · 버튼 · 접수 기간을 가운데로 모읍니다 */
.wf-hero__under {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.wf-hero__under .wf-hero__callout { max-width: 620px; order: 1; }
.wf-hero__under .wf-hero__cta { justify-content: center; order: 2; }
/* 접수 기간은 버튼 다음입니다 — 누를 것을 먼저 보여주고, 날짜는 그
   버튼이 언제까지 유효한지를 말해 줍니다. */
.wf-hero__under .wf-hero__period { order: 3; margin-bottom: 0; }

/* ── 좌우 나눔 히어로 ────────────────────────────────────────────
   왼쪽 글 · 오른쪽 포스터 윗단. 바탕이 포스터 실측색이라 그림의
   네모난 가장자리가 보이지 않고, 글자 옆에 그림만 떠 있는 것처럼
   보입니다. */
.wf-hero--split {
  padding: 44px 0 56px;
  background: var(--kv-poster);
}
.wf-hero--split::before { content: none; }   /* 낙서는 그림이 갖고 있습니다 */
.wf-hero__split {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 32px;
  align-items: center;
}
.wf-hero--split .wf-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.wf-hero--split .wf-hero__band { max-width: 100%; }
/* 이 모드에서만 제목이 글자입니다 (다른 모드는 그림 안에 있습니다) */
.wf-hero--split .wf-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.035em;
  line-height: 1.28;
  word-break: keep-all;
  text-wrap: balance;
}
.wf-hero--split .wf-hero__lede {
  color: #D6E4FA;
  font-size: 16.5px;
  line-height: 1.65;
  word-break: keep-all;
  max-width: 30em;
}
.wf-hero--split .wf-hero__facts { margin: 0; }
.wf-hero--split .wf-hero__period { margin: 0; }
@media (max-width: 900px) {
  .wf-hero__split { grid-template-columns: 1fr; gap: 22px; }
  /* 좁아지면 포스터가 먼저입니다. 확정 키비주얼은 무엇을 파는
     공고인지 한눈에 말합니다 — 첫 화면에서 글보다 빨리 읽힙니다.
     PC 는 좌우로 나란해서 순서 문제가 없습니다. (2026-09-11) */
  .wf-hero--split .wf-hero__visual { order: 1; }
  .wf-hero--split .wf-hero__copy { order: 2; }
  .wf-hero--split .wf-hero__title { font-size: 29px; }
}

/* 화면에는 안 보이고 낭독기만 읽는 제목.
   제목이 그림 안에 박혀 있어서 이 줄이 없으면 페이지에 <h1> 이 없습니다. */
.wf-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 히어로 맨 위 캡슐 — 시안은 이걸 가운데에 하나 둡니다.
   기관명과 회차라 제목보다 먼저 읽히면 안 되고, 없으면 공신력이 없습니다. */
.wf-hero__pill {
  display: flex;
  width: fit-content;
  margin: 0 auto 26px;
  align-items: center;
  gap: 9px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(21, 92, 232, .45);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  word-break: keep-all;
}
.wf-hero__pill i {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--kv-yellow);
  flex: none;
}
.wf-hero__callout-mark {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EAF2FD;
  color: var(--kv-navy);
}
.wf-hero__callout-mark svg { width: 24px; height: 24px; }
/* 포스터에서 오려낸 캐릭터. 원본 비율을 지킵니다.
   크기는 옆 제목이 기준입니다 — 캐릭터가 제목보다 커지면 눈이 그림에
   먼저 가고, 무슨 교육인지는 그 다음에 읽힙니다. */
.wf-hero__figure {
  width: 100%;
  max-width: 268px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 20, 60, .32));
}

/* 키비주얼 — 오른쪽 칸에서 가운데 정렬로 눕습니다.
   크기는 위 .wf-hero__figure 한 곳에서만 정합니다. 여기서 max-width 를
   또 주면 선택자가 더 강해서 그쪽이 이겨버립니다. */
.wf-hero__visual img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.wf-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.wf-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* 한글은 기본값이면 어절 중간에서도 끊깁니다 — '미뤘다 / 면' 처럼요. */
/* ── 포스터 제목 조판 ────────────────────────────────────────────
   시안은 제목을 한 줄 문장이 아니라 스티커 세 덩어리로 쌓습니다.
   구름 배지 / 흰 블록 + 노랑 블록 / 테이프 리본.
   글자 크기가 아니라 '판때기'가 크기를 만듭니다. */
.wf-hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: inherit;
  line-height: 1.1;
}
.wf-lockup__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: rotate(-2deg);
  background: #ffffff;
  color: var(--kv-ink);
  border: 4px solid var(--kv-ink);
  border-radius: 999px;
  padding: 9px 24px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: var(--wf-sticker);
}
.wf-lockup__badge mark {
  background: none;
  color: var(--kv-pink);
  text-decoration: underline wavy var(--kv-pink);
  text-underline-offset: 4px;
}
.wf-lockup__badge::after { content: "\2665"; color: var(--kv-pink); font-size: 20px; }

.wf-lockup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wf-lockup__block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 4px solid var(--kv-ink);
  border-radius: 18px;
  padding: 6px 20px;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.045em;
  box-shadow: var(--wf-sticker);
}
.wf-lockup__block--paper { background: #ffffff; color: var(--kv-ink); }
.wf-lockup__block--gold  { background: var(--kv-yellow); color: var(--kv-navy-ink); }
.wf-lockup__block--gold b { color: var(--kv-ink); font-weight: 800; }
/* 'AI' 안의 웃는 얼굴 — 포스터에서 A 안에 들어 있는 그 표시입니다 */
.wf-lockup__smile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--kv-ink);
  color: var(--kv-navy-ink);
  font-size: 22px;
  line-height: 1;
}
.wf-lockup__tape {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: rotate(1deg);
  background: var(--kv-yellow);
  color: var(--kv-navy-ink);
  border: 2px solid var(--kv-ink);
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: var(--wf-sticker-sm);
}
.wf-lockup__tape::before { content: "\2197"; font-size: 19px; }
/* 시안은 이 줄을 알약 배지로 답니다 — 기관명과 회차라 제목보다 먼저
   읽히면 안 되고, 그렇다고 없애면 공신력이 사라집니다. */
.wf-hero__eyebrow {
  display: inline-block;
  color: #002E8A;
  background: var(--kv-yellow);
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: -.01em;
}
/* 한 줄 소개 — 시안은 이걸 노트북 그림이 붙은 흰 쪽지에 담습니다.
   파란 바탕 위 흰 글씨로 두면 스티커들 사이에서 묻힙니다. */
.wf-hero__callout {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .96);
  border: 2px dashed var(--kv-yellow);
  border-radius: 18px;
  padding: 12px 18px;
  max-width: 520px;
  box-shadow: var(--wf-shadow-paper);
}
.wf-hero__callout img { width: 54px; flex: none; }
.wf-hero__callout p {
  color: #334155;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.wf-hero__callout b {
  display: block;
  color: var(--kv-navy);
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 2px;
}
.wf-hero__period {
  order: 2;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #ffffff;
}
.wf-hero__period-label { color: #A9C6EC; font-size: 13px; }
/* 접수 기간 날짜 — 포스터에서 노랑이 '지금'을 가리키는 색입니다 */
.wf-hero__period strong { color: var(--kv-yellow); }
.wf-hero__facts {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
/* 포스터의 스티커를 알약 모양으로 옮겼습니다 */
.wf-hero__facts li {
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 5px 14px;
  color: #ffffff;
}
/* 첫 칸(전액 무료)만 노랑으로 세웁니다. 전부 칠하면 위계가 사라집니다. */
.wf-hero__facts li:first-child {
  background: var(--kv-yellow);
  color: #14213D;
  border-color: var(--kv-yellow);
  font-weight: 700;
}
.wf-hero__cta {
  order: 3;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
/* 시안의 1차 버튼은 스티커입니다 — 검정 테두리에 한 방향 그림자 */
.wf-hero .wf-btn {
  border: 3px solid var(--kv-ink);
  box-shadow: var(--wf-sticker-sm);
  font-size: 16px;
  padding: 14px 28px;
}
.wf-hero .wf-btn:hover { transform: translateY(-2px); }
.wf-hero__cta .wf-link {
  color: rgba(255, 255, 255, .9);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wf-hero__cta .wf-link:hover { color: var(--kv-yellow); }
/* 히어로 버튼 — 네이비 위라 색을 뒤집습니다. 노랑이 포스터에서 전환을
   유도하는 색이라 그대로 씁니다.
   ---------------------------------------------------------------------------
   테두리 두께 · 패딩 · 그림자는 위 스티커 규칙(.wf-hero .wf-btn)이 정합니다.
   여기서는 색만 바꿉니다. 예전에는 여기서 padding 과 border 까지 다시
   잡는 바람에 두 버튼의 높이(56 / 52)와 테두리(3px / 1px)가 어긋났습니다.
   (2026-09-10) */
.wf-hero .wf-btn {
  background: var(--kv-yellow);
  border-color: var(--kv-ink);
  color: var(--kv-navy-ink);
}
.wf-hero .wf-btn--ghost {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #ffffff;
}

/* 올리면 테두리가 또렷해집니다 — 눌리는 것이라는 신호입니다. */
.wf-hero .wf-btn:hover {
  background: #FFEC7A;
  border-color: var(--kv-navy-ink);
  box-shadow: var(--wf-sticker);
}
.wf-hero .wf-btn--ghost:hover {
  background: rgba(255, 255, 255, .24);
  border-color: #ffffff;
  box-shadow: none;
}

/* --- 카드/박스 공통 ------------------------------------------------------- */
.wf-box {
  border: 1px solid var(--wf-line);
  background: var(--wf-surface);
  padding: 24px;
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
}
.wf-grid { display: grid; gap: var(--wf-gap); }

/* 신청 안내 아래 조회 진입점.
   넓은 화면에서는 설명과 버튼을 한 줄에, 좁은 화면에서는 세로로 쌓습니다. */
.wf-lookup {
  margin-top: var(--wf-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wf-lookup__copy { min-width: 0; }
.wf-lookup__body {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--wf-text-mute);
}
.wf-lookup__cta { flex: none; }
@media (max-width: 560px) {
  .wf-lookup { align-items: stretch; }
  .wf-lookup__cta { width: 100%; text-align: center; }
}
.wf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wf-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 정의형 목록 (라벨 : 값) */
.wf-dl { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; font-size: 14px; margin: 0; }
.wf-dl dt { color: var(--wf-text-mute); }
.wf-dl dd { margin: 0; }
/* 교육 장소 — 이름 · 주소 · 노선을 한 줄씩 (2026-09-11) */
.wf-dd-place > span { display: block; }
.wf-dd-place__sub { margin-top: 2px; font-size: 13px; color: var(--wf-text-mute); }

/* --- 모집 상태 영역 (SECTION 03) --------------------------------------------
 * 주요 분류는 모집 상태입니다: 모집 중 → 모집 예정 → 모집 마감.
 * 모집 중 영역만 시각적으로 강조하고, 나머지는 톤을 낮춥니다.
 * -------------------------------------------------------------------------- */
.wf-group-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.wf-group-toolbar__hint { font-size: 12.5px; color: var(--wf-text-faint); }

.wf-group { margin-bottom: 34px; }
.wf-group:last-child { margin-bottom: 0; }

.wf-group__head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
  border-top: 2px solid var(--wf-line-strong);
  padding-top: 12px;
  margin-bottom: 16px;
}
.wf-group__title { font-size: 18px; }
.wf-group__count {
  font-size: 12.5px;
  color: var(--wf-text-mute);
  border: 1px solid var(--wf-line);
  padding: 1px 8px;
  border-radius: var(--wf-radius);
  white-space: nowrap;
}
.wf-group__desc {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--wf-text-mute);
}

/* 모집 중 — 지금 신청 가능한 영역이므로 테두리를 진하게 */
.wf-group[data-group="open"] .wf-group__head { border-top-color: var(--wf-fill); }
.wf-group[data-group="open"] .wf-group__title { font-size: 20px; }

/* 마감 — 톤 다운 */
.wf-group[data-group="closed"] .wf-group__head { border-top-color: var(--wf-line); }
.wf-group[data-group="closed"] .wf-group__title { color: var(--wf-text-mute); }
.wf-group[data-group="closed"] .wf-card { background: var(--wf-surface); }
.wf-group[data-group="closed"] .wf-card__title { color: var(--wf-text-mute); }

.wf-group__empty {
  border: 1px dashed var(--wf-line-strong);
  background: var(--wf-surface);
  color: var(--wf-text-faint);
  font-family: var(--wf-mono);
  font-size: 13px;
  padding: 22px;
  text-align: center;
  border-radius: var(--wf-radius);
}

/* --- 과정 카드 (시안) ------------------------------------------------------
 * 8장이 4열로 깔립니다. 각 장은 아이콘 타일 · 분류 칩 · 제목 · 한 줄 소개 ·
 * 태그 · 바닥 줄(기간 + 상세보기) 순입니다.
 * 카드마다 색이 다릅니다. 색은 분류(단계별/직무별)가 아니라 과정마다
 * 도는 색이고, 무슨 색인지가 뜻을 갖지는 않습니다 — 여덟 장을 눈으로
 * 세게 하는 장치입니다. 뜻은 칩이 글자로 말합니다.
 * ------------------------------------------------------------------------ */
.wf-courses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) { .wf-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .wf-courses { grid-template-columns: 1fr; } }

.wf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 2px solid var(--wf-card-line, #B5C4FF);
  border-radius: 22px;
  background: var(--wf-bg);
  padding: 22px 20px 18px;
  box-shadow: var(--wf-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.wf-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wf-shadow-lift);
  border-color: var(--wf-card-ink, var(--kv-navy));
}
@media (prefers-reduced-motion: reduce) {
  .wf-card { transition: none; }
  .wf-card:hover { transform: none; }
}

/* 머리 — 아이콘 타일과 분류 칩 */
.wf-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.wf-card__mark {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--wf-card-tint, #CFE2FF);
  border: 2px solid var(--wf-card-line, #9EC5FE);
  color: var(--wf-card-ink, var(--kv-navy));
}
.wf-card__mark svg { width: 24px; height: 24px; }
.wf-card__mark span { font-size: 10.5px; font-weight: 800; line-height: 1; }
.wf-card__chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wf-card-tint, #CFE2FF);
  color: var(--wf-card-ink, var(--kv-navy));
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.wf-card__kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wf-text-faint);
}
.wf-card__title {
  margin-top: 3px;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.4;
  word-break: keep-all;
}
.wf-card__summary {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--wf-text-mute);
  word-break: keep-all;
}
/* 태그 — 과정에 tags 가 있을 때만 나옵니다 */
.wf-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.wf-card__tag {
  padding: 2px 8px;
  border-radius: 7px;
  background: #F1F5F9;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
}
/* 바닥 줄 — 왼쪽에 기간, 오른쪽에 버튼.
   ---------------------------------------------------------------------------
   기간 문구가 길면(예: '28h 내외 (이러닝 4h + 대면 3일 + 비대면 3h)')
   한 줄에 버튼까지 못 들어갑니다. 예전에는 nowrap 이라 접히지도 않고
   버튼을 카드 밖으로 42px 밀어내 테두리를 뚫었습니다.
   문구는 접히게 두고, 버튼은 줄어들지 않게 붙잡습니다. (2026-09-10) */
/* (2026-09-11) 바닥 줄을 세 가지로 고정합니다.
   ① 선 위 여백 16px — 바닥 줄이 카드 맨 아래에 붙어 있어서, 한 줄에서
      가장 긴 카드는 태그와 선 사이가 0px 이었습니다(나머지는 18~69px).
      선을 바닥 줄 안쪽 16px 아래에 긋습니다.
   ② 버튼은 늘 오른쪽 — 줄바꿈을 허용했더니 폭과 문구 길이에 따라
      상세보기가 문구 아래 왼쪽으로 떨어졌다가 올라왔다가 했습니다.
      문구가 자기 칸 안에서 접히고, 버튼은 그 옆에 남습니다.
   ③ 문구 칸은 두 줄 자리 — 한 줄짜리(25h …)와 두 줄짜리(28h …)가
      섞이면 바닥 줄 높이가 달라져 같은 줄 카드끼리 선 높이가
      어긋났습니다. 두 줄 자리를 잡고 가운데 세웁니다. */
.wf-card__foot {
  margin-top: auto;
  position: relative;
  padding-top: 30px;          /* 선 위 16 + 선 아래 14 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.wf-card__foot::before {
  content: "";
  position: absolute;
  top: 16px; left: 0; right: 0;
  border-top: 1px solid var(--wf-line);
}
.wf-card__when {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--wf-card-ink, var(--kv-navy));
  /* 어절 경계에서만 접힙니다 — 숫자와 단위가 갈라지지 않게 */
  word-break: keep-all;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.4;
  min-height: 2.8em;          /* 두 줄 자리 */
  display: flex;
  align-items: center;
  text-wrap: balance;
}
/* 버튼은 글자 길이만큼만 차지하고 줄어들지 않습니다 */
.wf-card__foot .wf-card__more,
.wf-card__foot .wf-btn { flex: 0 0 auto; }
.wf-card__more {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--wf-card-tint, #CFE2FF);
  color: var(--wf-card-ink, var(--kv-navy));
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.wf-card:hover .wf-card__more { background: var(--wf-card-ink, var(--kv-navy)); color: #ffffff; }
.wf-card__foot .wf-btn { padding: 7px 14px; font-size: 12px; }
/* 두 버튼의 높이를 맞춥니다 (PC · 태블릿, 2026-09-11).
   모집 중 카드는 '지원하기'(.wf-btn), 예정 카드는 '상세보기' 인데 둘의
   높이가 3px 달라 같은 줄에 섞이면 선 높이가 어긋났습니다 — 9/16 이후
   1차 과정이 열리면 실제로 섞입니다. 폰(720px 이하)은 카드가 한 줄에
   하나라 맞출 줄이 없고, 지원하기는 손가락용 44px 을 그대로 둡니다. */
@media (min-width: 721px) {
  .wf-card__foot .wf-card__more,
  .wf-card__foot .wf-btn {
    box-sizing: border-box;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
  }
}

/* 카드 색 — 포스터 아이콘 타일에서 실측한 값입니다.
   app.js 가 과정 분류를 보고 data-track 을 붙입니다. 여덟 장이 네 색을
   두 번 쓰는데, 그게 포스터의 방식입니다(단계별 4색 · 직무별 4색). */
.wf-card[data-track="basic"]     { --wf-card-tint:#C9E1FD; --wf-card-line:#9CC4F5; --wf-card-ink:#0355AF; }
.wf-card[data-track="mid"]       { --wf-card-tint:#CFCFFD; --wf-card-line:#B0AEF9; --wf-card-ink:#5339E3; }
.wf-card[data-track="deep"]      { --wf-card-tint:#FED8E7; --wf-card-line:#FCAFCF; --wf-card-ink:#D93583; }
.wf-card[data-track="applied"]   { --wf-card-tint:#CFEEDF; --wf-card-line:#9FDCC7; --wf-card-ink:#07877D; }
.wf-card[data-track="finance"]   { --wf-card-tint:#D3D2FD; --wf-card-line:#B4B2F8; --wf-card-ink:#5545D8; }
.wf-card[data-track="design"]    { --wf-card-tint:#FED5E7; --wf-card-line:#FCACCE; --wf-card-ink:#D93585; }
.wf-card[data-track="marketing"] { --wf-card-tint:#CAEDD3; --wf-card-line:#A2DCB4; --wf-card-ink:#129775; }
.wf-card[data-track="hr"]        { --wf-card-tint:#FEEBB3; --wf-card-line:#F5D682; --wf-card-ink:#BD7C05; }

/* 포스터에서 뽑은 아이콘은 색 상자를 이미 갖고 있습니다.
   그 위에 또 상자를 깔면 두 겹이 됩니다. */
/* 아이콘 판이 60x66 이라 옆의 정사각 판들과 어긋나 보였습니다.
   판을 정사각으로 두고 그림은 비율을 지키며 가운데에 놓습니다.
   (2026-09-10) */
/* 아이콘 판 — 그림(84.1 x 92.8)과 같은 비율로 둡니다.
   정사각 상자에 넣고 object-fit 으로 맞추면, SVG 의 고유 크기를 못
   읽는 브라우저에서 늘어나거나 폭이 제각각으로 보입니다. 상자를
   그림 비율에 맞추면 맞춤 계산 자체가 없어져 여덟 장이 항상 같습니다.
   (2026-09-10) */
.wf-card__mark--kv {
  background: none; border: 0; padding: 0;
  width: 56px;
  aspect-ratio: 84.1 / 92.8;
  height: auto;
  display: block;
  flex: none;
}
.wf-card__mark--kv img {
  width: 100%; height: 100%;
  display: block;
}

/* 모집 상태 배지 — 카드 오른쪽 위. 모집 중일 때만 색이 섭니다. */
.wf-status {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--wf-line-strong);
  color: var(--wf-text-mute);
  background: var(--wf-bg);
  white-space: nowrap;
}
.wf-status[data-tone="active"] { background: var(--kv-mint); border-color: var(--kv-mint); color: #04372A; }
.wf-status[data-tone="warn"]   { background: var(--kv-yellow); border-color: var(--kv-gold); color: #4A3800; }
.wf-status[data-tone="muted"]  { color: var(--wf-text-faint); border-style: dashed; }

/* 카드 위 상태 줄 — 배지가 아이콘 타일과 겹치지 않게 따로 한 줄 */
.wf-card__status {
  position: absolute;
  top: -11px; right: 16px;
}

/* --- 타임라인 표 ---------------------------------------------------------- */
.wf-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg);
}
.wf-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.wf-table th, .wf-table td {
  border: 1px solid var(--wf-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.wf-table thead th { background: var(--wf-surface-2); font-weight: 600; }
.wf-table--wide { min-width: 660px; }
.wf-table .wf-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* '구분' '시수' '시간' 같은 짧은 칸이 두 줄로 접히면 표가 들쭉날쭉해
   보입니다. 머리글과 행 제목, 그리고 시수 칸은 접지 않습니다.
   긴 칸(강의제목·강의내용)은 그대로 접힙니다. (2026-09-10) */
.wf-table thead th,
.wf-table tbody th[scope="row"] { white-space: nowrap; }
/* 시수 — 커리큘럼 표의 네 번째 칸입니다 */
.wf-table--wide td:nth-child(4) { white-space: nowrap; }
/* 커리큘럼 표 — 강의제목 · 사용 AI 칸 (PC · 태블릿, 2026-09-11)
   표가 넓게 펼쳐지면 강의내용 칸이 폭을 다 가져가 강의제목 칸이
   126px 까지 눌렸습니다. 그래서 '관리회계 데이터 / 정리',
   '자동화 워크플로우 / 구현' 처럼 끝 단어 하나만 다음 줄로 떨어졌고,
   사용 AI 칸은 'Gamma, Notion / AI' 처럼 제품명이 갈라졌습니다.
   제목 칸에 최소 폭을 주고, 두 칸은 줄 길이를 고르게 나눕니다 —
   한 줄에 들어가면 한 줄, 아니면 반반으로 접힙니다.
   모바일(640px 이하)은 표가 카드로 바뀌어 해당이 없습니다. */
@media (min-width: 641px) {
  .wf-table--wide thead th:nth-child(2) { width: 12em; }
  .wf-table--wide td:nth-child(2),
  .wf-table--wide td:nth-child(5),
  .wf-table--pre td:nth-child(2) { text-wrap: balance; }
}
/* 교육 일정 표(구분·일자·시간) 는 세 칸 모두 짧습니다.
   예전에는 '넓지 않은 표' 전체를 한 줄로 묶었는데, 공통 사전교육 표도
   넓지 않은 표라 긴 강의내용까지 한 줄로 묶였습니다. 모바일에서는
   표가 카드로 바뀌며 가로 스크롤이 없어져 그 줄이 화면 밖으로
   빠져나갔습니다(최대 141px). 표마다 이름을 붙여 짧은 칸만 묶습니다.
   (2026-09-11) */
.wf-table--schedule td { white-space: nowrap; }
/* 사전교육 표의 시수 — 커리큘럼 표와 같은 네 번째 칸입니다 */
.wf-table--pre td:nth-child(4) { white-space: nowrap; }
.wf-table td b { font-weight: 600; }

/* --- 신청 절차 ------------------------------------------------------------ */
/* 네 단계가 회색 상자 넷이라 밋밋했습니다. 과정 카드처럼 색 테두리와
   번호 원을 줍니다 — 순서가 있는 것이므로 색은 네 가지를 돌려 씁니다.
   (2026-09-10) */
.wf-step {
  position: relative;
  border: 1.5px solid var(--wf-line);
  border-top: 4px solid var(--kv-sky);
  border-radius: var(--wf-radius-sm);
  padding: 18px 16px 16px;
  background: var(--wf-bg);
  box-shadow: var(--wf-shadow);
}
.wf-step:nth-child(1) { border-top-color: var(--kv-sky); }
.wf-step:nth-child(2) { border-top-color: var(--kv-green); }
.wf-step:nth-child(3) { border-top-color: var(--kv-gold); }
.wf-step:nth-child(4) { border-top-color: var(--kv-pink); }

.wf-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  padding: 0 9px;
  margin-bottom: 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #ffffff;
  background: var(--kv-sky);
}
.wf-step:nth-child(1) .wf-step__num { background: var(--kv-sky); }
.wf-step:nth-child(2) .wf-step__num { background: var(--kv-green); }
/* 골드 판에만 어두운 글자를 썼는데 넷이 나란히 서니 이것만 달라
   보였습니다. 넷 다 흰 글자로 맞춥니다. */
.wf-step:nth-child(3) .wf-step__num { background: var(--kv-gold); color: #ffffff; }
.wf-step:nth-child(4) .wf-step__num { background: var(--kv-pink); }

/* 신청 안내 세 상자 목록 — 셋이 같은 모양이어야 합니다 */
.wf-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.75;
}
.wf-list li { word-break: keep-all; }
.wf-list li + li { margin-top: 6px; }

/* 교육 목적 + 교육 대상 — 두 단.
   목적 글은 읽는 폭(62ch)을 넘기지 않고, 남는 자리에 대상 카드를
   세웁니다. 대상이 없으면 wf-about--split 이 안 붙어 한 단이 됩니다. */
.wf-about--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.wf-about--split .wf-purpose { margin-bottom: 0; }

.wf-who {
  border: 1.5px solid var(--wf-line);
  border-left: 4px solid var(--kv-pink);
  border-radius: var(--wf-radius);
  background: var(--wf-bg);
  padding: 22px 24px;
  box-shadow: var(--wf-shadow);
}
.wf-who__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--wf-font-display);
  color: var(--wf-text);
  margin-bottom: 10px;
}
.wf-who__head svg { width: 18px; height: 18px; color: var(--kv-pink); }
.wf-who__body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--wf-text-mute);
  word-break: keep-all;
  margin-bottom: 14px;
}
.wf-who__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 세 줄이 곧 '내가 신청할 수 있는가' 의 답이라 크게 세웁니다.
   마우스를 올리면 그 줄만 떠오릅니다 — 자기 해당 항목을 짚어가며
   읽는 자리이기 때문입니다. */
.wf-who__list li {
  position: relative;
  padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--wf-line);
  border-radius: 12px;
  background: var(--wf-bg);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  transition: border-color .15s ease, background-color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
.wf-who__list li:hover {
  border-color: var(--kv-mint);
  background: #F0FDF9;
  transform: translateX(3px);
  box-shadow: var(--wf-shadow);
}
/* 체크 표시 — 해당하면 신청할 수 있다는 뜻이라 목록 점보다 낫습니다 */
.wf-who__list li::before {
  content: "";
  position: absolute;
  left: 15px; top: 1.05em;
  width: 15px; height: 9px;
  border-left: 3px solid var(--kv-mint);
  border-bottom: 3px solid var(--kv-mint);
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .wf-who__list li { transition: none; }
  .wf-who__list li:hover { transform: none; }
}

@media (max-width: 900px) {
  .wf-about--split { grid-template-columns: 1fr; gap: 28px; }
}

/* --- FAQ ----------------------------------------------------------------- */
/* 문답을 한 장씩 떼어 카드로 만듭니다. 붙여 놓으면 어디까지가 한
   문답인지 눈으로 안 잡힙니다. */
.wf-faq { display: flex; flex-direction: column; gap: 8px; }
.wf-faq { gap: 10px; }
.wf-faq details {
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg);
  box-shadow: var(--wf-shadow);
  overflow: hidden;
}
.wf-faq details[open] { border-color: var(--kv-navy); box-shadow: var(--wf-shadow-lift); }
.wf-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  /* 손가락으로 눌러야 하니 여유를 둡니다 */
  min-height: 44px;
}
.wf-faq summary::-webkit-details-marker { display: none; }
/* Q 표식 — 원형 뱃지. 포스터의 아이콘 타일에서 왔습니다. */
.wf-faq summary::before {
  content: "Q";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--kv-yellow);
  color: #14213D;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 열림/닫힘 화살표 */
.wf-faq summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 6px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--wf-text-faint);
  border-bottom: 2px solid var(--wf-text-faint);
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.wf-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .wf-faq summary::after { transition: none; }
}
/* 답변에도 표식을 답니다 — 질문의 Q 와 짝이 맞아야 어디부터가 답인지
   눈에 잡힙니다. 질문은 노란 판에 검은 글자, 답은 네이비 판에 흰 글자로
   눌러 둡니다. (2026-09-10) */
.wf-faq .wf-faq__a { position: relative; }
.wf-faq .wf-faq__a::before {
  content: "A";
  position: absolute;
  left: 16px; top: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--kv-navy);
  color: #ffffff;
  font-family: var(--wf-font-display);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-faq .wf-faq__a {
  padding: 0 16px 16px 48px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--wf-text-mute);
  word-break: keep-all;
}

/* ─────────────────────────────────────────────────────────────────────
 * 과정 분류 탭 (시안)
 * 회색 알약 통 안에 알약 셋. 고른 것만 파랗게 찹니다.
 * ─────────────────────────────────────────────────────────────────── */
.wf-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 5px;
  border-radius: 999px;
  background: #EEF2F9;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08);
}
.wf-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  min-height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--wf-text-mute);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.wf-tabs button:hover { color: var(--kv-navy); }
.wf-tabs button[aria-selected="true"] {
  background: var(--kv-navy);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 70, 192, .35);
}
.wf-tabs__n { font-size: 12px; font-weight: 800; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .wf-tabs button { transition: none; } }

/* ─────────────────────────────────────────────────────────────────────
 * 히어로 아래 3칸 알약 바 (시안)
 * -----------------------------------------------------------------------------
 * 시안은 장소·정원·기간을 히어로 밑에 흰 판때기 하나로 깔고, 그 안에
 * 색이 다른 알약 셋을 넣습니다. 히어로 오른쪽에 세로로 세우면 캐릭터
 * 자리가 없어지고, 파란 바탕에 그냥 늘어놓으면 아무것도 안 걸립니다.
 * ─────────────────────────────────────────────────────────────────── */
.wf-pillbar {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  background: #ffffff;
  border: 4px solid var(--kv-ink);
  box-shadow: 0 18px 40px -12px rgba(0, 20, 60, .45);
}
.wf-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 2px solid var(--wf-pill-line, #E2E8F0);
  background: var(--wf-pill-bg, #F8FAFC);
  min-width: 0;
}
.wf-pill__mark {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wf-pill-ink, var(--kv-navy));
  border: 2px solid var(--kv-ink);
  color: #ffffff;
}
.wf-pill__mark svg { width: 26px; height: 26px; }
/* 포스터 아이콘은 동그란 색 판을 이미 갖고 있습니다 */
.wf-pill__mark--kv { background: none; border: 0; }
.wf-pill__mark--kv img { width: 100%; height: 100%; display: block; }
.wf-pill__copy { min-width: 0; }
.wf-pill__k {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--wf-pill-ink, var(--kv-navy));
  letter-spacing: -.01em;
}
.wf-pill__v {
  display: block;
  margin-top: 1px;
  font-size: 16px;
  font-weight: 800;
  color: var(--kv-ink);
  letter-spacing: -.02em;
  line-height: 1.35;
  word-break: keep-all;
}
/* 교육 장소의 주소 — 이름 아래 한 줄. 이름보다 한 단계 작고, 노선
   안내보다는 진합니다. 예전에는 이름 뒤에 대시로 붙어 있었습니다.
   (2026-09-11) */
.wf-pill__addr {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kv-ink);
  line-height: 1.4;
}
/* 괄호 안 부연은 한 단계 눕힙니다 — 장소 이름이 주소에 묻히면
   한눈에 어디인지가 안 잡힙니다. 교육 장소의 노선은 한 줄에 하나씩
   섭니다. */
.wf-pill__note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wf-text-mute);
  word-break: keep-all;
}
.wf-pill[data-tone="pink"]  { --wf-pill-bg: #FFF1F4; --wf-pill-line: #FFB2BD; --wf-pill-ink: #E0326E; }
.wf-pill[data-tone="gold"]  { --wf-pill-bg: #FFFBEA; --wf-pill-line: #F9D649; --wf-pill-ink: #96700B; }
.wf-pill[data-tone="mint"]  { --wf-pill-bg: #E6FAF4; --wf-pill-line: #7DDFC0; --wf-pill-ink: #0B7A5E; }
/* 골드 톤만 판을 다시 칠하던 규칙입니다. 포스터 아이콘(--kv)은 색 원판을
   이미 갖고 있어서, 그 뒤에 노란 사각형이 한 겹 더 깔렸습니다 —
   셋 중 이것만 배경이 보였습니다. 아이콘이 없을 때만 칠합니다. (2026-09-10) */
.wf-pill[data-tone="gold"] .wf-pill__mark:not(.wf-pill__mark--kv) {
  background: var(--kv-yellow);
  color: #6D5E00;
}
@media (max-width: 900px) {
  .wf-pillbar { grid-template-columns: 1fr; margin-top: 32px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * 히어로 오른쪽 — 캐릭터 + 메모지 (시안)
 * ─────────────────────────────────────────────────────────────────── */
.wf-hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wf-memo {
  position: relative;
  margin-top: -14px;
  /* 캐릭터보다 넓으면 메모지가 주인공이 됩니다. 폭을 캐릭터에 맞춥니다. */
  max-width: 268px;
  width: 100%;
  background: #ffffff;
  color: var(--kv-ink);
  border: 4px solid var(--kv-ink);
  border-radius: 18px;
  padding: 20px 20px 18px;
  transform: rotate(2deg);
  box-shadow: 0 18px 40px -12px rgba(0, 20, 60, .5);
}
/* 위쪽 노란 테이프 */
.wf-memo::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 18px;
  background: var(--kv-yellow);
  border: 2px solid var(--kv-ink);
  border-radius: 4px;
}
/* 스프링 구멍 */
.wf-memo__holes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.wf-memo__holes i {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--kv-navy);
}
.wf-memo__body { display: flex; align-items: flex-start; gap: 8px; }
.wf-memo__arrow { color: var(--kv-pink); font-size: 24px; font-weight: 800; line-height: 1; }
.wf-memo h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--kv-navy-ink);
  letter-spacing: -.025em;
  line-height: 1.3;
  word-break: keep-all;
}
.wf-memo h3 em { font-style: normal; color: var(--kv-pink); }
.wf-memo__tags {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 11.5px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
 * 혜택 카드 (시안 — 색 테두리 + 어깨 라벨)
 * ─────────────────────────────────────────────────────────────────── */
.wf-benefits {
  display: grid;
  /* 카드 4장 기준입니다. 예전에는 auto-fit 이라 폭이 남는 만큼 칸이
     늘었고, 카드 수가 바뀔 때마다 마지막 줄이 어중간하게 남았습니다.
     칸 수를 못 박아 한 줄로 떨어지게 합니다.
     ※ 카드를 더하거나 빼면 이 값도 같이 봐야 합니다. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1000px) {
  .wf-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wf-benefits { grid-template-columns: 1fr; }
}
.wf-benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px 18px;
  border-radius: 22px;
  border: 2px solid var(--wf-benefit-line, var(--wf-line));
  background: var(--wf-bg);
  box-shadow: var(--wf-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wf-benefit:hover { transform: translateY(-3px); box-shadow: var(--wf-shadow-lift); }
@media (prefers-reduced-motion: reduce) {
  .wf-benefit { transition: none; }
  .wf-benefit:hover { transform: none; }
}
/* 어깨 라벨 — 카드 위 테두리에 걸칩니다 */
.wf-benefit__ribbon {
  position: absolute;
  top: -13px; left: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  /* 진한 판에 흰 글자였습니다. 카드 넷이 나란히 서면 그 판만 눈에
     띄어 무거웠습니다. 판을 파스텔로 내리고 글자를 진하게 둡니다. */
  background: var(--wf-benefit-tint, #EAF2FD);
  border: 1.5px solid var(--wf-benefit-line, var(--wf-line));
  color: var(--wf-benefit-ink, var(--kv-navy));
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.wf-benefit__mark {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wf-benefit-tint, #EAF2FD);
  border: 1.5px solid var(--wf-benefit-line, var(--wf-line));
  color: var(--wf-benefit-ink, var(--kv-navy));
}
.wf-benefit__mark svg { width: 27px; height: 27px; }
.wf-benefit h4 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4;
  word-break: keep-all;
}
.wf-benefit p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--wf-text-mute);
  word-break: keep-all;
}
.wf-benefit__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--wf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--wf-benefit-ink, var(--kv-navy));
}
.wf-benefit__foot svg { width: 16px; height: 16px; flex: none; }
.wf-benefit__foot span { word-break: keep-all; }
/* 톤마다 세 값을 씁니다 (2026-09-10)
     tint  아이콘 판 배경
     line  테두리 — 파스텔. 예전에는 테두리까지 ink 를 써서 이 구역만
           유독 진했습니다. 알약 카드가 쓰는 --wf-pill-line 과 같은 역할입니다.
     ink   글자·리본 — 대비가 필요한 자리에만 남깁니다. */
.wf-benefit[data-tone="mint"]   { --wf-benefit-tint: #DFF7F0; --wf-benefit-line: #7DDFC0; --wf-benefit-ink: #0B7A5E; }
.wf-benefit[data-tone="blue"]   { --wf-benefit-tint: #E4EEFF; --wf-benefit-line: #A9C6F5; --wf-benefit-ink: #0046C0; }
.wf-benefit[data-tone="gold"]   { --wf-benefit-tint: #FFF4C7; --wf-benefit-line: #F2D46B; --wf-benefit-ink: #96700B; }
.wf-benefit[data-tone="pink"]   { --wf-benefit-tint: #FFE8EE; --wf-benefit-line: #FBAFC6; --wf-benefit-ink: #D42B67; }
.wf-benefit[data-tone="lilac"]  { --wf-benefit-tint: #EDE9FE; --wf-benefit-line: #C4B5FD; --wf-benefit-ink: #5B21B6; }

/* ─────────────────────────────────────────────────────────────────────
 * 신청 유도 밴드 (시안 — QR 자리 + 손글씨)
 * ─────────────────────────────────────────────────────────────────── */
.wf-cta-band {
  position: relative;
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 버튼을 뺀 뒤 space-between 이 남은 두 칸을 양끝으로 밀어
     가운데가 비었습니다. 왼쪽부터 붙이고 간격은 gap 이 잡습니다. */
  justify-content: flex-start;
  gap: 20px 28px;
  padding: 28px 32px;
  border-radius: 26px;
  border: 4px solid var(--kv-ink);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(56, 189, 248, .26) 0%, rgba(0, 70, 192, 0) 62%),
    var(--kv-navy);
  color: #ffffff;
  box-shadow: 0 18px 40px -12px rgba(0, 20, 60, .45);
}
/* 분홍 테이프 */
.wf-cta-band::before {
  content: "";
  position: absolute;
  top: -11px; left: 34px;
  width: 78px; height: 18px;
  background: var(--kv-pink);
  border: 2px solid var(--kv-ink);
  border-radius: 4px;
  transform: rotate(-6deg);
}
.wf-cta-band__copy { min-width: 0; flex: 1 1 260px; }

/* 시안의 QR 자리 — QR 이미지를 못 받아서 확정 공고 포스터를 세웁니다.
   빈 사각형보다 낫고, 이 페이지가 그 공고의 온라인판이라는 것도
   같이 말합니다. 흰 판에 점선 테두리는 시안 그대로입니다. */
.wf-cta-band__media { display: flex; align-items: stretch; gap: 12px; flex: none; }
.wf-cta-band__poster {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px dashed var(--kv-navy);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 20, 60, .25);
}
.wf-cta-band__poster img {
  width: 92px;
  height: auto;
  border-radius: 6px;
  display: block;
}
/* QR — 포스터에 인쇄된 그 코드입니다. 흑백 1비트라 확대해도 또렷합니다. */
.wf-cta-band__qr img {
  width: 92px; height: 92px;
  image-rendering: pixelated;
  border-radius: 0;
}
.wf-cta-band__poster span {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--kv-navy);
}
.wf-cta-band__poster:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .wf-cta-band__poster:hover { transform: none; } }
.wf-cta-band__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--kv-yellow);
  color: var(--kv-navy-ink);
  font-size: 11.5px;
  font-weight: 800;
}
.wf-cta-band strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  word-break: keep-all;
}
.wf-cta-band strong span { color: var(--kv-yellow); }
.wf-cta-band p { margin-top: 4px; font-size: 17px; font-weight: 700; color: #E4EEFF; word-break: keep-all; }
.wf-cta-band__sign {
  display: block;
  margin-top: 8px;
  color: #FFB2BD;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
}
.wf-cta-band .wf-btn {
  flex: none;
  background: var(--kv-yellow);
  border: 3px solid var(--kv-ink);
  color: var(--kv-navy-ink);
  font-weight: 800;
  font-size: 15px;
  padding: 14px 26px;
  box-shadow: var(--wf-sticker-sm);
}
.wf-cta-band .wf-btn:hover { background: #FFE769; border-color: var(--kv-ink); }
@media (max-width: 640px) {
  .wf-cta-band { padding: 26px 20px; }
  .wf-cta-band strong { font-size: 22px; }
  .wf-cta-band .wf-btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
 * 두 칸 구역 (오시는 길 · FAQ) — 시안 5:7
 * ─────────────────────────────────────────────────────────────────── */
.wf-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: start;
}
.wf-cols__head { margin-bottom: 18px; }
.wf-cols__eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--kv-navy);
}
.wf-cols__head h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin-top: 3px; }
.wf-cols__head p { margin-top: 6px; font-size: 14px; color: var(--wf-text-mute); word-break: keep-all; }
@media (max-width: 900px) {
  .wf-cols { grid-template-columns: 1fr; gap: 44px; }
}

/* 장소 카드 — 지도 이미지를 아직 못 받아서, 있는 값(주소)만 크게 씁니다 */
.wf-venue {
  border-radius: 20px;
  border: 2px solid var(--wf-line);
  background: var(--wf-bg);
  padding: 22px;
  box-shadow: var(--wf-shadow);
}
.wf-venue__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.wf-venue__name svg { width: 20px; height: 20px; color: var(--kv-pink); flex: none; }
.wf-venue__addr { margin-top: 6px; font-size: 14px; color: var(--wf-text-mute); word-break: keep-all; }
.wf-venue__rows { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.wf-venue__row { display: flex; gap: 10px; font-size: 13.5px; color: var(--wf-text-mute); }
.wf-venue__row svg { width: 17px; height: 17px; color: var(--kv-navy); flex: none; margin-top: 3px; }
.wf-venue__row b { color: var(--wf-text); font-weight: 700; }
.wf-venue-stack { display: flex; flex-direction: column; gap: 14px; }

/* --- 문의 / 푸터 ---------------------------------------------------------- */
/* 시안의 푸터는 짙은 네이비 한 판입니다. 페이지가 흰 바탕에서 끝나면
   어디가 끝인지 잡히지 않고, 기관 표기가 본문과 같은 무게로 읽힙니다. */
.wf-footer {
  padding: 40px 0 48px;
  margin-top: var(--wf-section-pad);
  background: var(--kv-navy-deep);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.wf-footer p { color: rgba(255, 255, 255, .62); line-height: 1.7; }
.wf-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
@media (max-width: 860px) { .wf-footer__grid { grid-template-columns: 1fr; gap: 26px; } }
.wf-footer__bottom {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.wf-footer__bottom p { font-size: 12px; }
.wf-footer__colhead {
  display: block;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.wf-footer__contact { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.wf-footer__contact div { display: flex; gap: 9px; align-items: flex-start; }
.wf-footer__contact svg { width: 16px; height: 16px; color: var(--kv-yellow); flex: none; margin-top: 2px; }
/* 주최 · 주관 · 컨소시엄을 한 줄에 고르게 눕힙니다. 좁아지면 접힙니다. */
.wf-footer__orgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 780px) {
  .wf-footer__orgs { grid-template-columns: 1fr; }
}
.wf-footer__notice { margin-bottom: 18px; }
.wf-footer__org {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--wf-radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .88);
}
/* 첫 칸이 '주최 / 주관 / 컨소시엄' 라벨입니다. 기관 이름보다 앞서
   읽히면 안 되니 한 단계 눕힙니다. */
.wf-footer__org > span:first-child {
  font-size: 11px;
  font-weight: 700;
  color: var(--kv-yellow);
  white-space: nowrap;
}

/* --- 모달 (과정 상세) ------------------------------------------------------ */
.wf-modal[hidden] { display: none; }
.wf-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  /* 패널이 화면 높이에 맞으므로 바깥은 스크롤하지 않습니다 */
  overflow: hidden;
}
.wf-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
/* 예전에는 바깥(.wf-modal)이 통째로 스크롤되고 머리글·바닥 띠가
   sticky 로 따라다녔습니다. 그래서 스크롤을 올리면 지나간 내용이
   제목을 뚫고 보이고, 버튼 띠 아래로도 표가 비쳤습니다.
   패널을 화면 높이에 맞춰 세우고 본문만 스크롤시킵니다 —
   머리글과 바닥 띠는 아예 움직이지 않습니다. (2026-09-10) */
.wf-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line-strong);
  border-radius: var(--wf-radius);
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;   /* 둥근 모서리 밖으로 본문이 삐져나오지 않게 */
}
.wf-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;   /* 끝까지 내려도 뒤 페이지가 안 밀립니다 */
  flex: 1 1 auto;
}
.wf-modal__head {
  flex: 0 0 auto;
  /* z-index 가 없으면 뒤따르는 본문(그림자·변형이 있는 카드와 표)이
     머리글 위로 그려집니다. 스크롤을 올릴 때 지나간 내용이 제목을
     뚫고 보이던 원인입니다. */
  z-index: 3;
  background: var(--wf-bg);
  border-bottom: 1px solid var(--wf-line);
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.wf-modal__close {
  margin-left: auto;
  font: inherit;
  /* 안은 흰색, 테두리와 ✕ 는 같은 색으로 맞춥니다. 색 있는 머리글
     위에서도 눌리는 것이라는 게 분명해집니다. (2026-09-10) */
  background: #ffffff;
  border: 1.5px solid var(--wf-card-ink, var(--wf-line-strong));
  color: var(--wf-card-ink, var(--wf-text));
  border-radius: 999px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background-color .15s ease, color .15s ease;
}
.wf-modal__close:hover {
  background: var(--wf-card-ink, var(--wf-text));
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .wf-modal__close { transition: none; }
}
/* minmax(0, 1fr) 이 없으면 그리드 칸이 내용의 min-content 만큼 벌어집니다.
   커리큘럼 표의 min-width(660px) 때문에 모달 전체가 그만큼 넓어졌습니다.
   칸을 컨테이너에 묶어야 표의 가로 스크롤이 표 안에서만 일어납니다. */
.wf-modal__body {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
/* 모달 머리글 — 카드와 같은 과정 색.
   카드는 과정마다 색이 다른데 모달만 전부 같은 파랑이면, 열었을 때
   다른 과정으로 넘어온 것처럼 보입니다. 카드가 쓰는 data-track 을
   그대로 받아 위쪽에 색 띠와 옅은 바탕을 깝니다. (2026-09-10) */
.wf-modal__head[data-track] {
  border-top: 5px solid var(--wf-card-line, var(--kv-navy));
  background: var(--wf-card-tint, var(--wf-bg));
}
/* 칩에 흰 배경을 주니 옅은 머리글 위에서 흰 덩어리로 튀었습니다.
   바탕을 비우고 테두리와 글자만 과정 색으로 둡니다. (2026-09-10) */
.wf-modal__head[data-track] .wf-card__cat {
  background: transparent;
  border-color: var(--wf-card-ink, var(--wf-line));
  color: var(--wf-card-ink, var(--kv-navy));
}
.wf-modal__head[data-track] h2 { color: var(--wf-card-ink, var(--wf-text)); }
/* 카드 색표는 .wf-card[data-track] 에만 걸려 있어서 모달에도 같은 값을
   붙여 줍니다. 값을 두 번 적지 않도록 선택자만 늘립니다. */
.wf-modal__panel[data-track="basic"]     { --wf-card-tint:#C9E1FD; --wf-card-line:#9CC4F5; --wf-card-ink:#0355AF; }
.wf-modal__panel[data-track="mid"]       { --wf-card-tint:#CFCFFD; --wf-card-line:#B0AEF9; --wf-card-ink:#5339E3; }
.wf-modal__panel[data-track="deep"]      { --wf-card-tint:#FED8E7; --wf-card-line:#FCAFCF; --wf-card-ink:#D93583; }
.wf-modal__panel[data-track="applied"]   { --wf-card-tint:#CFEEDF; --wf-card-line:#9FDCC7; --wf-card-ink:#07877D; }
.wf-modal__panel[data-track="finance"]   { --wf-card-tint:#D3D2FD; --wf-card-line:#B4B2F8; --wf-card-ink:#5545D8; }
.wf-modal__panel[data-track="design"]    { --wf-card-tint:#FED5E7; --wf-card-line:#FCACCE; --wf-card-ink:#D93585; }
.wf-modal__panel[data-track="marketing"] { --wf-card-tint:#CAEDD3; --wf-card-line:#A2DCB4; --wf-card-ink:#129775; }
.wf-modal__panel[data-track="hr"]        { --wf-card-tint:#FEEBB3; --wf-card-line:#F5D682; --wf-card-ink:#BD7C05; }

/* 모달 안 표 — 과정 색으로 맞춥니다.
   패널에 붙은 data-track 이 --wf-card-* 를 내려주므로, 표는 그 값을
   옅게 받아 씁니다. 색이 없으면(track 미지정) 기존 회색 그대로입니다.
   (2026-09-10) */
.wf-modal__panel[data-track] .wf-table-scroll {
  border-color: var(--wf-card-line, var(--wf-line));
}
.wf-modal__panel[data-track] .wf-table th,
.wf-modal__panel[data-track] .wf-table td {
  border-color: var(--wf-card-line, var(--wf-line));
}
.wf-modal__panel[data-track] .wf-table thead th {
  background: var(--wf-card-tint, var(--wf-surface-2));
  color: var(--wf-card-ink, var(--wf-text));
}
/* 행 제목(회차·모듈명)도 같은 색 계열로 */
.wf-modal__panel[data-track] .wf-table tbody th {
  color: var(--wf-card-ink, var(--wf-text));
}
/* 블록 제목 밑줄 — 표와 같은 선을 씁니다 */
.wf-modal__panel[data-track] .wf-block__title {
  border-bottom-color: var(--wf-card-line, var(--wf-line));
  color: var(--wf-card-ink, var(--wf-text-mute));
}

.wf-modal__foot {
  flex: 0 0 auto;
  /* 머리글과 같은 이유입니다 — z-index 가 없으면 커리큘럼 표가
     버튼 띠 위로 그려져 아래로 지나간 내용이 비쳤습니다. */
  z-index: 3;
  background: var(--wf-bg);
  border-top: 1px solid var(--wf-line);
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.wf-modal__foot .wf-btn { flex: 1 1 200px; }
body.wf-modal-open { overflow: hidden; }

.wf-block__title {
  font-size: 13px;
  color: var(--wf-text-mute);
  border-bottom: 1px solid var(--wf-line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* --- 반응형 ---------------------------------------------------------------
 * 지금 단계의 목적은 "무엇이 먼저 보이는가"의 확인입니다.
 *   PC     : 카드 3열, HERO 2열(텍스트 + 키비주얼)
 *   태블릿 : 카드 2열
 *   모바일 : 전부 1열, HERO는 키비주얼보다 텍스트/CTA 우선
 * ---------------------------------------------------------------------- */
@media (min-width: 721px) {
  .wf-hero__grid { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .wf-hero__visual { order: 2; }
  .wf-hero__copy   { order: 1; }
}
@media (max-width: 980px) {
  .wf-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wf-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --wf-section-pad: 40px; }
  .wf-hero__title { font-size: 28px; }
  .wf-hero { padding-bottom: 48px; }
  .wf-hero--band { padding: 10px 0 40px; }
  /* 좁은 화면에서는 그림 속 작은 글자가 안 읽힙니다. 폭을 다 쓰게 두고
     같은 내용을 아래 알약 바가 글자로 다시 말합니다. */
  .wf-hero--band .wf-wrap { padding: 0 12px; }
  .wf-hero__under { margin-top: 20px; }
  /* 좁은 화면에서는 그림이 화면 폭을 다 먹습니다. 글자와 버튼을 먼저
     보여주기로 해 놓고 그림이 한 화면을 차지하면 앞뒤가 안 맞습니다. */
  .wf-hero__figure { max-width: 218px; }
  .wf-memo { max-width: 236px; }
  /* 좁은 화면에서는 기관명이 두 줄로 접힙니다. 둘로 접힌 노란 알약은
     제목보다 덩어리가 커져 먼저 보입니다. 판을 벗기고 글자만 남깁니다. */
  .wf-hero__eyebrow {
    display: block;
    background: none;
    padding: 0;
    color: var(--kv-yellow);
    font-size: 12px;
  }
  .wf-grid--2,
  .wf-grid--3,
  .wf-grid--4 { grid-template-columns: 1fr; }
  .wf-dl { grid-template-columns: 76px 1fr; }
  /* 손가락으로 누르는 화면에서는 44px 을 확보합니다.
     36~37px 이면 눌리기는 하지만 빗나가기 쉽고, 특히 카드 안의
     '지원하기' 는 바로 옆 '자세히 보기' 와 붙어 있어 오탭이 납니다. */
  .wf-navbtn { display: flex; width: 44px; height: 44px; }
  /* 햄버거는 오른쪽 끝입니다. 로고가 넓어 줄을 넘길 때 왼쪽 아래로
     밀려나 있었습니다. (2026-09-11) */
  .wf-navbtn { margin-left: auto; }
  .wf-btn--sm { padding: 12px 14px; }
  /* 카드 바닥의 지원하기에도 44px 을 확보합니다. 위 줄만으로는
     '.wf-card__foot .wf-btn' (padding 7px) 이 더 구체적이라 이겨서
     폰에서 35px 로 나왔습니다. 같은 구체성으로 여기서 다시 겁니다.
     (2026-09-11) */
  .wf-card__foot .wf-btn { padding: 12px 14px; }
  .wf-nav {
    display: none;
    order: 9;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding: 6px 0 10px;
  }
  body.wf-nav-open .wf-nav { display: flex; }
  .wf-nav a {
    padding: 13px 4px;
    font-size: 15px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .wf-nav a:last-child { border-bottom: none; }
  /* 상단 바 버튼은 좁은 화면에서 자리를 많이 먹습니다. 히어로 안에
     같은 버튼이 이미 있어서 감춥니다. */
  .wf-topbar__cta { display: none; }
  .wf-modal { padding: 0; }
  .wf-modal__panel { max-width: none; min-height: 100%; border: none; }
}

/* 푸터 링크 — 여러 개가 붙어 한 덩어리로 읽히던 것을 떼어 놓습니다.
   url 이 없는 항목은 <span> 이라 눌리지 않고, 색으로도 구분됩니다. */
.wf-footer__link { margin-right: 16px; }
a.wf-footer__link { color: rgba(255, 255, 255, .86); text-decoration: underline; }
a.wf-footer__link:hover { color: var(--kv-yellow); }
span.wf-footer__link { color: rgba(255, 255, 255, .48); }

/* STEP 02 안의 회차별 접수 기간. 차수만 진하게 해서 눈이 먼저 걸리게 합니다. */
.wf-step__round { display: block; }
.wf-step__round + .wf-step__round { margin-top: 3px; }
.wf-step__round b {
  display: inline-block; min-width: 26px;
  font-weight: 600; color: var(--wf-text);
}

/* 신청 절차 아래 기준 한 줄 — 단계보다 작게, 본문보다 흐리게 */
.wf-steps__note {
  margin: 0 0 24px;
  font-size: 13px; line-height: 1.65;
  color: var(--wf-text-faint);
}

/* ── 교육 목적 ──────────────────────────────────────────────────────
   페이지에서 유일하게 크기로 힘을 주는 자리입니다. 색은 기존 토큰
   그대로 쓰고 크기·무게·여백만으로 위계를 만듭니다. 키비주얼이 오면
   토큰(색·서체)만 바뀌고 이 구조는 그대로 씁니다. */
.wf-purpose {
  margin: 4px 0 34px; max-width: 62ch;
  /* 한글은 기본값이면 어절 중간에서도 끊깁니다 — '내 일 / 에' 처럼요.
     띄어쓰기에서만 끊기게 합니다. */
  word-break: keep-all;
}

.wf-purpose__eyebrow {
  font-size: 12px; letter-spacing: .12em; color: var(--wf-text-faint);
  margin-bottom: 18px;
}

/* 문제 제기 — 읽는 사람의 상황입니다. 여기만 큽니다.
   색은 먹이 아니라 네이비를 씁니다 (2026-09-10). 키비주얼이 네이비
   바탕이라, 이 구역만 무채색이면 따로 놀았습니다. */
.wf-purpose__lead {
  font-size: 30px; line-height: 1.42; font-weight: 700;
  letter-spacing: -.025em; text-wrap: balance;
  color: #001B57; margin-bottom: 18px;
}

/* 근거 — 설명이라 한 걸음 물러납니다. 네이비를 옅게 풀어 씁니다. */
.wf-purpose__body {
  font-size: 15px; line-height: 1.85; color: #38466A;
  max-width: 54ch;
}

/* 약속 — 가로줄 위에 올려 마무리로 읽히게 합니다 */
.wf-purpose__close {
  margin-top: 20px; padding-top: 18px;
  /* 가로줄도 네이비로 — 회색 줄은 이 구역에서 때처럼 보입니다 */
  border-top: 2px solid #002E8A;
  font-size: 16.5px; line-height: 1.7; font-weight: 600;
  letter-spacing: -.01em; text-wrap: balance;
  color: #002E8A;
}

@media (max-width: 720px) {
  .wf-purpose { margin-bottom: 28px; }
  .wf-purpose__eyebrow { margin-bottom: 14px; }
  .wf-purpose__lead { font-size: 22px; line-height: 1.45; margin-bottom: 14px; }
  .wf-purpose__body { font-size: 14.5px; line-height: 1.8; }
  .wf-purpose__close { font-size: 15.5px; margin-top: 16px; padding-top: 15px; }
}

/* 좁은 화면에서는 표를 가로로 미는 대신 행 하나를 카드처럼 쌓습니다.
   각 칸 앞에 data-label 이 붙어 "라벨: 값" 으로 읽힙니다.
   데스크톱에서는 아래 규칙이 적용되지 않아 표 모양 그대로입니다. */
@media (max-width: 640px) {
  .wf-table-scroll { border: none; overflow-x: visible; }
  .wf-table, .wf-table--wide { min-width: 0; width: 100%; display: block; }
  .wf-table thead { display: none; }
  .wf-table tbody, .wf-table tr, .wf-table th, .wf-table td { display: block; width: auto; }
  .wf-table tr {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--wf-surface);
  }
  .wf-table tr:last-child { margin-bottom: 0; }
  .wf-table th[scope="row"] {
    border: none;
    padding: 0 0 8px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--wf-line);
    margin-bottom: 8px;
  }
  .wf-table td {
    border: none;
    padding: 4px 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .wf-table td::before {
    content: attr(data-label);
    color: var(--wf-text-mute);
    font-size: 13px;
  }
  .wf-table td:empty { display: none; }
  .wf-table .wf-num { white-space: normal; }
  /* 카드 모양에서는 값 칸이 화면 폭에 묶여 있어 한 줄 고정이 뜻이
     없습니다. 위의 nowrap 규칙들을 모두 풉니다. 시트에서 긴 문구가
     들어와도 화면 밖으로 나가지 않게 합니다 — 띄어쓰기가 없는 긴
     영문(도구 목록 · 주소)도 마지막에는 접힙니다. (2026-09-11) */
  .wf-table-scroll .wf-table tbody th,
  .wf-table-scroll .wf-table tbody td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

@media print {
  .wf-topbar, .wf-modal { display: none !important; }
  .wf-section { break-inside: avoid; }
}


/* ═════════════════════════════════════════════════════════════════════
 * 디자인 수정본에서 새로 들어온 부품 (2026-09-10)
 * 시안 stitch_sba_ai_recruitment_key_visual (2) 기준.
 * ═══════════════════════════════════════════════════════════════════ */

/* --- 상단 공고 띠 ---------------------------------------------------------
 * 상단 바 바로 아래. "이건 공식 공고다"를 한 줄로 못박는 자리입니다.
 * 문구는 data.js → SITE.notice 에서 옵니다. 값이 없으면 띠가 아예
 * 그려지지 않습니다 — 빈 띠는 만들다 만 화면으로 보입니다.
 * -------------------------------------------------------------------- */
.wf-notice {
  background: var(--kv-navy-deep);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
}
.wf-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.wf-notice__lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
}
.wf-notice__pill {
  flex: none;
  background: var(--kv-yellow);
  color: #002E8A;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.wf-notice__marks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
/* 첫 칸만 노랑 — 마감이 걸린 말이라 여기만 눈에 걸리게 합니다. */
.wf-notice__marks span:first-child { color: var(--kv-yellow); }
@media (max-width: 720px) {
  /* 좁은 화면에서는 두 번째 줄까지 읽히지 않습니다. 앞줄만 남깁니다. */
  .wf-notice__marks span:not(:first-child) { display: none; }
}


/* ── 둥근 서체를 쓰는 자리 ──────────────────────────────────────────
   파일 맨 끝에 둡니다. .wf-btn 같은 컴포넌트가 font: inherit 으로
   서체를 되돌려 놓기 때문에, 앞쪽에 쓰면 그 규칙에 덮입니다.

   제목 · 버튼 · 배지 · 태그처럼 짧고 큰 글자만입니다.
   본문(p, li, dd, 표)은 Pretendard 그대로 둡니다 — 둥근 서체는 글자
   사이 구분이 약해서 긴 문장에서 눈이 미끄러집니다. */
h1, h2, h3, h4,
.wf-btn,
.wf-badge,
.wf-tabs button,
.wf-card__cat,
.wf-hero__facts li,
.wf-benefit__ribbon,
.wf-step__num,
.wf-faq summary {
  font-family: var(--wf-font-display);
  /* 둥근 서체는 같은 굵기에서 더 굵어 보입니다. 자간을 살짝 좁혀
     덩어리로 보이게 합니다. */
  letter-spacing: -.02em;
}

/* 숫자·영문이 섞인 자리는 Pretendard 가 더 정확합니다 —
   나눔스퀘어라운드는 숫자 폭이 들쭉날쭉합니다. */
.wf-hero__period strong,
.wf-card__meta,
.wf-tabs__n {
  font-family: var(--wf-font);
  letter-spacing: 0;
}

/* 폰 상단 바 — 로고 두 장(304px)에 햄버거(44px)를 더하면 안쪽 폭을
   넘어, 햄버거가 둘째 줄 왼쪽으로 밀려나 있었습니다. 로고를 줄여
   한 줄에 같이 세웁니다. 비율은 그대로 두고 height 만 줄입니다 —
   CI 규정상 가로세로를 따로 늘이거나 줄이면 안 됩니다.
   440px 위로는 원래 크기로 다 들어갑니다. (2026-09-11) */
@media (max-width: 440px) {
  .wf-topbar .wf-logo-plate { padding: 4px 6px; }
  .wf-topbar .wf-logo-plate img { height: 14px; }
  .wf-orgs { gap: 7px; }
  .wf-topbar__inner { gap: 8px; }
}

/* 320px 급 화면 — 한 단계 더 줄여야 한 줄에 들어갑니다. (2026-09-11) */
@media (max-width: 360px) {
  .wf-topbar .wf-logo-plate { padding: 3px 5px; }
  .wf-topbar .wf-logo-plate img { height: 12px; }
  .wf-orgs { gap: 5px; }
}

/* ── 어두운 화면 (2026-09-11) ─────────────────────────────────────────
   키비주얼 작업 때 카드 면을 #ffffff 로 박아 두어서, 어두운 화면에서
   글자만 밝아지고 카드는 흰색으로 남았습니다 — 흰 카드 위에 흰 글자라
   과정명·혜택명·강의장명이 사라졌습니다. 면은 위에서 --wf-bg 로 바꿨고
   (밝은 화면은 그대로 흰색), 여기서는 어두운 면 위에 놓이는 네이비와
   과정색 글자만 밝힙니다. 포스터 조판·메모·로고 판처럼 종이로 보여야
   하는 것은 두 화면 모두 흰색 그대로 둡니다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-section__head h2 em { color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-badge--soft { background: rgba(141, 184, 255, .14); color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-cols__eyebrow { color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-purpose__lead { color: #E3ECFF; }
  :root:not([data-theme="light"]) .wf-purpose__body { color: var(--wf-text-mute); }
  :root:not([data-theme="light"]) .wf-purpose__close { color: #A9C8FF; border-top-color: #3D6BC4; }
  :root:not([data-theme="light"]) .wf-card__when { color: color-mix(in srgb, var(--wf-card-ink, var(--kv-navy)) 45%, #ffffff); }
  :root:not([data-theme="light"]) .wf-benefit__foot { color: color-mix(in srgb, var(--wf-benefit-ink, var(--kv-navy)) 45%, #ffffff); }
  :root:not([data-theme="light"]) .wf-venue__row svg { color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-faq details[open] { border-color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-who__list li:hover { background: #103A40; }
  :root:not([data-theme="light"]) .wf-modal__foot .wf-btn--ghost:hover { background: var(--wf-surface-2); border-color: #8DB8FF; color: #ffffff; }
  :root:not([data-theme="light"]) .wf-card__tag { background: var(--wf-surface-2); color: var(--wf-text-mute); }
  /* 상세 모달 소제목·모듈 머리글 — 과정색 그대로면 어두운 면에 묻혔습니다
     (기본 과정 2.15:1). 카드 일정 줄과 같은 방식으로 밝힙니다. (2026-09-14) */
  :root:not([data-theme="light"]) .wf-modal__panel[data-track] .wf-block__title,
  :root:not([data-theme="light"]) .wf-modal__panel[data-track] .wf-table tbody th { color: color-mix(in srgb, var(--wf-card-ink, var(--kv-navy)) 45%, #ffffff); }
}
:root[data-theme="dark"] .wf-section__head h2 em { color: #8DB8FF; }
:root[data-theme="dark"] .wf-badge--soft { background: rgba(141, 184, 255, .14); color: #8DB8FF; }
:root[data-theme="dark"] .wf-cols__eyebrow { color: #8DB8FF; }
:root[data-theme="dark"] .wf-purpose__lead { color: #E3ECFF; }
:root[data-theme="dark"] .wf-purpose__body { color: var(--wf-text-mute); }
:root[data-theme="dark"] .wf-purpose__close { color: #A9C8FF; border-top-color: #3D6BC4; }
:root[data-theme="dark"] .wf-card__when { color: color-mix(in srgb, var(--wf-card-ink, var(--kv-navy)) 45%, #ffffff); }
:root[data-theme="dark"] .wf-benefit__foot { color: color-mix(in srgb, var(--wf-benefit-ink, var(--kv-navy)) 45%, #ffffff); }
:root[data-theme="dark"] .wf-venue__row svg { color: #8DB8FF; }
:root[data-theme="dark"] .wf-faq details[open] { border-color: #8DB8FF; }
:root[data-theme="dark"] .wf-who__list li:hover { background: #103A40; }
:root[data-theme="dark"] .wf-modal__foot .wf-btn--ghost:hover { background: var(--wf-surface-2); border-color: #8DB8FF; color: #ffffff; }
:root[data-theme="dark"] .wf-card__tag { background: var(--wf-surface-2); color: var(--wf-text-mute); }
:root[data-theme="dark"] .wf-modal__panel[data-track] .wf-block__title,
:root[data-theme="dark"] .wf-modal__panel[data-track] .wf-table tbody th { color: color-mix(in srgb, var(--wf-card-ink, var(--kv-navy)) 45%, #ffffff); }

/* ═════════════════════════════════════════════════════════════════════
 * 피드백 반영 (2026-09-11) — 흰 헤더 · 로고 판 제거 · 테두리 줄이기
 * ---------------------------------------------------------------------
 * 파일 끝에 둡니다. 앞쪽 규칙과 구체성이 같아 뒤에 있어야 이깁니다.
 * 원칙 — 정보를 전부 박스로 감싸지 않습니다. 구분은 여백 · 배경색 ·
 * 글자로 하고, 테두리는 눌리는 것(버튼 · 과정 카드 hover)과 표에만
 * 남깁니다. 중첩된 박스는 바깥 한 겹만 남깁니다.
 * ═══════════════════════════════════════════════════════════════════ */

/* ① 상단 바 — 흰 바탕
   히어로가 이미 짙은 남색이라 머리까지 칠하면 답답했습니다. 흰 바탕에
   가는 선 하나로 히어로와 나눕니다. 로고는 원본 색 그대로 판 없이
   올립니다 — 흰 사각형이 사라집니다. 다크 모드는 바탕이 어두워져
   국문 로고타입(#54565B)이 묻히므로 기존대로 판을 깝니다(맨 아래). */
.wf-topbar {
  background: color-mix(in srgb, var(--wf-bg) 94%, transparent);
  border-bottom: 1px solid var(--wf-line);
  color: var(--wf-text);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .wf-topbar { background: var(--wf-bg); }
}
.wf-topbar .wf-logo-plate { background: none; padding: 0; box-shadow: none; }
.wf-topbar .wf-logo-plate img { height: 20px; }
.wf-orgs__x { color: var(--wf-text-faint); }
.wf-orgs__sub { color: var(--wf-text-mute); }
.wf-nav a { color: var(--wf-text); }
.wf-nav a:hover { color: var(--kv-navy); background: var(--wf-surface-2); }
.wf-topbar__cta { background: var(--kv-navy); color: #ffffff; box-shadow: none; }
.wf-topbar__cta:hover { background: var(--kv-navy-ink); }
.wf-topbar__ghost { background: none; border-color: transparent; color: var(--wf-text); }
.wf-topbar__ghost:hover { background: var(--wf-surface-2); color: var(--kv-navy); }
.wf-navbtn { border-color: var(--wf-line-strong); }
.wf-navbtn__bar { background: var(--wf-text); }
@media (max-width: 720px) {
  .wf-nav { border-top-color: var(--wf-line); }
  .wf-nav a { border-bottom-color: var(--wf-line); }
}
@media (max-width: 440px) {
  .wf-topbar .wf-logo-plate { padding: 0; }
  .wf-topbar .wf-logo-plate img { height: 16px; }
}
@media (max-width: 360px) {
  .wf-topbar .wf-logo-plate img { height: 13px; }
}

/* ② 히어로 아래 — 버튼처럼 보이던 글자를 글자로
   조건(전액 무료 · 구독권 …)과 접수 기간이 전부 테두리 알약이라, 진짜
   버튼과 섞여 '누를 것이 많은' 화면이었습니다. 알약을 걷고 글자와 점
   구분자로만 둡니다. 버튼은 첫 동작 하나만 남깁니다. */
.wf-hero__facts { gap: 6px 0; }
.wf-hero__facts li {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
/* 글 안의 가운뎃점(거주·재직)과 헷갈리지 않게 동그라미로 가릅니다 */
.wf-hero__facts li + li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  margin: 0 12px;
}
.wf-hero__facts li:first-child { background: none; border: 0; color: var(--kv-yellow); }
.wf-hero__period {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 10px;
  font-size: 15px;
}
.wf-hero__period-label { font-size: 13.5px; font-weight: 600; }
.wf-hero__period strong { font-weight: 800; }
.wf-hero__cta .wf-link { font-size: 15px; font-weight: 700; padding: 10px 2px; }
.wf-hero__cta .wf-link::after { content: " \2192"; }

/* 히어로 밑 정보판 — 흰 판 한 장만 남깁니다
   흰 판(검은 4px 테두리) 안에 칸마다 파스텔 테두리 박스가 또 있어 박스가
   두 겹이었습니다. 바깥 테두리와 안쪽 박스를 걷고 칸 사이는 가는 선으로
   나눕니다. 색은 아이콘 원판이 계속 들고 있습니다. 판은 늘 흰색이라
   선 색도 밝은 값으로 고정합니다. */
.wf-pillbar { border: 0; padding: 22px 10px; gap: 0; }
.wf-pill { border: 0; border-radius: 0; background: none; padding: 4px 24px; }
.wf-pill + .wf-pill { border-left: 1px solid #E0E6F1; }
@media (max-width: 900px) {
  .wf-pillbar { padding: 8px 20px; }
  .wf-pill { padding: 16px 2px; }
  .wf-pill + .wf-pill { border-left: 0; border-top: 1px solid #E0E6F1; }
}

/* ③ 과정 카드 — 테두리는 올렸을 때만
   아홉 장이 모두 색 테두리를 두르고 있어 목록 전체가 선으로 빽빽했습니다.
   흰 카드와 그림자만으로도 옅은 바탕에서 충분히 떨어져 보입니다. 눌리는
   것이라는 신호로 hover 에서만 과정 색 테두리를 세웁니다. */
.wf-card { border-color: transparent; }
.wf-card:hover { border-color: var(--wf-card-ink, var(--kv-navy)); }
/* 모집 상태 배지 — 테두리 대신 흰 바탕. 카드 윗변에 걸친 탭처럼 보입니다 */
.wf-status { border-color: transparent; background: var(--wf-bg); box-shadow: 0 1px 4px rgba(11, 87, 208, .14); }
.wf-status[data-tone="muted"] { border-style: solid; }

/* 교육 일정 · 모집 기간 · 사용 AI — 카드 아래쪽에 고정합니다.
   요약 글 길이가 달라도 세 줄과 바닥 줄이 같은 높이에 섭니다. */
.wf-card__info {
  margin: auto 0 0;
  padding-top: 16px;
  display: grid;
  gap: 5px;
}
.wf-card__info > div {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.45;
}
.wf-card__info dt { color: var(--wf-text-mute); font-weight: 600; }
.wf-card__info dd { margin: 0; color: var(--wf-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.wf-card__info + .wf-card__foot { margin-top: 0; }
.wf-card__tools { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.wf-tool { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wf-tool img { width: 16px; height: 16px; flex: none; display: block; }
/* 한 가지 색(검정) 로고 — 다크 모드에서만 흰색으로 뒤집습니다 (2026-09-14) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-tool__logo--mono { filter: invert(1); }
}
:root[data-theme="dark"] .wf-tool__logo--mono { filter: invert(1); }
/* 사용 AI 줄은 카드가 나란히 서는 폭에서 두 줄 자리를 잡습니다.
   툴 이름이 긴 과정(Gemini · CapCut AI · Firefly)만 두 줄로 접혀
   같은 줄 카드끼리 세 줄의 시작 높이가 어긋났습니다. 로고가 붙으면
   더 길어지므로 미리 자리를 잡습니다. 폰(한 줄에 한 장)은 맞출 옆
   카드가 없어 그대로 둡니다. */
@media (min-width: 641px) {
  .wf-card__info dd:has(> .wf-card__tools) { min-height: 2.9em; }
}
/* 줄 사이 틈은 0 — 두 줄로 접혀도 두 줄 자리(2.9em)를 넘지 않게 */
.wf-card__tools { gap: 0 8px; }

/* ④ 교육 소개 · 혜택 · 신청 안내 · FAQ · 강의장 — 박스 대신 면
   흰 구역에서는 옅은 바탕 면으로, 옅은 구역에서는 흰 면으로 나눕니다. */
/* 교육 대상 — 바깥 상자와 안쪽 세 줄이 모두 테두리였습니다(두 겹).
   바깥은 흰 면만, 안쪽 줄은 옅은 면으로. 올렸을 때 테두리는 그대로 —
   자기 해당 항목을 짚어 가며 읽는 자리라 남겨 둔 효과입니다. */
.wf-who { border: 0; box-shadow: none; }
.wf-who__list li { border-color: transparent; background: var(--wf-canvas); }
/* 혜택 — 테두리 대신 파스텔 면. 어깨 라벨은 면과 같은 색이라 카드에서
   자라난 탭처럼 보이고, 아이콘 판은 흰색으로 올립니다. */
.wf-benefit { border-color: transparent; background: var(--wf-benefit-tint, var(--wf-surface-2)); box-shadow: none; }
.wf-benefit:hover { box-shadow: var(--wf-shadow-lift); }
.wf-benefit__ribbon { border: 0; }
.wf-benefit__mark { border: 0; background: #ffffff; }
/* 신청 절차 · 안내 상자 — 테두리 없이 흰 면 (2026-09-14)
   이 구역은 제 바탕이 없어 페이지 바탕(옅은 파랑 #F4F7FD)이 비칩니다.
   9-11 에는 흰 구역으로 잘못 보고 상자를 옅은 면으로 칠해서, 상자가
   바탕과 같은 색이 되어 경계가 사라졌습니다. 흰 면으로 올립니다.
   단계 윗변의 색 띠도 걷습니다 — 단계 번호 배지가 같은 색을 들고 있어
   구분은 그대로 됩니다. */
.wf-step { border: 0; box-shadow: none; background: var(--wf-bg); }
.wf-box { border: 0; box-shadow: none; }
.wf-section:not(.wf-section--tint) .wf-box { background: var(--wf-bg); }
/* FAQ · 강의장 — 옅은 구역 위 흰 면. 테두리 없이 그림자로만 */
.wf-faq details,
.wf-faq details[open] { border-color: transparent; }
.wf-venue { border-color: transparent; }

/* ⑤ 운영 기관 (신뢰도 영역) */
.wf-trust__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin: 0 0 36px;
}
.wf-trust__stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.wf-trust__stats dt { font-size: 14.5px; color: var(--wf-text-mute); }
.wf-trust__stats dd {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--kv-navy);
  font-variant-numeric: tabular-nums;
}
.wf-trust__stats small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--wf-text-mute); }
.wf-trust__orgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
}
/* 기관마다 박스를 치지 않고 윗줄 하나로 나눕니다 */
.wf-trust__org {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 20px;
  border-top: 2px solid var(--wf-line);
}
.wf-trust__logo { display: flex; align-items: center; min-height: 36px; margin-bottom: 10px; }
.wf-trust__logo img { display: block; height: 26px; width: auto; }
.wf-trust__role { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--kv-navy); }
.wf-trust__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.wf-trust__body { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: var(--wf-text-mute); max-width: 34em; }
.wf-trust__partners {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  margin: 36px 0 0;
  padding: 0;
}
.wf-trust__partners img { display: block; height: 28px; width: auto; }
@media (max-width: 780px) {
  .wf-trust__orgs { grid-template-columns: 1fr; gap: 22px; }
}

/* 주관 기관 실적 (2026-09-14)
   이 구역은 제 바탕이 없어 페이지 바탕이 비칩니다 — 옅은 구역 위 흰 면
   한 장으로 묶고 테두리는 치지 않습니다. 수치 · 지정 · 기관 이름은
   전부 읽는 글자라 칩이나 버튼 모양을 쓰지 않습니다. */
.wf-trust__record {
  margin-top: 40px;
  padding: 30px 32px 28px;
  border-radius: var(--wf-radius);
  background: var(--wf-bg);
}
.wf-trust__record-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.wf-trust__record-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.wf-trust__record .wf-trust__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 0;
}
/* 기간 줄이 없는 칸도 숫자가 같은 높이에서 시작하게 — 역순 세로 배치라 끝을 위로 */
.wf-trust__record .wf-trust__stats div { justify-content: flex-end; }
.wf-trust__creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--wf-line);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--wf-text);
}
.wf-trust__creds li { position: relative; padding-left: 14px; }
.wf-trust__creds li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--kv-navy);
}
.wf-trust__partners-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--wf-line); }
.wf-trust__partners-label { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--wf-text-mute); }
/* 참여 기관 로고 띠 — 줄마다 자동으로 옆으로 흐릅니다 (2026-09-14)
   트랙에 같은 목록이 두 번 들어 있어, 절반만큼 밀면 처음과 같은 모습이
   되어 끊김 없이 이어집니다. 양 끝은 흐리게 지워 잘린 느낌을 줄입니다. */
.wf-mq {
  --mq-gap: 48px;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wf-mq__track {
  display: flex;
  width: max-content;
  animation: wf-mq-slide var(--mq-dur, 40s) linear infinite;
}
.wf-mq--rev .wf-mq__track { animation-direction: reverse; }
.wf-mq:hover .wf-mq__track,
.wf-mq:focus-within .wf-mq__track { animation-play-state: paused; }
.wf-mq__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  margin: 0;
  padding: 0 var(--mq-gap) 0 0;   /* 두 목록 사이도 같은 간격 */
}
.wf-mq__item { flex: none; display: flex; align-items: center; height: 44px; }
.wf-mq__item img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; }
/* 정부 로고는 문장(紋章) 옆에 기관명이 작게 붙는 가로형이라 같은 높이면
   글자가 안 읽히고 기업 로고보다 한참 가벼워 보입니다. 줄마다 높이를
   달리해 두 줄의 무게를 맞춥니다. */
.wf-mq[data-kind="gov"] .wf-mq__item img { height: 42px; max-width: 200px; }
.wf-mq[data-kind="corp"] .wf-mq__item img { height: 26px; max-width: 128px; }
.wf-mq__name { font-size: 15px; font-weight: 700; color: var(--wf-text-mute); white-space: nowrap; }
@keyframes wf-mq-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 움직임 줄이기 — 흐르지 않고, 붙인 사본을 감추고, 줄바꿈 목록으로 */
@media (prefers-reduced-motion: reduce) {
  .wf-mq { -webkit-mask-image: none; mask-image: none; }
  .wf-mq__track { animation: none; width: auto; }
  .wf-mq__list { flex-wrap: wrap; gap: 14px 32px; padding: 0; }
  .wf-mq__list[aria-hidden="true"] { display: none; }
}
@media (max-width: 900px) {
  .wf-trust__record .wf-trust__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wf-trust__record { padding: 22px 20px; }
  .wf-trust__record .wf-trust__stats dd { font-size: 28px; }
  .wf-mq { --mq-gap: 32px; }
  .wf-mq__item img { height: 24px; max-width: 110px; }
  .wf-mq[data-kind="gov"] .wf-mq__item img { height: 34px; max-width: 160px; }
  .wf-mq[data-kind="corp"] .wf-mq__item img { height: 22px; max-width: 104px; }
}

/* ⑥ 푸터 — 밝은 바탕
   남색 푸터 위에서는 국문 로고타입이 묻혀 로고마다 흰 판을 깔았습니다.
   바탕을 밝게 바꿔 로고를 원본 그대로 올리고, 기관 칸 테두리도 걷습니다. */
.wf-footer {
  background: var(--wf-bg);
  border-top: 1px solid var(--wf-line);
  color: var(--wf-text-mute);
}
.wf-footer p { color: var(--wf-text-mute); }
.wf-footer .wf-logo-plate { background: none; padding: 0; }
.wf-footer__orgs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
.wf-footer__org { border: 0; border-radius: 0; padding: 0; color: var(--wf-text); }
.wf-footer__org > span:first-child { color: var(--wf-text-mute); }
a.wf-footer__link { color: var(--wf-text); }
a.wf-footer__link:hover { color: var(--kv-navy); }
span.wf-footer__link { color: var(--wf-text-mute); }

/* ⑦ 다크 모드 — 바탕이 어두워지는 곳만 되돌립니다.
   로고는 판을 다시 깔고(기존 .wf-logo-plate 다크 규칙이 이깁니다),
   남색 글자는 밝은 파랑으로, 혜택 파스텔 면은 어두운 면으로. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-topbar__cta { background: var(--kv-yellow); color: var(--kv-navy-ink); }
  :root:not([data-theme="light"]) .wf-nav a:hover,
  :root:not([data-theme="light"]) .wf-topbar__ghost:hover,
  :root:not([data-theme="light"]) a.wf-footer__link:hover,
  :root:not([data-theme="light"]) .wf-trust__role,
  :root:not([data-theme="light"]) .wf-trust__stats dd { color: #8DB8FF; }
  :root:not([data-theme="light"]) .wf-benefit { background: var(--wf-surface-2); }
  :root:not([data-theme="light"]) .wf-faq details[open] { border-color: transparent; }
}
@media (prefers-color-scheme: dark) and (max-width: 440px) {
  :root:not([data-theme="light"]) .wf-topbar .wf-logo-plate { padding: 3px 6px; }
}
:root[data-theme="dark"] .wf-topbar__cta { background: var(--kv-yellow); color: var(--kv-navy-ink); }
:root[data-theme="dark"] .wf-nav a:hover,
:root[data-theme="dark"] .wf-topbar__ghost:hover,
:root[data-theme="dark"] a.wf-footer__link:hover,
:root[data-theme="dark"] .wf-trust__role,
:root[data-theme="dark"] .wf-trust__stats dd { color: #8DB8FF; }
:root[data-theme="dark"] .wf-benefit { background: var(--wf-surface-2); }
:root[data-theme="dark"] .wf-faq details[open] { border-color: transparent; }
@media (max-width: 440px) {
  :root[data-theme="dark"] .wf-topbar .wf-logo-plate { padding: 3px 6px; }
}

/* ═════════════════════════════════════════════════════════════════════
 * 둥근 서체 넓히기 (2026-09-14)
 * ---------------------------------------------------------------------
 * 키비주얼 포스터의 서체 — 메인 자체 제작, 서브 210 러블리베이비 ·
 * 210 감성시대 · 프리텐다드. 교육 페이지도 포스터처럼 보이게 맞춰 달라는
 * 의견입니다. 210 서체 파일은 저장소에 없어, 같은 둥근 계열인
 * 나눔스퀘어라운드를 제목뿐 아니라 굵게 쓰는 짧은 글자 전반(메뉴 ·
 * 버튼 · 칩 · 라벨 · 카드 제목 · 교육 대상 · 강의장 이름 등)으로 넓힙니다.
 *
 * 그대로 Pretendard 인 곳 — 포스터도 서브 서체로 씁니다.
 *   · 본문 문장(p · li 설명 · 표) — 나눔스퀘어라운드는 B/EB 두 굵기만
 *     내려받고 있어, 보통 굵기 문장에 쓰면 전부 굵게 나옵니다
 *   · 날짜 · 시수 · 주소처럼 숫자가 줄 맞춰 읽혀야 하는 자리
 * 파일 맨 끝에 둡니다 — .wf-btn 의 font: inherit 을 이겨야 합니다.
 * ═══════════════════════════════════════════════════════════════════ */
.wf-nav a,
.wf-topbar__cta,
.wf-topbar__ghost,
.wf-notice__pill,
.wf-notice__lead,
.wf-hero__title,
.wf-hero__facts li,
.wf-hero__period-label,
.wf-hero__cta .wf-link,
.wf-pill__k,
.wf-pill__v,
.wf-purpose__lead,
.wf-purpose__close,
.wf-who__list li,
.wf-benefit__foot,
.wf-card__chip,
.wf-card__kicker,
.wf-card__title,
.wf-card__more,
.wf-card__info dt,
.wf-tool,
.wf-status,
.wf-venue__name,
.wf-footer__org > span:first-child {
  font-family: var(--wf-font-display);
  letter-spacing: -.02em;
}
/* 숫자가 줄 맞춰 읽혀야 하는 자리 — Pretendard 로 되돌립니다 */
.wf-hero__period strong,
.wf-card__when,
.wf-card__info dd,
.wf-pill__addr,
.wf-pill__note,
.wf-step__round b {
  font-family: var(--wf-font);
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * 신청 내역 조회 — 옅은 파랑 면 + 돋보기 타일 (2026-09-14)
 * -----------------------------------------------------------------------------
 * 테두리를 걷어낸 뒤 조회 박스가 바로 위 신청 방법·제출 서류·유의사항과
 * 같은 흰 면이 됐습니다. 넷이 같은 무게라 조회가 안 보였습니다.
 * 조회는 읽는 정보가 아니라 이미 신청한 사람이 누르고 가는 문이라,
 * 면 색으로 갈라 줍니다. 코발트 띠(더 강한 안)는 신청 행동과 경쟁해서
 * 고르지 않았습니다.
 *
 * 선택자가 길어진 이유: 위 '.wf-section:not(.wf-section--tint) .wf-box'
 * 가 흰 바탕을 강하게 걸고 있어서, 같은 무게 이상이어야 이깁니다.
 * ─────────────────────────────────────────────────────────────────── */
.wf-section .wf-box.wf-lookup {
  position: relative;
  background: #EAF2FF;
  border: 1.5px solid #B9D0FF;
  padding: 22px 26px 22px 88px;
}
/* 돋보기 타일 — 글자로 말하지 않아도 '찾아보기' 로 읽힙니다 */
.wf-section .wf-box.wf-lookup::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230046C0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 2px 6px rgba(0, 70, 192, .12);
}
.wf-lookup .wf-block__title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kv-navy);
  font-size: 15px;
  font-weight: 800;
}
.wf-lookup .wf-lookup__body { color: var(--wf-text-mute); }
/* 좁은 화면 — 타일을 위로 올리고 버튼을 꽉 채웁니다.
   왼쪽 88px 여백을 그대로 두면 글자가 한 줄에 몇 자 안 들어갑니다. */
@media (max-width: 560px) {
  .wf-section .wf-box.wf-lookup { padding: 76px 20px 20px; }
  .wf-section .wf-box.wf-lookup::before { left: 20px; top: 20px; transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════
 * 신청 안내 개편 (2026-09-14) — 신청 절차 화살표 · 지금 단계 · 상자 2개
 * ---------------------------------------------------------------------
 * 테두리는 쓰지 않습니다(4544121). 단계는 흰 면(9795894), 지금 단계는
 * 옅은 노랑 면 + 꼬리표 글자. 노랑은 히어로에서 '지금' 을 가리키는 색이고,
 * 조회 상자의 옅은 파랑과 겹치지 않게 골랐습니다.
 * ═══════════════════════════════════════════════════════════════════ */
.wf-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.wf-steps--noted { margin-bottom: 12px; }
.wf-steps > .wf-step { position: relative; }
/* 단계 사이 화살표 — 칸 사이 틈 한가운데 */
.wf-steps > .wf-step + .wf-step::before {
  content: "\203A";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--wf-text-faint);
  pointer-events: none;
}
.wf-step__title { margin: 4px 0 6px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.wf-step__body { margin: 0; font-size: 13px; color: var(--wf-text-mute); font-variant-numeric: tabular-nums; }
.wf-step__body,
.wf-step__round { font-family: var(--wf-font); letter-spacing: 0; }

/* 지금 단계 */
.wf-steps > .wf-step.is-now { background: color-mix(in srgb, var(--kv-yellow) 20%, var(--wf-bg)); }
.wf-step__now {
  position: absolute;
  top: -11px;
  left: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kv-yellow);
  color: var(--kv-navy-ink);
  font-family: var(--wf-font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 46, 138, .16);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .wf-steps > .wf-step.is-now { background: #FFF8D6; }
}
/* 다크 모드 — 노랑을 20% 섞으면 면이 밝아져 본문 글자 대비가 4.4:1 로
   기준(4.5)에 못 미쳤습니다. 섞는 양을 줄입니다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-steps > .wf-step.is-now { background: color-mix(in srgb, var(--kv-yellow) 11%, var(--wf-bg)); }
}
:root[data-theme="dark"] .wf-steps > .wf-step.is-now { background: color-mix(in srgb, var(--kv-yellow) 11%, var(--wf-bg)); }

/* 상자 둘 — 신청 방법 · 유의사항 */
.wf-apply__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-apply__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--wf-line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wf-text-mute);
}
.wf-apply__docs b {
  flex: none;
  font-family: var(--wf-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wf-text);
}

/* 좁은 화면 — 단계는 세로로, 화살표는 아래 방향, 상자는 한 줄에 하나 */
@media (max-width: 720px) {
  .wf-steps { grid-template-columns: 1fr; gap: 30px; }
  .wf-steps > .wf-step + .wf-step::before {
    left: 50%;
    top: -24px;
    transform: translateX(-50%) rotate(90deg);
  }
  .wf-apply__info { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
 * 신청 안내 대안 반영 (2026-09-14) — 머리 접수 기간 · 흐름 · 유의사항 강조 ·
 * 조회 상자 테두리 제거
 * 버튼처럼 보이는 글자를 만들지 않습니다(4544121). 판 · 알약 없이 글자와
 * 구분자만. 날짜는 Pretendard, 짧은 라벨은 둥근 서체.
 * ═══════════════════════════════════════════════════════════════════ */
/* ① 제목 아래 접수 기간 */
.wf-apply__periods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--wf-text);
}
.wf-apply__period { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wf-apply__period + .wf-apply__period::before {
  content: "";
  align-self: center;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--wf-line-strong);
  margin: 0 14px;
}
.wf-apply__period b {
  font-family: var(--wf-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wf-text-mute);
}
.wf-apply__period > span {
  font-family: var(--wf-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kv-navy);
}

/* 좁은 화면 — 두 회차가 줄을 넘기면 둘째 줄 맨 앞에 점만 남았습니다.
   한 줄에 하나씩 세우고 점을 뺍니다. */
@media (max-width: 720px) {
  .wf-apply__periods { flex-direction: column; align-items: center; gap: 4px; }
  .wf-apply__period + .wf-apply__period::before { display: none; }
}

/* ③ 신청 흐름 — 번호 + 글자, 사이 › */
.wf-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--wf-line);
}
.wf-flow li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--wf-font-display);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wf-text);
  white-space: nowrap;
}
.wf-flow li + li::before {
  content: "\203A";
  margin: 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--wf-text-faint);
}
.wf-flow__n {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--kv-navy);
  color: #ffffff;
  font-family: var(--wf-font);
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
}
/* 상자가 두 칸으로 좁아지는 폭(768px 에서 354px)에서는 흐름이 한 줄에 안 들어가
   줄 머리에 › 만 남았습니다. 1024px 이하는 세로로 쌓습니다. */
@media (max-width: 1024px) {
  .wf-flow { flex-direction: column; align-items: flex-start; gap: 0; }
  .wf-flow li { white-space: normal; }
  .wf-flow li + li { position: relative; margin-top: 16px; }
  .wf-flow li + li::before {
    content: "\2193";
    position: absolute;
    left: 5px; top: -17px;
    margin: 0;
    font-size: 12px;
    line-height: 1;
  }
}

/* ⑤ 유의사항 강조 — 맨 위 두 줄은 굵게, 점 대신 체크 */
.wf-list--notices li.is-key {
  list-style: none;
  margin-left: -18px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-weight: 700;
  color: var(--wf-text);
}
.wf-list--notices li.is-key svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--kv-navy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-list--notices li.is-key svg,
  :root:not([data-theme="light"]) .wf-apply__period > span { color: #8DB8FF; }
}
:root[data-theme="dark"] .wf-list--notices li.is-key svg,
:root[data-theme="dark"] .wf-apply__period > span { color: #8DB8FF; }

/* 조회 상자 — 테두리를 걷고 면을 한 단계 진하게.
   면 #EAF2FF 는 페이지 바탕(#F4F7FD)과 1.05:1 이라 테두리가 경계를
   만들고 있었습니다. #DCE8FF(1.15:1) + 옅은 그림자로 경계를 넘깁니다. */
.wf-section .wf-box.wf-lookup {
  border: 0;
  background: #DCE8FF;
  box-shadow: 0 2px 10px -4px rgba(0, 70, 192, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-section .wf-box.wf-lookup { background: color-mix(in srgb, var(--kv-navy) 26%, var(--wf-bg)); }
  :root:not([data-theme="light"]) .wf-lookup .wf-block__title { color: #8DB8FF; }
}
:root[data-theme="dark"] .wf-section .wf-box.wf-lookup { background: color-mix(in srgb, var(--kv-navy) 26%, var(--wf-bg)); }
:root[data-theme="dark"] .wf-lookup .wf-block__title { color: #8DB8FF; }

/* ═════════════════════════════════════════════════════════════════════
 * 키비주얼 아래 정보판 — 포스터 세 칸 (2026-09-14)
 * 포스터처럼 라벨이 크고 색이 있으며(분홍 · 노랑 · 초록), 값은 그 아래
 * 짙은 굵은 글자입니다. 판은 늘 흰색이라 색은 고정값으로 둡니다.
 * ═══════════════════════════════════════════════════════════════════ */
.wf-pill { align-items: flex-start; gap: 16px; }
.wf-pill__mark--kv { margin-top: 2px; }
.wf-pill .wf-pill__k {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.wf-pill .wf-pill__v {
  margin-top: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.45;
}
/* 노선 줄 — 포스터처럼 호선 색. 흰 판 위 대비 4.5 이상으로 한 단계 짙게 */
.wf-pill .wf-pill__note {
  margin-top: 1px;
  font-family: var(--wf-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: #5B6475;
}
.wf-pill .wf-pill__note[data-line="3"] { color: #B85C00; }
.wf-pill .wf-pill__note[data-line="5"] { color: #8A4FB5; }
/* '전체 교육기간' 꼬리표 — 포스터의 옅은 초록 이름표 */
.wf-pill__tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #DDF5EC;
  color: #0B7A5E;
  font-family: var(--wf-font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wf-pill__date {
  display: block;
  margin-top: 2px;
  font-family: var(--wf-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kv-ink);
  font-variant-numeric: tabular-nums;
}

/* ── 정보판 · 히어로 버튼 글자 키우기 (2026-09-14) ─────────────────────
   작은 크기에서 둥근 서체 획이 뭉개져 깨져 보였습니다. 전반적으로
   1.5~2px 키웁니다. 판 · 칸 구성은 그대로입니다. */
.wf-pill .wf-pill__k    { font-size: 21px; }
.wf-pill .wf-pill__v    { font-size: 17px; }
.wf-pill .wf-pill__note { font-size: 14.5px; }
.wf-pill__tag           { font-size: 13px; padding: 1px 8px; }
.wf-pill__date          { font-size: 16px; }
.wf-hero .wf-btn        { font-size: 18px; padding: 15px 30px; }
.wf-hero__cta .wf-link  { font-size: 17px; }

/* ═════════════════════════════════════════════════════════════════════
 * 다크 모드 로고 (2026-09-14)
 * ---------------------------------------------------------------------
 * 상단 바 · 운영 기관 · 푸터의 기관 로고는 흰 판을 걷고, 국문 글자만
 * 흰색인 -dark 파일로 바꿔 끼웁니다(app.js logoImg). 밝은 화면에서는
 * 원본 한 장만 보입니다.
 * 참여 기관 로고 띠는 기관마다 색이 제각각이라 글자색을 바꾸지 않고,
 * 다크 모드에서 로고마다 흰 배경을 깝니다.
 * ═════════════════════════════════════════════════════════════════════ */
img.wf-logo--dark { display: none; }
.wf-footer__logo { display: block; height: 20px; width: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf-logo-plate,
  :root:not([data-theme="light"]) .wf-topbar .wf-logo-plate { background: none; padding: 0; box-shadow: none; }
  :root:not([data-theme="light"]) img.wf-logo--light { display: none; }
  :root:not([data-theme="light"]) img.wf-logo--dark { display: block; }
  :root:not([data-theme="light"]) .wf-mq__item { height: 52px; padding: 0 16px; border-radius: 10px; background: #ffffff; }
  :root:not([data-theme="light"]) .wf-mq__name { color: #3A4150; }
}
:root[data-theme="dark"] .wf-logo-plate,
:root[data-theme="dark"] .wf-topbar .wf-logo-plate { background: none; padding: 0; box-shadow: none; }
:root[data-theme="dark"] img.wf-logo--light { display: none; }
:root[data-theme="dark"] img.wf-logo--dark { display: block; }
:root[data-theme="dark"] .wf-mq__item { height: 52px; padding: 0 16px; border-radius: 10px; background: #ffffff; }
:root[data-theme="dark"] .wf-mq__name { color: #3A4150; }
@media (max-width: 440px) {
  :root[data-theme="dark"] .wf-topbar .wf-logo-plate { padding: 0; }
}
@media (prefers-color-scheme: dark) and (max-width: 440px) {
  :root:not([data-theme="light"]) .wf-topbar .wf-logo-plate { padding: 0; }
}