app.py

import gradio as gr
import google.generativeai as genai
from PIL import Image
import os
import json
import tempfile
import re
import time
import logging

# 로깅 설정
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)

# Gemini API 키 설정 (환경 변수에서 가져오거나 직접 입력)
GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", "")

# Gemini API 초기화
genai.configure(api_key=GEMINI_API_KEY)

# 배경 JSON 파일 경로 설정 - 상대 경로 사용
BACKGROUNDS_DIR = "./background"

# 디버깅을 위한 정보 출력
print(f"현재 작업 디렉토리: {os.getcwd()}")
print(f"사용 중인 배경 디렉토리 경로: {BACKGROUNDS_DIR}")

# JSON 파일이 존재하지 않을 경우 디렉토리 생성
if not os.path.exists(BACKGROUNDS_DIR):
    os.makedirs(BACKGROUNDS_DIR)
    print(f"배경 디렉토리를 생성했습니다: {BACKGROUNDS_DIR}")
else:
    print(f"배경 디렉토리가 이미 존재합니다: {BACKGROUNDS_DIR}")
    try:
        for file in os.listdir(BACKGROUNDS_DIR):
            print(f"발견된 파일: {file}")
    except Exception as e:
        print(f"디렉토리 내용을 나열하는 중 오류 발생: {str(e)}")

# JSON 파일 로드 함수
def load_background_json(filename):
    file_path = os.path.join(BACKGROUNDS_DIR, filename)
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            data = json.load(f)
            print(f"{filename} 파일을 성공적으로 로드했습니다. {len(data)} 항목 포함.")
            return data
    except FileNotFoundError:
        print(f"경고: {filename} 파일을 찾을 수 없습니다. 기본값을 사용합니다.")
        return {}
    except json.JSONDecodeError:
        print(f"경고: {filename} 파일의 JSON 형식이 올바르지 않습니다. 기본값을 사용합니다.")
        return {}
    except Exception as e:
        print(f"경고: {filename} 파일 로드 중 오류 발생: {str(e)}. 기본값을 사용합니다.")
        return {}

# 배경 데이터 로드
SIMPLE_BACKGROUNDS = load_background_json("simple_backgrounds.json")
STUDIO_BACKGROUNDS = load_background_json("studio_backgrounds.json")
NATURE_BACKGROUNDS = load_background_json("nature_backgrounds.json")
INDOOR_BACKGROUNDS = load_background_json("indoor_backgrounds.json")
ABSTRACT_BACKGROUNDS = load_background_json("abstract_backgrounds.json")

# 배경이 로드되지 않은 경우 기본값 설정
if not SIMPLE_BACKGROUNDS:
    SIMPLE_BACKGROUNDS = {"화이트 배경": "white background"}
if not STUDIO_BACKGROUNDS:
    STUDIO_BACKGROUNDS = {"제품 사진 스튜디오": "product photography studio"}
if not NATURE_BACKGROUNDS:
    NATURE_BACKGROUNDS = {"열대 해변": "tropical beach"}
if not INDOOR_BACKGROUNDS:
    INDOOR_BACKGROUNDS = {"모던 리빙룸": "modern living room"}
if not ABSTRACT_BACKGROUNDS:
    ABSTRACT_BACKGROUNDS = {"네온 조명": "neon lights"}

