/* ============================================================
   INAUS ACADEMY — Shared Stylesheet
   공통 스타일: 변수·리셋·레이아웃·헤더·푸터·모바일드로어·
               메가메뉴·플로팅버튼·페이드 애니메이션
   ============================================================ */

/* ===== CSS 커스텀 변수 (디자인 토큰) =====
   CSS 변수(--variable)로 색상·전환효과를 한 곳에서 관리합니다.
   나중에 색상을 바꾸고 싶을 때 이곳 값만 수정하면
   사이트 전체에 자동 반영됩니다.
   -----------------------------------------------
   색상 계열:
     --black / --dark / --dark-gray  : 배경·텍스트 어두운 계열
     --gray-900 ~ --gray-100         : 9단계 회색 스케일 (숫자가 클수록 어두움)
     --white                         : 순백색
     --accent                        : 브랜드 주조색 (주황-빨강 계열)
     --accent-hover                  : 버튼 hover 시 조금 더 어두운 주조색
     --accent-soft                   : 주조색 8% 반투명 (배경 강조용)
     --green / --blue                : 상태 표시용 보조색
     --error / --success             : 폼 유효성 검사 피드백 색상
   전환효과:
     --transition      : 기본 전환 (0.4s, 부드러운 ease 곡선)
     --transition-fast : 빠른 전환 (0.25s, 단순 ease)
   ============================================================ */
:root {
    --black: #0A0A0A;
    --dark: #141414;
    --dark-gray: #1A1A1A;
    --gray-900: #222222;
    --gray-800: #333333;
    --gray-700: #444444;
    --gray-600: #666666;
    --gray-500: #888888;
    --gray-400: #AAAAAA;
    --gray-300: #CCCCCC;
    --gray-200: #E5E5E5;
    --gray-100: #F2F2F2;
    --white: #FFFFFF;
    --accent: #E8613C;
    --accent-hover: #D4522F;
    --accent-soft: rgba(232, 97, 60, 0.08);
    --green: #2E7D32;
    --green-soft: rgba(46, 125, 50, 0.1);
    --blue: #1565C0;
    --blue-soft: rgba(21, 101, 192, 0.1);
    --error: #E53935;
    --success: #2E7D32;
    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: all 0.25s ease;
}

/* ===== 리셋 & 기본 스타일 =====
   브라우저마다 기본값이 다른 margin/padding을 0으로 초기화합니다.
   box-sizing: border-box → width/height 계산 시 padding과 border를
     포함시켜, 레이아웃 계산이 직관적으로 됩니다.
   scroll-behavior: smooth → 페이지 내 앵커(#) 이동 시 부드럽게 스크롤합니다.
   overflow-x: hidden → 가로 스크롤바가 생기지 않도록 방지합니다.
   -webkit-font-smoothing: antialiased → macOS/iOS에서 폰트를 더 선명하게 렌더링합니다.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* shared.js가 전화번호 텍스트를 자동으로 감싸는 tel: 링크 — 원래 텍스트 스타일 그대로 유지 */
.tel-link { color: inherit; text-decoration: inherit; font: inherit; cursor: pointer; }
/* overflow-x: hidden 대신 clip을 사용합니다 — hidden은 overflow-y가 자동으로
   'auto'로 계산되게 만들어 html/body가 별도의 스크롤 컨테이너가 되어버리고,
   그 영향으로 하위 요소의 position: sticky가 동작하지 않게 됩니다(예: 과정 상세
   페이지의 탭 바). clip은 스크롤 컨테이너를 만들지 않으면서 가로 스크롤바만 방지합니다. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--black);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    max-width: 100vw;
}

/* ===== 레이아웃 컨테이너 =====
   .container : 콘텐츠를 최대 1320px 너비로 제한하고,
     margin: 0 auto 로 화면 가운데에 정렬합니다.
     좌우 padding 40px으로 콘텐츠가 화면 끝에 붙지 않도록 합니다.
     (모바일에서는 @media 블록에서 20px으로 줄어듭니다.)
   ============================================================ */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ===== 헤더 구조 =====
   position: fixed → 스크롤해도 화면 최상단에 항상 고정됩니다.
   z-index: 1000   → 다른 콘텐츠 위에 겹쳐 보이도록 우선순위를 높입니다.
   flex-direction: column → 상단 바(로고+검색+유틸)와 하단 nav를 세로로 쌓습니다.
   clamp(최솟값, 기본값, 최댓값) → 화면 너비에 따라 패딩이 16px~60px 사이에서
     자동으로 조절됩니다 (반응형 여백).
   .header-search : flex: 1 로 남은 공간을 차지하되, 480px 이상은 늘어나지 않습니다.
   ============================================================ */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; flex-direction: column; transition: var(--transition); }
