*{
    box-sizing:border-box
}

body
{
    margin:0;
    background:#0b0c0e;
    color:#f1f3f5;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif 
}




.brand{
    font-size:23px;
    font-weight:800
}

.brand span{
    color:#e88ac1
}



.topbar>button{
    margin-left:auto
}


.primary-btn{
    background:#e88ac1;
    color:#1a1016;
    font-weight:750
}

.gallery-page{
    max-width:1240px;
    margin:auto;
    padding:54px 28px 80px
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    padding-top: 18px;
    padding-bottom: 42px;

    margin-top: 0;
}

main {
  padding-top: 0;
}

.eyebrow{
    color:#e88ac1;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px
}

.hero h1{
    font-size:clamp(36px,5vw,64px);
    line-height:1.05;
    letter-spacing:-2px;
    margin:0
}

.hero h1 strong{
    color:#e88ac1
}

.hero-copy,.dialog-copy,.meta{
    color:#9da4ad;
    line-height:1.7
}





.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}

.tabs{
    display:flex;
    gap:6px
}

.toolbar select,
.gallery-toolbar select,
.upload-panel input,
.upload-panel select {
  appearance: none;
  -webkit-appearance: none;

  min-width: 92px;
  height: 36px;
  padding: 0 30px 0 12px;

  border: 1px solid #343941;
  border-radius: 9px;

  background-color: #15191e;
  background-image:
    linear-gradient(45deg, transparent 50%, #c8cbd0 50%),
    linear-gradient(135deg, #c8cbd0 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 15px,
    calc(100% - 10px) 15px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;

  color: #f2f3f5;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.toolbar select:hover,
.gallery-toolbar select:hover {
  border-color: #e88ac1;
}

.toolbar select:focus,
.gallery-toolbar select:focus {
  border-color: #e88ac1;
  box-shadow: 0 0 0 2px rgba(228, 135, 189, 0.15);
}

.toolbar select option,
.gallery-toolbar select option {
  background: #15191e;
  color: #f2f3f5;
}






.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.video-card{
    background:#121416;
    border:1px solid #24292f;
    border-radius:16px;
    overflow:hidden
}

.thumb{
    position:relative;
    background:linear-gradient(135deg,#252b32,#15171b);
    display:flex;
    align-items:center;
    justify-content:center
}

.ratio-16-9{
    aspect-ratio:16/9
}

.ratio-9-16{
    aspect-ratio:9/16
}

.type-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#0c0e10dd;
    border:1px solid #4a4f55;
    border-radius:7px;
    padding:5px 8px;
    font-size:11px
}

.play{
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e88ac1;
    color:#21131b
}

.card-body{
    padding:17px
}

.card-body h2{
    font-size:16px;
    margin:0 0 8px
}

.meta{
    font-size:12px;
    margin:0
}

.card-footer{
    display:flex;
    justify-content:space-between;
    color:#858d96;
    font-size:12px;
    margin-top:18px
}

.empty-state{
    text-align:center;
    padding:80px 20px
}

.hidden{
    display:none!important
}



/* =========================================
   Gallery Hero Search
========================================= */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  align-items: center;
  gap: 42px;
  padding: 28px 0 48px;
}

.hero-copy-area {
  min-width: 0;
}

.hero-search-area {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.hero-search-area label {
  flex: 0 0 auto;
  color: #f1f3f5;
  font-size: 17px;
  font-weight: 600;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-box input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 20px;
  border: 3px solid #555;
  border-radius: 999px;
  outline: none;
  background: #0d0f11;
  color: #fff;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

.search-box input:focus {
  border-color: #e88ac1;
}

.search-box input::placeholder {
  color: #777f88;
}

.search-box button {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e969f;
  font-size: 22px;
  cursor: pointer;
}

.hero-upload-btn {
  grid-column: 2;
  justify-self: end;
}

/* =========================================
   Category Toolbar
========================================= */

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;

  transform: translateY(-60px);
}

.category-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.category-tab {
  border: 0;
  border-radius: 10px;
  padding: 11px 15px;
  background: transparent;
  color: #a1a8b0;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.category-tab:hover {
  background: #191d22;
  color: #fff;
}

.category-tab.active {
  background: #292230;
  color: #f0a1cb;
}

.category-separator {
  width: 1px;
  height: 25px;
  margin: 0 12px;
  background: #343941;
}

.clip-tab {
  margin-left: 4px;
  color: #f0a1cb;
  background: #211923;
}

.clip-tab small {
  margin-left: 4px;
  color: #a9a0a7;
  font-size: 10px;
}

/* =========================================
   Video Sections
========================================= */

.video-section {
  margin-top: 34px;

  transform: translateY(-70px);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.section-kicker {
  margin: 0 0 6px;
  color: #e88ac1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.section-heading h2 {
  margin: 0;
  color: #f5f6f7;
  font-size: 24px;
  letter-spacing: -0.7px;
}

.section-heading h2 span {
  color: #a3aab2;
  font-size: 15px;
  font-weight: 500;
}

.section-description {
  color: #737c86;
  font-size: 12px;
}

.normal-featured-grid,
.all-videos-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clip-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clip-grid .shorts-card {
  max-width: none;
}

.ratio-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #f1f3f5;
  font-size: 32px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* 검색 결과 없음 */
.search-empty {
  display: none;
  padding: 35px 0;
  color: #858d96;
  text-align: center;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .hero-search-area {
    max-width: 620px;
  }

  .hero-upload-btn {
    grid-column: auto;
    justify-self: start;
  }

  .clip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .gallery-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
  }

  .category-separator {
    margin: 0 5px;
  }

  .normal-featured-grid,
  .all-videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .hero-search-area {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .normal-featured-grid,
  .all-videos-grid,
  .clip-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
}


.type-badge,
.ratio-label {
  display: none !important;
}

/* =========================================
   상영관 히어로 영역
========================================= */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 48px;
  row-gap: 18px;
  
}

.hero-copy-area {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

.hero-search-area {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.hero-search-area label {
  flex: 0 0 auto;
  color: #f1f3f5;
  font-size: 17px;
  font-weight: 600;
}

.search-box {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.search-box input {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 3px solid #555;
  border-radius: 999px;
  outline: none;
  background: #0d0f11;
  color: #fff;
  font-size: 15px;
}

.search-box input:focus {
  border-color: #e88ac1;
}

.search-box input::placeholder {
  color: #777f88;
}

.hero-upload-btn {
  grid-column: 2;
  grid-row: 2;

  width: 30%;
  min-width: 110px;
  max-width: 100%;

  justify-self: end;
  align-self: center;

  min-height: 44px;
  padding: 11px 18px;

  border-radius: 12px;

  font-size: 14px;
  font-weight: 700;
}

/* 화면에 표시하지 않는 내부 표현 */
.type-badge,
.ratio-label,
.section-description {
  display: none !important;
}

/* 클립의 쇼츠 보조 문구가 남아 있을 경우 */
.clip-tab small {
  display: none !important;
}

@media (max-width: 900px) {
  .hero {

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto;

        gap: 14px;

    }

    .hero-copy-area,
    .hero-search-area,
    .gallery-character-stage {

        grid-column: auto;
        grid-row: auto;

    }

  .hero-copy-area,
  .hero-search-area,
  .hero-upload-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .hero-search-area {
    width: 100%;
  }

  .hero-upload-btn {
    width: 30%;
    min-width: 110px;
    min-height: 44px;
    justify-self: end;

    padding: 11px 18px;
    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;
    }
}

@media (max-width: 520px) {
  .hero-search-area {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .hero-search-area label {
    font-size: 14px;
  }
}



/* =========================================
   FINAL OVERRIDE
   상영관 상단 여백 및 업로드 버튼 조정
========================================= */

/* 상단 메뉴 아래 빈 공간 축소 */
.gallery-page {
  padding-top: 18px !important;
}

/* 히어로 영역 상단 여백 축소 */
.hero {
  padding-top: 10px !important;
  padding-bottom: 32px !important;
  margin-top: 0 !important;
}


/* 검색창과 업로드 버튼 사이 간격 */
.hero {
  row-gap: 14px !important;
}

/* 모바일 */
@media (max-width: 900px) {
  .gallery-page {
    padding-top: 18px !important;
  }

  .hero {
    padding-top: 10px !important;
  }

  .hero-upload-btn {
    width: 55% !important;
    justify-self: end !important;
  }
}

@media (max-width: 520px) {
  .hero-upload-btn {
    width: 100% !important;
  }
}


/* 확대 영상 좌우 이동 버튼 숨김 */
.video-modal .prev,
.video-modal .next,
.video-modal .prev-btn,
.video-modal .next-btn,
.video-modal .previous-btn,
.video-modal .next-video-btn,
.video-modal .lightbox-prev,
.video-modal .lightbox-next,
.video-lightbox .prev,
.video-lightbox .next,
.video-lightbox .prev-btn,
.video-lightbox .next-btn,
.video-lightbox .previous-btn,
.video-lightbox .next-video-btn,
.video-lightbox .lightbox-prev,
.video-lightbox .lightbox-next {
  display: none !important;
}


/* 썸네일 위 재생 화살표 제거 */
.video-card .play,
.video-card .play-button,
.video-card .thumbnail-play,
.video-card .thumb-play {
  display: none !important;
}

/* 카드 종류 배지 제거 */
.video-card .type-badge {
  display: none !important;
}


/*
  화살표를 없애도 썸네일 자체는 클릭 가능해야 합니다.
*/
.video-card .thumb {
  cursor: pointer;
}



/* =====================================================
   공통 상단 메뉴
   모든 페이지 동일 적용 : actor.css / video.css와 통일
   ===================================================== */

.topbar {
  width: 100%;
  min-height: 68px;

  flex-wrap: nowrap;    
  gap: 20px;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0 70px; /* padding: 0 100px 0 80px; */

  background: #0b0c0e;
  border-bottom: 1px solid #24282d;
}


/* 모든 상단 메뉴 버튼의 크기 통일 */
.topbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 108px;
  height: 38px;

  box-sizing: border-box;

  color: #f3f5f7;
  background: #08090b;

  border: 1px solid #20252b;
  border-radius: 22px;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  white-space: nowrap;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}



/* 좌측 메뉴 */
.topbar-left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
    flex: 0 0 auto;

    transform: translateX(-130px);
}


/* 우측 메뉴 */
.topbar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
    margin-left: auto;
    flex: 0 0 auto;

  transform: translateX(-70px);  
}



.topbar a.active
{
    box-shadow:inset 0 -2px #8bd447
}


/* 마우스를 올렸을 때 */
.topbar a:hover {
  color: #ffffff;
  background: #15181c;
  border-color: #394149;
}



/* 로고 */

.topbar .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    margin-left: auto;
    margin-right: 20px;

    transform: translateY(1px); /* 로고 높이 */
    transform: translateX(-130px);
}

        
.topbar .brand img {
    display: block;
    width: 90px; /* 로고 크기 */
    height: auto;
    object-fit: contain;
} 

/* 로고 링크의 버튼 스타일 제거 */
.topbar .brand a {
    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: 0;

    padding: 0;
    box-shadow: none;

    text-decoration: none;
}

.topbar .brand a {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.topbar .brand a:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}





@media (max-width: 1100px) {
  .topbar {
    padding: 0 20px;
  }

  .topbar-left,
  .topbar-right {
    gap: 8px;
  }

  .topbar a {
    width: auto;
    min-width: 92px;
    padding: 0 14px;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }

  .topbar .brand {
    margin-right: 0;
  }

  .topbar-left,
  .topbar-right {
    gap: 6px;
  }

  .topbar-left {
    order: 3;
    width: 100%;
  }

  .topbar-right {
    margin-left: auto;
  }

  .topbar a {
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
}





/* 로그인 - 비활성 기본 상태 */
.login-btn {
  color: #b8c0cc !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* 로그인에 마우스를 올렸을 때만 표시 */
.login-btn:hover {
  color: #f4f5f7 !important;
  background: #171b20 !important;
  border-color: #303640 !important;
}



/* 기존 밑줄 효과 제거 */
.topbar-left a::before,
.topbar-left a::after,
.topbar-right a::before,
.topbar-right a::after {
  display: none;
}



/* =====================================================
   상영관 - 소개 문구와 검색창 높이 맞춤
===================================================== */
/* ============================================================
   Gallery Hero
============================================================ */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;

    width: 100%;
    box-sizing: border-box;

    /* 세로 빈 공간 제거 */
    padding: 12px 0 4px;
    margin: 0;

    min-height: 0;
}


/* 왼쪽 설명 */
.hero-copy-area {
    margin: 0;
    padding: 0;
}


/* 설명 문구 */
.hero-copy {
    margin: 0;
    line-height: 1.1;
}


/* 오른쪽 검색 */
.hero-search-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
    padding: 0;

    /* 검색을 위쪽으로 */
    align-self: start;

    transform: translateY(-30px);
}


/* 검색 라벨 */
.hero-search-area label {
    margin: 0 14px 0 0;
    white-space: nowrap;
}


/* 검색 박스 */
.search-box {
    margin: 0;
    width: min(560px, 100%);
}


/* 검색 입력 */
.search-box input {
    width: 100%;
    box-sizing: border-box;
}



/* ============================================================
   상영관 영상 카드 썸네일
   모든 영상은 16:9 카드 영역으로 통일
============================================================ */

.video-card .thumb {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    cursor: pointer;

    background: #1b1f24;
}



/* ==========================================
   영상 카드 비율
========================================== */

/* 일반 영상 / 추천 영상 */
.video-card .thumb.ratio-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* 클립 / 쇼츠 */
.video-card .thumb.ratio-9-16 {
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
}

/* ============================================================
   클립 / 쇼츠 카드 크기 축소
   - 9:16 비율은 유지
   - 일반 영상 카드 대비 약 60% 크기
============================================================ */

.clip-grid .shorts-card {
    width: 80%;
    max-width: 100%;
    justify-self: start;
    box-sizing: border-box;
}

.clip-grid .shorts-card .thumb {
    width: 100%;
    aspect-ratio: 9 / 16;
}


/* 썸네일 */
.video-card .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




/* =========================================================
   상영관 Hover Preview
========================================================= */

.thumb {
    position: relative;
    overflow: hidden;
}


/*
 * 기본 썸네일
 */
.video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*
 * hover preview
 */
.video-preview {
    position: absolute;
    inset: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.18s ease;
}


.gallery-hover-preview {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
 * preview 중에는 영상이 위에 나타난다.
 */
.thumb.is-previewing .video-preview {
    opacity: 1;
}


/*
 * hover preview 중에는 썸네일을 살짝 숨긴다.
 */
.thumb.is-previewing .video-thumbnail {
    opacity: 0;
}


/* =========================================================
   Play 버튼
========================================================= */

.thumb .play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    width: 52px;
    height: 52px;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    background:
        rgba(0, 0, 0, 0.68);

    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}


.thumb .play::after {
    content: "";

    position: absolute;

    left: 21px;
    top: 16px;

    width: 0;
    height: 0;

    border-top:
        10px solid transparent;

    border-bottom:
        10px solid transparent;

    border-left:
        15px solid #fff;
}


.thumb:hover .play {
    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/*
 * preview 중에는 play 버튼을 조금 약하게
 */
.thumb.is-previewing .play {
    opacity: 0;
}


/* =========================================================
   큰 영상 플레이어
========================================================= */

.gallery-video-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(0, 0, 0, 0.88);

    backdrop-filter:
        blur(8px);
}


.gallery-video-dialog {

    position: relative;

    width: min(
        1100px,
        94vw
    );

    max-height: 94vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.gallery-video-dialog-normal {

    width: min(
        1100px,
        94vw
    );

}


.gallery-video-dialog-shorts {

    width: min(
        520px,
        92vw
    );

}


/* =========================================================
   Player
========================================================= */

.gallery-video-player {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 14px;

    background: #000;

    box-shadow:
        0 20px 80px
        rgba(0, 0, 0, 0.65);
}


.gallery-video-player.ratio-16-9 {

    aspect-ratio: 16 / 9;

}


.gallery-video-player.ratio-9-16 {

    aspect-ratio: 9 / 16;

    max-height: 82vh;

}


.gallery-large-video {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}


/* =========================================================
   닫기 버튼
========================================================= */

.gallery-video-close {

    position: absolute;

    right: -12px;
    top: -12px;

    z-index: 20;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    color: #fff;

    background:
        rgba(30, 30, 30, 0.95);

    font-size: 28px;

    line-height: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.4);
}


.gallery-video-close:hover {

    transform: scale(1.06);

}


/* =========================================================
   영상 제목
========================================================= */

.gallery-video-info {

    width: 100%;

    padding:
        14px 4px 0;
}


.gallery-video-info h2 {

    margin: 0;

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    text-align: left;
}


/*
 * 플레이어 열렸을 때 배경 스크롤 방지
 */
body.gallery-player-open {

    overflow: hidden;

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .gallery-video-overlay {

        padding: 12px;

    }


    .gallery-video-dialog-normal {

        width: 96vw;

    }


    .gallery-video-dialog-shorts {

        width: min(
            94vw,
            480px
        );

    }


    .gallery-video-close {

        right: -4px;
        top: -4px;

        width: 38px;
        height: 38px;

        font-size: 24px;

    }


    .gallery-video-info h2 {

        font-size: 16px;

    }

}


.video-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.video-view-count {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}



/*
  클립 영상 4개 가운데 정렬 : 카드 간격 column-gap: 60px;
*/
.clip-grid {
  grid-template-columns: repeat(4, 243px);
  justify-content: center;
  justify-items: stretch;
  column-gap: 70px;
  row-gap: 30px;
}

.clip-grid .shorts-card {
  width: 243px;
  max-width: 243px;
}


@media (max-width: 900px) {
  .clip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .clip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .clip-grid {
    grid-template-columns: 1fr;
  }
}



.video-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-upload-time {
    color: #777;
    font-size: 12px;
    font-weight: 400;
}


.video-card-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 13px;
}

.video-view-count,
.video-upload-time {
    color: #888;
    font-size: 13px;
    font-weight: 400;
}


.meta,
.description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #8f8f8f;
}


/*
 상영관 시청 1 크레딧 글자 크기
*/
.video-view-price {
    font-size: 80%;
}


/*
 상영관에서 구매한 영상 표시
*/

.video-view-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.purchased-video-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #ff4fa3;
    border: 1px solid #ff4fa3;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}



/* ============================================================
   크레딧 충전 모달
============================================================ */

.credit-modal {

    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.72);
    z-index: 1000;
}

