@charset "UTF-8";

/* ----------main---------- */
/* gallery */
html {
  background-color: var(--accentColor-handBrown);
}

.article {
  background-color: var(--accentColor-handBrown);
  padding: 80lvh 0;
  transition: all 0.7s;
}

.article.lineOnly {
  background-color: var(--mainColor-white);
}

.section__topic {
  margin-top: 0;
  line-height: 1.2;
  transition: all 0.7s;
}

.article.lineOnly .section__topic {
  color: rgba(238, 238, 238, 0.5);
  -webkit-text-stroke: 1px var(--mainColor-black);
}

.category__list {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 20px 12vw 0;
}

.category__list:nth-of-type(2) {
  flex-wrap: wrap;
  margin-top: 30px;
}

.category__name {
  color: var(--accentColor-handRed);
  outline-color: var(--accentColor-handRed);
  width: 85px;
  cursor: pointer;
}

.category__name button {
  transform: translateY(-0.5px);
}

.category__name.on {
  background-color: var(--accentColor-handLightBlue);
}

.article.lineOnly .category__name {
  color: var(--mainColor-black);
  outline-color: var(--mainColor-black);
}

.article.lineOnly .category__name.on {
  color: var(--mainColor-white);
  background-color: var(--mainColor-black);
}

.thumbnail__list {
  display: flex;
  gap: 2.66vw;
  flex-wrap: wrap;
  transition: all 0.7s;
  margin: 30px 7.33vw 0;
}

.thumbnail__item {
  display: none;
  outline: 1px solid var(--accentColor-handRed);
  transition: outline-offset 0.15s;
}

.thumbnail__item:hover {
  outline-width: 2px;
  outline-offset: -2px;
}

.article.lineOnly .thumbnail__item {
  outline-color: var(--mainColor-black);
}

.thumbnail__item.on {
  display: block;
}

.thumbnail__item img {
  width: 26.66vw;
  height: 30.4vw;
  object-fit: contain;
  cursor: pointer;
}

.article.lineOnly .btn__link--back {
  color: var(--mainColor-black);
  outline-color: var(--mainColor-black);
}

.article.lineOnly .btn__link--back::after {
  border-color: var(--mainColor-black);
}

/* gallery pc */
@media screen and (min-width:821px) {
  .category__list {
    margin-top: 60px;
  }

  .category__list:nth-of-type(2) {
    margin-top: 60px;
  }

  .category__name {
    width: 139px;
  }

  .category__name:hover {
    color: var(--accentColor-handBrown);
    background-color: var(--accentColor-handRed);
  }

  .article.lineOnly .category__name:hover {
    color: var(--mainColor-white);
    background-color: var(--mainColor-black);
  }

  .thumbnail__list {
    gap: min(15px,1.04vw);
    margin: 90px max(90px,6.25vw) 0;
  }

  .thumbnail__item img {
    width: min(197.5px,13.71vw);
    height: min(225px,15.625vw);
  }

  .article.lineOnly .btn__link--back:hover {
    color: var(--mainColor-white);
    background-color: var(--mainColor-black);
  }

  .article.lineOnly .btn__link--back:hover::after {
    border-color: var(--mainColor-white);
  }
}
/* gallery pc */
/* gallery */

/* gallery modal */
.modal__list::before {
  content: '';
  background-color: var(--accentColor-handRed);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -30;
  opacity: 0;
  width: 100%;
  height: 100lvh;
  transition: opacity 0.7s ease 0.5s, z-index 0.7s ease 0.2s;
}

.article.lineOnly .modal__list::before {
  background-color: var(--mainColor-black);
}

.modal__item {
  background-color: var(--accentColor-handBrown);
  padding: 4vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -30;
  opacity: 0;
  transition: all 0.7s;
}

.article.lineOnly .modal__item {
  background-color: var(--mainColor-white);
}

.modal__item img {
  border: 1px solid var(--accentColor-handRed);
  width: 84vw;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.article.lineOnly .modal__item img {
  border-color: var(--mainColor-black);
}

.modal__close {
  font-size: 1.2rem;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 27px;
  outline: 1px solid var(--accentColor-handRed);
  outline-offset: -1px;
  background-color: var(--accentColor-handBrown);
  color: var(--accentColor-handRed);
  width: 63px;
  height: 32px;
  position: fixed;
  left: 50%;
  bottom: 10lvh;
  transform: translateX(-50%);
  z-index: -30;
  opacity: 0;
  transition: all 0.7s;
  cursor: pointer;
}

.modal__close:hover {
  background-color: var(--accentColor-handLightBlue);
}

.article.lineOnly .modal__close {
  outline-color: var(--mainColor-black);
  background-color: var(--mainColor-white);
  color: var(--mainColor-black);
}

.article.lineOnly .modal__close:hover {
  color: var(--mainColor-white);
  background-color: var(--mainColor-black);
}

.modal__list.active::before {
  z-index: 10;
  opacity: 0.5;
  transition: opacity 0.7s ease 0s, z-index 0.7s ease 0s;
}

.modal__item.active {
  z-index: 50;
  opacity: 1;
  transition: opacity 0.7s ease 0.5s, z-index 0.7s ease 0.2s;
}

.modal__list.active .modal__close {
  z-index: 100;
  opacity: 1;
  transition: opacity 0.7s ease 0.5s, z-index 0.7s ease 0.2s;
}

/* gallery modal pc */
@media screen and (min-width:821px) {
  .modal__item {
    padding: min(30px,2.08vw);
  }

  .modal__item img {
    width: auto;
    height: 70lvh;
  }

  .modal__close {
    font-size: 2rem;
    padding: 16px 31px;
    width: 113px;
    height: 52px;
    bottom: 5lvh;
  }
}
/* gallery modal pc */
/* gallery modal */
/* ----------main---------- */