@charset "UTF-8";

/* 1. 왼쪽 밖(-150% 지점)에서 시작해 화면 중앙(0)으로 부드럽게 진입 + 5번 깜빡임 */
@keyframes slideNotiIn {
    0% { 
        transform: translate3d(-100vw, 0, 0); 
        opacity: 1; 
    }
    25% { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
    } /* 정위치 안착 */
    
    /* 정위치에서 빠르고 정확하게 5번 깜빡임 (25% ~ 85%) */
    35% { opacity: 0.1; }
    45% { opacity: 1; }
    55% { opacity: 0.1; }
    65% { opacity: 1; }
    75% { opacity: 0.1; }
    85% { opacity: 1; }
    
    100% { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
    }
}

/* 2. 깜빡임이 끝나면 멈춰있지 않고, 오른쪽 패딩 영역을 완전히 지나쳐 화면 밖(150vw 이상)으로 끝까지 슬라이드 아웃 */
@keyframes slideNotiOut {
    0% { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
    }
    100% { 
        transform: translate3d(calc(100vw + 100px), 0, 0); 
        opacity: 1; 
    } /* 화면 오른쪽 끝을 완전히 벗어날 때까지 이동 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

html, body { width: 100%; height: 100dvh; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; overscroll-behavior: none; }

a,
a:active,
a:link, 
a:visited { color: inherit; text-decoration: none; outline: none; }
.container { width: 100%; min-height: 100%; height: inherit; display: grid; grid-template-rows: 78px auto 78px; }

.container > .lyt-head { position: relative; padding: 0 16px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; color: #fff; border-bottom: 2px solid #252626; background: #2e3030; }
.container > .lyt-head > h1 { position: absolute; left: 50%; height: 60px; aspect-ratio: 153 / 38; background: url('/public/images/logo.svg') no-repeat left center / contain; transform: translateX(-50%); }

.container > .lyt-head > .date { height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 24px; font-weight: 500; }
.container > .lyt-head > .date .week::after { content: "요일"; }

.container > .lyt-head > .gnb { height: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 700; }
.container > .lyt-head > .gnb a { padding: 0 24px; height: 60px; display: flex; align-items: center; border: 2px solid #fff; border-radius: 30px; }

.container > .lyt-main { width: 100%; height: 100%; }

.container > .lyt-foot { position: relative; padding: 0 100px; width: 100%; height: 100%; display: flex; align-items: center; border: 0; font-size: 26px; color: #fff; border-top: 2px solid #252626; background: #2e3030; overflow: hidden; }

.container > .lyt-foot::before { position: absolute; left: 0; z-index: 3; content:""; display: block; width: 100px; height: 100%; background: #2e3030 url('/public/images/bell.webp') no-repeat center center / 40px 48px; }

.container > .lyt-foot::after { position: absolute; right: 0; z-index: 3; content:""; display: block; width: 100px; height: 100%; background: #2e3030 }

.foot-track { position: absolute; left: 100px; right: 100px; height: 100%; display: flex; align-items: center;overflow: visible; z-index: 1; }

.noti-text { display: inline-block; white-space: nowrap; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; perspective: 1000px; }

.slide-in { animation: slideNotiIn 5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.slide-out { animation: slideNotiOut 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }

.main { width: 100%; height: 100%; background: #00766c; }

.main { display: grid; grid-template-columns: 270px 1fr; gap: 0; }

.main .menu { width: 100%; height: 100%; display: grid;  grid-template-rows: 128px 1fr; gap: 0; background: #00766c; }

.main .menu .sub-title {}