/* ============================================================
   WellCare AI — Base & Component Library
   Master UI/UX Prompt 스펙 (2026-08-04)

   {% block wc_css %} 로 opt-in 한 페이지에만 로드된다.
   해당 페이지는 legacy_css 를 꺼둔 상태이므로 요소 선택자를 안전하게 쓴다.
   ============================================================ */

/* ══ 1. Reset ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-font);
  font-size: var(--wc-fs-body);
  line-height: var(--wc-lh-body);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--wc-fw-bold);
  line-height: var(--wc-lh-head);
  letter-spacing: var(--wc-ls-head);
  color: var(--wc-text);
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--wc-primary); text-decoration: none; }
a:hover { color: var(--wc-primary-hover); }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; }
hr { border: 0; border-top: 1px solid var(--wc-border); margin: 0; }
::selection { background: var(--wc-primary-light); color: var(--wc-primary-active); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--wc-ring);
  border-radius: var(--wc-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ══ 2. Layout ═════════════════════════════════════════════ */
.wc-container {
  width: 100%;
  max-width: var(--wc-container);
  margin-inline: auto;
  padding-inline: var(--wc-gutter);
}
.wc-container--narrow { max-width: 880px; }

.wc-section { padding-block: var(--wc-11); }
.wc-section--sm { padding-block: var(--wc-9); }
.wc-section--lg { padding-block: var(--wc-12); }
.wc-section--surface { background: var(--wc-surface); }
.wc-section--bg { background: var(--wc-bg); }
.wc-section--ink { background: var(--wc-ink); color: var(--wc-on-ink); }
.wc-section--ink h1, .wc-section--ink h2, .wc-section--ink h3 { color: var(--wc-on-ink); }

.wc-stack { display: grid; align-content: start; }
.wc-stack--2 { gap: var(--wc-2); }
.wc-stack--3 { gap: var(--wc-3); }
.wc-stack--4 { gap: var(--wc-4); }
.wc-stack--5 { gap: var(--wc-5); }
.wc-stack--6 { gap: var(--wc-6); }
.wc-stack--8 { gap: var(--wc-8); }

.wc-cols { display: grid; gap: var(--wc-5); }
.wc-cols--2 { grid-template-columns: repeat(2, 1fr); }
.wc-cols--3 { grid-template-columns: repeat(3, 1fr); }
.wc-cols--4 { grid-template-columns: repeat(4, 1fr); }
.wc-cols--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.wc-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wc-9);
  align-items: center;
}
.wc-media--flip > :first-child { order: 2; }

@media (max-width: 1000px) {
  .wc-cols--3, .wc-cols--4 { grid-template-columns: repeat(2, 1fr); }
  .wc-media { grid-template-columns: 1fr; gap: var(--wc-6); }
  .wc-media--flip > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .wc-cols--2, .wc-cols--3, .wc-cols--4 { grid-template-columns: 1fr; }
  .wc-section { padding-block: var(--wc-9); }
  .wc-section--lg { padding-block: var(--wc-10); }
}


/* ══ 3. Typography ═════════════════════════════════════════ */
.wc-display {
  font-size: var(--wc-fs-display);
  font-weight: var(--wc-fw-black);
  line-height: var(--wc-lh-display);
  letter-spacing: var(--wc-ls-display);
}
.wc-h1 { font-size: var(--wc-fs-h1); font-weight: var(--wc-fw-black); letter-spacing: var(--wc-ls-display); }
.wc-h2 { font-size: var(--wc-fs-h2); font-weight: var(--wc-fw-bold); }
.wc-h3 { font-size: var(--wc-fs-h3); font-weight: var(--wc-fw-bold); }
.wc-h4 { font-size: var(--wc-fs-h4); font-weight: var(--wc-fw-semi); }

.wc-lead  { font-size: var(--wc-fs-lead); line-height: 1.65; color: var(--wc-text-2); max-width: 62ch; }
.wc-text  { font-size: var(--wc-fs-body); color: var(--wc-text-2); max-width: var(--wc-prose); }
.wc-small { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); }
.wc-note-text { font-size: var(--wc-fs-xs); color: var(--wc-text-subtle); line-height: 1.6; }

.wc-section--ink .wc-lead,
.wc-section--ink .wc-text { color: var(--wc-on-ink-2); }

