/* [style.css] 파일 맨 위에 추가 */

/* 1. 구글 웹폰트 (영문 필기체 + 기본 한글) */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pinyon+Script&family=Noto+Sans+KR:wght@400;700;900&display=swap');

/* 2. 눈누 웹폰트 (한글 도장용 서체) */
@font-face {
    font-family: 'ChosunIlbo_Myungjo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
}
@font-face {
    font-family: 'KCC-AhnJungGeun';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/KCC-AhnJungGeun.woff') format('woff');
}
@font-face {
    font-family: 'ChosunCentennial';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/ChosunCentennial.woff') format('woff');
}
@font-face {
    font-family: 'JeonjuWanpanbon';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/JeonjuWanpanbonP.woff2') format('woff2');
}
/* === Global Variables & Reset === */
        :root {
            /* [수정] 헤더 높이 축소 (70px -> 54px) */
            --header-height: 54px;
            --tally-main: #F81CE5;
            --tally-accent: #0070D7;
            --tally-text: #37352F;
            --tally-bg-gray: #F5F5F5;
            --tally-border: rgba(55, 53, 47, 0.09);
        }
        * { box-sizing: border-box; }
        
        body { 
            font-family: 'Inter', 'Noto Sans KR', sans-serif; 
            margin: 0; padding: 0; 
            overflow-x: hidden;
            transition: background-color 0.3s ease;
            /* 1. 폰트 렌더링 최적화 (기본) */
    -webkit-font-smoothing: antialiased;  /* 맥/크롬 계열 부드럽게 */
    -moz-osx-font-smoothing: grayscale;   /* 파이어폭스 부드럽게 */
    text-rendering: optimizeLegibility;   /* 자간/커닝 최적화 (글자가 겹치거나 깨지는 것 방지) */
    
    /* 2. [핵심] 윈도우 픽셀 깨짐 방지 트릭 */
    /* 아주 옅은 그림자를 주면 브라우저가 글자를 더 정밀하게 그립니다 */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.05); 
    
    /* 3. 시스템 폰트가 굴림/바탕으로 빠지지 않게 모던한 폰트 우선 지정 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
        

        /* === VIEW MODES === */
        body.mode-home, body.mode-pricing {
            background-color: #fff;
            color: var(--tally-text);
            overflow-y: auto;
        }

        /* Editor Mode Styles */
        body.mode-editor {
            /* [수정] 에디터 배경색: 검정에 가까운 숯색 */
            background-color: #18181b; 
            height: 100vh;
            overflow: hidden; 
            touch-action: none;
        }

        /* === HEADER (Sticky) === */
        header { 
            position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
            padding: 0 40px; 
            display: flex; justify-content: space-between; align-items: center; 
            z-index: 2000; 
            /* [수정] 헤더 배경 투명도 조정 및 구분선 제거 */
            background: rgba(255,255,255,0.85); 
            backdrop-filter: blur(12px);
            border-bottom: none; /* 구분선 제거 */
            transition: all 0.3s;
        }
        
        /* [수정] 에디터 모드 헤더: 단색 배경, 구분선 없음, 글씨 흰색 */
        body.mode-editor header {
            background-color: #18181b !important; /* 배경을 에디터와 동일한 단색으로 */
            border-bottom: none !important;       /* 구분선 삭제 */
            box-shadow: none !important;          /* 그림자 삭제 */
        }

        /* 헤더 글씨색 반전 (검정 배경이라 흰색으로) */
        body.mode-editor .logo { color: #fff !important; }
        body.mode-editor .nav-link { color: #a1a1aa !important; }
        body.mode-editor .nav-link:hover { color: #fff !important; }
        body.mode-editor .login-btn { color: #fff !important; border-color: #52525b !important; }
        body.mode-editor .header-create-btn { background: #fff !important; color: #000 !important; }
        
        .logo { font-weight: 700; font-size: 1.8rem; letter-spacing: -0.5px; cursor: pointer; color: #111; }
        .nav-link { font-size: 14px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.2s; margin-right: 24px; display: inline-block !important; }
        .nav-link:hover { color: #000; }
        /* [수정] 헤더 버튼 스타일 개편 */
        .btn-group { display: flex; align-items: center; gap: 15px; }

        /* 1. 로그인 버튼: 테두리/배경 제거, 폰트만 깔끔하게 */
        .login-btn { 
            padding: 0 !important; 
            border: none !important; 
            background: transparent !important; 
            font-size: 13px; 
            font-weight: 600; 
            color: #555; /* 기본 회색 */
            cursor: pointer; 
            display: inline-block !important;
            transition: color 0.2s;
        }
        .login-btn:hover { color: #000; }
        
        /* 에디터 모드(다크)일 때 로그인 버튼 색상 */
        body.mode-editor .login-btn { color: #a1a1aa !important; }
        body.mode-editor .login-btn:hover { color: #fff !important; }

        /* 2. Create 버튼: 패딩을 줄여서 글씨만 감싸도록(Compact) */
        .header-create-btn {
            background: #000; 
            color: #fff; 
            padding: 6px 14px; /* 패딩 축소 */
            border-radius: 6px; 
            font-size: 13px; 
            font-weight: 600; 
            border: 1px solid #000; /* 테두리 유지 */
            cursor: pointer;
            transition: all 0.2s;
        }
        .header-create-btn:hover { transform: translateY(-1px); opacity: 0.9; }

        /* 에디터 모드일 때 Create 버튼 (반전) */
        body.mode-editor .header-create-btn { 
            background: #fff !important; 
            color: #000 !important; 
            border-color: #fff !important;
        }

        /* === SECTION: LANDING PAGE === */
        #view-home { display: block; padding-top: var(--header-height); }
        #view-pricing { display: none; padding-top: var(--header-height); } 

        .hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 100px 20px 80px; min-height: 90vh; }
        .hero-img { position: absolute; top: 150px; pointer-events: none; z-index: 0; opacity: 0.9; }
        .img-left { left: 0; width: 20%; max-width: 300px; }
        .img-right { right: 0; width: 25%; max-width: 450px; }
        .hero-content { position: relative; z-index: 10; max-width: 800px; }
        .hero h1 { font-size: 64px; font-weight: 300; letter-spacing: -3px; line-height: 1.1; margin-bottom: 24px; color: #000; }
        .hero h1 b { font-weight: 800; }
        .hero p { font-size: 20px; color: #898884; margin-bottom: 40px; font-weight: 400; letter-spacing: -0.5px; }
        .main-create-btn {
            background: #000; color: #fff; padding: 18px 36px; border-radius: 12px;
            font-size: 1.1rem; font-weight: 700; transition: all 0.3s; margin-bottom: 60px; cursor: pointer; border: none;
        }
        .main-create-btn:hover { transform: scale(1.05); background: #333; }

        .video-wrapper {
            width: 100%; max-width: 900px; background: #fff; border-radius: 16px; margin: 0 auto;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1); border: 1px solid var(--tally-border);
            overflow: hidden; position: relative; z-index: 10;
        }
        .video-header { height: 40px; background: #f9fafb; border-bottom: 1px solid #eee; display: flex; align-items: center; padding: 0 16px; gap: 8px; }
        .dot { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; }
        .video-content { aspect-ratio: 16/9; background: #fff; width: 100%; display: flex; align-items: center; justify-content: center; }

        /* Pricing Area */
        .pricing-section { padding: 80px 20px 150px; text-align: center; background: #fff; }
        .pricing-grid { display: flex; gap: 24px; justify-content: center; margin-top: 60px; flex-wrap: wrap;}
        .p-card { width: 320px; padding: 40px; border-radius: 16px; text-align: left; border: 1px solid var(--tally-border); background: #fff; }
        .p-card.pro { border: 2px solid var(--tally-main); box-shadow: 0 20px 40px rgba(248, 28, 229, 0.05); }

        /* === SECTION: EDITOR APP === */
        #view-editor { 
            display: none; 
            height: 100vh;
            width: 100vw;
            flex-direction: column; 
            padding-top: var(--header-height); 
        }
        
        /* [수정] 배경 질감: 검정 종이 느낌 (Dark Paper) */
        .bg-texture {
            background-color: #18181b; /* 헤더와 똑같은 색 */
            background-image: none;    /* 중요: 종이질감 삭제 */
            color: #e4e4e7;
        }

        .viewer-container {
            flex-grow: 1; overflow: hidden; 
            display: flex; align-items: flex-start; justify-content: center;
            position: relative;
            touch-action: none; 
            transition: all 0.3s ease;
            width: 100%;
            height: calc(100vh - var(--header-height));
        }
        
        .sheet-wrapper { margin-top: 20px; transform-origin: top center; transition: transform 0.1s linear; backface-visibility: hidden; transform: translateZ(0); }
        .a4-sheet { width: 210mm; height: 295mm; overflow: hidden; background: white; padding: 15mm 20mm 5mm 20mm; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; position: relative; margin: 0 auto; color: #000; }
        
        .watermark-container {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 60%; opacity: 0.05; pointer-events: none; z-index: 0;
            display: flex; justify-content: center; align-items: center;
        }
        .watermark-img { width: 100%; height: auto; filter: grayscale(100%); }

      /* [style.css] 맨 아래에 추가하여 레이어 순서(z-index) 강제 정리 */


        .draggable:hover { outline: 2px dashed #2563eb; border-radius: 4px; }
        .draggable:hover::after {
            content: "DRAG ✢";
            position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
            background: #2563eb; color: white; font-size: 10px; font-weight: 800;
            padding: 2px 6px; border-radius: 4px; pointer-events: none; white-space: nowrap;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .doc-header, .info-tbl, .content-area, .sender-area, .footer-wrapper { position: relative; z-index: 10; }
        .title-display, .content-area, .sender-display, .info-tbl, .footer-slogan, .footer-info { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .doc-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ef4444; padding-bottom: 5px; margin-bottom: 5px; min-height: 80px; }
        .header-left { display: flex; align-items: center; width: 65%; height: 100%; margin-right: 10px; }
        .logo-box { width: 65px; height: 65px; margin-right: 15px; position: relative; top: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; display: block; }
        .title-display { font-size: 27px; font-weight: 700; color: #1e3a8a; letter-spacing: -1px; text-align: left; line-height: 1.3; padding-top: 20px; width: 100%; white-space: nowrap; overflow: visible; display: block; }
        .slogan-wrapper { width: 35%; display: flex; justify-content: flex-end; align-items: center; padding-top: 30px; }
        .slogan-display { text-align: right; font-size: 14px; font-weight: 700; color: #6b7280; width: 100%; white-space: nowrap; overflow: visible; }
        .info-tbl { width: 100%; border-collapse: collapse; margin-bottom: 0px; table-layout: fixed; }
        .info-tbl th { width: 90px; text-align: left; font-weight: 900; color: #374151; font-size: 11pt; height: 28px; vertical-align: middle; }
        .info-tbl td { height: 28px; position: relative; vertical-align: middle; padding-left: 5px; font-size: 11pt; font-weight: bold !important; }
        .content-area { flex-grow: 1; line-height: 24px !important; text-align: left !important; word-break: keep-all !important; font-size: 11.5pt !important; letter-spacing: 0px !important; padding: 10px !important; margin: 0 !important; white-space: pre-wrap !important; outline: none; overflow: visible; }
        .content-area:hover { border-color: #e5e7eb; }
        .sender-area { position: relative; height: 50px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-top: 0px; padding-bottom: 0px; margin-bottom: 30px; }
        .sender-display { display: block; text-align: center; font-size: 24pt; font-weight: 900; letter-spacing: 2px; width: auto; margin: 0 auto; z-index: 1; line-height: 1.2; }
        .seal-box { position: absolute; left: 50%; margin-left: 90px; top: 50%; transform: translateY(-30%); width: 80px; height: 80px; cursor: pointer; z-index: 999 !important; display: flex; align-items: center; justify-content: center; }
        #seal-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
        .footer-wrapper { margin-top: auto; }
        .footer-slogan-wrapper { text-align:center; margin-bottom:5px; }
        .footer-slogan { font-weight:bold; color:#1e3a8a; font-size: 11pt; }
        .footer-info { border-top: 2px solid #9ca3af; padding-top: 10px; font-size: 10pt; line-height: 1.6; color: #4b5563; display: flex; justify-content: space-between; }
        .hidden { display: none !important; }

        /* Panel Design */
        .control-panel { 
            position: fixed; 
            bottom: 20px; left: 20px; right: 20px; width: auto; 
            height: 35vh; 
            z-index: 9999;
            border-radius: 20px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.2s ease-out;
            transform: translateY(120%);
            display: flex; flex-direction: column;
            overflow: hidden;
            /* [수정] 배경색 다크 모드 */
            background-color: #18181b;
        }
        .control-panel.active { transform: translateY(0); }
        .control-panel.dragging { transition: none; }
        .drag-handle-bar { width: 100%; height: 30px; background: rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; flex-shrink: 0; cursor: ns-resize; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .drag-handle-pill { width: 40px; height: 4px; background: #555; border-radius: 10px; }

        .zoom-control-bar {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
            z-index: 100; background: white; padding: 4px 8px; 
            border-radius: 100px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid #eee;
            display: flex; align-items: center; gap: 8px; transition: all 0.3s;
        }
        .zoom-btn { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; color: #555; cursor: pointer; transition: background 0.2s; font-size: 13px; border: none; }
        .zoom-btn:hover { background: #f3f4f6; color: #000; }
        .zoom-text { font-size: 12px; font-weight: 600; color: #333; min-width: 40px; text-align: center; }
        .zoom-divider { width: 1px; height: 14px; background: #eee; }

        .fab-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 10000; align-items: center; }
        .fab-btn { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.2s; border: none; }
        .fab-btn:active { transform: scale(0.95); }
        .fab-toggle { background: #000; }
        .fab-print { background: #4b5563; }

        @media (min-width: 1024px) {
            #view-editor { flex-direction: row; } 
            .control-panel { 
                position: static; 
                width: 400px !important; min-width: 400px !important; 
                height: calc(100vh - var(--header-height) - 30px); 
                margin: 15px; border-radius: 20px;
                transform: none !important; box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
                flex-shrink: 0; 
                border: 1px solid #333; /* 다크모드 경계선 */
            }
            .drag-handle-bar { display: none; }
            .viewer-container { padding: 30px; overflow: auto; }
            .fab-toggle { display: none; }
            .zoom-control-bar { margin-left: 200px; }
        }

        /* [수정] 다크 모드 탭 스타일 */
        .tab-header { 
            display: flex; 
            border-bottom: none; /* 전체 밑줄 삭제 */
            background: transparent; 
            flex-shrink: 0; 
            padding: 15px 10px 5px 10px; /* 패딩 조정 */
            gap: 8px; /* 버튼 사이 간격 추가 */
        }

        /* [수정] 탭 버튼: 모서리 둥글게 + 배경 설정 */
        .tab-btn { 
            flex: 1; 
            padding: 10px 0; 
            text-align: center; 
            font-size: 0.8rem; 
            font-weight: 600; 
            color: #71717a; /* 비활성 글씨색 (회색) */
            cursor: pointer; 
            
            /* 핵심: 모서리 둥글게 */
            border-radius: 12px; 
            border: 1px solid transparent; /* 테두리 초기화 */
            background-color: rgba(255, 255, 255, 0.03); /* 비활성 배경 (아주 연하게) */
            transition: all 0.2s;
        }

        /* [수정] 활성화된 탭: 흰색 배경 + 둥근 모서리 유지 */
        .tab-btn.active { 
            color: #000; /* 활성 글씨 (검정) */
            background-color: #fff; /* 활성 배경 (흰색) */
            border: none; /* 테두리 없음 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 살짝 뜨는 느낌 */
        }
        
        .tab-content { display: none; padding: 16px; overflow-y: auto; height: 100%; padding-bottom: 80px; }
        .tab-content.active { display: block; }

        .input-group { margin-bottom: 10px; }
        .input-label { display: block; font-size: 0.7rem; font-weight: 700; color: #a1a1aa; margin-bottom: 4px; }
        .input-field { 
            width: 100%; padding: 8px 10px;
            border: 1px solid #444; border-radius: 8px; 
            font-size: 0.85rem; background: #27272a; color: #fff; /* 인풋도 어둡게 */
            transition: all 0.2s; 
        }
        .input-field:focus { outline: none; border-color: #777; background: #27272a; }
        .input-field::placeholder { color: #52525b; }

        .btn { width: 100%; padding: 8px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer; margin-top: 4px; border: 1px solid transparent; }
        .btn-purple { background: #fff; color: #000; } 
        .btn-gray { background: #3f3f46; color: #fff; border: 1px solid #52525b; }
        .btn-orange { background: #3f3f46; color: #fff; border: 1px solid #52525b; } 
        .btn-green { background: #3f3f46; color: #fff; border: 1px solid #52525b; } 

        body.preview-mode .control-panel { display: none; }
        body.preview-mode .viewer-container { padding: 20px; }
        body.preview-mode .zoom-control-bar { margin-left: 0; bottom: 30px; }

        @media print {
            @page { size: A4; margin: 0; }
            body, body.mode-editor, body.mode-home, body.mode-pricing { background: white; height: auto; overflow: visible; display: block; }
            header, #view-home, #view-pricing, .control-panel, .fab-container, .viewer-container::-webkit-scrollbar, .zoom-control-bar { display: none !important; }
            #view-editor { display: block !important; height: auto; padding-top: 0; }
            .viewer-container { padding: 0; margin: 0; overflow: visible; display: block; height: auto; background: white; }
            .sheet-wrapper { margin: 0 !important; transform: none !important; box-shadow: none !important; }
            .a4-sheet { margin: 0 !important; box-shadow: none !important; width: 210mm !important; height: 295mm !important; page-break-after: avoid; }
        }

        /* [모바일 전용 스타일] */
        @media (max-width: 768px) {
            /* 1. 헤더 여백 최소화하여 전체 가로 공간 확보 */
            header { 
                padding: 0 20px !important; 
                height: 54px !important; 
                justify-content: space-between !important;
            }
            
            /* 2. 로고 크기 살짝 줄여서 우측 공간 더 주기 */
            .logo { 
                font-size: 1.15rem !important; 
                letter-spacing: -1px; 
                flex-shrink: 0; /* 로고가 압축되지 않게 보호 */
            }

            /* 3. 우측 버튼들을 감싸는 컨테이너 간격 극소화 */
            .flex.gap-4.md\:gap-8 { 
                gap: 5px !important; 
                flex-grow: 1; /* 가용 공간을 왼쪽으로 확장 */
                justify-content: flex-end;
            }

            /* 4. 링크 및 로그인 버튼 줄바꿈 절대 방지 */
            .nav-link { 
                display: inline-block !important; 
                font-size: 11px !important; 
                margin-right: 4px !important; 
                white-space: nowrap; /* 글자 줄바꿈 방지 */
            }

            .login-btn { 
                display: inline-block !important; 
                font-size: 11px !important; 
                padding: 5px 4px !important; /* 패딩 축소 */
                white-space: nowrap !important; /* 이름 길어져도 한 줄 고정 */
                max-width: none !important; /* 쩜쩜쩜 방지 */
            }

            /* 5. Create 버튼: 고정 크기 유지하여 아래로 밀림 방지 */
            .header-create-btn {
                font-size: 11px !important; 
                padding: 5px 8px !important;
                white-space: nowrap !important; 
                flex-shrink: 0 !important; /* 공간 부족해도 버튼 형태 유지 */
            }

            /* 6. 버튼 그룹 간격 축소 */
            .btn-group { gap: 4px !important; flex-shrink: 0; }

            /* Pricing 섹션 등 나머지는 그대로 유지 */
            .pricing-section { padding: 20px 15px 60px !important; }
            .pricing-section h2 { font-size: 1.8rem !important; margin-bottom: 5px !important; }
            .pricing-section p { font-size: 0.9rem !important; margin-bottom: 20px !important; }
            .pricing-grid { flex-direction: column !important; margin-top: 10px !important; gap: 12px !important; }
            .p-card { width: 100% !important; padding: 20px !important; border-radius: 12px !important; }
        }

            .hero { min-height: auto !important; padding-bottom: 40px !important; }
            .hero h1 { font-size: 28px !important; letter-spacing: -1px !important; margin-bottom: 15px !important; }
            .hero p { font-size: 14px !important; margin-bottom: 20px !important; word-break: keep-all; padding: 0 10px; }
            
            .hero i {
                color: #cbd5e1 !important; 
                opacity: 0.4 !important;    
                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
            }
            .hero .fa-file-lines, .hero .fa-pen-nib, .hero .fa-stamp, .hero .fa-envelope-open-text {
                font-size: 60px !important; 
            }
            .hero .fa-paperclip { font-size: 40px !important; }

            .control-panel { width: auto !important; left: 10px !important; right: 10px !important; }
            .mobile-hide { display: none !important; }

            /* [수정] 모바일 AI 입력창 하단 삼각형 표시 */
            textarea#ai-prompt {
                background-image: linear-gradient(135deg, transparent 96%, #ffffff 96%) !important;
                background-repeat: no-repeat !important;
                background-position: bottom right !important;
                background-size: 15px 15px !important;
            }

        /* [PC 전용 스타일] */
        @media (min-width: 769px) {
            .nav-link, 
            .login-btn, 
            .header-create-btn {
                font-family: 'Inter', sans-serif !important;
                font-size: 15px !important;   
                font-weight: 500 !important;  
                letter-spacing: -0.3px !important;
                line-height: 1 !important;    
            }
            .nav-link { margin-right: 32px !important; }
            .btn-group { gap: 32px !important; }
            .header-create-btn { padding: 8px 16px !important; }
        }   
        @media (min-width: 769px) {
    .hero h1 {
        font-size: 64px !important; /* 원래 크기 64px로 복구 */
        line-height: 1.1 !important;
        letter-spacing: -3px !important;
        margin-bottom: 24px !important;
    }

    .hero p {
        font-size: 20px !important; /* 원래 크기 20px로 복구 */
        margin-bottom: 40px !important;
        color: #898884 !important;
    }
}
        @keyframes hard-blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .cursor-active {
            animation: hard-blink 1s infinite;
        }

        /* PC에서는 기본 리사이저 사용 */
        textarea#ai-prompt {
            resize: vertical;
            background-image: none;
        }
        /* [추가] 언어 선택기(Select) 스타일: Pricing, Login과 완벽 통일 */
        .lang-selector select {
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;    /* 다른 메뉴와 크기 통일 */
            font-weight: 500 !important;   /* 두께 통일 */
            color: #555 !important;        /* 기본 회색 */
            cursor: pointer;
            border: none;
            background: transparent;
            outline: none;
            padding: 0 5px;
            height: 30px; /* 높이 고정 */
        }

        /* 호버 시 진하게 */
        .lang-selector select:hover { color: #000 !important; }

        /* [핵심] 에디터 모드(다크모드)에서 색상 반전 */
        body.mode-editor .lang-selector select {
            color: #fff !important; /* 흰색으로 변경 */
        }
        
        /* 주의: 드롭다운 펼쳤을 때 옵션창은 흰 배경이므로 글씨는 검정이어야 함 */
        body.mode-editor .lang-selector select option {
            color: #000 !important; 
            background: #fff !important;
        }
        /* [추가] 모바일 화면에서 언어 선택기 크기 축소 (다른 버튼과 통일) */
        @media (max-width: 768px) {
            .lang-selector { 
                margin-right: 8px !important; /* 간격 좁힘 */
            }
            .lang-selector select {
                font-size: 11px !important;   /* Pricing 등과 동일하게 11px로 축소 */
                height: 24px !important;      /* 높이도 컴팩트하게 */
                padding: 0 !important;        /* 불필요한 여백 제거 */
                
            }
        }
      /* [복구] PC 버전 전용: 메인 배경 아이콘 및 텍스트 크기 최적화 */
@media (min-width: 769px) {
    /* 1. 메인 텍스트 크기 원상복구 */
    .hero h1 {
        font-size: 64px !important;
        line-height: 1.1 !important;
        letter-spacing: -3px !important;
        margin-bottom: 24px !important;
    }
    .hero p {
        font-size: 20px !important;
        margin-bottom: 40px !important;
        color: #898884 !important;
    }

    /* 2. 배경 아이콘(이미지) 크기 강제 확대 */
    /* HTML에 인라인으로 적힌 140px, 150px 등이 무시되지 않도록 PC에서만 다시 고정합니다. */
    .hero .fa-file-lines { font-size: 140px !important; }
    .hero .fa-pen-nib { font-size: 150px !important; }
    .hero .fa-stamp { font-size: 120px !important; }
    .hero .fa-envelope-open-text { font-size: 110px !important; }
    .hero .fa-paperclip { font-size: 80px !important; }

    /* 3. 아이콘들 위치 미세 조정 (글씨와 겹치지 않게 더 바깥으로) */
    .hero i.fa-file-lines { transform: rotate(-15deg) translate(-20px, -20px); }
    .hero i.fa-pen-nib { transform: rotate(15deg) translate(20px, -20px); }
}  
    /* [긴급 수정] PC 화면에서 입력창 너무 넓어지는 오류 방지 */
    @media (min-width: 768px) {
        #ai-prompt {
            max-width: 600px !important; /* 너비를 600px로 제한 */
            margin-left: auto !important; /* 가운데 정렬 */
            margin-right: auto !important; /* 가운데 정렬 */
            display: block !important;
        }
    }
    .label-justify {
    width: 100%;
    display: inline-block;
    text-align: justify;       /* 글자 양쪽 정렬 */
    text-align-last: justify;  /* 마지막 줄까지 강제 정렬 */
    text-justify: inter-character; /* 글자(자소) 단위로 간격 벌림 */
}

/* 크롬/사파리 등에서 한 줄일 때 정렬이 안 먹는 경우를 대비한 꼼수 */
.label-justify::after {
    content: "";
    display: inline-block;
    width: 100%;
}
.doc-header, 
.sender-area,
.header-left {
    position: relative;
    z-index: 20 !important; 
    overflow: visible !important; /* 칸 밖으로 나가도 잘리지 않게 */
}

/* 2. 글자를 적는 본문과 하단 정보는 '하위 레이어(10층)'로 설정 */
/* 드래그 박스가 이 위를 덮을 수 있게 됩니다. */
.content-area, 
#main-content,
.footer-wrapper,
.footer-info,
table {
    position: relative;
    z-index: 10 !important;
}

/* 3. 드래그 박스 자체는 부모 안에서 가장 높게(100층) 설정 */
.draggable {
    position: absolute;
    z-index: 100 !important;
    cursor: move;
    
    /* 모바일 터치 오류 방지 */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}