/* 찬양 프레젠테이션 - 미니멀 디자인 */

/* CSS 변수 */
:root {
    --color-gray: #666;
    --color-accent: #FF6B35;
}

/* Presentation 폰트 */
@font-face {
    font-family: 'Presentation';
    src: url('./fonts/Freesentation-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Presentation', sans-serif;
    background: #fff;
}

.hymn-picker {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hymn-picker label {
    font-size: 14px;
    color: var(--color-gray);
}

.hymn-picker input,
.hymn-picker button {
    font: inherit;
    border-radius: 999px;
}

.hymn-picker input {
    width: 88px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
}

.hymn-picker button {
    border: none;
    padding: 8px 14px;
    background: #000;
    color: #fff;
    cursor: pointer;
}

.hymn-picker input:disabled,
.hymn-picker button:disabled {
    opacity: 0.45;
    cursor: default;
}

.hymn-picker-title {
    max-width: 280px;
    font-size: 14px;
    color: var(--color-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-status {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 20;
    max-width: min(640px, calc(100vw - 40px));
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.app-status.info {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.app-status.warning {
    border: 1px solid rgba(255, 107, 53, 0.35);
}

/* 프레젠테이션 컨테이너 */
.presentation {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* 슬라이드 */
.slide {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 8% 5% 5% 5%;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
}

.slide * {
    user-select: none;
    -webkit-user-select: none;
}

.slide.active {
    display: flex;
}

/* 배경 이미지 옵션 (사용 시) */
.slide.with-background {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide.with-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, var(--bg-overlay-opacity, 0.7));
}

.slide.with-background .slide-content {
    position: relative;
    z-index: 1;
}

/* 슬라이드 콘텐츠 */
.slide-content {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

/* 제목 */
.slide-title {
    font-size: calc(32px * var(--present-scale, 1));
    color: var(--color-gray);
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.slide-section-badge {
    display: inline-flex;
    align-items: center;
    padding: calc(4px * var(--present-scale, 1)) calc(12px * var(--present-scale, 1));
    border-radius: 999px;
    background: rgba(140, 75, 47, 0.12);
    color: var(--color-accent);
    font-size: calc(18px * var(--present-scale, 1));
    line-height: 1;
    user-select: none;
}

.slide-section-badge .separator,
.slide-section-badge .total {
    color: var(--color-gray);
    margin-left: 2px;
}

.slide-section-badge .total {
    margin-left: 0;
}

/* 가사 영역(lyrics-content) 기준으로 좌측에 배치
 * 첫 가사 줄의 위쪽(악보 영역 바닥 근처)에 위치 */
.slide-content {
    position: relative;
}

.lyrics-content {
    position: relative;
}

.slide-verse-badge {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    padding: calc(4px * var(--present-scale, 1)) calc(12px * var(--present-scale, 1));
    border-radius: 999px;
    background: rgba(140, 75, 47, 0.12);
    color: var(--color-accent);
    font-size: calc(20px * var(--present-scale, 1));
    line-height: 1;
    user-select: none;
    z-index: 2;
    white-space: nowrap;
    visibility: hidden; /* JS가 위치 계산 후 표시 */
}

.slide-verse-badge.is-positioned {
    visibility: visible;
}

/* 가사 영역 */
.lyrics-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 한글 가사 */
.lyrics-korean {
    font-size: calc(48px * var(--present-scale, 1));
    color: #000;
    line-height: 1.6;
    letter-spacing: -0.02em;
}


/* 영문 가사 (한글의 70%) */
.lyrics-english {
    font-size: calc(30px * var(--present-scale, 1));
    color: var(--color-gray);
    line-height: 1.5;
    letter-spacing: 0;
    margin-top: 50px;
}

/* 절/후렴 표시 (상단 중앙) */
.verse-badge {
    display: inline-block;
    font-size: calc(18px * var(--present-scale, 1));
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    color: var(--color-gray);
}

.verse-badge .current {
    color: var(--color-accent);
}

/* 타이틀 슬라이드 */
.slide.title-slide .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hymn-number {
    font-size: calc(120px * var(--present-scale, 1));
    color: #000;
    font-weight: 400;
    margin-bottom: 30px;
}

.hymn-title {
    font-size: calc(56px * var(--present-scale, 1));
    color: #000;
    letter-spacing: -0.02em;
}

.hymn-subtitle {
    font-size: calc(28px * var(--present-scale, 1));
    color: var(--color-gray);
    margin-top: 20px;
}

.hymn-meta {
    font-size: calc(20px * var(--present-scale, 1));
    color: var(--color-gray);
    margin-top: 40px;
}

/* 후렴 표시 */
.chorus-badge {
    display: inline-block;
    font-size: calc(18px * var(--present-scale, 1));
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    color: var(--color-gray);
}

.chorus-badge .current {
    color: var(--color-accent);
}

/* 강조 (하이라이트) */
.highlight {
    background: var(--color-accent);
    color: #fff;
    padding: 2px 8px;
}

@media (max-width: 900px) {
    .hymn-picker {
        left: 12px;
        right: 12px;
        top: 12px;
        border-radius: 20px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .hymn-picker-title {
        max-width: 100%;
    }

    .app-status {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}