.header-inner { max-width: 1320px; margin: 0 auto; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 clamp(16px, 3vw, 60px); }
.header-top { height: 72px; display: flex; align-items: center; padding: 0 clamp(16px, 3vw, 60px); }
.header-search { flex: 1; min-width: 180px; max-width: 480px; margin: 0 clamp(16px, 2vw, 40px); }

/* ===== 상단 패밀리사이트 바 (header-topbar) =====
   .header-top(로고 줄)과 동일하게 max-width 센터링 없이 padding만 써서
   좌측 정렬을 맞춘다(로고와 항상 같은 X좌표에서 시작).
   ============================================================ */
.header-topbar { height: 34px; display: flex; align-items: center; gap: 24px; width: 100%; padding: 0 clamp(16px, 3vw, 60px); border-bottom: 1px solid rgba(255,255,255,0.08); transition: var(--transition-fast); }
.header.is-scrolled .header-topbar { border-bottom-color: var(--gray-200); }
.topbar-sites { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar-sites a.site-link { text-decoration: none; color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; transition: var(--transition-fast); }
.topbar-sites a.site-link:hover { color: var(--white); }
.header.is-scrolled .topbar-sites a.site-link { color: var(--gray-500); }
.header.is-scrolled .topbar-sites a.site-link:hover { color: var(--black); }
.topbar-sites a.site-link.active { color: var(--white); font-weight: 700; }
.header.is-scrolled .topbar-sites a.site-link.active { color: var(--accent); }
@media (max-width: 768px) {
    .header-topbar { display: none; }
}

/* ===== 검색 폼 =====
   초기 상태(헤더가 투명할 때): 반투명 흰색 배경 + 흰색 반투명 테두리 → 히어로 배경과 자연스럽게 어울립니다.
   스크롤 후(.is-scrolled): 밝은 회색 배경으로 전환되어 흰 배경 헤더에서도 잘 보입니다.
   border-radius: 100px → 완전한 알약 모양(pill shape)의 둥근 입력창을 만듭니다.
   overflow: hidden → 내부 버튼이 모서리 밖으로 삐져나오지 않게 합니다.
   ============================================================ */
.search-form { display: flex; align-items: center; height: 40px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; overflow: hidden; transition: var(--transition-fast); }
.header.is-scrolled .search-form { background: var(--gray-100); border-color: var(--gray-200); }
.search-input { flex: 1; background: none; border: none; padding: 0 20px; height: 100%; font-size: 13px; color: var(--white); outline: none; font-family: 'Noto Sans KR', sans-serif; min-width: 0; }
.header.is-scrolled .search-input { color: var(--black); }
.search-input::placeholder { color: rgba(255,255,255,0.35); }
.header.is-scrolled .search-input::placeholder { color: var(--gray-400); }
.search-btn { background: none; border: none; padding: 0 16px; height: 100%; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 14px; transition: color 0.2s; flex-shrink: 0; }
.header.is-scrolled .search-btn { color: var(--gray-500); }
.search-btn:hover { color: var(--white); }
.header.is-scrolled .search-btn:hover { color: var(--accent); }

/* ===== 헤더 상태 변환 (투명 ↔ 불투명) =====
   헤더는 두 가지 상태를 가집니다:
     .is-dark    : 페이지 최상단 → 배경 투명. 히어로 이미지 위에 겹쳐 보입니다.
     .is-scrolled: 스크롤 100px 이상 → 흰색 반투명 배경으로 전환.
                   backdrop-filter: blur(20px) → 뒤 콘텐츠가 흐리게 보이는 유리 효과를 줍니다.
   상태 전환은 JavaScript의 initHeaderScroll() 함수가 .is-dark / .is-scrolled
   클래스를 추가·제거하면서 처리합니다.
   아래 규칙들(.is-scrolled ...)은 상태 전환 시 내부 요소(로고, 링크 등)의
   색상도 함께 바꿔 줍니다.
   ============================================================ */
.header.is-dark { background: var(--hh-bg, transparent); }
/* 강좌 상세 페이지 히어로 색상 테마(admin/etc/hero-banner)의 헤더 배경/글자색 —
   --hh-bg/--hh-text 인라인 변수가 없으면 아래 폴백 값으로 기존과 완전히 동일하게 렌더링된다.
   .is-scrolled(스크롤 후 상태)는 건드리지 않는다 — 오늘처럼 항상 표준 흰배경/검정글자. */
.header.is-dark .logo-text  { color: var(--hh-text, var(--white)); }
.header.is-dark .logo-sub   { color: var(--hh-text, rgba(255,255,255,0.5)); }
.header.is-dark .logo-icon  { filter: var(--hh-logo-filter, invert(1)); }
.header.is-dark .header-util a    { color: var(--hh-text, rgba(255,255,255,0.5)); }
.header.is-dark .header-greeting  { color: var(--hh-text, rgba(255,255,255,0.9)); }
.header.is-dark .nav-item > a     { color: var(--hh-text, rgba(255,255,255,0.75)); }
.header.is-dark .mega-btn         { color: var(--hh-text, rgba(255,255,255,0.75)); }
.header.is-dark .mobile-menu-btn  { color: var(--hh-text, #ffffff); }
.header.is-dark .topbar-sites a.site-link { color: var(--hh-text, rgba(255,255,255,0.5)); }
.header.is-dark .search-form  { background: var(--hh-search-bg, rgba(255,255,255,0.1)); border-color: var(--hh-search-border, rgba(255,255,255,0.18)); }
/* 검색창 안의 글자·아이콘은 일부러 --hh-text(헤더 글자색 설정)를 따라가지 않는다 —
   검색창 배경(--hh-search-bg)은 테마가 켜지면 항상 밝은 회색으로 고정되는데, 만약
   글자색까지 헤더 테마를 따라가면(예: 배경 검정+글자 흰색 조합) 밝은 회색 배경 위에
   흰 글자가 얹혀 입력한 글자가 안 보이는 문제가 생긴다(2026-08-29 사용자 신고).
   검색창 배경과 짝을 이루는 별도 --hh-search-text로 항상 읽히도록 고정한다. */
.header.is-dark .search-input { color: var(--hh-search-text, var(--white)); }
.header.is-dark .search-input::placeholder { color: var(--hh-search-placeholder, rgba(255,255,255,0.35)); }
.header.is-dark .search-btn   { color: var(--hh-search-text, rgba(255,255,255,0.5)); }
.header.is-scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--gray-200); }
.header.is-scrolled .logo-text { color: var(--black); }
.header.is-scrolled .logo-sub { color: var(--gray-500); }
.header.is-scrolled .logo-icon { filter: none; }
.header.is-scrolled .nav { border-top-color: var(--gray-200); }
.header.is-scrolled .nav-item > a { color: var(--gray-700); }
.header.is-scrolled .nav-item > a:hover { color: var(--black); }
.header.is-scrolled .nav-item > a.active { color: var(--accent); }
.header.is-scrolled .header-util a { color: var(--gray-600); }
.header.is-scrolled .header-util a:hover { color: var(--black); }

/* ===== 로고 =====
   .logo : 이미지(아이콘)와 텍스트(INAUS + ACADEMY)를 flex로 가로 정렬합니다.
   .logo-icon : filter: invert(1) → 검은 로고 이미지를 흰색으로 반전시켜
     투명 헤더의 어두운 배경 위에서 보이게 합니다.
     스크롤 후(.is-scrolled)에는 filter: none 으로 복원됩니다.
   .logo-sub  : ACADEMY 글자를 낱글자 <span>으로 쪼개고 flex justify-content: space-between
     으로 균등 배분해 INAUS 텍스트 너비와 자동으로 맞춥니다.
     실제 너비 맞춤은 JavaScript의 initLogoSync() 함수가 처리합니다.
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo-texts { display: flex; flex-direction: column; align-items: flex-start; }
.logo-icon { flex-shrink: 0; height: 40px; width: auto; filter: invert(1); transition: filter 0.4s ease; }
.logo-text { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: var(--white); letter-spacing: 3px; line-height: 1.2; }
.logo-sub { font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 500; text-transform: uppercase; color: rgba(255,255,255,0.5); line-height: 1; display: flex; justify-content: space-between; }

/* Header Util */
.header-util { display: flex; align-items: center; gap: 20px; flex-shrink: 0; margin-left: auto; }
.header-util a { text-decoration: none; color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 400; letter-spacing: 0.5px; transition: var(--transition-fast); }
.header-util a:hover { color: var(--white); }

/* ===== 로그인 사용자 인사말 =====
   로그인 상태일 때 header-util 안에 "OO님 반갑습니다." 텍스트로 표시됩니다.
   is-dark(투명 헤더): 흰색 계열 / is-scrolled(스크롤 헤더): gray-700 */
.header-greeting { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); letter-spacing: 0.3px; white-space: nowrap; }
.header.is-scrolled .header-greeting { color: var(--gray-700); }

