/* style.css (Visual Enhanced Version) */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@300;400;700&family=Orbit&display=swap');

body {
    background-color: #0a0a0c; /* 더 깊은 어둠 */
    background-image: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a0c 100%); /* 은은한 배경 조명 */
    color: #e0e0e0;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.lab-container {
    text-align: center;
    width: 100%;
    max-width: 420px; /* 폭을 살짝 줄여 집중도 향상 */
    padding: 30px 20px;
}

h1 {
    /* 추천 폰트 1: Gowun Batang (클래식한 마법서 느낌) */
    font-family: 'Gowun Batang', serif;
    font-weight: 700; /* 'bold' 대신 수치로 지정 */
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    /* --- 다른 폰트 예시 ---
       font-family: 'Orbit', sans-serif;
       font-family: 'Nanum Pen Script', cursive; */
}

/* 🧪 물약 쉐이더 효과 (대폭 개선) */
.flask-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 50px auto;
    /* 유리 재질감 강화 */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.3); /* 얇고 세련된 테두리 */
    border-radius: 50%;
    overflow: hidden;
    /* 입체적인 유리 반사광 및 그림자 */
    box-shadow: 
        inset 0 0 20px rgba(255,255,255,0.1), /* 내부 반사 */
        inset -5px -5px 15px rgba(0,0,0,0.5), /* 내부 그림자 */
        0 0 20px rgba(0,0,0,0.2); /* 외부 그림자 */
    z-index: 1;
}

/* [수정] 솥 젓는 중 빛나는 효과 (더 화려하게) */
.flask-container.brewing::before,
.flask-container.brewing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%; /* 약병보다 크게 */
    height: 180%;
    border-radius: 50%;
    z-index: 0; /* 액체보다 뒤에 위치 */
    opacity: 0;
    /* [수정] 소용돌이 빛줄기 효과 */
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255, 255, 224, 0.1) 5%,
        rgba(255, 255, 224, 0.6) 10%, /* 더 밝고 선명하게 */
        transparent 15%,
        transparent 180deg, /* 반대편에도 하나 더 */
        rgba(255, 255, 224, 0.1) 185%,
        rgba(255, 255, 224, 0.6) 190%,
        transparent 195%
    );
}

.flask-container.brewing::before {
    animation: brewing-glow 2.5s linear infinite; /* [수정] 더 빠르고 일정하게 */
}

.flask-container.brewing::after {
    /* 반대방향, 시간차를 주어 교차하는 효과 */
    animation: brewing-glow 3.5s linear infinite reverse; /* [수정] 다른 속도 */
}

/* 유리병 하이라이트 (반짝임) 추가 */
.flask-container::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 30%;
    height: 20%;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    z-index: 13; /* [추가] 물약 효과들보다 위에 오도록 설정 */
    filter: blur(5px);
}

.liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* JS로 제어 */
    background-color: var(--potion-color, #333);
    transition: height 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0.9;
    z-index: 9; /* [수정] 가장 뒤에 위치하도록 z-index 조정 */
}

/* [수정] wave.png를 이용한 물결 효과 (앞쪽 밝은 물결) */
.liquid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 웨이브 높이 조정 */
    background-color: var(--potion-color, #333); /* 물약 색상 적용 */
    /* wave.png를 마스크로 사용 */
    mask-image: url('../images/wave.png');
    mask-size: 256px 50px;
    mask-repeat: repeat-x;
    -webkit-mask-image: url('../images/wave.png'); /* Safari 호환성 */
    -webkit-mask-size: 256px 50px;
    -webkit-mask-repeat: repeat-x;
    transform: translateY(-95%);
    animation: wave_horizontal 2.5s linear infinite;
    z-index: 11; /* [수정] 가장 앞에 위치하도록 z-index 조정 */
}

