/* 릴스 기획 페이지 전용 스타일 */

/* 푸터 숨기기 */
footer.service-footer {
    display: none !important;
}

/* 릴스 에디터 툴바 - 1행 배치, 에디터 콘텐츠에 가려지지 않도록 z-index 설정 */
/* overflow-y: visible로 툴팁(reels-plan-tooltip)이 버튼 아래로 노출되도록 함 */
.reels-analysis-content .blog-editor-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    z-index: 10;
}

.reels-analysis-content #toolbarGroupsWrapper {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.reels-analysis-content #toolbarGroupsWrapper .toolbar-group {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
}

.reels-analysis-content .blog-editor-toolbar .action-buttons {
    flex-shrink: 0;
    margin-left: auto;
}

/* 릴스 기획 버튼 말풍선 툴팁 (만료기간 툴팁과 동일 스타일) */
.reels-plan-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* 블로그 주제 기획 툴팁과 동일: padding 12px 16px, border-radius 8px */
.reels-plan-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-50%);
    margin-top: 8px;
    background-color: rgba(0, 153, 226, 1);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.reels-plan-tooltip::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 60%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 153, 226, 1);
}

@media (max-width: 1024px) {
    .reels-plan-tooltip {
        display: none !important;
    }
}

/* blog/create 방식: body에 붙여 에디터 위로 표시 (position: fixed, 높은 z-index) */
/* 블로그 주제 기획 툴팁과 동일: padding 12px 16px, border-radius 8px */
.reels-plan-tooltip-body {
    position: fixed !important;
    z-index: 100000 !important;
    margin-top: 8px;
    background-color: rgba(0, 153, 226, 1);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    visibility: visible;
    opacity: 1;
}
.reels-plan-tooltip-body::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 153, 226, 1);
}
@media (max-width: 1024px) {
    .reels-plan-tooltip-body { display: none !important; }
}

/* 릴스 페이지 with-sidebar: 사이드바 우측 영역이 뷰포트를 넘지 않도록 */
.flex-1.with-sidebar {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* 릴스 컨테이너 */
.reels-container {
    min-height: calc(100vh - 200px);
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
}

/* 로딩 활성화 시: 컨테이너 높이 고정 + overflow 잠금 → 로딩 화면만 보임 */
.reels-container.reels-loading-active {
    height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    overflow: hidden;
}

/* 모바일: 블로그 본문작성과 동일 - 로딩바 헤더 아래 블록 배치, 무한 스크롤 방지 */
@media (max-width: 1023px) {
    .reels-container.reels-loading-active {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    /* 모바일 분석 중: 비디오 그리드·필터·기타 섹션 숨김 (다른 JS가 display 덮어써도 방지) */
    .reels-container.reels-loading-active .reels-video-grid,
    .reels-container.reels-loading-active .reels-filter-section-mobile,
    .reels-container.reels-loading-active .reels-other-section,
    .reels-container.reels-loading-active .reels-vector-section,
    .reels-container.reels-loading-active .reels-blur-container,
    .reels-container.reels-loading-active .reels-no-results,
    .reels-container.reels-loading-active .reels-load-more-btn,
    .reels-container.reels-loading-active .reels-end-message {
        display: none !important;
    }
    #mobileLoadingArea:not(.hidden) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
        min-height: 200px !important;
        height: auto !important;
        z-index: 5 !important;
        margin: 1rem !important;
        padding: 2rem 1rem !important;
        border-radius: 12px !important;
        background: transparent !important;
        border: 0;
        box-shadow: none;
        overflow: hidden !important;
    }
}

/* 로딩 영역 - 데스크탑만 전체 덮기 (모바일은 블로그 본문작성처럼 헤더 아래 블록 배치) */
#keywordLoadingArea:not(.hidden) {
    background-color: #f3f4f6 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: 100 !important;
}
@media (min-width: 1024px) {
    #mobileLoadingArea:not(.hidden) {
        background-color: #f3f4f6 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        z-index: 100 !important;
    }
}

.reels-header {
    background: linear-gradient(135deg, rgba(185, 12, 198, 1) 0%, rgba(216, 126, 51, 1) 100%);
}

/* 입력 섹션 */
.reels-input-section {
    width: 1035px;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 3rem;
    height: 40vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20; /* 블러 오버레이(z-index: 5)보다 높게 설정 */
}

.reels-input-section p {
    font-family: "Pretendard", sans-serif;
    font-size: 45px !important;
    font-weight: 700 !important;
    color: #293b48 !important;
    margin-bottom: 4rem !important;
    white-space: nowrap;
    line-height: 120%;
}

.reels-input-container {
    width: 100%;
    max-width: 1035px;
    margin-bottom: 3rem;
    position: relative;
    z-index: 21; /* 입력 섹션보다 높게 */
}

.reels-input-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 22; /* 입력 컨테이너보다 높게 */
    background: #ffffff;
    border: 2px solid #b90cc6;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    height: 60px;
}

.reels-input-icon {
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b90cc6;
    font-size: 2rem;
    font-weight: bold;
    flex-shrink: 0;
}

.reels-input-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reels-input-field {
    flex: 1;
    border: none;
    outline: none;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #293b48;
    min-width: 0;
    line-height: 200%;
    position: relative;
    z-index: 23; /* 입력 래퍼보다 높게 */
}

.reels-input-field::placeholder {
    color: #8097a8;
    font-weight: 400;
}

.reels-analyze-btn {
    background: #b90cc6;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    min-width: 110px;
    height: 40px;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: background 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    z-index: 23; /* 입력 필드와 동일한 레벨 */
}

.reels-analyze-btn:hover {
    background: #a00ab3;
}

.reels-analyze-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: none;
}

/* 분석 결과 화면이 보일 때: "다른 사람들은..." 및 아래 영역(필터·다른 사람 결과) 숨김 */
.reels-analysis-section.active ~ .reels-other-section,
.reels-analysis-section.active ~ .reels-vector-section,
.reels-analysis-section.active ~ .reels-blur-container,
.reels-analysis-section.active ~ .reels-filter-section,
.reels-analysis-section.active ~ .reels-no-results,
.reels-analysis-section.active ~ .reels-video-grid,
.reels-analysis-section.active ~ .reels-loading-container,
.reels-analysis-section.active ~ .reels-load-more-btn,
.reels-analysis-section.active ~ .reels-end-message {
    display: none !important;
}