/* Eyebrow — 섹션 성격을 한 단어로 */
.wc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-2);
  padding: 6px 14px;
  border-radius: var(--wc-r-full);
  background: var(--wc-primary-subtle);
  color: var(--wc-primary);
  font-size: var(--wc-fs-label);
  font-weight: var(--wc-fw-semi);
  letter-spacing: var(--wc-ls-label);
  text-transform: uppercase;
  width: fit-content;
}
.wc-section--ink .wc-eyebrow { background: rgba(37, 99, 235, .18); color: #93B4FF; }

.wc-sechead {
  display: grid;
  gap: var(--wc-4);
  justify-items: center;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--wc-8);
}
.wc-sechead--left { justify-items: start; text-align: left; margin-inline: 0; }


/* ══ 4. Button ═════════════════════════════════════════════
   과하게 둥글리지 않는다 — 12px. pill 은 칩/배지에만.        */
.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-2);
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--wc-r-md);
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-semi);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wc-t-fast) var(--wc-ease),
              border-color var(--wc-t-fast) var(--wc-ease),
              color var(--wc-t-fast) var(--wc-ease),
              box-shadow var(--wc-t-fast) var(--wc-ease),
              transform var(--wc-t-fast) var(--wc-ease);
}
.wc-btn:active { transform: translateY(1px); }

.wc-btn--primary {
  background: var(--wc-primary, #2563EB);
  color: #FFFFFF;
  box-shadow: var(--wc-sh-primary);
}
.wc-btn--primary:hover { background: var(--wc-primary-hover, #1D4ED8); color: #FFFFFF; }

.wc-btn--secondary {
  background: var(--wc-surface);
  color: var(--wc-text);
  border-color: var(--wc-border);
  box-shadow: var(--wc-sh-xs);
}
.wc-btn--secondary:hover { border-color: var(--wc-border-2); color: var(--wc-text); background: var(--wc-surface); }

.wc-btn--ghost { background: transparent; color: var(--wc-text-2); padding-inline: 14px; }
.wc-btn--ghost:hover { background: var(--wc-surface-2); color: var(--wc-text); }

.wc-btn--onink { background: #fff; color: var(--wc-ink); }
.wc-btn--onink:hover { background: var(--wc-primary-light); color: var(--wc-ink); }
.wc-btn--onink-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.wc-btn--onink-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

.wc-btn--lg { min-height: 56px; padding: 0 32px; font-size: var(--wc-fs-body); }
.wc-btn--block { width: 100%; }
.wc-btn:disabled, .wc-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

.wc-btns { display: flex; flex-wrap: wrap; gap: var(--wc-3); }
.wc-btns--center { justify-content: center; }


/* ══ 5. Card ═══════════════════════════════════════════════
   테두리를 두껍게 쓰지 않는다. 1px + soft shadow.            */
.wc-card {
  display: grid;
  align-content: start;
  gap: var(--wc-3);
  padding: var(--wc-6);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-sm);
  transition: box-shadow var(--wc-t-base) var(--wc-ease),
              transform var(--wc-t-base) var(--wc-ease);
}
.wc-card--hover:hover { box-shadow: var(--wc-sh-lg); transform: translateY(-3px); }
.wc-card--flat { box-shadow: none; }
.wc-card__title { font-size: var(--wc-fs-h4); font-weight: var(--wc-fw-semi); letter-spacing: -.015em; }
.wc-card__text  { font-size: var(--wc-fs-sm); color: var(--wc-text-2); line-height: 1.7; }

/* Feature icon */
.wc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--wc-r-lg);
  background: var(--wc-primary-subtle);
  color: var(--wc-primary);
  font-size: 20px;
  flex: none;
}
.wc-icon--success { background: var(--wc-success-bg); color: var(--wc-success-text); }
.wc-icon--warning { background: var(--wc-warning-bg); color: var(--wc-warning-text); }
.wc-icon--danger  { background: var(--wc-danger-bg);  color: var(--wc-danger-text); }


/* ══ 6. Stat ═══════════════════════════════════════════════ */
.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wc-5);
}
.wc-stat { display: grid; gap: var(--wc-1); }
.wc-stat__v {
  font-size: 44px;
  font-weight: var(--wc-fw-black);
  line-height: 1.05;
  letter-spacing: var(--wc-ls-display);
  color: var(--wc-primary);
}
.wc-stat__k { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); }
.wc-section--ink .wc-stat__v { color: #fff; }
.wc-section--ink .wc-stat__k { color: var(--wc-on-ink-2); }


/* ══ 7. Badge · Chip ═══════════════════════════════════════ */
.wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--wc-r-full);
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-semi);
  white-space: nowrap;
}
.wc-badge > i { width: 8px; height: 8px; flex: none; background: currentColor; border-radius: 50%; }
/* 위험도는 색 + 형태 + 라벨 3중 인코딩 (흑백 인쇄 판독 대응) */
.wc-badge--normal   { background: var(--wc-success-bg); color: var(--wc-success-text); }
.wc-badge--caution  { background: var(--wc-warning-bg); color: var(--wc-warning-text); }
.wc-badge--caution  > i { border-radius: 1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wc-badge--warning  { background: #FFF7ED; color: #C2410C; }
.wc-badge--warning  > i { border-radius: 1px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.wc-badge--critical { background: var(--wc-danger-bg); color: var(--wc-danger-text); }
.wc-badge--critical > i { border-radius: 2px; }
.wc-badge--neutral  { background: var(--wc-surface-2); color: var(--wc-text-muted); }
.wc-badge--neutral  > i { background: transparent; border: 2px solid currentColor; }
.wc-badge--primary  { background: var(--wc-primary-subtle); color: var(--wc-primary); }

.wc-chips { display: flex; flex-wrap: wrap; gap: var(--wc-2); }
.wc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-full);
  background: var(--wc-surface);
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-medium);
  color: var(--wc-text-2);
  box-shadow: var(--wc-sh-xs);
}
.wc-chip i { color: var(--wc-primary); }


