/* ============================================================
   ARIFE — AI 스튜디오 첫 쪽 (ai-studio.html)  v810
     다른 쪽과 같은 결로 맞춘다.
       · 바탕의 빗금을 걷어내고 같은 회색 유리 바탕으로
       · 카드에 유리 세 겹(광택 · 두께 · 그림자)
       · '이미지 만들기 →' 를 유리 알약 단추로
   ============================================================ */

/* ── 바탕 ─────────────────────────────────────────────────
   빗금(repeating-linear-gradient)이 유리 위로 겹쳐 어른거렸다. */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_)::before{
  content:none!important;
}
html:has(body.studio-hub-page){background:#dbe3ef!important}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_){
  background:
    radial-gradient(74% 48% at 12% 4%,rgba(178,186,197,.72),transparent 60%),
    radial-gradient(66% 46% at 90% 8%,rgba(172,183,190,.62),transparent 58%),
    linear-gradient(180deg,#e7edf6 0%,#d9e2ef 46%,#ccd8e8 100%)!important;
  background-attachment:fixed!important;
  min-height:100vh!important;
}

/* ── 머리글 ───────────────────────────────────────────── */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .studio-hub{
  padding:56px 0 84px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .studio-hub h1{
  color:#14202e!important;
  letter-spacing:-.05em!important;
  text-shadow:0 1px 0 rgba(227,235,246,.58)!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .studio-hub .sh-lead{
  color:#4a5870!important;
  font-size:14px!important;line-height:1.85!important;
  max-width:660px!important;
}

/* ── 카드 ─────────────────────────────────────────────────
   유리는 세 겹이라야 유리로 보인다 — 뒤가 비침 / 위 광택 / 두께. */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{
  gap:18px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid rgba(224,233,245,.7)!important;
  background:
    linear-gradient(180deg,rgba(229,237,248,.52),rgba(255,255,255,.08) 46%,rgba(255,255,255,.26)),
    rgba(224,233,245,.7)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6)!important;
  box-shadow:
    0 20px 38px -22px rgba(28,58,108,.55),
    inset 0 1.8px 0 rgba(255,255,255,1),
    inset 0 -12px 18px -16px rgba(255,255,255,.9)!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:
    0 30px 52px -24px rgba(28,58,108,.6),
    inset 0 1.8px 0 rgba(255,255,255,1),
    inset 0 -14px 20px -16px rgba(255,255,255,1)!important;
}
/* 그림칸은 카드 안쪽에 얹힌 한 장으로 — 위 모서리를 카드와 맞춘다 */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card::before{
  border-radius:21px 21px 0 0!important;
  box-shadow:inset 0 -1px 0 rgba(227,235,246,.58)!important;
}
/* 글 */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card .sh-num{
  color:#1c56be!important;font-weight:800!important;letter-spacing:.06em!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card strong{
  color:#14202e!important;letter-spacing:-.035em!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card p{
  color:#4a5870!important;line-height:1.75!important;
}

/* ── 카드 안 단추 ('이미지 만들기 →') ───────────────────── */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card>span:last-child{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  align-self:flex-start!important;
  margin-top:16px!important;
  padding:0 18px!important;
  min-height:42px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  /* 2026-08-27 — 여기 글씨가 안 읽혔다(사장님 지적).
     알약은 '밝은 바탕 위 유리'로 만들어졌는데(파랑 24%), 정작 카드 바탕은
     어두운 영상이다. 그래서 짙은 남색 글씨가 어두운 영상에 그대로 묻혔다.
     같은 카드의 제목·설명은 흰 글씨라 단추만 혼자 안 보였다.
     유리 느낌은 남기되 바탕을 흰 쪽으로 올려, 어떤 영상 위에서도 읽히게 한다.
     마우스를 올리면 파랑으로 차는 동작은 그대로 둔다. */
  background:
    linear-gradient(180deg,rgba(255,255,255,1),rgba(232,241,252,.90) 48%,rgba(214,229,247,.86) 78%,rgba(255,255,255,.96))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4)!important;
  color:#14202e!important;
  font-weight:800!important;
  font-size:12.5px!important;
  /* 유리 알약의 입체감 — 네 겹으로 만든다.
       ① 바깥 그림자: 카드 위에 '떠 있게'
       ② 윗면 하이라이트: 빛이 위에서 닿은 선
       ③ 아랫면 음영: 알약 안쪽이 둥글게 말려 들어가는 느낌
       ④ 안쪽 흰 테: 유리 두께 */
  box-shadow:
    0 10px 18px -10px rgba(16,40,90,.55),
    0 2px 4px -2px rgba(16,40,90,.28),
    inset 0 1.8px 0 rgba(255,255,255,1),
    inset 0 -9px 13px -10px rgba(88,132,196,.55),
    inset 0 0 0 1px rgba(255,255,255,.65)!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card>span:last-child::after{
  content:''!important;
  position:absolute!important;
  left:8%!important;right:8%!important;top:1px!important;
  height:44%!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.12) 68%,transparent)!important;
  pointer-events:none!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:hover>span:last-child{
  background:
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.02) 48%,rgba(255,255,255,.16)),
    rgba(28,86,190,.88)!important;
  color:#fff!important;
  box-shadow:
    0 8px 14px -8px rgba(16,46,104,.62),
    inset 0 1.6px 0 rgba(225,234,246,.68),
    inset 0 -8px 12px -10px rgba(255,255,255,.55)!important;
}

