@font-face {
  font-family: "Wanted Sans Subset";
  font-weight: 600;
  font-style: normal;
  font-display: block;
  src: url("https://tistory1.daumcdn.net/tistory/814207/skin/images/WantedSans-SemiBold.subset.pretendard.woff2") format("woff2");
}
@font-face {
  font-family: "DungGeunMo Subset";
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url("https://tistory1.daumcdn.net/tistory/814207/skin/images/DungGeunMo.subset.pretendard.woff2") format("woff2");
}
:root {
  --fill: rgba(112, 115, 124, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fill: rgba(112, 115, 124, 0.22);
  }
}
:root {
  --spring-intro: linear(0 0%, 0.0282 1.79%, 0.1013 3.57%, 0.2037 5.36%, 0.3224 7.14%, 0.4467 8.93%, 0.5685 10.71%, 0.6819 12.5%, 0.783 14.29%, 0.8696 16.07%, 0.9407 17.86%, 0.9966 19.64%, 1.0382 21.43%, 1.0669 23.21%, 1.0846 25%, 1.0932 26.79%, 1.0945 28.57%, 1.0905 30.36%, 1.0826 32.14%, 1.0723 33.93%, 1.0608 35.71%, 1.049 37.5%, 1.0377 39.29%, 1.0272 41.07%, 1.018 42.86%, 1.0102 44.64%, 1.0039 46.43%, 0.999 48.21%, 0.9955 50%, 0.9931 51.79%, 0.9917 53.57%, 0.9911 55.36%, 0.9911 57.14%, 0.9916 58.93%, 0.9924 60.71%, 0.9935 62.5%, 0.9946 64.29%, 0.9957 66.07%, 0.9967 67.86%, 0.9977 69.64%, 0.9985 71.43%, 0.9992 73.21%, 0.9998 75%, 1.0002 76.79%, 1.0005 78.57%, 1.0007 80.36%, 1.0008 82.14%, 1.0009 83.93%, 1.0008 85.71%, 1.0008 87.5%, 1.0007 89.29%, 1.0006 91.07%, 1.0005 92.86%, 1.0004 94.64%, 1.0003 96.43%, 1.0002 98.21%, 1 100%);
  --spring-hide: linear(0 0%, 0.0248 1.92%, 0.0874 3.85%, 0.173 5.77%, 0.2704 7.69%, 0.3715 9.62%, 0.4703 11.54%, 0.5629 13.46%, 0.647 15.38%, 0.7212 17.31%, 0.7853 19.23%, 0.8393 21.15%, 0.884 23.08%, 0.9201 25%, 0.9486 26.92%, 0.9706 28.85%, 0.9871 30.77%, 0.9991 32.69%, 1.0073 34.62%, 1.0127 36.54%, 1.0157 38.46%, 1.0171 40.38%, 1.0173 42.31%, 1.0166 44.23%, 1.0153 46.15%, 1.0137 48.08%, 1.012 50%, 1.0102 51.92%, 1.0086 53.85%, 1.007 55.77%, 1.0056 57.69%, 1.0044 59.62%, 1.0034 61.54%, 1.0025 63.46%, 1.0018 65.38%, 1.0012 67.31%, 1.0007 69.23%, 1.0004 71.15%, 1.0001 73.08%, 1 75%, 0.9998 76.92%, 0.9998 78.85%, 0.9997 80.77%, 0.9997 82.69%, 0.9997 84.62%, 0.9997 86.54%, 0.9997 88.46%, 0.9998 90.38%, 0.9998 92.31%, 0.9998 94.23%, 0.9999 96.15%, 0.9999 98.08%, 1 100%);
  --spacing-viewport: 48px;
  --spacing-modal: 20px;
  --modal-button-height: 28px;
  --modal-content-height: 0px;
  --modal-navigation-height: calc((var(--spacing-modal) * 2) + var(--modal-button-height));
  --modal-grid-base: 2;
  --modal-interaction-duration: 0.75s;
  --modal-interaction-duration-content: calc(var(--modal-interaction-duration) * 0.5);
  --modal-interaction-ease: var(--spring-hide);
  --spacing-list-padding: 16px;
}
@media (min-width: 1200px) {
  :root {
    --modal-grid-base: 3;
  }
}
@media (min-width: 1680px) {
  :root {
    --modal-grid-base: 4;
  }
}
@media (max-width: 911px) {
  :root {
    --modal-grid-base: 1.5;
  }
}
@media (max-width: 736px) {
  :root {
    --spacing-viewport: 24px;
    --modal-button-height: 24px;
    --modal-grid-base: 1;
    --spacing-list-padding: 14px;
  }
}
@media (max-width: 480px) {
  :root {
    --spacing-viewport: 16px;
    --spacing-modal: 16px;
  }
}

