/* 생성일자: 2026-09-07 | Official home / gallery integration */
html{scroll-padding-top:100px}
.home-skip{position:fixed;left:20px;top:-100px;z-index:200;background:#d9d1f5;color:#101020;padding:10px 18px}.home-skip:focus{top:82px}
.home-header{position:fixed;inset:0 0 auto;z-index:65;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 4vw;background:linear-gradient(110deg,#100d20ed,#080e19eb);border-bottom:1px solid #ad98eb3b;backdrop-filter:blur(18px);box-shadow:0 10px 30px #0003}
.home-brand{font-family:var(--font-sans);font-size:24px;letter-spacing:-.04em;color:#ebe7f7;font-weight:800;text-decoration:none}.home-brand span{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;margin-left:7px;color:#a49ab9}
.home-nav{display:flex;align-items:center;justify-content:center;gap:26px}.home-nav a{color:#c3bdcf;font-size:13px;text-decoration:none;white-space:nowrap;transition:color .2s}.home-nav a:hover{color:#65edff}.home-nav .nav-gallery{padding:9px 15px;border:1px solid #b295ff55;background:#b295ff12;border-radius:7px;color:#e7dcff;box-shadow:inset 0 1px #ffffff08}.home-header .lang-toggle{position:static;flex-shrink:0;backdrop-filter:none}
.hero{padding-top:120px}.hero-actions{position:relative;z-index:4;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;margin-top:30px}.hero-actions a{display:inline-flex;align-items:center;gap:18px;font-size:14px;font-weight:600;text-decoration:none;letter-spacing:.02em}.hero-gallery-btn{padding:14px 24px;border:1px solid #bba4ff77;border-radius:9px;color:#eeeaff;background:linear-gradient(115deg,#59367b99,#14284499);box-shadow:0 0 30px #a074ff1f,inset 0 1px #ffffff15}.hero-gallery-btn:hover{border-color:#67e6ff;box-shadow:0 0 30px #a074ff45}.hero-music-btn{padding:14px 10px;color:#cecad9}.hero-scroll{margin-top:30px}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.gallery-heading .section-sub{max-width:680px}.gallery-enter{flex-shrink:0;color:#ddcffc;text-decoration:none;font-family:var(--font-mono);font-size:13px;border:1px solid #ab8ef066;padding:14px 18px;border-radius:8px;background:#8b6abc13}
#gallery{position:relative;background:radial-gradient(ellipse at 10% 40%,#46296622,transparent 60%)}#gallery .gallery-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
#gallery .cover-card{display:block;aspect-ratio:4/5;border:1px solid #b9a1ec38;border-radius:12px;box-shadow:0 20px 40px #0005,inset 0 1px #fff1;min-width:0;background:#0c1020;text-decoration:none;transform-style:preserve-3d}
#gallery .cover-card img{width:100%;height:100%;object-fit:cover;object-position:center 25%}#gallery .cover-card:hover{border-color:#89e9f8aa;box-shadow:0 22px 45px #0008,0 0 26px #997be826}
#gallery .cover-scrim{background:linear-gradient(0deg,#080816f5,transparent 55%,#090d1944)}#gallery .cover-info{padding:24px}#gallery .cover-title{font-size:clamp(18px,2vw,26px);line-height:1.25}#gallery .cover-count{font-size:12px;color:#d0c4e3}
.exhibit-number{position:absolute;inset:18px 20px auto;font:11px var(--font-mono);letter-spacing:.12em;display:flex;justify-content:space-between;color:#eee6ff;text-shadow:0 2px 8px #000}.exhibit-number>span{font-size:20px}.gallery-film-link{display:inline-block;margin-top:24px;font-size:14px;color:#9cdeed;text-decoration:none}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,[role=slider]:focus-visible{outline:2px solid #82e6ff;outline-offset:5px}.dock-item:focus-visible .dock-tip{opacity:1}
/* PHOTO BANDS — Astra High / Luna Extra High crop pass (2026-09-09)
   Scoped to home bands. The original hero remains an atmosphere-only image. */
.photo-band--answer,
.photo-band--bright{isolation:isolate}
.photo-band--answer .photo-band-image,
.photo-band--bright .photo-band-image{
  top:0;
  height:100%;
  transform:none !important;
  will-change:auto;
}
.photo-band--answer .photo-band-image{
  object-fit:cover;
  object-position:62% 24%;
  filter:saturate(.86) brightness(.84) contrast(1.02);
}
.photo-band--answer::after,
.photo-band--bright::after{
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.12) 64%,rgba(0,0,0,.88) 100%);
}
.photo-band--answer .photo-band-text{
  align-self:flex-end;
  width:min(760px,48vw);
  margin:0 auto 0 6vw;
  padding:0 0 clamp(62px,8vh,98px);
  text-align:left;
}
.photo-band--bright .photo-band-image{
  object-fit:cover;
  object-position:50% 0%;
  filter:saturate(.9) brightness(.86) contrast(1.03);
}
.photo-band--bright::after{
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.02) 35%,rgba(0,0,0,.16) 68%,rgba(0,0,0,.72) 100%);
}
.photo-band--bright .photo-band-text{
  position:absolute;
  left:50%;
  bottom:clamp(62px,8vh,98px);
  width:min(900px,88vw);
  padding:0 24px;
  transform:translateX(-50%);
}

@media(max-width:700px) and (orientation:portrait){
  .photo-band--answer .photo-band-text{
    width:100%;
    margin:0;
    padding:0 22px clamp(58px,10vh,82px);
    text-align:center;
  }
  .photo-band--bright{
    display:block;
    height:auto;
    min-height:0;
    background:#090a0f;
  }
  .photo-band--bright .photo-band-image{
    position:relative;
    display:block;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
    object-position:50% 0%;
  }
  .photo-band--bright::after{
    top:0;
    bottom:auto;
    height:125vw;
    max-height:none;
    background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.28) 100%);
  }
  .photo-band--bright .photo-band-text{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    min-height:148px;
    padding:28px 22px 60px;
    transform:none;
    text-align:center;
    background:linear-gradient(180deg,#090a0f 0%,#0b0a12 100%);
  }
  .photo-band--bright .photo-band-text .big{max-width:30rem;margin-inline:auto}
}

/* A short landscape viewport needs the portrait source and its copy in separate columns. */
@media(min-width:701px) and (max-height:600px){
  .photo-band--bright{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    height:auto;
    min-height:clamp(500px,100vh,760px);
    align-items:center;
    background:#090a0f;
  }
  .photo-band--bright .photo-band-image{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
    object-position:50% 0%;
  }
  .photo-band--bright::after{top:0;bottom:auto;width:50%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24))}
  .photo-band--bright .photo-band-text{
    position:relative;
    left:auto;
    bottom:auto;
    width:auto;
    padding:28px clamp(24px,5vw,82px);
    transform:none;
    text-align:left;
  }
}

