@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap");

/* Reset & 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* 이미지 보호 설정 */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  font-family: "IBM Plex Sans KR";
  line-height: 1.6;
  color: #000000;
  background-color: yellow;
}

body.modal-open {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
}

/* 헤더 */
header {
  width: 25vw;
  height: 100vh;
  padding: 20px;
  background: yellow;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
}

header::after {
  content: "";
  display: block;
  width: 20px;
  height: 1.75vh;
  background: rgb(145, 145, 70);
  position: absolute;
  top: 45vh;
  left: 0vw;
}

header h1 {
  line-height: 1.25;
  font-weight: 500;
}

header h1 a {
  color: rgb(145, 145, 70);
  font-size: 21px/1;
}

header h1 a:hover {
  color: #000;
}

header h1::before {
  content: "";
  display: block;
  width: 7.5vw;
  height: 1.75vh;
  background: #000;
  position: absolute;
  top: 45vh;
  right: -75vw;
}

header h1::after {
  content: "";
  display: block;
  width: 1.75vh;
  height: 100vh;
  background: #000;
  position: absolute;
  top: 0px;
  right: -75vw;
}

header p {
  color: rgb(145, 145, 70);
  font-weight: 500;
  transition: color 0.3s;
}

header ul:nth-of-type(1) {
  position: relative;
  top: 20vh;
  gap: 20px;
  justify-content: space-between;
  align-items: left;
}

header ul:nth-of-type(2) {
  position: absolute;
  bottom: 2vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

header ul span {
  font-size: smaller;
  margin-right: 1vw;
}

header .btnView {
  background: rgb(145, 145, 70);
  color: #fff;
  position: absolute;
  top: 45vh;
  width: 50px;
  height: 1.75vh;
  font-weight: 900;
  font-size: small;
  text-align: center;
}

header .btnView:hover {
  background: rgb(0, 0, 0);
  color: #fff;
}

.nav-links a {
  color: rgb(145, 145, 70);
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  font-weight: 900;
  color: rgb(0, 0, 0);
}

.contact a {
  color: rgb(145, 145, 70);
  font-weight: 500;
  transition: color 0.3s;
}

.contact a:hover {
  color: rgb(0, 0, 0);
}

main {
  margin-left: 25vw;
  box-sizing: border-box;
  padding: 20px;
}

main section {
  width: 100%;
}

main section::after {
  content: "";
  display: block;
  clear: both;
}

main section article {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 9px;
  cursor: pointer;
  /* 클릭 가능함 표시 */
}

main section article > div {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 9px;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

main section article:hover > div {
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

main section article > div .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 8px;
}

.blur-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(15px);
  transform: scale(1.1);
  transition: opacity 0.8s ease;
  z-index: 1;
  pointer-events: none;
}

.is-loaded .blur-canvas {
  opacity: 0;
}

img.lazy-image {
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
}

img.lazy-image.loaded {
  opacity: 1;
}

/* Specific sizing for the main grid */
main section article div img.lazy-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* Modal specific optimization styles */
#work-modal .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  border: none;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* Hardware acceleration for better clipping */
}

#work-modal .wm-media {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

#work-modal .lazy-image {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

#work-modal .lazy-image.loaded {
  opacity: 1;
}

main section article div h2 {
  margin-top: 6px;
  font: bold 14px/1 "IBM Plex Sans KR";
  color: #444;
  margin-bottom: 6px;
}

main section article div p {
  font: 12px/1.25 "IBM Plex Sans KR";
  color: #777;
  margin-bottom: 9px;
}

/* pc small */
@media (max-width: 1024px) {
  header h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
  }

  header p {
    font-size: 0.9rem;
  }

  header ul:nth-of-type(1) {
    position: absolute;
    top: 50vh;
    gap: 20px;
    justify-content: space-between;
    align-items: left;
    font-size: 0.9rem;
  }

  header ul:nth-of-type(2) {
    position: absolute;
    bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  header ul span {
    font-size: 0rem;
    margin-right: 3vw;
  }

  header .btnView {
    font-size: 0.7rem;
  }

  main section article {
    width: 33.333%;
  }

  main section div p {
    font-size: 0.9rem;
  }
}

