@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Courier New", DotGothic16, monospace;
}

body {
  margin: 0;
  padding: 0;
  background: hsl(0, 0%, 100%);
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

a {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}

/* 앨범은 가장 아래 */
.album {
  position: absolute;
  z-index: 1;
}

/* 연도 탭/네비는 앨범 위 */
.years,
.nav {
  z-index: 20;
}

/* 홈/카테고리는 최상단 */
.home-btn,
.cate-wrap {
  position: fixed;
  z-index: 50;
}

/* 네비 전체가 화면을 가로지르는 레이어라서 컨테이너는 통과 */
.nav {
  pointer-events: none;
}

/* 실제 클릭 대상만 켜기 */
.arrow {
  pointer-events: auto;
}

/* 연도 탭은 컨테이너/버튼 모두 클릭 가능 */
.years,
.year {
  pointer-events: auto;
}

/* 카테고리/홈은 당연히 클릭 가능 */
.cate-wrap,
.cate,
.home-btn {
  pointer-events: auto;
}

.about {
  color: #ff0000;
  font-size: 13px;
  margin: 4px 10px 0;
}

.cate {
  color: #ff0000;
  margin: 4px 10px 0; /* 위로부터 차곡차곡 */
  display: block;
}

.cate:hover {
  color: #00ff15;
}

.cate-wrap {
  font-size: 12px;
  color: #00ff15;
  position: fixed;
  left: 20%;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 간격 균일 */
}

.album {
  width: 90%;
  max-width: 1000px;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: absolute;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.photo-box {
  flex: 1; /* 남는 공간 차지 */
  display: flex;
  align-items: center; /* 항상 세로 가운데 */
  justify-content: center; /* 가로 가운데 */
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.photo-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.page img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 600px;
  height: auto;
}

.photo-box img:not([src]),
.photo-box img[src=""],
.photo-box img[src="#"] {
  display: none;
}

.caption {
  position: relative;
  margin-top: 16px;
  font-size: 14px;
  color: #00ff15;
}

.home-btn {
  color: #ff0000;
  position: absolute;
  top: 63px;
  left: 20%;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

.s {
  top: 110px;
  left: 45%;
  position: fixed;
  transform: translateY(-50%);
  width: 40px;
  height: auto;
  z-index: 10;
  filter: invert(19%) sepia(94%) saturate(7476%) hue-rotate(2deg) brightness(92%) contrast(122%);
}

.nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  background: none;
}

.arrow {
  background: none;
  border: none;
  font-size: 25px;
  color: #ff0000;
  cursor: pointer;
}

.years {
  position: absolute;
  top: 37%; /* 세로 가운데 */
  left: 10px; /* 화면 왼쪽 여백 */
  transform: translateY(-50%); /* 세로 정렬 */
  display: flex;
  flex-direction: column; /* 가로 → 세로 */
  gap: 8px; /* 위아래 간격 */
  background: none;
  box-shadow: none;
  z-index: 10;
}

.year {
  font-size: 12px;
  color: #ff0000;
  padding: 3px 12px; /* 세로 메뉴는 조금 줄여도 깔끔 */
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  box-shadow: none;
  border: none;
}

.year.active {
  text-decoration: underline;
}

.date-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.date-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ff0000;
  background: none;
  color: #ff0000;
  font-size: 10px;
  cursor: pointer;
}

.date-btn.active {
  background: #ff0000;
  color: #fff;
}

.door-line {
  color: #00ff15;
  height: 100vw;
  width: 20px;
  position: fixed;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
  background-color: #ff0000;
  mix-blend-mode: difference;
  animation-name: rotate;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}/*# sourceMappingURL=photo.css.map */