/* 랜딩(LANDING-01) 전용 스타일
   공통 토큰·프리미티브(.container/.btn/.brand)는 common.css 에서 로드됨 */

.btn-ghost { padding: 0 24px; }

/* 서울 지도 코로플레스 데모 (히어로의 .hero-visual 안에서만 쓰임)
   ⚠ body, *{box-sizing} 같은 전역 규칙은 페이지 전체 레이아웃을 깨뜨리므로 넣지 않음.
   ⚠ --pin 등 전역 :root 변수 대신 .stage 안에서만 쓰이는 --map-pin으로 스코프를 좁힘. */
.stage{
  --map-pin:#3f66d6;
  --map-pin-dark:#2e4fb0;

  width: 100%;
  position: relative;
}
.map-wrap{
  position: relative;
  width: 100%;
  line-height: 0;
  border-radius: 20px;
  overflow: visible;
}
.map-wrap svg.overlay{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  overflow: visible;
}
.region{
  cursor: pointer;
}
.district-fill{
  transition: filter 200ms ease;
}
.region.hover .district-fill{
  filter: brightness(0.94);
}
.district-border{
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 2;
  pointer-events: none;
}
.overlay-poly{
  fill: rgba(255, 205, 90, 0);
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 3;
  pointer-events: none;
  transition: fill 420ms cubic-bezier(.22,1,.36,1), stroke 420ms ease;
}
.region.hover .overlay-poly{
  fill: rgba(255, 205, 90, 0.55);
  stroke: rgba(255, 255, 255, 0.9);
  animation: mapPulseGlow 700ms ease-out;
}
@keyframes mapPulseGlow{
  0%{ filter: drop-shadow(0 0 0px rgba(255,205,90,0.9)); }
  45%{ filter: drop-shadow(0 0 12px rgba(255,205,90,0.9)); }
  100%{ filter: drop-shadow(0 0 0px rgba(255,205,90,0)); }
}
.label-tag{
  position: absolute;
  transform: translate(-50%,-100%);
  background: rgba(30,20,15,0.88);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.label-tag.show{ opacity: 1; }
.label-tag::after{
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(30,20,15,0.88);
}

/* 2. 히어로 */
/* 헤더(66px)를 뺀 첫 화면을 히어로가 꽉 채워, 화면 크기와 무관하게
   지표 바(.stats)가 스크롤 전에는 보이지 않도록 한다. */
.hero {
  background: linear-gradient(var(--surface-2), #fff);
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
}
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 40px;
  align-items: center;
  padding: 48px 24px;
}

/* 히어로 진입 모션: 로드되면 아래에서 위로 순차적으로 떠오른다 */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > *,
.hero-visual {
  animation: heroRise .7s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-copy .eyebrow { animation-delay: .05s; }
.hero-title        { animation-delay: .15s; }
.hero-lead         { animation-delay: .25s; }
.hero-cta          { animation-delay: .35s; }
.hero-trust        { animation-delay: .45s; }
.hero-visual       { animation-delay: .30s; }

/* 스크롤 등장 모션: JS(IntersectionObserver)가 .is-visible 을 붙이면 나타난다 */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal       { transform: translateY(34px); }
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* 모션 최소화 선호 시 애니메이션 제거 (접근성) */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-visual { animation: none; }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--brand-tint);
  border-radius: 20px; padding: 5px 13px;
  margin-bottom: 20px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.hero-title {
  font-size: 46px; line-height: 1.12; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink);
  text-wrap: balance;
}
.hero-lead {
  margin-top: 20px;
  font-size: 15.5px; line-height: 1.7; color: var(--muted);
  max-width: 440px;
}
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-size: 12.5px; color: var(--faint);
}
.trust-sep { width: 1px; height: 12px; background: #e0d5ce; }

/* 4. 지도 프리뷰 카드 */
.map-preview {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.map-preview-bar {
  height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--brand);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.map-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .5); }

/* 지표 바 */
.stats { background: var(--dark); color: #fff; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 30px; border-left: 1px solid rgba(255, 255, 255, .08); }
.stat:first-child { border-left: 0; }
.stat-num {
  display: block;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--dark-accent);
}
.stat-label { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .66); }

/* 5. 핵심 기능 (지도 비교 / 상세 리포트 / 지원사업 매칭) */
.section-title{
  font-size: 30px; font-weight: 800; line-height: 1.28;
  letter-spacing: -.03em; color: var(--ink);
}
.section-lead{
  margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--muted);
  max-width: 480px;
}

/* 5-1. 지도 비교 */
.feature-map{ padding: 88px 0 76px; background: #fff; }
.feature-map-head{ text-align: center; }
.feature-map-head .section-lead{ margin-left: auto; margin-right: auto; }

.map-demo{
  margin: 40px auto 0;
  max-width: 920px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.map-demo-bar{
  height: 46px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-size: 12.5px; font-weight: 700;
}
.map-demo-dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); }
.map-demo-tag{ margin-left: auto; font-weight: 600; opacity: .8; font-size: 11.5px; }