.credit-modal.show {
    display: flex;
}


.credit-modal-box {

    width: min(460px, calc(100vw - 32px));

    background: #151a20;
    color: #f2f4f6;
    border: 1px solid #303841;
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}


.credit-usage {
    margin-top: 32px;
}


.credit-usage p {
    font-size: 14px;
    line-height: 1.7;
}




/* ============================================================
   제목
============================================================ */

.credit-modal-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}


.credit-modal-header h3 {

    margin: 0;
    font-size: 22px;
    color: #f5f7f8;
}


.credit-close {

    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}


/* ============================================================
   현재 보유 크레딧
============================================================ */

.credit-balance {

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 16px;
    margin-bottom: 18px;
    background: #20262d;
    border: 1px solid #303841;

    border-radius: 10px;
    font-size: 14px;
    color: #c7cdd3;
}


.credit-balance strong {
    font-size: 17px;

    color: #ffffff;
}


/* ============================================================
   충전 상품
============================================================ */

.credit-products {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


.credit-product {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 125px;
    padding: 16px;
    border: 1px solid #3a424b;
    border-radius: 12px;
    background: #1b2128;
    color: #f5f7f8;
    cursor: pointer;

    transition:
        transform 0.15s,
        box-shadow 0.15s,
        border-color 0.15s,
        background 0.15s;
}


.credit-product:hover {

    transform: translateY(-2px);
    border-color: #8bd63f;
    background: #222a31;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}


.credit-product strong {

    font-size: 22px;
    margin-bottom: 8px;
    color: #ffffff;
}


.credit-product span {

    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #f0f2f4;
}


.credit-product small {

    font-size: 13px;
    color: #aeb5bc;
}


/* ============================================================
   결제 안내
============================================================ */

.credit-payment-message {

    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: #9da5ad;
}


/* ============================================================
   모바일
============================================================ */

@media (max-width: 680px) {

    .credit-modal-box {
        padding: 20px;
    }

    .credit-products {
        grid-template-columns: 1fr 1fr;
    }

    .credit-product {
        min-height: 115px;
    }

}






/* ============================================================
   상영관 캐릭터 영역 - class
============================================================ */

.character-stage {

    position: absolute;

    /* 캐릭터가 움직일 영역 - 현재 상영관 카드 위쪽 빈 공간 */
    left: 0;
    right: 0;

    top: 350px;
    height: 100px;

    pointer-events: none;
    z-index: 50;
}


/* 캐릭터 */
.character-stage .gallery-character {
    position: absolute;

    width: 120px;
    height: 120px;

    object-fit: contain;
    z-index: 1001;
    pointer-events: auto;
    cursor: pointer;
    
}


/* ============================================================
   캐릭터
============================================================ */

.gallery-character {

    position: absolute;    
    left: 60%;
    top: -180px; /* 캐릭터 높이 위치 조정 */

    width: 110px;
    height: 110px;

    object-fit: contain;

    transform: translateX(-50%);

    pointer-events: auto;
    z-index: 60;
    user-select: none;

    transition: 
        left 5s ease-in-out, /* 캐릭터 이동 속도 */
        transform 0.2s ease;
}



/* ============================================================
   말풍선
============================================================ */

.character-speech {

    position: absolute;

    left: 50%;
    top: 12px;

    transform: translateX(-50%);

    width: max-content;
    max-width: 280px;

    padding: 10px 15px;

    box-sizing: border-box;

    background: #ffffff;
    color: #222;

    border-radius: 16px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    text-align: center;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

    pointer-events: auto;
    z-index: 1000;

    cursor: pointer;
    animation: characterSpeechIn 0.2s ease-out;
}


.character-speech-link {
    display: inline-block;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1001;
}


/* 말풍선 꼬리 */

.character-speech::after {

    content: "";
    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 14px;
    height: 14px;

    background: #ffffff;

    transform: translateX(-50%) rotate(45deg);
}




/* ============================================================
   말풍선 등장
============================================================ */

@keyframes characterSpeechIn {

    from {

        opacity: 0;
        transform:
            translateX(-50%)
            translateY(5px)
            scale(0.95);

    }

    to {

        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

    }

}


/* ============================================================
   모바일
============================================================ */

@media (max-width: 900px) {

    .gallery-character-stage {

        grid-column: auto;
        grid-row: auto;

        height: 140px;

    }

}


@media (max-width: 520px) {

    .gallery-character-stage {

        height: 130px;

    }

    .gallery-character {

        width: 85px;
        height: 85px;

    }

    .gallery-character-speech {

        max-width: 220px;
        font-size: 13px;
        padding: 8px 12px;

    }

}



.auth-user-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 120px;
    max-width: 120px;

    padding: 0 12px;

    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   Shorts 전용 Viewer
============================================================ */

.shorts-viewer-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0, 0, 0, 0.94);

    overflow: hidden;

    touch-action: none;
}