def generate_system_instruction():
    return """당신은 상품 이미지의 배경을 변경하기 위한 고품질 프롬프트를 생성하는 전문가입니다.
사용자가 제공하는 상품명, 배경 유형, 추가 요청사항을 바탕으로 미드저니(Midjourney)에 사용할 수 있는 
상세하고 전문적인 프롬프트를 영어로 생성해주세요.
다음 가이드라인을 반드시 따라야 합니다:

1. 상품을 "#1"로 지정하여 참조합니다. (예: "skincare tube (#1)")

2. *** 매우 중요: 상품의 원래 특성(디자인, 색상, 형태, 로고, 패키지 등)은 어떤 상황에서도 절대 변경하지 않습니다. ***

3. *** 상품의 본질적 특성은 유지하되, 자연스러운 환경 통합을 위한 조명과 그림자는 허용합니다: ***
   - 상품 자체의 색상, 디자인, 형태, 텍스처는 절대 수정하지 않습니다.
   - 환경과 자연스럽게 어울리는 그림자, 주변 조명 효과는 허용됩니다.
   - 상품에 물방울, 응축, 금, 은과 같은 추가 요소나 물리적 효과는 적용하지 않습니다.
   - 환경에 어울리는 자연스러운 빛 반사, 주변 조명, 그림자는 사실적 통합감을 위해 적용할 수 있습니다.

4. 이미지 비율은 정확히 1:1(정사각형) 형식으로 지정합니다. 프롬프트에 "square format", "1:1 ratio" 또는 "aspect ratio 1:1"을 명시적으로 포함합니다.

5. 상품은 반드시 정사각형 구도의 정중앙에 배치되어야 합니다.

6. 상품을 이미지의 주요 초점으로 부각시키고, 상품의 비율이 전체 이미지에서 크게 차지하도록 합니다.

7. 상품 이미지 컷아웃(#1)의 기본 형태와 색상은 유지하면서, 선택한 환경에 자연스럽게 통합되도록 합니다.

8. 고급스러운 상업적 이미지를 위한 다음 환경 요소들을 포함하세요:
   - 상품과 어울리는 주변 환경/배경 요소를 추가합니다. 예를 들어, 화장품 주변에 꽃이나 허브, 음료 제품 옆에 과일, 전자제품 근처에 현대적 소품 등.
   - 환경의 조명 효과(림 라이트, 백라이트, 소프트박스 등)를 설명합니다.
   - 상품이 환경에 자연스럽게 존재하는 것처럼 보이도록 적절한 그림자와 빛 표현을 포함합니다.
   - 상품의 용도나 장점을 간접적으로 암시하는 배경 요소를 포함합니다.
   - 프로페셔널한 상업 사진 효과(선택적 피사계 심도, 소프트 포커스, 스튜디오 조명 등)를 명시합니다.

9. 프롬프트에 다음 요소들을 명시적으로 포함하세요:
   - "highly detailed commercial photography"
   - "award-winning product photography"
   - "professional advertising imagery"
   - "studio quality"
   - "magazine advertisement quality"

10. 배경 환경 요소를 상품 카테고리에 맞게 선택합니다:
    - 스킨케어 제품: 깨끗한 욕실 선반, 우아한 화장대, 스파 같은 환경 등
    - 음료 제품: 세련된 테이블, 파티 환경, 야외 피크닉 장면 등
    - 전자 제품: 세련된 작업 공간, 현대적인 거실, 미니멀한 책상 등
    - 패션/의류: 세련된 쇼룸, 도시 거리, 엘레강스한 라이프스타일 환경 등
    - 식품 제품: 깔끔한 주방, 식탁, 요리 환경 등

11. 사용자가 제공한 구체적인 배경과 추가 요청사항을 정확히 반영합니다.

12. 프롬프트는 미드저니 AI에 최적화되어야 합니다.

13. 프롬프트 끝에 "--ar 1:1 --s 750 --q 2" 파라미터를 추가하여 미드저니에서 고품질 정사각형 비율을 강제합니다.

출력 형식은 영어로 된 단일 단락의 상세한 프롬프트여야 하며, 끝에 미드저니 파라미터가 포함되어야 합니다.
"""

def generate_prompt_with_gemini(product_name, background_info, additional_info=""):
    if not GEMINI_API_KEY:
        return "Gemini API 키가 설정되지 않았습니다. 환경 변수 GEMINI_API_KEY를 설정하거나 코드에 직접 입력하세요."
    try:
        prompt_request = f"""
상품명: {product_name}
배경 유형: {background_info.get('english', 'studio')}
배경 카테고리: {background_info.get('category', '')}
배경 이름: {background_info.get('name', '')}
추가 요청사항: {additional_info}

중요 요구사항:
1. 상품이 크게 부각되고 이미지에서 중심적인 위치를 차지하도록 프롬프트를 생성해주세요.
2. 이미지는 정확히 1:1 비율(정사각형)이어야 합니다.
3. 상품은 정사각형 프레임의 정중앙에 위치해야 합니다.
4. 상품의 디자인, 색상, 형태, 로고 등 본질적 특성은 절대 수정하지 마세요.
5. 환경과의 자연스러운 통합을 위한 조명 효과와 그림자는 포함해주세요.
6. 상품을 더 돋보이게 하는 배경 환경을 설명해주세요.
7. 고급스러운 상업 광고 품질의 이미지가 되도록 환경 설명을 해주세요.
8. 프롬프트 끝에 미드저니 파라미터 "--ar 1:1 --s 750 --q 2"를 추가해주세요.

한국어 입력 내용을 영어로 적절히 번역하여 반영해주세요.
"""
        model = genai.GenerativeModel(
            'gemini-2.0-flash',
            system_instruction=generate_system_instruction()
        )
        response = model.generate_content(
            prompt_request,
            generation_config=genai.GenerationConfig(
                temperature=0.7,
                top_p=0.95,
                top_k=64,
                max_output_tokens=1024,
            )
        )
        response_text = response.text.strip()
        if "--ar 1:1" not in response_text:
            response_text = response_text.rstrip(".") + ". --ar 1:1 --s 750 --q 2"
        return response_text
    except Exception as e:
        return f"프롬프트 생성 중 오류가 발생했습니다: {str(e)}"