/* 다른 사람들의 분석 섹션 (텍스트 에디터 하단과 겹치지 않도록 여백) */
.reels-other-section {
    text-align: center;
    margin: 2rem 0 0.5rem 0;
    color: #6b7280;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 다른 사람들의 분석 섹션 스타일 */
.frame-11232200,
.frame-11232200 * {
    box-sizing: border-box;
}

/* "다른 사람들은 어떤 영상 분석했는지 궁금하다면?" 버튼 좌우 여백 */
.reels-other-section .frame-11232200 {
    padding-left: 28px;
    padding-right: 28px;
}

.frame-11232200 {
    background: #ffffff;
    border-radius: 50px;
    border-style: none;
    border-width: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    height: 52px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.frame-11232200 .div {
    color: #293b48;
    text-align: center;
    font-family: "Pretendard-Bold", sans-serif;
    font-size: 20px;
    line-height: 140%;
    font-weight: 700;
    position: relative;
}

.frame-11232200:hover {
    border-style: solid;
    border-color: #b90cc6;
    border-width: 1.5px;
}

.frame-11232200:hover .div {
    color: #b90cc6;
    font-family: "Pretendard-SemiBold", sans-serif;
    font-weight: 600;
}

/* 앵커 링크: 스타일 유지, 스크롤 시 필터 영역이 뷰포트 상단에 오도록 */
.reels-anchor-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
}
.reels-filter-section.group-53291,
.reels-filter-section-mobile.frame-11232214 {
    scroll-margin-top: 1rem;
}

/* 검색 라벨 행: 검색 + 초기화 버튼 */
.reels-search-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
}
.reels-search-label-row .reels-menu-label.div4 {
    margin-bottom: 0;
}
.reels-search-reset-btn {
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.reels-search-reset-btn:hover {
    color: #293b48;
    background: #f3f4f6;
}
.reels-search-reset-btn--mobile {
    font-size: 12px;
    padding: 2px 6px;
}
.frame-112322042.reels-search-label-row-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.frame-112322042.reels-search-label-row-mobile .reels-menu-label.div {
    margin-bottom: 0;
}

/* Vector 48 이미지 섹션 */
.reels-vector-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.25rem 0.5rem 0.5rem 0.5rem;
    padding: 0.5rem 0;
}

.reels-vector-image {
    max-width: 100%;
    height: 2rem;
    display: block;
}

/* 필터 섹션 - 데스크탑 group-53291 레이아웃 */
.reels-filter-section {
    margin: 0;
    padding: 0;
    margin-bottom: 2.5rem;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1; /* 블러 오버레이(z-index: 5)보다 낮게 설정하여 블러로 가려지도록 */
}
.reels-filter-section.group-53291,
.reels-filter-section.group-53291 * {
    box-sizing: border-box;
}
.reels-filter-section.group-53291 {
    position: relative;
}
.reels-filter-section .group-53273 {
    width: 100%;
    max-width: none;
    height: 125px;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.reels-filter-section .rectangle-3739 {
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    height: 125px;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.reels-filter-section .group-53272 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2rem;
    padding: 0 1.5rem 20px 0;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}
/* 카테고리·정렬·검색 동일 가로 행: 컨트롤 높이 40px 고정, 하단 정렬 */
.reels-filter-section .group-53272 > .reels-filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    min-height: auto;
}
.reels-filter-section .group-53272 > .reels-filter-group .reels-menu-label {
    flex-shrink: 0;
    line-height: 1.2;
}
.reels-filter-section .group-53272 > .reels-filter-group > div:last-child {
    flex-shrink: 0;
    height: 40px;
}
.reels-filter-section .group-53271 > div:last-child {
    min-height: 44px;
    height: 44px;
}
/* 정렬 블록 */
.reels-filter-section .group-53268 {
    flex: 0 0 auto;
}
.reels-filter-section .group-53268 .reels-menu-label {
    color: #293b48;
    font-family: "Pretendard", "Pretendard-Bold", sans-serif;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.reels-filter-section .group-53265 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.reels-filter-section .reels-sort-dropdown {
    position: relative;
}
.reels-filter-section .reels-sort-dropdown .reels-sort-dropdown-btn {
    padding: 10px 20px;
    height: 40px;
    border-radius: 7.5px;
    background: #ffffff;
    color: #293b48;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.reels-filter-section .reels-sort-dropdown-btn.active {
    border: 1.5px solid #b90cc6;
    color: #b90cc6;
}
.reels-filter-section .reels-sort-dropdown-btn.active:hover {
    border: 1.5px solid #b90cc6;
    color: #b90cc6;
}
.reels-filter-section .reels-sort-dropdown-btn:not(.active) {
    color: #293b48;
}
/* 필터 섹션 내 frame-11232200 호버 시 보더 중복 방지 */
.reels-filter-section .frame-11232200:hover {
    border: none;
}
.reels-filter-section .frame-11232200.active:hover {
    border: 1.5px solid #b90cc6;
}
/* 검색 블록 */
.reels-filter-section .group-53270 {
    flex: 1 1 70px;
    min-width: 70px;
    max-width: 532px;
}
.reels-filter-section .group-53270 .reels-menu-label {
    color: #293b48;
    font-family: "Pretendard", "Pretendard-Bold", sans-serif;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.reels-filter-section .group-53269 {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: stretch;
    gap: 0;
}
.reels-filter-section .group-53269 .reels-search-input,
.reels-filter-section .group-53269 .reels-search-btn {
    margin: 0;
}
.reels-filter-section .group-53269 .rectangle-3746,
.reels-filter-section .group-53269 .rectangle-3747 {
    display: none;
}
.reels-filter-section .group-53269 .reels-search-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 10px 12px 10px 16px;
    border: none;
    border-radius: 7.5px 0 0 7.5px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: #293b48;
    margin-right: 0;
}
.reels-filter-section .group-53269 .reels-search-input::placeholder {
    color: #8097a8;
}
.reels-filter-section .group-53269 .reels-search-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 0 7.5px 7.5px 0;
    background: #b90cc6;
    border: none;
    padding: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.reels-filter-section .group-53269 .reels-search-icon,
.reels-filter-section .group-53269 .ic-actions-search {
    width: 16px;
    height: 16px;
}
/* 카테고리 블록 (피그마 순서 첫 번째, 박스 안에서만 스크롤) */
.reels-filter-section .group-53271 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.reels-filter-section .group-53271 .reels-menu-label {
    color: #293b48;
    font-family: "Pretendard", "Pretendard-Bold", sans-serif;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 700;
    margin-left: 44px !important;
}
/* 카테고리 그룹 왼쪽 끝으로 정렬 */
.reels-filter-section .group-53271 .reels-menu-label.div5 {
    margin-left: 0;
}
.reels-filter-section .group-53271 .reels-category-scroll-wrapper {
    width: 100%;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 40px;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
}
.reels-filter-section .group-53271 .reels-category-scroll-wrapper .reels-category-scroll-btn {
    flex: 0 0 36px;
    height: 36px;
}
.reels-filter-section .group-53271 .reels-category-buttons {
    flex: 1 1 0%;
    min-width: 0;
    height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border-radius: 7.5px;
    box-shadow: none;
    padding: 0 2px;
}
.reels-filter-section .group-53271 .reels-category-buttons::-webkit-scrollbar {
    display: none;
}
/* 마우스 드래그 스크롤 */
.reels-drag-scroll {
    cursor: grab;
    user-select: none;
}
.reels-drag-scroll.dragging {
    cursor: grabbing;
}
.reels-filter-section .group-53271 .reels-category-btn {
    padding: 10px 20px;
    height: 40px;
    border-radius: 7.5px;
    background: #ffffff;
    border: 1.5px solid transparent;
    color: #293b48;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    box-sizing: border-box;
}
.reels-filter-section .group-53271 .reels-category-btn.active,
.reels-filter-section .group-53271 .reels-category-btn.frame-112322002.active {
    border-color: #b90cc6;
    color: #b90cc6;
}

.reels-filter-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.reels-filter-label {
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

/* 카테고리 1행 슬라이드 (피그마 디자인) */
.reels-category-scroll-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
    flex: 1;
    min-width: 0;
}
.reels-category-scroll-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: white;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.reels-category-scroll-btn:hover {
    opacity: 0.85;
}
.reels-category-scroll-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* 왼쪽 화살표: 스크롤 전에는 숨김, 오른쪽으로 스크롤했을 때만 표시 */
.reels-category-scroll-btn--left {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}
.reels-category-scroll-btn--left.reels-category-scroll-btn--can-scroll-left {
    visibility: visible;
    opacity: 1;
}
.reels-category-scroll-btn--left:disabled.reels-category-scroll-btn--can-scroll-left {
    opacity: 0.4;
}
.reels-category-scroll-icon {
    width: 20px;
    height: 20px;
    display: block;
}
.reels-category-scroll-icon--left {
    transform: rotate(180deg);
}
.reels-category-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    width: 100%;
    flex: 1;
    min-width: 0;
}
.reels-category-buttons::-webkit-scrollbar {
    display: none;
}
.reels-category-buttons .reels-category-btn {
    flex-shrink: 0;
}

