/* 기본 레이아웃: 화면 꽉 차게 */
body, html { 
    margin: 0; padding: 0; width: 100%; 
    height: 100%; height: 100dvh; 
    overflow: hidden; 
    font-family: 'Pretendard', sans-serif; 
    background: #000; 
}

#avatar-container { 
    position: relative;
    width: 100%; 
    height: 100%; 
    cursor: grab;
    z-index: 10;
    filter: saturate(1.05);
    touch-action: none; /* 브라우저 기본 제스처 방해 금지 */
    overscroll-behavior: none;
}

.touch-label {
    position: absolute;
    pointer-events: none;
    z-index: 5000;
    background: rgba(0, 229, 255, 0.85);
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    transition: opacity 0.3s;
}
.touch-label.hidden { opacity: 0; visibility: hidden; }

.overlay-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 2500; background: #050510; color: white;
    transition: all 0.5s ease;
}

/* 모든 요소 공통 숨김 처리 */
.hidden { display: none !important; }

/* 화면 전환용 숨김 처리 (애니메이션 유지) */
.overlay-screen.hidden { display: flex !important; opacity: 0; pointer-events: none; visibility: hidden; }

#step-1.overlay-screen { 
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('/static/image/home.webp') no-repeat center center; 
    background-size: cover; 
}
#step-2.overlay-screen,
#step-trial.overlay-screen { 
    background: transparent; 
    justify-content: flex-end; padding-bottom: 60px; 
}

.title-main { font-size: 2.5rem; font-weight: bold; margin-bottom: 2rem; letter-spacing: 2px; }
.start-btn {
    padding: 15px 40px; font-size: 1.2rem; border-radius: 30px;
    border: none; background: #4caf50; color: white; cursor: pointer;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

.slider-wrapper {
    display: flex; overflow-x: auto; width: 100%; gap: 20px;
    padding: 40px 0; scroll-snap-type: x mandatory;
    -ms-overflow-style: none; scrollbar-width: none;
}
.slider-wrapper::before, .slider-wrapper::after { content: ''; flex: 0 0 calc(50% - 60px); }
.slider-wrapper::-webkit-scrollbar { display: none; }

.avatar-card {
    flex: 0 0 100px; height: 100px; scroll-snap-align: center;
    background: rgba(255,255,255,0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3); flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s, background 0.3s; 
    cursor: pointer; backdrop-filter: blur(10px); z-index: 1;
    font-size: 1.1rem; font-weight: bold; color: rgba(255,255,255,0.5); text-align: center;
}
.avatar-card.selected { border-color: #00e5ff; background: rgba(0, 229, 255, 0.3); color: #fff; transform: scale(1.3); box-shadow: 0 0 30px rgba(0, 229, 255, 0.6); z-index: 2; }
.avatar-card .card-specialty { font-size: 0.55rem; font-weight: normal; margin-top: 4px; opacity: 0.8; }

.confirm-btn {
    margin-top: 20px; padding: 12px 60px; border-radius: 25px;
    background: #00e5ff; color: #000; border: none; font-size: 1.1rem; font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

#step-tarot.overlay-screen { 
    background: rgba(10, 10, 26, 0.8);
    backdrop-filter: blur(4px);
    padding: 20px; justify-content: center; gap: 20px;
}
.tarot-instruction { font-size: 1.1rem; color: #00e5ff; margin-bottom: 10px; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,0.8); }

.tarot-spread-container {
    width: 100vw; height: 280px; position: relative;
    display: flex; justify-content: center; align-items: center;
    perspective: 1200px;
}
.tarot-card-ui {
    position: absolute; width: 85px; height: 140px; cursor: pointer;
    transition: transform 0.4s ease, z-index 0.3s; transform-origin: center 320px;
    will-change: transform; perspective: 1000px;
}
.card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d;
}
.tarot-card-ui.flipped .card-inner { transform: rotateY(180deg); }
.card-back, .card-front {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.4); border: 1px solid rgba(0, 229, 255, 0.3);
}
.card-back { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); display: flex; align-items: center; justify-content: center; }
.card-front { background-color: #fff; background-size: cover; background-position: center; transform: rotateY(180deg); border: 2px solid #00e5ff; }
.tarot-card-ui .selection-order {
    position: absolute; top: -10px; right: -10px; width: 25px; height: 25px;
    background: #00e5ff; color: #000; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: bold;
}

.tarot-result-card-large {
    width: 31vw; max-width: 140px; aspect-ratio: 1 / 1.6; border-radius: 10px;
    object-fit: cover; border: 2px solid #00e5ff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    animation: cardAppear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    flex-shrink: 0; /* 모든 카드의 크기를 균일하게 유지 */
}
@keyframes cardAppear { from { transform: scale(0.5) translateY(50px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

.recommendations-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    pointer-events: auto !important;
    position: relative;
    z-index: 2100;
}

.rec-btn {
    background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 229, 255, 0.3);
    color: white; padding: 6px 14px; border-radius: 15px; font-size: 0.8rem; cursor: pointer;
    backdrop-filter: blur(5px); transition: all 0.2s;
    position: relative;
    pointer-events: auto !important; 
}
.rec-btn:hover { background: rgba(0, 0, 0, 0.8); border-color: #00e5ff; }

#chat-messages { 
    position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%);
    width: 100%; max-height: 40dvh; overflow-y: auto; display: flex; flex-direction: column;
    gap: 10px; padding: 40px 15px 5px 15px; box-sizing: border-box; pointer-events: none; z-index: 2000;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
}
#chat-messages::-webkit-scrollbar { display: none; }
#chat-messages.hidden { display: none; }

.msg { 
    padding: 10px 16px; border-radius: 18px; max-width: 85%;
    line-height: 1.5; font-size: 0.95rem; pointer-events: auto;
    word-break: break-word; box-shadow: 0 4px 15px rgba(0,0,0,0.5); color: white;
}
.user { align-self: flex-end; background: rgba(13, 71, 161, 0.85); border-bottom-right-radius: 2px; }
.ava { align-self: flex-start; background: rgba(0, 0, 0, 0.6); border-bottom-left-radius: 2px; border: 1px solid rgba(0, 229, 255, 0.3); }

.chat-card-img { display: block; width: 100px; margin: 10px 0; border-radius: 6px; border: 2px solid #00e5ff; }

#input-area { 
    position: absolute; bottom: 0; width: 100%;
    padding: 15px 15px calc(15px + env(safe-area-inset-bottom));
    display: flex; gap: 10px; align-items: center;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 30%, transparent); box-sizing: border-box; z-index: 1600;
}
#input-area.hidden { display: none; }

