/* translate.css */

/* 1. 외부 컨테이너: 아이콘 크기만큼만 공간 점유, 내부는 absolute */
.translate-outer {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-top: 15px;
    vertical-align: middle;
}

.translate-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: inline-flex;
    align-items: center;

    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 4px 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    max-width: 47px;
    white-space: nowrap;
}

/* 2. 박스가 활성화(확장)되었을 때 */
.translate-wrapper.expanded {
    max-width: 300px;
    /* 충분히 넓게 잡아줌 */
    border-color: #3b3b3b;
    /* 활성 색상 (선택사항) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 3. 아이콘 버튼 */
.translate-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 박스가 줄어들어도 찌그러지지 않음 */
    transition: color 0.2s;
}

/* 4. 언어 버튼 그룹 (오른쪽에 위치) */
.translate-options {
    display: flex;
    gap: 4px;

    /* [수정] 평소에는 공간 차지 안 하게 함 */
    width: 0;
    margin-left: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
}

/* 확장 상태: 너비 복구 */
.translate-wrapper.expanded .translate-options {
    /* [수정] 펼쳐지면 너비 자동, 마진 추가 */
    width: auto;
    margin-left: 8px;

    opacity: 1;
    transform: translateX(0);
}

/* 5. 개별 언어 버튼 */
.lang-option-btn {
    border: none;
    background: #f3f3f3;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-option-btn:hover {
    background: #3b3b3b;
    color: #fff;
}

/* 번역 결과 박스 */
.translate-result {
    margin-top: 10px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    line-height: 1.6;
    color: #333;
    font-size: 0.95em;
    white-space: pre-wrap;
}

.translate-result.error {
    border-left-color: #ff4d4f;
    background-color: #fff1f0;
    color: #d93025;
}

/* translate.css 맨 아래에 추가 */

.translate-status-msg {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    /* 번역문과의 간격 */
    font-weight: bold;
    display: block;
}