@media(max-width:800px){.home-header{padding:8px 18px;gap:8px;display:grid;grid-template-columns:1fr auto}.home-brand{font-size:21px}.home-brand span{font-size:9px}.home-nav{grid-column:1/-1;grid-row:2;gap:0;justify-content:space-between}.home-nav a{font-size:12px;padding:7px 12px}.home-nav .nav-gallery{padding:7px 12px}.home-header .lang-toggle{grid-column:2;grid-row:1;padding:2px}.home-header .lang-toggle button{padding:5px 10px}.hero{padding-top:145px}html{scroll-padding-top:120px}.home-skip:focus{top:100px}.gallery-heading{display:block}.gallery-enter{display:inline-flex;margin:0 0 25px}#gallery .gallery-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#gallery .cover-info{padding:15px}#gallery .cover-title{font-size:18px}#gallery .cover-count{font-size:10px}.exhibit-number{inset:12px 14px auto;font-size:9px}.side-dock .dock-item{display:flex;flex-direction:column;height:43px;width:auto;min-width:40px;gap:2px}.side-dock .dock-item svg{width:22px;height:22px}.side-dock .dock-tip{display:block;position:static;transform:none;padding:0;background:none;border:0;box-shadow:none;font-size:8px;opacity:1;line-height:1.2;backdrop-filter:none}.hero-actions{gap:12px}.hero-actions a{font-size:12px}.hero-gallery-btn{padding:12px 18px}}
@media(max-width:380px){.home-nav a,.home-nav .nav-gallery{font-size:11px;padding:7px 9px}#gallery .cover-title{font-size:16px}#gallery .gallery-covers{gap:10px}}
@media(prefers-reduced-motion:reduce){.hero-gallery-btn,.cover-card{transition:none!important}}

/* 생성일자: 2026-09-16 | Luna Extra High — art-led home hero polish
   Scope is intentionally limited to the home hero modifier. Existing shared
   media, motion, player, header and band contracts remain untouched. */
.hero--art-led{
  min-height:max(600px,100svh);
  padding-top:0;
  text-align:left;
  overflow:clip;
}
.hero--art-led .hero-media{
  position:absolute;
  inset:0;
  display:block;
  z-index:0;
  pointer-events:none;
}
.hero--art-led .hero-bg-photo{
  object-position:center 22%;
  filter:saturate(.84) brightness(.92) contrast(1.03);
}
.hero--art-led::after{
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,4,12,.76) 0%,rgba(3,4,12,.54) 30%,rgba(3,4,12,.18) 52%,rgba(3,4,12,0) 70%),
    linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.04) 52%,rgba(0,0,0,.64) 100%);
}
.hero--art-led::before,
.hero--art-led .hero-glow,
.hero--art-led .hero-canvas{pointer-events:none}
.hero--art-led .hero-inner{
  width:min(1280px,100%);
  margin:0 auto;
  padding:clamp(82px,11vh,124px) clamp(24px,5vw,80px) clamp(94px,12vh,136px);
  align-items:flex-start;
  justify-content:center;
  z-index:5;
}
.hero--art-led .hero-copy{
  position:relative;
  z-index:6;
  width:min(540px,44vw);
  max-width:100%;
}
.hero--art-led .hero-mark{
  max-width:100%;
  font-size:clamp(3rem,7vw,6.4rem);
  text-align:left;
}
.hero--art-led .hero-tag{
  max-width:100%;
  margin-top:20px;
  text-align:left;
}
.hero--art-led .hero-actions{
  width:100%;
  justify-content:flex-start;
  align-items:stretch;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-top:28px;
}
.hero--art-led .hero-actions a{
  min-height:44px;
  max-width:100%;
}
.hero--art-led .hero-gallery-btn,
.hero--art-led .hero-music-btn,
.hero--art-led .hero-shop-link{flex:0 1 auto}
.hero--art-led .hero-scroll{
  margin-top:34px;
  z-index:6;
}
.hero--art-led .hero-intro{
  max-width:100%;
  margin-top:16px;
  padding:0;
  text-align:left;
}