/* [수정] 겹쳐지는 뒷쪽 어두운 물결 효과 */
.liquid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 웨이브 높이 조정 */
    background-color: var(--potion-color, #333); /* 물약 색상 적용 */
    /* wave.png를 마스크로 사용 */
    mask-image: url('../images/wave.png');
    mask-size: 256px 50px;
    mask-repeat: repeat-x;
    -webkit-mask-image: url('../images/wave.png'); /* Safari 호환성 */
    -webkit-mask-size: 256px 50px;
    -webkit-mask-repeat: repeat-x;
    filter: brightness(0.7); /* [추가] 뒷쪽 물결을 살짝 어둡게 */
    transform: translateY(-100%); /* 살짝 엇갈리게 배치 */
    animation: wave_horizontal_reverse 3.5s linear infinite;
    z-index: 10; /* [수정] 중간에 위치하도록 z-index 조정 */
}

/* [추가] 반짝이는 파티클 효과 */
#sparklesContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 12; /* [수정] 물약 효과들보다 위에 오도록 설정 */
}

/* [추가] 솥 젓는 중 소용돌이 파티클 */
.swirl-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #ffd700;
    animation: swirl-in infinite;
    opacity: 0;
    /* JS에서 변수 설정 */
    width: var(--swirl-size);
    height: var(--swirl-size);
    animation-duration: var(--swirl-duration);
    animation-delay: var(--swirl-delay);
}

/* [추가] 결과 나올 때 터지는 빛 효과 */
#flashEffect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 100; /* 최상단에 표시 */
}
#flashEffect.active {
    animation: flash-burst 0.4s ease-out forwards;
}

.sparkle {
    position: absolute;
    bottom: 5%;
    left: 50%;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff, 0 0 12px #fff, 0 0 16px var(--potion-color, #fff);
    animation: sparkle-up infinite;
    opacity: 0;
    /* JS에서 변수 설정 */
    width: var(--sparkle-size);
    height: var(--sparkle-size);
    animation-duration: var(--sparkle-duration);
    animation-delay: var(--sparkle-delay);
    transform: translateX(-50%);
}

/* [추가] 작은 아이콘용 물결 애니메이션 키프레임 */
@keyframes wave_horizontal_dot {
    from { mask-position: 0 0; }
    to { mask-position: -48px 0; } /* 마스크 이미지 가로 크기만큼 이동 */
}

@keyframes sparkle-up {
    0% {
        transform: translateY(0) translateX(var(--sparkle-x-start));
        opacity: 0;
    }
    20% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-120px) translateX(var(--sparkle-x-end)); /* 이 값을 조정 */
        opacity: 0;
    }
}

/* [추가] 솥 젓는 중 소용돌이 애니메이션 */
@keyframes swirl-in {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* [추가] 빛 터지는 효과 애니메이션 */
@keyframes flash-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        box-shadow: 0 0 20px 10px #fff, 0 0 40px 20px #ffd700, 0 0 80px 40px rgba(255, 215, 0, 0.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
        box-shadow: 0 0 30px 15px #fff, 0 0 60px 30px #ffd700, 0 0 120px 60px rgba(255, 215, 0, 0);
    }
}

/* [복원] wave.png용 수평 이동 애니메이션 */
@keyframes wave_horizontal {
    from { mask-position: 0 0; }
    to { mask-position: -256px 0; } /* 마스크 이미지 가로 크기만큼 이동 */
}

/* [추가] 반대 방향 물결 애니메이션 */
@keyframes wave_horizontal_reverse {
    from { mask-position: -256px 0; }
    to { mask-position: 0 0; }
}

/* [수정] 솥 젓는 중 빛나는 효과 애니메이션 */
@keyframes brewing-glow {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}
/* 입력 UI */
.input-area {
    background: rgba(30, 30, 30, 0.8); /* 반투명 배경 */
    backdrop-filter: blur(10px); /* 배경 블러 효과 */
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%; /* 부모 영역 꽉 채우기 */
    box-sizing: border-box; /* 패딩 포함 계산 */
}