# 이미지 생성에 필요한 함수들
def save_binary_file(file_name, data):
    with open(file_name, "wb") as f:
        f.write(data)

def translate_prompt_to_english(prompt):
    if not re.search("[가-힣]", prompt):
        return prompt
    
    prompt = prompt.replace("#1", "IMAGE_TAG_ONE")
    prompt = prompt.replace("#2", "IMAGE_TAG_TWO")
    prompt = prompt.replace("#3", "IMAGE_TAG_THREE")
    
    try:
        if not GEMINI_API_KEY:
            logger.error("Gemini API 키가 설정되지 않았습니다.")
            prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
            prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
            prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
            return prompt
            
        model = genai.GenerativeModel('gemini-2.0-flash')
        translation_prompt = f"""
        Translate the following Korean text to English:
        
        {prompt}
        
        IMPORTANT: The tokens IMAGE_TAG_ONE, IMAGE_TAG_TWO, and IMAGE_TAG_THREE are special tags 
        and must be preserved exactly as is in your translation. Do not translate these tokens.
        """
        
        logger.info(f"Translation prompt: {translation_prompt}")
        response = model.generate_content(
            translation_prompt,
            generation_config=genai.GenerationConfig(
                temperature=0.2,
                top_p=0.95,
                top_k=40,
                max_output_tokens=512
            )
        )
        
        translated_text = response.text
        
        if translated_text.strip():
            translated_text = translated_text.replace("IMAGE_TAG_ONE", "#1")
            translated_text = translated_text.replace("IMAGE_TAG_TWO", "#2")
            translated_text = translated_text.replace("IMAGE_TAG_THREE", "#3")
            logger.info(f"Translated text: {translated_text.strip()}")
            return translated_text.strip()
        else:
            logger.warning("번역 결과가 없습니다. 원본 프롬프트 사용")
            prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
            prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
            prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
            return prompt
    except Exception as e:
        logger.exception("번역 중 오류 발생:")
        prompt = prompt.replace("IMAGE_TAG_ONE", "#1")
        prompt = prompt.replace("IMAGE_TAG_TWO", "#2")
        prompt = prompt.replace("IMAGE_TAG_THREE", "#3")
        return prompt

def preprocess_prompt(prompt, image1, image2, image3):
    has_img1 = image1 is not None
    has_img2 = image2 is not None
    has_img3 = image3 is not None

    if "#1" in prompt and not has_img1:
        prompt = prompt.replace("#1", "첫 번째 이미지(없음)")
    else:
        prompt = prompt.replace("#1", "첫 번째 이미지")

    if "#2" in prompt and not has_img2:
        prompt = prompt.replace("#2", "두 번째 이미지(없음)")
    else:
        prompt = prompt.replace("#2", "두 번째 이미지")

    if "#3" in prompt and not has_img3:
        prompt = prompt.replace("#3", "세 번째 이미지(없음)")
    else:
        prompt = prompt.replace("#3", "세 번째 이미지")

    if "1. 이미지 변경" in prompt:
        desc_match = re.search(r'#1을 "(.*?)"으로 바꿔라', prompt)
        if desc_match:
            description = desc_match.group(1)
            prompt = f"첫 번째 이미지를 {description}으로 변경해주세요. 원본 이미지의 주요 내용은 유지하되 새로운 스타일과 분위기로 재해석해주세요."
        else:
            prompt = "첫 번째 이미지를 창의적으로 변형해주세요. 더 생생하고 예술적인 버전으로 만들어주세요."

    elif "2. 글자지우기" in prompt:
        text_match = re.search(r'#1에서 "(.*?)"를 지워라', prompt)
        if text_match:
            text_to_remove = text_match.group(1)
            prompt = f"첫 번째 이미지에서 '{text_to_remove}' 텍스트를 찾아 자연스럽게 제거해주세요. 텍스트가 있던 부분을 배경과 조화롭게 채워주세요."
        else:
            prompt = "첫 번째 이미지에서 모든 텍스트를 찾아 자연스럽게 제거해주세요. 깔끔한 이미지로 만들어주세요."

    elif "4. 옷바꾸기" in prompt:
        prompt = "첫 번째 이미지의 인물 의상을 두 번째 이미지의 의상으로 변경해주세요. 의상의 스타일과 색상은 두 번째 이미지를 따르되, 신체 비율과 포즈는 첫 번째 이미지를 유지해주세요."

    elif "5. 배경바꾸기" in prompt:
        prompt = "첫 번째 이미지의 배경을 두 번째 이미지의 배경으로 변경해주세요. 첫 번째 이미지의 주요 피사체는 유지하고, 두 번째 이미지의 배경과 조화롭게 합성해주세요."

    elif "6. 이미지 합성(상품포함)" in prompt:
        prompt = "첫 번째 이미지와 두 번째 이미지(또는 세 번째 이미지)를 자연스럽게 합성해주세요. 모든 이미지의 주요 요소를 포함하고, 특히 상품이 돋보이도록 조화롭게 통합해주세요."

    prompt += " 이미지를 생성해주세요. 이미지에 텍스트나 글자를 포함하지 마세요."
    return prompt

