/* ===================================================================
   themes.css — 대상별 테마 (CSS 변수 Override 방식)
   노원 JUMP 단체 홈페이지 퍼블리싱

   ★ 설계 원칙
     페이지별로 CSS 를 따로 만들지 않습니다.
     하나의 디자인 시스템(common + components) 위에서
     <body class="theme-*"> 클래스 하나로 아래 변수만 덮어씁니다.

       --theme-accent        대상별 주 강조색
       --theme-accent-2      히어로/다크 배경 위 보조 강조색
       --theme-accent-ink    accent 배경 위 글자색 (대비 확보)
       --theme-tint          accent 의 아주 옅은 배경색
       --radius-card         카드 라운드 (유아=둥글게, 성인=각지게)
       --theme-hero-overlay  히어로 이미지 위 오버레이

   ★ 컬러 출처
     4색 모두 운영 사이트 tokens.css 의 브랜드/존 컬러에서 가져왔습니다.
     임의로 만든 색이 아니므로 "하나의 브랜드" 안에 머무릅니다.
       초등  = --blue   #037ab8  + --yellow #f7b924
       청소년 = --z-surv #8b2afa  + --pink   #e92285
       유아  = --pink   #e92285  + --z-adv  #5eade3
       성인  = --dark   #171428  + --blue   #037ab8

   ★ 이미지 배정 근거
     「단체 홈페이지 구성안.xlsx」 메인 메뉴 시트에서 시설이 각 대상 카드에
     직접 배치한 사진을 그대로 따랐습니다.
       초등=클립앤클라임 / 청소년=배틀월드 / 유아=키즈그라운드 / 성인=카트
   =================================================================== */

/* ===================================================================
   초등 — 활기 · 도전 · 친구 · 성장 · 스포츠
   밝은 블루를 주색으로, 옐로를 포인트로 써서 "밝고 활기찬" 톤.
   =================================================================== */
.theme-elementary {
  --theme-accent:     #037ab8;
  --theme-accent-2:   #f7b924;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #eaf5fb;
  --radius-card:      14px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(6, 26, 42, .24) 0%, rgba(6, 26, 42, .58) 52%, rgba(4, 18, 30, .90) 100%),
    radial-gradient(ellipse at 78% 22%, rgba(247, 185, 36, .26) 0%, transparent 58%);
}
.theme-elementary .eyebrow { color: var(--theme-accent-2); }
.theme-elementary .hero__title .accent { color: #ffd24a; }

/* ===================================================================
   청소년 — 역동 · Adventure · Challenge · Team Play · 미션
   서바이벌존 퍼플 + 핑크. 라운드를 줄여 더 날카롭고 강한 인상.
   =================================================================== */
.theme-youth {
  --theme-accent:     #7a1fe0;
  --theme-accent-2:   #e92285;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #f3ecfe;
  --radius-card:      8px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(14, 6, 32, .30) 0%, rgba(14, 6, 32, .62) 50%, rgba(10, 4, 24, .92) 100%),
    radial-gradient(ellipse at 22% 26%, rgba(139, 42, 250, .38) 0%, transparent 60%),
    radial-gradient(ellipse at 82% 68%, rgba(233, 34, 133, .26) 0%, transparent 58%);
}
.theme-youth .eyebrow { color: var(--theme-accent-2); }
.theme-youth .hero__title .accent { color: #ff5fae; }
/* 텍스트형 카드에만 왼쪽 강조선.
   ※ 사진형 카드(.feature-card--media)는 제외합니다 — 사진이 카드를 꽉 채우기 때문에
     강조선이 사진 옆에 띠처럼 걸쳐 보이고, 좌우 테두리 두께도 어긋납니다(3px vs 1px). */
.theme-youth .feature-card:not(.feature-card--media) {
  border-left: 3px solid var(--theme-accent);
}
.theme-youth .anchor-tab { border-radius: 6px; }

/* ===================================================================
   유아 — 부드러움 · 친근 · 안전 · 놀이 · 보호자 신뢰
   핑크 주색 + 스카이블루 보조. 라운드를 크게 키워 둥근 UI.
   =================================================================== */
.theme-kids {
  --theme-accent:     #d4187a;   /* 배경 위 글자 대비 확보를 위해 브랜드 핑크를 한 단계 낮춤 */
  --theme-accent-2:   #7fc9ef;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #fdeef5;
  --radius-card:      26px;
  --radius-sm:        14px;      /* 폼/뱃지까지 둥글게 */
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(40, 18, 34, .16) 0%, rgba(40, 18, 34, .48) 54%, rgba(32, 14, 28, .84) 100%),
    radial-gradient(ellipse at 74% 26%, rgba(255, 190, 220, .30) 0%, transparent 60%);
}
.theme-kids .eyebrow { color: #ffd9ec; }
.theme-kids .hero__title .accent { color: #ffd9ec; }
/* 둥근 톤 유지 */
.theme-kids .input,
.theme-kids .select,
.theme-kids .textarea { border-radius: 14px; }
.theme-kids .feature-card__ic,
.theme-kids .nearby-card__ic,
.theme-kids .contact-list__ic,
.theme-kids .download-item__ic { border-radius: 50%; }
.theme-kids .section--soft { background: #fdf7f9; }

/* ===================================================================
   성인 — 세련 · Team Building · Corporate · Premium
   색을 절제. 잉크/다크를 주색으로 쓰고 블루는 포인트로만.
   라운드를 가장 작게 가져가 단정한 인상.
   =================================================================== */
.theme-adult {
  --theme-accent:     #171428;
  --theme-accent-2:   #4aa3d8;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #f2f2f5;
  --radius-card:      6px;
  --radius-sm:        4px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(8, 8, 14, .40) 0%, rgba(8, 8, 14, .70) 50%, rgba(6, 6, 12, .94) 100%),
    radial-gradient(ellipse at 80% 30%, rgba(3, 122, 184, .22) 0%, transparent 62%);
}
.theme-adult .eyebrow { color: var(--theme-accent-2); }
.theme-adult .hero__title .accent { color: var(--theme-accent-2); }
/* 절제된 인상 — 카드 그림자 대신 라인 강조 */
.theme-adult .program-card:hover,
.theme-adult .feature-card:hover,
.theme-adult .facility-card:hover {
  box-shadow: none;
  border-color: var(--color-text);
  transform: translateY(-3px);
}
.theme-adult .btn { border-radius: 4px; }
.theme-adult .anchor-tab { border-radius: 4px; }
.theme-adult .badge { border-radius: 4px; }
/* 성인 페이지 강조 수치는 블루로 (다크 accent 위 가독) */
.theme-adult .price-table__now { color: var(--color-primary); }
.theme-adult .process__no { color: var(--color-primary); }
.theme-adult .timeline__time { color: var(--color-primary); }

/* ===================================================================
   제휴 · 대관 — 브랜드 · 협업 · 비즈니스
   브랜드 3색 중 아직 주색으로 쓰지 않은 옐로 계열을 씁니다.
   (옐로는 흰 글자 대비가 나오지 않아 --yellow-deep 값을 accent 로 사용)
   =================================================================== */
.theme-partner {
  --theme-accent:     #c2890c;
  --theme-accent-2:   #f7b924;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #fdf4e0;
  --radius-card:      10px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(28, 18, 4, .34) 0%, rgba(24, 16, 4, .62) 52%, rgba(20, 14, 4, .90) 100%),
    radial-gradient(ellipse at 80% 26%, rgba(247, 185, 36, .26) 0%, transparent 60%);
}
.theme-partner .eyebrow { color: var(--theme-accent-2); }
.theme-partner .hero__title .accent { color: var(--theme-accent-2); }

/* ===================================================================
   메인 — 브랜드 3색을 모두 쓰는 중립 테마
   특정 대상에 치우치지 않도록 JUMP 블루를 기본 accent 로 둡니다.
   =================================================================== */
.theme-main {
  --theme-accent:     #037ab8;
  --theme-accent-2:   #f7b924;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #eaf5fb;
  --radius-card:      14px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(8, 10, 24, .34) 0%, rgba(8, 10, 24, .60) 48%, rgba(6, 8, 20, .92) 100%),
    radial-gradient(ellipse at 18% 24%, rgba(233, 34, 133, .24) 0%, transparent 56%),
    radial-gradient(ellipse at 84% 70%, rgba(3, 122, 184, .28) 0%, transparent 58%);
}
.theme-main .hero__title .accent { color: var(--color-accent); }

