/*
 * 파일명: index.css
 * 위치: /assets/css/index.css
 * 기능: URL.KR 메인 페이지 스타일시트 (최적화됨)
 * 작성일: 2025-07-19
 * 수정일: 2025-07-21
 */

/* ===================================
 * Google AdSense 호환성 설정
 * =================================== */

/* Google AdSense aria-hidden 속성으로 인한 페이지 차단 방지 */
body[aria-hidden="true"] {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Side Rail 광고 차단 (수익에 미치는 영향 최소화) */
ins.adsbygoogle[data-side-rail-status] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
}

/* Side Rail 관련 모든 요소 차단 */
.left-side-rail-edge,
.left-side-rail-dismiss-btn {
    display: none !important;
}

/* ===================================
 * 레이어 우선순위 (Z-Index) 관리
 * =================================== */

/* 
 * Z-Index 계층 구조:
 * - 고정 헤더: 1030 (Bootstrap 기본값 유지)
 * - 챗봇 메뉴: 1000 (사용자 상호작용 요소)
 * - 푸터: 10 (기본 컨텐츠보다 약간 위)
 * - 기타 요소: auto (기본값 사용)
 */

/* 고정 헤더 - Bootstrap 기본값 유지 */
header.site-header {
    z-index: 1030 !important;
}

/* 챗봇 플로팅 메뉴 - 사용자 상호작용을 위한 높은 우선순위 */
.chatbot-menu-container {
    z-index: 1000;
}

/* 챗봇 메뉴 아이템 툴팁 - 메뉴보다 약간 위 */
.chatbot-menu-tooltip {
    z-index: 1001;
}

/* 푸터 - 기본 컨텐츠보다 약간 위 */
.site-footer {
    z-index: 10;
}

/* ===================================
 * CSS 변수 정의
 * =================================== */
:root {
    /* 주요 색상 */
    --primary-color: #0066ff;
    --primary-color-dark: #0052cc;
    --secondary-color: #1a1d29;
    --white: #ffffff;
    
    /* 그레이 스케일 */
    --gray-50: #fafbfc;
    --gray-100: #f4f6f8;
    --gray-200: #e5e8ec;
    --gray-300: #d1d5db;
    --gray-600: #6b7280;
    --gray-700: #374151;
    
    /* 기능 색상 */
    --success-color: #10b981;
    
    /* 디자인 시스템 */
    --border-radius: 16px;
    --border-radius-sm: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* ===================================
 * 기본 설정 및 글로벌 스타일
 * =================================== */

/* HTML, Body 기본 설정 */
html, body {
    height: 100%;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    color: var(--secondary-color);
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* 메인 컨텐츠 플렉스 설정 */
main {
    flex: 1;
}

/* ===================================
 * H1 브라우저 경고 해결
 * =================================== */

/* 브라우저별 H1 크기 일관성 확보 */
html body h1 {
    font-size: 2rem !important;
}

/* 시맨틱 요소 내 H1 크기 통일 */
html body article h1,
html body aside h1, 
html body nav h1, 
html body section h1,
html body main h1 {
    font-size: 2rem !important;
}

/* 텍스트 그라디언트 클래스 예외 처리 */
html body .text-gradient {
    font-size: 2.5rem !important;
}

/* ===================================
 * 헤더 네비게이션
 * =================================== */

/* 고정 헤더 스타일 */
header.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    transition: var(--transition);
}

/* 브랜드 로고 */
.navbar-brand {
    font-size: 1.875rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

/* 네비게이션 링크 */
.nav-link {
    color: var(--gray-700) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(0, 102, 255, 0.1);
}

/* 고정 헤더로 인한 컨텐츠 여백 */
html body {
    padding-top: 80px !important;
}

@media (max-width: 991.98px) {
    html body {
        padding-top: 72px !important;
    }
}

/* ===================================
 * 히어로 섹션
 * =================================== */

/* 메인 히어로 영역 */
.hero-section {
    padding: 3rem 0 2rem;
    text-align: center;
}

/* 히어로 제목 */
.hero-section h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 히어로 설명 텍스트 */
.hero-section p {
    color: var(--gray-600);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* ===================================
 * URL 입력 폼 디자인
 * =================================== */

/* 폼 컨테이너 */
.url-form-container {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

/* 폼 상단 그라디언트 바 */
.url-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #7c3aed 50%, var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

/* 그라디언트 바 애니메이션 */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* URL 입력 레이블 */
.url-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 입력 그룹 컨테이너 */
.modern-input-group {
    display: flex;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 2px solid #e5e7eb;
    transition: var(--transition);
    overflow: hidden;
}

/* 입력 그룹 호버 및 포커스 상태 */
.modern-input-group:hover,
.modern-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
    transform: translateY(-2px);
}

/* 입력 아이콘 */
.modern-input-icon {
    background: linear-gradient(135deg, var(--primary-color), #4d94ff);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
}

/* URL 입력 필드 */
.modern-input-field {
    border: none;
    background: transparent;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    flex: 1;
    outline: none;
}

/* 입력 필드 플레이스홀더 */
.modern-input-field::placeholder {
    color: #9ca3af;
}

/* ===================================
 * reCAPTCHA 스타일링
 * =================================== */

/* reCAPTCHA 컨테이너 */
.modern-recaptcha-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px dashed #d1d5db;
    transition: var(--transition);
}

.modern-recaptcha-container:hover {
    border-color: #7c3aed;
    transform: translateY(-2px);
}

/* ===================================
 * 이용약관 동의 박스
 * =================================== */

/* 동의 박스 */
.modern-agreement-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    transition: var(--transition);
}

/* 동의 배지 */
.modern-agreement-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.8rem;
}

/* 체크박스 컨테이너 */
.modern-form-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* 커스텀 체크박스 */
.modern-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    appearance: none;
    background: #ffffff;
    cursor: pointer;
    transition: var(--transition);
}

