/* ott-subtitle-assistant Styles */

/* 가이드 페이지 전용 스타일 */
    body { background-color: #f9f9f9; color: #333; line-height: 1.6; }
    .guide-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    




    /* 언어 전환 컨트롤 컨테이너 */
    .lang-control {
        text-align: right;
        margin-bottom: 30px;
    }

    /* 버튼들을 감싸는 바구니 (세그먼트 스타일) */
    .lang-switch-wrapper {
        display: inline-flex;
        background-color: #eee;
        padding: 4px;
        border-radius: 8px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }

    .lang-btn {
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        color: #666;
        background: transparent;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 전환 효과 */
    }

    /* 마우스 호버 시 효과 */
    .lang-btn:hover {
        color: #333;
    }

    /* 활성화된 버튼 스타일 */
    .lang-btn.active {
        background-color: #000066;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: scale(1.02); /* 살짝 커지는 효과 */
    }



    

    /* 헤더 */
    .guide-header { text-align: center; margin-bottom: 50px; border-bottom: 2px solid #eaeaea; padding-bottom: 30px; }
    .app-logo-lg { width: 80px; height: 80px; margin-bottom: 15px; }
    .badge { background: #000066; color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
    /* 지원 플랫폼 텍스트 스타일 */
    .support-info { margin-top: 12px; font-size: 0.9rem; color: #666; font-weight: 500; }
    .badge-netflix { background: #e50914; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-left: 4px; vertical-align: middle; }
    
    /* 기능 소개 (그리드) */
    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 50px; }
    .feature-card { border: 1px solid #eee; border-radius: 12px; padding: 20px; transition: transform 0.2s; }
    .feature-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .feature-img-placeholder {
        width: 100%;
        /* 1. 16:9 비율 설정 (현대 브라우저 방식) */
        aspect-ratio: 16 / 9; 
        
        /* 2. 고정 높이 제거 (비율에 맡김) */
        height: auto; 

        /* 3. 배경 및 테두리 설정 */
        background: #ccc; 
        border: 1px solid #999; /* 연한 회색 테두리 */
        border-radius: 8px;
        margin-bottom: 15px;

        /* 4. 이미지 맞춤 설정 (중요) */
        display: block; 
        object-fit: cover; /* 이미지가 비율에 맞게 꽉 차도록 함 */
        object-position: center;
        
        /* 혹시 이미지가 없을 때를 위한 정렬 (기존 유지) */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        box-sizing: border-box; /* 테두리가 너비에 포함되도록 함 */
    }


    /* 단계별 가이드 */
    .step-list { list-style: none; padding: 0; }
    .step-item { display: flex; gap: 20px; margin-bottom: 30px; }
    .step-num { flex-shrink: 0; width: 40px; height: 40px; background: #000066; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; }
    .step-content h3 { margin-bottom: 10px; color: #111; }
    
    /* 주의사항 박스 */
    .faq-section { background: #fff3cd; border-left: 5px solid #ffc107; padding: 20px; border-radius: 4px; margin-top: 40px; }
    .faq-item { margin-bottom: 20px; }
    .faq-item:not(:last-child) { border-bottom: 2px dotted #ddd; margin-bottom: 25px; } /* 항목 간 점선 구분 */
    .faq-question { font-weight: bold; margin-bottom: 10px; }
    .faq-answer { margin-left: 20px; }


    /* 상단/하단 메인 설치 버튼 (강조) */
    .download-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); color: white; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: bold; display: inline-block; transition: all 0.3s; }
    .download-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); }

    /* 돌아가기 버튼 (보조) */
    .cta-button { display: inline-block; background: transparent; color: #666; padding: 12px 24px; text-decoration: none; border-radius: 50px; font-weight: 500; border: 1px solid #ccc; margin-top: 20px; margin-right: 10px; transition: all 0.3s; }
    .cta-button:hover { background: #eee; color: #333; border-color: #999; }

    /* 다음버튼 (보조) */
    .cta-next-button { display: inline-block; background: #2563eb; color: white; padding: 12px 24px; text-decoration: none; border-radius: 50px; font-weight: 500; margin-top: 20px; transition: all 0.3s; }
    .cta-next-button:hover { background: #1d4ed8; color: white; }



    /* 주소가 아직 없을 때 숨기는 클래스 */
    .is-hidden {
        display: none !important;
    }


    /* 가이드 페이지 하단 개인정보처리방침 링크 스타일 */
    .privacy-link {
        display: block;         /* 중앙 정렬을 위해 블록 요소로 설정 */
        text-align: center;     /* 텍스트 중앙 정렬 */
        margin-top: 20px;       /* 위쪽 요소와 충분한 거리 확보 */
        margin-bottom: 20px;    /* 최하단 여백 */
        font-size: 0.8rem;      /* 작은 크기 */
        color: var(--sub-text); /* 기존 디자인의 회색 변수 사용 */
        text-decoration: none;  /* 밑줄 제거 */
        opacity: 0.7;           /* 살짝 흐리게 하여 강조도를 낮춤 */
        transition: all 0.2s;   /* 호버 효과를 위한 부드러운 전환 */
    }

    .privacy-link:hover {
        color: var(--text);     /* 호버 시 텍스트 색상으로 진해짐 */
        text-decoration: underline; /* 호버 시에만 밑줄 표시 */
        opacity: 1;
    }