@charset "utf-8";

/* ==========================================================================
   common.css  공통: 변수, 리셋, 레이아웃, 버튼, 헤더, 푸터, 모바일 드로어
   (기존 main.css / main_mb.css 에서 분리)
   ========================================================================== */

:root { --primary-color: #004fb0; --secondary-color: #23862b; --accent-orange: #ff6f22; --primary-gradient: linear-gradient(135deg, #004fb0 0%, #006bf6 100%); --dark-blue: #0b132a; --text-main: #2d3748; --text-muted: #64748b; --bg-light: #f8fafc; --radius-lg: 16px; --radius-md: 10px; --shadow-subtle: 0 10px 30px rgba(160, 174, 192, 0.15); --shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.1); }

/* 1. 기본 초기화 및 글로벌 스타일 */
body { margin: 0; padding: 0; font-family: 'Pretendard', system-ui, sans-serif; color: var(--text-main); background-color: #ffffff; -webkit-font-smoothing: antialiased; letter-spacing: -0.5px; font-size: 16px; line-height: 1.7; }
.main-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; }
.gradient-text { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }

/* 2. 섹션 공통 구조 헤더 */
.section-modern { padding: 120px 0; box-sizing: border-box; }
.section-header { text-align: center; margin-bottom: 65px; }
.modern-title { font-size: 40px; font-weight: 800; color: var(--dark-blue); margin: 0 0 16px 0; line-height: 1.3; }
.modern-subtitle { font-size: 18px; color: var(--text-muted); margin: 0; }

/* 3. 글로벌 버튼 시스템 */
.btn-modern { display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 36px; font-size: 16.5px; font-weight: 700; border-radius: 30px; text-decoration: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-sizing: border-box; gap: 8px; }
.btn-solid { background: var(--primary-gradient); color: #ffffff; box-shadow: 0 8px 20px rgba(0, 79, 176, 0.25); }
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 79, 176, 0.35); }
.btn-outline { border: 2px solid #e2e8f0; color: var(--text-main); background: #ffffff; }
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-3px); }

