@charset 'utf-8';

/**
 * Bookmark Button Styles
 * Extracted from common.css (lines 62-120)
 * ----------------------------------------
 * 북마크 버튼 및 툴팁 관련 스타일
 */

/* Bookmark Button */
.btn-bookmark{display:block;position:absolute;top:52.5%;right:26px;z-index:2;width:34px;height:34px;}
.btn-bookmark [class*="ip-icon-"]{display:block;}
.btn-bookmark [class*="ip-icon-"]::after{position:absolute;top:0;left:0;opacity:0;}
.btn-bookmark.active{}
.btn-bookmark.active .ip-icon-bookmark .bookmark-unchecked,
.btn-bookmark.active .ip-icon-bookmark2 .bookmark-unchecked{display:none;}
.btn-bookmark.active .ip-icon-bookmark .bookmark-checked,
.btn-bookmark.active .ip-icon-bookmark2 .bookmark-checked{display:block;}

/* 새로운 툴팁 디자인 - 피그마 시안에 맞는 스피치 버블 형태 */
.btn-bookmark .tooltip {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    right: 100% !important; /* 버튼 왼쪽에 위치 (북마크 아이콘 왼쪽) */
    transform: translateY(-50%) !important;
    width: 91px !important; /* SVG에서 메인 사각형 부분 너비 */
    height: 26px !important;
    padding: 0 !important;
    margin-right: 5px !important; /* 버튼과 간격 */
    font-size: 12px !important;
    line-height: 26px !important;
    text-align: center !important;
    letter-spacing: -.025em !important;
    color: #fff !important;
    white-space: nowrap !important;
    background-color: #0541B4 !important; /* 직접 색상값 사용 */
    background: #0541B4 !important; /* 추가 보장 */
    border-radius: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 1000 !important;
    /* 추가 스타일 보장 */
    box-sizing: border-box !important;
    border: none !important;
}

.btn-bookmark:hover .tooltip {
    display: block !important;
    opacity: 1 !important;
}

/* SVG의 오른쪽 포인터 부분을 CSS로 구현 */
.btn-bookmark .tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 9px !important; /* SVG 좌표 기준 */
    right: -5px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 4px 0 4px 5px !important;
    border-color: transparent transparent transparent #0541B4 !important;
}

/* 기존 before 요소 제거 */
.btn-bookmark .tooltip::before {
    display: none;
}