/* ============================================================
   Viewer
============================================================ */

.shorts-viewer {

    position: relative;

    width: min(
        92vw,
        520px
    );

    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

}


/* ============================================================
   Player
============================================================ */

.shorts-viewer-player {

    position: relative;

    width: min(
        92vw,
        480px
    );

    height: min(
        90vh,
        850px
    );

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: 14px;

    background: #000;

    box-shadow:
        0 20px 80px
        rgba(0, 0, 0, 0.7);
}


.shorts-viewer-video {
    display: block;
    width: 100%;
    height: 100%;
     object-fit: cover;
    background: #000;
    border-radius: 14px;
}


/* ============================================================
   닫기
============================================================ */

.shorts-viewer-close {

    position: absolute;

    top: 18px;
    right: -4px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: #fff;

    background:
        rgba(40, 40, 40, 0.9);

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;
}


.shorts-viewer-close:hover {

    transform: scale(1.06);

}


/* ============================================================
   이전 / 다음
============================================================ */

.shorts-viewer-prev,
.shorts-viewer-next {

    position: absolute;

    right: -70px;

    z-index: 20;

    width: 48px;

    height: 48px;

    border: 0;

    border-radius: 50%;

    color: #fff;

    background:
        rgba(40, 40, 40, 0.9);

    font-size: 22px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;
}