.modern-checkbox:checked {
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
}

.modern-checkbox:checked::after {
    content: '✓';
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 동의 레이블 */
.modern-agreement-label {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
    cursor: pointer;
    flex: 1;
    transition: var(--transition);
}

.modern-agreement-label:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* ===================================
 * 제출 버튼
 * =================================== */

/* 메인 제출 버튼 */
.modern-submit-btn {
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    border: none;
    border-radius: 16px;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    width: 100%;
    min-height: 56px;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.modern-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.modern-submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* ===================================
 * 결과 표시 섹션
 * =================================== */

/* 결과 컨테이너 */
.modern-result-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    max-width: 100% !important;
    width: 100% !important;
    display: none;
    animation: slideInUp 0.5s ease-out;
}

/* 결과 URL 박스 */
.result-url-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: none !important;
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

/* URL 표시 영역 */
.url-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.url-display input {
    width: 100% !important;
    min-width: 300px !important;
    max-width: none !important;
    font-size: 0.9rem;
    padding: 0.5rem;
    border: 1px solid #e5e8ec;
    border-radius: 8px;
}

/* 복사 버튼 */
.copy-btn {
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ===================================
 * 추가 메뉴 컨테이너
 * =================================== */

/* 메뉴 컨테이너 */
.modern-menu-container {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-md);
    display: none;
}

/* 메뉴 컨텐츠 그리드 */
.menu-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

/* QR 코드 이미지 */
.qr-image {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* 액션 버튼 그리드 */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* 액션 버튼 */
.action-btn {
    background: #ffffff;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 0.85rem;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* 액션 버튼 색상 변형 */
.action-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), #4d94ff);
    color: #ffffff;
}

.action-btn.secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #ffffff;
}

.action-btn.success {
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: #ffffff;
}

/* ===================================
 * 웹툴 섹션
 * =================================== */

/* 웹툴 전체 섹션 */
.webtools-section {
    background: rgba(0, 102, 255, 0.03);
    padding: 2rem 0;
    margin: 2rem 0;
    border-radius: var(--border-radius);
}

/* 웹툴 헤더 */
.webtools-header {
    text-align: center;
    margin-bottom: 2rem;
}

.webtools-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 웹툴 그리드 */
.webtools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

/* 웹툴 개별 아이템 */
.webtool-item {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--gray-700);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 70px;
}

.webtool-item:hover {
    color: #7c3aed;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.webtool-item:last-child {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff !important;
}

/* ===================================
 * 광고 섹션
 * =================================== */

/* 광고 컨테이너 */
.ad-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border-radius: var(--border-radius);
    text-align: center;
    min-height: 350px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* AdSense 광고 스타일 최적화 */
