/* --- 스니펫 ID: 1699 | 홈화면 사이드 태그 - 검색창 --- */
/* 레드 태그 본체 */

.vault-peek-tag {

    position: fixed;

    left: 0;

    top: 35%; /* 위치는 취향껏 조절 */

    z-index: 10000;

    display: flex;

    align-items: center;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    border: none;

    backface-visibility: hidden; /* 애니메이션 덜덜거림 방지 */

}



/* 눈길을 끄는 태그 버튼 */

.tag-trigger {

    width: 28px;

    height: 100px; /* 고정 높이 사용 */

    background: #2D4B43; 

    color: white;

    writing-mode: vertical-rl;

    text-orientation: mixed;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    border-radius: 0 6px 6px 0;

    cursor: pointer;

    box-shadow: none; 

    transition: width 0.3s ease; /* 폭 변화에 트랜지션 추가 */

    

    /* 슬쩍 슬쩍 움직이는 애니메이션 */

    animation: peek-wiggle 3s infinite;

}



/* 확장되는 내용물 박스 */

/* ... 기존 vault-peek-tag, tag-trigger 스타일 유지 ... */



.tag-content {

    width: 0;

    overflow: hidden;

    background: #ffffff; 

    height: 100px;

    display: flex;

    align-items: center;

    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 0 8px 8px 0;

}



.vault-peek-tag.is-open .tag-content {

    width: 320px; /* 검색창이므로 조금 더 넓게 */

    padding: 0 20px;

}



/* 검색 폼 내부 스타일 */

.peek-search-form {

    display: flex;

    width: 100%;

    align-items: center;

    border-bottom: 2px solid #2D4B43; /* 다크 그린 포인트 라인 */

    padding-bottom: 5px;

}



.peek-search-input {

    flex: 1;

    border: none !important;

    outline: none !important;

    font-size: 16px;

    font-weight: 500;

    background: transparent;

    padding: 10px;

    color: #333;

}



.peek-search-submit {

    background: none;

    border: none;

    color: #2D4B43;

    cursor: pointer;

    padding: 5px;

    display: flex;

    align-items: center;

    transition: transform 0.2s ease;

}



.peek-search-submit:hover {

    transform: scale(1.1);

}



/* 닫힘/열림 컬러 스위칭 유지 */

.vault-peek-tag.is-open .tag-trigger {

    background: #ffffff;

    color: #2D4B43;

    animation: none;

}

/* 흔들림 애니메이션 */

@keyframes peek-wiggle {

    0%, 90%, 100% { transform: translateX(0); }

    93% { transform: translateX(5px); }

    96% { transform: translateX(-2px); }

    98% { transform: translateX(3px); }

}