/* PPT 설정 템플릿 - stru.md 요구사항 완전 구현 */

/* ===== 전역 변수 설정 ===== */
:root {
    /* ===== 0. 동적 뷰포트 크기 ===== */
    --viewport-width: 100vw; /* 동적 뷰포트 너비 */
    --viewport-height: 100vh; /* 동적 뷰포트 높이 */
    
    /* ===== 디버그 모드 (영역 표시) ===== */
    --debug-mode: var(--debug-mode, 0); /* 1: 영역 표시, 0: 영역 숨김 */
    
    /* ===== 배경 확장 변수 ===== */
    --body-background-expansion: var(--body-background-expansion, 0); /* 바디 레벨 배경 확장 */
    --container-background-expansion: var(--container-background-expansion, 1); /* 컨테이너 레벨 배경 확장 */
    
    /* ===== 배경 CSS 변수 ===== */
    --body-background: var(--body-background, transparent);
    --body-background-size: var(--body-background-size, auto);
    --body-background-attachment: var(--body-background-attachment, scroll);
    --container-background: var(--container-background, transparent);
    --container-background-size: var(--container-background-size, auto);
    
    /* ===== 배경 확장 로직 ===== */
/* 배경 전용 독립 객체 */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: var(--background-gradient, transparent), var(--background-pattern, transparent);
    background-size: var(--background-size, auto), var(--pattern-size, auto);
    background-attachment: var(--background-attachment, scroll);
}