.shorts-viewer-prev {

    top: 42%;
    right: -120px;
}


.shorts-viewer-next {

    top: 51%;
    right: -120px;
}


.shorts-viewer-prev:hover,
.shorts-viewer-next:hover {

    transform: scale(1.06);

}


.shorts-viewer-prev:disabled,
.shorts-viewer-next:disabled {

    opacity: 0.25;

    cursor: default;

    transform: none;
}


/* ============================================================
   영상 정보
============================================================ */

.shorts-viewer-info {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 18px;
    z-index: 10;

    width: min(
        92vw,
        480px
    );

    padding:
        60px
        16px
        16px;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.75)
        );

}


.shorts-viewer-title {

  padding-left: 18px;
  position: relative;
  top: -4px;

    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.shorts-viewer-meta {

  padding-left: 18px;   

    color: #b8bec7;
    font-size: 12px;

    position: relative;
    top: -10px;

}


/* ============================================================
   Background Scroll 방지
============================================================ */

body.shorts-viewer-open {

    overflow: hidden;

}


/* ============================================================
   Mobile
============================================================ */

@media (max-width: 768px) {

    .shorts-viewer {

        width: 100vw;

        height: 100vh;

    }


    .shorts-viewer-player {

        width: 100vw;

        height: 100vh;

        max-width: none;

        max-height: none;

        border-radius: 0;

    }


    .shorts-viewer-close {

        top: 14px;

        right: 14px;

        width: 40px;

        height: 40px;

        font-size: 25px;

    }


    .shorts-viewer-prev,
    .shorts-viewer-next {

        right: 12px;

        width: 42px;

        height: 42px;

        font-size: 19px;

    }


    .shorts-viewer-prev {

        top: 43%;

    }


    .shorts-viewer-next {

        top: 51%;

    }


    .shorts-viewer-info {

        bottom: 0;

        width: 100%;

        padding:
            80px
            16px
            24px;

    }

}




/* ============================================================
   Shorts Viewer Content
============================================================ */

.shorts-viewer-content {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ============================================================
   Shorts Action
============================================================ */

.shorts-viewer-actions {

    position: absolute;

    left: calc(100% + 18px);

    bottom: 18px;

    z-index: 25;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

}


.shorts-action-btn {

    width: 54px;

    min-height: 58px;

    padding: 4px 0;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

}


.shorts-action-icon {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: rgba(40, 40, 40, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    line-height: 1;

}


.shorts-action-label {

    font-size: 11px;

    color: #fff;

    white-space: nowrap;

}


.shorts-action-count {

    font-size: 10px;

    color: #aeb5bf;

}


.shorts-action-btn:hover
.shorts-action-icon {

    transform: scale(1.08);

    background: rgba(70, 70, 70, 0.95);

}


/* 좋아요 */

.shorts-like-btn.active
.shorts-action-icon {

    color: #ff4f6d;

}


/* 별 후원 */

.shorts-support-btn
.shorts-action-icon {

    color: #ffd45c;

}



@media (max-width: 768px) {

    .shorts-viewer-actions {

        left: auto;

        right: 10px;

        bottom: 100px;

        gap: 14px;

    }


    .shorts-action-btn {

        width: 48px;

        min-height: 52px;

    }


    .shorts-action-icon {

        width: 42px;

        height: 42px;

        font-size: 19px;

        background:
            rgba(30, 30, 30, 0.72);

    }


    .shorts-action-label {

        font-size: 10px;

    }

}



/* ============================================================
   Shorts 댓글 패널
============================================================ */

.shorts-comments-panel {
    position: absolute;
    z-index: 50;

    right: 88px;
    bottom: 24px;

    width: min(360px, calc(100vw - 120px));
    height: min(560px, calc(100vh - 48px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: rgba(20, 20, 20, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);

    color: #fff;
}


/* 댓글 헤더 */

.shorts-comments-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 56px;
    padding: 0 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.shorts-comments-header strong {
    font-size: 16px;
    font-weight: 700;
}


.shorts-comments-count {
    margin-left: 5px;

    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
}


.shorts-comments-close,
.shorts-support-close {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #fff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}


.shorts-comments-close:hover,
.shorts-support-close:hover {
    background: rgba(255, 255, 255, 0.1);
}


/* 댓글 목록 */

.shorts-comments-list {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding: 12px 16px;
}


.shorts-comments-list::-webkit-scrollbar {
    width: 5px;
}


.shorts-comments-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}


/* 댓글 하나 */

.shorts-comment-item {
    display: flex;
    gap: 10px;

    padding: 12px 2px;
}


.shorts-comment-avatar {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    object-fit: cover;

    border-radius: 50%;

    background: #333;
}


.shorts-comment-body {
    min-width: 0;
    flex: 1;
}


.shorts-comment-body strong {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
    font-weight: 600;
}


.shorts-comment-body > div {
    color: #fff;

    font-size: 14px;
    line-height: 1.45;

    word-break: break-word;
}


/* 댓글 없음 / 로딩 */

.shorts-comments-empty,
.shorts-comments-loading {
    padding: 60px 20px;

    text-align: center;

    color: rgba(255, 255, 255, 0.45);

    font-size: 14px;
}


/* 댓글 입력 */

.shorts-comment-form {
    flex: 0 0 auto;

    display: flex;
    gap: 8px;

    padding: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.shorts-comment-input {
    min-width: 0;
    flex: 1;

    height: 40px;

    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;

    outline: none;

    background: rgba(255, 255, 255, 0.08);
    color: #fff;

    font-size: 14px;
}


.shorts-comment-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}


.shorts-comment-input:focus {
    border-color: rgba(255, 255, 255, 0.35);
}


.shorts-comment-submit {
    flex: 0 0 auto;

    height: 40px;

    padding: 0 15px;

    border: 0;
    border-radius: 20px;

    background: #fff;
    color: #111;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.shorts-comment-submit:disabled {
    opacity: 0.5;
    cursor: default;
}



/* ============================================================
   Shorts 별 후원 모달
============================================================ */

.shorts-support-modal {
    position: absolute;
    z-index: 60;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(4px);
}


.shorts-support-modal[hidden],
.shorts-comments-panel[hidden] {
    display: none;
}


.shorts-support-dialog {
    position: relative;

    width: min(360px, calc(100vw - 40px));

    padding: 26px 24px 22px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: #1d1d1d;
    color: #fff;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.65);
}


.shorts-support-dialog h3 {
    margin: 0 0 24px;

    font-size: 20px;
    font-weight: 700;
}


.shorts-support-close {
    position: absolute;

    top: 12px;
    right: 12px;
}


.shorts-support-field {
    margin-bottom: 18px;
}


.shorts-support-field label {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;
}


.shorts-support-field select {
    width: 100%;
    height: 44px;

    padding: 0 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;

    outline: none;

    background: #292929;
    color: #fff;

    font-size: 14px;
}


.shorts-support-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 22px;
    padding: 15px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);

    font-size: 13px;

    color: rgba(255, 255, 255, 0.6);
}


.shorts-support-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.shorts-support-summary strong {
    color: #fff;

    font-size: 14px;
    font-weight: 700;
}


.shorts-support-actions {
    display: flex;
    gap: 8px;

    margin-top: 20px;
}


.shorts-support-actions button {
    flex: 1;

    height: 44px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.shorts-support-cancel {
    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}


.shorts-support-submit {
    border: 0;

    background: #fff;
    color: #111;
}


.shorts-support-submit:disabled {
    opacity: 0.5;
    cursor: default;
}



/* ============================================================
   Shorts 모바일
============================================================ */

@media (max-width: 600px) {

    .shorts-comments-panel {
        position: absolute;

        left: 12px;
        right: 12px;
        bottom: 12px;

        width: auto;

        height: min(
            60vh,
            520px
        );

        border-radius: 18px;
    }


    .shorts-support-dialog {
        width: calc(100vw - 32px);

        padding: 24px 18px 18px;
    }

}



/* ============================================================
   Shorts 댓글 상세 스타일
============================================================ */

.shorts-comment-item {
    position: relative;

    padding: 13px 2px;

    border-bottom: 1px solid
        rgba(255, 255, 255, 0.06);
}


.shorts-comment-item.shorts-comment-reply {
    margin-left: 44px;
    padding-top: 9px;
}


.shorts-comment-header {
    display: flex;
    align-items: center;

    gap: 9px;
}


.shorts-comment-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    object-fit: cover;

    border-radius: 50%;

    cursor: pointer;
}


.shorts-comment-user-info {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;
}


.shorts-comment-user {
    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.shorts-comment-date {
    color: rgba(255, 255, 255, 0.35);

    font-size: 11px;

    white-space: nowrap;
}


.shorts-comment-content {
    margin-top: 7px;
    margin-left: 43px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;
    line-height: 1.5;

    white-space: pre-wrap;
    word-break: break-word;
}


.shorts-comment-action-area {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 7px;
    margin-left: 43px;
}


.shorts-comment-action-area button {
    padding: 0;

    border: 0;

    background: transparent;
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;

    cursor: pointer;
}


.shorts-comment-action-area button:hover {
    color: #fff;
}


.shorts-comment-like-button.liked {
    color: #ff4d6d;
}


.shorts-comment-action-area button:disabled {
    opacity: 0.45;
    cursor: default;
}


/* ============================================================
   답글 입력
============================================================ */

.shorts-comment-reply-form {
    margin-top: 10px;
    margin-left: 43px;
}


.shorts-comment-reply-input {
    display: block;

    width: 100%;
    min-height: 62px;

    box-sizing: border-box;

    padding: 9px 11px;

    resize: vertical;

    border: 1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 10px;

    outline: none;

    background: rgba(255, 255, 255, 0.06);
    color: #fff;

    font-size: 13px;
    line-height: 1.4;
}


.shorts-comment-reply-input:focus {
    border-color:
        rgba(255, 255, 255, 0.35);
}


.shorts-comment-reply-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}


.shorts-comment-reply-form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 7px;
}


.shorts-comment-reply-form-actions button {
    height: 32px;

    padding: 0 11px;

    border-radius: 8px;

    font-size: 12px;

    cursor: pointer;
}


.shorts-comment-reply-cancel {
    border: 1px solid
        rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}


.shorts-comment-reply-submit {
    border: 0;

    background: #fff;
    color: #111;

    font-weight: 700;
}


/* ============================================================
   삭제
============================================================ */

.shorts-comment-delete-button {
    position: absolute;

    top: 13px;
    right: 2px;
}


.shorts-comment-delete-button:hover {
    color: #ff6b6b !important;
}




/* ============================================================
   Shorts 크리에이터 정보
============================================================ */

.shorts-viewer-creator {


    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
     margin-left: 18px;
    pointer-events: auto;
}


.shorts-viewer-creator-avatar {

    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #333;

    cursor: pointer;
    pointer-events: auto;
}


.shorts-viewer-creator-name {

    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


.shorts-viewer-follow-button {

    height: 32px;

    padding: 0 13px;

    margin-left: 3px;

    border: 0;

    border-radius: 16px;

    background: #fff;

    color: #111;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


.shorts-viewer-follow-button.following {

    background: rgba(255,255,255,0.18);

    color: #fff;

}


.shorts-viewer-follow-button:disabled {

    opacity: 0.55;

    cursor: default;

}


/* 제목 */

.shorts-viewer-title {

    margin: 0 0 5px;

}


/* 조회수 */

.shorts-viewer-meta {

    color: rgba(255,255,255,0.65);

    font-size: 12px;

}



/* ============================================================
   Shorts 별 후원 효과
   ============================================================ */

.shorts-support-effect-layer {
    position: absolute;
    inset: 0;

    z-index: 30;

    pointer-events: none;

    overflow: hidden;

    opacity: 0;

    transition: opacity 0.25s ease;
}

.shorts-support-effect-layer.is-active {
    opacity: 1;
}


/* 별 */

.shorts-support-star {
    position: absolute;

    font-size: 26px;

    transform: scale(0);

    animation:
        shortsSupportStarFloat
        3s ease-out forwards;
}


@keyframes shortsSupportStarFloat {

    0% {
        transform:
            translateY(40px)
            scale(0);
        opacity: 0;
    }

    15% {
        transform:
            translateY(0)
            scale(1.2);
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-160px)
            scale(0.65);
        opacity: 0;
    }

}


/* 중앙 메시지 */

.shorts-support-effect-message {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.7);

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 14px 22px;

    border-radius: 18px;

    background: rgba(0, 0, 0, 0.68);

    color: #fff;

    text-align: center;

    animation:
        shortsSupportMessage
        2.8s ease-out forwards;
}


.shorts-support-effect-message strong {

    font-size: 26px;

}


.shorts-support-effect-message span {

    font-size: 15px;

    opacity: 0.9;

}


@keyframes shortsSupportMessage {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.6);

    }

    15% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.05);

    }

    25% {

        transform:
            translate(-50%, -50%)
            scale(1);

    }

    75% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.08);

    }

}






