/* ==========================================================================
   NobleHR 공통 브랜드 스타일 (2026-11 디자인 보강)

   모든 페이지에서 "마지막에" 불러옵니다(fragments/head.html). 페이지마다 따로 만들어져
   히어로 색·제목 크기·버튼 색이 제각각이던 것을 한 곳에서 맞추기 위한 파일입니다.

   기준은 개편 페이지의 스타일(css/pages/story.css)입니다.
   - 히어로와 마무리 구역: 네이비 그라데이션, 강조는 골드
   - 제목: Pretendard 800, 가운데 정렬, 같은 크기 단계
   - 버튼: 네이비 또는 골드 (보라·노랑은 쓰지 않습니다)
   - 한글은 단어 중간에서 줄이 바뀌지 않게 합니다

   개편 페이지(st- 클래스)는 story.css 가 맡고, 여기서는 예전 페이지의 클래스만 다룹니다.
   ========================================================================== */

:root {
  --bd-navy: #0e2044;
  --bd-navy-2: #1e3a5f;
  --bd-gold: #c8a865;
  --bd-gold-light: #d9bc7f;
  --bd-gold-soft: #fbf4e2;
  --bd-sky: #1f7fb8;
  --bd-sky-soft: #e6f3fb;
  --bd-text: #3b4656;
  --bd-muted: #5b6676;
  --bd-line: #dbe2ec;
  --bd-bg: #f4f7fb;
  --bd-shadow-sm: 0 1px 2px rgba(14, 32, 68, 0.05), 0 8px 20px -12px rgba(14, 32, 68, 0.18);
  --bd-shadow-md: 0 2px 6px rgba(14, 32, 68, 0.06), 0 22px 44px -20px rgba(14, 32, 68, 0.32);
  --bd-hero: radial-gradient(900px 420px at 88% -8%, rgba(93, 173, 226, 0.28), transparent 62%),
    radial-gradient(700px 380px at 0% 110%, rgba(200, 168, 101, 0.16), transparent 60%),
    linear-gradient(135deg, #0e2044 0%, #1e3a5f 100%);
  --bd-cta: radial-gradient(700px 320px at 50% -20%, rgba(200, 168, 101, 0.28), transparent 65%),
    linear-gradient(135deg, #0e2044 0%, #1e3a5f 100%);
}

/* ---------- 글자 ---------- */
body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary, 'Pretendard', 'Noto Sans KR', sans-serif); letter-spacing: -0.02em; }