/* 멤버십 배지 — 인사말 앞에 표시되는 온라인 멤버십 회원 표시 */
.header-member-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    padding: 3px 9px; border-radius: 100px;
    white-space: nowrap;
}
.header-member-badge i { font-size: 11px; }

/* 모바일 드로어 상단 인사말 배너 — accent 소프트 배경으로 로그인 상태 강조 */
.mobile-drawer-welcome { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-bottom: 1px solid rgba(232,97,60,0.15); }
.mobile-member-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--accent);
    color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    padding: 2px 8px; border-radius: 100px;
    vertical-align: middle;
}
.mobile-member-badge i { font-size: 8px; }

/* ===== 사용자 메뉴 호버 드롭다운 =====
   .header-user-menu: 배지+인사말을 감싸는 상대 위치 컨테이너
   .header-user-dropdown: 기본 숨김, hover 시 translateY(0)으로 슬라이드 인
   ============================================================ */
.header-user-menu {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: default;
}
/* 트리거와 드롭다운 사이 간격을 마우스가 지나갈 수 있도록 투명 브리지 생성 */
.header-user-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px; right: -20px;
    height: 18px;
}
.header-user-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 264px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1100;
}
.header-user-menu:hover .header-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* 드롭다운 내부 모든 링크의 흰색 상속 차단 — header-util a 의 color 재정의 */
.header-user-dropdown,
.header-user-dropdown a,
.header.is-scrolled .header-user-dropdown a {
    color: var(--gray-700);
    text-decoration: none;
}
/* 드롭다운 상단 빠른 메뉴 3버튼 */
.hudrop-quick {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--gray-100);
}
.hudrop-quick-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 14px 6px 12px;
    color: var(--gray-700) !important;
    text-decoration: none;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.hudrop-quick-btn:hover { background: var(--accent-soft); color: var(--accent) !important; }
