@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream1.otf') format('opentype'); font-weight:100; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream2.otf') format('opentype'); font-weight:200; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream3.otf') format('opentype'); font-weight:300; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream4.otf') format('opentype'); font-weight:400; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream5.otf') format('opentype'); font-weight:500; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream6.otf') format('opentype'); font-weight:600; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream7.otf') format('opentype'); font-weight:700; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream8.otf') format('opentype'); font-weight:800; }
@font-face { font-family:'S-CoreDream'; src:url('../fonts/SCDream9.otf') format('opentype'); font-weight:900; }

:root{
    /* ✅ 세로(vh) 기준 스케일링 */

    /* 포스터 폭: 세로 높이에 비례해서 결정 (A4 느낌) */
    --paper-w: clamp(280px, 42vh, 460px);

    /* 타이포: 세로 높이에만 반응 */
    --t-xs: clamp(10px, 1.6vh, 12px);
    --t-sm: clamp(11px, 1.85vh, 13px);
    --t-md: clamp(13px, 2.1vh, 15px);

    /* 간격: 세로 높이에만 반응 */
    --gap-1: clamp(10px, 2.0vh, 16px);
    --gap-2: clamp(18px, 3.0vh, 28px);
    --gap-3: clamp(28px, 4.6vh, 42px);

    /* 상단바 높이도 세로 기준 */
    --topbar-h: clamp(34px, 5.0vh, 46px);
}

html, body{
    min-height: 510px;
}

body{
    margin:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top: calc(var(--topbar-h) + var(--gap-2)); /* 상단바 + 여유 */
    font-family:'S-CoreDream', serif;
    overflow-y: auto;
}

/* 무대 */
.poster-stage{
    width:100%;
    display:flex;
    justify-content:center;
}

/* 하얀 종이 */
.poster-paper{
    width: var(--paper-w);
    background:#fff;
    text-align:center;
}

/* 상단 문구 */
.poster-top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--topbar-h);
    background: #ededed;
    color: #666;
    font-size: var(--t-xs);
    letter-spacing: .18em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-weight: 300;
    cursor:pointer;
}

.poster-top:hover{
    color:#000;
}

/* 로고 */
.poster-title{ margin-bottom: var(--gap-3); }

.title-img{
    display:block;
    margin:0 auto;
    width: min(70%, 320px);  /* 너무 커지지 않게 상한 */
    height:auto;
}

/* 영상 영역 */
.poster-media{
    width: 100%;
    aspect-ratio: 3 / 4;     /* 포스터 사진 프레임 비율 유지 */
    margin-bottom: var(--gap-3);
    display:flex;
    align-items:center;
    justify-content:center;
}

.poster-media video{
    width: 100%;
    height: 100%;
    object-fit: contain;      /* 원본 유지하면서 프레임에 맞춤 */
    background: transparent;
    display:block;
}

/* 하단 */
.poster-bottom{
    font-size: var(--t-xs);
    letter-spacing:.15em;
    color:#999;
    cursor:pointer;
}

.poster-bottom:hover{
    color:#000;
}

/* 소리 버튼 */
.sound-btn{
    position:absolute;
    bottom:30px;
    right:30px;

    width:48px;
    height:48px;
    border-radius:50%;
    background:#CCCCCC;

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

    color:#fff;
    font-size:20px;
    cursor:pointer;

    transition:.2s;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.sound-btn:hover{
    background:#444;
    transform:translateY(-2px);
}

/* 엔터 버튼 */
#enterCultureBalloon{
    position:absolute;
    top:20px;
    left:20px;
    width:35px;
    height:35px;
    background:red;
    border-radius:6px;
    cursor:pointer;
    box-shadow:0 0 8px rgba(0,0,0,.3);
    z-index: 2000;
}