.map-demo-body{
  position: relative;
  background: var(--surface-2);
  padding: 28px 24px;
}
.map-wrap-mini{
  max-width: 620px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(90,45,28,.14));
}

.map-demo-panel{
  position: absolute;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(90,45,28,.12);
  padding: 12px 14px;
  font-size: 12px;
}
.map-demo-filter{ top: 36px; left: 32px; width: 148px; }
.map-demo-rank{ top: 36px; right: 32px; width: 176px; }
.mdp-label{ font-size: 11px; font-weight: 800; color: var(--muted-2); margin-bottom: 8px; letter-spacing: .02em; }
.mdp-row{ display: flex; align-items: center; gap: 7px; padding: 4px 0; color: var(--text-soft); font-size: 11.5px; }
.mdp-checkbox{ width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #d9cbc3; flex: 0 0 auto; }
.mdp-checkbox.checked{ background: var(--brand); border-color: var(--brand); }
.mdp-scale{
  margin-top: 8px; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #f7e9e3, var(--brand));
}
.mdp-rank-list{ display: flex; flex-direction: column; gap: 6px; }
.mdp-rank-list li{
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text-soft);
}
.mdp-rank-list li em{ margin-left: auto; font-style: normal; font-family: var(--mono); color: var(--brand); font-weight: 800; }
.mdp-rank-badge{
  width: 16px; height: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--brand-tint); color: var(--brand);
  font-size: 9.5px; font-weight: 800;
}
.mdp-rank-badge.is-top{ background: var(--brand); color: #fff; }

.feature-sub-grid{
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feature-sub-card{
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 22px;
}
/* 카드가 순차적으로 떠오르도록 등장 딜레이를 준다 */
.feature-sub-card.reveal:nth-child(1){ --reveal-delay: .05s; }
.feature-sub-card.reveal:nth-child(2){ --reveal-delay: .15s; }
.feature-sub-card.reveal:nth-child(3){ --reveal-delay: .25s; }
.feature-sub-icon{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--brand-icon-bg); color: var(--brand);
}
.feature-sub-icon svg{ width: 20px; height: 20px; }
.feature-sub-card h3{ font-size: 15px; font-weight: 800; color: var(--text); margin-top: 14px; }
.feature-sub-card p{ font-size: 12.5px; line-height: 1.6; color: var(--muted-2); margin-top: 6px; }

/* 5-2. 상세 리포트 */
.feature-report{ padding: 84px 0; background: var(--surface-2); }
.feature-report-inner{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.report-chip-grid{
  margin-top: 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.report-chip{
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--card-line);
  border-radius: 12px; padding: 13px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--text-soft);
}
.report-chip svg{ width: 20px; height: 20px; flex: 0 0 auto; color: var(--brand); }

.report-mock{
  background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 26px 26px 22px;
  max-width: 340px; margin: 0 auto;
}
.report-mock-kicker{ font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--brand); }
.report-mock-title{ font-size: 15.5px; font-weight: 800; color: var(--ink); margin-top: 8px; line-height: 1.4; }
.report-mock-sub{ font-size: 11px; color: var(--faint); margin-top: 4px; }
.report-mock-stats{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.report-mock-stats div{ text-align: center; }
.report-mock-stats em{ display: block; font-style: normal; font-size: 15px; font-weight: 800; color: var(--ink); }
.report-mock-stats span{ display: block; font-size: 10px; color: var(--faint); margin-top: 2px; }
.report-mock-chart{ margin-top: 16px; }
.report-mock-bars{ margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.rmb-row{ display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted-2); }
.rmb-row span{ width: 68px; flex: 0 0 auto; }
.rmb-row i{ display: block; height: 6px; border-radius: 4px; background: var(--brand); opacity: .85; }

/* 5-3. 지원사업 매칭 */
.feature-support{ padding: 84px 0 96px; background: #fff; }
.feature-support-inner{
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
}
.support-network{ width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.feature-support-copy .eyebrow{ margin-bottom: 16px; }
.feature-support-copy .btn{ margin-top: 26px; }

/* 반응형 */
@media (max-width: 900px) {
  .feature-map-panel, .map-demo-panel{ display: none; }
  .feature-sub-grid{ grid-template-columns: 1fr; }
  .feature-report-inner{ grid-template-columns: 1fr; }
  .feature-support-inner{ grid-template-columns: 1fr; text-align: center; }
  .support-network{ margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .section-title{ font-size: 24px; }
  .map-demo-panel{ display: none; }
}



/* 6. 푸터 */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px;
  padding: 34px 24px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-nav { display: flex; gap: 22px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.footer-nav a:hover { color: var(--brand); }
.footer-copy { margin-left: auto; font-size: 12.5px; color: var(--faint); }

/* 반응형 · 태블릿 */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
  .hero-title { font-size: 38px; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:nth-child(odd) { border-left: 0; }
}

/* 반응형 · 모바일 (명세: 1열 · 햄버거) */
@media (max-width: 640px) {
  .hero-title { font-size: 32px; }
  .hero-cta .btn { flex: 1; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-copy { margin-left: 0; }
}