/* ---------- 상단 메뉴의 체험 버튼 ---------- */
.navbar-actions .btn-primary { background: var(--bd-navy); border-color: var(--bd-navy); color: #fff; border-radius: 10px; font-weight: 700; }
.navbar-actions .btn-primary:hover { background: var(--bd-navy-2); border-color: var(--bd-navy-2); }

/* ---------- 예전 페이지의 히어로 ---------- */
.features-hero, .pricing-hero, .cases-hero, .case-detail-hero, .legal-header, .page-header {
  background: var(--bd-hero); color: #fff; text-align: center; padding: 4.5rem 0 4.75rem; position: relative; overflow: hidden; }
/* 배경 사진·움직이는 원과 선은 페이지마다 달라 보이게 하므로 끕니다 */
.features-hero::before, .features-hero::after, .pricing-hero::before, .pricing-hero::after,
.cases-hero::before, .cases-hero::after, .case-detail-hero::before, .case-detail-hero::after { display: none; }
.features-hero .circle-bg, .features-hero .line-bg, .pricing-hero .circle-bg, .pricing-hero .line-bg,
.cases-hero .circle-bg, .cases-hero .line-bg, .case-detail-hero .circle-bg, .case-detail-hero .line-bg { display: none; }

.features-hero h1, .pricing-hero h1, .cases-hero h1, .case-detail-hero h1, .legal-header h1, .page-header h1 {
  color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.03em;
  max-width: 20em; margin: 0 auto 1rem; text-wrap: balance; text-shadow: none; }
.features-hero .gradient-text, .cases-hero .text-highlight, .pricing-hero .hero-hl {
  color: var(--bd-gold-light); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
.features-hero .hero-subtitle, .pricing-hero .hero-subtitle, .cases-hero .hero-subtitle, .cases-hero p,
.case-detail-hero p, .legal-header p, .page-header p {
  color: rgba(255, 255, 255, 0.88); font-size: 1.15rem; line-height: 1.75; max-width: 40em; margin-left: auto; margin-right: auto; opacity: 1; }
.features-hero .hero-badge, .pricing-hero .hero-badge, .cases-hero .hero-badge, .case-detail-hero .hero-badge {
  display: inline-block; background: rgba(200, 168, 101, 0.14); border: 1px solid rgba(200, 168, 101, 0.45); color: var(--bd-gold);
  font-size: 0.88rem; font-weight: 800; padding: 0.3rem 0.9rem; border-radius: 999px; margin-bottom: 1.25rem; backdrop-filter: none; }

/* 문의하기처럼 제목만 있던 머리 구역 */
.page-header .page-title { margin-bottom: 0.75rem; }
.page-header .page-subtitle { margin-bottom: 0; }

/* ---------- 페이지 바탕 ---------- */
.features-section, .plan-legend-section { background: var(--bd-bg); }

/* ---------- 문의하기 ---------- */
.contact-section { padding: 4rem 0 5rem; background: var(--bd-bg); }
.contact-form-wrapper, .contact-card { border: 1px solid var(--bd-line); border-radius: 16px; box-shadow: var(--bd-shadow-sm); }
.contact-form-wrapper h2 { font-weight: 800; color: var(--bd-navy); }
.contact-card h3 { color: var(--bd-navy); font-weight: 800; }
.contact-icon { background: var(--bd-sky-soft); color: var(--bd-sky); }
.contact-section a:not(.btn) { color: var(--bd-sky); font-weight: 700; }

/* ---------- 구역 제목 ---------- */
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.28; color: var(--bd-navy); text-wrap: balance; }

/* ---------- 버튼 ---------- */
.btn-primary { background: var(--bd-navy); border-color: var(--bd-navy); color: #fff; }
.btn-primary:hover { background: var(--bd-navy-2); border-color: var(--bd-navy-2); color: #fff; }

/* ---------- 마무리 구역(체험 안내) ---------- */
.final-cta, .pricing-cta-section, .cta-section {
  background: var(--bd-cta); color: #fff; text-align: center; padding: 5.5rem 0; }
.final-cta .cta-box, .cta-section .cta-content, .pricing-cta-section .cta-content { background: none; box-shadow: none; border: 0; }
.final-cta h2, .pricing-cta-section h2, .cta-section h2 {
  color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.28; text-wrap: balance; }
.final-cta p, .pricing-cta-section p, .cta-section p { color: rgba(255, 255, 255, 0.88); }
.final-cta .btn, .final-cta .btn-primary, .final-cta .btn-white,
.pricing-cta-section .btn-white, .cta-section .btn-primary, .cta-section .btn-white {
  background: var(--bd-gold); border-color: var(--bd-gold); color: var(--bd-navy); font-weight: 800; border-radius: 12px;
  box-shadow: 0 12px 26px -12px rgba(200, 168, 101, 0.9); }
.final-cta .btn:hover, .pricing-cta-section .btn-white:hover, .cta-section .btn-primary:hover, .cta-section .btn-white:hover {
  background: var(--bd-gold-light); border-color: var(--bd-gold-light); color: var(--bd-navy); transform: translateY(-2px); }
.cta-section .btn-outline-white { border: 2px solid rgba(255, 255, 255, 0.7); color: #fff; background: transparent; border-radius: 12px; font-weight: 800; }

/* 푸터 위의 빈 띠를 없앱니다 (마무리 구역이 푸터와 붙도록). 간격이 필요한 페이지는 마지막 구역의 아래 여백으로 줍니다. */
.footer { margin-top: 0; }
.legal-section { padding-bottom: 5rem; }