/* ZZAN STUDIO - PHASE 1 랜딩 (시네마틱) */

body.studio{
  background:#0a0908;
  color:#e8e1d4;
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","맑은 고딕",system-ui,sans-serif;
  letter-spacing:0;
}
body.studio::before{ display:none; }

/* ---------- 히어로 ---------- */
.st-hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.st-bg{
  position:absolute; inset:-4%;
  background-size:cover; background-position:center 25%;
  filter:brightness(.5) saturate(.9);
  animation:st-drift 26s ease-in-out infinite alternate;
}
@keyframes st-drift{
  from{ transform:scale(1.02) translateY(0); }
  to{ transform:scale(1.1) translateY(-2%); }
}
.st-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center 40%, transparent 0%, rgba(10,9,8,.55) 70%, rgba(10,9,8,.92) 100%),
    linear-gradient(to bottom, rgba(10,9,8,.55), transparent 30%, transparent 55%, #0a0908 96%);
}
.st-in{
  position:relative; z-index:1;
  text-align:center;
  padding:0 1.5rem;
}
.st-mark{
  font-family:'Anton',Pretendard,sans-serif; font-weight:400;
  font-size:clamp(.78rem,2vw,.95rem);
  letter-spacing:.55em; text-indent:.55em;
  color:#b9ae9d; font-weight:600;
}
.st-mark.s{ font-size:.66rem; color:#6d655a; }
.st-phase{
  margin:.6rem 0 0;
  font-family:'Anton',Pretendard,sans-serif;
  font-size:clamp(4.4rem,16vw,10rem);
  line-height:1;
  font-weight:400;
  letter-spacing:.04em;
  color:#f2ead9;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.st-phase span{ color:#d1704f; }
.st-tag{
  margin:1.2rem 0 0;
  font-weight:300;
  font-size:clamp(.82rem,2.4vw,1rem);
  letter-spacing:.42em; text-indent:.42em;
  color:#a99e8e;
}
.st-cta{
  display:inline-flex; flex-direction:column; gap:.35rem;
  margin-top:3rem;
  padding:1.05rem 2.6rem;
  border:1px solid rgba(209,112,79,.55);
  border-radius:2px;
  background:rgba(209,112,79,.08);
  color:#f2ead9; text-decoration:none;
  transition:.25s;
  backdrop-filter:blur(3px);
}
.st-cta:hover{
  background:#d1704f; border-color:#d1704f; color:#141210;
  box-shadow:0 8px 40px -6px rgba(209,112,79,.5);
}
.st-cta-k{
  font-family:'Anton',Pretendard,sans-serif; font-weight:400;
  font-size:.64rem; letter-spacing:.3em; text-indent:.3em;
  color:#d1704f; font-weight:700;
}
.st-cta:hover .st-cta-k{ color:#141210; }
.st-cta-t{
  font-size:1.02rem; letter-spacing:.14em; font-weight:600;
}
.st-scroll{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-size:.58rem; letter-spacing:.4em; text-indent:.4em; color:#57503f;
  animation:st-bob 2.2s ease-in-out infinite;
}
@keyframes st-bob{
  0%,100%{ transform:translate(-50%,0); opacity:.6; }
  50%{ transform:translate(-50%,6px); opacity:1; }
}

/* ---------- 스토리 진열 ---------- */
.st-stories{
  position:relative;
  max-width:72rem; margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1.2rem,5vw,2.5rem) 5rem;
}
.st-head{
  display:flex; align-items:center; gap:1.4rem;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.st-head h2{
  margin:0;
  font-family:'Anton',Pretendard,sans-serif;
  font-size:clamp(1.3rem,3.6vw,1.9rem);
  letter-spacing:.3em;
  color:#f2ead9; font-weight:400;
}
.st-line{ flex:1; height:1px; background:linear-gradient(to right, #d1704f88, transparent); }

body.studio .row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(10.5rem, 1fr));
  gap:clamp(1.2rem,3.4vw,2rem);
  justify-content:start;
  align-items:start;          /* 카드가 행 높이만큼 늘어나지 않게 */
}
body.studio .vol{ width:auto; min-width:0; }
body.studio .vol .jacket{ aspect-ratio:1/1.48; height:auto; }
body.studio .vol.soon .jacket.soon{ aspect-ratio:1/1.48; height:auto; }
body.studio .vol .jacket{
  box-shadow:
    inset 6px 0 10px -6px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.5),
    0 16px 34px -10px rgba(0,0,0,.75);
}
body.studio .vol:hover .jacket{
  transform:translateY(-8px);
  box-shadow:
    inset 6px 0 10px -6px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.5),
    0 24px 48px -10px rgba(0,0,0,.85),
    0 0 40px -8px rgba(209,112,79,.35);
}
body.studio .vol .cap{ color:#847b6d; }
body.studio .vol .cap b{ color:#cfc5b4; }
body.studio .vol .cap .views{ color:#d1704f; }

body.studio .st-foot{
  border-top:1px solid #1d1a17;
  padding:3rem 1.5rem 4rem;
  text-align:center;
}
body.studio .st-foot p{
  margin:1.2rem 0 0;
  font-size:.7rem; line-height:1.9;
  color:#57503f; letter-spacing:.05em;
}

@media (max-width:40rem){
  .st-hero{ min-height:86vh; }
  body.studio .row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* 카드 캡션 폰트 정돈 */
body.studio .vol .cap{
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-size:.76rem; line-height:1.7; letter-spacing:.02em;
}
body.studio .vol .cap .views{ font-size:.72rem; letter-spacing:.04em; }
body.studio .vol.soon .num,
body.studio .vol.soon .cs{ font-family:'Anton',Pretendard,sans-serif; font-weight:400; }
body.studio .vol .jnum{ font-family:'Anton',Pretendard,sans-serif; font-weight:400; letter-spacing:.3em; }