/* ══ 8. Callout · Empty ════════════════════════════════════ */
.wc-callout {
  display: grid;
  gap: var(--wc-2);
  padding: var(--wc-5);
  background: var(--wc-info-bg);
  border: 1px solid var(--wc-primary-light);
  border-radius: var(--wc-r-lg);
}
.wc-callout__label {
  font-size: var(--wc-fs-label);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-ls-label);
  text-transform: uppercase;
  color: var(--wc-primary);
}
.wc-callout p { font-size: var(--wc-fs-sm); color: var(--wc-text-2); }
.wc-callout--warning { background: var(--wc-warning-bg); border-color: #FDE68A; }
.wc-callout--warning .wc-callout__label { color: var(--wc-warning-text); }

.wc-empty {
  display: grid;
  gap: var(--wc-3);
  justify-items: center;
  text-align: center;
  padding: var(--wc-11) var(--wc-5);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
}
.wc-empty__t { font-size: var(--wc-fs-h4); font-weight: var(--wc-fw-semi); }
.wc-empty p { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); max-width: 46ch; }


/* ══ 9. Steps ══════════════════════════════════════════════ */
.wc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wc-5); }
.wc-step { display: grid; gap: var(--wc-2); align-content: start; }
.wc-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--wc-r-full);
  background: var(--wc-primary-subtle);
  color: var(--wc-primary);
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-bold);
  margin-bottom: var(--wc-1);
}
.wc-step--now .wc-step__n { background: var(--wc-primary); color: #fff; box-shadow: var(--wc-sh-primary); }
.wc-step__t { font-size: var(--wc-fs-body); font-weight: var(--wc-fw-semi); }
.wc-step__d { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); line-height: 1.65; }


/* ══ 10. Accordion (details — JS 불필요) ═══════════════════ */
.wc-acc { display: grid; gap: var(--wc-3); }
.wc-acc__item {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  transition: box-shadow var(--wc-t-base) var(--wc-ease);
}
.wc-acc__item[open] { box-shadow: var(--wc-sh-sm); }
.wc-acc__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-4);
  padding: var(--wc-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--wc-fs-body);
  font-weight: var(--wc-fw-semi);
}
.wc-acc__item > summary::-webkit-details-marker { display: none; }
.wc-acc__item > summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--wc-text-subtle);
  border-bottom: 2px solid var(--wc-text-subtle);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--wc-t-base) var(--wc-ease);
}
.wc-acc__item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.wc-acc__body {
  padding: 0 var(--wc-5) var(--wc-5);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text-2);
  line-height: 1.75;
  max-width: var(--wc-prose);
}


/* ══ 11. Form ══════════════════════════════════════════════ */
.wc-field { display: grid; gap: var(--wc-2); }
.wc-field__label { font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-semi); }
.wc-field__req { color: var(--wc-danger-text); margin-left: 2px; }
.wc-field__hint { font-size: var(--wc-fs-xs); color: var(--wc-text-muted); }
.wc-field__err { font-size: var(--wc-fs-xs); color: var(--wc-danger-text); font-weight: var(--wc-fw-semi); }