/* 확장 OFF: PPT 컨테이너 크기에 맞춤 */
.background-layer.contained {
    width: var(--ppt-container-width, 100vw);
    height: var(--ppt-container-height, 56.25vw);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 확장 ON: 전체 화면 */
.background-layer.expanded {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transform: none;
}

/* 슬라이드 배경 제거 (독립 배경 사용) */
.ppt-slide {
    background: transparent;
}

/* ===== 1. 전체 영역 (16:9) ===== */
    --ppt-container-width: var(--ppt-container-width, 100vw);
    --ppt-container-height: var(--ppt-container-height, 56.25vw); /* JavaScript에서 동적 설정 */
    --ppt-aspect-ratio: var(--ppt-aspect-ratio, 16/9);
    
    /* ===== 2. PPT 표지부 영역 ===== */
    /* 표지부 제목 영역 */
    --cover-title-area-top: var(--cover-title-area-top, 20%); /* 상단에서 20% */
    --cover-title-area-left: var(--cover-title-area-left, 10%); /* 좌측에서 10% */
    --cover-title-area-width: var(--cover-title-area-width, 80%); /* 너비 80% */
    --cover-title-area-height: var(--cover-title-area-height, 20%); /* 높이 20% */
    --cover-title-h-align: var(--cover-title-h-align, center); /* 가로 정렬 */
    --cover-title-v-align: var(--cover-title-v-align, center); /* 세로 정렬 */
    
    /* 표지부 발표자 영역 */
    --cover-presenter-area-top: var(--cover-presenter-area-top, 45%); /* 상단에서 45% */
    --cover-presenter-area-left: var(--cover-presenter-area-left, 10%); /* 좌측에서 10% */
    --cover-presenter-area-width: var(--cover-presenter-area-width, 80%); /* 너비 80% */
    --cover-presenter-area-height: var(--cover-presenter-area-height, 15%); /* 높이 15% */
    --cover-presenter-h-align: var(--cover-presenter-h-align, center); /* 가로 정렬 */
    --cover-presenter-v-align: var(--cover-presenter-v-align, center); /* 세로 정렬 */
    
    /* 표지부 소속 영역 */
    --cover-affiliation-area-top: var(--cover-affiliation-area-top, 65%); /* 상단에서 65% */
    --cover-affiliation-area-left: var(--cover-affiliation-area-left, 10%); /* 좌측에서 10% */
    --cover-affiliation-area-width: var(--cover-affiliation-area-width, 80%); /* 너비 80% */
    --cover-affiliation-area-height: var(--cover-affiliation-area-height, 15%); /* 높이 15% */
    --cover-affiliation-h-align: var(--cover-affiliation-h-align, center); /* 가로 정렬 */
    --cover-affiliation-v-align: var(--cover-affiliation-v-align, center); /* 세로 정렬 */
    
    /* ===== 3. 각 PPT 영역 ===== */
    /* PPT 제목 영역 */
    --ppt-title-area-top: var(--ppt-title-area-top, 5%); /* 상단에서 5% */
    --ppt-title-area-left: var(--ppt-title-area-left, 5%); /* 좌측에서 5% */
    --ppt-title-area-width: var(--ppt-title-area-width, 90%); /* 너비 90% */
    --ppt-title-area-height: var(--ppt-title-area-height, 15%); /* 높이 15% */
    --ppt-title-h-align: var(--ppt-title-h-align, left); /* 가로 정렬 */
    --ppt-title-v-align: var(--ppt-title-v-align, center); /* 세로 정렬 */
    
    /* PPT 제목과 내용 영역 구분자 */
    --ppt-divider-height: 2px;
    --ppt-divider-margin: 10px 0;
    --ppt-divider-color: #667eea;
    
    /* PPT 내용 영역 */
    --ppt-content-area-top: 25%; /* 상단에서 25% */
    --ppt-content-area-left: 5%; /* 좌측에서 5% */
    --ppt-content-area-width: 90%; /* 너비 90% */
    --ppt-content-area-height: 70%; /* 높이 70% */
    
    /* PPT 내용 영역의 글자 기본 크기 퍼센트 */
    --content-font-size-ratio: 3%; /* 내용 영역 높이의 3% */
    --content-line-spacing-ratio: 20%; /* 글자 크기의 20% */
    
    /* PPT 내용 영역의 블릿 기본 형태 */
    --content-bullet-style: disc;
    --content-bullet-color: #333;
    
    /* PPT 내용 영역의 줄바꿈 기본 형태 */
    --content-line-break-style: wrap; /* wrap, ellipsis, scale */
    
    /* 열분할 설정 */
    --column-font-size-ratio: 2.5%; /* 내용 영역 높이의 2.5% */
    --column-line-spacing-ratio: 18%; /* 글자 크기의 18% */
    
    /* 행분할 설정 */
    --row-font-size-ratio: 2.8%; /* 내용 영역 높이의 2.8% */
    --row-line-spacing-ratio: 22%; /* 글자 크기의 22% */
    
    /* 이미지 컨테이너 크기 */
    --image-container-width: 50%; /* 전체 영역 기준 */
    --image-container-height: 33.3%; /* 전체 영역 기준 */
    
    /* ===== 4. 폰트 설정 ===== */
    --cover-title-font: 'Arial', 'Helvetica', sans-serif;
    --cover-presenter-font: 'Arial', 'Helvetica', sans-serif;
    --cover-affiliation-font: 'Arial', 'Helvetica', sans-serif;
    --ppt-title-font: 'Arial', 'Helvetica', sans-serif;
    --content-font: 'Arial', 'Helvetica', sans-serif;
    --column-font: 'Arial', 'Helvetica', sans-serif;
    --row-font: 'Arial', 'Helvetica', sans-serif;
}

/* ===== 슬라이드 기본 스타일 - sample.html 방식 ===== */
.ppt-slide {
    width: 100vw;
    height: 56.25vw; /* 9/16 = 0.5625 */
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.7778 */
    aspect-ratio: 16/9;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* 디버그 모드에서 PPT 영역 표시 */
    border: calc(var(--debug-mode) * 3px) solid rgba(255, 0, 0, 0.8);
}

