@charset "utf-8";

/*
 * Glass Flat Morphism CSS Framework
 * 글래스플랫모피즘 디자인 시스템
 * 
 * 이 프레임워크는 Microsoft Fluent Design에서 영감을 받은
 * Glass Flat Morphism 디자인 기법을 구현합니다.
 * 
 * 주요 특징:
 * - 반투명 유리 효과 (Glass Morphism)
 * - 플랫 디자인의 간결함
 * - 부드러운 그라데이션과 그림자
 * - 다크모드 완벽 지원
 * - 반응형 디자인
 */

/* ===== CSS 변수 정의 ===== */
:root {
    /* === 기본 색상 팔레트 === */
    --gfm-primary-color: #0078d4;
    --gfm-primary-hover: #106ebe;
    --gfm-primary-border: #0078d4;
    --gfm-primary-glow: rgba(0, 120, 212, 0.25);
    --gfm-primary-light: rgba(0, 120, 212, 0.1);
    
    --gfm-secondary-color: #605e5c;
    --gfm-secondary-hover: #484644;
    --gfm-secondary-light: rgba(96, 94, 92, 0.1);
    
    --gfm-success-color: #107c10;
    --gfm-success-hover: #0e6e0e;
    --gfm-success-light: rgba(16, 124, 16, 0.1);
    
    --gfm-warning-color: #ff8c00;
    --gfm-warning-hover: #e67e00;
    --gfm-warning-light: rgba(255, 140, 0, 0.1);
    
    --gfm-danger-color: #d13438;
    --gfm-danger-hover: #b92b2f;
    --gfm-danger-light: rgba(209, 52, 56, 0.1);
    
    --gfm-cancel-color: #8a8886;
    --gfm-cancel-hover: #797775;
    
    /* === 배경 색상 === */
    --gfm-body-bg: rgba(255, 255, 255, 0.95);
    --gfm-body-bg-translucent: rgba(255, 255, 255, 0.8);
    --gfm-body-bg-hover: rgba(243, 242, 241, 0.9);
    --gfm-subtle-bg: rgba(250, 249, 248, 0.85);
    --gfm-card-bg: rgba(255, 255, 255, 0.7);
    --gfm-overlay-bg: rgba(255, 255, 255, 0.6);
    
    /* === 입력 요소 색상 === */
    --gfm-input-bg: rgba(255, 255, 255, 0.9);
    --gfm-input-border: rgba(200, 198, 196, 0.8);
    --gfm-input-focus-border: var(--gfm-primary-color);
    
    /* === 텍스트 색상 === */
    --gfm-text-color: #323130;
    --gfm-text-color-light: #605e5c;
    --gfm-text-color-lighter: #8a8886;
    --gfm-text-color-inverted: #ffffff;
    --gfm-text-primary: var(--gfm-primary-color);
    --gfm-text-success: var(--gfm-success-color);
    --gfm-text-warning: var(--gfm-warning-color);
    --gfm-text-danger: var(--gfm-danger-color);
    
    /* === 테두리 색상 === */
    --gfm-border-color: rgba(200, 198, 196, 0.6);
    --gfm-border-color-light: rgba(237, 235, 233, 0.8);
    
    /* === 테두리 반지름 === */
    --gfm-border-radius: 8px;
    --gfm-border-radius-sm: 4px;
    --gfm-border-radius-lg: 12px;
    --gfm-border-radius-xl: 16px;
    --gfm-border-radius-2xl: 24px;
    
    /* === 그림자 === */
    --gfm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --gfm-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --gfm-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
    --gfm-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
    --gfm-shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.24);
    
    /* === 유리 효과 === */
    --gfm-glass-blur: blur(12px);
    --gfm-glass-blur-sm: blur(6px);
    --gfm-glass-blur-lg: blur(20px);
    --gfm-glass-blur-xl: blur(30px);
    
    /* === 타이포그래피 === */
    --gfm-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --gfm-font-size-xs: 0.75rem;
    --gfm-font-size-sm: 0.875rem;
    --gfm-font-size-base: 1rem;
    --gfm-font-size-lg: 1.125rem;
    --gfm-font-size-xl: 1.25rem;
    --gfm-font-size-2xl: 1.5rem;
    --gfm-font-size-3xl: 1.875rem;
    --gfm-font-size-4xl: 2.25rem;
    --gfm-line-height-base: 1.5;
    --gfm-line-height-tight: 1.25;
    --gfm-line-height-loose: 1.75;
    
    /* === 전환 효과 === */
    --gfm-transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --gfm-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --gfm-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === 간격 === */
    --gfm-spacing-xs: 0.25rem;
    --gfm-spacing-sm: 0.5rem;
    --gfm-spacing-md: 1rem;
    --gfm-spacing-lg: 1.5rem;
    --gfm-spacing-xl: 2rem;
    --gfm-spacing-2xl: 3rem;
}