.wc-input, .wc-select, .wc-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text);
  transition: border-color var(--wc-t-fast) var(--wc-ease), box-shadow var(--wc-t-fast) var(--wc-ease);
}
.wc-textarea { min-height: 128px; resize: vertical; line-height: 1.7; }
.wc-input::placeholder, .wc-textarea::placeholder { color: var(--wc-text-subtle); }
.wc-input:focus, .wc-select:focus, .wc-textarea:focus {
  outline: none;
  border-color: var(--wc-primary);
  box-shadow: var(--wc-ring);
}
.wc-field--invalid .wc-input,
.wc-field--invalid .wc-select,
.wc-field--invalid .wc-textarea {
  border-color: var(--wc-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

.wc-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wc-3);
  align-items: start;
  padding: var(--wc-4);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  cursor: pointer;
  transition: border-color var(--wc-t-fast) var(--wc-ease);
}
.wc-check:hover { border-color: var(--wc-border-2); }
.wc-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--wc-primary); cursor: pointer; }
.wc-check__t { font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-medium); }
.wc-check__d { font-size: var(--wc-fs-xs); color: var(--wc-text-muted); margin-top: 2px; }


/* ══ 12. Table ═════════════════════════════════════════════ */
.wc-tablewrap {
  overflow-x: auto;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-sm);
}
.wc-table { min-width: 640px; font-size: var(--wc-fs-sm); }
.wc-table th {
  padding: 14px 20px;
  background: var(--wc-surface-2);
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-semi);
  color: var(--wc-text-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}
.wc-table td { padding: 14px 20px; border-top: 1px solid var(--wc-border); }
.wc-table tbody tr:hover { background: var(--wc-surface-2); }
.wc-table .num { text-align: right; font-variant-numeric: tabular-nums; }


/* ══ 13. Dashboard preview (제품 스크린샷 대용) ════════════ */
.wc-shot {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-2xl);
  box-shadow: var(--wc-sh-xl);
  overflow: hidden;
}
.wc-shot__bar {
  display: flex;
  align-items: center;
  gap: var(--wc-2);
  padding: 14px 20px;
  border-bottom: 1px solid var(--wc-border);
  background: var(--wc-surface-2);
}
.wc-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wc-border-2); }
.wc-shot__title { margin-left: var(--wc-2); font-size: var(--wc-fs-xs); color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); }
.wc-shot__body { padding: var(--wc-5); display: grid; gap: var(--wc-4); }

.wc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--wc-3); }
.wc-tile {
  display: grid; gap: 2px;
  padding: var(--wc-4);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  background: var(--wc-surface);
}
.wc-tile__v { font-size: 24px; font-weight: var(--wc-fw-bold); line-height: 1.2; }
.wc-tile__k { font-size: var(--wc-fs-xs); color: var(--wc-text-muted); }
.wc-tile--danger  .wc-tile__v { color: var(--wc-danger-text); }
.wc-tile--warning .wc-tile__v { color: var(--wc-warning-text); }
.wc-tile--success .wc-tile__v { color: var(--wc-success-text); }

/* 미니 스파크라인 (CSS 막대) */
.wc-spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.wc-spark span {
  flex: 1;
  background: var(--wc-primary-light);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.wc-spark span.is-peak { background: var(--wc-primary); }


/* ══ 14. Motion — Fade / Slide / Scale. 차분하게. ══════════ */
.wc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--wc-t-slow) var(--wc-ease-out),
              transform var(--wc-t-slow) var(--wc-ease-out);
}
.wc-reveal.is-in { opacity: 1; transform: none; }
.wc-reveal--scale { transform: scale(.97); }
.wc-reveal--scale.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wc-reveal { opacity: 1; transform: none; }
}


/* ══ 15. Utility ═══════════════════════════════════════════ */
.wc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
         overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wc-center { text-align: center; }
.wc-divider { border-top: 1px solid var(--wc-border); }


