/*
 * 3rd Vault — 공지 티커 스타일
 * 대응 파일: inc/notice-ticker.php
 * 구조: .vault-notice-ticker는 .vault-nav-menu의 직접 자식 (position:absolute)
 *
 * 섹션 목록:
 *   1. 티커 본체 (nav 하단에 position:absolute)
 *   2. 깜빡이는 커서
 *   3. 스크롤 애니메이션 + 호버 일시정지
 *   4. 티커 링크 스타일
 *   5. main-container 여백 (has-notice-ticker 클래스)
 */

/* =========================================
   1. 티커 본체
   ─ .vault-nav-menu { position:relative; align-self:stretch }를 이용해
     nav 전체 폭 × nav 하단(top:100%)에 정확히 위치
========================================= */
.vault-notice-ticker {
    position: absolute;
    bottom: 10px;        /* 헤더 border-bottom 바로 위 = 헤더 안쪽 하단 */
    left: 2px;
    right: 0;
    z-index: 9998;      /* 헤더(9999) 바로 아래 */

    display: flex;
    align-items: center;
    height: 22px;
    overflow: hidden;

    font-family: 'Abel', 'Pretendard', sans-serif;
    font-size: 12.5px;
    color: var(--hdr-nav-base);
    letter-spacing: 0.03em;
}

/* =========================================
   2. 깜빡이는 커서 ▌
========================================= */
@keyframes vault-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.vault-notice-cursor {
    flex-shrink: 0;
    margin-right: 7px;
    color: var(--hdr-nav-accent, #E23814);
    font-size: 13px;
    line-height: 1;
    animation: vault-cursor-blink 1s step-end infinite;
}

/* =========================================
   3. 스크롤 애니메이션
   ─ padding-left:100% 기법
     · at translateX(0): 텍스트가 overflow 컨테이너 우측 끝에서 대기
     · at translateX(-100%): 텍스트가 좌측 끝 밖으로 퇴장
   ─ 호버 시 애니메이션 정지 → 링크 클릭 가능
========================================= */
@keyframes vault-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.vault-ticker-overflow {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.vault-ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;     /* 컨테이너 폭만큼 오프셋 → 우측 끝에서 진입 */
    animation: vault-ticker-scroll 30s linear infinite;
    will-change: transform;
}

/* 호버 시 일시정지 (링크 클릭 편의) */
.vault-notice-ticker:hover .vault-ticker-content {
    animation-play-state: paused;
}

/* =========================================
   4. 티커 링크
========================================= */
.vault-ticker-link {
    color: inherit;
    text-decoration: none;
}

.vault-ticker-link:hover {
    color: var(--hdr-nav-accent, #E23814);
    text-decoration: underline;
    text-underline-offset: 2px;
}