@charset "UTF-8";
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-left: 10px;
    vertical-align: middle;
    background-color: #B0B0B0 !important;
    color: #FFFFFF !important;
    border-radius: 50%;
    font-size: 18px !important;
    cursor: pointer;
    text-decoration: none !important;
}

.auth-help-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.auth-tooltip {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    width: 520px;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.auth-tooltip table {
    width: 100%;
    border-collapse: collapse;
}

.auth-tooltip th {
    padding: 10px;
    text-align: left;
    background: #F5F5F5;
    border: 1px solid #DDDDDD;
    font-weight: bold;
}

.auth-tooltip td {
    padding: 12px 10px;
    border: 1px solid #EEEEEE;
    vertical-align: top;
    line-height: 1.6;
}

.captionToggleArea {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px; /* 아이콘과 텍스트 간격 */
    margin-top: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* 화살표 아이콘 공통 스타일 */
.captionIcon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px; /* 화살표 크기 조절 */
    transition: all 0.2s ease;
}

/* 닫힘 상태 (다운 화살표 - 텍스트: 자막 보기) */
.captionToggleArea .captionIcon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill="%23333"/></svg>');
}

/* 텍스트 라벨 스타일 */
.captionLabel {
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif; /* 표준 웹 폰트 권장 */
    color: #333;
}

/* 버튼에 'active' 클래스가 붙었을 때 (자막이 열렸을 때) */
.captionToggleArea.active .captionIcon {
    background-color: #f4f4f4;
    border-color: #bbb;
    transform: rotate(180deg); /* 아이콘을 180도 회전 (업 화살표) */
}

/* 자막 박스 스타일 (기존 스타일 유지하되 부드러운 애니메이션 추가) */
.captionBox {
    display: none;
    border: 1px solid #ddd;
    padding: 20px;
    background: #fafafa;
    margin: 10px 0 30px 0;
    font-size: 15px;
    color: #333333;
    line-height: 170%;
    animation: slideDown 0.25s ease-out forwards;
}