/* ══ 17. Download card ═════════════════════════════════════ */
.wc-dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--wc-5);
  align-items: center;
  padding: var(--wc-5);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-sm);
  transition: box-shadow var(--wc-t-base) var(--wc-ease),
              border-color var(--wc-t-base) var(--wc-ease);
}
.wc-dl:hover { box-shadow: var(--wc-sh-lg); border-color: var(--wc-border-2); }
.wc-dl__thumb {
  border-radius: var(--wc-r-md);
  overflow: hidden;
  border: 1px solid var(--wc-border);
  background: var(--wc-surface-2);
}
.wc-dl__thumb img { width: 100%; height: auto; display: block; }
.wc-dl__body { display: grid; gap: var(--wc-2); align-content: center; }
.wc-dl__t { font-size: var(--wc-fs-h4); font-weight: var(--wc-fw-semi); letter-spacing: -.015em; }
.wc-dl__d { font-size: var(--wc-fs-sm); color: var(--wc-text-2); }
.wc-dl__meta {
  display: flex; flex-wrap: wrap; gap: var(--wc-2);
  font-size: var(--wc-fs-xs); color: var(--wc-text-muted);
  font-variant-numeric: tabular-nums;
}
.wc-dl__meta span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 520px) {
  .wc-dl { grid-template-columns: 1fr; }
  .wc-dl__thumb { max-width: 120px; }
}


/* ══ 18. Gallery — 카드뉴스 한 장씩 크게 ═══════════════════
   썸네일 나열은 내용이 안 읽힌다. 큰 스테이지 한 장 + 하단 썸네일 레일.
   카드 원본은 1080×1080 정사각.                              */
.wc-gallery { display: grid; gap: var(--wc-5); }

.wc-gallery__stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--wc-4);
}

.wc-gallery__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--wc-r-2xl);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  box-shadow: var(--wc-sh-lg);
}
.wc-gallery__viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .wc-gallery__viewport { scroll-behavior: auto; } }

.wc-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  display: grid;
  place-items: center;
}
.wc-gallery__slide img {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.wc-gallery__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--wc-r-full);
  border: 1px solid var(--wc-border);
  background: var(--wc-surface);
  color: var(--wc-text-2);
  font-size: 18px;
  box-shadow: var(--wc-sh-sm);
  cursor: pointer;
  transition: border-color var(--wc-t-fast) var(--wc-ease),
              color var(--wc-t-fast) var(--wc-ease),
              opacity var(--wc-t-fast) var(--wc-ease);
}
.wc-gallery__nav:hover { border-color: var(--wc-primary); color: var(--wc-primary); }
.wc-gallery__nav[disabled] { opacity: .3; pointer-events: none; }

.wc-gallery__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-3);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text-2);
}
.wc-gallery__idx {
  font-variant-numeric: tabular-nums;
  font-weight: var(--wc-fw-semi);
  color: var(--wc-primary);
}
.wc-gallery__cap { color: var(--wc-text-muted); }

/* 썸네일 레일 */
.wc-gallery__thumbs {
  display: flex;
  gap: var(--wc-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--wc-1);
  justify-content: center;
  flex-wrap: wrap;
}
.wc-gallery__thumbs::-webkit-scrollbar { display: none; }
.wc-gallery__thumb {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  padding: 0;
  border-radius: var(--wc-r-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--wc-surface);
  box-shadow: var(--wc-sh-xs);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--wc-t-fast) var(--wc-ease),
              border-color var(--wc-t-fast) var(--wc-ease),
              transform var(--wc-t-fast) var(--wc-ease);
}
.wc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-gallery__thumb:hover { opacity: .9; transform: translateY(-2px); }
.wc-gallery__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--wc-primary);
  box-shadow: var(--wc-sh-primary);
}

@media (max-width: 720px) {
  .wc-gallery__stage { grid-template-columns: 1fr; gap: var(--wc-3); }
  .wc-gallery__nav { display: none; }   /* 모바일은 스와이프 */
  .wc-gallery__thumb { width: 44px; height: 44px; }
}


/* ── 어두운 섹션 위의 갤러리·다운로드 카드 ─────────────────
   카드 이미지가 가장 도드라지도록 배경을 어둡게 깔았을 때의 변형. */