/* tablet */
@media (max-width: 768px) {
  header h1 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
  }

  header p {
    transform: translateX(-500%);
  }

  header ul span {
    margin-right: 2vw;
  }

  header .btnView {
    font-size: 0.9rem;
  }

  main section article {
    width: 50%;
  }
}

/* mobile */
@media (max-width: 425px) {
  header {
    width: 25vw;
    height: 100vh;
    padding: 20px;
    background: yellow;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
  }

  header h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
  }

  header p {
    transform: translateX(-500%);
  }

  header ul {
    line-height: 2;
  }

  header ul:nth-of-type(1) {
    position: absolute;
    top: 50vh;
    gap: 20px;
    justify-content: space-between;
    align-items: left;
    font-size: 0.9rem;
  }

  header ul:nth-of-type(2) {
    position: absolute;
    bottom: 2vh;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;
  }

  header ul span {
    align-items: left;
    margin-right: 2vw;
    justify-content: space-around;
  }

  header .btnView {
    font-size: 0.8rem;
  }

  main section article {
    width: 100%;
  }

  main section div p {
    font-size: 0.8rem;
  }
}

/* ============================================================
   Work Modal
   ============================================================ */

#work-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
}

#work-modal.wm-open {
  display: flex;
}

.wm-media-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: auto;
}

.wm-media-wrapper::-webkit-scrollbar {
  display: none;
}

.wm-media-wrapper {
  scrollbar-width: none;
}

.wm-carousel-track {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 3vw;
  padding: 0 50vw;
  box-sizing: border-box;
}

.wm-carousel-track::-webkit-scrollbar {
  display: none;
}

.wm-carousel-track {
  scrollbar-width: none;
}

/* 세로 모드 캐러셀 트랙 */
@media (max-aspect-ratio: 1/1) {
  #work-modal:not(.wm-is-dual):not(.wm-is-dual-carousel) .wm-carousel-track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 50vh 0;
  }
}

.wm-carousel-track.wm-no-scroll {
  overflow: hidden !important;
  justify-content: center;
  padding: 0 !important;
}

.wm-carousel-item {
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  max-width: 85vw;
  flex-shrink: 0;

  @media (max-width: 768px) {
    height: auto;
    max-width: 100vw;
  }
}

@media (max-aspect-ratio: 1/1) {
  #work-modal:not(.wm-is-dual):not(.wm-is-dual-carousel) .wm-carousel-item {
    width: 85vw;
    height: auto;
    max-height: 85vh;
  }
}

.wm-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ─── Dual Mode ───────────────────────────────────────────────────────────── */
.wm-is-dual .wm-carousel-slider-track,
.wm-is-dual-carousel .wm-carousel-slider-track {
  display: none !important;
}

.wm-dual-wrapper {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 100%;
  height: 100%;
  padding: 40px 60px;
  margin: 0 auto;
  align-items: center;
}

.wm-frame-container {
  max-height: 70vh;
  position: relative;
  display: flex;
  flex: 0 1 auto;
  min-width: 0;

  @media (max-width: 768px) {
    max-height: unset;
  }
}

.wm-dual-wrapper>.wm-frame-container:nth-child(1),
.wm-left-frame .wm-frame-container {
  aspect-ratio: 16 / 9;
  max-height: 55vh;
  max-width: 60vw;
}

.wm-dual-wrapper>.wm-frame-container:nth-child(2),
.wm-right-frame .wm-frame-container {
  aspect-ratio: 1/2;
}

.wm-frame-scroller-track {
  position: absolute;
  right: 12px;
  top: 10%;
  width: 6px;
  height: 80%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 100;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wm-frame-scroller-track.wm-active,
.wm-carousel-slider-track.wm-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.wm-frame-scroller-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* ─── Carousel Slider (Dynamic) ────────────────────────────────────────── */
.wm-carousel-slider-track {
  position: absolute;
  left: 25%;
  bottom: 20px;
  width: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 100;
  cursor: pointer;
}

.wm-carousel-slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  transition:
    width 0.2s,
    left 0.1s,
    height 0.2s,
    top 0.1s;
}

