/* 1. 기본 초기화 및 폰트 세팅 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5; color: #333; line-height: 1.5; padding: 20px;
    display: flex; flex-direction: column; align-items: center;
}
.app-header { margin-bottom: 25px; text-align: center; }
.app-header h1 { font-size: 1.6rem; font-weight: 800; color: #111; }
.app-header p { font-size: 0.95rem; color: #666; margin-top: 5px; word-break: keep-all; }

/* 2. 카메라 버튼 및 로딩/알림 UI */
/* 2. 카메라 & 갤러리 버튼 UI */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
}
/* 공통 버튼 스타일 (모양, 글자 크기 등) */
.action-btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px; /* 둥근 모서리로 부드러운 느낌 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 이모지와 글자 사이 간격 */
    transition: all 0.2s ease-in-out; /* 부드러운 애니메이션 효과 */
}

.action-btn:active {
    transform: scale(0.96);
}
/* 1. 카메라로 찍기 (메인 버튼) - 쨍한 주황색 배경 */
.camera-btn {
    background-color: #FF7300; 
    color: #FFFFFF; /* 글씨는 흰색 */
    border: 2px solid #FF7300; /* 테두리도 주황색으로 통일 */
    box-shadow: 0 4px 6px rgba(255, 115, 0, 0.25); /* 은은한 주황색 그림자로 입체감 추가 */
}

/* 2. 사진 불러오기 (서브 고스트 버튼) - 투명 배경에 테두리만 */
.gallery-btn {
    background-color: transparent; /* 기존 초록색 그라데이션을 지우고 투명하게 변경! */
    color: #FF7300; /* 글씨는 주황색 */
    border: 2px solid #FF7300; /* 주황색 테두리 */
}

/* 마우스 올렸을 때 살짝 반응하는 효과 */
.gallery-btn:hover {
    background-color: rgba(255, 115, 0, 0.08); /* 마우스 올리면 아주 연한 주황색 배경이 깔림 */
    transform: translateY(-2px);
}

#cameraInput { display: none; }
#preview { max-width: 100%; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); display: none; }
#loading { display: none; margin-top: 10px; font-size: 0.95rem; font-weight: 600; color: #f57c00; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

#disclaimer {
    display: none; width: 100%; max-width: 600px; background-color: #fff3cd; color: #856404;
    padding: 12px 15px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 15px; text-align: center; border: 1px solid #ffeeba;
}

/* 3. 친절한 가이드 뷰 (마크다운 렌더링 영역) 디자인 */
#resultContainer { width: 100%; max-width: 600px; display: none; flex-direction: column; gap: 15px; }

.markdown-body {
    background-color: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    line-height: 1.7; 
    font-size: 1.05rem; 
    color: #333;
}

.markdown-body h3 {
    color: #e65100;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    border-bottom: 2px solid #fff3e0;
    padding-bottom: 5px;
}

.markdown-body h3:first-child {
    margin-top: 0;
}

.markdown-body ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 15px;
}

.markdown-body li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.markdown-body strong {
    color: #444;
}


/* 📱 스마트폰 목업 스타일 */
.video-mockup {
    width: 100%;
    max-width: 240px; /* 추천 가로 크기 */
    margin: 0 auto 25px auto; /* 가운데 정렬 및 아래쪽 여백 */
    
    /* 스마트폰 테두리 만들기 (검은색 폰 느낌) */
    border: 10px solid #222; 
    border-radius: 36px; /* 스마트폰의 둥근 모서리 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* 입체감 그림자 */
    
    /* 비디오가 테두리 밖으로 튀어나가지 않게 숨김 */
    overflow: hidden; 
    background-color: #000; /* 영상 로딩 전 검은 화면 */
    aspect-ratio: 9 / 19; /* 최신 스마트폰과 비슷한 세로 비율 */
}

.video-mockup video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 영상을 비율에 맞게 꽉 채움 */
    display: block;
}