.home-root{position:relative;min-height:60vh}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--color-fg);}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;color:var(--color-muted);cursor:pointer;user-select:none;border:none;background:transparent;font-size:24px;}
.chip.active{color:var(--color-fg);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.chip:hover{color:var(--color-fg)}

.slider-wrap{position:fixed;left:0;right:0;bottom:0;padding:0;background:transparent;z-index:20}
.slider{position:relative;display:flex;gap:16px;overflow-x:auto;overflow-y:visible;scroll-behavior:auto;padding-bottom:32px;padding-top:50px;}
.slider::-webkit-scrollbar{height:8px;}
.slider::-webkit-scrollbar-thumb{background:var(--color-muted);border-radius:999px}

.slide{position:relative;flex:0 0 auto;width:auto;height:65vh;overflow:visible;background:var(--color-bg);will-change:transform;transition:width 0.3s ease, height 0.3s ease}
.slide-link{display:block;width:100%;height:100%;cursor:pointer}
.slide img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05) saturate(0);transition:filter .18s ease;will-change:filter}
.slide:hover img{filter:none}
.slide:first-child{margin-left:32px}
.slide:last-child{margin-right:32px}
.slide .label{position:absolute;left:0;bottom:100%;margin-bottom:8px;color:var(--color-fg);border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .14s ease, transform .14s ease;will-change:opacity,transform;pointer-events:none;z-index:999;display:inline-block}
.slide:hover .label,.slide:focus-within .label{opacity:1 !important;transform:translateY(0)}

/* Slides fade-in */
.slide.fade-in{animation:slideIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* View toggle */
.view-toggle{display:inline-flex;align-items:center;gap:0;margin:8px 0 0;border:1px solid var(--color-muted);border-radius:999px;overflow:hidden;background:var(--color-bg)}
.vt-btn{appearance:none;border:none;background:transparent;color:var(--color-fg);cursor:pointer;padding:8px 14px;font-size:14px;opacity:.7;transition:background .2s ease, color .2s ease}
.vt-btn.active{background:var(--color-fg);color:var(--color-bg);opacity:1}
.vt-btn:not(.active):hover{background:var(--color-muted);color:var(--color-bg)}

/* List view */
.home-root.list-view .slider-wrap{display:none}
.list-wrap{position:relative;padding:16px 0}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.list-item{position:relative}
.list-link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:20px 8px;color:var(--color-fg);text-decoration:none;border-bottom:1px solid var(--color-muted);cursor:pointer}
.list-link:hover{background:var(--color-muted);color:var(--color-bg)}
.li-title{font-size:20px;line-height:1.2}
.li-year{font-size:16px;opacity:.7}
.list-item.fade-in{animation:listItemFade .44s cubic-bezier(0.22, 1, 0.36, 1) both}
@keyframes listItemFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.list-hover-preview{position:fixed;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;opacity:0;transition:opacity .15s ease}
.list-hover-preview.active{opacity:1}
.list-hover-preview img{width:300px;height:200px;object-fit:cover;border:1px solid var(--color-muted);box-shadow:0 6px 18px rgba(0,0,0,0.12)}