/* === 다크 모드 변수 === */
[data-bs-theme="dark"] {
    --gfm-primary-color: #60a5fa;
    --gfm-primary-hover: #3b82f6;
    --gfm-primary-border: #60a5fa;
    --gfm-primary-glow: rgba(96, 165, 250, 0.25);
    --gfm-primary-light: rgba(96, 165, 250, 0.1);
    
    --gfm-secondary-color: #6b7280;
    --gfm-secondary-hover: #4b5563;
    --gfm-secondary-light: rgba(107, 114, 128, 0.1);
    
    --gfm-success-color: #34d399;
    --gfm-success-hover: #10b981;
    --gfm-success-light: rgba(52, 211, 153, 0.1);
    
    --gfm-warning-color: #fbbf24;
    --gfm-warning-hover: #f59e0b;
    --gfm-warning-light: rgba(251, 191, 36, 0.1);
    
    --gfm-danger-color: #f87171;
    --gfm-danger-hover: #ef4444;
    --gfm-danger-light: rgba(248, 113, 113, 0.1);
    
    --gfm-cancel-color: #9ca3af;
    --gfm-cancel-hover: #6b7280;
    
    --gfm-body-bg: rgba(17, 24, 39, 0.95);
    --gfm-body-bg-translucent: rgba(17, 24, 39, 0.8);
    --gfm-body-bg-hover: rgba(31, 41, 55, 0.9);
    --gfm-subtle-bg: rgba(31, 41, 55, 0.85);
    --gfm-card-bg: rgba(31, 41, 55, 0.7);
    --gfm-overlay-bg: rgba(17, 24, 39, 0.6);
    
    --gfm-input-bg: rgba(31, 41, 55, 0.9);
    --gfm-input-border: rgba(75, 85, 99, 0.8);
    
    --gfm-text-color: #f9fafb;
    --gfm-text-color-light: #d1d5db;
    --gfm-text-color-lighter: #9ca3af;
    --gfm-text-color-inverted: #111827;
    --gfm-text-primary: var(--gfm-primary-color);
    --gfm-text-success: var(--gfm-success-color);
    --gfm-text-warning: var(--gfm-warning-color);
    --gfm-text-danger: var(--gfm-danger-color);
    
    --gfm-border-color: rgba(75, 85, 99, 0.6);
    --gfm-border-color-light: rgba(55, 65, 81, 0.8);
}

/* ===== 기본 스타일 리셋 ===== */
.gfm-html {
    font-family: var(--gfm-font-family);
    line-height: var(--gfm-line-height-base);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gfm-body {
    background: var(--gfm-body-bg);
    color: var(--gfm-text-color);
    font-family: var(--gfm-font-family);
    font-size: var(--gfm-font-size-base);
    line-height: var(--gfm-line-height-base);
    transition: var(--gfm-transition-base);
}

/* ===== 배경 컨테이너 ===== */
.gfm-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.gfm-floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gfm-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gfm-primary-light), var(--gfm-secondary-light));
    animation: gfmFloat 20s ease-in-out infinite;
    opacity: 0.6;
}

.gfm-shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.gfm-shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: -5s;
}

.gfm-shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: -10s;
}

.gfm-shape-4 {
    width: 120px;
    height: 120px;
    top: 30%;
    right: 30%;
    animation-delay: -15s;
}

