/* Drawings: 현대미술 갤러리. 넓은 벽에 크고 작은 액자를 여백을 넉넉히 두고 건다. 세로로 스크롤한다.
 * 그림 폭은 크기(s/m/l)와 가로세로 비율로 정해서, 같은 크기면 세로 그림도 가로 그림도 비슷한 넓이로 보인다.
 * 액자는 black/white/wood/none을 섞는다. 다크 모드는 문 닫은 뒤의 전시장: 벽이 어둡고 그림마다 조명. */
.gallery {
  --wall: #eeebe5;
  --wall-ink: #2a2724;
  --wall-soft: #7a746c;
  --floor: #d3cdc2;
  --baseboard: #c2bbae;
  --spot: rgb(255 253 246 / 0.8);
  --placard: #fcfbf8;
  --mat: #fbfaf6;
  /* 액자 재료 색. 모양(두께·매트)은 모두 같고 색만 다르다 */
  --frame-black: #1c1b1a;
  --frame-white: #f7f6f2;
  --frame-wood: linear-gradient(135deg, #b8956b, #9c7a52 50%, #ae8c62);
  --floor-h: 72px;
  position: relative;
  /* 다가갈 때 커진 벽이 페이지를 넓히지 않게 */
  overflow: clip;
  background: var(--wall);
  color: var(--wall-ink);
}

@media (prefers-color-scheme: dark) {
  .gallery {
    --wall: #252320;
    --wall-ink: #ece8e0;
    --wall-soft: #9a948a;
    --floor: #141312;
    --baseboard: #0e0d0c;
    --spot: rgb(255 238 205 / 0.2);
    --placard: #2e2c29;
    /* 어두운 전시장: 검정은 벽보다 더 검게, 흰색·나무는 조명이 약한 듯 톤을 낮춰 서로 튀지 않게 */
    --mat: #e9e5dc;
    --frame-black: #0a0908;
    --frame-white: #d6d2c9;
    --frame-wood: linear-gradient(135deg, #7f6548, #664f36 50%, #765d42);
  }
}

/* 벽 전체. 다가갈 때는 이걸 옮기고 키운다. 맨 아래는 바닥 */
.gallery-camera {
  position: relative;
  padding: var(--space-4) max(6vw, 16px) calc(var(--floor-h) + var(--space-6));
  background: linear-gradient(
    to bottom,
    var(--wall) calc(100% - var(--floor-h)),
    var(--baseboard) calc(100% - var(--floor-h))
      calc(100% - var(--floor-h) + 4px),
    var(--floor) calc(100% - var(--floor-h) + 4px)
  );
  transform-origin: 0 0;
  transition: transform 0.8s var(--ease);
}

.gallery-camera > * {
  max-width: 1160px;
  margin-inline: auto;
}

/* 해가 바뀌는 자리의 연도. 작게, 가는 선과 함께 */
.year-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: clamp(40px, 7vh, 80px) 0;
  color: var(--wall-soft);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.year-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--wall-ink) 12%, transparent);
}

/* 벽 폭을 기준(cqi)으로 줄 높이와 액자 두께를 잡아, 화면 폭이 바뀌어도 배치가 그대로 줄고 는다 */
.hang {
  --scale: 1;
  container-type: inline-size;
}

/* 한 줄: 같은 높이로, 가운데 선에 맞춰, 같은 간격으로. 줄 높이(--h)는 줄마다 다르다 */
.hang-row {
  --row-h: calc(var(--h) * var(--scale) * 100cqi);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) 4cqi;
  margin-block: clamp(36px, 6vh, 72px);
}

/* min-content: 그림 폭은 액자가 정하고, 명패가 길면 그 폭 안에서 줄바꿈한다 */
.work {
  --edge: calc(var(--row-h) * (var(--pad) + var(--bw)));
  position: relative;
  flex: none;
  width: min-content;
  margin: 0;
  isolation: isolate;
  transition: opacity 0.6s var(--ease);
}

/* 천장 조명이 그림 위로 떨어진다 */
.work::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -8cqi;
  width: calc(100% + 10cqi);
  height: calc(100% + 12cqi);
  translate: -50% 0;
  background: radial-gradient(
    ellipse 50% 52% at 50% 46%,
    var(--spot),
    transparent 72%
  );
  pointer-events: none;
}

