/* ============================================================
   WellCare AI — 실증사업 전용 컴포넌트
   wc-tokens.css → wc-base.css → (pilot 레거시) → 이 파일 순으로 로드

   공통 컴포넌트(섹션·카드·버튼·콜아웃·빈상태·배지)는 wc-base.css 에 있다.
   여기에는 실증 페이지에만 나오는 것만 둔다.
   ============================================================ */

/* ══ 서브 내비게이션 ═══════════════════════════════════════ */
.wc-subnav {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--wc-surface);
  border-bottom: 1px solid var(--wc-border);
  backdrop-filter: saturate(180%) blur(6px);
}
.wc-subnav__inner {
  max-width: var(--wc-container);
  margin-inline: auto;
  padding-inline: var(--wc-gutter);
  min-height: var(--wc-header-h);
  display: flex;
  align-items: center;
  gap: var(--wc-4);
}
.wc-subnav__brand {
  flex: none;
  padding-right: var(--wc-4);
  border-right: 1px solid var(--wc-border);
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-bold);
  letter-spacing: .06em;
  color: var(--wc-primary);
  white-space: nowrap;
}
.wc-subnav__scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wc-subnav__scroll::-webkit-scrollbar { display: none; }
.wc-subnav__scroll a {
  position: relative;
  padding: 14px 12px;
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-medium);
  color: var(--wc-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wc-t-fast) var(--wc-ease);
}
.wc-subnav__scroll a:hover { color: var(--wc-text); text-decoration: none; }
.wc-subnav__scroll a[aria-current="page"] { color: var(--wc-primary); font-weight: var(--wc-fw-semi); }
.wc-subnav__scroll a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--wc-primary);
}
.wc-subnav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--wc-r-md);
  background: var(--wc-primary);
  color: #fff;
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-semi);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--wc-t-fast) var(--wc-ease);
}
.wc-subnav__cta:hover { background: var(--wc-primary-active); color: #fff; text-decoration: none; }

@media (max-width: 720px) {
  .wc-subnav__inner { padding-inline: var(--wc-gutter-sm); gap: var(--wc-3); }
  .wc-subnav__brand { display: none; }
}


/* ══ 어두운 배경 위 버튼 반전 ══════════════════════════════
   .btn-primary 의 배경(brand-700)이 섹션 배경(brand-700)과 같아
   버튼이 통째로 사라지는 문제를 막는다.
   .pilot-hero 에는 같은 취지의 규칙이 이미 있으나, 인라인 style 로
   어두운 배경을 준 섹션에는 적용되지 않아 별도 컨텍스트 클래스를 둔다. */
.pilot-on-dark .btn-primary,
.pilot-on-dark a.btn-primary {
  background: #fff;
  color: var(--color-brand-700);
  border: 1px solid #fff;
}
.pilot-on-dark .btn-primary:hover,
.pilot-on-dark a.btn-primary:hover {
  background: var(--color-brand-50);
  color: var(--color-brand-900);
}
.pilot-on-dark .btn-secondary,
.pilot-on-dark a.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .55) !important;
}
.pilot-on-dark .btn-secondary:hover,
.pilot-on-dark a.btn-secondary:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: #fff;
}


/* ══ 히어로 ════════════════════════════════════════════════
   큰 히어로를 만들지 않는다. 첫 화면에서 다음 섹션이 보여야 한다. */
.wc-hero {
  background: var(--wc-surface);
  border-bottom: 1px solid var(--wc-border);
  padding-block: var(--wc-9) var(--wc-8);
}
.wc-hero__inner {
  max-width: var(--wc-container);
  margin-inline: auto;
  padding-inline: var(--wc-gutter);
  display: grid;
  gap: var(--wc-5);
  max-width: min(var(--wc-container), 100%);
}
.wc-hero__title {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: var(--wc-fw-black);
  letter-spacing: var(--wc-ls-display);
  line-height: 1.12;
  max-width: 20ch;
}
.wc-hero__title em {
  font-style: normal;
  color: var(--wc-primary);
}
@media (max-width: 600px) {
  .wc-hero { padding-block: var(--wc-7) var(--wc-6); }
  .wc-hero__inner { padding-inline: var(--wc-gutter-sm); }
}


/* ══ 지원기관 표기 ════════════════════════════════════════
   정부 지원 사업의 신뢰 근거. 첫 화면에서 스크롤 없이 보이게 둔다. */
.wc-support {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wc-5);
  margin-top: var(--wc-4);
  padding-top: var(--wc-5);
  border-top: 1px solid var(--wc-border);
}
.wc-support__label {
  font-size: var(--wc-fs-label);
  letter-spacing: var(--wc-ls-label);
  text-transform: uppercase;
  font-weight: var(--wc-fw-bold);
  color: var(--wc-text-subtle);
}
.wc-support img {
  height: 30px;
  width: auto;
  opacity: .85;
}


