:root {
  --blue:#0b1f74;
  --deep:#05070c;
  --paper:#f5f3ef;
  --line:#d9d6ce;
  --ink:#111;
  --muted:#6d6f76;
  --accent:#173ea5;
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; font-family: Inter, Arial, Helvetica, sans-serif; background:var(--deep); color:var(--ink); overflow:hidden; }

.noise {
  pointer-events:none;
  position:fixed; inset:0; opacity:.06; z-index:10;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 7px 7px;
  mix-blend-mode:overlay;
}

.topbar {
  position:fixed; left:0; right:0; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:24px 32px 18px;
  color:white;
  background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.eyebrow { font-size:12px; letter-spacing:.22em; font-weight:700; opacity:.75; margin-bottom:8px; }
.topbar h1 { margin:0; font-size:32px; line-height:.95; letter-spacing:-.03em; font-weight:900; }
.topbar p { margin:8px 0 0; font-size:14px; color:rgba(255,255,255,.72); }
nav { display:flex; gap:8px; }
button {
  border:0; background:white; color:#111; border-radius:999px; padding:10px 14px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.22); font-weight:700;
}
button:hover { transform:translateY(-1px); }

.viewport {
  position:fixed; inset:0; perspective:1200px; overflow:hidden;
  background: radial-gradient(circle at 50% 8%, #334cae 0%, #0a1e6f 35%, #070911 75%);
}

.gallery-space {
  position:absolute; inset:90px 0 92px;
  transform-style:preserve-3d;
  transform: rotateX(0deg);
}
.back-wall {
  position:absolute; left:7vw; right:7vw; top:5vh; height:58vh;
  background:linear-gradient(180deg, #f7f6f1, #e7e6e2);
  border-radius:2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 90px rgba(0,0,0,.05);
}
.left-wall, .right-wall {
  position:absolute; top:5vh; width:18vw; height:58vh; background:#e2e0db; opacity:.42;
  transform-origin:center;
  filter:blur(.2px);
}
.left-wall { left:-8vw; transform:skewY(4deg); }
.right-wall { right:-8vw; transform:skewY(-4deg); }
.floor {
  position:absolute; left:0; right:0; bottom:0; height:38vh;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, #d8d5cf, #7a7c82);
  background-size:90px 90px, 90px 90px, auto;
  transform: perspective(700px) rotateX(60deg) translateY(20vh);
  transform-origin:top;
  box-shadow:inset 0 120px 120px rgba(255,255,255,.28);
}
.gallery-title {
  position:absolute; top:9vh; left:10vw; z-index:1; color:#111;
}
.gallery-title span { display:block; font-size:11px; letter-spacing:.18em; font-weight:800; color:#536074; margin-bottom:8px; }
.gallery-title strong { font-size:42px; line-height:.88; font-weight:900; letter-spacing:-.05em; max-width:280px; display:block; }

.rail {
  position:absolute; left:0; right:0; top:10vh; height:58vh;
  display:flex; align-items:center; gap:42px; padding-left:42vw; padding-right:42vw;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
  z-index:2;
  cursor:grab;
}
.rail::-webkit-scrollbar { display:none; }

.art-card {
  flex:0 0 auto; scroll-snap-align:center;
  width:min(54vw, 680px); height:min(42vh, 430px);
  border:14px solid #fafafa;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  position:relative;
  transition:transform .25s ease, filter .25s ease;
  display:flex; align-items:center; justify-content:center;
}
.art-card.is-active {
  transform:scale(1.04) translateY(-6px);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.art-card img { width:100%; height:100%; object-fit:cover; display:block; }
.art-card .label {
  position:absolute; left:10px; bottom:-48px; width:calc(100% - 20px);
  color:#fff; font-size:12px; line-height:1.35;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.art-card .label b { display:block; font-size:14px; }

.caption-panel {
  position:fixed; left:32px; bottom:28px; z-index:6;
  width:min(460px, calc(100vw - 64px));
  color:white; padding:18px 18px 16px; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.45); backdrop-filter:blur(14px); border-radius:18px;
  box-shadow:0 20px 80px rgba(0,0,0,.28);
}
.caption-count { color:#a9bfff; font-size:12px; font-weight:800; letter-spacing:.14em; }
.caption-panel h2 { margin:8px 0 10px; font-size:20px; letter-spacing:-.02em; }
.caption-panel p { margin:8px 0; color:rgba(255,255,255,.82); font-size:14px; line-height:1.55; }
.hint { margin-top:12px; color:rgba(255,255,255,.55); font-size:12px; }

.intro-modal, .lightbox {
  position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
}
.intro-card {
  width:min(720px, calc(100vw - 40px)); background:#f6f3ed; color:#111; padding:36px; border-radius:22px;
  box-shadow:0 40px 120px rgba(0,0,0,.55); position:relative;
}
.intro-card h2 { margin:0 0 18px; font-size:56px; line-height:.9; letter-spacing:-.06em; max-width:520px; }
.intro-card p { font-size:16px; line-height:1.65; color:#333; }
.intro-card .ko { color:#555; }
.close {
  position:absolute; right:22px; top:18px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-size:22px; padding:0;
}
.enter { margin-top:14px; background:#0b1f74; color:white; padding:13px 22px; }

.lightbox { display:none; flex-direction:column; padding:5vh 5vw; }
.lightbox.is-open { display:flex; }
.lightbox img {
  max-width:90vw; max-height:70vh; object-fit:contain; background:#fff;
  box-shadow:0 30px 120px rgba(0,0,0,.8);
}
.lightbox .close { top:22px; right:28px; background:white; }
.lightbox-caption {
  margin-top:18px; color:white; width:min(900px, 90vw); text-align:left;
}
.lightbox-caption h3 { margin:0 0 8px; font-size:22px; }
.lightbox-caption p { margin:6px 0; color:rgba(255,255,255,.78); line-height:1.5; }

footer {
  position:fixed; bottom:0; right:0; z-index:5; color:rgba(255,255,255,.5);
  padding:12px 20px; font-size:11px; display:flex; gap:16px;
}

@media (max-width: 760px) {
  .topbar { padding:18px 18px 12px; }
  .topbar h1 { font-size:24px; }
  .topbar p { font-size:12px; }
  nav button { padding:8px 11px; }
  .gallery-title { display:none; }
  .rail { padding-left:18vw; padding-right:18vw; gap:24px; top:16vh; height:48vh; }
  .art-card { width:72vw; height:34vh; border-width:9px; }
  .caption-panel { left:16px; bottom:44px; width:calc(100vw - 32px); padding:14px; }
  .caption-panel h2 { font-size:17px; }
  .caption-panel p { font-size:12px; }
  footer { display:none; }
  .intro-card { padding:26px; }
  .intro-card h2 { font-size:38px; }
}