.frame {
  display: block;
  width: fit-content;
  padding: calc(var(--row-h) * var(--pad));
  border: calc(var(--row-h) * var(--bw)) solid transparent;
  cursor: zoom-in;
  box-shadow:
    0 14px 26px -10px rgb(0 0 0 / 0.38),
    0 2px 5px rgb(0 0 0 / 0.14);
}

/* 그림 높이 = 줄 높이. 화면보다 넓으면 줄인다 */
.frame img {
  display: block;
  width: calc(var(--row-h) * var(--ratio));
  max-width: calc(100cqi - 2 * var(--edge));
  height: auto;
}

/* 액자는 모두 같은 모양: 테두리 2%, 매트 8% (줄 높이 기준). 템플릿의 EDGE(0.1)와 같다 */
.work {
  --pad: 0.08;
  --bw: 0.02;
}

.frame-black .frame,
.frame-white .frame,
.frame-wood .frame {
  background: var(--mat);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.08),
    0 14px 26px -10px rgb(0 0 0 / 0.38),
    0 2px 5px rgb(0 0 0 / 0.14);
}

.frame-black .frame {
  border-color: var(--frame-black);
}

.frame-white .frame {
  border-color: var(--frame-white);
}

.frame-wood .frame {
  border-image: var(--frame-wood) 1;
}

/* 액자 없이 캔버스째 */
.frame-none {
  --pad: 0;
  --bw: 0;
}

.frame-none .frame {
  box-shadow:
    4px 4px 0 rgb(0 0 0 / 0.12),
    0 18px 30px -10px rgb(0 0 0 / 0.42);
}

/* 명패: 그림 아래 조그맣게 */
.placard {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 11px 8px;
  background: var(--placard);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14);
  color: var(--wall-ink);
  font-size: 11.5px;
  line-height: 1.5;
}

.placard > span {
  display: block;
}

.placard-title {
  font-size: 12.5px;
  font-weight: 600;
}

.placard-meta {
  color: var(--wall-soft);
}

/* 다가가서 보는 중: 나머지는 어둑하게 */
.gallery.is-zoomed .frame {
  cursor: zoom-out;
}

.gallery.is-zoomed .work:not(.is-near),
.gallery.is-zoomed .year-mark {
  opacity: 0.25;
}

.gallery-note {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 3svh;
  max-width: min(560px, calc(100% - 32px));
  padding: 10px 14px;
  translate: -50% 0;
  background: var(--placard);
  color: var(--wall-ink);
  font-size: 14px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.gallery-note p {
  margin: 0;
}

.gallery.is-zoomed .gallery-note:not(:empty) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-camera {
    transition: none;
  }
}

/* 폰: 그림을 키운다. 한 줄에 다 안 들어가면 다음 줄로 넘어가 가운데 선을 지킨다 */
@media (max-width: 720px) {
  .hang {
    --scale: 1.7;
  }

  .hang-row {
    gap: var(--space-5) 5cqi;
    margin-block: var(--space-6);
  }

  .placard {
    font-size: 11px;
  }
}

/* B컷 크게 보기 */
.viewer {
  width: min(92vw, 900px);
  max-height: 92vh;
  padding: var(--space-5);
  border: 0;
  border-radius: 6px;
  background: #fdfcf8;
  color: #22201c;
}

.viewer::backdrop {
  background: rgb(20 18 16 / 0.72);
}

.viewer figure {
  margin: 0;
}

.viewer img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #fff;
}

.viewer figcaption {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
  line-height: 1.5;
}

.viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: 14px;
  color: #6e6a62;
}

.viewer button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid #d8d2c5;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.viewer form {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.viewer .viewer-close {
  border: 0;
  font-size: 24px;
}

/* B컷 휴지통: 오른쪽 아래 구석에 늘 떠 있다. 누르면 위로 판이 열리며 구겨진 종이가 쏟아진다 */
.trash {
  position: fixed;
  z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  transition: opacity 0.4s var(--ease);
}

/* 그림 앞으로 다가가 있는 동안은 숨는다 */
.gallery.is-zoomed ~ .trash {
  opacity: 0;
  pointer-events: none;
}

.trash > summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.35);
  cursor: pointer;
  list-style: none;
}

.trash > summary::-webkit-details-marker {
  display: none;
}

.trash > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.trash-can svg {
  display: block;
  width: 52px;
  height: auto;
  transform-origin: 30% 94%;
  transition: rotate 0.4s var(--ease);
}

.trash:not([open]) > summary:hover .trash-can svg {
  rotate: -8deg;
}