/* Shorts 플레이어의 자막 배치 기준 */
.shorts-viewer-player {
    position: relative;
}

/* 자막 언어 메뉴 */
.shorts-subtitle-control {
    position: absolute;
    z-index: 20;
    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.shorts-subtitle-control select {
    max-width: 135px;
    padding: 5px 7px;
    border: 1px solid #777;
    border-radius: 5px;
    background: #222;
    color: #fff;
    font-size: 13px;
}

.shorts-viewer-player:hover .shorts-subtitle-control,
.shorts-viewer-player:focus-within .shorts-subtitle-control {
    opacity: 1;
    visibility: visible;
}

/* 재생 중에는 메뉴 숨김 */
.shorts-viewer-player.subtitle-menu-hidden .shorts-subtitle-control {
    opacity: 0;
    visibility: hidden;
}

/* 영상 위 자막 */
.shorts-subtitle-overlay {
    position: absolute;
    z-index: 10;
    left: 5%;
    right: 5%;
    bottom: 58px;

    color: #fff;
    font-size: clamp(16px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
    overflow-wrap: anywhere;
    pointer-events: none;

    text-shadow:
        -1px -1px 2px #000,
         1px -1px 2px #000,
        -1px  1px 2px #000,
         1px  1px 2px #000,
         0 2px 6px #000;
}

.shorts-subtitle-overlay:empty {
    display: none;
}

/* 터치 기기에서는 언어 메뉴 표시 */
@media (hover: none) {
    .shorts-subtitle-control {
        opacity: 1;
        visibility: visible;
    }
}


@media (max-width: 768px) {

    /* 자막 설정: 조금 아래로 */
    .shorts-subtitle-control {
        top: 58px;
        right: 12px;
    }

    /* 이전 / 다음 버튼 공통 */
    .shorts-viewer-prev,
    .shorts-viewer-next {
        right: 12px;

        width: 42px;
        height: 42px;

        font-size: 19px;
    }

    /* 이전: 위로 이동 */
    .shorts-viewer-prev {
        top: 18%;
    }

    /* 다음: 위로 이동 */
    .shorts-viewer-next {
        top: 26%;
    }

}





/* ============================================================
   CLIB 다국어 홍보 카드
============================================================ */

.gallery-promo-card {
    position: absolute;
    top: -125px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    width: 235px;
    min-height: 94px;
    padding: 12px 15px;
    box-sizing: border-box;

    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;

    color: #fff;
    text-decoration: none;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(232, 138, 193, 0.20),
            transparent 58%
        ),
        linear-gradient(135deg, #20212b, #111318 75%);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 55;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.gallery-promo-left {
    left: var(--promo-character-x, 65%);
    transform: translate(calc(-100% - 70px), -50%);
    border-left: 3px solid #e88ac1;
}

.gallery-promo-right {
    left: var(--promo-character-x, 65%);
    transform: translate(70px, -50%);
    border-right: 3px solid #9d8aff;
}

.gallery-promo-card:hover {
    border-color: rgba(232, 138, 193, 0.8);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(232, 138, 193, 0.10);
}

.gallery-promo-left:hover {
    transform: translate(calc(-100% - 70px), -50%) translateY(-3px);
}

.gallery-promo-right:hover {
    transform: translate(70px, -50%) translateY(-3px);
}

.gallery-promo-badge {
    color: #f0a1cb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.gallery-promo-title {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -0.3px;
    overflow-wrap: anywhere;
}

.gallery-promo-description {
    display: block;
    color: #c5c8d1;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.gallery-promo-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-top: 2px;
    color: #f0a1cb;
    font-size: 11px;
    font-weight: 750;
}

.gallery-promo-cta > span:last-child {
    font-size: 15px;
}

.gallery-promo-card.is-changing {
    opacity: 0;
}

/* 홍보 카드가 나타날 때 */
@keyframes galleryPromoEnter {
    from {
        opacity: 0;
        filter: blur(3px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.gallery-promo-card.is-entering {
    animation: galleryPromoEnter 0.45s ease both;
}

/* 모바일: 양쪽 카드와 캐릭터를 화면 안에 배치 */
@media (max-width: 600px) {
    .gallery-promo-card {
        top: -125px;
        width: 39%;
        min-height: 100px;
        padding: 9px 10px;
        gap: 5px;
        border-radius: 11px;
    }

    .gallery-promo-left {
        left: 0;
        transform: translateY(-50%);
    }

    .gallery-promo-right {
        left: auto;
        right: 0;
        transform: translateY(-50%);
    }

    .gallery-promo-left:hover {
        transform: translateY(-50%);
    }

    .gallery-promo-right:hover {
        transform: translateY(-50%);
    }

    .gallery-promo-title {
        font-size: 12px;
    }

    .gallery-promo-description {
        font-size: 10px;
    }

    .gallery-promo-badge {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .gallery-promo-cta {
        font-size: 10px;
    }

    .character-stage .gallery-character {
        width: 70px;
        height: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-promo-card {
        transition: none;
    }

    .gallery-promo-card.is-entering {
        animation: none;
    }
}






/* ============================================================
   홍보 카드: 중앙 고정, 캐릭터와 독립적으로 배치
============================================================ */

.gallery-promo-card {
    top: -125px;
    width: 190px;
    min-height: 76px;
    padding: 10px 12px;
    gap: 4px;
}

/* 영문 배지 제거 */
.gallery-promo-badge {
    display: none;
}

/* 두 카드를 화면 중앙에 나란히 고정 */
.gallery-promo-left {
    left: calc(50% + 160px);
    right: auto;
    transform: translate(-100%, -50%);
}

.gallery-promo-right {
    left: calc(50% + 200px);
    right: auto;
    transform: translateY(-50%);
}

/* 마우스 오버 시에도 카드가 크게 이동하지 않도록 */
.gallery-promo-left:hover {
    transform: translate(-100%, -50%);
}

.gallery-promo-right:hover {
    transform: translateY(-50%);
}

/* 카드 내부 여백 및 글자 크기 */
.gallery-promo-title {
    font-size: 14px;
    line-height: 1.35;
}

.gallery-promo-description {
    font-size: 11px;
    line-height: 1.4;
}

.gallery-promo-cta {
    margin-top: 3px;
    font-size: 11px;
}

/* 모바일 */
@media (max-width: 600px) {
    .gallery-promo-card {
        top: -125px;
        width: calc(50% - 8px);
        min-height: 76px;
        padding: 9px 10px;
        gap: 4px;
    }

    .gallery-promo-left {
        left: calc(50% - 5px);
        right: auto;
        transform: translate(-100%, -50%);
    }

    .gallery-promo-right {
        left: calc(50% + 5px);
        right: auto;
        transform: translateY(-50%);
    }

    .gallery-promo-left:hover {
        transform: translate(-100%, -50%);
    }

    .gallery-promo-right:hover {
        transform: translateY(-50%);
    }

    .gallery-promo-title {
        font-size: 12px;
    }

    .gallery-promo-description {
        font-size: 10px;
    }
}




/* 홍보 카드 두 개를 위로 10px 이동 */
.gallery-promo-left,
.gallery-promo-right {
    top: -135px;
}




/* 모바일: 상영관 다국어 홍보 카드 숨김 */
@media (max-width: 768px) {

    #galleryPromoLeft,
    #galleryPromoRight {
        display: none !important;
    }

}