input { 
    flex: 1; /* 공간 균등 분할 */
    /* ▼▼▼ [핵심 수정] 튀어나감 방지 코드 ▼▼▼ */
    min-width: 0;        /* Flexbox 자식 요소가 부모를 뚫고 나가는 것 방지 */
    width: 100%;         /* 가로 꽉 채우기 */
    box-sizing: border-box; /* 패딩(15px)을 전체 너비에 포함시킴 */
    /* ▲▲▲ -------------------------------- ▲▲▲ */
    
    padding: 15px; 
    border-radius: 10px; 
    border: 1px solid #444; 
    background: #252525; 
    color: white; 
    text-align: center;
    font-size: 14px;
    transition: border-color 0.3s;
}

input:focus { outline: none; border-color: #8e7dff; }
input::placeholder { color: #666; }

button {
    width: 100%; 
    padding: 18px; 
    font-size: 16px; 
    font-weight: bold;
    /* 더 신비로운 그라데이션 */
    background: linear-gradient(135deg, #6c5ce7, #00d2d3); 
    color: white; 
    border: none; 
    border-radius: 12px; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
    transition: transform 0.1s, box-shadow 0.2s;
}
button:hover { box-shadow: 0 6px 20px rgba(108, 92, 231, 0.6); }
button:active { transform: scale(0.98); }
button:disabled { 
    background: #555; 
    box-shadow: none;
    color: #aaa;
    cursor: not-allowed; 
}

.btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #00d2d3); 
}

.btn-secondary {
    background: linear-gradient(135deg, #8e57a3, #8e57a3); 
    margin-top: 10px; /* 조합하기 버튼과 간격 */
    cursor: pointer; 
}

/* 결과 카드 */
.result-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 16px;
    margin: 25px auto 0; /* 위 여백, 좌우 자동(중앙), 아래 0 */
    display: none;
    border: 1px solid rgba(255,255,255,0.1);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* 더 부드러운 등장 */
    text-align: left;
    position: relative; /* 닫기 버튼 위치 기준 */
}

/* [추가] 결과 타입 메시지 스타일 */
.result-type-message {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin: -10px 0 20px 0; /* 위쪽 여백 줄이고 아래쪽 확보 */
    padding: 10px;
    border-radius: 8px;
}

.result-type-message.new {
    color: #ffd700;
    background-color: rgba(255, 215, 0, 0.1);
}

.result-type-message.load {
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-close-result {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.btn-close-result:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.info-row { margin: 12px 0; line-height: 1.6; }
.label { font-size: 12px; color: #999; display: block; margin-bottom: 4px; font-weight: bold;}
.val { font-size: 15px; color: #eee; }
.val.name { 
    font-size: 22px; 
    font-weight: bold; 
    color: transparent;
    background: linear-gradient(to right, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 20px; 
    display: block; 
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}
.val.side { color: #ff6b81; }

/* [추가] 결과 카드 하단 하우스 배너 크기 및 정렬 조정 */
#resultAdContainer.house-banner-container {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* [추가] 계속 이어서 만들기 텍스트 */
.continue-brewing-text {
    margin-top: 35px;
    color: #aaa;
    font-size: 14px;
    /* text-decoration: underline; */
    /* cursor: pointer; */
    transition: color 0.2s;
}
/* .continue-brewing-text:hover {
    color: #fff;
} */

.result-materials {
    text-align: center;
    color: #bbb;
    font-size: 14px;
    margin-top: -15px; /* 이름과 가깝게 */
    margin-bottom: 25px;
}
.meta { 
    font-size: 11px; 
    color: #777; 
    margin-top: 20px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 15px;
    text-align: right;
    line-height: 1.6;
}
.meta span { color: #aaa; font-weight: bold; }

/* [추가] 공통 유틸리티 클래스 */
.hidden {
    display: none !important;
}

/* [추가] 토스트 메시지 스타일 (aniyo/eeitso와 동일하게) */
.toast {
    position: fixed;
    top: 20px; /* 화면 하단에서의 거리. top으로 바꾸면 상단에 표시됩니다. */
    left: 50%;    /* 화면 왼쪽에서의 거리. 중앙 정렬을 위해 사용됩니다. */
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1000;
}
.toast.show {
    opacity: 1;
}

/* [추가] 내가 만든 물약 리스트 스타일 */
.my-potions-list {
    margin-top: 30px;
    text-align: left;
}

.my-potion-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.my-potion-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.my-potion-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-basis: 100%;
    margin-bottom: 5px;
}

.my-potion-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    /* [추가] 물결 효과를 위한 스타일 */
    position: relative; /* 자식요소 위치 기준 */
    overflow: hidden; /* 내부 컨텐츠가 동그라미를 벗어나지 않도록 */
    background-color: #fff; /* 색상은 ::before에서 처리 */
}

.my-potion-color-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--potion-color); /* JS에서 전달된 색상 변수 사용 */
    
    /* wave.png를 마스크로 사용해 물결 모양 만들기 */
    mask-image: url('../images/wave.png');
    -webkit-mask-image: url('../images/wave.png');
    mask-size: 48px 16px; /* 원 크기에 맞게 마스크 크기 조정 */
    -webkit-mask-size: 48px 16px;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    
    /* 애니메이션 적용 */
    animation: wave_horizontal_dot 2.5s linear infinite;
}

.my-potion-name {
    font-size: 20px;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(to right, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    background-clip: text;
}

.my-potion-materials {
    font-size: 14px;
    color: #bbb;
}

.my-potion-meta {
    font-size: 11px;
    color: #777;
    flex-basis: 100%;
    margin-top: 5px;
}

.my-potion-meta .discovery-badge {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
    vertical-align: middle;
}
.my-potion-meta .discovery-badge.new {
    color: #ffd700;
    background-color: rgba(255, 215, 0, 0.15);
}
.my-potion-meta .discovery-badge.load {
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.1);
}

.toggle-details-btn {
    background: none;
    border: 1px solid #6c5ce7;
    color: #6c5ce7;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}
.toggle-details-btn:hover {
    background: #6c5ce7;
    color: #fff;
}

.my-potion-details {
    border-top: 1px dashed rgba(255,255,255,0.1);
    padding-top: 15px;
    margin-top: 15px;
}

.my-potion-details .info-row {
    margin: 8px 0;
}

.my-potions-list .empty-state, .loading-spinner {
    text-align: center;
    color: #888;
    padding: 20px;
}

/* [추가] 슬라이드 오버 스타일 */
.slide-over {
    position: fixed;
    top: 0;
    right: -100%; /* 시작 위치: 화면 오른쪽 밖 */
    width: 100%;
    max-width: 420px; /* 컨테이너와 동일한 너비 */
    height: 100%;
    background: #1a1a2e; /* 어두운 배경 */
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.slide-over.open {
    right: 0; /* 열릴 때 */
}

.slide-over-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.slide-over-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.slide-over-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.slide-over-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

.btn-close-slide {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    transition: all 0.2s;
}

.btn-close-slide:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    transform: scale(1.1);
}

.slide-over-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.slide-over-search {
    display: flex;
    padding: 10px 20px;
    gap: 10px;
    background-color: #161625; /* 헤더보다 살짝 어둡게 */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.slide-over-search input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 8px;
    background: #252525;
    color: white;
}
.slide-over-search button {
    padding: 10px 15px;
    width: auto; /* 버튼 너비 자동 조절 */
    font-size: 14px;
    box-shadow: none;
}
.my-potions-list {
    margin-top: 0; /* 슬라이드 오버에서는 상단 마진 제거 */
}

/* [추가] 슬라이드 오버 하단 배너 영역 */
.slide-over-footer {
    padding: 5px;
    background-color: #111; /* 어두운 배경 */
    border-top: 1px solid #333;
    flex-shrink: 0; /* 푸터 영역이 줄어들지 않도록 고정 */
    display: flex; /* 내부 광고를 중앙에 배치하기 위함 */
    justify-content: center;
    align-items: center;
}

/* [추가] 광고 섹션 스타일 */
.ad-section {
    width: 100%;
    text-align: center;
}