/* ============================================================
   혜담논술교습소 — 헤더 리브랜딩 오버라이드
   (yonsei-theme.css 뒤에 로드되어 우선 적용)
   ============================================================ */

/* ── 상단 헤더 배경: #0d568f ───────────────────────────── */
/* 상단 헤더: 배경 이미지를 60% 블루 베일과 함께 표시(헤더+히어로 연속 정렬은 fixed로) */
.site-header{
  background:#000000 !important;   /* 폴백 (검정 미리보기) */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 2px 12px rgba(0,0,0,.18) !important;
}
@media (min-width:769px){
  .site-header:not(.scrolled){
    background:
      linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
      url('/data/uploads/yonsei/hero_bg.jpg') center center / cover fixed !important;
  }
}
/* 스크롤하면 솔리드 (검정 미리보기) */
.site-header.scrolled{ background:rgba(0,0,0,.6) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(0,0,0,.22) !important; }
/* 내부 영역 흰 배경 제거 → 파란 헤더가 비치도록 */
.header-inner,
.primary-nav,
.header-actions,
.lang-switcher-flags{ background:transparent !important; }
/* 헤더 최상단 흰색 라인 제거 */
.site-header::before{ background:transparent !important; }

/* ── 로고 크기 축소 (전체 분위기에 맞게 슬림하게) ── */
.site-header .logo-block img.logo-img{ height:46px !important; }
.site-header .header-inner{ min-height:64px !important; }
@media (max-width:768px){ .site-header .logo-block img.logo-img{ height:40px !important; } }
@media (max-width:420px){ .site-header .logo-block img.logo-img{ height:34px !important; } }