.reels-category-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reels-category-btn.active {
    background: #b90cc6;
    color: white;
    border-color: #b90cc6;
}

.reels-category-btn:hover {
    border-color: #b90cc6;
}

/* 정렬 버튼 (구버전 호환) */
.reels-sort-buttons {
    display: none;
}

.reels-sort-btn {
    display: none;
}

/* 정렬 드롭다운 */
.reels-sort-dropdowns {
    display: flex;
    gap: 0.5rem;
}

.reels-sort-dropdown {
    position: relative;
}

.reels-sort-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.reels-sort-dropdown-btn:hover {
    border-color: #b90cc6;
}

.reels-sort-dropdown-btn.active {
    border-color: #b90cc6;
    color: #b90cc6;
}

.reels-sort-dropdown-btn .dropdown-arrow {
    font-size: 0.96rem;
    margin-left: 2px;
    transition: transform 0.2s;
}

.reels-sort-dropdown.open .reels-sort-dropdown-btn .dropdown-arrow {
    transform: rotate(180deg);
}

/* 오름차순 선택 시 ▼ → ▲ (거꾸로) */
.reels-sort-dropdown-btn[data-sort$="_asc"] .dropdown-arrow {
    transform: rotate(180deg);
}

.reels-sort-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 100px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}

.reels-sort-dropdown.open .reels-sort-dropdown-menu {
    display: block;
}

/* 부모 overflow에 가려지지 않도록: open 시 fixed + JS로 top/left/width 설정 */
.reels-sort-dropdown-menu.reels-sort-dropdown-menu--fixed {
    position: fixed;
}