.wc-section--ink .wc-gallery__viewport {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.wc-section--ink .wc-gallery__nav {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.wc-section--ink .wc-gallery__nav:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.wc-section--ink .wc-gallery__meta { color: var(--wc-on-ink-2); }
.wc-section--ink .wc-gallery__idx  { color: #93B4FF; }
.wc-section--ink .wc-gallery__cap  { color: var(--wc-on-ink-2); }
.wc-section--ink .wc-gallery__thumb { border-color: transparent; box-shadow: none; }
.wc-section--ink .wc-gallery__thumb[aria-current="true"] {
  border-color: #93B4FF;
  box-shadow: 0 6px 18px rgba(37,99,235,.35);
}

.wc-section--ink .wc-dl {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.wc-section--ink .wc-dl:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.wc-section--ink .wc-dl__t    { color: #fff; }
.wc-section--ink .wc-dl__d    { color: var(--wc-on-ink-2); }
.wc-section--ink .wc-dl__meta { color: var(--wc-on-ink-2); }
.wc-section--ink .wc-dl__thumb { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }


/* ══ 19. Definition list ═══════════════════════════════════ */
.wc-deflist { display: grid; }
.wc-deflist > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--wc-4);
  padding: var(--wc-3) 0;
  border-bottom: 1px solid var(--wc-border);
}
.wc-deflist > div:last-child { border-bottom: 0; }
.wc-deflist dt { font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-semi); color: var(--wc-text-muted); }
.wc-deflist dd { font-size: var(--wc-fs-sm); color: var(--wc-text); }
@media (max-width: 640px) {
  .wc-deflist > div { grid-template-columns: 1fr; gap: var(--wc-1); }
}


/* ══ 20. Timeline ══════════════════════════════════════════ */
.wc-timeline { display: grid; }
.wc-tl {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--wc-5);
  padding: var(--wc-5) 0 var(--wc-5) 0;
  border-left: 2px solid var(--wc-border);
  padding-left: var(--wc-6);
  margin-left: var(--wc-2);
}
.wc-tl::before {
  content: "";
  position: absolute;
  left: -7px; top: var(--wc-6);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--wc-surface);
  border: 2px solid var(--wc-border-2);
}
.wc-tl--now { border-left-color: var(--wc-primary); }
.wc-tl--now::before { background: var(--wc-primary); border-color: var(--wc-primary); box-shadow: var(--wc-sh-primary); }
.wc-tl__y {
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-bold);
  color: var(--wc-primary);
  font-variant-numeric: tabular-nums;
}
.wc-tl__b { display: grid; gap: 4px; }
.wc-tl__t { font-size: var(--wc-fs-body); font-weight: var(--wc-fw-semi); }
.wc-tl__d { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); }
@media (max-width: 640px) {
  .wc-tl { grid-template-columns: 1fr; gap: var(--wc-2); padding-left: var(--wc-5); }
}


/* ══ 21. Post card (블로그) ════════════════════════════════ */
.wc-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--wc-5); }

.wc-post {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  overflow: hidden;
  box-shadow: var(--wc-sh-sm);
  transition: box-shadow var(--wc-t-base) var(--wc-ease), transform var(--wc-t-base) var(--wc-ease);
}
.wc-post:hover { box-shadow: var(--wc-sh-lg); transform: translateY(-3px); }
.wc-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--wc-surface-2); }
.wc-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-post__body { display: grid; gap: var(--wc-3); align-content: start; padding: var(--wc-5); }
.wc-post__title {
  font-size: var(--wc-fs-h4);
  font-weight: var(--wc-fw-semi);
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--wc-text);
}
.wc-post:hover .wc-post__title { color: var(--wc-primary); }
.wc-post__excerpt {
  font-size: var(--wc-fs-sm);
  color: var(--wc-text-2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wc-3);
  font-size: var(--wc-fs-xs); color: var(--wc-text-muted);
  font-variant-numeric: tabular-nums;
}
.wc-post__meta span { display: inline-flex; align-items: center; gap: 5px; }

/* 첫 글 강조 */
.wc-post--feature { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1.15fr 1fr; }
.wc-post--feature .wc-post__media { aspect-ratio: auto; height: 100%; min-height: 280px; }
.wc-post--feature .wc-post__body { padding: var(--wc-8); align-content: center; gap: var(--wc-4); }
.wc-post--feature .wc-post__title { font-size: var(--wc-fs-h3); font-weight: var(--wc-fw-bold); }
.wc-post--feature .wc-post__excerpt { font-size: var(--wc-fs-body); -webkit-line-clamp: 4; }
@media (max-width: 860px) {
  .wc-post--feature { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wc-post--feature .wc-post__media { aspect-ratio: 16 / 9; min-height: 0; }
  .wc-post--feature .wc-post__body { padding: var(--wc-5); }
}

/* 카테고리 필터 */
.wc-filters { display: flex; flex-wrap: wrap; gap: var(--wc-2); }
.wc-filter {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-full);
  background: var(--wc-surface);
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-medium);
  color: var(--wc-text-2);
  transition: border-color var(--wc-t-fast) var(--wc-ease),
              background var(--wc-t-fast) var(--wc-ease),
              color var(--wc-t-fast) var(--wc-ease);
}
.wc-filter:hover { border-color: var(--wc-border-2); color: var(--wc-text); }
.wc-filter[aria-current="true"] {
  background: var(--wc-primary);
  border-color: var(--wc-primary);
  color: #FFFFFF;
}