header > div.right.contact {
  transition: opacity var(--modal-interaction-duration-content);
  opacity: 1;
}

body[data-modal-active=true]:not(:has(#pretendard-modal-explore.hide)) header > div.right.contact {
  opacity: 0;
  pointer-events: none;
}

#pretendard-modal-explore {
  position: fixed;
  z-index: 9;
  right: calc(var(--modal-navigation-height) * -1);
  bottom: var(--spacing-viewport);
  width: calc(var(--spacing-modal) * 2 + var(--modal-button-height));
  display: flex;
  justify-content: flex-end;
  transition: opacity 0.3s, width var(--modal-interaction-duration) var(--modal-interaction-ease), border-radius var(--modal-interaction-duration), transform var(--modal-interaction-duration), right var(--modal-interaction-duration);
  overflow: hidden;
  border-radius: calc(var(--modal-navigation-height) / 2);
  transform: translateX(-50%) scale(0.75);
}
@media (max-width: 736px) {
  #pretendard-modal-explore {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
#pretendard-modal-explore.segment-b {
  right: unset;
  left: calc(var(--modal-navigation-height) * -1);
  transform: translateX(50%) scale(0.75);
  transition: opacity 0.3s, width var(--modal-interaction-duration) var(--modal-interaction-ease), border-radius var(--modal-interaction-duration), transform var(--modal-interaction-duration), left var(--modal-interaction-duration);
}
#pretendard-modal-explore.segment-b.active {
  left: var(--spacing-viewport);
  transform: translateX(0%) scale(1);
}
#pretendard-modal-explore.segment-b:not(.active) {
  transition: opacity 0.3s, width var(--modal-interaction-duration) var(--modal-interaction-ease), border-radius var(--modal-interaction-duration), transform var(--modal-interaction-duration-content), left var(--modal-interaction-duration-content);
}
#pretendard-modal-explore.segment-b > .modal > .navigation > .wrapper > .action {
  transform: translateX(50%);
}
#pretendard-modal-explore.segment-b > .modal > .navigation > .wrapper > .action svg.close {
  transform: rotate(0deg);
}
#pretendard-modal-explore.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(5%) !important;
}
#pretendard-modal-explore.initial {
  opacity: 0;
  pointer-events: none;
}
#pretendard-modal-explore.active {
  right: var(--spacing-viewport);
  width: calc((100% - var(--spacing-viewport) * (var(--modal-grid-base) + 1)) / var(--modal-grid-base));
  border-radius: 0;
  transform: translateX(0%) scale(1);
}
#pretendard-modal-explore.active > .modal > .navigation > .wrapper > .heading {
  opacity: 1;
  transition: opacity var(--modal-interaction-duration-content) var(--modal-interaction-duration-content);
}
#pretendard-modal-explore.active > .modal > .navigation > .wrapper > .action {
  transform: translateX(0%);
}
#pretendard-modal-explore.active > .modal > .content {
  opacity: 1;
  transition: opacity var(--modal-interaction-duration-content) var(--modal-interaction-duration-content);
}
#pretendard-modal-explore:not(.active) {
  transition: opacity 0.3s, width var(--modal-interaction-duration) var(--modal-interaction-ease), border-radius var(--modal-interaction-duration), transform var(--modal-interaction-duration-content), right var(--modal-interaction-duration-content);
}
#pretendard-modal-explore:not(.active) > .modal {
  height: var(--modal-navigation-height);
}
#pretendard-modal-explore:not(.active) > .modal > .navigation > .wrapper > .heading {
  opacity: 0;
}
#pretendard-modal-explore:not(.active) > .modal > .navigation > .wrapper > .action svg.close {
  opacity: 1;
}
#pretendard-modal-explore:not(.active) > .modal > .navigation > .wrapper > .action svg.open {
  opacity: 0;
}
#pretendard-modal-explore:not(.active) > .modal > .content {
  opacity: 0;
}
#pretendard-modal-explore:not(.active)::after {
  transition: opacity var(--modal-interaction-duration-content), border-radius var(--modal-interaction-duration);
}
#pretendard-modal-explore > .modal {
  position: relative;
  min-width: 320px;
  height: calc(var(--modal-navigation-height) + var(--modal-content-height));
  transition: height var(--modal-interaction-duration-content);
  flex: 1;
}
#pretendard-modal-explore > .modal > .navigation {
  padding: var(--spacing-modal);
}
#pretendard-modal-explore > .modal > .navigation > .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--modal-button-height);
  gap: 0.75em;
}
#pretendard-modal-explore > .modal > .navigation > .wrapper > .heading {
  font-weight: 600;
  transition: opacity var(--modal-interaction-duration-content);
}
#pretendard-modal-explore > .modal > .navigation > .wrapper > .action {
  position: relative;
  width: var(--modal-button-height);
  transform: translateX(-50%);
  transition: transform var(--modal-interaction-duration);
}
#pretendard-modal-explore > .modal > .navigation > .wrapper > .action svg.close {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(180deg);
}
#pretendard-modal-explore > .modal > .navigation > .wrapper > .action::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing-modal) * -1);
}
#pretendard-modal-explore > .modal > .content {
  padding: var(--spacing-modal);
  padding-top: calc(var(--spacing-modal) * 0.5);
  transition: opacity var(--modal-interaction-duration-content);
}
#pretendard-modal-explore > .modal > .content ul {
  margin-top: calc(var(--spacing-list-padding) * -1);
  margin-bottom: calc(var(--spacing-list-padding) * -1);
  list-style-type: none;
}
#pretendard-modal-explore > .modal > .content ul > li {
  margin: 0;
}
#pretendard-modal-explore > .modal > .content ul > li + li {
  border-top: 2px solid var(--body);
}
#pretendard-modal-explore > .modal > .content ul > li > a.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  height: var(--modal-button-height);
  padding-top: var(--spacing-list-padding);
  padding-bottom: var(--spacing-list-padding);
  box-sizing: content-box;
}
#pretendard-modal-explore > .modal > .content ul > li svg.normal {
  width: var(--modal-button-height);
  margin: 0;
  transform: none;
}
#pretendard-modal-explore > .modal > .content .wanted-sans {
  font-family: "Wanted Sans Subset", sans-serif;
  font-weight: 600;
}
#pretendard-modal-explore > .modal > .content .dunggeunmo {
  font-family: "DungGeunMo Subset", sans-serif;
}
#pretendard-modal-explore > .modal > .content .orioncactus {
  color: var(--primary-p3);
  fill: currentColor;
}
#pretendard-modal-explore > .background {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
#pretendard-modal-explore > .background::before, #pretendard-modal-explore > .background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
#pretendard-modal-explore > .background::before {
  background-color: var(--bg-body);
  opacity: 0.74;
}
#pretendard-modal-explore > .background::after {
  background-color: var(--fill);
  transition: background-color var(--modal-interaction-duration);
}
#pretendard-modal-explore::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--body);
  opacity: 0;
  transition: opacity var(--modal-interaction-duration), border-radius var(--modal-interaction-duration);
  pointer-events: none;
  border-radius: calc(var(--modal-navigation-height) / 2);
}
#pretendard-modal-explore.active > .background::after {
  background-color: var(--bg-body);
}
#pretendard-modal-explore.active::after {
  opacity: 1;
  border-radius: 0;
}/*# sourceMappingURL=style.article.pretendard.modal.css.map */