/* photos.hanjunhu.com — hanjunhu.com 과 같은 체계를 쓴다.
   토큰·간격·모서리·자간 모두 본 사이트에서 가져왔다. 사진만 다르게 다룬다. */

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body,h1,h2,h3,p,dl,dd,ol,ul,figure,figcaption,blockquote{margin:0}
ol,ul{list-style:none;padding:0}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

:root{
  --ink:#191c22; --ink-2:#454c56; --sub:#727a85; --mut:#a8afb9; --faint:#c8ced6;
  --line:#eef0f4; --line-2:#f5f6f8; --soft:#fbfcfe; --tint:#f7f9fc;

  --blue:#2563c9;   --blue-t:#e9f2ff;
  --orange:#e0771c; --orange-t:#fff2e2;
  --green:#12a071;  --green-t:#e2faf1;
  --amber:#d59a18;  --amber-t:#fff6dc;
  --purple:#7752e3; --purple-t:#f0ebff;
  --pink:#e6528b;   --pink-t:#ffebf3;
  --teal:#10a2bb;   --teal-t:#e1f7fc;
  --red:#e2504a;    --red-t:#ffece9;

  --pad:24px; --r:14px;
  --accent:var(--blue); --accent-t:var(--blue-t);
}

body{
  font-family:"Pretendard Variable",Pretendard,"Instrument Sans",
    -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-optical-sizing:auto;
  color:var(--ink); background:#fff;
  font-size:16px; line-height:1.7; letter-spacing:-.016em;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1080px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* 숫자와 로마자는 본 사이트와 같이 Instrument Sans 로 */
.h-num,.h-right,.kicker,.pc-cap em,.pc-tech,.vcount,.foot p,.pc-cap .dur{
  font-family:"Instrument Sans","Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-size:13px}
.skip:focus{left:0}

/* 맨 위 색 띠 */
.topbar{display:flex;height:2px}
.topbar i{flex:1}
.topbar i:nth-child(1){background:var(--blue)}
.topbar i:nth-child(2){background:var(--orange)}
.topbar i:nth-child(3){background:var(--green)}

/* 내비 */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.nav-in{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,64px);height:60px}
.nav-i{font-size:13.5px;font-weight:500;color:var(--sub);text-decoration:none;
  white-space:nowrap;transition:color .16s ease}
.nav-i:hover,.nav-i:focus-visible{color:var(--ink)}
.nav-i.on{color:var(--ink);font-weight:650}
.is-home{display:flex;align-items:center}
.prog{height:1px;background:var(--line-2)}
.prog i{display:block;height:100%;width:0;background:var(--ink);opacity:.55;
  transition:width .08s linear}

/* 머리말 */
.phead{padding-top:clamp(40px,5.4vw,68px)}
.kicker{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ptitle{font-size:clamp(27px,3.5vw,36px);font-weight:800;letter-spacing:-.04em;line-height:1.24}
.plead{margin-top:11px;font-size:clamp(14.5px,1.5vw,16.5px);color:var(--sub);line-height:1.72}

.jump{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px clamp(18px,3vw,30px)}
.jump a{font-size:13px;color:var(--sub);text-decoration:none;transition:color .16s ease}
.jump a span{margin-left:2px;display:inline-block;transition:transform .18s ease}
.jump a:hover{color:var(--ink)}
.jump a:hover span{transform:translate(2px,-2px)}

/* 구역 머리 */
.sec{margin-top:clamp(52px,6.4vw,86px);scroll-margin-top:78px}
.sec-first{margin-top:clamp(30px,3.6vw,46px)}
.h-row{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:20px}
.h-num{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.02em;flex:none}
.h-sec{font-size:21px;font-weight:800;letter-spacing:-.034em}
.h-right{margin-left:auto;font-size:12.5px;color:var(--mut);white-space:nowrap}
.statement{max-width:62ch;margin-bottom:24px;font-size:15px;color:var(--ink-2);
  line-height:1.85;white-space:pre-line}

/* ── 사진 놓기 ─────────────────────────────────────────────
   전시마다 스튜디오에서 정한 값이 .gal 에 붙는다.
   칸 수는 --cols, 사이 간격은 --gap, 모서리는 --rad.

   '알아서'는 칸을 나누지 않는다. 사진의 가로세로비를 그대로 두고
   한 줄에 들어갈 만큼 담은 다음, 줄 높이를 맞춰 오른쪽 끝을 가지런히 한다.
   사진을 자르지 않으면서 들쭉날쭉하지 않은 유일한 방법이다. (JS 가 폭을 계산한다) */
.gal{
  display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:var(--gap,10px);
}
.gal--just{display:flex;flex-wrap:wrap;gap:var(--gap,10px);align-items:flex-start}
.gal--just .pc{flex:none}
/* 높이는 JS 가 --h 로 못박는다. 한 줄 안의 사진은 반드시 같은 높이여야 한다. */
.gal--just .pc-btn{height:var(--h,240px)}
.gal--just .pc-btn img,.gal--just .pc-btn video{height:100%;width:100%;object-fit:cover}

.pc{position:relative;min-width:0}
.pc-btn{
  display:block;width:100%;overflow:hidden;border-radius:var(--rad,var(--r));
  background:var(--line-2);cursor:zoom-in;position:relative;
  transition:box-shadow .18s ease;
}
.pc-btn:hover{box-shadow:0 0 0 1px #dcdfe5}
.pc-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pc-btn img,.pc-btn video{
  width:100%;height:100%;object-fit:cover;display:block;
  background-size:cover;background-position:center;
  transition:opacity .5s ease,transform .5s cubic-bezier(.3,.7,.3,1);
}
.pc-btn img{opacity:0}
.pc-btn img.is-loaded{opacity:1}
.pc-btn:hover img,.pc-btn:hover video{transform:scale(1.014)}
@media (prefers-reduced-motion:reduce){
  .pc-btn img,.pc-btn video{transition:opacity .2s ease}
  .pc-btn:hover img,.pc-btn:hover video{transform:none}
}

/* 영상 표시 */
.pc-dur{
  position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:8px;background:rgba(15,18,24,.62);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.pc-dur svg{width:8px;height:10px;fill:currentColor;flex:none}

/* 설명 */
.pc-cap{margin-top:10px;line-height:1.55;min-width:0}
.pc-cap b{font-size:14.5px;font-weight:650;letter-spacing:-.022em}
.pc-cap em{font-style:normal;font-size:13px;color:var(--mut);margin-left:7px}
.pc-cap small{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.pc-tech{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:4px;
  font-size:11.5px;color:var(--faint)}
.gal--cap-none .pc-cap{display:none}
.gal--cap-hover .pc-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 14px 12px;
  color:#fff;opacity:0;transition:opacity .2s ease;pointer-events:none;
  border-radius:0 0 var(--rad,var(--r)) var(--rad,var(--r));
  background:linear-gradient(transparent,rgba(15,18,24,.72));
}
.gal--cap-hover .pc:hover .pc-cap,.gal--cap-hover .pc:focus-within .pc-cap{opacity:1}
.gal--cap-hover .pc-cap em,.gal--cap-hover .pc-cap small,.gal--cap-hover .pc-tech{color:rgba(255,255,255,.78)}

/* ── 크게 보기 ── */
.viewer{position:fixed;inset:0;z-index:100;display:none;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.viewer.is-open{display:grid;grid-template-rows:1fr auto}
/* 그리드로 가운데 정렬하면 세로로 긴 사진에서 max-height:100% 가 먹지 않는다.
   칸 높이가 내용에 맞춰 늘어나 버려서 백분율의 기준이 사라지기 때문이다.
   플렉스는 컨테이너 높이가 기준이라 확실히 눌린다. overflow 는 마지막 안전장치. */
.vstage{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;
  padding:clamp(20px,4vh,44px) var(--pad) 0}
.vmedia{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;border-radius:var(--r);opacity:0;transition:opacity .3s ease}
.vmedia.is-in{opacity:1}
.vfoot{display:flex;align-items:center;gap:16px;
  padding:14px var(--pad) max(16px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line)}
.vinfo{min-width:0;flex:1}
.vinfo b{font-size:15px;font-weight:650;letter-spacing:-.022em}
.vinfo em{font-style:normal;font-size:13px;color:var(--mut);margin-left:7px}
.vinfo small{display:block;font-size:13px;color:var(--sub);margin-top:1px}
.vnav{display:flex;align-items:center;gap:6px;flex:none}
.vcount{font-size:12.5px;color:var(--mut);padding:0 6px}
.vbtn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:10px;color:var(--sub);background:#fff;
  transition:color .16s ease,border-color .16s ease,background .16s ease}
.vbtn:hover:not(:disabled){color:var(--ink);border-color:#dcdfe5;background:var(--soft)}
.vbtn:disabled{opacity:.35;cursor:default}
.vbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── 비어 있을 때 ── */
.empty{border:1px solid var(--line);border-radius:var(--r);background:var(--tint);
  padding:34px 26px;text-align:center;margin-top:28px}
.empty b{display:block;font-size:15px;font-weight:700;letter-spacing:-.024em}
.empty p{margin-top:6px;font-size:13.5px;color:var(--sub)}

/* ── 바닥 ── */
.foot{margin-top:clamp(56px,7vw,92px);padding-top:26px;padding-bottom:64px;
  border-top:1px solid var(--line-2)}
.foot p{font-size:12.5px;color:var(--mut);line-height:1.85}
.foot p+p{margin-top:4px}
.foot a{color:var(--sub);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .protect{color:var(--faint);max-width:64ch}

@media (max-width:720px){
  :root{--pad:18px}
  .gal{grid-template-columns:1fr!important}
  .gal--auto .pc.is-wide{grid-column:auto}
  .h-right{display:none}
  .vfoot{flex-wrap:wrap}
}

/* ── 도입부 ── */
.lede{margin-top:14px;font-size:clamp(18px,2.1vw,24px);line-height:1.62;
  letter-spacing:-.028em;font-weight:450}
.lede b{font-weight:700;color:var(--ink)}
.lede span{color:#949ba6;font-weight:400}

/* ── 숫자 ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-top:clamp(28px,3.6vw,42px)}
.stats li{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:17px 16px 14px}
.stats b{display:block;font-size:26px;font-weight:750;letter-spacing:-.045em;line-height:1.15;
  font-family:"Instrument Sans","Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.stats b i{font-style:normal;font-size:14px;font-weight:600;color:var(--mut);margin-left:2px;
  letter-spacing:-.02em;font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif}
.stats span{display:block;margin-top:4px;font-size:12.5px;color:var(--mut)}

/* ── 탭 ── */
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(26px,3.2vw,38px);border-bottom:1px solid var(--line)}
.tab{position:relative;padding:12px 8px 13px;font-size:14px;font-weight:600;color:var(--mut);
  letter-spacing:-.022em;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s ease,background .16s ease;border-radius:9px 9px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab:hover{color:var(--ink-2);background:var(--tint)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink);background:var(--line-2)}
.tab em{font-style:normal;color:var(--faint);margin-left:5px;font-size:12px;
  font-family:"Instrument Sans",system-ui,sans-serif}
.tab.on em{color:var(--mut)}
.panel{display:none}
.panel.on{display:block;animation:fade .24s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.on{animation:none}}

/* ── 전시 표지 카드 ── */
.exc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
.exc a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden;transition:border-color .16s ease,background .16s ease}
.exc a:hover{border-color:#dcdfe5;background:var(--soft)}
.exc img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--line-2)}
.exc .t{padding:14px 16px 15px}
.exc h3{font-size:15.5px;font-weight:700;letter-spacing:-.026em}
.exc p{margin-top:4px;font-size:13px;color:var(--sub);line-height:1.6}
.exc .m{margin-top:10px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mut)}
.exc .m i{font-style:normal;color:var(--faint);border-left:1px solid var(--line);padding-left:9px}

/* ── 바닥의 흐린 표시 ── */
.wordmark{margin-top:clamp(56px,7vw,96px);overflow:hidden;line-height:0;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.wordmark svg{width:min(560px,72%);margin:0 auto;opacity:.05;display:block}

@media (max-width:900px){
  .exc{grid-template-columns:1fr}
}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .tabs{grid-auto-flow:row;grid-auto-columns:auto;border-bottom:0;gap:0}
  .tab{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);border-radius:0;
    margin-bottom:0}
  .tab.on{border-bottom-color:var(--ink)}
}