.gfm-shape-5 {
    width: 80px;
    height: 80px;
    bottom: 10%;
    right: 10%;
    animation-delay: -7s;
}

.gfm-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0.8;
}

[data-bs-theme="dark"] .gfm-gradient-overlay {
    background: linear-gradient(135deg, 
        rgba(17, 24, 39, 0.1) 0%, 
        rgba(17, 24, 39, 0.05) 50%, 
        rgba(17, 24, 39, 0.1) 100%);
}

@keyframes gfmFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-30px) rotate(120deg);
    }
    66% {
        transform: translateY(20px) rotate(240deg);
    }
}

/* ===== 사이트 컨테이너 ===== */
.gfm-site-container {
    position: relative;
    min-height: 100vh;
    background: var(--gfm-body-bg-translucent);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
}

/* ===== 네비게이션 바 ===== */
.gfm-navbar {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
    border-bottom: 1px solid var(--gfm-border-color);
    box-shadow: var(--gfm-shadow-sm);
    transition: var(--gfm-transition-base);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.gfm-navbar-content {
    padding: var(--gfm-spacing-sm) 0;
}

.gfm-logo-container {
    display: flex;
    align-items: center;
}

.gfm-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--gfm-transition-fast);
}

.gfm-logo-link:hover {
    transform: scale(1.05);
}

.gfm-logo-image {
    height: 40px;
    width: auto;
    margin: var(--gfm-spacing-sm);
    filter: drop-shadow(var(--gfm-shadow-sm));
}

/* ===== 테마 토글 ===== */
.gfm-theme-toggle,
.gfm-theme-toggle-hidden {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-card-bg);
    border: 1px solid var(--gfm-border-color);
    color: var(--gfm-text-color);
    text-decoration: none;
    transition: var(--gfm-transition-base);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
}

.gfm-theme-toggle:hover,
.gfm-theme-toggle-hidden:hover {
    background: var(--gfm-body-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    color: var(--gfm-text-color);
    text-decoration: none;
}

.gfm-theme-icon-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 드롭다운 메뉴 ===== */
.gfm-dropdown-menu {
    background: var(--gfm-card-bg) !important;
    backdrop-filter: var(--gfm-glass-blur) !important;
    -webkit-backdrop-filter: var(--gfm-glass-blur) !important;
    border: 1px solid var(--gfm-border-color) !important;
    border-radius: var(--gfm-border-radius-lg) !important;
    box-shadow: var(--gfm-shadow-xl) !important;
    padding: var(--gfm-spacing-sm) !important;
}

.gfm-dropdown-card {
    background: transparent;
    border: none;
    border-radius: var(--gfm-border-radius);
}

.gfm-dropdown-body {
    padding: var(--gfm-spacing-xs);
}

.gfm-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--gfm-spacing-sm) var(--gfm-spacing-md);
    margin: var(--gfm-spacing-xs) 0;
    background: transparent;
    border: none;
    border-radius: var(--gfm-border-radius);
    color: var(--gfm-text-color);
    text-decoration: none;
    transition: var(--gfm-transition-fast);
    cursor: pointer;
}

.gfm-dropdown-item:hover {
    background: var(--gfm-body-bg-hover);
    color: var(--gfm-text-color);
    transform: translateX(4px);
}

.gfm-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.gfm-theme-text {
    font-weight: 500;
}

/* ===== 관리자 및 메뉴 토글 ===== */
.gfm-admin-container,
.gfm-menu-container {
    display: flex;
    align-items: center;
}

.gfm-admin-toggle,
.gfm-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-card-bg);
    border: 1px solid var(--gfm-border-color);
    color: var(--gfm-text-color);
    text-decoration: none;
    transition: var(--gfm-transition-base);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
}