/* ══ 22. Auth — 로그인 · 회원가입 · 약관 ═══════════════════ */
.wc-auth {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  min-height: calc(100vh - var(--wc-header-h) - 240px);
}
.wc-auth__aside {
  background: var(--wc-ink);
  color: var(--wc-on-ink);
  padding: var(--wc-10) var(--wc-8);
  display: grid;
  align-content: center;
  gap: var(--wc-6);
}
.wc-auth__aside h2 { color: #fff; font-size: var(--wc-fs-h2); }
.wc-auth__aside p  { color: var(--wc-on-ink-2); font-size: var(--wc-fs-body); line-height: 1.7; }
.wc-auth__points { display: grid; gap: var(--wc-4); }
.wc-auth__point {
  display: grid; grid-template-columns: auto 1fr; gap: var(--wc-3); align-items: start;
}
.wc-auth__point i {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--wc-r-md);
  background: rgba(37,99,235,.22); color: #93B4FF;
}
.wc-auth__point b { display: block; font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-semi); color: #fff; }
.wc-auth__point span { font-size: var(--wc-fs-xs); color: var(--wc-on-ink-2); }

.wc-auth__main {
  background: var(--wc-bg);
  padding: var(--wc-10) var(--wc-8);
  display: grid;
  align-content: center;
  justify-items: center;
}
.wc-authcard {
  width: 100%;
  max-width: 520px;
  display: grid;
  gap: var(--wc-5);
  padding: var(--wc-8);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-md);
}
.wc-authcard--wide { max-width: 880px; }
.wc-authcard__head { display: grid; gap: var(--wc-2); }
.wc-authcard__foot {
  display: grid; gap: var(--wc-3); justify-items: center;
  padding-top: var(--wc-5); border-top: 1px solid var(--wc-border);
  font-size: var(--wc-fs-sm); color: var(--wc-text-muted);
}

/* Django form.as_p / 위젯을 감싸는 영역의 기본 스타일 */
.wc-formfields p { display: grid; gap: var(--wc-2); margin-bottom: var(--wc-5); }
.wc-formfields label { font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-semi); color: var(--wc-text); }
.wc-formfields input[type="text"],
.wc-formfields input[type="password"],
.wc-formfields input[type="email"],
.wc-formfields input[type="tel"],
.wc-formfields select,
.wc-formfields textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text);
  transition: border-color var(--wc-t-fast) var(--wc-ease), box-shadow var(--wc-t-fast) var(--wc-ease);
}
.wc-formfields input:focus, .wc-formfields select:focus, .wc-formfields textarea:focus {
  outline: none; border-color: var(--wc-primary); box-shadow: var(--wc-ring);
}
.wc-formfields .helptext, .wc-formfields ul.errorlist {
  font-size: var(--wc-fs-xs); color: var(--wc-text-muted); margin: 0; padding: 0; list-style: none;
}
.wc-formfields ul.errorlist { color: var(--wc-danger-text); font-weight: var(--wc-fw-semi); }

/* 카카오 로그인 */
.wc-kakao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wc-2);
  width: 100%; min-height: 48px; padding: 0 20px;
  border-radius: var(--wc-r-md);
  background: #FEE500; color: #191600;
  font-size: var(--wc-fs-sm); font-weight: var(--wc-fw-semi);
  transition: filter var(--wc-t-fast) var(--wc-ease);
}
.wc-kakao:hover { filter: brightness(.95); color: #191600; }

.wc-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wc-3);
  font-size: var(--wc-fs-xs); color: var(--wc-text-subtle);
}
.wc-or::before, .wc-or::after { content: ""; height: 1px; background: var(--wc-border); }

@media (max-width: 900px) {
  .wc-auth { grid-template-columns: 1fr; min-height: 0; }
  .wc-auth__aside { padding: var(--wc-8) var(--wc-5); }
  .wc-auth__main  { padding: var(--wc-8) var(--wc-5); }
  .wc-authcard { padding: var(--wc-6); }
}