.reels-sort-option {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.reels-sort-option:hover {
    background: #f3f4f6;
}

.reels-sort-option.active {
    color: #b90cc6;
    background: #fdf4ff;
}

/* 검색 결과 없음 (인라인 메시지) */
.reels-no-results {
    margin: 4rem 1.5rem;
    padding: 3rem 1rem;
    text-align: center;
}

.reels-no-results-text {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 1.5rem;
}

.reels-no-results-text span {
    color: #b90cc6;
}

.reels-reset-search-btn {
    padding: 0.75rem 1.5rem;
    background: #b90cc6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reels-reset-search-btn:hover {
    background: #a10ab0;
}

/* 검색 */
.reels-search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

.reels-search-input {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    font-size: 0.875rem;
    outline: none;
}

.reels-search-input::placeholder {
    color: #9ca3af;
}

.reels-search-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: #b90cc6;
    border: none;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.reels-search-btn:hover {
    background: #a10ab0;
}

.reels-search-icon {
    width: 13px;
    height: 13px;
    display: block;
}

/* 비디오 그리드 */
/* 헤더(mx-6 = 1.5rem = 24px)와 동일한 좌우 마진 적용 */
.reels-video-grid {
    margin: 0 1.5rem;
    padding: 0 0 4rem 0;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.25rem;
    scroll-behavior: smooth;
    position: relative;
}

/* 블러 오버레이 컨테이너 (전체 컨텐츠 덮는 블러 제거됨 - 비로그인 개별 카드 블러만 유지) */
.reels-blur-container {
    display: none;
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    margin-top: 0;
    min-height: 400px;
    z-index: 5;
    pointer-events: none;
    visibility: hidden;
}

/* 비디오 그리드 블러 오버레이 (검색 전 메인 화면용) */
.reels-video-grid-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.reels-video-grid-blur-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 대형 화면 (1600px 이상) */
@media (min-width: 1600px) {
    .reels-video-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 중대형 화면 (1200px ~ 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .reels-video-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 태블릿-데스크탑 전환 (1024px ~ 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .reels-video-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 로딩 */
.reels-loading-container {
    margin: 2rem 1.5rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

@media (max-width: 768px) {
    .reels-loading-container {
        margin: 1.5rem 1rem;
    }
}

.reels-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #9333EA;
    border-radius: 50%;
    animation: reels-spin 0.8s linear infinite;
}

@keyframes reels-spin {
    to {
        transform: rotate(360deg);
    }
}

.reels-loading-text {
    margin-left: 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* 끝 메시지 */
.reels-end-message {
    margin: 2rem 1.5rem;
    padding: 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .reels-end-message {
        margin: 1.5rem 1rem;
    }
}

/* 결과 없음 (빈 상태) */
.reels-empty-state {
    width: 100%;
    padding: 3rem 1rem;
    text-align: center;
}
.reels-empty-state-text {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
}

/* 더 보기 버튼 */
.reels-load-more-btn {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    padding-bottom: 4rem;
}

.reels-load-more-btn button {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reels-load-more-btn button:hover {
    border-color: #9333EA;
    color: #9333EA;
    background: #faf5ff;
}

.reels-load-more-btn button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 비디오 카드 */
.reels-video-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 0;
    animation: reels-fade-in 0.5s ease-in-out forwards;
    min-width: 0;
    width: 100%;
}

/* 분석 결과 표시 중: 현재 분석한 동일 릴스는 그리드에서 숨김 */
.reels-video-card.reels-card-current-analysis {
    display: none !important;
}

/* autohtml 카드 레이아웃(디자인 동일 계열) */
.reels-autohtml-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

/* 그리드 외부에서 사용할 때만 max-width 적용 */
.reels-video-grid .reels-autohtml-card {
    max-width: none;
    width: auto;
    min-width: 0;
}

.reels-autohtml-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #f3f4f6;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.reels-autohtml-thumb-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.reels-autohtml-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 호버 시 CDN 비디오 미리보기 (403 에러 발생 시 자동으로 이미지로 복구) */
.reels-autohtml-thumb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    pointer-events: none;
}

/* 썸네일 오버레이 */
.reels-autohtml-thumb-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}

/* 블러 카드: thumb-overlay는 모달 아래로 (회원 전용 모달이 위에 선명히 보이도록) */
.reels-card-blurred .reels-autohtml-thumb-overlay {
    background: transparent;
    backdrop-filter: none;
    z-index: 1;
}

/* 재생 버튼 (썸네일 중앙) */
.reels-autohtml-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.reels-autohtml-play-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.reels-autohtml-play-btn svg {
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

/* 구버전 재생 아이콘 (호환성) */
.reels-autohtml-play {
    display: none;
}

/* 통계 오버레이 (썸네일 하단) - 이미지 디자인과 동일 */
.reels-autohtml-stats-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 8px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 4;
}

.reels-autohtml-stat-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    background: linear-gradient(180deg, rgba(107, 114, 128, 0.95) 0%, rgba(75, 85, 99, 0.95) 100%);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reels-autohtml-stat-box .reels-stat-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.reels-autohtml-stat-box span {
    white-space: nowrap;
}

.reels-autohtml-body {
    padding: 13px 11px 12px;
}

/* 계정 아이디 + 카테고리 (1행) - 피그마 디자인 */
.reels-autohtml-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* @isanghan_academy - 계정 아이디 */
.reels-autohtml-username {
    color: #293b48;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* 요식업 - 카테고리 */
.reels-autohtml-category {
    color: #b90cc6;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 계정 이름 (full name) - 2행 */
.reels-autohtml-fullname {
    color: #293b48;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 영상 2줄 요약 내용 - 3행 */
.reels-autohtml-summary {
    color: #8097a8;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 125%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    margin-bottom: 12px;
    min-height: 35px;
}

/* 구버전 호환성 */
.reels-autohtml-category-tag {
    display: none;
}

.reels-autohtml-account-label {
    display: none;
}

/* 구버전 스타일 (호환성 유지) */
.reels-autohtml-top {
    display: none;
}

.reels-autohtml-title {
    display: none;
}

.reels-autohtml-status {
    display: none;
}

/* 구버전 하단 통계 (숨김 처리 - 새로운 오버레이 사용) */
.reels-autohtml-stats {
    display: none;
}
.reels-autohtml-stat {
    display: none;
}
.reels-autohtml-stat .reels-stat-icon {
    display: none;
}
.reels-autohtml-caption {
    display: none;
}
.reels-autohtml-sub {
    display: none;
}

.reels-autohtml-actions {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: relative;
    z-index: 10;
}

/* 좌측 분석 영상 아래 버튼(원본 링크, AI 영상 분석) - 검색 카드와 동일 */
.reels-analysis-left-actions.reels-autohtml-actions {
    margin-top: 8px;
}

.reels-autohtml-btn {
    height: 30px;
    border-radius: 5px;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

/* 원본 링크 버튼 */
.reels-autohtml-btn--light {
    background: #f5f5f5;
    color: #293b48;
}

.reels-autohtml-btn--light:hover {
    background: #ebebeb;
}

/* AI 영상 분석 버튼 */
.reels-autohtml-btn--purple {
    background: #b90cc6;
    color: #ffffff;
}

.reels-autohtml-btn--purple:hover {
    background: #a10ab0;
}

/* 어드민용 뱃지 (NSFW, 숨김) */
.reels-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.reels-admin-badge--hidden {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.reels-admin-badge--nsfw {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* 릴스 기획 말풍선 툴팁 */
.reels-planning-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background-color: rgba(0, 153, 226, 1);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease;
}

.reels-planning-tooltip .reels-tooltip-arrow {
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 153, 226, 1);
}

/* 모바일에서 말풍선 툴팁 숨기기 */
@media (max-width: 768px) {
    .reels-planning-tooltip {
        display: none !important;
    }
}

.reels-video-card:nth-child(1) { animation-delay: 0.1s; }
.reels-video-card:nth-child(2) { animation-delay: 0.2s; }
.reels-video-card:nth-child(3) { animation-delay: 0.3s; }
.reels-video-card:nth-child(4) { animation-delay: 0.4s; }
.reels-video-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes reels-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reels-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reels-video-thumbnail {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #f3f4f6;
}

.reels-video-title {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #1f2937;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 분석 결과 섹션 스타일 */
.reels-analysis-section {
    width: 100%;
    margin: 0;
    padding: 0;
    display: none;
    height: calc(100vh - 200px);
    min-height: calc(100vh - 200px);
    overflow: hidden;
    position: relative;
}

.reels-analysis-section.active {
    display: flex;
    flex-direction: column;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    width: auto;
}

/* 좌/우 영역 갭·박스쉐도우·너비 - 인스타 광고 기획(instagram/ads)과 동일 */
.reels-analysis-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    align-items: stretch;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.reels-analysis-video {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 380px;
    min-width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.reels-analysis-video-title {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-weight: 700;
    margin-bottom: 10px;
}

.reels-title-text {
    color: #293b48;
}

.reels-title-asterisk {
    color: #cf1d1c;
}

/* 분석 좌측: 검색 카드와 동일한 .reels-autohtml-thumb 구조 */
.reels-analysis-video .reels-autohtml-thumb {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #f3f4f6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.reels-analysis-video .reels-autohtml-thumb .reels-autohtml-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reels-analysis-stats {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.reels-analysis-stat {
    flex: 1;
    text-align: center;
}

.reels-analysis-stat-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.reels-analysis-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.reels-analysis-account {
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* 좌측 결과 하단: 원래 스타일 유지 - 좌(@아이디) / 우(계정 풀네임) 좌우 배치 */
.reels-analysis-account-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.reels-analysis-account-row .isanghan-academy,
.reels-analysis-account-row .isanghan-academy * {
    box-sizing: border-box;
}

.reels-analysis-account-row .isanghan-academy {
    flex: 0 1 auto;
    min-width: 0;
    color: #293b48;
    font-family: "Pretendard-SemiBold", sans-serif;
    font-size: 18px;
    line-height: 100%;
    font-weight: 600;
    position: relative;
}

.reels-analysis-account-row .reels-autohtml-fullname {
    display: none; /* 우측 풀네임 숨김, @계정만 표시 */
}

.reels-analysis-account-label {
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.reels-analysis-account-name {
    color: #1f2937;
    font-weight: 500;
}

.reels-analysis-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    height: 100%;
    overflow: hidden; /* 툴팁은 body 고정 배치(JS)로 처리 */
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.reels-analysis-content .blog-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.reels-analysis-content .blog-editor-content-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 0; /* 툴바(z-index: 10) 아래에 배치하여 툴팁이 에디터 위에 보이도록 */
}

/* 데스크탑: 하단 액션 버튼 텍스트 2배 크기 */
@media (min-width: 769px) {
    .reels-analysis-section .action-btn .action-text {
        font-size: 28px !important;
    }
    .reels-analysis-section .action-btn .action-icon {
        width: 32px !important;
        height: 32px !important;
    }
    .reels-analysis-section .action-btn .action-icon i {
        font-size: 16px !important;
    }
}

.reels-analysis-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1rem;
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.5;
}

.reels-analysis-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.reels-analysis-toolbar-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reels-analysis-toolbar-btn:hover {
    background: #f3f4f6;
    border-color: #9333EA;
}

.reels-analysis-cta-btn {
    width: 100%;
    padding: 1.25rem;
    background: #9333EA;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.3125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 1.5rem;
}

.reels-analysis-cta-btn:hover {
    background: #7e22ce;
}

.reels-analysis-field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.reels-analysis-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.reels-analysis-field-label {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    line-height: 150%;
}

.reels-analysis-field-input {
    padding: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1.3125rem;
    outline: none;
    transition: border-color 0.2s;
    line-height: 150%;
    width: 100%;
}

.reels-analysis-field-input:focus {
    border-color: #9333EA;
}

.reels-analysis-field-textarea {
    padding: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1.3125rem;
    outline: none;
    min-height: 200px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s;
    line-height: 150%;
}

.reels-analysis-field-textarea:focus {
    border-color: #9333EA;
}

.reels-analysis-script {
    border: 2px solid #9333EA;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #faf5ff;
}

.reels-analysis-script-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #9333EA;
    margin-bottom: 1rem;
    line-height: 150%;
}

.reels-analysis-script-content {
    white-space: pre-wrap;
    font-size: 1.3125rem;
    line-height: 150%;
    color: #1f2937;
    padding: 1.5rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 릴스 분석 에디터 내부 스타일 - 가로 스크롤 없음 (youtube/script 참고) */
.reels-analysis-content .blog-editor-content-section {
    overflow-x: hidden;
}
.reels-analysis-content .content-editor {
    overflow-x: hidden !important;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#reelsAnalysisEditor,
#reelsAnalysisEditorMobile {
    font-size: 21px !important;
    color: #293b48;
    line-height: 150%;
    min-height: 100%;
    height: 100%;
    padding: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: hidden !important;
}

/* 에디터 내 섹션 블록: plan과 동일 구조 - 제목 밑 div 한 개, <br>로만 줄바꿈 (p 없음) */
.reels-script-block {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.6 !important;
    color: #293b48;
}
.reels-script-block:last-child {
    margin-bottom: 0 !important;
}
/* 과거 p 사용 시 대비 (현재는 div만 사용) */
.reels-script-block p {
    margin: 0 0 2px 0 !important;
}
.reels-script-block p:last-child {
    margin-bottom: 0 !important;
}
/* h2 타이틀 바로 아래 블록: 타이틀-내용 사이 간격 제거 */
#reelsAnalysisEditor h2.reels-script-title + .reels-script-block,
#reelsAnalysisEditorMobile h2.reels-script-title + .reels-script-block {
    margin-top: 0 !important;
}

/* 릴스 기획/분석 결과 - youtube scriptEditorContent h4와 동일: margin-bottom 4px로 줄바꿈 1회만 */
#reelsAnalysisEditor h2.reels-script-title,
#reelsAnalysisEditorMobile h2.reels-script-title,
#planResultEditor h1, #planResultEditor h2, #planResultEditor h3,
#mobilePlanResultEditor h1, #mobilePlanResultEditor h2, #mobilePlanResultEditor h3 {
    color: #9333EA !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
    margin: 0 0 4px 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
}
/* 보라 타이틀 위에 줄넘김 1줄 (첫 번째 타이틀 제외) */
#reelsAnalysisEditor h2.reels-script-title:not(:first-child),
#reelsAnalysisEditorMobile h2.reels-script-title:not(:first-child) {
    margin-top: 1em !important;
}
/* 소제목 바로 아래 요소 여백 최소 (youtube/script 스타일) */
#reelsAnalysisEditor h2.reels-script-title + p,
#reelsAnalysisEditor h2.reels-script-title + div,
#reelsAnalysisEditor h2.reels-script-title + h3,
#reelsAnalysisEditorMobile h2.reels-script-title + p,
#reelsAnalysisEditorMobile h2.reels-script-title + div,
#reelsAnalysisEditorMobile h2.reels-script-title + h3,
#planResultEditor h1 + *, #planResultEditor h2 + *, #planResultEditor h3 + *,
#mobilePlanResultEditor h1 + *, #mobilePlanResultEditor h2 + *, #mobilePlanResultEditor h3 + * {
    margin-top: 0 !important;
}

/* 모바일: blog/create와 동일하게 소제목 1.2rem */
@media (max-width: 768px) {
    #reelsAnalysisEditor h2.reels-script-title,
    #reelsAnalysisEditorMobile h2.reels-script-title,
    #planResultEditor h1, #planResultEditor h2, #planResultEditor h3,
    #mobilePlanResultEditor h1, #mobilePlanResultEditor h2, #mobilePlanResultEditor h3 {
        font-size: 1.2rem !important;
    }
}

/* 대본 첫 부분 스타일 - 타임스탬프와 다음 줄 겹침 방지 (display:block, 정상 줄간격) */
.reels-script-first-part {
    font-size: 21px !important;
    color: #293b48;
    line-height: 1.6 !important;
    padding: 0.25em 0 0.5em 0 !important;
    margin: 0 !important;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .reels-script-first-part {
        font-size: 18px !important;
    }
}

/* 대본 나머지 부분 스타일 - 음수 margin 제거로 첫 타임스탬프/다음줄 겹침 해결 */
.reels-script-rest {
    margin-top: 0.5em !important;
    font-size: 21px !important;
    color: #293b48;
    line-height: 1.6 !important;
    padding: 0;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .reels-script-rest {
        font-size: 18px !important;
    }
}

#reelsAnalysisEditor .reels-analysis-field:last-child,
#reelsAnalysisEditorMobile .reels-analysis-field:last-child {
    margin-bottom: 0;
}

/* 대화내역/보관함 상세보기 모달 내 릴스 분석·릴스 기획 결과 너비 제한 (블로그 본문/유튜브 대본과 동일하게 좁게, 가로 스크롤 방지) */
#savedDetailModal #savedContentWithEditorSection {
    max-width: 1035px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
#savedDetailModal #savedContentWithEditorSection .reels-analysis-container {
    max-width: 100%;
}
#savedDetailModal #savedContentWithEditorSection .reels-analysis-content,
#savedDetailModal #savedContentWithEditorSection .blog-editor-container {
    max-width: 100%;}
#savedDetailModal #savedContentWithEditorSection #savedModalContent {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* 저장 모달 내 릴스 분석 콘텐츠: reels 에디터와 동일한 보라색 볼드 타이틀 스타일 */
#savedDetailModal #savedModalContent h2.reels-script-title,
#savedDetailModal #savedModalContent h3.reels-script-title {
    color: #9333EA !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
    margin: 0 0 4px 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
}
#savedDetailModal #savedModalContent h2.reels-script-title:not(:first-child),
#savedDetailModal #savedModalContent h3.reels-script-title:not(:first-child) {
    margin-top: 1em !important;
}
#savedDetailModal #savedModalContent h2.reels-script-title + .reels-script-block,
#savedDetailModal #savedModalContent h3.reels-script-title + .reels-script-block {
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    #savedDetailModal #savedModalContent h2.reels-script-title,
    #savedDetailModal #savedModalContent h3.reels-script-title {
        font-size: 1.2rem !important;
    }
}
@media (max-width: 768px) {
    #savedDetailModal #savedContentWithEditorSection {
        max-width: 100%;
    }
    #savedDetailModal #savedContentWithEditorSection .reels-analysis-content,
    #savedDetailModal #savedContentWithEditorSection .blog-editor-container {
        max-width: 100%;
    }
}

