/**
 * hwaon_global.css — 사이트 글로벌 nav·header·footer CSS
 *
 * [세션 140 hotfix · P-D 의제 신설 — 2026-05-02]
 *   · head.php inline <style> 영역 2 ([2] GLOBAL STYLES, L669~1436) 추출
 *   · 일반 랜딩 페이지(head.php) + 그누보드 게시판 페이지(head.sub.php)
 *     양쪽 모두에서 동일 nav·header·footer CSS 적용 정합
 *
 * 적용 영역:
 *   · #custom-header-wrap          — 메인 헤더 wrapper
 *   · .lnb-pc · .depth1 · .menu-link — PC 메인 nav
 *   · #premium-menu-overlay         — 모바일 햄버거 메뉴
 *   · .hw-announce-banner · .hw-banner-* — 상단 carousel
 *   · #custom-footer focus 스타일
 *   · [data-aos="fade-up"]          — IntersectionObserver scroll reveal
 *
 * head.php 처리 방향 (P-D 의제 완수 권고):
 *   · 본 외부 CSS link 추가 후 inline <style> 영역 2 제거 가능
 *   · 다만 본 hotfix는 head.php 변경 없이 head.sub.php에만 link 추가하여
 *     회귀 위험 0으로 게시판 페이지 정합 회복
 *
 * 의존성:
 *   · CSS variables (:root) — head.sub.php의 critical CSS에서 정의됨
 *   · 폰트 — Cormorant Garamond, Noto Serif KR, Pretendard
 *
 * 향후 v1.2 통합 권고:
 *   · 본 파일과 hwaon_landings_common.css·hwaon_partials.css 간
 *     중복 selector 정합 점검
 *   · head.php의 inline 영역 2 제거 시점에 본 파일이 진정한 SSOT가 됨
 */

