/* =========================================================
   갤러리(gallery.html) — 증거 사진 보관함
   ========================================================= */
.archive { max-width: 1280px; margin: 0 auto; padding: 48px 24px; }
.archive-head { background: var(--ink-2); border: 4px solid var(--ink-3); padding: 24px; margin-bottom: 32px; animation: riseIn .5s both; }
.archive-head .row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.archive-head h1 { font: 900 clamp(30px, 4vw, 48px) var(--mono); color: #fff; letter-spacing: .1em; }
.archive-head .stamp { background: var(--red); color: #fff; padding: 4px 12px; font-size: 12px; font-weight: 900; transform: rotate(2deg); }
.archive-head .en { font: 14px var(--mono); color: var(--gray-2); }
.archive-head .count { font: 12px var(--mono); color: #666; margin-top: 4px; }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shot { margin: 0; cursor: pointer; background: var(--ink-2); border: 4px solid var(--ink-3); overflow: hidden; transition: border-color .2s; animation: shotIn .3s both; }
@keyframes shotIn { from { opacity: 0; transform: scale(.9); } }
.shot:hover { border-color: var(--red); }
.shot .img { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; }
.shot .img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) contrast(1.2); transition: transform .5s; }
.shot:hover .img img { transform: scale(1.1); }
.shot .img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 48px no-repeat; opacity: 0; transition: opacity .2s; }
.shot:hover .img::after { opacity: 1; }
.shot .tag { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--red); color: #fff; font-size: 12px; font-weight: 900; padding: 4px 8px; transform: rotate(3deg); }
.shot .info { padding: 16px; background: var(--ink); border-top: 2px solid var(--ink-3); }
.shot .info b { display: block; font: 900 18px var(--mono); color: #fff; margin-bottom: 4px; }
.shot .info div { font-size: 12px; color: #666; line-height: 1.7; }
.shot .info span { color: #fff; font-family: var(--mono); margin-left: 8px; }
.shot figcaption { display: none; }

.pager { margin-top: 32px; display: flex; justify-content: center; gap: 8px; }
.pager button { width: 40px; height: 40px; font: 900 18px var(--mono); color: var(--gray-2); transition: color .2s; }
.pager button:hover, .pager button.on { color: #fff; }

.caution { margin-top: 32px; background: var(--ink-2); border: 4px solid var(--red); padding: 24px; display: flex; gap: 16px; animation: fadeIn .5s .5s both; }
.caution .mark { color: var(--red); font-size: 30px; line-height: 1; }
.caution b { display: block; font: 900 18px var(--mono); color: #fff; margin-bottom: 8px; }
.caution p { font-size: 14px; color: var(--gray-2); line-height: 1.7; }

.evidence-card { position: relative; width: 100%; max-width: 1024px; background: var(--ink-2); border: 4px solid var(--red); animation: zoomOut .25s both; }
@keyframes zoomOut { from { transform: scale(.9); } }
.evidence-card .img { position: relative; background: #000; }
.evidence-card .img img { width: 100%; max-height: 70vh; object-fit: contain; filter: grayscale(.8) contrast(1.2); }
.evidence-card .tag { position: absolute; top: 16px; right: 16px; background: var(--red); color: #fff; font-size: 14px; font-weight: 900; padding: 8px 16px; transform: rotate(3deg); }
.evidence-card .detail { padding: 24px; background: var(--ink); border-top: 4px solid var(--ink-3); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 14px; }
.evidence-card h2 { font: 900 24px var(--mono); color: #fff; margin-bottom: 16px; }
.evidence-card dl { margin: 0; display: grid; grid-template-columns: 80px 1fr; row-gap: 8px; }
.evidence-card dt { color: #666; } .evidence-card dd { margin: 0; color: #fff; font-family: var(--mono); }
.evidence-card dd.red { color: var(--red); font-weight: 900; }
.evidence-card .desc-k { color: #666; font-size: 12px; margin-bottom: 8px; }
.evidence-card .desc { color: #fff; line-height: 1.7; }

@media (max-width: 1023px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .archive { padding: 32px 12px; }
  .archive-head { padding: 16px; border-width: 2px; }
  .archive-head .row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .shots { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .shot { border-width: 1px; }
  .shot .tag, .shot .info { display: none; }
  .shot .img::after { background-size: 24px; }
  .pager button { width: 32px; height: 32px; font-size: 14px; }
  .caution { padding: 16px; border-width: 2px; }
  .caution p { font-size: 12px; }
  .evidence-card .img img { max-height: 50vh; }
  .evidence-card .detail { grid-template-columns: 1fr; padding: 16px; }
  .evidence-card h2 { font-size: 20px; }
}