def generate_with_images(prompt, images, variation_index=0):
    try:
        if not GEMINI_API_KEY:
            return None, "API 키가 설정되지 않았습니다. 환경변수를 확인해주세요."

        model = genai.GenerativeModel('gemini-2.0-flash-exp-image-generation')
        logger.info(f"Gemini API 요청 시작 - 프롬프트: {prompt}, 변형 인덱스: {variation_index}")

        variation_suffixes = [
            " Create this as the first variation. Do not add any text, watermarks, or labels to the image.",
            " Create this as the second variation with more vivid colors. Do not add any text, watermarks, or labels to the image.",
            " Create this as the third variation with a more creative style. Do not add any text, watermarks, or labels to the image.",
            " Create this as the fourth variation with enhanced details. Do not add any text, watermarks, or labels to the image."
        ]
        
        if variation_index < len(variation_suffixes):
            prompt = prompt + variation_suffixes[variation_index]
        else:
            prompt = prompt + " Do not add any text, watermarks, or labels to the image."

        contents = [prompt]
        for idx, img in enumerate(images, 1):
            if img is not None:
                contents.append(img)
                logger.info(f"이미지 #{idx} 추가됨")

        response = model.generate_content(
            contents=contents,
            generation_config=genai.GenerationConfig(
                temperature=1,
                top_p=0.95,
                top_k=40,
                max_output_tokens=8192
            )
        )

        with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
            temp_path = tmp.name
            result_text = ""
            image_found = False
            
            if hasattr(response, 'candidates') and response.candidates:
                candidate = response.candidates[0]
                if hasattr(candidate, 'content') and candidate.content:
                    for part in candidate.content.parts:
                        if hasattr(part, 'text') and part.text:
                            result_text += part.text
                            logger.info(f"응답 텍스트: {part.text}")
                        elif hasattr(part, 'inline_data') and part.inline_data:
                            save_binary_file(temp_path, part.inline_data.data)
                            image_found = True
                            logger.info("응답에서 이미지 추출 성공")
            
            if not image_found:
                return None, f"API에서 이미지를 생성하지 못했습니다. 응답 텍스트: {result_text}"
            
            result_img = Image.open(temp_path)
            if result_img.mode == "RGBA":
                result_img = result_img.convert("RGB")
            
            return result_img, f"이미지가 성공적으로 생성되었습니다. {result_text}"
    except Exception as e:
        logger.exception("이미지 생성 중 오류 발생:")
        return None, f"오류 발생: {str(e)}"

def process_images_with_prompt(image1, image2, image3, prompt, variation_index=0, max_retries=3):
    retry_count = 0
    last_error = None
    
    while retry_count < max_retries:
        try:
            images = [image1, image2, image3]
            valid_images = [img for img in images if img is not None]
            if not valid_images:
                return None, "적어도 하나의 이미지를 업로드해주세요.", ""

            if prompt and prompt.strip():
                processed_prompt = preprocess_prompt(prompt, image1, image2, image3)
                if re.search("[가-힣]", processed_prompt):
                    final_prompt = translate_prompt_to_english(processed_prompt)
                else:
                    final_prompt = processed_prompt
            else:
                if len(valid_images) == 1:
                    final_prompt = "Please creatively transform this image into a more vivid and artistic version. Do not include any text or watermarks in the generated image."
                    logger.info("Default prompt generated for single image")
                elif len(valid_images) == 2:
                    final_prompt = "Please seamlessly composite these two images, integrating their key elements harmoniously into a single image. Do not include any text or watermarks in the generated image."
                    logger.info("Default prompt generated for two images")
                else:
                    final_prompt = "Please creatively composite these three images, combining their main elements into a cohesive and natural scene. Do not include any text or watermarks in the generated image."
                    logger.info("Default prompt generated for three images")

            result_img, status = generate_with_images(final_prompt, valid_images, variation_index)
            if result_img is not None:
                return result_img, status, final_prompt
            else:
                last_error = status
                retry_count += 1
                logger.warning(f"이미지 생성 실패, 재시도 {retry_count}/{max_retries}: {status}")
                time.sleep(1)
        except Exception as e:
            last_error = str(e)
            retry_count += 1
            logger.exception(f"이미지 처리 중 오류 발생, 재시도 {retry_count}/{max_retries}:")
            time.sleep(1)
    
    return None, f"최대 재시도 횟수({max_retries}회) 초과 후 실패: {last_error}", prompt

