/* =======================================================
   GLOBAL RESET
   ======================================================= */
* {
  box-sizing: border-box;
}

html {
  overscroll-behavior-y: none;       /* ✅ 상하 바운스 흰색 제거 */
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Pretendard", system-ui, -apple-system,
               "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: #ffffff;
  overflow-x: hidden;
}


html,
body {
  background: #000;
  min-height: 100%;
}

body {
  background: #000;
  padding-bottom: env(safe-area-inset-bottom);
}


/* =======================================================
   HEADER (전시 페이지 전용)
   ======================================================= */
body[data-page="log"] header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-top: 10px !important;
  z-index: 3000;
}

body[data-page="log"] header .logo-brand,
body[data-page="log"] header .logo-roman,
body[data-page="log"] header .logo-korean {
  color: rgba(255, 255, 255, 0.8) !important;
}

body[data-page="log"] header .search-icon,
body[data-page="log"] header .shop-toggle {
  display: none !important;
}

/* 메뉴 텍스트 */
.main-nav a{
  color: rgba(234, 234, 236, 0.95);
}

/* | 구분선 */
.main-nav a::before{
  background: rgba(234, 234, 236, 0.95);
}

/* =======================================================
   LIST ICON
   ======================================================= */
.list-toggle {
  position: fixed;
  top: 9px;
  right: 22px;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3500;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.8);
}

.ic-list {
  width: 24px;
  height: 24px;
}

.list-toggle:hover {
  opacity: 1;
}

/* ===============================
   HEADER SLIDE ANIMATION
   =============================== */

/* 기본 상태: 보임 + 제자리 */
body[data-page="log"] header {
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

/* 숨김 상태: 살짝 위로 올려서 사라지는 느낌 */
header.header-hidden {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}

/* 리스트 버튼도 같이 위로 올라가게 */
.list-toggle.header-hidden {
  opacity: 0;
  transform: translateY(-28px);
}
/* =======================================================
   LAYOUT: TOP STAGE + BOTTOM INFO (Full-bleed safe)
======================================================= */

.media-stage {
  height: 75vh;
  width: 100%;          /* ✅ 100vw 대신 100% */
  background: #000000;
}

.info {
  height: 25vh;
  width: 100%;          /* ✅ 100vw 대신 100% */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding: 28px 60px;
  align-items: end;
}


/* ===============================
   TOP: HORIZONTAL SCROLL STAGE
=============================== */

.media-viewport {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  cursor: grab;
}

.media-viewport:active {
  cursor: grabbing;
}

/* 스크롤바는 취향껏, 일단 얇게 */
.media-viewport::-webkit-scrollbar { height: 10px; }
.media-viewport::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }
.media-viewport::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); }

.media-scaler {
  /* JS가 width, height를 스케일에 맞춰 픽셀로 세팅함 */
  position: relative;
  height: 100%;
}

.media-canvas {
  /* 기준 캔버스 사이즈 (비율 고정용) */
  width: 2200px;
  height: 820px;

  position: relative;
  background: #000000; /* 회색 프레임 영역 */
  transform-origin: top left;
}

/* 공통 박스 */
.box {
  position: absolute;
  background: #000000;
}

/* ===============================
   BOX LAYOUT (15)
   참고 이미지처럼 정렬된 테트리스 느낌
   필요하면 여기 숫자만 조금씩 조정하면 됨
=============================== */

/* 상단 줄 */
.b1  { left:  0px; top:  0px; width: 720px; height: 300px; }
.b2  { left: 740px; top:  0px; width: 900px; height: 250px; }
.b3  { left: 1660px; top:  0px; width: 900px; height: 250px; }
.b4  { left: 1910px; top:  270px; width: 450px; height: 300px; }

/* 중단 줄 */
.b5  { left:  0px;  top: 320px; width: 350px; height: 500px; }
.b6  { left: 370px;  top: 320px; width: 350px; height: 500px; }
.b7  { left: 740px;  top: 270px; width: 300px; height: 550px; }

/* 우측 큰 프레임 */
.b8  { left: 1640px; top: 270px; width: 250px; height: 300px; }
.b9  { left: 2380px; top: 270px; width: 230px; height: 300px; }
.b10 { left: 2580px; top: 0px; width: 360px; height: 250px; }

/* 하단 라인 (좌측에 “발” 느낌) */
.b11 { left:  1060px; top: 270px; width: 560px; height: 300px; }
.b12 { left: 1060px; top: 590px; width: 350px; height: 230px; }
.b13 { left: 1430px; top: 590px; width: 350px; height: 230px; }
.b14 { left: 1800px; top: 590px; width: 870px; height: 250px; }

/* 오른쪽 끝에 하나 더 (스크롤 여지) */
.b15 { left: 2630px; top: 270px; width: 450px; height: 300px; }


.box {
  position: absolute;
  background: #000000;          /* 박스 프레임 */
}

.box-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;          /* 미디어 배경 */
}

.box-inner video,
.box-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===============================
   MEDIA MODAL
================================ */

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
}

.media-modal.hidden {
  display: none;
}

/* 블러 배경 */
.media-modal .modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  cursor: pointer; /* 클릭 가능하다는 힌트 */
}

