:root{
  --bg:#060606;
  --panel:#101010;
  --panel-soft:#151515;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.24);
  --text:#f4f4f0;
  --muted:#b2b2b7;
  --accent:#ffffff;
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:18px;
  --sidebar-w:290px;
  --max:1640px;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.05), transparent 22%),
    radial-gradient(circle at 100% 20%, rgba(255,255,255,.03), transparent 28%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
}
img{display:block; width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit}
.no-scroll{overflow:hidden}
.hidden{display:none !important}

.site-shell{min-height:100vh}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  padding:34px 28px 28px;
  background:rgba(6,6,6,.92);
  border-right:1px solid var(--line);
  backdrop-filter:blur(16px);
  display:flex; flex-direction:column; justify-content:space-between;
  z-index:30;
}
.brand{
  margin:12px 0 14px;
  font-size:clamp(1.6rem,1.25rem + .7vw,2.1rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.eyebrow{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
}
.muted{color:var(--muted)}
.nav{display:grid; gap:10px; margin-top:28px}
.nav a{
  display:flex; align-items:center; gap:12px; padding:6px 0;
}
.nav a::before{
  content:''; width:12px; height:1px; background:var(--line-strong); transition:.22s ease;
}
.nav a:hover::before,.nav a.active::before{width:28px}
.pill-row{display:flex; gap:10px; flex-wrap:wrap}
.pill,.btn{
  min-height:46px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
}
.btn--solid{background:#fff; color:#000; border-color:#fff}
.pill:hover,.btn:hover{border-color:var(--line-strong)}
.sidebar-foot small{display:block; color:var(--muted); margin-top:14px}

.main{margin-left:var(--sidebar-w); min-height:100vh}
.container{max-width:var(--max); padding:28px 36px 68px}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
.mobile-header{display:none}
.mobile-panel{
  position:fixed; inset:0;
  display:none;
  background:rgba(0,0,0,.64);
  z-index:50;
}
.mobile-panel.open{display:block}
.mobile-panel__inner{
  width:min(88vw,360px); height:100%;
  margin-left:auto; padding:24px;
  background:#0a0a0a; border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:22px;
}
.mobile-head-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mobile-nav{display:grid; gap:10px}
.mobile-nav a{padding:12px 0; border-bottom:1px solid var(--line)}
.icon-btn{
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:#fff;
}

.hero{
  position:relative;
  min-height:calc(100vh - 56px);
  overflow:hidden;
}
.hero__image{
  position:absolute; inset:0;
}
.hero__image img{
  height:100%; object-fit:cover; object-position:center;
  filter:saturate(.9) contrast(1.03);
}
.hero__image::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.65) 100%);
}
.hero__content{
  position:relative; z-index:2;
  min-height:calc(100vh - 56px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  align-items:end; gap:24px;
  padding:40px;
}
.hero__copy{
  max-width:720px;
  padding:22px 0 10px;
}
.hero__copy h2{
  margin:10px 0 16px;
  font-size:clamp(2.6rem,1.7rem + 2.5vw,5.6rem);
  line-height:.98;
  letter-spacing:-.05em;
}
.hero__copy p{max-width:520px}
.hero__meta{
  align-self:end;
  justify-self:end;
  width:min(100%,420px);
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,10,.54);
  backdrop-filter:blur(14px);
}
.hero__meta h3{margin:8px 0 10px; font-size:1.2rem}
.meta-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; margin-top:18px;
}
.meta-grid div{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.meta-grid strong{display:block; font-size:1.25rem}
.meta-grid span{color:var(--muted); font-size:.9rem}

.section{margin-top:34px}
.section-head{margin-bottom:18px}
.section-head.between{display:flex; align-items:end; justify-content:space-between; gap:16px}
.section h2,.section h3{margin:8px 0 10px; line-height:1.08}

.feature-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:22px;
}
.collection-feature{
  padding:24px; overflow:hidden;
}
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--line);
  background:#090909;
  aspect-ratio:16/10;
}
.carousel__slides{position:relative; height:100%}
.carousel__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .7s ease;
}
.carousel__slide.active{opacity:1; z-index:1}
.carousel__slide img{height:100%; object-fit:cover}
.carousel__overlay{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:18px 20px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}
.carousel__overlay strong{display:block; font-size:1.1rem}
.carousel__overlay span{color:#d2d2d5; font-size:.92rem}
.carousel__dots{
  position:absolute; inset:auto auto 18px 18px; z-index:3;
  display:flex; gap:8px;
}
.carousel__dot{
  width:10px; height:10px; border-radius:999px;
  border:0; background:rgba(255,255,255,.28); padding:0;
}
.carousel__dot.active{background:#fff}
.collection-copy{
  padding:30px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.collection-copy .list{
  margin:18px 0 0; padding-left:18px; color:var(--muted)
}
.collection-copy .btn{align-self:flex-start; margin-top:20px}
.thumb-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px;
}
.thumb-card{
  overflow:hidden; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.thumb-card img{aspect-ratio:16/10; object-fit:cover}
.thumb-card span{display:block; padding:12px 14px; color:var(--muted); font-size:.93rem}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.info-card{padding:26px}
.info-card h3{font-size:clamp(1.5rem,1.1rem + 1vw,2.4rem)}
.info-card p:last-child{margin-bottom:0}
.footer{
  margin-top:36px; padding-top:18px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px;
  color:var(--muted); font-size:.92rem;
}

.stack{display:grid; gap:24px}
.collection-band{padding:24px}
.collection-band__lead{
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:20px;
}
.collection-band__lead h3{font-size:clamp(2rem,1.25rem + 1.2vw,3rem)}
.collection-band__cover{
  overflow:hidden; border-radius:24px; border:1px solid var(--line);
}
.collection-band__cover img{height:100%; min-height:260px; object-fit:cover}
.preview-grid{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.preview-tile{
  margin:0; overflow:hidden; border-radius:22px; border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.preview-tile img{aspect-ratio:16/10; object-fit:cover}
.preview-tile figcaption{padding:13px 15px; color:var(--muted); font-size:.93rem}

.portrait-panel{overflow:hidden}
.portrait-panel img{height:100%; min-height:420px; object-fit:cover}
.contact-meta{display:grid; gap:14px}
.contact-meta div{
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--line)
}
.code-block{
  margin:0; padding:18px; border-radius:18px; border:1px solid var(--line);
  background:#0b0b0c; color:#d9d9dd; overflow:auto;
}

@media (max-width: 1180px){
  .hero__content{grid-template-columns:1fr}
  .hero__meta{justify-self:start}
  .feature-grid{grid-template-columns:1fr}
  .collection-band__lead{grid-template-columns:1fr}
}
@media (max-width: 920px){
  .sidebar{display:none}
  .main{margin-left:0}
  .mobile-header{
    position:sticky; top:0; z-index:35; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:16px 18px;
    background:rgba(6,6,6,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(16px);
  }
  .mobile-header div{display:grid; gap:2px}
  .mobile-header span{color:var(--muted); font-size:.8rem}
  .container{padding:18px 16px 56px}
  .hero{min-height:auto}
  .hero__content{
    min-height:calc(100svh - 80px);
    padding:18px;
    align-items:end;
  }
  .hero__copy{padding-bottom:0}
  .hero__copy h2{font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
  .hero__meta{
    width:100%;
    padding:20px;
    border-radius:24px;
  }
  .two-col{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .hero__image img{object-position:48% center}
  .meta-grid{grid-template-columns:1fr}
  .collection-feature{padding:18px}
  .collection-copy{padding:22px}
  .thumb-grid{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:1fr}
  .collection-band{padding:18px}
  .footer{flex-direction:column}
  .carousel{aspect-ratio:4/3}
}

/* Mobile image visibility fix - v4 */
.hero__image{
  z-index:0;
  background:#050505;
}
.hero__image img{
  width:100%;
  height:100%;
  min-height:100%;
  display:block;
}
.hero__content{
  position:relative;
  z-index:2;
}
@media (max-width: 920px){
  .hero{
    min-height:calc(100svh - 72px);
  }
  .hero__image{
    position:absolute;
    inset:0;
  }
  .hero__image img{
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  .hero__content{
    min-height:calc(100svh - 72px);
    grid-template-columns:1fr;
    padding:20px;
  }
  .hero__copy h2{
    font-size:clamp(1.7rem, 1.15rem + 5vw, 2.7rem);
    line-height:1.04;
  }
}
@media (max-width: 640px){
  .hero{
    min-height:560px;
  }
  .hero__content{
    min-height:560px;
  }
  .hero__image img{
    object-position:50% center;
  }
}