/* ══ 23. Step rail — 가로 단계 표시기 (전자서명 등) ════════ */
.wc-rail { display: flex; align-items: center; gap: var(--wc-2); flex-wrap: wrap; }
.wc-rail__item {
  display: inline-flex; align-items: center; gap: var(--wc-2);
  padding: 8px 16px;
  border-radius: var(--wc-r-full);
  border: 1px solid var(--wc-border);
  background: var(--wc-surface);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text-muted);
}
.wc-rail__n {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--wc-surface-2); color: var(--wc-text-muted);
  font-size: var(--wc-fs-label); font-weight: var(--wc-fw-bold);
}
.wc-rail__item[data-state="now"] {
  border-color: var(--wc-primary); background: var(--wc-primary-subtle); color: var(--wc-primary);
  font-weight: var(--wc-fw-semi);
}
.wc-rail__item[data-state="now"] .wc-rail__n { background: var(--wc-primary); color: #fff; }
.wc-rail__item[data-state="done"] { border-color: var(--wc-success-text); color: var(--wc-success-text); }
.wc-rail__item[data-state="done"] .wc-rail__n { background: var(--wc-success-text); color: #fff; }
.wc-rail__sep { color: var(--wc-text-subtle); }

/* 전자서명 iframe */
.wc-sign {
  width: 100%;
  min-height: 900px;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  background: var(--wc-surface);
}
@media (max-width: 640px) { .wc-sign { min-height: 640px; } }


/* ══ 24. HTML5UP 아이콘 규약 호환 ══════════════════════════
   마크업이 <i class="icon solid fa-wave-square"> 형태를 쓴다.
   Font Awesome 은 .fas / .fa-solid 에만 폰트를 걸어주므로,
   레거시 main.css 를 끄면 .icon.solid 에 폰트가 없어 전부 두부(□)가 된다.

   ※ 구 main.css 는 'Font Awesome 5 Free' 를 지정했는데 셸이 로드하는
     CDN 은 6.4.0 이다. 이름이 어긋나 예전부터 깨질 소지가 있었다.
     여기서는 실제 로드되는 6 계열 이름으로 맞춘다. */
.icon { display: inline-block; position: relative; text-decoration: none; }
.icon::before {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon.solid::before  { font-weight: 900; }
.icon.brands::before { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
/* 아이콘 옆 스크린리더용 라벨은 화면에서 숨긴다 */
.icon > .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                 overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* ══ 18. 지원기관 고지 밴드 ════════════════════════════════
   64de381 의 .pf-support 를 wc 토큰으로 옮긴 것. HERO 바로 위
   최상단에 두고 로고를 크게(72px) 노출한다.

   ※ pilot 앱의 .wc-support (wc-pilot.css:154, 30px 소형 표기)와는
     별개 컴포넌트다. 이름을 합치면 실증사업 페이지의 작은 표기까지
     같이 커지므로 분리해 둔다.
   ※ 로고에 opacity 를 걸지 않는다 — 지원기관 엠블럼은 채도를 낮추지
     않고 풀컬러로 노출하는 것이 정부·EU 사업 공통 표기 관행이다. */
.wc-fund {
  background: var(--wc-surface);
  border-bottom: 1px solid var(--wc-border);
  padding-block: var(--wc-6);
}
.wc-fund__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wc-4);
}

/* 채운 알약 대신 양옆에 헤어라인을 둔 조용한 라벨 — 원본과 동일 */
.wc-fund__label {
  display: flex;
  align-items: center;
  gap: var(--wc-3);
  font-size: var(--wc-fs-label);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-ls-label);
  text-transform: uppercase;
  color: var(--wc-text-subtle);
}
.wc-fund__label::before,
.wc-fund__label::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--wc-border-2);
}

/* 두 로고를 하나의 흰 판에 담은 co-branding lockup.
   둘 다 가로형이고 종횡비가 3.48 / 3.44 로 거의 같아 높이를 맞추면
   폭까지 맞아떨어진다. 가운데 헤어라인으로 공식 표기처럼 읽히게 함. */
.wc-fund__lockup {
  display: flex;
  align-items: center;
  gap: var(--wc-7);
  padding: var(--wc-4) var(--wc-6);
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-md);
}
.wc-fund__lockup img { display: block; height: 72px; width: auto; }
.wc-fund__sep {
  width: 1px;
  align-self: stretch;
  margin-block: 4px;
  background: var(--wc-border);
}

.wc-fund__text {
  margin: 0;
  max-width: 64ch;
  text-align: center;
  font-size: var(--wc-fs-sm);
  color: var(--wc-text-2);
}
.wc-fund__text strong { font-weight: var(--wc-fw-semi); color: var(--wc-text); }

@media (max-width: 560px) {
  .wc-fund__lockup { gap: var(--wc-4); padding: var(--wc-3) var(--wc-4); }
  .wc-fund__lockup img { height: 46px; }
}