.gfm-admin-toggle:hover,
.gfm-menu-toggle:hover {
    background: var(--gfm-body-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    color: var(--gfm-text-color);
    text-decoration: none;
}

.gfm-admin-icon,
.gfm-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 메인 컨테이너 ===== */
.gfm-main-container {
    background: var(--gfm-body-bg-translucent);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    min-height: calc(100vh - 80px);
}

.gfm-content-wrapper {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border-radius: var(--gfm-border-radius-lg);
    border: 1px solid var(--gfm-border-color);
    box-shadow: var(--gfm-shadow-sm);
    transition: var(--gfm-transition-base);
}

.gfm-sidebar-wrapper {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border-radius: var(--gfm-border-radius-lg);
    border: 1px solid var(--gfm-border-color);
    box-shadow: var(--gfm-shadow-sm);
    transition: var(--gfm-transition-base);
}

/* ===== 푸터 컴포넌트 ===== */
.gfm-footer {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
    border-top: 1px solid var(--gfm-border-color);
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    margin-top: auto;
    padding: var(--gfm-spacing-2xl) 0 var(--gfm-spacing-xl) 0;
}

.gfm-footer-content {
    position: relative;
}

.gfm-footer-title {
    font-size: var(--gfm-font-size-xl);
    font-weight: 700;
    color: var(--gfm-text-color);
    margin-bottom: var(--gfm-spacing-lg);
    position: relative;
}

.gfm-footer-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--gfm-primary-color), var(--gfm-secondary-color));
    border-radius: var(--gfm-border-radius-sm);
}

.gfm-footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--gfm-spacing-md);
}

.gfm-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gfm-spacing-md);
    padding: var(--gfm-spacing-sm);
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-overlay-bg);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border: 1px solid var(--gfm-border-color-light);
    transition: var(--gfm-transition-base);
}

.gfm-contact-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    background: var(--gfm-body-bg-hover);
}

.gfm-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-primary-light);
    color: var(--gfm-primary-color);
    font-size: var(--gfm-font-size-lg);
    flex-shrink: 0;
}

.gfm-contact-info {
    flex: 1;
}

.gfm-contact-label {
    font-size: var(--gfm-font-size-sm);
    color: var(--gfm-text-color-light);
    font-weight: 500;
    margin-bottom: var(--gfm-spacing-xs);
}

.gfm-contact-value {
    font-size: var(--gfm-font-size-base);
    color: var(--gfm-text-color);
    font-weight: 600;
}

.gfm-business-info {
    background: var(--gfm-overlay-bg);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border: 1px solid var(--gfm-border-color-light);
    border-radius: var(--gfm-border-radius-lg);
    padding: var(--gfm-spacing-lg);
}

.gfm-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gfm-spacing-sm) 0;
    border-bottom: 1px solid var(--gfm-border-color-light);
}

.gfm-info-item:last-child {
    border-bottom: none;
}

.gfm-info-label {
    font-size: var(--gfm-font-size-sm);
    color: var(--gfm-text-color-light);
    font-weight: 500;
}

.gfm-info-value {
    font-size: var(--gfm-font-size-base);
    color: var(--gfm-text-color);
    font-weight: 600;
}

.gfm-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfm-spacing-lg);
    margin-bottom: var(--gfm-spacing-lg);
}

.gfm-footer-link {
    color: var(--gfm-text-color-light);
    text-decoration: none;
    font-weight: 500;
    padding: var(--gfm-spacing-sm) var(--gfm-spacing-md);
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-overlay-bg);
    border: 1px solid var(--gfm-border-color-light);
    transition: var(--gfm-transition-base);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
}

.gfm-footer-link:hover {
    color: var(--gfm-primary-color);
    background: var(--gfm-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-sm);
    text-decoration: none;
}

.gfm-copyright {
    font-size: var(--gfm-font-size-sm);
    color: var(--gfm-text-color-lighter);
    text-align: center;
    padding: var(--gfm-spacing-lg) 0;
    border-top: 1px solid var(--gfm-border-color-light);
    margin-top: var(--gfm-spacing-lg);
}

/* ===== 버튼 컴포넌트 ===== */
.gfm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--gfm-spacing-sm) var(--gfm-spacing-lg);
    font-size: var(--gfm-font-size-base);
    font-weight: 600;
    line-height: var(--gfm-line-height-tight);
    border-radius: var(--gfm-border-radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: var(--gfm-transition-base);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    position: relative;
    overflow: hidden;
}