.hudrop-quick-btn i { font-size: 16px; }
.hudrop-logout-btn { color: var(--gray-500) !important; }
.hudrop-logout-btn:hover { color: var(--accent) !important; }
/* 멤버십 정보 행 */
.hudrop-member-info {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    display: flex; flex-direction: column; gap: 6px;
}
.hudrop-member-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--gray-600);
}
.hudrop-member-row strong { color: var(--gray-900); font-weight: 600; }
/* 고객지원 섹션 */
.hudrop-support {
    padding: 14px 16px;
}
.hudrop-support-label {
    font-size: 12px; color: var(--gray-500); margin: 0 0 8px;
}
.hudrop-support-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--gray-800) !important;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hudrop-support-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) !important; }
.hudrop-support-btn i { font-size: 11px; }

/* ===== 헤더 유틸리티 링크 (로그인 / 회원가입 / 마이페이지) =====
   margin-left: auto → 로고와 검색창이 차지하고 남은 오른쪽 공간으로 밀어냅니다.
   flex-shrink: 0     → 화면이 좁아질 때 줄어들지 않습니다.
   모바일에서는 display: none으로 숨기고, 모바일 드로어 안에서 대신 표시됩니다.
   ============================================================ */

/* ===== 데스크탑 내비게이션 바 =====
   헤더의 두 번째 줄에 위치하는 가로 메뉴입니다.
   height: 44px로 고정 높이를 주어 메뉴 항목이 수직 가운데 정렬됩니다.
   border-top: 투명 흰색 → 히어로 배경과 어울리는 미세한 구분선 역할을 합니다.
   모바일(max-width: 768px)에서는 display: none으로 숨겨집니다.
   ============================================================ */
