/* ============================================================
   일공일캠퍼스 웹앱 애니메이션 레이어
   - campus layout 에서만 로드되므로 phone/b2b/admin 등 다른 그룹엔 영향 없음.
   - 원본 style.css 는 건드리지 않고 그 뒤에 로드해 보강(오버라이드).
   - 앱(웹뷰) 사용 시 부자연스럽던 부분(즉각 표시/딱딱한 전환)을 부드럽게.
   - 접근성: prefers-reduced-motion 사용자는 모든 모션 최소화.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 부드러운 스크롤(앱 느낌) */
html { scroll-behavior: smooth; }

/* ============================================================
   1) 페이지 진입 전환 — 라우트 변경 시 콘텐츠가 살짝 떠오르며 페이드
   ============================================================ */
@keyframes campusPageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.campus-view {
  animation: campusPageEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* 클립/오디오북 뷰어처럼 하단 고정 플레이어바(.viewer_player: position:fixed;bottom:0)를
   가진 화면에서는, .campus-view의 transform/will-change가 containing block을 만들어
   자식 fixed가 뷰포트가 아닌 컨테이너 기준으로 배치되며 스크롤을 따라 들쑥날쑥해진다.
   해당 화면에서는 진입 애니메이션/will-change를 끄고, 플레이어바를 뷰포트 하단에 고정한다. */
.campus-view:has(.viewer_player) {
  animation: none;
  will-change: auto;
  transform: none;
}

/* ============================================================
   2) 터치 피드백 — 버튼/링크를 누르면 살짝 축소(네이티브 앱 느낌 핵심)
   ============================================================ */
.campus_header a, .campus_header button,
.bottom_nav a, .bottom_nav li > a,
.btn_primary, .btn_secondary, .btn_tertiary, .btn_option, .btn_login,
.btn_open, .btn_close, .link_home, .link_wrap, .link_go, .link_logout,
.open_banner, .card, .thumb_link, .item_link, .btn_drop {
  transition: transform 0.13s ease, opacity 0.13s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.campus_header a:active, .campus_header button:active,
.bottom_nav a:active,
.btn_primary:active, .btn_secondary:active, .btn_tertiary:active,
.btn_option:active, .btn_login:active, .btn_open:active, .btn_close:active,
.link_home:active, .link_wrap:active, .link_go:active, .link_logout:active,
.open_banner:active, .thumb_link:active, .item_link:active {
  transform: scale(0.95);
  opacity: 0.72;
}

/* ============================================================
   3) 사이드 드로어(햄버거 메뉴) — 오른쪽에서 슬라이드 인 + 배경 페이드
   ============================================================ */
@keyframes campusDrawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes campusFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.drawer_box {
  animation: campusDrawerIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.dimd {
  animation: campusFadeIn 0.28s ease;
}
/* 드로어 메뉴 항목이 순차적으로 떠오름(stagger) */
.drawer_box .list_nav > li {
  animation: campusPageEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.drawer_box .list_nav > li:nth-child(1) { animation-delay: 0.05s; }
.drawer_box .list_nav > li:nth-child(2) { animation-delay: 0.09s; }
.drawer_box .list_nav > li:nth-child(3) { animation-delay: 0.13s; }
.drawer_box .list_nav > li:nth-child(4) { animation-delay: 0.17s; }
.drawer_box .list_nav > li:nth-child(5) { animation-delay: 0.21s; }
.drawer_box .list_nav > li:nth-child(6) { animation-delay: 0.25s; }
.drawer_box .list_nav > li:nth-child(7) { animation-delay: 0.29s; }
.drawer_box .list_nav > li:nth-child(8) { animation-delay: 0.33s; }

/* ============================================================
   4) 하단 탭바 — 현재 탭 아이콘이 톡 튀는 pop 효과
   ============================================================ */
@keyframes campusTabPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.bottom_nav .list_nav li.on .ico {
  animation: campusTabPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom_nav .list_nav li .ico,
.bottom_nav .list_nav li p {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================
   5) 알림 드롭다운 — 위에서 부드럽게 펼침(원본은 hover 즉시 표시)
   ============================================================ */
@keyframes campusDropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wrap_alarm:hover .box_alarm {
  animation: campusDropIn 0.24s ease;
}
.list_dropdown[style*="block"] {
  animation: campusDropIn 0.2s ease;
}

/* ============================================================
   6) 리스트/카드 진입 — 스크롤 콘텐츠가 순차적으로 떠오름(stagger)
   swiper 슬라이드는 제외(자체 트랜지션과 충돌 방지)
   ============================================================ */
@keyframes campusCardUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.list_content > li:not(.swiper-slide),
.list_card > li,
.wrap_content .card,
.list_thumb > li {
  animation: campusCardUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.list_content > li:nth-child(1),
.list_card > li:nth-child(1),
.list_thumb > li:nth-child(1) { animation-delay: 0.02s; }
.list_content > li:nth-child(2),
.list_card > li:nth-child(2),
.list_thumb > li:nth-child(2) { animation-delay: 0.06s; }
.list_content > li:nth-child(3),
.list_card > li:nth-child(3),
.list_thumb > li:nth-child(3) { animation-delay: 0.1s; }
.list_content > li:nth-child(4),
.list_card > li:nth-child(4),
.list_thumb > li:nth-child(4) { animation-delay: 0.14s; }
.list_content > li:nth-child(5),
.list_card > li:nth-child(5),
.list_thumb > li:nth-child(5) { animation-delay: 0.18s; }
.list_content > li:nth-child(6),
.list_card > li:nth-child(6),
.list_thumb > li:nth-child(6) { animation-delay: 0.22s; }

/* 카드 hover 살짝 떠오름(데스크톱/앱 공통) */
.card, .thumb_link, .item_link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .card:hover, .thumb_link:hover, .item_link:hover {
    transform: translateY(-3px);
  }
}

/* ============================================================
   7) 모달/팝업 — 아래에서 슬라이드 업(바텀시트 느낌)
   ============================================================ */
@keyframes campusModalUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes campusModalScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
/* 하단 고정형 시트 */
.pop_bottom .pop_inner,
.bottom_sheet .sheet_inner,
.layer_bottom {
  animation: campusModalUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 중앙 팝업 */
.pop_center .pop_inner,
.layer_pop .pop_inner,
.modal_wrap .modal_inner {
  animation: campusModalScale 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   8) 스켈레톤 로딩 — shimmer(콘텐츠 로드 전 뼈대)
   .skeleton 클래스를 붙인 요소에 적용
   ============================================================ */
@keyframes campusShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eef0f2 25%, #f6f7f8 50%, #eef0f2 75%);
  background-size: 800px 100%;
  animation: campusShimmer 1.3s linear infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
}

/* ============================================================
   9) 로딩 스피너 — 회전
   ============================================================ */
@keyframes campusSpin { to { transform: rotate(360deg); } }
.campus-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(0,0,0,0.12);
  border-top-color: #4b6bff;
  border-radius: 50%;
  animation: campusSpin 0.7s linear infinite;
  display: inline-block;
}

/* ============================================================
   9-1) 전역 네비게이션 프리로더 — LMS(admin) 의 불투명 찻잔 스피너를
        그대로 사용. 링크 클릭 즉시 표시하고, 새 페이지가 커밋된 뒤
        실제로 페인트될 때까지(rAF) 유지 → 앱 웹뷰에서 폰 렌더가 느려도
        빈/이전 화면이 노출되지 않는다. 배경은 완전 불투명(#fff).
        (원본 LMS_NEW/LMS.war/css/style.css .preloader + tea SVG 동등)
   ============================================================ */
.campus_preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;            /* 불투명 — 뒤 화면 완전 차단 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.campus_preloader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.campus_preloader .tea { --secondary: #33406f; }
.campus_preloader .tea #teabag {
  transform-origin: top center;
  transform: rotate(3deg);
  animation: campusTeaSwing 2s infinite;
}
.campus_preloader .tea #steamL {
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  animation: campusSteamLarge 2s infinite;
}
.campus_preloader .tea #steamR {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  animation: campusSteamSmall 2s infinite;
}
@keyframes campusTeaSwing { 50% { transform: rotate(-3deg); } }
@keyframes campusSteamLarge {
  0%   { stroke-dashoffset: 13; opacity: 0.6; }
  100% { stroke-dashoffset: 39; opacity: 0; }
}
@keyframes campusSteamSmall {
  10%  { stroke-dashoffset: 9;  opacity: 0.6; }
  80%  { stroke-dashoffset: 27; opacity: 0; }
  100% { stroke-dashoffset: 27; opacity: 0; }
}

/* ============================================================
   10) 페이드 인 유틸 — 필요한 요소에 class 로 부여
   ============================================================ */
.fade-in     { animation: campusFadeIn 0.4s ease both; }
.fade-in-up  { animation: campusCardUp 0.45s cubic-bezier(0.22,1,0.36,1) both; }
.pop-in      { animation: campusModalScale 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }