@charset "utf-8";
/* AI 영상 게시판 */
.vs{--vs-bg:#07090f;--vs-card:#10141d;--vs-line:rgba(255,255,255,.08);--vs-mute:#9aa4b2;--vs-ac:#2fd3b4;background:var(--vs-bg);color:#fff;}
.vs *{box-sizing:border-box;}
.vs .width{max-width:1400px;margin:0 auto;padding:0 30px;}
.vs_eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.18em;color:var(--vs-ac);}

/* 첫 화면 */
.vs_hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;padding:180px 0 90px;}
.vs_hero_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;}
.vs_hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,9,15,.55) 0%,rgba(7,9,15,.15) 35%,rgba(7,9,15,.85) 85%,#07090f 100%),linear-gradient(90deg,rgba(7,9,15,.95) 0%,rgba(7,9,15,.7) 45%,rgba(7,9,15,.1) 85%);}
.vs_hero_in{position:relative;z-index:2;width:100%;}
.vs_hero h1{margin:18px 0 0;font-size:72px;font-weight:800;line-height:1.16;letter-spacing:-.045em;color:#fff;}
.vs_hero p{margin:24px 0 0;font-size:19px;line-height:1.75;color:#c9d0da;letter-spacing:-.02em;max-width:640px;}
.vs_hero_btn{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;}
.vs_btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;border-radius:30px;font-size:17px;font-weight:700;letter-spacing:-.02em;border:0;cursor:pointer;font-family:inherit;transition:transform .25s,background .25s;}
.vs_btn svg{width:20px;height:20px;fill:currentColor;}
.vs_btn_main{background:#fff;color:#0b0f17;}
.vs_btn_main:hover{transform:translateY(-2px);}
.vs_btn_line{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);}
.vs_btn_line:hover{background:rgba(255,255,255,.16);}
.vs_count{list-style:none;margin:56px 0 0;padding:0;display:flex;gap:48px;}
.vs_count li{display:flex;flex-direction:column;gap:4px;}
.vs_count b{font-size:40px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;}
.vs_count span{font-size:14px;color:var(--vs-mute);}
.vs_admin{position:absolute;right:30px;top:120px;z-index:3;display:flex;gap:8px;}
.vs_admin a{padding:7px 14px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;}
.vs_admin_in{position:static;margin-top:16px;}

/* 섹션 */
.vs_sec{padding:90px 0 40px;}
.vs_head{margin-bottom:34px;}
.vs_head h2{margin:12px 0 0;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.3;color:#fff;}
.vs_head p{margin:10px 0 0;font-size:17px;color:var(--vs-mute);}
.vs_empty{text-align:center;color:var(--vs-mute);padding:80px 0;}

/* 가로 영상 카드 */
.vs_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 26px;}
.vs_grid3{grid-template-columns:repeat(3,1fr);}
.vs_card{display:block;color:#fff;}
.vs_card.big,.vs_card.wide{grid-column:1 / -1;}
.vs_media{position:relative;display:block;aspect-ratio:16 / 9;border-radius:18px;overflow:hidden;background:var(--vs-card);}
.vs_media img,.vs_media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s;}
.vs_media video{opacity:0;}
.vs_card.on .vs_media video,.vs_phone.on .vs_media video{opacity:1;}
.vs_card:hover .vs_media img,.vs_card:hover .vs_media video{transform:scale(1.035);}
.vs_play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;transition:transform .3s,opacity .3s,background .3s;z-index:2;}
.vs_play svg{width:28px;height:28px;fill:#fff;margin-left:4px;}
.vs_card:hover .vs_play,.vs_phone:hover .vs_play{background:var(--vs-ac);border-color:var(--vs-ac);transform:scale(1.06);}
.vs_card.on .vs_play,.vs_phone.on .vs_play{opacity:0;}
.vs_card.big .vs_play{width:96px;height:96px;margin:-48px 0 0 -48px;}
.vs_card.big .vs_play svg{width:34px;height:34px;}
.vs_time{position:absolute;right:14px;bottom:14px;z-index:2;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.6);font-size:13px;font-weight:600;font-style:normal;color:#fff;}
.vs_time:empty{display:none;}
.vs_txt{display:block;margin-top:16px;}
.vs_txt b{display:block;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.4;}
.vs_txt small{display:block;margin-top:6px;font-size:15px;color:var(--vs-mute);}
.vs_card.big .vs_txt b{font-size:28px;}
.vs_card.is_v .vs_media{aspect-ratio:16 / 9;}
.vs_card.is_v .vs_media img{object-fit:contain;background:#000;}

/* 세로 영상 */
.vs_sec_v{padding-top:60px;}
.vs_rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px) / 4);gap:24px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#2a3140 transparent;}
.vs_phone{display:block;color:#fff;scroll-snap-align:start;}
.vs_phone .vs_media{aspect-ratio:9 / 16;border-radius:26px;border:6px solid #1b2130;box-shadow:0 30px 60px rgba(0,0,0,.45);}
.vs_phone .vs_txt b{font-size:18px;}

/* 문의 */
.vs_cta{padding:120px 0 130px;text-align:center;background:radial-gradient(60% 80% at 50% 100%,rgba(47,211,180,.18) 0%,rgba(7,9,15,0) 70%);}
.vs_cta h2{margin:14px 0 0;font-size:46px;font-weight:800;letter-spacing:-.04em;color:#fff;}
.vs_cta p{margin:18px 0 0;font-size:18px;line-height:1.75;color:#c9d0da;}
.vs_cta .vs_hero_btn{justify-content:center;}

/* 글 보기 */
.vs_view_top{padding:150px 0 40px;}
.vs_back{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--vs-mute);}
.vs_back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;}
.vs_view h1{margin:18px 0 0;font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1.3;color:#fff;}
.vs_view_sub{margin:12px 0 0;font-size:18px;color:var(--vs-mute);}
.vs_view_player{position:relative;margin-top:34px;aspect-ratio:16 / 9;border-radius:20px;overflow:hidden;background:#000;}
.vs_view_player.v{aspect-ratio:auto;height:min(80vh,900px);}
.vs_view_player video,.vs_view_player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.vs_view_body{padding-bottom:30px;}
.vs_view_con{max-width:820px;font-size:18px;line-height:1.85;color:#c9d0da;letter-spacing:-.02em;}
.vs_view_con h3{font-size:26px;font-weight:700;color:#fff;margin:0 0 16px;}
.vs_view_con p,.vs_view_con li{margin:0 0 14px;color:#c9d0da;}

/* 크게 보기 */
.vs_th{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:30px;}
.vs_th[hidden]{display:none;}
.vs_th_dim{position:absolute;inset:0;background:rgba(3,5,10,.94);}
.vs_th_box{position:relative;width:min(1500px,100%);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:center;}
.vs_th_stage{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:16px;overflow:hidden;}
.vs_th_stage.v{aspect-ratio:auto;height:min(82vh,860px);background:transparent;}
.vs_th_frame{position:absolute;inset:0;}
.vs_th_frame video,.vs_th_frame iframe{width:100%;height:100%;border:0;display:block;background:#000;}
.vs_th_stage.v .vs_th_frame video{background:transparent;}
.vs_th_info{color:#fff;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.vs_th_no{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--vs-ac);}
.vs_th_tit{display:block;margin-top:12px;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.35;}
.vs_th_desc{margin:10px 0 0;font-size:15px;color:var(--vs-mute);line-height:1.6;}
.vs_th_nav{display:flex;align-items:center;gap:8px;margin-top:24px;}
.vs_th_nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vs_th_nav button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;}
.vs_th_nav button:hover{background:var(--vs-ac);border-color:var(--vs-ac);}
.vs_th_more{margin-left:8px;font-size:14px;color:#c9d0da;text-decoration:underline;text-underline-offset:3px;}
.vs_th_strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px;max-height:40vh;overflow-y:auto;}
.vs_st{position:relative;aspect-ratio:16 / 9;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:#151a24;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s;}
.vs_st img{width:100%;height:100%;object-fit:cover;display:block;}
.vs_st.v img{object-fit:contain;}
.vs_st:hover{opacity:.9;}
.vs_st.on{opacity:1;border-color:var(--vs-ac);}
.vs_th_x{position:absolute;right:-10px;top:-54px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vs_th_x svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;}

@media (max-width:1200px){
  .vs_hero h1{font-size:56px;}
  .vs_rail{grid-auto-columns:calc((100% - 48px) / 3);}
  .vs_th_box{grid-template-columns:1fr;gap:16px;}
  .vs_th_strip{grid-template-columns:repeat(6,1fr);max-height:none;}
  .vs_th_stage.v{height:62vh;}
}
@media (max-width:768px){
  .vs .width{padding:0 18px;}
  .vs_hero{min-height:78vh;padding:130px 0 60px;}
  .vs_hero h1{font-size:36px;}
  .vs_hero p{font-size:16px;}
  .vs_hero p br{display:none;}
  .vs_btn{height:50px;padding:0 22px;font-size:15px;}
  .vs_count{gap:28px;margin-top:40px;}
  .vs_count b{font-size:30px;}
  .vs_admin{top:90px;right:18px;}
  .vs_sec{padding:60px 0 20px;}
  .vs_head h2{font-size:30px;}
  .vs_head p{font-size:15px;}
  .vs_grid,.vs_grid3{grid-template-columns:1fr;gap:28px;}
  .vs_txt b,.vs_card.big .vs_txt b{font-size:19px;}
  .vs_play,.vs_card.big .vs_play{width:60px;height:60px;margin:-30px 0 0 -30px;}
  .vs_play svg,.vs_card.big .vs_play svg{width:24px;height:24px;}
  .vs_rail{grid-auto-columns:62%;gap:14px;}
  .vs_phone .vs_media{border-radius:20px;border-width:4px;}
  .vs_cta{padding:80px 0 90px;}
  .vs_cta h2{font-size:28px;}
  .vs_cta p{font-size:15px;}
  .vs_view_top{padding:110px 0 30px;}
  .vs_view h1{font-size:30px;}
  .vs_view_con{font-size:16px;}
  .vs_th{padding:56px 10px 16px;}
  .vs_th_tit{font-size:20px;}
  .vs_th_strip{grid-template-columns:repeat(4,1fr);}
  .vs_th_x{right:6px;top:-48px;}
}