/* 열면 휴지통이 엎어진다 */
.trash[open] .trash-can svg {
  rotate: -28deg;
}

/* 몇 장 들었는지 */
.trash-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.trash-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(560px, calc(100vw - 32px));
  max-height: min(70svh, 640px);
  overflow: auto;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45);
  transform-origin: 100% 100%;
  animation: spill 0.35s var(--ease);
}

@keyframes spill {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

.trash-head {
  padding-inline: var(--space-2);
}

.trash-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
}

.trash-count {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.crumpled-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0;
  list-style: none;
}

/* 구겨진 종이: 가장자리가 울퉁불퉁하고 색이 바랬다. 올리면 펴지면서 색이 돌아온다 */
.crumpled {
  --flat: polygon(
    0 0,
    25% 0,
    50% 0,
    75% 0,
    100% 0,
    100% 33%,
    100% 66%,
    100% 100%,
    75% 100%,
    50% 100%,
    25% 100%,
    0 100%,
    0 66%,
    0 33%
  );
  --crumple: polygon(
    3% 5%,
    22% 1%,
    48% 4%,
    77% 0,
    97% 3%,
    100% 30%,
    96% 64%,
    99% 97%,
    74% 100%,
    52% 95%,
    24% 99%,
    2% 96%,
    4% 63%,
    0 35%
  );
  position: relative;
  width: 150px;
  margin: 0 -4px var(--space-3);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.2));
  transform: translateY(var(--drop, 0)) rotate(var(--tilt, 0deg));
  transition: transform var(--quick) var(--ease);
}

.crumpled:nth-child(3n + 2) {
  --crumple: polygon(
    0 2%,
    28% 4%,
    51% 0,
    73% 5%,
    100% 0,
    97% 36%,
    100% 61%,
    95% 100%,
    77% 96%,
    49% 100%,
    21% 95%,
    0 100%,
    3% 70%,
    1% 31%
  );
}

.crumpled:nth-child(3n) {
  --crumple: polygon(
    5% 0,
    26% 3%,
    47% 1%,
    76% 4%,
    99% 1%,
    96% 28%,
    100% 68%,
    98% 95%,
    71% 99%,
    50% 96%,
    27% 100%,
    1% 98%,
    0 66%,
    4% 34%
  );
}

.crumpled figure {
  position: relative;
  margin: 0;
  padding: 6px 6px 4px;
  background: #f1ede4;
  color: #22201c;
  clip-path: var(--crumple);
  transition:
    clip-path var(--quick) var(--ease),
    filter var(--quick) var(--ease);
  filter: grayscale(0.75) sepia(0.15) brightness(0.97);
}

/* 구김 자국 */
.crumpled figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 38%,
      rgb(0 0 0 / 0.12) 40%,
      rgb(255 255 255 / 0.4) 41%,
      transparent 44%
    ),
    linear-gradient(
      28deg,
      transparent 55%,
      rgb(0 0 0 / 0.1) 57%,
      rgb(255 255 255 / 0.35) 58%,
      transparent 61%
    ),
    linear-gradient(
      200deg,
      transparent 20%,
      rgb(0 0 0 / 0.08) 22%,
      rgb(255 255 255 / 0.35) 23%,
      transparent 26%
    ),
    radial-gradient(circle at 30% 70%, rgb(0 0 0 / 0.1), transparent 60%);
  transition: opacity var(--quick) var(--ease);
}

.crumpled-open {
  display: block;
  cursor: zoom-in;
}

.crumpled img {
  display: block;
  width: 100%;
  height: auto;
}

.crumpled figcaption {
  padding-top: 2px;
  line-height: 1.5;
}

.crumpled .crumpled-title {
  display: none;
}

.crumpled-meta {
  color: #6e6a62;
  font-size: 11px;
}

.crumpled:hover,
.crumpled:focus-within {
  z-index: 1;
  transform: translateY(var(--drop, 0)) rotate(0deg) scale(1.25);
}

.crumpled:hover figure,
.crumpled:focus-within figure {
  clip-path: var(--flat);
  filter: none;
}

.crumpled:hover figure::after,
.crumpled:focus-within figure::after {
  opacity: 0;
}

@media (max-width: 640px) {
  .trash > summary {
    width: 60px;
    height: 60px;
  }

  .trash-can svg {
    width: 44px;
  }

  .crumpled {
    width: 96px;
  }
}