/* ══ 권역 카드 (FIX-01) ════════════════════════════════════
   선정 건수·진행률·게이지를 두지 않는다.
   상태 · 목표 · 마감일 · 다음 행동 네 가지만.               */
.wc-regions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--wc-4);
}

.wc-region {
  display: grid;
  gap: var(--wc-4);
  align-content: start;
  padding: var(--wc-5);
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  transition: border-color var(--wc-t-fast) var(--wc-ease);
}
.wc-region--open    { border-color: color-mix(in srgb, var(--wc-success-text) 42%, var(--wc-border)); }
.wc-region--closing { border-color: color-mix(in srgb, var(--wc-warning-text) 50%, var(--wc-border)); }
.wc-region--closed  { opacity: .6; }

.wc-region__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-3);
  flex-wrap: wrap;
}
.wc-region__name {
  font-size: var(--wc-fs-h4);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-ls-head);
}

.wc-region__facts {
  display: grid;
  gap: var(--wc-3);
  padding-block: var(--wc-4);
  border-top: 1px solid var(--wc-border);
  border-bottom: 1px solid var(--wc-border);
}
.wc-region__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wc-3);
}
.wc-region__row dt { font-size: var(--wc-fs-xs); color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); }
.wc-region__row dd {
  font-size: var(--wc-fs-body);
  font-weight: var(--wc-fw-semi);
  text-align: right;
}
.wc-region__row dd small {
  display: block;
  font-size: var(--wc-fs-xs);
  font-weight: var(--wc-fw-regular);
  color: var(--wc-text-muted);
}
.wc-region__row--due dd { color: var(--wc-primary); }

.wc-region__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--wc-r-md);
  background: var(--wc-primary);
  color: #fff;
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-semi);
  text-decoration: none;
  transition: background var(--wc-t-fast) var(--wc-ease);
}
.wc-region__cta:hover { background: var(--wc-primary-active); color: #fff; text-decoration: none; }
.wc-region__cta--muted {
  background: transparent;
  color: var(--wc-text-muted);
  border: 1px solid var(--wc-border-2);
  cursor: default;
}
.wc-region__cta--muted:hover { background: transparent; color: var(--wc-text-muted); }


/* ══ 편집형 2단 · 스펙 밴드 · 인물 · CTA ═══════════════════
   실증 페이지에서만 쓰는 레이아웃. wc-base 의 토큰만 사용한다. */
.wc-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--wc-9);
  align-items: start;
}
.wc-split__aside { position: sticky; top: var(--wc-6); display: grid; gap: var(--wc-3); }
@media (max-width: 900px) {
  .wc-split { grid-template-columns: 1fr; gap: var(--wc-5); }
  .wc-split__aside { position: static; }
}

.wc-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-sh-sm);
  overflow: hidden;
}
.wc-spec {
  display: grid;
  gap: var(--wc-1);
  padding: var(--wc-6);
  border-right: 1px solid var(--wc-border);
}
.wc-spec:last-child { border-right: 0; }
.wc-spec__v {
  font-size: 40px;
  font-weight: var(--wc-fw-black);
  line-height: 1.05;
  letter-spacing: var(--wc-ls-display);
  color: var(--wc-primary);
}
.wc-spec__k { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); }
.wc-spec__k sup { color: var(--wc-primary); font-weight: var(--wc-fw-semi); }
@media (max-width: 720px) {
  .wc-spec { border-right: 0; border-bottom: 1px solid var(--wc-border); }
  .wc-spec:last-child { border-bottom: 0; }
}

.wc-card__num {
  font-size: var(--wc-fs-label);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-ls-label);
  color: var(--wc-primary);
}

.wc-person {
  display: grid;
  gap: 2px;
  padding: var(--wc-4) 0;
  border-top: 1px solid var(--wc-border);
}
.wc-person__n { font-size: var(--wc-fs-body); font-weight: var(--wc-fw-semi); }
.wc-person__r { font-size: var(--wc-fs-xs); color: var(--wc-primary); font-weight: var(--wc-fw-semi); }
.wc-person__h { font-size: var(--wc-fs-sm); color: var(--wc-text-muted); }

.wc-cta {
  display: grid;
  gap: var(--wc-5);
  justify-items: center;
  text-align: center;
}
.wc-cta__t {
  font-size: var(--wc-fs-h1);
  font-weight: var(--wc-fw-black);
  letter-spacing: var(--wc-ls-display);
  color: #fff;
}
.wc-cta__d { font-size: var(--wc-fs-lead); color: var(--wc-on-ink-2); max-width: 56ch; }
.wc-cta__meta { font-size: var(--wc-fs-xs); color: var(--wc-on-ink-2); }
.wc-cta__meta a { color: #fff; font-weight: var(--wc-fw-semi); }