/* 반응형 - 태블릿 */
@media (max-width: 1023px) {
    .reels-analysis-section.active {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* 분석 결과: 좌우→상하 전환, 모바일은 블로그 본문작성과 동일(양옆 여백 없음·컨테이너 분리·투명 배경) */
@media (max-width: 768px) {
    .reels-analysis-section.active {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .reels-analysis-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
        background: transparent;
    }
    .reels-analysis-video {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .reels-analysis-content {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
}

@media (max-width: 1024px) {
    .reels-filter-section .group-53271 .reels-menu-label.div5 {
        margin-left: 0;
    }
    
    .reels-filter-section {
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 1rem 0.75rem;
    }
    
    .reels-filter-group:first-child {
        flex: 1;
        min-width: 400px;
    }
    
    .reels-search-wrapper {
        width: 100%;
    }
    
    .reels-blur-container {
        left: 1.5rem;
        right: 1.5rem;
        min-height: 400px;
    }
    
    .reels-video-grid {
        margin: 0 1.5rem;
        grid-template-columns: 1fr !important;
        gap: 1rem;
        position: relative;
    }
    
    .reels-autohtml-stat-box {
        padding: 6px 4px;
        font-size: 14px;
    }
    
    .reels-autohtml-stat-box .reels-stat-svg {
        width: 12px;
        height: 12px;
    }
    
    .reels-autohtml-username {
        font-size: 14px;
    }
    
    .reels-autohtml-category {
        font-size: 12px;
    }
    
    .reels-autohtml-fullname {
        font-size: 13px;
    }
    
    .reels-autohtml-summary {
        font-size: 13px;
    }
    
    .reels-autohtml-btn {
        font-size: 14px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .reels-input-section {
        height: 50vh;
        min-height: 300px;
        padding: 1rem;
    }
    
    .reels-input-section p {
        font-size: 22px !important;
        margin-bottom: 1.5rem !important;
        white-space: normal;
        line-height: 140%;
    }
    
    .reels-input-container {
        max-width: 100%;
    }
    
    .frame-11232200 {
        height: 42px;
        padding: 8px 14px;
        border-radius: 30px;
    }
    
    .reels-other-section .frame-11232200 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .frame-11232200 .div {
        font-size: 14px;
    }
    
    .frame-11232200:hover .div {
        font-size: 14px;
    }
    
    .reels-input-wrapper {
        width: 335px;
        max-width: 100%;
        height: 48px;
        padding: 0;
        background: #ffffff;
        border-radius: 71px;
        border: 2px solid #b90cc6;
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        margin: 0 auto;
    }
    
    .reels-input-icon {
        width: auto;
        height: auto;
        position: absolute;
        left: 4.18%;
        top: 50%;
        transform: translateY(-50%);
        width: 12.72%;
        height: 52.65%;
        z-index: 1;
    }
    
    .reels-input-icon-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .reels-input-field {
        font-size: 16px;
        line-height: 200%;
        font-weight: 400;
        color: #000000;
        padding-left: 66px;
        padding-right: 50px;
        width: 100%;
        height: 100%;
        border-radius: 71px;
        background: transparent;
    }
    
    .reels-input-field::placeholder {
        color: #8097a8;
        font-size: 16px;
        line-height: 200%;
        font-weight: 400;
    }
    
    .reels-analyze-btn {
        position: absolute;
        right: 4.18%;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        height: 25px;
        min-width: 25px;
        padding: 0;
        background: #b90cc6;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 140%;
        font-weight: 700;
        color: #ffffff;
    }
    
    .reels-analyze-btn span {
        display: none; /* 모바일에서는 텍스트 숨김 */
    }
    
    /* 모바일: 버튼에 Group 52628.png 아이콘만 표시 */
    .reels-analyze-btn--mobile::before {
        content: none !important;
    }
    
    .reels-analyze-btn--mobile .reels-analyze-btn-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        object-fit: contain;
        display: block !important;
        visibility: visible !important;
    }
    
    .reels-analyze-btn:not(.reels-analyze-btn--mobile)::before {
        content: '→';
        color: #ffffff;
        font-size: 18px;
        line-height: 140%;
        font-weight: 700;
        font-family: "Pretendard-Bold", sans-serif;
    }
    
    .reels-analyze-btn {
        min-width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .reels-analyze-btn:hover {
        background: #a00ab3;
    }
    
    /* 모바일: 헤더(mx-4 = 1rem = 16px)와 동일한 좌우 마진 */
    .reels-filter-section {
        margin: 0 1rem 1.5rem 1rem;
    }

    /* 모바일: 메인 상단 헤더 - 블로그처럼 좌측 정렬 */
    .lg\:hidden .reels-header {
        padding: 1rem 1.5rem !important;
        margin-top: 1rem !important;
        height: 72px !important;
        min-height: 72px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-bottom: 0.6rem !important;
    }
    .lg\:hidden .reels-header h1 {
        font-size: 20px !important;
        margin-bottom: 0.25rem !important;
    }
    .lg\:hidden .reels-header p {
        font-size: 12px !important;
    }

    /* 모바일 메뉴바 frame-11232214 레이아웃 */
    .reels-filter-section-mobile.frame-11232214,
    .reels-filter-section-mobile.frame-11232214 * {
        box-sizing: border-box;
    }
    .reels-filter-section-mobile.frame-11232214 {
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5eef1;
        height: auto;
        min-height: 262px;
        position: relative;
        z-index: 1; /* 블러 오버레이(z-index: 5)보다 낮게 설정하여 블러로 가려지도록 */
        position: relative;
        padding: 20px;
        box-shadow: 2px 2px 15px 0px rgba(51, 51, 51, 0.05);
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0;
        align-items: start;
    }
    .frame-11232214 .frame-11232204 {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 6px;
    }
    .frame-11232214 .frame-112322042 .reels-menu-label.div {
        color: #293b48;
        font-family: "Pretendard", sans-serif;
        font-size: 16px;
        line-height: 17.5px;
        font-weight: 600;
    }
    .frame-11232214 .frame-11232204-chips.reels-category-scroll-wrapper-mobile {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 20px;
        overflow: visible;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .frame-11232214 .frame-11232204-chips .reels-category-scroll-btn {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
    }
    .frame-11232214 .frame-11232204-chips .reels-category-scroll-icon {
        width: 14px;
        height: 14px;
    }
    /* 모바일: 카테고리 좌측 화살표 항상 표시 (데스크탑은 스크롤 시에만 표시) */
    .reels-category-scroll-wrapper-mobile .reels-category-scroll-btn--left {
        visibility: visible !important;
        opacity: 1 !important;
    }
    .reels-category-scroll-wrapper-mobile .reels-category-scroll-btn--left:disabled {
        opacity: 0.4 !important;
    }
    .frame-11232214 .frame-11232204-chips .reels-category-buttons {
        flex: 1;
        min-width: 0;
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* overflow-x: auto 시 overflow-y가 auto로 계산되어 box-shadow 위아래 잘림 → 패딩으로 여유 확보 */
        padding: 10px 0;
    }
    .frame-11232214 .frame-11232204-chips .reels-category-buttons::-webkit-scrollbar {
        display: none;
    }
    .frame-11232214 .frame-11232204-chips .reels-category-btn {
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 100%;
        font-weight: 600;
        flex-shrink: 0;
        height: auto;
        border: 1.5px solid transparent;
        background: #ffffff;
        color: #293b48;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .frame-11232214 .frame-11232204-chips .reels-category-btn.active {
        border-color: #b90cc6;
        color: #b90cc6;
    }
    .frame-11232214 .group-53292 {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .frame-11232214 .frame-112322043 {
        grid-column: 1;
        grid-row: 3;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 6px;
    }
    .frame-11232214 .frame-11232204-sort {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex;
        gap: 6px;
        margin-bottom: 20px;
    }
    .frame-11232214 .frame-11232204-sort .reels-sort-dropdown-btn {
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 100%;
        font-weight: 600;
        height: auto;
        border: 1.5px solid transparent;
        background: #ffffff;
        color: #293b48;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .frame-11232214 .frame-11232204-sort .reels-sort-dropdown-btn.active {
        border-color: #b90cc6;
        color: #b90cc6;
    }
    .frame-11232214 .frame-112322044 {
        grid-column: 1;
        grid-row: 5;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 6px;
    }
    .frame-11232214 .reels-search-mobile {
        grid-column: 1 / -1;
        grid-row: 6;
        position: relative;
        width: 100%;
        height: 33px;
        display: flex;
        align-items: stretch;
        gap: 0;
        border-radius: 8px;
        overflow: hidden;
    }
    .frame-11232214 .reels-search-mobile .reels-search-input {
        flex: 1;
        height: 33px;
        padding: 6px 8px 6px 12px;
        border: none;
        border-radius: 8px 0 0 8px;
        background: #f5f8f9;
        font-size: 14px;
        line-height: 160%;
        font-weight: 400;
        color: #293b48;
        margin-right: 0;
    }
    .frame-11232214 .reels-search-mobile .reels-search-input::placeholder {
        color: #8097a8;
    }
    .frame-11232214 .reels-search-mobile .reels-search-btn {
        width: 34px;
        min-width: 34px;
        height: 33px;
        border-radius: 0 8px 8px 0;
        background: #b90cc6;
        border: none;
        padding: 0;
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .frame-11232214 .reels-search-mobile .reels-search-icon {
        width: 13px;
        height: 13px;
    }
    
    .reels-blur-container {
        left: 1rem;
        right: 1rem;
        min-height: 400px;
    }
    
    .reels-video-grid {
        margin: 0 1rem;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        position: relative;
    }
    
    .reels-autohtml-card {
        max-width: 100%;
    }
    
    .reels-autohtml-play-btn {
        width: 50px;
        height: 50px;
    }
    
    .reels-autohtml-play-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .reels-autohtml-stat-box {
        padding: 5px 3px;
        font-size: 14px;
        gap: 2px;
    }
    
    .reels-autohtml-stat-box .reels-stat-svg {
        width: 10px;
        height: 10px;
    }
    
    .reels-autohtml-body {
        padding: 10px 10px 10px;
    }
    
    .reels-autohtml-username {
        font-size: 13px;
        font-weight: 800;
    }
    
    .reels-autohtml-category {
        font-size: 11px;
    }
    
    .reels-autohtml-fullname {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .reels-autohtml-summary {
        font-size: 11px;
        margin-bottom: 8px;
        min-height: 28px;
    }
    
    .reels-autohtml-btn {
        height: 28px;
        font-size: 12px;
    }
    
    .reels-autohtml-actions {
        gap: 4px;
    }
    
    .reels-autohtml-btn {
        height: 26px;
        font-size: 11px;
        padding: 4px 6px;
    }
    
    .reels-analysis-section {
        height: auto;
        min-height: auto;
    }
    
    .reels-analysis-container {
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: transparent;
    }
    .reels-analysis-video {
        width: auto;
        max-width: 100%;
        padding: 1rem;
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: none;
        margin: 1rem;
    }
    .reels-analysis-video-title {
        font-size: 20px;
    }
    .reels-analysis-content {
        padding: 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    
    .reels-analysis-field-label {
        font-size: 1.25rem;
    }
    
    .reels-analysis-field-input,
    .reels-analysis-field-textarea {
        font-size: 1rem;
    }
    
    .reels-analysis-script-content {
        font-size: 1rem;
    }
    
    #reelsAnalysisEditor,
    #reelsAnalysisEditorMobile {
        font-size: 18px !important;
    }
    
    .reels-analysis-cta-btn {
        font-size: 1rem;
    }
    
    /* 정렬 드롭다운 모바일 - 화살표 30% 축소 */
    .reels-sort-dropdowns {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    
    .reels-sort-dropdown-btn .dropdown-arrow {
        font-size: 0.672rem;
    }
    
    .reels-sort-dropdown-btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .reels-sort-dropdown-menu {
        min-width: 90px;
    }
    
    .reels-sort-option {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* 검색 결과 없음 모바일 */
    .reels-no-results {
        margin: 2rem 1rem;
        padding: 2rem 1rem;
    }
    
    .reels-no-results-text {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .reels-reset-search-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .reels-blur-overlay .reels-blur-desc {
        font-size: 12px !important;
    }
}

/* 비로그인 유저 블러 처리 */
/* 블러는 썸네일 배경만 적용, 모달(회원 전용)은 블러 위에 선명하게 */
.reels-card-blurred {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
}
.reels-card-blurred .reels-autohtml-thumb-bg,
.reels-card-blurred .reels-autohtml-thumb-img,
.reels-card-blurred .reels-autohtml-thumb-video {
    filter: blur(8px);
}
.reels-card-blurred .reels-autohtml-thumb {
    position: relative;
}
.reels-card-blurred .reels-autohtml-thumb-overlay {
    z-index: 1;
}
/* 블러일 때만 영상 중앙 재생 버튼 숨김 */
.reels-card-blurred .reels-autohtml-play-btn {
    display: none;
}

/* 회원 전용 모달: 블러 위에 선명하게 표시 */
.reels-blur-overlay.group-53287,
.reels-blur-overlay.group-53287 * {
    box-sizing: border-box;
}
.reels-blur-overlay.group-53287 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.reels-blur-overlay .rectangle-3805 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
.reels-blur-overlay .group-53286 {
    position: relative;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.reels-blur-overlay .reels-blur-title {
    color: #ffffff;
    text-align: center;
    font-family: "Pretendard-Bold", "Pretendard", sans-serif;
    font-size: 18px;
    line-height: 100%;
    font-weight: 700;
}
.reels-blur-overlay .reels-blur-desc {
    color: #ffffff;
    text-align: center;
    font-family: "Pretendard-Medium", "Pretendard", sans-serif;
    font-size: 16px;
    line-height: 125%;
    font-weight: 500;
}
.reels-blur-overlay .reels-blur-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 32.5px;
    padding: 0 16px;
    background: #d87e33;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    font-family: "Pretendard-Bold", "Pretendard", sans-serif;
    font-size: 16px;
    line-height: 100%;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
}
.reels-blur-overlay .reels-blur-login-btn:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* 블러 카드에서도 버튼 영역은 클릭/터치 가능 (원본 링크 등) */
.reels-card-blurred .reels-autohtml-actions {
    position: relative;
    z-index: 10;
}

/* ==================== 인스타그램 릴스 스타일 비디오 모달 ==================== */
.ig-reels-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.ig-reels-modal.active {
    display: flex;
}

.ig-reels-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.ig-reels-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.2s;
}

.ig-reels-close:hover {
    opacity: 0.7;
}

.ig-reels-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    max-height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
}

/* 비디오 영역 */
.ig-reels-video-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.ig-reels-video-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 재생/일시정지 아이콘 */
.ig-reels-play-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.ig-reels-play-pause.visible {
    opacity: 1;
}

/* 음소거 버튼 */
.ig-reels-mute-btn {
    position: absolute;
    bottom: 120px;
    right: 70px;
    width: 36px;
    height: 36px;
    background: rgba(38, 38, 38, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ig-reels-mute-btn:hover {
    background: rgba(60, 60, 60, 0.9);
}

/* 우측 액션 버튼들 */
.ig-reels-actions {
    position: absolute;
    right: 12px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ig-reels-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.ig-reels-action:hover {
    transform: scale(1.1);
}

.ig-reels-action span {
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ig-reels-action svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* 프로필 썸네일 */
.ig-reels-profile-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid white;
    cursor: pointer;
    margin-top: 8px;
}

.ig-reels-profile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 하단 정보 영역 */
.ig-reels-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 70px;
    padding: 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
}

.ig-reels-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ig-reels-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
}

.ig-reels-username {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ig-reels-follow-btn {
    background: transparent;
    border: 1px solid white;
    border-radius: 8px;
    color: white;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ig-reels-follow-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ig-reels-caption {
    color: white;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ig-reels-music {
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ig-reels-music svg {
    animation: musicSpin 3s linear infinite;
}

@keyframes musicSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 반응형 */
@media (max-width: 768px) {
    .ig-reels-container {
        max-width: 100%;
    }
    
    .ig-reels-close {
        top: 10px;
        right: 10px;
    }
    
    .ig-reels-mute-btn {
        bottom: 140px;
        right: 60px;
    }
    
    .ig-reels-actions {
        right: 8px;
        bottom: 140px;
    }
    
    .ig-reels-bottom {
        right: 60px;
    }
}

/* ==================== AI 분석 결과 모달 ==================== */
.ai-analysis-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    align-items: center;
    justify-content: center;
}

.ai-analysis-modal.active {
    display: flex;
}

.ai-analysis-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.ai-analysis-modal-container {
    position: relative;
    width: 95%;
    max-width: 800px;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-analysis-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8f4ff 0%, #fff 100%);
}

.ai-analysis-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #9333EA;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-analysis-modal-close {
    width: 40px;
    height: 40px;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ai-analysis-modal-close:hover {
    background: #e5e7eb;
    color: #374151;
    transform: rotate(90deg);
}

.ai-analysis-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
}

/* AI 분석 결과 내부 스타일 */
.ai-analysis-modal-content .ai-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f4f6;
}

.ai-analysis-modal-content .ai-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ai-analysis-modal-content .ai-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #9333EA;
    margin: 0 0 4px 0;
    padding-left: 12px;
    border-left: 4px solid #9333EA;
}

.ai-analysis-modal-content .ai-section-content {
    padding-left: 16px;
    color: #4b5563;
}

.ai-analysis-modal-content .ai-section-content p {
    margin: 8px 0;
}

.ai-analysis-modal-content .ai-section-content--single-line .ai-summary-line {
    margin: 0;
    line-height: 1.5;
}
.ai-analysis-modal-content .ai-section-content--single-line .ai-summary-line strong {
    margin-right: 2px;
}

.ai-analysis-modal-content .ai-section-content strong {
    color: #1f2937;
}

/* 대본 섹션 특별 스타일 */
.ai-analysis-modal-content .ai-script-block {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    border-left: 4px solid #9333EA;
}

.ai-analysis-modal-content .ai-script-time {
    font-weight: 700;
    color: #9333EA;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.ai-analysis-modal-content .ai-script-line {
    display: flex;
    gap: 8px;
    margin: 6px 0;
    font-size: 0.95rem;
}

.ai-analysis-modal-content .ai-script-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 60px;
}

.ai-analysis-modal-content .ai-script-text {
    color: #1f2937;
    flex: 1;
}

.ai-analysis-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #f9fafb;
}

.ai-analysis-plan-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #b90cc6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-analysis-plan-btn:hover {
    background: #a00ab3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(185, 12, 198, 0.3);
}

.ai-analysis-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #9333EA;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-analysis-copy-btn:hover {
    background: #7c22ce;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* AI 분석 모달 반응형 */
@media (max-width: 768px) {
    .ai-analysis-modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .ai-analysis-modal-title {
        font-size: 1.25rem;
    }
    
    .ai-analysis-modal-content {
        padding: 16px;
    }
    
    /* 모바일: 릴스 기획·복사하기 버튼 왼쪽 정렬 (채널톡과 겹침 방지) */
    .ai-analysis-modal-footer {
        justify-content: flex-start;
        padding-left: 16px;
        gap: 10px;
    }
}

/* ============================================
   분석 모드 토글 스타일
   ============================================ */
.reels-mode-controls {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.reels-mode-controls.mobile {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.reels-mode-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.reels-mode-toggle .mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

.reels-mode-toggle .mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.reels-mode-toggle .mode-btn.active {
    background: white;
    color: #7c22ce;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.reels-mode-toggle .mode-btn i {
    font-size: 12px;
}

/* 모델 선택 드롭다운 */
.reels-model-select {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    outline: none;
    transition: all 0.2s ease;
    min-width: 140px;
}

.reels-model-select:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.reels-model-select:focus {
    background: white;
    box-shadow: 0 0 0 2px rgba(124, 34, 206, 0.3);
}

.reels-model-select.mobile {
    margin-top: 8px;
    width: 100%;
    max-width: 200px;
}

/* 모바일 토글 스타일 */
.reels-mode-toggle.mobile {
    background: rgba(255, 255, 255, 0.2);
}

.reels-mode-toggle.mobile .mode-btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* 모드 컨트롤 반응형 */
@media (max-width: 640px) {
    .reels-mode-controls:not(.mobile) {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-top: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .reels-model-select:not(.mobile) {
        margin-top: 8px;
        width: 100%;
        max-width: 200px;
    }
}