/* ===== 표지부 스타일 ===== */
.cover-slide {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cover-title {
    position: absolute;
    top: var(--cover-title-area-top);
    left: var(--cover-title-area-left);
    width: var(--cover-title-area-width);
    height: var(--cover-title-area-height);
    font-family: var(--cover-title-font);
    /* font-size는 JavaScript에서 동적으로 설정 */
    font-weight: bold;
    display: flex;
    align-items: var(--cover-title-v-align);
    justify-content: var(--cover-title-h-align);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(255, 0, 0, 0.5);
    background: calc(var(--debug-mode) * rgba(255, 0, 0, 0.1));
}

.cover-presenter {
    position: absolute;
    top: var(--cover-presenter-area-top);
    left: var(--cover-presenter-area-left);
    width: var(--cover-presenter-area-width);
    height: var(--cover-presenter-area-height);
    font-family: var(--cover-presenter-font);
    /* font-size는 JavaScript에서 동적으로 설정 */
    display: flex;
    align-items: var(--cover-presenter-v-align);
    justify-content: var(--cover-presenter-h-align);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(0, 255, 0, 0.5);
    background: calc(var(--debug-mode) * rgba(0, 255, 0, 0.1));
}

.cover-affiliation {
    position: absolute;
    top: var(--cover-affiliation-area-top);
    left: var(--cover-affiliation-area-left);
    width: var(--cover-affiliation-area-width);
    height: var(--cover-affiliation-area-height);
    font-family: var(--cover-affiliation-font);
    /* font-size는 JavaScript에서 동적으로 설정 */
    display: flex;
    align-items: var(--cover-affiliation-v-align);
    justify-content: var(--cover-affiliation-h-align);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(0, 0, 255, 0.5);
    background: calc(var(--debug-mode) * rgba(0, 0, 255, 0.1));
}

/* ===== 내용 슬라이드 스타일 ===== */
.content-slide {
    position: relative;
}

.slide-title {
    position: absolute;
    top: var(--ppt-title-area-top);
    left: var(--ppt-title-area-left);
    width: var(--ppt-title-area-width);
    height: var(--ppt-title-area-height);
    font-family: var(--ppt-title-font);
    /* font-size는 JavaScript에서 동적으로 설정 */
    font-weight: bold;
    display: flex;
    align-items: var(--ppt-title-v-align);
    justify-content: var(--ppt-title-h-align);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(255, 165, 0, 0.5);
    background: calc(var(--debug-mode) * rgba(255, 165, 0, 0.1));
}

/* PPT 제목선 - 그라데이션 스타일 */
.title-line {
    position: absolute;
    top: var(--title-line-top);
    left: var(--title-line-left);
    width: var(--title-line-width);
    height: var(--title-line-height);
    background: linear-gradient(var(--title-line-gradient-direction), 
                                var(--title-line-gradient-start), 
                                var(--title-line-gradient-end));
    border: none;
    border-radius: calc(var(--title-line-height) / 2); /* 둥근 모서리 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 미묘한 그림자 */
    display: calc(var(--title-line-enabled) * block);
}

.slide-body {
    position: absolute;
    top: var(--ppt-content-area-top);
    left: var(--ppt-content-area-left);
    width: var(--ppt-content-area-width);
    height: var(--ppt-content-area-height);
    font-family: var(--content-font);
    font-size: var(--content-font-size);
    line-height: var(--content-line-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: calc(var(--debug-mode) * 2px) solid rgba(128, 0, 128, 0.5);
    background: calc(var(--debug-mode) * rgba(128, 0, 128, 0.1));
}

/* ===== 내용 요소 스타일 ===== */
.content-line {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

.content-line ul {
    list-style-type: var(--content-bullet-style);
    color: var(--content-bullet-color);
    margin: 0;
    padding-left: 20px;
}

.content-line li {
    margin-bottom: calc(var(--ppt-content-area-height) * var(--content-font-size-ratio) * var(--content-line-spacing-ratio) / 100);
}

/* ===== 그리드 레이아웃 ===== */
.content-column {
    font-family: var(--column-font);
    font-size: var(--column-font-size);
    line-height: var(--column-line-height);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(255, 0, 255, 0.5);
    background: calc(var(--debug-mode) * rgba(255, 0, 255, 0.1));
}

.content-row {
    font-family: var(--row-font);
    font-size: var(--row-font-size);
    line-height: var(--row-line-height);
    margin: 0;
    padding: 0;
    border: calc(var(--debug-mode) * 2px) solid rgba(0, 255, 255, 0.5);
    background: calc(var(--debug-mode) * rgba(0, 255, 255, 0.1));
}

/* ===== 이미지 스타일 ===== */
.image-container {
    width: var(--image-container-width);
    height: var(--image-container-height);
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: calc(var(--debug-mode) * 2px) solid rgba(255, 255, 0, 0.5);
    background: calc(var(--debug-mode) * rgba(255, 255, 0, 0.1));
}

.slide-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ===== 통합된 그리드 구조 ===== */
.unified-grid {
    display: grid;
    gap: 0; /* 그리드 셀 간 여백 제거 */
    padding: 0; /* 그리드 외곽 여백 제거 */
    /* JavaScript에서 명시적 크기 설정 - width, height 제거 */
    overflow: hidden;      /* 넘치는 내용 숨김 */
    box-sizing: border-box; /* 테두리 포함 크기 계산 */
    /* 내용 영역 외부 테두리 - 디버그 모드에서만 표시 */
    border: calc(var(--debug-mode) * 2px) solid rgba(128, 0, 128, 0.8);
    outline: none; /* 그리드 자체 테두리 제거 */
}

.content-grid {
    display: grid;
    gap: var(--grid-gap, 1vw);
    padding: var(--grid-padding, 1vw);
}

.grid-row {
    display: grid;
    gap: var(--grid-gap, 1vw);
    margin-bottom: var(--grid-row-gap, 1vw);
}

.grid-cell {
    display: flex;
    flex-direction: column;
    padding: var(--cell-padding, 0.5vw);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--cell-border-radius, 0.25vw);
    backdrop-filter: blur(5px);
    overflow: hidden;      /* 넘치는 내용 숨김 */
    box-sizing: border-box; /* 테두리 포함 크기 계산 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    justify-content: var(--grid-block-v-align, center);
    align-items: var(--grid-block-h-align, center);
    place-content: var(--grid-block-v-align, center);
    /* 내부 테두리 (inset) */
    border: 1px inset rgba(139, 69, 19, 0.2);
    outline: none; /* 외부 테두리 제거 */
}

/* 디버그 모드에서 그리드 셀 테두리 표시 */
.grid-cell.debug-cell {
    border: 2px solid rgba(0, 255, 0, 0.8) !important;
}

.grid-cell .content-line {
    font-family: var(--content-font);
    font-size: var(--content-font-size);
    line-height: var(--content-line-height);
    color: #3e2723;
    margin-bottom: var(--content-margin-bottom, calc(var(--content-font-size) * 0.25));
    padding-left: 0;
    position: relative;
    overflow: hidden;           /* 넘치는 내용 숨김 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    flex-shrink: 0;
    min-height: calc(var(--content-font-size) * var(--content-line-height));
    max-height: calc(var(--content-font-size) * var(--content-line-height) * 3); /* 최대 3줄로 제한 */
    text-align: var(--grid-block-h-align, center);
    /* 내용 내어쓰기 적용 - 첫 줄은 그대로, 두 번째 줄부터 들여쓰기 */
    text-indent: calc(-1 * var(--content-indent, 0vw));
    padding-left: var(--content-indent, 0vw);
    width: 100%;               /* 부모 셀 너비에 맞춤 */
    max-width: 100%;           /* 확장 방지 */
    box-sizing: border-box;    /* 패딩 포함 크기 계산 */
}

/* 블릿 문자 대체만 사용 - ::before 가상 요소 제거 */

/* ===== CSS Grid 기반 통짜 틀 구조 (기존) ===== */
.content-grid-old {
    /* 그리드 전용 계산 변수들 */
    --font-size: var(--content-font-size);
    --line-height: var(--content-line-height);
    --line-spacing: calc(var(--font-size) * 0.25);
    --cell-padding: calc(var(--font-size) * 0.5);
    --grid-gap: calc(var(--font-size) * 0.25);
    
    /* 제목 관련 변수 */
    --title-font-size: var(--slide-title-font-size);
    --title-line-height: 1.2;
    --title-padding: calc(var(--title-font-size) * 0.25) calc(var(--title-font-size) * 0.5);
    --title-border-bottom: calc(var(--title-font-size) * 0.0625);
    --title-total-height: calc(var(--title-font-size) * var(--title-line-height) + var(--title-padding) * 2 + var(--title-border-bottom));
    
    /* 그리드 외부 패딩 */
    --grid-outer-padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 1.0);
    
    display: grid;
    /* JavaScript에서 계산된 크기 사용 */
    height: var(--calculated-grid-height, auto);
    width: var(--calculated-grid-width, auto);
    /* 제목과 그리드 사이 간격 */
    margin-top: calc(var(--font-size) * 0.25);
    /* 그리드 간격 */
    gap: var(--grid-gap) var(--grid-gap);
    /* 패딩 */
    padding: var(--grid-outer-padding);
    box-sizing: border-box;
    overflow: hidden;
    /* 세로 중앙 정렬 */
    align-items: center;
    justify-items: center;
    place-items: center;
}

/* 계산된 그리드 행/열 설정 */
.content-grid {
    grid-template-rows: repeat(var(--calculated-grid-rows, 1), 1fr);
    grid-template-columns: repeat(var(--calculated-grid-cols, 1), 1fr);
}

/* 그리드 셀 스타일 */
.grid-cell {
    display: flex;
    flex-direction: column;
    padding: calc(var(--content-area-height, 70vh) * var(--block-inner-padding-ratio, 2) / 100);
    background: rgba(255, 255, 255, 0.1);
    border-radius: calc(var(--font-size) * 0.25);
    border: calc(var(--font-size) * 0.05) solid rgba(139, 69, 19, 0.2);
    backdrop-filter: blur(5px);
    overflow: hidden;
    box-sizing: border-box;
    /* 그리드 크기에 맞춤 - min-height, min-width 제거 */
    /* 텍스트 줄바꿈 설정 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    /* 세로 중앙 정렬 */
    justify-content: var(--grid-block-v-align, center);
    align-items: var(--grid-block-h-align, center);
    place-content: var(--grid-block-v-align, center);
    
    /* 블록 간격 설정 */
    margin: calc(var(--enable-block-spacing, 0) * var(--block-spacing-size, 0px) / 2);
    
    /* 포스트잇 효과 */
    transition: all 0.3s ease;
}

/* 포스트잇 효과 활성화 시 */
.grid-cell.postit-effect {
    background: rgba(255, 255, 255, var(--postit-background-opacity, 0.05));
    border-radius: var(--postit-border-radius, 8px);
    box-shadow: 
        var(--postit-shadow-offset, 4px) var(--postit-shadow-offset, 4px) 
        var(--postit-shadow-blur, 8px) 
        rgba(0, 0, 0, var(--postit-shadow-opacity, 0.15));
    border: 1px solid rgba(139, 69, 19, 0.1);
}

/* 포스트잇 효과 호버 */
.grid-cell.postit-effect:hover {
    transform: translateY(-2px);
    box-shadow: 
        calc(var(--postit-shadow-offset, 4px) + 2px) calc(var(--postit-shadow-offset, 4px) + 2px) 
        calc(var(--postit-shadow-blur, 8px) + 4px) 
        rgba(0, 0, 0, calc(var(--postit-shadow-opacity, 0.15) + 0.1));
}

/* 그리드 셀 내부 텍스트 - 내용 영역 폰트 크기 사용 */
.grid-cell .content-line {
    font-family: var(--content-font);
    font-size: var(--content-font-size); /* 내용 영역 폰트 크기 사용 */
    line-height: var(--content-line-height); /* 내용 영역 줄간격 사용 */
    color: #3e2723;
    margin-bottom: var(--content-margin-bottom, calc(var(--content-font-size) * 0.25));
    padding: calc(var(--content-area-height, 70vh) * var(--block-text-padding-ratio, 1) / 100);
    position: relative;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    flex-shrink: 0;
    /* 글자 크기에 따른 최소 높이 보장 */
    min-height: calc(var(--content-font-size) * var(--content-line-height));
    text-align: var(--grid-block-h-align, center);
    /* 최대 높이 제한으로 그리드 셀 벗어남 방지 */
    max-height: calc(var(--content-font-size) * var(--content-line-height) * 3);
    /* 내용 내어쓰기 적용 - 첫 줄은 그대로, 두 번째 줄부터 들여쓰기 */
    text-indent: calc(-1 * var(--content-indent, 0vw));
    padding-left: var(--content-indent, 0vw);
}

/* 그리드 셀 내부 불릿 포인트 - 내용 영역 폰트 크기 기준 */
/* 블릿 문자 대체만 사용 - ::before 가상 요소 제거 */

/* 그리드 셀 내부 텍스트 컨테이너 */
.grid-cell .text-container {
    margin: 0;
    padding: calc(var(--content-area-height, 70vh) * var(--block-content-spacing-ratio, 0.6) / 100);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    box-sizing: border-box;
    border: calc(var(--debug-mode) * 2px) solid rgba(0, 0, 255, 0.8);
    background: calc(var(--debug-mode) * rgba(0, 0, 255, 0.1));
}

/* 공백 줄 스타일 - 폰트 크기 기반 높이 적용 */
.grid-cell .empty-line {
    height: 1em; /* 폰트 크기의 세로 폭만큼 공백 */
    line-height: 1;
    margin: 0;
    padding: 0;
    font-size: inherit;
    box-sizing: border-box;
    border: calc(var(--debug-mode) * 1px) solid rgba(255, 0, 0, 0.5);
    background: calc(var(--debug-mode) * rgba(255, 0, 0, 0.1));
}

/* 내비게이션 바 마우스 움직임에 따른 표시/숨김 */
.controls {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.controls.show {
    opacity: 1;
    pointer-events: auto;
}

/* 프리셋 드롭다운 스타일 */
.preset-dropdown, .background-dropdown {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 80px;
}

.preset-dropdown:hover, .background-dropdown:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.preset-dropdown:focus, .background-dropdown:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.preset-dropdown option, .background-dropdown option {
    background: #2d3748;
    color: white;
    padding: 8px;
}

/* 슬라이드 카운터 스타일 */
.slide-counter {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== 초기 업로드 화면 스타일 ===== */
.upload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease-in-out;
}

.upload-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.upload-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 4rem 3rem;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(255, 154, 158, 0.3);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    max-width: 800px;
    width: 85%;
    min-width: 600px;
}

.upload-title {
    font-size: 3rem;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 1.5rem 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffa8a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

.upload-description {
    font-size: 1.3rem;
    color: #4a5568;
    margin: 0 0 2.5rem 0;
    line-height: 1.8;
    font-weight: 500;
}

.file-input {
    display: none;
}

.btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    text-transform: none;
    letter-spacing: 0.5px;
    min-width: 60px;
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    background: linear-gradient(135deg, #5a67d8, #667eea);
}

.btn:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 그리드 셀 내부 이미지 컨테이너 */
.grid-cell .image-container {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: calc(var(--content-area-height, 70vh) * var(--block-image-padding-ratio, 0.8) / 100);
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
}

.grid-cell .image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 그리드 기반 이미지 */
.slide-image {
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    border: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-position: center;
}

/* ===== 슬라이드 콘텐츠 ===== */
.slide-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 768px) {
    :root {
        --content-font-size-ratio: 2.5%;
        --column-font-size-ratio: 2%;
        --row-font-size-ratio: 2.3%;
    }
}

@media (max-width: 480px) {
    :root {
        --content-font-size-ratio: 2%;
        --column-font-size-ratio: 1.8%;
        --row-font-size-ratio: 2%;
    }
}

/* ===== 프리셋 선택기 스타일 ===== */
.preset-selector {
    display: flex;
    align-items: center;
}

.preset-dropdown {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.preset-dropdown:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.5);
}

.preset-dropdown:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}