/* ── 데스크톱 대메뉴: 흰색 글자 ───────────────────────── */
@media (min-width:769px){
  .primary-nav .nav-link,
  .primary-nav .nav-link-has-sub,
  .primary-nav .nav-caret{ color:#ffffff !important; }
  .primary-nav .nav-link:hover{ color:#ffffff !important; }
  /* 호버 밑줄은 골드 포인트 */
  .primary-nav .nav-link::after{ background:#ffd24d !important; }

  /* 블로그 버튼 — 파란 헤더 위에서 잘 보이도록 흰 배경 + 파란 글자 */
  .nav-blog-btn{
    background:#ffffff !important;
    color:#0d568f !important;
    box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
  }
  .nav-blog-btn:hover{ background:#eaf3fb !important; color:#0b4677 !important; }
  .nav-blog-btn .nbb-ic{ filter:none; }
}

/* ── 드롭다운 서브메뉴는 흰 패널 유지 → 글자 어둡게(가독성) ── */
.nav-sub{ background:#ffffff !important; }
.nav-sub a{ color:#1f2937 !important; }
.nav-sub a:hover{ color:#0d568f !important; }

/* ── 언어 영역 ─────────────────────────────────────────── */
/* 769~1500px 컴팩트 트리거 — 파란 헤더 위 흰색 */
.lang-trigger{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#ffffff !important;
}
.lang-trigger .lang-trigger-code,
.lang-trigger .lang-trigger-caret{ color:#ffffff !important; }
/* 국기 칩은 흰색 유지(파란 헤더 위에서 또렷) */
/* 국기 아래 영문 코드(KR, EN …) 10px로 축소 */
.lang-flag-code, .lang-trigger-code{ font-size:10px !important; }

/* ── 모바일 햄버거 3색선: 흰 박스 위에서 또렷하게 (네이비) ───── */
@media (max-width:1024px){
  .nav-toggle span{ background:#0d568f !important; }
}
/* ── 모바일(≤768px) 헤더·CTA 보정 ─────────────────────── */
@media (max-width:768px){
  /* 로고: 아이콘+타이틀 한 줄, 잘림 없이 전체 표시 */
  .logo-block{ max-width:none !important; overflow:visible !important; flex:0 1 auto !important; }
  .logo-img{ height:auto !important; max-height:42px !important; width:auto !important; max-width:62vw !important; }
  /* 하단 CTA: 전화 단일 버튼 풀폭 + 번호 강조 */
  .mobile-cta-bar{ grid-template-columns:1fr !important; }
  .mcta-call{ border-right:none !important; }
  .mcta-call .mcta-text{ display:flex !important; align-items:center; gap:8px; }
  .mcta-call .mcta-text, .mcta-call .mcta-label{ color:#fff !important; font-size:15px; }
  .mcta-call .mcta-text strong{ color:#fff !important; font-size:22px !important; letter-spacing:.5px; }
}
/* 모바일 슬라이드 패널(≤768px)은 흰 배경 유지 → 링크는 기본(어두운) 색,
   블로그 버튼도 기본 네이비 그라데이션 유지(흰 패널에서 또렷) */
@media (max-width:768px){
  .primary-nav{ background:#ffffff !important; }
}

/* ── 히어로 배경: 혜담 교실 사진 (헤더와 연속 정렬: fixed) ── */
.hero .hero-bg .hero-img{ display:none !important; }
.hero .hero-bg{
  background:url('/data/uploads/yonsei/hero_bg.jpg') center center / cover fixed !important;
}
/* 모바일은 fixed 비신뢰 → 일반 스크롤 커버 + 헤더는 솔리드 파란색 */
@media (max-width:768px){
  .hero .hero-bg{ background:url('/data/uploads/yonsei/hero_bg.jpg') center center / cover scroll !important; }
}

/* ── '검증된 실력' 섹션: 인증서 이미지 → 텍스트 실적 카드 ── */
.hx-certs .hx-cert-text{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:34px 18px; min-height:148px; margin:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px; text-align:center;
}
.hx-certs .hx-cert-text strong{ font-size:23px; color:#fbbf24; line-height:1.2; }
.hx-certs .hx-cert-text figcaption{ color:#e5e7eb; font-size:15px; }

/* ============================================================
   섹션 2 '약속' — 크리에이티브 리디자인 (원본 템플릿과 차별화)
   ============================================================ */
.section-promises-v2{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(13,86,143,.08), transparent 60%),
    radial-gradient(820px 460px at 102% -6%, rgba(251,191,36,.12), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#eef3f9 100%) !important;
}
/* 은은한 데코 라인 */
.section-promises-v2::before{
  content:''; position:absolute; right:-120px; top:40px; width:360px; height:360px;
  border:2px dashed rgba(13,86,143,.10); border-radius:50%; z-index:0;
}
.section-promises-v2 .container{ position:relative; z-index:1; }

/* 카드 공통 — 호버 시 부드러운 리프트 */
.promises-v2-grid .promise-v2{
  border-radius:24px !important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s !important;
}
.promises-v2-grid .promise-v2::before{ display:none !important; } /* 기존 원형 데코 제거 */

/* ── 큰 피처 카드(01): 딥블루 + 골드 글로우 ── */
.promise-v2.promise-v2-hero{
  background:linear-gradient(152deg,#0d568f 0%,#0b4577 52%,#082f4e 100%) !important;
  border:none !important; color:#e9f1fb !important;
  box-shadow:0 34px 66px -22px rgba(8,47,78,.6) !important;
  position:relative; overflow:hidden;
}
.promise-v2.promise-v2-hero::after{
  content:''; position:absolute; width:340px; height:340px; right:-120px; bottom:-140px;
  background:radial-gradient(circle, rgba(255,210,77,.28), transparent 70%); z-index:0;
}
.promise-v2-hero > *{ position:relative; z-index:1; }
.promise-v2-hero .promise-v2-num{ color:#ffd24d !important; }
.promise-v2-hero .promise-v2-num::before{ background:#ffd24d !important; }
.promise-v2-hero .promise-v2-title-hero{ color:#ffffff !important; }
.promise-v2-hero .promise-v2-tagline{ color:#c9ddf2 !important; }
.promise-v2-hero .promise-v2-tagline em{ color:#ffd24d !important; font-style:normal; }
.promise-v2-hero .promise-v2-bullets li{ color:#eaf2fb !important; border-color:rgba(255,255,255,.12) !important; }
.promise-v2-hero .bul-icon{ background:rgba(255,255,255,.12) !important; border-radius:10px; }
.promise-v2-hero .promise-v2-tag{
  background:rgba(255,210,77,.16) !important; color:#ffd24d !important;
  border:1px solid rgba(255,210,77,.42) !important;
}
.promise-v2.promise-v2-hero:hover{ transform:translateY(-6px) !important; box-shadow:0 42px 80px -24px rgba(8,47,78,.7) !important; }

/* ── 작은 카드(02–05): 대형 고스트 넘버 + 상단 그라데이션 바 ── */
.promises-v2-grid .promise-v2:not(.promise-v2-hero){
  background:#ffffff !important;
  border:1px solid #e7edf5 !important;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
  overflow:hidden; padding-top:30px !important;
}
.promises-v2-grid .promise-v2:not(.promise-v2-hero)::after{
  content:''; position:absolute; left:0; top:0; right:0; height:5px; z-index:2;
  background:linear-gradient(90deg, var(--accent) 0%, #0d568f 100%);
  display:block !important;
}
.promise-v2-c2{ --accent:#2b8ad1 !important; }
.promise-v2-c3{ --accent:#0ea5a0 !important; }
.promise-v2-c4{ --accent:#f59e0b !important; }
.promise-v2-c5{ --accent:#6d6ef0 !important; }
.promises-v2-grid .promise-v2:not(.promise-v2-hero):hover{
  transform:translateY(-8px) !important;
  border-color:var(--accent) !important;
  box-shadow:0 26px 52px rgba(15,23,42,.13) !important;
}
/* 큰 고스트 번호 — 우측 상단 배경 */
.promises-v2-grid .promise-v2:not(.promise-v2-hero) .promise-v2-num{
  position:absolute !important; top:10px; right:24px; z-index:0;
  font-size:72px !important; line-height:1; font-weight:800 !important;
  color:var(--accent) !important; opacity:.10 !important; letter-spacing:-2px;
}
.promises-v2-grid .promise-v2:not(.promise-v2-hero) .promise-v2-num::before{ display:none !important; }
/* 아이콘 칩 — 카드별 컬러 */
.promises-v2-grid .promise-v2:not(.promise-v2-hero) .promise-v2-icon{
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0d568f)) !important;
  border-radius:16px !important; box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.promises-v2-grid .promise-v2:not(.promise-v2-hero):hover .promise-v2-icon{ transform:scale(1.08) rotate(-5deg); }
.promises-v2-grid .promise-v2:not(.promise-v2-hero) h3{ color:#0f2540 !important; }

/* ============================================================
   섹션 3+ 전체 — 같은 디자인 언어(딥블루+골드+그라데이션 액센트)
   ============================================================ */

/* ── 수강 과정 카드(hxp) : 상단 그라데이션 바 + 리프트 ── */
.hx-prog .hxp{
  position:relative; overflow:hidden;
  background:#fff !important; border:1px solid #e7edf5 !important;
  border-radius:22px !important; padding-top:32px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s !important;
}
.hx-prog .hxp::before{
  content:''; position:absolute; left:0; top:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--c, #0d568f), #0d568f);
}
.hx-prog .hxp:hover{ transform:translateY(-8px); border-color:var(--c, #0d568f) !important; box-shadow:0 26px 52px rgba(15,23,42,.13) !important; }
.hx-prog .hxp-price{ color:var(--c, #0d568f) !important; font-weight:800 !important; }

/* ── 검증된 실력(hx-ach) : 짙은 남색 (트로피 배경 제거) ── */
.section.hx-ach{
  background-color:#0b1a33 !important;
  background-image:
    radial-gradient(900px 520px at 88% -14%, rgba(255,210,77,.12), transparent 62%),
    radial-gradient(700px 460px at 6% 110%, rgba(43,138,209,.16), transparent 60%),
    linear-gradient(135deg,#0a1326 0%,#13284e 58%,#0c2046 100%) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  position:relative; overflow:hidden;
}
.section.hx-ach .hx-stat{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important; padding:26px 16px !important;
  transition:transform .3s, background .3s !important;
}
.section.hx-ach .hx-stat:hover{ transform:translateY(-6px); background:rgba(255,255,255,.11) !important; }
.section.hx-ach .hx-stat strong{ color:#ffd24d !important; }
.section.hx-ach .hx-stat span{ color:#cfe0f2 !important; }

/* ── 소식·이벤트 카드(hxn) ── */
.hx-news .hxn{
  background:#fff !important; border:1px solid #e7edf5 !important;
  border-radius:22px !important; overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s !important;
}
.hx-news .hxn:hover{ transform:translateY(-8px); box-shadow:0 28px 54px rgba(15,23,42,.15) !important; }
.hx-news .hxn-img{ position:relative; }
.hx-news .hxn-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(8,47,78,.5)); }
.hx-news .hxn-tag{ position:relative; z-index:2; box-shadow:0 6px 14px rgba(0,0,0,.22); }
.hx-news .hxn-body h3{ color:#0f2540 !important; }

/* ── 갤러리 : 줌 호버 + 진한 캡션 ── */
.section-gallery .gallery-item{ border-radius:20px !important; overflow:hidden; box-shadow:0 14px 34px rgba(15,23,42,.08); }
.section-gallery .gallery-item img{ transition:transform .55s cubic-bezier(.2,.7,.2,1) !important; }
.section-gallery .gallery-item:hover img{ transform:scale(1.07); }
.section-gallery .gallery-caption{ background:linear-gradient(180deg, transparent, rgba(8,47,78,.82)) !important; }

/* ── 원장 소개(director-v2) ── */
.section-director-v2{
  background:
    radial-gradient(900px 480px at 100% 0, rgba(13,86,143,.07), transparent 55%),
    linear-gradient(180deg,#f4f7fb 0%,#ffffff 100%) !important;
}
.director-v2-photo-wrap{
  border-radius:24px !important; overflow:hidden; border:6px solid #fff !important;
  box-shadow:0 32px 64px -22px rgba(8,47,78,.5) !important;
}
.director-creds .dcred{
  background:#ffffff !important; border:1.5px solid #0d568f !important;
  border-radius:999px !important; color:#0f2540 !important;
  box-shadow:0 6px 16px rgba(13,86,143,.10) !important;
}
.director-mini-card{
  background:#fff !important; border:1px solid #e7edf5 !important;
  border-left:4px solid #0d568f !important; border-radius:18px !important;
  transition:transform .3s, box-shadow .3s !important;
}
.director-mini-card:hover{ transform:translateY(-5px); box-shadow:0 22px 42px rgba(15,23,42,.1) !important; }
.director-quote{ border-left:4px solid #ffd24d !important; }

/* ── 오시는 길(location) ── */
.section-location .location-map iframe{ border-radius:18px !important; box-shadow:0 18px 40px rgba(15,23,42,.1); }

/* ============================================================
   5단계 섹션 — 3+2 그리드(1·2·3 / 4·5) + 교재 사진 배경 (움직이는 SVG 유지)
   ============================================================ */
.section-flow-v2{
  background-color:#0a1228 !important;
  background-image:
    radial-gradient(900px 620px at 10% -12%, rgba(212,160,23,.12), transparent 60%),
    radial-gradient(820px 640px at 92% 112%, rgba(59,130,246,.17), transparent 60%),
    linear-gradient(165deg,#0a1228 0%,#101c3c 52%,#0b1730 100%) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* 움직이는 SVG 흐름선 + orb 강화 (사진 배경 제거 후 세련된 느낌) */
.section-flow-v2 .flow-orb{ opacity:.55 !important; }
.section-flow-v2 .flow-bg-lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; z-index:0; }
.section-flow-v2 .flow-bg-lines .fln{ stroke-dasharray:14 20; animation:flnFlow 7s linear infinite; }
.section-flow-v2 .flow-bg-lines .fln2{ animation-duration:10s; animation-delay:-3s; }
.section-flow-v2 .flow-bg-lines .fln3{ animation-duration:13s; animation-delay:-6s; }
@keyframes flnFlow{ to{ stroke-dashoffset:-136; } }
/* 3 + 2 그리드 (5장이 줄바꿈되어 3·2로 배치) */
.section-flow-v2 .flow-v2-grid{
  display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
  align-items:stretch; gap:20px 18px !important;
  max-width:1040px; margin:8px auto 0 !important; padding:0 !important;
}
.section-flow-v2 .flow-v2-grid::before{ display:none !important; }
.section-flow-v2 .flow-arrow-v2{ display:none !important; }

/* 스텝 카드 — 유리 + 글로우 */
.section-flow-v2 .flow-card-v2{
  position:relative !important; margin:0 !important;
  flex:0 0 calc(33.333% - 12px) !important; max-width:calc(33.333% - 12px) !important; width:calc(33.333% - 12px) !important;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:20px !important;
  padding:26px 24px !important; text-align:center;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:0 22px 46px -16px rgba(0,0,0,.5) !important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s !important;
}
.section-flow-v2 .flow-card-v2:hover{
  transform:translateY(-8px) !important; border-color:var(--accent) !important;
  box-shadow:0 30px 58px -16px var(--glow) !important;
}
.section-flow-v2 .flow-card-v2::after{ display:none !important; }

/* 번호 · 아이콘 칩 · 텍스트 */
.section-flow-v2 .flow-card-num{ font-size:34px !important; opacity:.55 !important; margin-bottom:8px !important; }
.section-flow-v2 .flow-card-icon{
  width:64px !important; height:64px !important; border-radius:18px !important; margin:0 auto 14px !important;
  background:linear-gradient(135deg, var(--accent), var(--accent-d)) !important; color:#fff !important;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 10px 24px var(--glow) !important;
}
.section-flow-v2 .flow-card-icon svg{ width:34px !important; height:34px !important; }
.section-flow-v2 .flow-card-v2 h3{ color:#ffffff !important; }
.section-flow-v2 .flow-card-v2 p{ color:#cdd9ea !important; }

@media (max-width:820px){ .section-flow-v2 .flow-card-v2{ flex-basis:calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; width:calc(50% - 10px) !important; } }
@media (max-width:520px){ .section-flow-v2 .flow-card-v2{ flex-basis:100% !important; max-width:100% !important; width:100% !important; } }

/* ── 수강 과정 섹션: 밝은 손글씨 학습노트 배경 ── */
.section-courses{
  background-color:#faf6ef !important;
  background-image:
    linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.86)),
    url('/data/uploads/yonsei/courses_bg.jpg?v=1') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