.nav { display: flex; align-items: center; justify-content: center; height: 44px; border-top: 1px solid rgba(255,255,255,0.07); padding: 0 clamp(16px, 3vw, 60px); }
.nav-list { list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; margin: 0; padding: 0; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-item > a { display: flex; align-items: center; text-decoration: none; color: rgba(255,255,255,0.75); font-size: clamp(12px, 1.05vw, 15.5px); font-weight: 500; letter-spacing: clamp(0px, 0.05vw, 1px); padding: 0 clamp(8px, 1.6vw, 30px); height: 44px; transition: var(--transition-fast); text-transform: uppercase; font-family: 'Poppins', 'Noto Sans KR', sans-serif; white-space: nowrap; }
.nav-item > a:hover { color: var(--white); }
.nav-item > a.active { color: var(--accent) !important; }

/* ===== 드롭다운 메뉴 =====
   기본 상태: opacity: 0 + visibility: hidden → 투명하고 클릭도 안 됩니다.
     (display: none 대신 이 방식을 쓰는 이유: transition이 작동하기 때문입니다.
      display: none ↔ block 전환은 애니메이션이 불가합니다.)
   :hover 시: opacity: 1 + visibility: visible + translateY(0) →
     위에서 아래로 나타나는 슬라이드 효과가 만들어집니다.
   left: 50% + translateX(-50%) → 부모 메뉴 항목을 기준으로 가운데 정렬합니다.
   z-index: 1001 → 헤더(1000)보다 위에 렌더링되어 다른 요소 위에 표시됩니다.
   ============================================================ */
.nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); background: #1a1a1a; min-width: 180px; list-style: none; margin: 0; padding: 8px 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 1001; white-space: nowrap; }
.nav-item:hover > .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown li a { display: block; padding: 10px 20px; font-size: 13px; color: rgba(255,255,255,0.75); text-decoration: none; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; transition: color 0.15s, background 0.15s; text-transform: none; letter-spacing: 0; }
.nav-dropdown li a:hover { color: var(--white); background: rgba(255,255,255,0.07); }

/* ===== 햄버거 메가 메뉴 =====
   데스크탑(769px 이상)에서만 보이는 전체 메뉴 패널입니다.
   .mega-btn: nav 바 왼쪽 끝에 고정된 햄버거 버튼입니다.
     - position: absolute + top: 50% + translateY(-50%) → 수직 가운데 정렬
     - aria-expanded 속성으로 열림/닫힘 상태를 스크린리더에 알립니다.
     - .mega-btn-bars / .mega-btn-x : 열림 여부에 따라 ☰ / ✕ 아이콘을 교체합니다.
   .mega-panel: 클릭 시 nav 아래로 펼쳐지는 전체 메뉴 패널입니다.
     - 기본 opacity: 0 + visibility: hidden → 보이지 않음
     - .is-open 클래스 추가 시 opacity: 1 + 슬라이드 다운 효과
   .mega-overlay: 패널이 열릴 때 배경을 반투명 검정으로 덮어 집중도를 높입니다.
     overlay 클릭 시 메뉴가 닫힙니다 (JavaScript에서 처리).
   ============================================================ */
.nav { position: relative; }
.mega-btn { position: absolute; left: clamp(16px, 3vw, 60px); top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.75); cursor: pointer; padding: 8px; display: none; align-items: center; justify-content: center; transition: color 0.2s; z-index: 10; line-height: 0; }
.mega-btn:hover { color: var(--white); }
.header.is-scrolled .mega-btn { color: var(--gray-700); }
.header.is-scrolled .mega-btn:hover { color: var(--black); }
.mega-btn-bars { display: flex; }
.mega-btn-x { display: none; }
.mega-btn[aria-expanded="true"] .mega-btn-bars { display: none; }
.mega-btn[aria-expanded="true"] .mega-btn-x { display: flex; }
@media (min-width: 769px) { .mega-btn { display: flex; } }

.mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: #1a1a1a; border-top: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 1002; pointer-events: none; }
.mega-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.header.is-scrolled .mega-panel { background: #ffffff; border-top: 1px solid var(--gray-200); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.mega-panel-inner { display: flex; padding: 32px clamp(16px, 3vw, 60px) 36px; gap: 0; }
.mega-col { flex: 1; padding: 0 16px; border-right: 1px solid rgba(255,255,255,0.06); }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; }
/* 마이페이지 컬럼 — 왼쪽에 구분선 강조 */
.mega-col-mypage { border-left: 1px solid rgba(255,255,255,0.15); flex: 0 0 auto; min-width: 140px; }
.header.is-scrolled .mega-col-mypage { border-left-color: var(--gray-200); }
.mega-col-mypage .mega-col-head { color: var(--white); }
.header.is-scrolled .mega-col-mypage .mega-col-head { color: var(--black); }
.header.is-scrolled .mega-col { border-right-color: var(--gray-200); }
.mega-col-head { display: block; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--white); text-decoration: none; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); transition: color 0.15s; white-space: nowrap; }
.mega-col-head:hover { color: var(--accent); }
.header.is-scrolled .mega-col-head { color: var(--black); border-bottom-color: var(--gray-200); }
.header.is-scrolled .mega-col-head:hover { color: var(--accent); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col ul li a { display: block; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.6); text-decoration: none; padding: 6px 0; transition: color 0.15s; white-space: nowrap; }
.mega-col ul li a:hover { color: var(--white); }
.header.is-scrolled .mega-col ul li a { color: var(--gray-600); }
.header.is-scrolled .mega-col ul li a:hover { color: var(--black); }
.mega-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; z-index: 998; }
.mega-overlay.is-open { opacity: 1; visibility: visible; }