/* ===================================================================
   예약 — 폼 집중. 중립적이고 신뢰감 있는 블루.
   =================================================================== */
.theme-reservation {
  --theme-accent:     #037ab8;
  --theme-accent-2:   #f7b924;
  --theme-accent-ink: #ffffff;
  --theme-tint:       #eaf5fb;
  --radius-card:      14px;
  --theme-hero-overlay:
    linear-gradient(180deg, rgba(8, 10, 24, .46) 0%, rgba(8, 10, 24, .74) 60%, rgba(6, 8, 20, .92) 100%);
}

/* ===================================================================
   대상별 존 컬러 — 메인 카드 태그에 사용
   program-card 에 style="--zc:..." 대신 클래스로도 지정 가능
   =================================================================== */
.zc-elementary { --zc: #037ab8; }
.zc-youth      { --zc: #7a1fe0; }
.zc-kids       { --zc: #d4187a; }
.zc-adult      { --zc: #171428; }

/* 시설 존 컬러 (운영 tokens.css 동일)
   ※ zone-kids / zone-food / zone-rc 는 현재 페이지에서 미사용입니다.
     운영 사이트의 6개 존 세트를 온전히 옮겨 두어, 키즈·푸드·RC 플레이존
     콘텐츠를 추가할 때 바로 쓸 수 있도록 남깁니다. */
.zone-ride   { --zc: #d19b17; }  /* --z-ride 를 흰 글자 대비에 맞춰 진하게 */
.zone-adv    { --zc: #2b8cc4; }  /* --z-adv  동일 목적 */
.zone-surv   { --zc: #8b2afa; }
.zone-arcade { --zc: #6f9636; }  /* --z-arcade 동일 목적 */
.zone-kids   { --zc: #c58a86; }  /* --z-kids  동일 목적 */
.zone-food   { --zc: #a8a80f; }  /* --z-food  동일 목적 */
.zone-rc     { --zc: #3b4ad9; }