.adsbygoogle {
    display: block !important;
    min-height: 280px !important;
    max-height: 320px !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* 커스텀 배너 버튼 */
.custom-banner .btn {
    font-size: 1.125rem;
    padding: 1rem 2rem;
    box-shadow: var(--shadow-md);
}

/* ===================================
 * 챗봇 플로팅 메뉴
 * =================================== */

/* 챗봇 메뉴 컨테이너 */
.chatbot-menu-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 메인 플로팅 버튼 */
.chatbot-float-button {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-float-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 102, 255, 0.4);
}

.chatbot-float-button.active {
    transform: rotate(45deg) scale(1.1);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);
}

/* 메인 버튼 말풍선 툴팁 */
.chatbot-main-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1d29;
    color: white;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: tooltipPulse 2s infinite;
}

.chatbot-main-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #1a1d29;
}

.chatbot-main-tooltip.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    pointer-events: none;
}

/* 메뉴 열릴 때 메인 툴팁 숨기기 */
.chatbot-float-button.active .chatbot-main-tooltip,
.chatbot-menu-items.active ~ .chatbot-float-button .chatbot-main-tooltip {
    opacity: 0 !important;
    transform: translateY(-50%) translateX(10px) !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 메뉴 닫힐 때 툴팁 지연 표시 */
.chatbot-float-button:not(.active) .chatbot-main-tooltip {
    transition-delay: 0.3s;
}

/* 툴팁 펄스 애니메이션 */
@keyframes tooltipPulse {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    }
    50% { 
        box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3); 
    }
}

/* 메뉴 아이템들 컨테이너 */
.chatbot-menu-items {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

.chatbot-menu-items.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* 개별 메뉴 아이템 */
.chatbot-menu-item {
    position: relative;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: 2px solid #e5e8ec;
}

.chatbot-menu-item:hover {
    transform: scale(1.1);
    border-color: #0066ff;
    color: #0066ff;
    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.2);
}

/* 메뉴 아이템별 호버 색상 */
.chatbot-menu-item.chatbot:hover {
    color: #0066ff;
    border-color: #0066ff;
}

.chatbot-menu-item.faq:hover {
    color: #10b981;
    border-color: #10b981;
}

.chatbot-menu-item.report:hover {
    color: #f59e0b;
    border-color: #f59e0b;
}

/* 메뉴 아이템 말풍선 툴팁 */
.chatbot-menu-tooltip {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: #1a1d29;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.chatbot-menu-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1a1d29;
}

.chatbot-menu-item:hover .chatbot-menu-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* 스태거드 애니메이션 효과 */
.chatbot-menu-items.active .chatbot-menu-item:nth-child(1) {
    transition-delay: 0.1s;
}

.chatbot-menu-items.active .chatbot-menu-item:nth-child(2) {
    transition-delay: 0.2s;
}

.chatbot-menu-items.active .chatbot-menu-item:nth-child(3) {
    transition-delay: 0.3s;
}

/* ===================================
* 푸터
* =================================== */

/* 사이트 푸터 */
.site-footer {
   background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
   padding: 2rem 0 3rem 0;
   margin-top: auto;
   border-top: 1px solid var(--gray-200);
   position: relative;
}

/* 푸터 링크 래퍼 */
.footer-links-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-bottom: 1rem;
}

/* 푸터 링크 버튼 */
.footer-link-btn {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 12px;
   font-size: 0.875rem;
   color: var(--primary-color);
   background-color: transparent;
   border: 1px solid var(--primary-color);
   border-radius: 6px;
   text-decoration: none;
   transition: var(--transition);
}

.footer-link-btn:hover {
   background-color: var(--primary-color);
   color: #ffffff;
   text-decoration: none;
}

/* ===================================
* 애니메이션 정의
* =================================== */