/* ===== 모바일 메뉴 버튼 =====
   모바일(768px 이하)에서 화면 우상단에 고정되는 햄버거 버튼입니다.
   position: fixed + z-index: 1050 → 헤더(1000)보다 위에, 항상 화면에 고정됩니다.
   @media (min-width: 769px) { display: none } → 데스크탑에서는 숨깁니다.
   클릭 시 JavaScript의 openDrawer()를 호출해 사이드 드로어를 엽니다.
   ============================================================ */
.mobile-menu-btn { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; top: 8px; z-index: 1050; width: 44px; height: 44px; background: none; border: none; color: #ffffff; cursor: pointer; transition: color 0.2s; padding: 0; }
.header.is-scrolled .mobile-menu-btn { color: var(--gray-800); }
.mobile-menu-btn:hover { color: var(--accent); }
@media (min-width: 769px) { .mobile-menu-btn { display: none !important; } }

/* ===== 모바일 사이드 드로어 (슬라이드 메뉴) =====
   기본 상태: transform: translateX(-100%) → 화면 왼쪽 밖으로 완전히 숨겨집니다.
   .is-open   : transform: translateX(0)  → 원래 위치(화면 왼쪽)로 슬라이드 인 됩니다.
   max-width: 85vw → 화면 폭이 좁아도 화면의 85% 이하로 제한되어 오른쪽 여백이 남습니다.
   overscroll-behavior: contain → 드로어 안에서 스크롤이 끝나도 배경 페이지가 함께 스크롤되지 않습니다.
   z-index: 1100 → 모든 다른 요소(헤더 포함) 위에 표시됩니다.
   .mobile-drawer-overlay : 드로어가 열릴 때 배경을 반투명 어둡게 덮어
     overlay 클릭 시 드로어를 닫는 UX를 제공합니다.
   .mobile-nav-sub : 서브메뉴 아코디언 효과를 max-height 전환으로 구현합니다.
     (height 애니메이션은 CSS transition이 지원되지 않아 max-height 방식을 사용합니다.)
   ============================================================ */
.mobile-drawer { position: fixed; top: 0; left: 0; width: 300px; max-width: 85vw; height: 100%; background: var(--white); z-index: 1100; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow-y: auto; overscroll-behavior: contain; }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1099; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; }
.mobile-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-drawer-inner { display: flex; flex-direction: column; min-height: 100%; }
.mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.mobile-drawer-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 17px; color: var(--gray-600); cursor: pointer; border-radius: 50%; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
.mobile-drawer-close:hover { background: var(--gray-100); color: var(--black); }
.mobile-drawer-search { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); }
.mobile-drawer-search-form { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
.mobile-drawer-search-form .search-input { color: var(--black) !important; }
.mobile-drawer-search-form .search-input::placeholder { color: var(--gray-400) !important; }
.mobile-drawer-search-form .search-btn { color: var(--gray-500) !important; }
.mobile-drawer-util { display: flex; border-bottom: 1px solid var(--gray-200); }
.mobile-drawer-util a { flex: 1; text-align: center; padding: 11px 6px; font-size: 12px; font-weight: 500; color: var(--gray-600); text-decoration: none; border-right: 1px solid var(--gray-100); transition: color 0.2s, background 0.2s; }
.mobile-drawer-util a:last-child { border-right: none; }
.mobile-drawer-util a:hover { color: var(--accent); background: var(--accent-soft); }
.mobile-drawer-nav { flex: 1; padding: 4px 0; }
.mobile-nav-item { border-bottom: 1px solid var(--gray-100); }

.mobile-nav-btn,
.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; background: none; border: none; font-size: 14px; font-weight: 500; color: var(--gray-800); text-decoration: none; text-align: left; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; transition: color 0.2s, background 0.2s; }
.mobile-nav-btn:hover,
.mobile-nav-link:hover { color: var(--accent); background: var(--accent-soft); }
.mobile-nav-btn i { display: none; }
.mobile-nav-btn::after { content: ''; display: inline-block; width: 10px; height: 10px; border-right: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease, border-color 0.2s; flex-shrink: 0; margin-left: auto; }
.mobile-nav-item.is-open .mobile-nav-btn::after { transform: rotate(-135deg) translateY(-3px); border-color: var(--accent); }
.mobile-nav-item.is-open > .mobile-nav-btn { color: var(--accent); }

