body {
    margin: 0;
    overflow: hidden;
    background-color: #050505;
    font-family: "Helvetica Neue Thin", "Arial Thin", "Roboto Thin", sans-serif;
    /* 모바일 터치 시 드래그로 인한 새로고침/바운스 방지 */
    touch-action: none; 
}

#bg-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

#character-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 1000px;
    pointer-events: none;
    padding-bottom: 0px; 
}

.character-img {
    height: 85vh; /* 기본 데스크탑 높이 */
    width: auto;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 95%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 95%);
    filter: drop-shadow(0 0 20px rgba(255, 105, 180, 0.4));
}

.character-img:not([src]), .character-img[src=""] {
    display: block; width: 300px; height: 500px;
    background: rgba(255, 105, 180, 0.1);
    border: 2px dashed #ff69b4;
    color: #ff69b4;
    display: flex; align-items: center; justify-content: center;
}

#clock-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: auto;
    mix-blend-mode: screen; 
}

#ui {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    color: #ff69b4;
    font-family: 'Playfair Display', 'Cinzel', 'Baskerville', 'Garamond', serif;
    font-weight: 400;
    font-style: italic;
    pointer-events: none;
    opacity: 0.9;
    text-shadow: 0 0 15px rgba(255, 20, 147, 0.8), 0 0 30px rgba(255, 105, 180, 0.4);
    letter-spacing: 3px;
    z-index: 4;
    font-size: 1.4rem;
    text-transform: uppercase;
}

/* === 모바일 최적화 미디어 쿼리 === */
@media (max-width: 768px) {
    /* 모바일에서는 캐릭터 크기를 줄임 */
    .character-img {
        height: 65vh; 
    }
    
    /* 텍스트 크기 조절 및 위치 상향 */
    #ui {
        bottom: 80px; /* 시계와 겹치지 않게 */
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
}