/* Narrow desktop landscape: keep the copy readable and allow vertical growth. */
@media(min-width:701px) and (max-height:600px){
  .hero--art-led .hero-inner{
    padding-top:clamp(82px,12vh,108px);
    padding-bottom:clamp(86px,12vh,112px);
  }
  .hero--art-led .hero-copy{width:min(500px,46vw)}
  .hero--art-led .hero-mark{font-size:clamp(3rem,8vw,5.5rem)}
  .hero--art-led .hero-scroll{margin-top:24px}
}

/* 700px and below: the portrait art is a document-flow panel above its copy. */
@media(max-width:700px){
  .hero--art-led{
    min-height:0;
    height:auto;
    justify-content:flex-start;
    overflow:clip;
  }
  .hero--art-led .hero-media{
    position:relative;
    inset:auto;
    order:0;
    flex:0 0 auto;
    width:100%;
    /* The compact header is two rows (about 106px); keep forehead/eyes below it. */
    margin-top:108px;
    height:auto;
    aspect-ratio:4 / 5;
    overflow:hidden;
  }
  .hero--art-led .hero-bg-photo{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    filter:saturate(.86) brightness(.94) contrast(1.03);
  }
  .hero--art-led .hero-inner{
    order:1;
    width:100%;
    padding:clamp(34px,6vh,58px) clamp(22px,6vw,32px) clamp(98px,13vh,148px);
    margin:0;
    display:block;
  }
  .hero--art-led .hero-copy{width:100%;max-width:36rem;margin:0 auto}
  .hero--art-led .hero-mark{
    font-size:clamp(3rem,16vw,5.25rem);
    text-align:center;
  }
  .hero--art-led .hero-tag{
    max-width:34rem;
    margin:18px auto 0;
    font-size:clamp(1rem,4.3vw,1.2rem);
    text-align:center;
  }
  .hero--art-led .hero-actions{
    justify-content:center;
    gap:10px;
    margin-top:24px;
  }
  .hero--art-led .hero-actions a{
    flex:0 1 auto;
    max-width:100%;
  }
  .hero--art-led .hero-intro{
    max-width:34rem;
    margin:16px auto 0;
    text-align:center;
  }
  .hero--art-led .hero-scroll{
    margin-top:30px;
    text-align:center;
  }
}

/* Very short portrait/landscape phones may grow; no CTA is clipped to the viewport. */
@media(max-width:700px) and (orientation:landscape){
  .hero--art-led .hero-media{aspect-ratio:4 / 5}
  .hero--art-led .hero-inner{padding-bottom:clamp(108px,18vh,168px)}
}

@media(prefers-reduced-motion:reduce){
  .hero--art-led .hero-mark,
  .hero--art-led .hero-scroll{animation:none!important;transition:none!important}
}

/* 생성일자: 2026-09-16 | Luna Extra High — desktop Living Signal layer
   The image remains the first-paint/fallback surface. Video is opt-in at
   runtime by the home-only controller and never owns layout dimensions. */
.hero--art-led .hero-ambient-video{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.hero--art-led .hero-ambient-video.is-visible{opacity:1}
.hero--art-led .hero-ambient-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  filter:saturate(.84) brightness(.92) contrast(1.03);
  pointer-events:none;
}
.hero--art-led .hero-ambient-control{
  position:absolute;
  left:clamp(20px,4vw,64px);
  right:auto;
  bottom:clamp(104px,12vh,148px);
  z-index:7;
  min-width:44px;
  min-height:44px;
  padding:9px 14px;
  border:1px solid rgba(145,218,255,.55);
  border-radius:999px;
  background:rgba(6,8,18,.72);
  color:var(--silver);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;
  line-height:1.2;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(12px) saturate(120%);
}
.hero--art-led .hero-ambient-control:hover,
.hero--art-led .hero-ambient-control:focus-visible{
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 0 20px rgba(72,231,255,.22),inset 0 1px rgba(255,255,255,.18);
}
.hero--art-led .hero-ambient-control[hidden]{display:none}
@media(max-width:900px){
  .hero--art-led .hero-ambient-video,
  .hero--art-led .hero-ambient-control{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .hero--art-led .hero-ambient-video{transition:none}
}