.mobile-nav-sub { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--gray-100); }
.mobile-nav-item.is-open .mobile-nav-sub { max-height: 400px; }
.mobile-nav-sub li a { display: block; padding: 10px 20px 10px 32px; font-size: 13px; color: var(--gray-600); text-decoration: none; border-top: 1px solid rgba(0,0,0,0.05); transition: color 0.2s, padding-left 0.2s; }
.mobile-nav-sub li:first-child a { border-top: none; }
.mobile-nav-sub li a:hover { color: var(--accent); padding-left: 36px; }

/* ===== 푸터 =====
   .footer-top : 브랜드(로고+소개+SNS) 왼쪽, 링크 컬럼들 오른쪽으로
     justify-content: space-between 으로 양끝 정렬합니다.
   .footer-nav : 4개 링크 컬럼을 flex + gap: 80px 으로 균일하게 배치합니다.
   .footer-bottom : 저작권/법인정보를 별도 구역으로 분리합니다.
   모바일에서는 flex-direction: column 으로 세로 적층합니다.
   ============================================================ */
.footer { background: var(--white); border-top: 1px solid var(--gray-200); padding: 60px 0 0; }
.footer-top { display: flex; justify-content: space-between; padding-bottom: 48px; border-bottom: 1px solid var(--gray-200); }
.footer-brand .logo-text { color: var(--black); font-size: 18px; }
.footer-brand .logo-sub { color: var(--gray-500); }
.footer-info { font-size: 15px; color: var(--gray-600); line-height: 2; font-weight: 330; max-width: 380px; }
.footer-social { display: flex; gap: 16px; margin-top: 24px; }
.footer-social a { color: var(--gray-400); font-size: 16px; text-decoration: none; transition: var(--transition-fast); }
.footer-social a:hover { color: var(--accent); }
.footer-nav { display: flex; gap: 80px; }
.footer-col h4 { font-size: 15px; font-weight: 700; color: var(--black); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: var(--gray-600); text-decoration: none; font-size: 15px; font-weight: 330; transition: var(--transition-fast); }
.footer-col ul a:hover { color: var(--black); }
.footer-bottom { padding: 24px 0 16px; font-size: 14px; color: var(--gray-500); font-weight: 330; }
.footer-bottom-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.footer-company-info { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gray-500); line-height: 1.7; }
.footer-company-info .copyright { margin-top: 4px; font-size: 13px; color: var(--gray-500); }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: var(--gray-500); text-decoration: none; font-size: 14px; font-weight: 500; transition: var(--transition-fast); }
.footer-bottom-links a:hover { color: var(--black); }

/* ===== 맨 위로 스크롤 버튼 =====
   기본 상태: opacity: 0 + transform: translateY(20px) → 보이지 않고 살짝 아래에 위치
   .visible 클래스 추가 시: opacity: 1 + translateY(0) → 아래에서 위로 떠오르며 나타납니다.
   (JavaScript: 스크롤 500px 이상 시 .visible 추가, 그 미만 시 제거)
   position: fixed, bottom: 32px, right: 32px → 우하단에 항상 떠 있는 버튼
   ============================================================ */
.scroll-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border: 1px solid var(--gray-300); background: var(--white); color: var(--black); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: var(--transition); opacity: 0; transform: translateY(20px); z-index: 999; }
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--black); color: var(--white); border-color: var(--black); }


/* ===== 스크롤 페이드 인 애니메이션 =====
   .reveal 클래스가 붙은 요소는 처음에 투명하고 40px 아래에 위치합니다.
   JavaScript의 IntersectionObserver가 요소가 뷰포트에 8% 이상 들어오면
   .visible 클래스를 추가 → 0.8초 동안 자연스럽게 나타납니다.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== 반응형 미디어 쿼리 =====
   @media (max-width: 768px) : 태블릿·모바일 (768px 이하)
     - 헤더: 검색창·유틸 링크·데스크탑 nav 숨김 → 모바일 드로어로 대체
     - 메가 메뉴: 모바일에서 완전히 숨김
     - 컨테이너 패딩: 40px → 20px 으로 축소
     - 푸터: 세로 방향(column)으로 재배치
   @media (max-width: 1100px) :
     - 푸터 nav 컬럼 간격을 80px → 40px 으로 줄입니다.
   ============================================================ */