/* ════════════════════════════════════════════════════════════════════════
   [2] GLOBAL STYLES — head.php inline <style> 영역 2 추출본
   ════════════════════════════════════════════════════════════════════════ */

    /* ========================================
       [2] GLOBAL STYLES
       ======================================== */

    /* [PERF 2025.04] AOS 대체 CSS — IntersectionObserver 기반 scroll reveal */
    [data-aos="fade-up"] {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity .75s cubic-bezier(0.16, 1, 0.3, 1), transform .75s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 0s;
        will-change: opacity, transform;
    }
    [data-aos="fade-up"].hw-aos-on {
        opacity: 1;
        transform: translateY(0);
    }
    [data-aos="fade-up"][data-aos-delay="100"] { transition-delay: .1s; }
    [data-aos="fade-up"][data-aos-delay="200"] { transition-delay: .2s; }
    [data-aos="fade-up"][data-aos-delay="300"] { transition-delay: .3s; }
    [data-aos="fade-up"][data-aos-delay="400"] { transition-delay: .4s; }
    @media (prefers-reduced-motion: reduce) {
        [data-aos="fade-up"] { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    :root {
        --hw-orange:    #EA5514;
        --hw-orange-light: rgba(234, 85, 20, 0.08);
        --hw-navy:      #1B2A4A;
        --hw-navy-deep: #0F1D33;
        --hw-bg:        #FAFAF7;
        --hw-cream:     #F5F0EB;
        --hw-card:      #FFFFFF;
        --hw-text:      #2C2C2C;
        --hw-text-sub:  #8A8A8A;
        --hw-border:    #E8E2DA;
        --font-display: 'Cormorant Garamond','Playfair Display',Georgia,'Times New Roman',serif;
        --font-serif:   'Noto Serif KR','Nanum Myeongjo','나눔명조','Apple SD Gothic Neo',serif;
        --font-body:    'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',Roboto,sans-serif;
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-smooth:   cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* 구버전 변수 alias */
    :root { --hwaon-orange: #EA5514; --hwaon-dark: #1B2A4A; --glass-bg: rgba(27, 42, 74, 0.92); --glass-border: rgba(255, 255, 255, 0.08); }

    /* Hot-fix 54-B'''' (세션 133): 헤더-Hero 자연 전환 — 스크롤 비례 ratio 변수 (JS 동적 갱신) */
    :root { --header-scroll-ratio: 0; }
    
    body.menu-opened { overflow: hidden !important; }

    /* ========================================
       [2a] FOCUS VISIBLE — WCAG 2.4.7 (AA)
       키보드 네비게이션 시 포커스 위치 가시화
       마우스 클릭 시에는 감춰 UX 간섭 최소화
       ======================================== */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible,
    summary:focus-visible {
        outline: 2px solid #EA5514;
        outline-offset: 3px;
        border-radius: 2px;
    }
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    select:focus:not(:focus-visible) {
        outline: none;
    }
    /* 네비 메뉴 링크 — 포커스 가시성 강화 */
    .lnb-pc a:focus-visible,
    .pm-link:focus-visible,
    .pm-sub-item a:focus-visible {
        outline-offset: 4px;
    }
    /* 어두운 배경(네이비/네이비-딥) 내부 요소 — 대비 강화 (outer glow) */
    #custom-footer a:focus-visible,
    #custom-footer button:focus-visible,
    .hero a:focus-visible,
    .hero button:focus-visible,
    .review-section a:focus-visible,
    .review-section button:focus-visible,
    .insights-section a:focus-visible,
    .insights-section button:focus-visible,
    #premium-menu-overlay a:focus-visible,
    #premium-menu-overlay button:focus-visible,
    .nexus-section a:focus-visible,
    .nexus-section button:focus-visible,
    #hw-announce-banner a:focus-visible,
    #hw-announce-banner button:focus-visible {
        outline: 2px solid #EA5514;
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(234,85,20,0.35);
        border-radius: 4px;
    }

    .custom-cursor { 
        position: fixed; top: 0; left: 0; width: 8px; height: 8px; 
        background-color: #EA5514; border-radius: 50%; 
        pointer-events: none; z-index: 10000001 !important; 
        transform: translate(-50%, -50%); 
        transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0.7;
        mix-blend-mode: difference;
    }
    .custom-cursor.active { 
        width: 40px; height: 40px; 
        background-color: rgba(234, 85, 20, 0.15); 
        border: 1px solid rgba(234, 85, 20, 0.4);
        mix-blend-mode: normal;
        opacity: 1;
    }

    body { padding-top: 90px !important; }
    <?php if(defined('_INDEX_')) { ?> body { padding-top: 0 !important; } <?php } ?>

    /* ========================================
       [3] HEADER
       ======================================== */
    /* Hot-fix 54-B'''' (세션 133): 헤더-Hero 자연 전환 — 스크롤 비례 단계 통합
       0~150px 사이를 ratio 0~1로 매핑 → 모든 효과(배경·hairline·noise·box-shadow·height) 비례 페이드인
       (.scrolled 클래스는 외부 의존성 영역으로 부여 동작만 유지, 룰 박탈) */
    #custom-header-wrap { 
        position: fixed !important; top: 0; left: 0; width: 100%; 
        height: calc(90px - var(--header-scroll-ratio, 0) * 10px);
        background-color: rgba(0, 0, 0, 0.05);
        background-image: 
            radial-gradient(ellipse 800px 100% at 50% 50%, 
                            rgba(201, 169, 110, calc(var(--header-scroll-ratio, 0) * 0.06)) 0%, 
                            transparent 60%),
            linear-gradient(180deg, 
                            rgba(15, 23, 41, calc(var(--header-scroll-ratio, 0) * 0.92)) 0%, 
                            rgba(27, 42, 74, calc(var(--header-scroll-ratio, 0) * 0.90)) 50%, 
                            rgba(15, 29, 51, calc(var(--header-scroll-ratio, 0) * 0.92)) 100%);
        backdrop-filter: blur(calc(var(--header-scroll-ratio, 0) * 20px));
        -webkit-backdrop-filter: blur(calc(var(--header-scroll-ratio, 0) * 20px));
        box-shadow: 
            0 calc(var(--header-scroll-ratio, 0) * 2px)  calc(var(--header-scroll-ratio, 0) * 8px)  rgba(27,42,74,0.05),
            0 calc(var(--header-scroll-ratio, 0) * 16px) calc(var(--header-scroll-ratio, 0) * 40px) rgba(27,42,74,0.09);
        z-index: 99999;
        display: flex; align-items: center; justify-content: center;
    }
    
    /* 비인덱스 페이지 — ratio=1 강제 (JS 의존성 박탈, fallback 정합) */
    body:not(.is-index) #custom-header-wrap { 
        --header-scroll-ratio: 1;
        background-color: transparent;
    }
    
    /* 헤더 하단 골드 hairline — ratio 비례 강도 (0.25 → 0.55) */
    #custom-header-wrap::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, 
                    transparent 0%, 
                    rgba(201, 169, 110, calc(0.25 + var(--header-scroll-ratio, 0) * 0.30)) 50%, 
                    transparent 100%);
        pointer-events: none;
        z-index: 2;
    }
    
    /* SVG fractal noise grain — ratio 비례 페이드인 (0 → 0.04) */
    #custom-header-wrap::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
        opacity: calc(var(--header-scroll-ratio, 0) * 0.04);
        mix-blend-mode: overlay;
        pointer-events: none;
        z-index: 0;
    }
    
    #custom-header-wrap .inner-wrap { 
        width: 100%; max-width: 1700px; padding: 0 40px; 
        display: flex; justify-content: space-between; align-items: center; height: 100%; position: relative; 
        z-index: 1;     /* ::before noise 영역 위 정합 */
    }
    
    /* GNB PC */
    .lnb-pc { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; display: flex; align-items: center; }
    .depth1 { display: flex; gap: 45px; margin: 0; padding: 0; list-style: none; height: 100%; }
    .depth1 > li { position: relative; display: flex; align-items: center; height: 100%; }
    /* Hot-fix 54-B''' (세션 133): 메뉴 항목 hover 미세 골드 글로우 — 인터랙션 피니쉬 */
    .depth1 > li::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 120%; height: 70%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse at center, rgba(201, 169, 110, 0.10) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        z-index: 0;
    }
    .depth1 > li:hover::before { opacity: 1; }
    .depth1 > li > .menu-link { position: relative; z-index: 1; }    /* 글로우 영역 위 정합 */
    .menu-link { color: #fff !important; font-size: 16px; font-weight: 500; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; position: relative; opacity: 0.85; transition:opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), font-weight 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-family: 'Pretendard'; letter-spacing: -0.01em; }
    .depth1 > li:hover > .menu-link { opacity: 1; font-weight: 700; color: #fff; }
    .menu-link::after { content: ''; position: absolute; bottom: 12px; left: 0; width: 0; height: 2px; background: #EA5514; transition:width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .depth1 > li:hover > .menu-link::after { width: 100%; }
    .depth2 { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; padding: 15px 0; min-width: 200px; box-shadow: 0 2px 8px rgba(27,42,74,0.05), 0 16px 40px rgba(27,42,74,0.09); border-radius: 4px; z-index: 999999; }
    .depth2.depth2-wide { columns: 2; column-gap: 0; min-width: 360px; }
    .depth2.depth2-specialist { min-width: 440px; padding: 12px 0 10px; }
    .depth2 li { break-inside: avoid; }
    .depth2 li a { color: #333 !important; padding: 12px 25px; font-size: 15px; display: block; font-weight: 500; text-decoration:none; text-align: left; transition:color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; }
    .depth2 li:hover a { color: #EA5514 !important; background: #f9f9f9; font-weight: 700; }
    .depth2 li.depth2-divider { border-top: 1px solid #E8E2DA; margin-top: 4px; padding-top: 4px; }
    .depth2 li.depth2-divider a { color: #EA5514 !important; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
    .depth2 li.depth2-divider:hover a { background: #FFF5F0; }
    .depth2 li.depth2-header { padding: 8px 25px 6px; font-family: 'Cormorant Garamond','Noto Serif KR','Nanum Myeongjo','Playfair Display',Georgia,'Times New Roman',serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #C9A96E; text-transform: uppercase; border-bottom: 1px solid #F0EAE0; margin: 0 0 6px; }

    /* Hot-fix 54-B: depth1 영문 sub label (Warm Luxury Editorial 영역) */
    /* Hot-fix 54-B' (세션 133): 영문 1줄/2줄 영역 고정 — 한글 baseline 7개 메뉴 정합 */
    /* Hot-fix 54-B'' (세션 133): hover transition 영역 신설 — 영문 sub 반응 정합 */
    .menu-link-en {
        display: flex;                /* 변경 — block → flex (1줄 영문 수직 중앙 정렬용) */
        align-items: center;          /* 신설 — 영문 영역 내 수직 중앙 */
        justify-content: center;      /* 신설 — 좌우 중앙 */
        text-align: center;           /* 신설 — 자동 줄바꿈 시 텍스트 중앙 */
        min-height: 22px;             /* 신설 — 2줄 영문 영역 기준 고정 (font 11px × line-height 2) */
        font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2.5px;
        color: #C9A96E;
        text-transform: uppercase;
        opacity: 0.85;
        margin-bottom: 2px;
        line-height: 1;
        transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* hover 시 영문 sub 컬러·opacity 반응 (한글 main과 동시 반응 정합) */
    .depth1 > li:hover > .menu-link .menu-link-en {
        color: #FFFFFF;
        opacity: 1;
    }
    @media (max-width: 768px) {
        .menu-link-en { display: none; }
    }
/* [세션 62 → 63 Fix] 2열 명시 그리드 — 전담센터(좌) + 일반 업무분야(우)
       ※ 치명 버그: display:grid가 .depth2 기본 display:none을 오버라이드하여
          홈 접속 시 서브메뉴가 항상 펼쳐져 있는 문제 발생
       ※ 해결: 기본은 display:none 유지, hover/focus-within 시에만 grid 전환 */
    .depth2.depth2-twocol {
        columns: auto;
        grid-template-columns: 220px 220px;
        grid-auto-flow: row;
        column-gap: 0;
        row-gap: 0;
        min-width: 480px;
        padding: 0 0 8px;
        /* display는 기본 none 유지 (부모 .depth2 규칙 상속) */
    }
    /* [세션 95+125+Hot-fix 27+51 회귀 2026-04-29] 3열 명시 그리드 — 전담센터 11개 + 일반 업무분야 7개
       ※ 세션 63 교훈 재적용: display:grid는 hover/focus-within 시에만 활성화 */
    .depth2.depth2-3col {
        columns: auto;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        column-gap: 18px;
        row-gap: 2px;
        min-width: 760px;
        padding: 20px 24px;
        /* display는 기본 none 유지 */
    }
    /* hover / focus-within 시에만 표시 (2열 grid로) */
    .depth1 > li:hover > .depth2.depth2-twocol,
    .depth1 > li:focus-within > .depth2.depth2-twocol {
        display: grid !important;
    }
    /* [세션 95] hover / focus-within 시에만 표시 (3열 grid로) */
    .depth1 > li:hover > .depth2.depth2-3col,
    .depth1 > li:focus-within > .depth2.depth2-3col {
        display: grid !important;
    }
    /* [세션 95] 3열 그리드 내부 li 스타일 */
    .depth2.depth2-3col li a {
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
    }
    .depth2.depth2-3col li.depth2-header {
        column-span: all;
        padding: 10px 14px 8px;
        margin-bottom: 4px;
    }
    /* 일반 depth2도 hover/focus-within 시 표시 보장 (구성원·인사이트 메뉴) */
    .depth1 > li:hover > .depth2:not(.depth2-twocol):not(.depth2-3col),
    .depth1 > li:focus-within > .depth2:not(.depth2-twocol):not(.depth2-3col) {
        display: block;
    }
    .depth2.depth2-twocol .depth2-header-left {
        grid-column: 1;
        border-right: 1px solid #F0EAE0;
        padding-left: 22px;
        color: #C9A96E;
    }
    .depth2.depth2-twocol .depth2-header-right {
        grid-column: 2;
        padding-left: 22px;
        color: #1B2A4A;
    }
    .depth2.depth2-twocol .depth2-col-left {
        grid-column: 1;
        border-right: 1px solid #F0EAE0;
    }
    .depth2.depth2-twocol .depth2-col-left a { padding-left: 22px; font-size: 13.5px; }
    .depth2.depth2-twocol .depth2-col-right { grid-column: 2; }
    .depth2.depth2-twocol .depth2-col-right a {
        padding-left: 22px;
        font-size: 13.5px;
        color: #555 !important;
    }
    .depth2.depth2-twocol .depth2-col-right:last-child a {
        color: #EA5514 !important;
        font-weight: 700;
        border-top: 1px dashed #E8E2DA;
        margin-top: 4px;
        padding-top: 10px;
    }
    
    .header-right { display: flex; align-items: center; gap: 20px; }
    
    /* Hot-fix 54-B''' (세션 133): 전화번호 영역 미세 강화 — 아이콘 scale + underline fade */
    .header-tel { 
        display: none;
        align-items: center; gap: 6px;
        color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
        font-family: 'Pretendard'; letter-spacing: -0.01em; opacity: 0.9;
        transition:opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;     /* 신설 — ::after underline 영역 정합 */
    }
    .header-tel::after {
        content: '';
        position: absolute;
        left: 0; bottom: -3px;
        width: 0; height: 1px;
        background: rgba(234, 85, 20, 0.6);
        transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .header-tel:hover { opacity: 1; color: #EA5514; }
    .header-tel:hover::after { width: 100%; }
    .header-tel i { font-size: 13px; color: #EA5514; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .header-tel:hover i { transform: scale(1.15); }
    
    /* Hot-fix 54-B''' (세션 133): CTA 상담신청 버튼 럭셔리 강화 — 그라데이션 + 골드 ring + shimmer */
    .header-cta {
        display: none;
        align-items: center; justify-content: center;
        padding: 10px 24px;
        background: linear-gradient(135deg, #EA5514 0%, #D14910 100%);   /* 변경 — 단색 → 오렌지 그라데이션 */
        color: #fff !important;
        border-radius: 50px; font-size: 14px; font-weight: 700;
        text-decoration: none; 
        transition: background 0.58s cubic-bezier(0.16, 1, 0.3, 1), color 0.58s cubic-bezier(0.16, 1, 0.3, 1), transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.58s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid rgba(201, 169, 110, 0.35);                      /* 변경 — 오렌지 단색 → 골드 ring 미세 */
        box-shadow: 0 4px 12px rgba(234, 85, 20, 0.20), 0 0 0 1px rgba(201, 169, 110, 0.08);  /* 신설 — 오렌지 글로우 + 골드 outer ring */
        white-space: nowrap;
        position: relative;
        overflow: hidden;
    }
    /* shimmer — hover 시 빛이 좌→우로 지나감 */
    .header-cta::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
        transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
    .header-cta:hover {
        background: linear-gradient(135deg, #F26425 0%, #EA5514 100%);    /* 변경 — hover 시 화이트 반전 → 더 밝은 오렌지 그라데이션 (톤 일관성) */
        color: #fff !important;                                            /* 변경 — 오렌지 → 화이트 유지 (반전 박탈) */
        transform: translateY(-2px) scale(1.03);                           /* 변경 — scale만 → 살짝 떠오름 + scale */
        box-shadow: 0 8px 20px rgba(234, 85, 20, 0.38), 0 0 0 1px rgba(201, 169, 110, 0.30);  /* 신설 — 글로우·골드 ring 강화 */
    }
    .header-cta:hover::before { left: 100%; }
    
    @media (min-width: 1280px) {
        .header-tel { display: flex; }
        .header-cta { display: flex; }
    }
    @media (min-width: 1280px) and (max-width: 1400px) {
        .depth1 { gap: 24px; }
        .menu-link { font-size: 14px; }
        #custom-header-wrap .inner-wrap { padding: 0 24px; }
        .header-tel { font-size: 13px; }
        .header-cta { padding: 8px 18px; font-size: 13px; }
        .header-right { gap: 12px; }
    }

    /* [C] 접근성 — 버튼 초기화 + 터치 영역 확보 */
    #custom-open-btn {
        background: none; border: none; outline: none;
        color: #EA5514; font-size: 26px; padding: 10px 12px;
        cursor: pointer; display: block; z-index: 100000; transition:color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }

    /* Hot-fix 54-C: 햄버거 PC 박탈 (1280px 이상 영역) */
    @media (min-width: 1280px) {
        #custom-open-btn { display: none; }
    }
    #custom-open-btn:hover { color: #fff; transform: translateY(-2px); }
    #custom-open-btn:focus-visible { outline: 2px solid #EA5514; outline-offset: 2px; border-radius: 4px; }

    /* ========================================
       [4] FULL SCREEN MENU OVERLAY
       ======================================== */
    #premium-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(27, 42, 74, 0.97); z-index: 999999; display: none; opacity: 0; transition:opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(15px); overflow-y: auto; }
    #premium-menu-overlay.active { display: block; opacity: 1; }

    /* [C] 메뉴 닫기 버튼 — button으로 변환 */
    #menu-close-btn {
        background: none; border: none; outline: none;
        position: absolute; top: 30px; right: 40px;
        color: #fff; font-size: 40px; line-height: 1;
        z-index: 100000000; cursor: pointer; transition:color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
        padding: 4px;
    }
    #menu-close-btn:hover { color: #EA5514; transform: rotate(90deg); }
    #menu-close-btn:focus-visible { outline: 2px solid #EA5514; outline-offset: 2px; border-radius: 4px; }

    .pm-container { display: flex; width: 100%; min-height: 100%; max-width: 1600px; margin: 0 auto; padding: 80px 40px; }
    .pm-nav-area { flex: 2; border-right: 1px solid rgba(255,255,255,0.1); padding-right: 60px; display: flex; flex-direction: column; justify-content: center; }
    .pm-main-list { list-style: none; padding: 0; margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
    
    .pm-item { margin-bottom: 25px; position: relative; overflow: hidden; }
    /* [C] 대비율 개선 — opacity 0.5 → 0.7 */
    .pm-link { font-family: 'Noto Serif KR','Nanum Myeongjo','나눔명조','Apple SD Gothic Neo',serif; font-size: 42px; font-weight: 700; color: rgba(255,255,255,0.72); text-decoration: none; display: inline-block; transition:color 0.58s cubic-bezier(0.16, 1, 0.3, 1), transform 0.58s cubic-bezier(0.16, 1, 0.3, 1); position: relative; transform: translateY(30px); }
    .pm-link:hover, .pm-item:hover .pm-link { color: #fff; transform: translateX(20px); }
    .pm-link.active { color: #EA5514; }
    .pm-link:hover::after { content: '→'; font-family: 'Pretendard'; font-size: 28px; position: absolute; right: -50px; top: 50%; transform: translateY(-50%); color: #EA5514; }
    
    @media (min-width: 1280px) {
        .pm-sub-list { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 20px; padding-left: 5px; max-height: 0; overflow: hidden; transition:max-height 0.68s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.68s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; }
        .pm-item:hover .pm-sub-list { max-height: 1400px; opacity: 1; margin-top: 15px; }
    }
    .pm-sub-item a { font-size: 16px; color: #aaa; text-decoration: none; transition:color 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 400; }
    .pm-sub-item a:hover { color: #EA5514; }
    .pm-sub-item.pm-sub-divider { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 8px; padding-top: 4px; width: 100%; }
    .pm-sub-item.pm-sub-divider a { color: #EA5514 !important; font-size: 14px; font-weight: 700; }
    .pm-sub-header { font-family: 'Cormorant Garamond','Noto Serif KR','Nanum Myeongjo','Playfair Display',Georgia,'Times New Roman',serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #C9A96E; text-transform: uppercase; padding: 14px 10px 8px; width: 100%; list-style: none; border-bottom: 1px solid rgba(201,169,110,0.15); margin-bottom: 4px; }
    /* [세션 62] 일반 업무분야 세컨드 헤더 — 전담센터 후 구분 + 토글 */
    .pm-sub-header.pm-sub-header-2 { margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); }
    .pm-collapsible-trigger {
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        user-select: none;
    }
    .pm-collapsible-trigger:hover { color: #EA5514 !important; }
    .pm-collapsible-trigger:focus-visible {
        outline: 2px solid #EA5514;
        outline-offset: 3px;
    }
    .pm-collapse-arrow {
        font-size: 11px;
        color: rgba(255,255,255,0.45);
        transition: transform 0.58s cubic-bezier(0.19,1,0.22,1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pm-collapsible-trigger[aria-expanded="true"] .pm-collapse-arrow {
        transform: rotate(180deg);
        color: #EA5514;
    }
    .pm-collapsible-wrap {
        width: 100%;
        list-style: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.68s cubic-bezier(0.19,1,0.22,1);
        padding: 0;
    }
    .pm-collapsible-wrap[aria-hidden="false"] {
        max-height: none;
    }
    .pm-collapsible-list {
        list-style: none;
        padding: 6px 0 4px;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .pm-collapsible-list .pm-sub-item {
        padding: 0;
    }
    .pm-collapsible-list .pm-sub-item a {
        font-size: 15px;
        color: #888;
    }
    .pm-info-area { flex: 1; padding-left: 80px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
    .pm-info-label { font-size: 14px; color: #EA5514; font-weight: 700; letter-spacing: 2px; margin-bottom: 20px; display: block; text-transform: uppercase; }
    .pm-tel { font-family: 'Noto Serif KR','Nanum Myeongjo','나눔명조','Apple SD Gothic Neo',serif; font-size: 48px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 15px; display: block; text-decoration: none; }
    .pm-address { font-size: 16px; color: #bbb; line-height: 1.6; font-weight: 300; margin-bottom: 60px; }
    .pm-btn-group { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 300px; }
    .pm-btn { display: flex; align-items: center; justify-content: center; height: 56px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; color: #fff; text-decoration: none; font-size: 16px; transition:background 0.58s cubic-bezier(0.16, 1, 0.3, 1), color 0.58s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.58s cubic-bezier(0.16, 1, 0.3, 1); }
    .pm-btn:hover { background: #fff; color: #1B2A4A; border-color: #fff; }
    .pm-btn.orange { background: #EA5514; border-color: #EA5514; border-radius: 50px; font-weight: 700; }
    .pm-btn.orange:hover { background: #d9490b; color: #fff; }

    /* [C] pm-mobile-arrow — button 초기화 */
    .pm-mobile-arrow {
        background: none; border: none; outline: none;
        display: none; align-items: center; justify-content: center;
        position: absolute; right: 0; top: 0; height: 65px; width: 60px;
        color: #fff; font-size: 16px; cursor: pointer; transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10;
        min-width: 44px;
    }
    .pm-item.active .pm-mobile-arrow { transform: rotate(180deg); color: #EA5514; }
    .pm-item.active .pm-link { color: #EA5514; }
    .pm-mobile-arrow:focus-visible { outline: 2px solid #EA5514; outline-offset: 2px; border-radius: 4px; }

    /* ========================================
       [5] MOBILE MENU
       ======================================== */
    @media (max-width: 1279px) {
        .lnb-pc { display: none !important; }
        .pm-container { flex-direction: column; padding: 80px 20px 40px; overflow-y: auto; display: block; height: auto; min-height: 100%; }
        .pm-nav-area { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-right: 0; padding-bottom: 40px; margin-bottom: 40px; flex: none; display: block; height: auto; }
        .pm-info-area { padding-left: 0; flex: none; display: block; }
        
        .pm-item { margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; overflow: visible !important; height: auto !important; } 
        
        .pm-link { font-size: 20px; width: 100%; padding: 20px 0; color: rgba(255,255,255,0.9); pointer-events: auto; transform: none !important; display: block; }
        .pm-link:hover { transform: none; }
        .pm-link:hover::after { display: none; }
        
        .pm-mobile-arrow { display: flex; }
        
        .pm-sub-list { 
            display: none;
            max-height: none !important; opacity: 1 !important; overflow: visible !important;
            transition: none !important;
            flex-direction: column; gap: 0; padding-bottom: 20px; padding-left: 10px; margin-top: 0; 
            background: rgba(255,255,255,0.03); 
        }
        .pm-item:hover .pm-sub-list { margin-top: 0; }
        .pm-sub-item a { display: block; padding: 12px 10px; font-size: 15px; color: #bbb; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .pm-sub-item a:last-child { border-bottom: none; }
        .pm-sub-item a:hover { color: #fff; padding-left: 15px; }

        .pm-tel { font-size: 32px; }
        .pm-btn-group { max-width: 100%; }
        #menu-close-btn { top: 20px; right: 20px; font-size: 30px; }
        .custom-cursor { display: none !important; }
    }

    /* ========================================
       [6] SUB VISUAL & CONTAINER
       ======================================== */
    #sub-visual-wrap { position: relative !important; width: 100%; height: 480px; background-color: #1B2A4A; overflow: hidden; margin-top: -90px; display: flex !important; justify-content: center !important; align-items: center !important; padding-top: 40px !important; }
    .sub-visual-bg { position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
    .sub-visual-bg video {
        width: 100%; height: 100%; object-fit: cover;
        background: #1B2A4A; display: block;
    }
    .sub-visual-bg video::-webkit-media-controls,
    .sub-visual-bg video::-webkit-media-controls-panel,
    .sub-visual-bg video::-webkit-media-controls-play-button,
    .sub-visual-bg video::-webkit-media-controls-start-playback-button { display: none !important; }
    .sub-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6)); z-index:2; }
    .sub-visual-text { position: relative !important; z-index: 10; text-align: center !important; color: #fff; width: 100%; max-width: 1200px; }
    @keyframes textReveal { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    /* [C] heading 순서 — h1으로 변경 (서브페이지 첫 번째 heading) */
    .sub-visual-text h1, .sub-visual-text h2 { font-size: 48px; font-weight: 700; margin-bottom: 15px; letter-spacing: -0.03em; color:#fff; font-family: 'Noto Serif KR'; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
    .sub-visual-text p { font-size: 16px; color: rgba(255,255,255,0.85); letter-spacing: 4px; text-transform: uppercase; font-weight: 400; margin:0; font-family: 'Pretendard'; animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; opacity: 0; }
    #sub-container { max-width: 1400px; margin: 0 auto; padding: 80px 20px; }
    
    <?php if ($is_admin) { ?> #bo_list_total, #bo_gall .bo_fx, .bo_fx, .bo_btn_top, .btn_bo_user, .gall_chk, .chk_box, #bo_v_top, .bo_v_com { display: block !important; } .btn_bo_user li { display: inline-block !important; } .btn_bo_user a { display: inline-block !important; padding: 5px 10px !important; border: 1px solid #ddd; background: #fff; } <?php } else { ?> #bo_list_total, .bo_total, .bo_fx, .gall_chk, .btn_bo_user, .bo_btn_top, .chk_box { display: none !important; } <?php } ?>
    
    <?php if (!defined('_INDEX_')) { ?>
    @media (max-width: 768px) {
        .hero-section, .board-header, #view_header, #sub-visual-wrap { height: 40vh !important; min-height: 300px !important; padding-top: 90px !important; padding-bottom: 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
        #sub-visual-wrap { display: none !important; }
        .sub-visual-text h1, .sub-visual-text h2 { font-size: 28px !important; line-height: 1.25 !important; margin-bottom: 12px !important; }
        .sub-visual-text p { font-size: 14px !important; line-height: 1.5 !important; padding: 0 20px !important; word-break: keep-all !important; opacity: 0.9; }
        #sub-container { padding-top: 40px !important; padding-bottom: 60px !important; }
        .list-container { margin-top: 0 !important; padding-top: 0 !important; }
    }
    <?php } ?>

/* ── [LHK ANNOUNCE BANNER] ──────────────────── */
:root { --hw-banner-h: 40px; }
#hw-announce-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
    height: var(--hw-banner-h);
    background: #EA5514;
    display: flex; align-items: center; justify-content: center;
    gap: 0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    transform: translateY(0);
    transition:transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}
#hw-announce-banner::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: rgba(0,0,0,0.2);
}
#hw-announce-banner.hidden {
    transform: translateY(-100%); pointer-events: none; opacity: 0;
}
.hw-banner-inner {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',Roboto,sans-serif; font-size: 13px; color: rgba(255,255,255,0.9);
    padding: 0 48px 0 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-banner-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.8); flex-shrink: 0;
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.hw-banner-text { letter-spacing: -0.01em; }
.hw-banner-text em { color: #fff; font-style: normal; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.hw-banner-link-wrap {
    display: flex; align-items: center; justify-content: center;
    flex: 1; text-decoration: none; cursor: pointer;
    padding: 0;
}
.hw-banner-link-wrap:hover .hw-banner-inner { opacity: 0.85; }
.hw-banner-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff; text-decoration: none; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 1px; font-size: 12px; letter-spacing: 0.05em;
    flex-shrink: 0;
}
.hw-banner-close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1;
    padding: 6px; transition:color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hw-banner-close:hover { color: #fff; }
/* 배너 표시 중 헤더 아래로 밀기 */
body.hw-banner-on #custom-header-wrap { top: var(--hw-banner-h) !important; }
body.hw-banner-on #premium-menu-overlay { padding-top: calc(var(--hw-banner-h) + 60px) !important; }
/* [세션 62] 배너 표시 중 본문 전체도 함께 밀기 — Hero CTA 가림 해소 */
body.hw-banner-on { padding-top: var(--hw-banner-h) !important; }
body.hw-banner-on #hw-announce-banner { top: 0 !important; }
@media (max-width: 768px) {
    .hw-banner-inner { font-size: 11.5px; gap: 10px; }
    .hw-banner-text .hw-banner-career { display: none; }
}
/* ─────────────────────────────────────────────── */

    /* Hot-fix 54-F: hw-announce-banner carousel 확장 */
    #hw-announce-banner {
        background: linear-gradient(135deg, #EA5514 0%, #C73E0A 100%);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid rgba(201, 169, 110, 0.3);
        overflow: hidden;
    }
    .hw-banner-carousel {
        width: 100%;
        position: relative;
    }
    .hw-banner-carousel .hw-banner-link-wrap {
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        outline: none;
    }
    .hw-banner-carousel .hw-banner-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 60px 10px 20px;
        font-size: 14px;
        white-space: nowrap;
    }
    .hw-banner-carousel .hw-banner-dot {
        color: #FFFFFF;
        font-size: 8px;
        animation: hw-banner-pulse 1.5s ease-in-out infinite;
        flex-shrink: 0;
    }
    @keyframes hw-banner-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    .hw-banner-carousel em {
        color: #C9A96E;
        font-weight: 700;
        font-style: normal;
    }
    .hw-banner-carousel .hw-banner-link {
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        margin-left: 6px;
        color: #FFFFFF;
    }
    .hw-banner-carousel .hw-banner-text-mo { display: none; }

    /* slick.js 사양 영역 영구 정합 */
    #hw-announce-banner .slick-dots {
        position: absolute;
        bottom: 4px;
        right: 60px;
        display: flex !important;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
        width: auto;
    }
    #hw-announce-banner .slick-dots li {
        width: 6px;
        height: 6px;
        margin: 0;
    }
    #hw-announce-banner .slick-dots li button {
        width: 6px;
        height: 6px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: background 0.3s;
    }
    #hw-announce-banner .slick-dots li button:before { display: none; }
    #hw-announce-banner .slick-dots li.slick-active button {
        background: #FFFFFF;
    }

    /* 모바일 영역 영구 */
    @media (max-width: 768px) {
        .hw-banner-carousel .hw-banner-text-pc { display: none; }
        .hw-banner-carousel .hw-banner-text-mo { display: inline; }
        .hw-banner-carousel .hw-banner-inner {
            font-size: 12px;
            padding: 8px 50px 8px 14px;
            gap: 6px;
        }
        .hw-banner-carousel .hw-banner-link { display: none; }
        #hw-announce-banner .slick-dots {
            right: 44px;
            bottom: 2px;
        }
    }

    /* reduced-motion 영역 정합 */
    @media (prefers-reduced-motion: reduce) {
        .hw-banner-carousel .hw-banner-dot { animation: none; }
    }