.back-btn {
    position: absolute; top: 20px; left: 20px; z-index: 110;
    background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.3);
    color: white; width: 45px; height: 45px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

input { flex: 1; padding: 12px 18px; border: none; border-radius: 25px; background: rgba(255, 255, 255, 0.95); outline: none; font-size: 1rem; }
#send-btn { padding: 10px 18px; background: #4caf50; color: white; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; }
#mic-btn { 
    background: #2196F3; font-size: 1.2rem; border-radius: 50%; width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center; border: none; color: white; cursor: pointer;
}
#mic-btn.active { background: #f44336; animation: pulse 1.2s infinite; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* 동작 선택 메뉴 스크롤 및 리스트 스타일 */
#action-menu {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: 70vh; /* 화면 높이의 70%까지만 차지 */
    overflow-y: auto; /* 내용이 많으면 스크롤 생성 */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1500;
    pointer-events: auto; /* 스크롤 및 클릭이 가능하도록 설정 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.5) transparent;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}

#action-menu::-webkit-scrollbar { width: 4px; }
#action-menu::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.5); border-radius: 4px; }

.action-item {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 파일명이 너무 길면 ... 처리 */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}

.action-item:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    transform: translateX(-5px); /* 호버 시 살짝 왼쪽으로 이동하는 시각적 효과 */
}

/* 로그인 화면 스타일 */
.login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 80%;
    max-width: 300px;
}
.login-btn {
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
}
.login-btn:active { opacity: 0.8; }
.login-btn.kakao { background: #FEE500; color: #3C1E1E; }
.login-btn.naver { background: #03C75A; color: #fff; }
.login-btn.google { background: #fff; color: #757575; border: 1px solid #ddd; }