/* 모바일 최적화 (991px 이하) */
@media (max-width: 991px) {
  /* 모바일에서 스크롤 락 방지 */
  body {
    overflow: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
  }
  
  html {
    overflow: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* 슬라이더 래퍼를 일반 컨테이너로 변경 */
  .slider-wrap {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding:  0;
    background: transparent;
    z-index: auto;
  }
  
  /* 슬라이더를 그리드 레이아웃으로 변경 */
  .slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .5rem;
    overflow-x: visible;
    overflow-y: visible;
    scroll-behavior: auto;
    padding: 0;
    padding-bottom: 32px;
    padding-top: 16px;
  }
  
  /* 슬라이드 크기 조정 */
  .slide {
    position: relative;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 300px;
    overflow: hidden;
    border: 1px solid var(--color-muted);
    background: var(--color-bg);
    will-change: transform;
    transition: transform 0.3s ease;
  }
  
  .slide:first-child {
    margin-left: 0;
  }
  
  .slide:last-child {
    margin-right: 0;
  }
  
  /* 슬라이드 이미지 비율 조정 */
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05) saturate(0);
    transition: filter .18s ease;
    will-change: filter;
  }
  
  /* 라벨 위치 조정 */
  .slide .label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    margin-bottom: 0;
    color: var(--color-bg);
    background: rgba(0,0,0,0.7);
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .14s ease, transform .14s ease;
    will-change: opacity,transform;
    pointer-events: none;
    z-index: 999;
    display: inline-block;
    font-size: 14px;
  }
  
  .slide:hover .label,
  .slide:focus-within .label {
    opacity: 1 !important;
    transform: translateY(0);
  }
  
  /* 연도 배지 위치 조정 */
  .slide .year-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: var(--color-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0.8;
  }
  
  /* 필터 바 모바일 최적화 */
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    display: none;
  }
  
  .chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .chip {
    padding: 8px 12px;
    font-size: 16px;
  }
  
  /* 뷰 토글 모바일 최적화 */
  .view-toggle {
    margin: 0 auto;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: fit-content;
  }
  
  .vt-btn {
    padding: 10px 16px;
    font-size: 16px;
  }
  
  /* 리스트 뷰 모바일 최적화 */
  .list-wrap {
    padding: 16px;
  }
  
  .list-link {
    padding: 16px 12px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  
  .li-title {
    font-size: 18px;
  }
  
  .li-year {
    font-size: 14px;
  }
  
  /* 호버 프리뷰 모바일에서 숨김 */
  .list-hover-preview {
    display: none;
  }
  
  /* 스크롤바 숨김 */
  .slider::-webkit-scrollbar {
    display: none;
  }
  
  .slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Slide-to-detail transition overlay */
.slide-transition-overlay{position:fixed;inset:0;z-index:2147483647;pointer-events:none;display:grid;place-items:center;background:transparent;opacity:1;transition:opacity 1200ms ease}
.slide-transition-overlay.veil{background:rgba(0,0,0,0.20);transition:background-color 1000ms ease, opacity 1200ms ease}
.slide-transition-overlay.veil-off{background:rgba(0,0,0,0)}
.slide-transition-overlay .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(100%);transition:transform 1200ms cubic-bezier(0.22,1,0.36,1), opacity 1200ms ease;z-index:2147483646;will-change:transform,opacity}
.slide-transition-overlay .cover-grad{position:absolute;inset:0;z-index:2147483646;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.12) 65%, rgba(0,0,0,0.36) 100%);opacity:0;transition:opacity 1200ms ease}
.slide-transition-overlay.active .cover{transform:translateY(0)}
.slide-transition-overlay.active .cover-grad{opacity:1}
.slide-transition-overlay .center-text{position:relative;z-index:2147483647;color:#fff;text-align:center;opacity:0;transform:translateY(8px);transition:opacity 600ms ease, transform 600ms ease;will-change:opacity,transform}
.slide-transition-overlay.show-text .center-text{opacity:1;transform:translateY(0)}
.slide-transition-overlay.exit-text .center-text{opacity:0;transform:translateY(8px);transition:opacity 1200ms ease, transform 1200ms ease}
.slide-transition-overlay.exit-cover .cover{opacity:0}
.slide-transition-overlay.exit-cover .cover-grad{opacity:0}
.slide-transition-overlay.exit-overlay{opacity:0}

/* Next page blank until router clears flag */
body[data-next-fade='1'] #app{opacity:0 !important; transform:translateY(8px) !important;}
body #app{transition:opacity 1.2s ease, transform 1.2s ease}

/* 홈 페이지 페이드아웃 효과 */
.home-root {
  transition: opacity 1.5s ease;
}

/* 트랜지션 중 홈 페이지 콘텐츠 숨김 */
body.transition-active.home-page .home-root {
  opacity: 0 !important;
  transition: opacity 1.5s ease !important;
}

/* 트랜지션 오버레이는 보이게 유지 */
body.transition-active.home-page .slide-transition-overlay {
  opacity: 1 !important;
  z-index: 9999 !important;
}

/* 새 페이지 페이드인 효과 개선 */
body[data-next-fade='1'] #app {
  opacity: 0 !important; 
  transform: translateY(8px) !important;
  transition: opacity 1.2s ease, transform 1.2s ease !important;
}

body #app {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 트랜지션 활성 상태 스타일 */
body.transition-active.home-page {
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
body.transition-active.home-page * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
body.transition-active.home-page #app {
  pointer-events: none !important;
}
body.transition-active.home-page .slide-link,
body.transition-active.home-page .list-link {
  pointer-events: none !important;
  cursor: default !important;
}
/* 트랜지션 오버레이는 상호작용 허용 */
body.transition-active .slide-transition-overlay {
  pointer-events: auto !important;
}
/* 모든 링크와 버튼 완전 차단 */
body.transition-active a,
body.transition-active button,
body.transition-active [role="button"],
body.transition-active [tabindex] {
  pointer-events: none !important;
  cursor: default !important;
  outline: none !important;
}

/* Home intro overlay */
.intro-overlay{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;background:var(--color-bg);}
.intro-overlay .intro-center{display:grid;place-items:center}
.intro-overlay .intro-lottie{width:220px;height:220px}
.intro-overlay.fade-out{opacity:0;transition:opacity .6s ease;}

/* 다크모드에서 호버 프리뷰 개선 */
.dark-mode .list-hover-preview img {
  border-color: var(--color-muted);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* 다크모드에서 스크롤바 개선 */
.dark-mode .slider::-webkit-scrollbar-thumb {
  background: var(--color-muted);
}

/* 다크모드에서 리스트 호버 효과 개선 */
.dark-mode .list-link:hover {
  background: var(--color-muted);
  color: var(--color-bg);
}

/* 다크모드에서 뷰 토글 버튼 개선 */
.dark-mode .vt-btn:not(.active):hover {
  background: var(--color-muted);
  color: var(--color-bg);
}

/* 다크모드에서 칩 호버 효과 개선 */
.dark-mode .chip:hover {
  color: var(--color-fg);
}

/* 다크모드에서 슬라이드 호버 효과 개선 */
.dark-mode .slide:hover img {
  filter: none;
}

/* 다크모드에서 인트로 오버레이 개선 */
.dark-mode .intro-overlay {
  background: var(--color-bg);
}

/* 다크모드에서 트랜지션 오버레이 텍스트 개선 */
.dark-mode .slide-transition-overlay .center-text {
  color: #fff;
}

/* 다크모드에서 모바일 최적화 */
@media (max-width: 991px) {
  .dark-mode .slide .label {
    color: #fff;
    background: rgba(0,0,0,0.8);
  }
  
  .dark-mode .slide .year-badge {
    color: #fff;
    background: rgba(0,0,0,0.8);
  }
}