/* 슬라이드 업 애니메이션 */
@keyframes slideInUp {
   from {
       opacity: 0;
       transform: translateY(30px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* 체크마크 애니메이션 */
@keyframes checkmark {
   0% { transform: scale(0.8); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
}

/* ===================================
* 반응형 디자인 - 태블릿
* =================================== */
@media (max-width: 768px) {
   /* 히어로 섹션 모바일 최적화 */
   .hero-section h2 {
       font-size: 2.25rem;
   }
   
   /* 폼 컨테이너 모바일 최적화 */
   .url-form-container {
       padding: 1.5rem;
       border-radius: 16px;
   }
   
   /* 입력 요소 모바일 최적화 */
   .modern-input-icon {
       padding: 0.875rem 1rem;
   }
   
   .modern-input-field {
       padding: 0.875rem 1rem;
       font-size: 16px; /* iOS 자동 확대 방지 */
   }
   
   /* 제출 버튼 모바일 최적화 */
   .modern-submit-btn {
       padding: 0.875rem 1.5rem;
       font-size: 1rem;
       min-height: 50px;
   }
   
   /* 웹툴 그리드 모바일 최적화 */
   .webtools-grid {
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   }
   
   /* 메뉴 컨텐츠 모바일 최적화 */
   .menu-content {
       grid-template-columns: 1fr;
       text-align: center;
   }
   
   /* 액션 버튼 모바일 최적화 */
   .action-buttons {
       grid-template-columns: 1fr;
   }
   
   /* 결과 URL 박스 모바일 최적화 */
   .result-url-box {
       flex-direction: column;
       gap: 1rem;
   }
   
   /* 복사 버튼 모바일 최적화 */
   .copy-btn {
       width: 100%;
       justify-content: center;
   }
   
   /* 복사 성공 상태 스타일 */
   .copy-btn.success {
       background: linear-gradient(135deg, var(--success-color), #059669) !important;
       color: #ffffff !important;
   }

   .copy-btn.success i {
       animation: checkmark 0.3s ease;
   }
   
   /* 광고 컨테이너 모바일 최적화 */
   .ad-container {
       min-height: 320px;
       max-height: 370px;
       padding: 1rem;
   }
   
   /* 푸터 모바일 최적화 */
   .footer-links-wrapper {
       flex-direction: column;
       align-items: center;
   }
   
   .footer-link-btn {
       min-width: 140px;
       justify-content: center;
   }
   
   /* 챗봇 메뉴 모바일 최적화 */
   .chatbot-menu-container {
       bottom: 20px;
       right: 20px;
   }

   .chatbot-float-button {
       width: 55px;
       height: 55px;
       font-size: 1.3rem;
   }

   .chatbot-menu-item {
       width: 45px;
       height: 45px;
       font-size: 1.1rem;
   }

   .chatbot-main-tooltip {
       right: 65px;
       font-size: 0.8rem;
       padding: 8px 12px;
   }

   .chatbot-main-tooltip::after {
       border-width: 6px;
   }

   .chatbot-menu-tooltip {
       right: 55px;
       font-size: 0.8rem;
       padding: 6px 10px;
   }

   .chatbot-menu-tooltip::after {
       border-width: 5px;
   }
}

/* ===================================
* 반응형 디자인 - 모바일
* =================================== */
@media (max-width: 576px) {
   /* 히어로 섹션 소형 모바일 최적화 */
   .hero-section {
       padding: 2rem 0 1.5rem;
   }
   
   .hero-section h2 {
       font-size: 1.875rem;
   }
   
   /* 폼 컨테이너 소형 모바일 최적화 */
   .url-form-container {
       padding: 1rem;
       border-radius: 12px;
   }
   
   /* 웹툴 그리드 소형 모바일 최적화 */
   .webtools-grid {
       grid-template-columns: 1fr;
   }
   
   /* 광고 컨테이너 소형 모바일 최적화 */
   .ad-container {
       min-height: 300px;
       max-height: 350px;
       margin: 1.5rem 0;
   }
   
   /* 챗봇 메뉴 소형 모바일 최적화 */
   .chatbot-menu-container {
       bottom: 20px;
       right: 20px;
   }
   
   .chatbot-float-button {
       width: 60px;
       height: 60px;
       font-size: 1.5rem;
   }
   
   /* 챗봇 툴팁 소형 모바일 최적화 */
   .chatbot-main-tooltip {
       font-size: 0.75rem;
       padding: 6px 10px;
   }

   .chatbot-menu-tooltip {
       font-size: 0.75rem;
       padding: 5px 8px;
   }
}

/* ===================================
* 유틸리티 클래스
* =================================== */

/* 텍스트 그라디언트 유틸리티 */
.text-gradient {
   background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* 접근성 포커스 스타일 */
.btn:focus,
.form-control:focus,
.modern-input-field:focus,
.modern-submit-btn:focus {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* ===================================
* 성능 최적화
* =================================== */

/* 애니메이션 감소 설정 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
   * {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
   }
}