/* ── 아래 '연결 흐름' 띠 ─────────────────────────────────── */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-flow{
  margin-top:26px!important;
  padding:18px 22px 18px 62px!important;
  border-radius:20px!important;
  border:1px solid rgba(225,234,246,.68)!important;
  background:
    linear-gradient(180deg,rgba(229,237,248,.5),rgba(255,255,255,.08) 46%,rgba(255,255,255,.24)),
    rgba(227,235,246,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5)!important;
  box-shadow:
    0 20px 38px -26px rgba(28,58,108,.45),
    inset 0 1.6px 0 rgba(255,255,255,.95)!important;
  color:#4a5870!important;
  font-size:12.5px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-flow b{
  color:#14202e!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-flow::before{
  left:22px!important;top:50%!important;bottom:auto!important;right:auto!important;
  transform:translateY(-50%)!important;
  width:28px!important;height:28px!important;border-radius:50%!important;
  background:
    linear-gradient(180deg,rgba(233,240,249,.42),rgba(255,255,255,.04) 46%,rgba(255,255,255,.16)),
    rgba(28,86,190,.9)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  color:#fff!important;
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.55)!important;
}

@media(max-width:1080px){
  html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:680px){
  html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .studio-hub{padding:36px 0 56px!important}
}


/* ============================================================
   v811 — 카드 그림칸 (2026-08-23 사장님 지시)
     어두운 장식 판(::before)과 유리 방울(::after) 대신, 카드마다
     실제 그림(곧 영상)이 들어간다. 힉스필드로 뽑은 첫 프레임.
     나중에 영상이 준비되면 <img> 를 <video> 로만 바꾸면 된다.
   ============================================================ */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card::before,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card::after{
  content:none!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card{
  min-height:0!important;
  padding:0 20px 22px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media{
  display:block!important;
  margin:0 -20px 6px!important;
  height:150px!important;
  overflow:hidden!important;
  border-radius:21px 21px 0 0!important;
  border-bottom:1px solid rgba(224,233,245,.75)!important;
  background:rgba(224,233,245,.5);
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media img,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media video{
  width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;
  transition:transform .25s ease;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:hover .sh-media img,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:hover .sh-media video{
  transform:scale(1.04);
}

/* 옛 장식 판 자리를 비워 두려고 unified 가 sh-num 에 크게 준 margin-top 을 걷는다 */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card .sh-num{
  margin-top:10px!important;
}

/* v812 — 파일 이름을 올려서 예전 캐시를 강제로 버린다.
   (v811이 같은 파일 이름으로 들어가는 바람에, 브라우저가
   옛 버전을 들고 있으면 카드 위쪽에 빈 띠가 보였다.) */

/* ============================================================
   v813 — 그림칸을 카드 모서리에 딱 맞춘다 (2026-08-23 사장님 지시)
     음수 여백(-20px)으로 밀어 넣는 방식은 화면 배율이나 다른 규칙에
     따라 틈이 생겼다. 절대 위치로 카드 위끝에 붙이면, 카드가
     overflow:hidden 으로 제 모서리를 따라 잘라 주므로
     어떤 상황에서도 둥근 모서리에 정확히 맞는다.
   ============================================================ */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card{
  padding-top:150px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media{
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;
  width:auto!important;height:150px!important;
  margin:0!important;
  border-radius:0!important;
}

/* ============================================================
   v814 — 영상이 카드 전체를 채운다 (기업 라이선스 카드와 같은 모양)
     위 150px 띠 방식이 아니라, 영상이 카드 전면 배경이 되고
     글자와 단추가 아래쪽 어두운 그라데이션 위에 올라간다.
   ============================================================ */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card{
  display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
  min-height:350px!important;
  padding:170px 20px 20px!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media{
  position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:auto!important;height:100%!important;margin:0!important;
  border-bottom:0!important;border-radius:0!important;z-index:0!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media::after{
  content:''!important;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,0) 40%,rgba(10,22,40,.55) 72%,rgba(8,18,34,.82) 100%);
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card .sh-num,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card strong,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card p,
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card>span:last-child{
  position:relative;z-index:1;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card .sh-num{
  color:#b8d6ff!important;margin-top:0!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card strong{
  color:#fff!important;text-shadow:0 1px 10px rgba(8,18,34,.55);
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card p{
  color:rgba(233,241,252,.9)!important;text-shadow:0 1px 8px rgba(8,18,34,.45);
}

/* v815 — 그림칸에 다른 규칙이 padding 12px 을 끼워 넣어
   영상이 위에서 12px 밀려 있었다. 명시적으로 0 으로 못 박는다. */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_):not(#__) .sh-media{
  padding:0!important;border:0!important;
}

/* v816 — 밝은 영상 위에서 문구가 묻혀서, 아래 그늘을 더 올리고
   글자마다 진한 그림자를 준다 (2026-08-23 사장님 지시) */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media::after{
  background:linear-gradient(180deg,rgba(8,16,30,0) 24%,rgba(8,16,30,.42) 48%,rgba(8,16,30,.74) 72%,rgba(6,13,26,.94) 100%)!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card .sh-num{
  color:#d5e7ff!important;font-weight:800!important;
  text-shadow:0 1px 3px rgba(5,12,24,.95),0 2px 10px rgba(5,12,24,.6);
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card strong{
  text-shadow:0 1px 3px rgba(5,12,24,.95),0 2px 16px rgba(5,12,24,.65);
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card p{
  color:rgba(242,247,254,.96)!important;
  text-shadow:0 1px 3px rgba(5,12,24,.9),0 2px 10px rgba(5,12,24,.55);
}

/* v817 — VFX 카드 추가로 5장. 넓은 화면 5칸 그리드 + VFX 임시 배경 */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:1080px){html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-grid{grid-template-columns:minmax(0,1fr)!important}}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media-vfx{
  display:flex!important;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 78%,rgba(255,122,32,.55),rgba(255,122,32,0) 70%),
    radial-gradient(60% 45% at 50% 88%,rgba(255,196,64,.5),rgba(255,196,64,0) 75%),
    linear-gradient(180deg,#101b2e,#0a1220)!important;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-media-vfx i{
  font-style:normal;font-size:64px;filter:drop-shadow(0 6px 22px rgba(255,140,40,.6));transition:transform .25s ease;
}
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:hover .sh-media-vfx i{transform:scale(1.12)}


/* 2026-08-27 — 누르는 순간 살짝 가라앉게. 유리가 눌리는 느낌을 준다. */
html body.studio-hub-page.a-glass-page:not(#nope):not(#_):not(#_) .sh-card:active>span:last-child{
  transform:translateY(1px)!important;
  box-shadow:
    0 4px 9px -7px rgba(16,40,90,.5),
    inset 0 1.4px 0 rgba(255,255,255,.9),
    inset 0 -6px 10px -8px rgba(88,132,196,.6)!important;
}