def generate_multiple_images(image1, image2, image3, prompt, progress=gr.Progress()):
    results = []
    statuses = []
    prompts = []
    
    num_images = 4
    max_retries = 3
    
    progress(0, desc="이미지 생성 준비 중...")
    
    for i in range(num_images):
        progress((i / num_images), desc=f"{i+1}/{num_images} 이미지 생성 중...")
        result_img, status, final_prompt = process_images_with_prompt(image1, image2, image3, prompt, i, max_retries)
        
        if result_img is not None:
            results.append(result_img)
            statuses.append(f"이미지 #{i+1}: {status}")
            prompts.append(f"이미지 #{i+1}: {final_prompt}")
        else:
            results.append(None)
            statuses.append(f"이미지 #{i+1} 생성 실패: {status}")
            prompts.append(f"이미지 #{i+1}: {final_prompt}")
        
        time.sleep(1)
    
    progress(1.0, desc="이미지 생성 완료!")
    
    while len(results) < 4:
        results.append(None)
    
    combined_status = "\n".join(statuses)
    combined_prompts = "\n".join(prompts)
    
    return results[0], results[1], results[2], results[3], combined_status, combined_prompts

# 커스텀 CSS 스타일
custom_css = """
:root {
    --primary-color: #5561e9;
    --secondary-color: #6c8aff;
    --accent-color: #ff6b6b;
    --background-color: #f0f5ff;
    --card-bg: #ffffff;
    --text-color: #334155;
    --border-radius: 18px;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

body {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Gradio 컨테이너 오버라이드 */
.gradio-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: var(--background-color) !important;
}

/* 상단 헤더 */
.app-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    text-align: center;
}

.app-header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.app-header p {
    margin: 0.75rem 0 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* 패널 스타일링 */
.panel {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease;
}

.panel:hover {
    transform: translateY(-5px);
}

/* 섹션 제목 */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary-color);
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 0.5rem;
    font-size: 1.4rem;
}

/* 버튼 스타일링 */
.custom-button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white !important;
    border: none !important;
    border-radius: calc(var(--border-radius) - 5px) !important;
    padding: 0.8rem 1.2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

.custom-button.primary {
    background: linear-gradient(135deg, var(--accent-color), #ff9a8b) !important;
}

.custom-button i {
    margin-right: 0.5rem;
}

/* 이미지 컨테이너 */
.image-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background-color: white;
}

.image-container:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 탭 컨테이너 */
.custom-tabs {
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 1rem;
}

.custom-tabs button {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    padding: 0.8rem 1.5rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    transition: all 0.3s ease !important;
}

.custom-tabs button[aria-selected="true"] {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* 입력 필드 */
.custom-input {
    border-radius: calc(var(--border-radius) - 5px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 0.8rem 1rem !important;
    transition: all 0.3s ease !important;
}

.custom-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(85, 97, 233, 0.2) !important;
}

/* 사용자 매뉴얼 */
.user-manual {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: 2rem;
}

.manual-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manual-title i {
    margin-right: 0.5rem;
    font-size: 1.8rem;
}

.manual-section {
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    background-color: #f8faff;
    border-radius: calc(var(--border-radius) - 5px);
}

.manual-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.manual-section-title i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.manual-text {
    font-size: 1rem;
    line-height: 1.7;
}

.manual-text strong {
    color: var(--accent-color);
}

.tip-box {
    background-color: rgba(255, 107, 107, 0.1);
    border-left: 3px solid var(--accent-color);
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    border-radius: 8px;
}

/* 버튼 그룹 */
.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

/* 로딩 애니메이션 */
.progress-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    text-align: center;
}

.progress-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    margin: 1rem 0;
}

/* 예시 그리드 */
.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.example-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.example-card:hover {
    transform: translateY(-5px);
}

/* 반응형 */
@media (max-width: 768px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 전체 인터페이스 둥근 모서리 */
.block, .prose, .gr-prose, .gr-form, .gr-panel {
    border-radius: var(--border-radius) !important;
}

/* 메인 컨텐츠 스크롤바 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}