/* 4. 상단 네비게이션 헤더 (GNB) - 리뉴얼 head.php와 매칭 */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 1000; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(241, 245, 249, 0.6); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.site-header.is-scrolled { background: #ffffff; height: 72px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); border-bottom-color: #e2e8f0; }
.header-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.site-logo { text-decoration: none; font-size: 26px; letter-spacing: -0.5px; display: flex; align-items: center; }
.site-logo .logo-bold { font-weight: 800; color: #004fb0; }
.site-logo .logo-light { font-weight: 800; color: #23862b; margin-left: 2px; }
.gnb-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 40px; }
.gnb-link { text-decoration: none; font-size: 16.5px; font-weight: 600; color: #4a5568; transition: color 0.2s ease; padding: 8px 0; position: relative; }
.gnb-link:hover, .gnb-link.active { color: var(--primary-color); }
.gnb-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--primary-color); transition: width 0.25s ease; }
.gnb-link:hover::after, .gnb-link.active::after { width: 100%; }
.header-util-group { display: flex; align-items: center; gap: 12px; position: relative; }
.btn-util { text-decoration: none; font-size: 15.5px; font-weight: 700; display: inline-flex; align-items: center; box-sizing: border-box; }
.btn-login { color: #4a5568; padding: 8px 14px; transition: color 0.2s; }
.btn-login:hover { color: var(--primary-color); }
.btn-header-cta { background: var(--dark-blue); color: #ffffff; height: 44px; padding: 0 22px; border-radius: 22px; font-size: 14.5px; gap: 6px; transition: all 0.2s ease; }
.btn-header-cta i { font-size: 11px; transition: transform 0.2s; }
.btn-header-cta:hover { background: var(--primary-color); box-shadow: 0 4px 12px rgba(0, 79, 176, 0.2); }
.btn-header-cta:hover i { transform: translateX(2px); }
.site-main-content { padding-top: 80px; }

/* ==========================================================================
   [로그인 후 활성화] 마이페이지 드롭다운 프리미엄 스타일 (.header-util-group 내부 삽입)
   ========================================================================== */
.user-menu-group { position: relative; display: inline-block; }
.btn-user-chip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    border: 1px solid #7dd3fc;
    border-radius: 50px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.08);
    text-decoration: none;
}
.btn-user-chip:hover { color: #0369a1; }
.btn-user-chip .chip-user-icon { margin-right: 6px; font-size: 16px; color: #0284c7; }
.header-user-name { font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-arrow-icon { margin-left: 6px; font-size: 11px; opacity: 0.8; color: #64748b; transition: transform 0.3s; }
.dropdown-arrow-icon.rotate-arrow { transform: rotate(180deg); }
.user-submenu { display: none; position: absolute; top: calc(100% + 12px); right: 0; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; min-width: 175px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); padding: 8px 0; z-index: 1000; list-style: none; margin: 0; box-sizing: border-box; }
.user-submenu.show-submenu { display: block !important; }
.user-submenu li a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; color: #475569; text-decoration: none !important; transition: background-color 0.2s, color 0.2s; }
.user-submenu li a:hover { background-color: #f8fafc; color: var(--primary-color); }
.user-submenu li a i { color: #94a3b8; font-size: 14px; width: 16px; text-align: center; }
.user-submenu li a:hover i { color: var(--primary-color); }
.user-submenu li.divider { height: 1px; padding: 0; margin: 6px 0; background-color: #f1f5f9; list-style: none; pointer-events: none; }
.user-submenu li a.logout-link { color: #ef4444; }
.user-submenu li a.logout-link i { color: #fca5a5; }
.user-submenu li a.logout-link:hover { background-color: #fef2f2; color: #ef4444; }
.user-submenu li a.logout-link:hover i { color: #ef4444; }

/* 10. FOOTER AREA (오렌지 포인트 테마 액션 바) */
.section-footer-cta { position: relative; padding: 65px 0; background: linear-gradient(135deg, var(--accent-orange) 0%, #ff8642 100%); color: #ffffff; text-align: left; }
.cta-flex-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-text-left h2 { font-size: 32px; font-weight: 800; margin: 0 0 10px 0; letter-spacing: -0.5px; }
.cta-text-left p { font-size: 18px; margin: 0; opacity: 0.9; font-weight: 500; }
.btn-cta-dark { background: var(--dark-blue); color: #ffffff; box-shadow: 0 8px 24px rgba(11, 19, 42, 0.25); border: none; }
.btn-cta-dark:hover { background: #1a2649; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11, 19, 42, 0.4); }
.site-footer { background: #0b132a; color: #a0aec0; padding: 65px 0 55px 0; font-size: 15px; text-align: left; }
.footer-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-brand .logo-bold { font-size: 28px; font-weight: 800; color: #ffffff; }
.footer-brand .logo-light { font-size: 28px; font-weight: 800; color: var(--secondary-color); margin-left: 2px; }
.footer-brand-link { text-decoration: none; display: inline-flex; align-items: center; }
.company-info-block a { color: #cbd5e1; text-decoration: none; }
.company-info-block a:hover { color: var(--secondary-color); }
.brand-slogan { margin: 8px 0 0 0; font-size: 14px; color: #718096; }
.footer-links-group { display: flex; gap: 28px; }
.footer-links-group a { color: #cbd5e1; text-decoration: none; font-weight: 600; transition: color 0.2s; font-size: 15.5px; }
.footer-links-group a:hover { color: var(--secondary-color); }
.footer-links-group a.text-important { color: #ffffff; }
.footer-divider { border: 0; height: 1px; background: rgba(255,255,255,0.08); margin: 35px 0; }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.company-info-block { display: flex; flex-direction: column; gap: 10px; }
.info-text-line { margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; color: #718096; font-size: 14px; line-height: 1.6; }
.copyright-text { margin: 18px 0 0 0; font-size: 13px; color: #4a5568; }
.footer-sns-wrap { display: flex; gap: 14px; }
.footer-sns-wrap a { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 20px; text-decoration: none; transition: all 0.2s; }
.footer-sns-wrap a:hover { background: var(--secondary-color); color: #ffffff; }

/* 모바일 드로어 (기본: PC 숨김, media.css에서 1024 이하 표시) */
.mobile-menu-trigger { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.mobile-menu-trigger span { width: 100%; height: 2px; background-color: #0b132a; border-radius: 2px; transition: all 0.3s ease; }
.mobile-drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobile-drawer-overlay.is-active { opacity: 1; visibility: visible; }
.mobile-nav-drawer { position: fixed; top: 0; right: -320px; width: 300px; height: 100%; background: #ffffff; z-index: 2001; box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
.mobile-nav-drawer.is-active { right: 0; }
.drawer-header { padding: 26px 22px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
.drawer-close-btn { background: transparent; border: none; font-size: 26px; color: #4a5568; cursor: pointer; }
.drawer-body { padding: 24px; display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.drawer-menu-list { list-style: none; padding: 0; margin: 0 0 35px 0; display: flex; flex-direction: column; gap: 24px; }
.drawer-menu-list a { text-decoration: none; font-size: 19px; font-weight: 700; color: #0b132a; display: block; }
.drawer-menu-list a:hover,
.drawer-menu-list a.active { color: #004fb0; }
.drawer-footer-btns { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.drawer-footer-btns a { text-decoration: none; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.btn-drawer-login { background: #f1f5f9; color: #4a5568; }
.btn-drawer-cta { background: #004fb0; color: #ffffff; }

/* ==========================================================================
   [신규 병합 스펙] 로그인 상태에 따른 모바일 전용 프리미엄 유저 메뉴 모듈
   ========================================================================== */
.nav-open-overflow { overflow: hidden !important; touch-action: none; }
.mobile-user-info-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 14px; padding: 18px 16px; margin: 0 0 24px 0; text-align: left; border: 1px solid #bfdbfe; }
.mobile-avatar { font-size: 34px; color: #3b82f6; display: flex; align-items: center; justify-content: center; }
.mobile-welcome-text { font-size: 15px; color: #1e3a8a; line-height: 1.45; margin: 0; }
.mobile-welcome-text strong { color: #2563eb; font-weight: 800; font-size: 16px; }
.menu-divider-mobile { height: 1px; background-color: rgba(226,232,240,0.8); margin: 8px 0 20px 0; list-style: none; }
.mobile-submenu-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 16px; }
.mobile-submenu-list li a { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: #4a5568; text-decoration: none !important; transition: color 0.2s; }
.mobile-submenu-list li a i { color: #94a3b8; font-size: 15px; width: 18px; text-align: center; }
.mobile-submenu-list li a:hover { color: #004fb0; }
.mobile-submenu-list li a:hover i { color: #004fb0; }
.drawer-footer-btns a.btn-drawer-logout { background: #fef2f2; color: #ef4444; border: 1px solid #fca5a5; }
.drawer-footer-btns a.btn-drawer-logout:hover { background: #fee2e2; }