.gfm-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.gfm-btn:hover::before {
    left: 100%;
}

.gfm-btn-primary {
    background: var(--gfm-primary-color);
    color: var(--gfm-text-color-inverted);
    border-color: var(--gfm-primary-border);
    box-shadow: var(--gfm-shadow-sm);
}

.gfm-btn-primary:hover {
    background: var(--gfm-primary-hover);
    color: var(--gfm-text-color-inverted);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    text-decoration: none;
}

.gfm-btn-secondary {
    background: var(--gfm-secondary-color);
    color: var(--gfm-text-color-inverted);
    border-color: var(--gfm-secondary-color);
    box-shadow: var(--gfm-shadow-sm);
}

.gfm-btn-secondary:hover {
    background: var(--gfm-secondary-hover);
    color: var(--gfm-text-color-inverted);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    text-decoration: none;
}

.gfm-btn-outline {
    background: var(--gfm-card-bg);
    color: var(--gfm-primary-color);
    border-color: var(--gfm-primary-color);
}

.gfm-btn-outline:hover {
    background: var(--gfm-primary-color);
    color: var(--gfm-text-color-inverted);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    text-decoration: none;
}

.gfm-btn-glass {
    background: var(--gfm-card-bg);
    color: var(--gfm-text-color);
    border-color: var(--gfm-border-color);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
}

.gfm-btn-glass:hover {
    background: var(--gfm-body-bg-hover);
    color: var(--gfm-text-color);
    transform: translateY(-2px);
    box-shadow: var(--gfm-shadow-md);
    text-decoration: none;
}

/* ===== 카드 컴포넌트 ===== */