@media (max-aspect-ratio: 1/1) {
  #work-modal:not(.wm-is-dual):not(.wm-is-dual-carousel) .wm-carousel-slider-track {
    left: auto;
    right: 20px;
    top: 25%;
    width: 4px;
    height: 50%;
    bottom: auto;
  }

  #work-modal:not(.wm-is-dual):not(.wm-is-dual-carousel) .wm-carousel-slider-handle {
    width: 100%;
    height: auto;
  }
}

.wm-frame {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wm-frame::-webkit-scrollbar {
  display: none;
}

.wm-frame .wm-media {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin-bottom: 0;
  object-fit: contain;
  box-shadow: none;
}

/* ─── Cover Frame (단일 이미지, A3 세로 비율 297:420) ────────────────────────── */
.wm-cover-frame {
  aspect-ratio: 297 / 420;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wm-cover-frame .wm-frame {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-cover-frame .wm-media {
  width: auto;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
}

@media (max-aspect-ratio: 1/1) {

  .wm-is-dual .wm-media-wrapper,
  .wm-is-dual-carousel .wm-media-wrapper {
    flex-direction: column;
    padding: 20px 0;
    gap: 20px;
    align-items: center;
    overflow-y: auto;
  }

  .wm-frame-container {
    flex: none;
    height: auto;
    /* 고정 높이 대신 auto를 주어야 비율(aspect-ratio)이 유지됨 */
    width: 65% !important;
    /* 첫 번째 프레임(종이)만 살짝 더 작게 조정하여 여백 확보 */
    max-width: 95%;
    margin: 0 auto;
    min-height: 0;
    /* 내부 컨텐츠 크기에 의해 비율이 강제로 늘어나는 현상(Flex 버그) 방지 */
  }

  /* 가로형 프레임 (일반듀얼 1번 / 듀얼캐러셀 2번) - 답답하지 않게 패딩 */
  .wm-left-frame .wm-frame-container {
    aspect-ratio: 16 / 9;
    width: 90% !important;
    /* 다른 프레임은 기존처럼 시원하게 보이도록 복구 */
    box-sizing: border-box;
  }

  .wm-left-frame .wm-frame-scroller-track {
    right: 12px;
  }

  /* 세로형 프레임 (일반듀얼 2번 / 듀얼캐러셀 3번) - 해상도 차이를 위해 패딩 및 너비 조정 */
  .wm-right-frame .wm-frame-container {
    aspect-ratio: 1/2;
    width: 70% !important;
    /* 다른 프레임은 기존처럼 시원하게 보이도록 복구 */
    box-sizing: border-box;
  }

  .wm-right-frame .wm-frame-scroller-track {
    right: 12px;
  }

  .wm-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100% !important;
    overflow-y: auto;
  }

  #work-modal:not(.wm-is-dual):not(.wm-is-dual-carousel) .wm-media-wrapper {
    width: 95vw;
    height: calc(100vh - 160px);
    margin: 80px auto;
    padding: 0;
  }

  /* ─── Dual Mode Vertical Carousel ─────────────────────────────────── */
  .wm-is-dual .wm-media-wrapper:not(.wm-dual-wrapper),
  .wm-is-dual-carousel .wm-media-wrapper {
    overflow: hidden;
    padding: 0;
    gap: 0;
  }

  .wm-is-dual .wm-carousel-track,
  .wm-is-dual-carousel .wm-carousel-track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 50vh 0;
  }

  .wm-is-dual .wm-carousel-item,
  .wm-is-dual-carousel .wm-carousel-item {
    width: 100%;
  }

  .wm-is-dual .wm-carousel-item .wm-frame-container,
  .wm-is-dual-carousel .wm-carousel-item .wm-frame-container {
    width: auto;
    /* 100% 오버라이드 제거하여 위에서 설정한 개별 너비가 적용되게 함 */
    height: auto;
    max-width: none;
    margin: 0 auto;
  }

  /* 각 프레임별 클래스(wm-left-frame, wm-right-frame)에서 설정한 값을 따름 */

  .wm-is-dual .wm-carousel-slider-track,
  .wm-is-dual-carousel .wm-carousel-slider-track {
    left: auto;
    right: 20px;
    top: 25%;
    width: 4px;
    height: 50%;
    bottom: auto;
  }

  .wm-is-dual .wm-carousel-slider-handle,
  .wm-is-dual-carousel .wm-carousel-slider-handle {
    width: 100%;
    height: auto;
  }
}