@media (max-width: 768px) {
    /* Header */
    .header-top { height: 60px; position: relative; }
    .header-inner { padding: 0 16px; padding-right: 64px; }
    .header-search { display: none !important; }
    .header-util { display: none !important; }
    .nav { display: none; }
    .logo { max-width: calc(100% - 56px); }
    .logo-texts { min-width: 0; overflow: hidden; } /* 텍스트만 클리핑, 아이콘은 보호 */

    /* Container */
    .container { padding: 0 20px; }

    /* Footer */
    .footer-top { flex-direction: column; gap: 40px; }
    .footer-nav { display: none !important; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .footer-bottom-top { display: none !important; }
    .footer-company-info > div:not(.copyright) { display: none !important; }
    .footer-company-info { margin-top: 0; padding-top: 0; border-top: none; }

    /* Mega menu — 모바일에서 숨김 */
    .mega-btn { display: none !important; }
    .mega-panel { display: none !important; }
    .mega-overlay { display: none !important; }
}

@media (max-width: 1100px) {
    .footer-nav { gap: 40px; }
}

/* ===== 히어로 배너 이미지 (admin/etc/hero-banner 이미지 업로드) =====
   .hero-image-col이 존재하는 히어로 텍스트 컨테이너(.hero-content/.hero-slide-inner/
   .page-hero-left)만 자동으로 좌우 2단 flex 레이아웃이 되도록 :has()로 감지한다 —
   페이지 타입마다 별도 CSS를 안 넣어도 전 페이지 공통으로 동작한다. */
.hero-content:has(.hero-image-col),
.hero-slide-inner:has(.hero-image-col),
.page-hero-left:has(.hero-image-col) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 60px);
    text-align: left;
}
.hero-content:has(.hero-image-col) {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}
.hero-content:has(.hero-image-col) .hero-sub { margin-left: 0; margin-right: 0; }
.hero-text-col { flex: 1 1 auto; min-width: 0; }
.hero-image-col { flex: 0 0 auto; width: min(400px, 40%); }
/* 세로로 긴 이미지가 히어로 영역(특히 고정 헤더 아래 여백이 좁은 타입)을 넘어가지 않도록
   높이를 우선 제한하고, 폭은 max-width로 비율을 유지하며 자동 축소되게 한다. */
.hero-image-col img { max-width: 100%; max-height: 320px; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.hero-image-col.pos-left { order: -1; }
/* 모바일에서는 이미지를 아예 숨기고 기존 텍스트 전용 레이아웃으로 되돌린다 —
   좁은 화면에서 텍스트+이미지를 세로로 쌓으면 히어로 영역 높이를 넘어 잘리는
   문제가 있어(실기기 확인됨), "이미지 없이 텍스트만" 쪽이 더 안전하다. */
@media (max-width: 900px) {
    .hero-image-col { display: none !important; }
    .hero-content:has(.hero-image-col),
    .hero-slide-inner:has(.hero-image-col),
    .page-hero-left:has(.hero-image-col) {
        display: block;
        text-align: inherit;
        width: auto;
        max-width: none;
        margin: 0;
    }
    .hero-content:has(.hero-image-col) .hero-sub { margin-left: auto; margin-right: auto; }
}

/* ===== 추천인 검색 모달 (신청서 공용) ===== */
.form-btn-sm {
    padding: 11px 18px;
    background: var(--gray-800);
    color: var(--white);
    border: none; cursor: pointer;
    font-size: 13px; font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    transition: background 0.2s; white-space: nowrap;
}
.form-btn-sm:hover { background: var(--black); }
.referral-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; }
.referral-modal-bg.open { display: flex; }
.referral-modal { background: white; width: 480px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.referral-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.referral-modal-header span { font-size: 15px; font-weight: 700; }
.referral-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--gray-500); }
.referral-modal-close:hover { color: var(--black); }
.referral-search-row { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.referral-search-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--gray-200); font-size: 14px; font-family: 'Noto Sans KR', sans-serif; outline: none; }
.referral-search-row input:focus { border-color: var(--accent); }
.referral-list { max-height: 320px; overflow-y: auto; }
.referral-item { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 8px; }
.referral-item:hover { background: var(--gray-100); }
.referral-item-name { font-size: 14px; font-weight: 600; color: var(--black); }
.referral-item-office { font-size: 12px; color: var(--gray-500); }
.referral-empty { padding: 40px 20px; text-align: center; color: var(--gray-400); font-size: 13px; }