/* 카드 리스트 아이템 */
.gfm-card-list-item {
  background: var(--gfm-card-bg);
  border-radius: var(--gfm-border-radius-md);
  box-shadow: var(--gfm-shadow-xs);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  transition: box-shadow 0.2s, background 0.2s;
}
.gfm-card-list-item:hover {
  background: var(--gfm-card-hover-bg, #f7fafd);
  box-shadow: var(--gfm-shadow-md);
}
[data-bs-theme="dark"] .gfm-card-list-item {
  background: var(--gfm-card-bg-dark, #23272f);
  box-shadow: var(--gfm-shadow-xs-dark, 0 1px 3px rgba(0,0,0,0.3));
}

/* 플러그인 아이템 */
.plugin-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gfm-card-bg);
  border-radius: var(--gfm-border-radius-sm);
  box-shadow: var(--gfm-shadow-xs);
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--gfm-border-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.plugin-premium {
  border-left-color: var(--gfm-primary, #4f8cff);
  background: linear-gradient(90deg, rgba(79,140,255,0.08) 0%, transparent 100%);
}
.plugin-free {
  border-left-color: var(--gfm-success, #22c55e);
  background: linear-gradient(90deg, rgba(34,197,94,0.08) 0%, transparent 100%);
}
.plugin-badge {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  border-radius: 1em;
  padding: 0.15em 0.7em;
  margin-left: 0.75em;
  background: var(--gfm-primary, #4f8cff);
  color: #fff;
}

/* 스텝 아이템 */
.gfm-step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.gfm-step-number {
  background: var(--gfm-primary, #4f8cff);
  color: #fff;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 1rem;
  font-size: 1.1rem;
  box-shadow: var(--gfm-shadow-xs);
}
.gfm-step-content {
  flex: 1;
}

/* 요약 리스트 */
.gfm-summary-list {
  margin: 0 0 0.5rem 0;
  padding: 0;
}
.gfm-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--gfm-border-color);
  font-size: 1rem;
}
.gfm-summary-item:last-child {
  border-bottom: none;
}

/* 성공 아이콘 */
.gfm-success-icon {
  font-size: 3rem;
  color: var(--gfm-success, #22c55e);
  margin-bottom: 0.5rem;
}

/* 버튼 그룹 */
.gfm-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* 닫기 버튼 */
.gfm-btn-close {
  background: none;
  border: none;
  color: var(--gfm-text-secondary, #888);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.5rem;
  transition: color 0.2s;
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
}
.gfm-btn-close:hover {
  color: var(--gfm-danger, #e11d48);
}

/* 카드 헤더 그라디언트 */
.gfm-card-header-gradient {
  background: linear-gradient(90deg, var(--gfm-primary, #4f8cff) 0%, var(--gfm-secondary, #a084e8) 100%);
}
[data-bs-theme="dark"] .gfm-card-header-gradient {
  background: linear-gradient(90deg, #23272f 0%, #4f8cff 100%);
}

/* 카드 인터랙티브 */
.gfm-card-interactive {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}
.gfm-card-interactive.selected, .gfm-card-interactive:active, .gfm-card-interactive:focus {
  box-shadow: 0 0 0 3px var(--gfm-primary, #4f8cff);
  border-color: var(--gfm-primary, #4f8cff);
  z-index: 2;
}

/* 카드 추천(Featured) */
.gfm-card-featured {
  border: 2px solid var(--gfm-primary, #4f8cff);
  box-shadow: 0 2px 8px rgba(79,140,255,0.10);
  position: relative;
}

/* 뱃지 */
.gfm-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  font-size: 0.85em;
  font-weight: 600;
  border-radius: 1em;
  background: var(--gfm-border-color, #e5e7eb);
  color: var(--gfm-text-secondary, #888);
  margin-bottom: 0.4em;
}
.gfm-badge-primary {
  background: var(--gfm-primary, #4f8cff);
  color: #fff;
}

/* 텍스트 유틸리티 */
.gfm-text-secondary {
  color: var(--gfm-text-secondary, #6c757d) !important;
}
.gfm-text-primary {
  color: var(--gfm-primary, #4f8cff) !important;
}
.gfm-text-success {
  color: var(--gfm-success, #22c55e) !important;
}
.gfm-text-warning {
  color: var(--gfm-warning, #f59e42) !important;
}

/* 기타 유틸리티 */
.gfm-container-md {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.gfm-card {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
    border: 1px solid var(--gfm-border-color);
    border-radius: var(--gfm-border-radius-lg);
    box-shadow: var(--gfm-shadow-md);
    transition: var(--gfm-transition-base);
    overflow: hidden;
    position: relative;
}

.gfm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gfm-shadow-xl);
}

/* Glass Card Variants */
.gfm-card-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--gfm-border-radius-xl);
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.15),
        inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .gfm-card-glass {
    background: rgba(17, 24, 39, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 2px 8px rgba(255, 255, 255, 0.05);
}

.gfm-card-glass-sm {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gfm-border-radius-lg);
    box-shadow: 
        0 4px 16px rgba(31, 38, 135, 0.1),
        inset 0 1px 4px rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .gfm-card-glass-sm {
    background: rgba(17, 24, 39, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 4px rgba(255, 255, 255, 0.02);
}

.gfm-card-header {
    padding: var(--gfm-spacing-lg);
    border-bottom: 1px solid var(--gfm-border-color-light);
    background: var(--gfm-overlay-bg);
}

.gfm-card-body {
    padding: var(--gfm-spacing-lg);
}

.gfm-card-footer {
    padding: var(--gfm-spacing-lg);
    border-top: 1px solid var(--gfm-border-color-light);
    background: var(--gfm-overlay-bg);
}

.gfm-card-title {
    font-size: var(--gfm-font-size-xl);
    font-weight: 700;
    color: var(--gfm-text-color);
    margin-bottom: var(--gfm-spacing-sm);
}

.gfm-card-text {
    color: var(--gfm-text-color-light);
    line-height: var(--gfm-line-height-loose);
}

/* ===== 인덱스 페이지 컴포넌트 ===== */
.gfm-section-content {
    position: relative;
    z-index: 1;
}

.gfm-marketing-emphasis {
    background: linear-gradient(135deg, 
        var(--gfm-body-bg-translucent) 0%, 
        var(--gfm-subtle-bg) 100%);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    position: relative;
    overflow: hidden;
}

.gfm-marketing-emphasis::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, var(--gfm-primary-light) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, var(--gfm-secondary-light) 0%, transparent 50%);
    opacity: 0.6;
    z-index: 0;
}

.gfm-emphasis-content {
    position: relative;
    z-index: 1;
}

.gfm-emphasis-badge {
    display: inline-block;
}

.gfm-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--gfm-spacing-sm) var(--gfm-spacing-lg);
    font-size: var(--gfm-font-size-sm);
    font-weight: 600;
    border-radius: var(--gfm-border-radius-2xl);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border: 1px solid var(--gfm-border-color);
    transition: var(--gfm-transition-base);
}

.gfm-badge-primary {
    background: var(--gfm-primary-light);
    color: var(--gfm-primary-color);
    border-color: var(--gfm-primary-color);
}

.gfm-emphasis-title {
    font-size: var(--gfm-font-size-4xl);
    font-weight: 800;
    color: var(--gfm-text-color);
    line-height: var(--gfm-line-height-tight);
    margin-bottom: var(--gfm-spacing-lg);
}

.gfm-text-primary {
    color: var(--gfm-text-primary);
}

.gfm-text-success {
    color: var(--gfm-text-success);
}

.gfm-text-warning {
    color: var(--gfm-text-warning);
}

.gfm-text-danger {
    color: var(--gfm-text-danger);
}

.gfm-emphasis-description {
    font-size: var(--gfm-font-size-lg);
    color: var(--gfm-text-color-light);
    line-height: var(--gfm-line-height-loose);
}

.gfm-emphasis-features {
    display: flex;
    flex-direction: column;
    gap: var(--gfm-spacing-md);
}

.gfm-feature-item {
    display: flex;
    align-items: center;
    gap: var(--gfm-spacing-md);
    padding: var(--gfm-spacing-sm);
    border-radius: var(--gfm-border-radius);
    background: var(--gfm-overlay-bg);
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
    border: 1px solid var(--gfm-border-color-light);
    transition: var(--gfm-transition-base);
}

.gfm-feature-item:hover {
    transform: translateX(8px);
    background: var(--gfm-body-bg-hover);
    box-shadow: var(--gfm-shadow-sm);
}

.gfm-feature-text {
    color: var(--gfm-text-color);
    font-weight: 500;
}

.gfm-emphasis-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gfm-visual-card {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
    border: 1px solid var(--gfm-border-color);
    border-radius: var(--gfm-border-radius-2xl);
    padding: var(--gfm-spacing-2xl);
    text-align: center;
    box-shadow: var(--gfm-shadow-xl);
    transition: var(--gfm-transition-base);
    position: relative;
    overflow: hidden;
}

.gfm-visual-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--gfm-primary-light), transparent);
    animation: gfmRotate 10s linear infinite;
    opacity: 0.3;
}

.gfm-visual-card > * {
    position: relative;
    z-index: 1;
}

@keyframes gfmRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.gfm-card-icon {
    font-size: 4rem;
    margin-bottom: var(--gfm-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 768px) {
    .gfm-emphasis-title {
        font-size: var(--gfm-font-size-3xl);
    }
    
    .gfm-card-icon {
        font-size: 3rem;
    }
    
    .gfm-visual-card {
        padding: var(--gfm-spacing-xl);
    }
    
    .gfm-footer-links {
        flex-direction: column;
        gap: var(--gfm-spacing-sm);
    }
    
    .gfm-contact-item {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== 유틸리티 클래스 ===== */
.gfm-glass {
    background: var(--gfm-card-bg);
    backdrop-filter: var(--gfm-glass-blur);
    -webkit-backdrop-filter: var(--gfm-glass-blur);
    border: 1px solid var(--gfm-border-color);
    box-shadow: var(--gfm-shadow-md);
}

.gfm-glass-sm {
    backdrop-filter: var(--gfm-glass-blur-sm);
    -webkit-backdrop-filter: var(--gfm-glass-blur-sm);
}

.gfm-glass-lg {
    backdrop-filter: var(--gfm-glass-blur-lg);
    -webkit-backdrop-filter: var(--gfm-glass-blur-lg);
}

.gfm-shadow-hover {
    transition: var(--gfm-transition-base);
}

.gfm-shadow-hover:hover {
    box-shadow: var(--gfm-shadow-xl);
    transform: translateY(-2px);
}

.gfm-border-gradient {
    position: relative;
    background: var(--gfm-card-bg);
    border-radius: var(--gfm-border-radius);
}

.gfm-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(135deg, var(--gfm-primary-color), var(--gfm-secondary-color));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

/* Glass Effect Classes */
.glass-base {
  background: var(--gfm-body-bg-translucent);
  backdrop-filter: var(--gfm-glass-blur);
  -webkit-backdrop-filter: var(--gfm-glass-blur);
  border: 1px solid var(--gfm-border-color);
  box-shadow: var(--gfm-shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gfm-border);
  box-shadow: 0 8px 32px 0 var(--gfm-shadow);
}

.glass-surface {
  background: var(--gfm-surface-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--gfm-border-light);
  box-shadow: 0 4px 16px 0 var(--gfm-shadow-light);
}

.glass-overlay {
  background: var(--gfm-overlay-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: var(--gfm-glass-border);
  box-shadow: 0 8px 32px 0 var(--gfm-shadow);
}

/* Typography System */
.gfm-display {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.gfm-h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}

.gfm-h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

.gfm-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.gfm-body-large {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

.gfm-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.gfm-body-small {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
}

.gfm-caption {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Button Components */
.gfm-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.gfm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gfm-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gfm-btn-primary {
  background-color: var(--gfm-primary);
  color: var(--gfm-text-inverse);
  border-color: var(--gfm-primary);
}

.gfm-btn-primary:hover {
  background-color: var(--gfm-primary-hover);
  border-color: var(--gfm-primary-hover);
}

.gfm-btn-secondary {
  background-color: transparent;
  color: var(--gfm-primary);
  border-color: var(--gfm-primary);
}

.gfm-btn-secondary:hover {
  background-color: rgba(0, 100, 255, 0.1);
}

.gfm-btn-success {
  background-color: var(--gfm-success);
  color: var(--gfm-text-inverse);
  border-color: var(--gfm-success);
}

.gfm-btn-success:hover {
  opacity: 0.9;
}

.gfm-btn-outline {
  background-color: transparent;
  color: var(--gfm-text-medium);
  border: 1px solid var(--gfm-border);
}

.gfm-btn-outline:hover {
  background-color: var(--gfm-surface-bg);
  color: var(--gfm-text-high);
}

/* Card Components */
.gfm-card {
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.gfm-card:hover {
  transform: translateY(-3px);
}

.gfm-card-title {
  margin-bottom: 1rem;
  font-weight: 600;
}

.gfm-card-body {
  padding: 1rem 0;
}

.gfm-card-footer {
  padding-top: 1rem;
  border-top: 1px solid var(--gfm-border);
}

/* Navigation Components */
.gfm-navbar {
  padding: 1rem;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--gfm-border);
}

.gfm-nav-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--gfm-text-medium);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.gfm-nav-link:hover {
  color: var(--gfm-primary);
  background-color: rgba(0, 100, 255, 0.05);
}

.gfm-nav-link.active {
  color: var(--gfm-primary);
  font-weight: 500;
  border-bottom: 2px solid var(--gfm-primary);
}

/* Form Components */
.gfm-form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--gfm-border);
  background-color: var(--gfm-base-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.2s ease;
}

.gfm-form-control:focus {
  border-color: var(--gfm-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 100, 255, 0.15);
  outline: 0;
}

.gfm-form-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gfm-text-high);
}

.gfm-form-group {
  margin-bottom: 1rem;
}

.gfm-form-text {
  color: var(--gfm-text-low);
  font-size: 0.875rem;
}

/* Utility Classes */
.gfm-shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.gfm-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gfm-shadow-lg {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.gfm-rounded-sm {
  border-radius: 4px;
}

.gfm-rounded {
  border-radius: 8px;
}

.gfm-rounded-lg {
  border-radius: 12px;
}

.gfm-transition {
  transition: all 0.3s ease;
}