/* 중앙 콘텐츠 래퍼 */
.modal-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 배경 클릭 방해 안 하게 */
}

/* 실제 미디어 */
.modal-media {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  pointer-events: auto; /* 미디어 컨트롤은 클릭 가능 */
  background: black;
}

/* 숨김 처리 */
.modal-media.hidden {
  display: none;
}

/* ===============================
   BUTTONS (CLOSE / PREV / NEXT)
================================ */

.modal-close,
.modal-prev,
.modal-next{
  position: fixed;
  z-index: 6000;

  color: #fff;
  background: none;
  border: none;
  cursor: pointer;

  opacity: 0.65;
  pointer-events: auto;
  user-select: none;

  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.modal-close:hover,
.modal-prev:hover,
.modal-next:hover{
  opacity: 1;
}


/* ===============================
   CLOSE BUTTON
================================ */
.modal-close{
  top: 18px;
  right: 22px;

  width: 40px;
  height: 40px;

  font-size: 15px;
  line-height: 40px;
  text-align: center;
}


/* ===============================
   ARROWS (PREV / NEXT)
================================ */
.modal-prev,
.modal-next{
  top: 50%;
  transform: translateY(-50%);

  font-size: 28px;
  padding: 14px 16px;
}

.modal-prev{ left: 18px; }
.modal-next{ right: 18px; }



/* ===============================
   INFO LAYOUT (3 COLUMNS)
=============================== */

.info {
  display: grid;
  grid-template-columns: 3fr 1.1fr;
  column-gap: 96px;

  padding: 0 48px;             /* 🔥 위아래 패딩 제거 */

  align-items: center;         /* 🔥 세로 중앙 */
}



/* -------------------------------
   TEXT GROUP (LEFT + MIDDLE)
-------------------------------- */

.info-text-group {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 36px;   /* 텍스트 내부는 밀착 */
  align-items: start;
  color: #ffffff;
  opacity: 0.6;
}

/* 공통 */
.info-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -------------------------------
   LEFT
-------------------------------- */

.art-title {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.art-meta {
  margin: 2px 0 6px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

.art-credit {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.6;
}

.info-link {
  margin-top: 6px;
  font-size: 10px;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.6;
}

.info-link:hover {
  opacity: 1;
  color: #06f23d;
}


.ic-arrow,
.ic-insta {
  width: 11px;
  height: 11px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}


/* -------------------------------
   MIDDLE (DESCRIPTION)
-------------------------------- */

.info-col.middle {
  max-width: 450px;
  padding-top: 18px; /* 타이틀 기준선 연결 */
}

.info-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.info-desc.ko {
  margin-top: 8px;
}

/* -------------------------------
   RIGHT (VIDEO)
-------------------------------- */

.info-col.right {
  padding-top: -10px;        /* 본문보다 살짝 내려서 */
  justify-self: end;        /* 더 오른쪽으로 */
  opacity: 1;            /* 아주 살짝만 톤 다운 */
}


.video-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.video-wrap video {
  width: min(460px, 100%); /* 지금 520px → 줄임 */
  display: block;
  background: #000;
}

/* 캡션 */
.caption {
  font-size: 8px;
  opacity: 0.65;
  text-align: right;
  width: min(520px, 100%);
  color: #ffffff;
  opacity: 0.6;
}

@media (min-width: 1400px) {
  .video-wrap video {
    width: 550px;
  }
  .info {
    column-gap: 110px; /* 텍스트 ↔ 비디오 거리도 같이 확장 */
  }
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 800px) {

    
  body {
    overflow-y: auto;
    overflow-x: hidden;
    background: #000;
  }

  .media-viewport {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .info {
    height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 18px 40px;
    background: #000;
  }

  .info-link {
    margin-top: 20px;
  }

  .info-text-group {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .info-col.middle {
    max-width: 800px;
  }
  .video-wrap {
    align-items: flex-start;
  }

  .caption {
    text-align: left;
    width: 100%;
  }

}

@media (max-width: 900px) {
  /* 버튼이 차지하는 안전 여백 값 */
  :root{
    --modal-side-safe: 64px;   /* 좌우 화살표 영역 */
    --modal-top-safe: 56px;    /* 닫기 버튼 영역 */
    --modal-bottom-safe: 80px; /* 비디오 컨트롤 영역과 겹침 방지 */
  }

  /* 중앙 스테이지는 버튼 여백만큼 패딩을 확보 */
  .modal-content{
    position: absolute;
    inset: 0;

    padding-left: var(--modal-side-safe);
    padding-right: var(--modal-side-safe);
    padding-top: calc(var(--modal-top-safe) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--modal-bottom-safe) + env(safe-area-inset-bottom, 0px));

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 영상과 이미지는 패딩 안쪽 영역에서만 최대 크기 */
  .modal-media{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 버튼은 화면 테두리에 고정 */
  .modal-ui{
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .modal-close,
  .modal-prev,
  .modal-next{
    pointer-events: auto;
    z-index: 10;
  }

  .modal-close{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 12px;
  }

  .modal-prev{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .modal-next{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}