/* =========================================
   글로벌 폰트 및 리셋
   ========================================= */
/* 1. 영문(Inter), 국문(Pretendard), 중문(Noto Sans SC) 폰트 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

/* 🚨 바로 이 부분을 전체 교체하세요! (모든 페이지의 색상이 한 번에 바뀝니다) */
:root {
    --font-global: 'Inter', 'Pretendard', sans-serif;
    
    /* 1. 🚨 메인 배경 (더 핑크핑크하고 부드러운 로즈 크림 톤) */
    --bg-color: #F9F2F2; /* 아주 연한 로즈 파우더 베이지 - 전체 분위기를 핑크하게 만듦 */
    --text-main: #3A2D2D; /* 핑크와 잘 어울리는 따뜻한 딥 브라운 차콜 */
    --text-light: #967E7E; /* 로즈 그레이 톤의 보조 텍스트 */
    
    /* 2. 🚨 시그니처 포인트 컬러 (세련된 모브 핑크 / 로즈 골드) */
    --color-primary: #D4A5A5; /* 메인 핑크 포인트 - 버튼, 진행바, 활성화 아이콘 */
    --color-primary-dark: #B88585;
    --color-border: #E8D5D5; /* 핑크빛이 감도는 연한 테두리 */
    
    /* 3. 🎨 3D 카드 배경 오리지널 그라데이션 컬러 (원복 완료!) */
    --pure-grad: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    --bloom-grad: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --earth-grad: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
    --pop-grad: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --oriental-grad: linear-gradient(135deg, #434343 0%, #000000 100%);
    
    --nav-height: 70px;
    --header-height: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { display: none; }

html, body {
    /* 🚨 주소창 버그 해결 1단계: 높이 설정 */
    height: 100vh; /* Fallback for older browsers */
    height: calc(var(--vh, 1vh) * 100);
    margin: 0; padding: 0; width: 100%;
    overflow: hidden; /* 페이지 전체 스크롤 방지 */
    background-color: #E4E2DF;
    display: flex; justify-content: center; align-items: center;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
}

body { 
    font-family: 'Inter', 'Pretendard', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; 
    color: var(--text-main); 
    letter-spacing: -0.3px;
}

/* 📱 스마트폰 프레임 UI */
.app-container { 
    width: 100%; 
    /* 🚨 주소창 버그 해결 2단계: 앱 컨테이너 높이 설정 */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background: var(--bg-color);
    display: flex; flex-direction: column; position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.05); overflow: hidden;
}

@media (min-width: 600px) {
    .app-container {
        width: 390px; 
        /* PC 환경에서는 모바일 뷰 강제 고정 */
        height: 844px; max-height: 90vh;
        border-radius: 40px; border: 12px solid #111;
        box-shadow: 0 40px 80px rgba(0,0,0,0.15), inset 0 0 0 2px #333;
    }
    .app-container::after {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 120px; height: 28px; background: #111;
        border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; z-index: 10000; pointer-events: none;
    }
    .app-header { padding-top: 15px !important; height: calc(var(--header-height) + 15px) !important; }
    .main-content { padding-top: calc(var(--header-height) + 15px) !important; }
}

@media (max-width: 599px) {
    body { background-color: var(--bg-color); }
    /* 모바일에서는 컨테이너가 화면 100%를 정확히 채우도록 라운드 제거 */
    .app-container { border-radius: 0; border: none; box-shadow: none; max-height: none; }
}

/* 🔝 상단 헤더 */
.app-header {
    height: var(--header-height); display: flex; justify-content: space-between; align-items: center;
    padding: 0 24px; background: rgba(252, 250, 248, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    position: absolute; top: 0; left: 0; width: 100%; z-index: 100; border-bottom: 1px solid rgba(239, 235, 225, 0.6);
}
.header-logo { font-size: 1.1em; font-weight: 700; letter-spacing: 3px; color: var(--text-main); text-decoration: none;}
.lang-selector { display: flex; gap: 10px; font-size: 0.75em; font-weight: 500; color: var(--text-light); }
.lang-btn { cursor: pointer; transition: color 0.2s; letter-spacing: 1px;}
.lang-btn.active { color: var(--color-primary); font-weight: 700; }

.main-content { flex: 1; overflow-y: auto; padding-top: var(--header-height); padding-bottom: var(--nav-height); width: 100%; animation: fadeIn 0.4s ease; position: relative;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ⬇️ 하단 네비게이션 바 */
.bottom-nav {
    height: var(--nav-height); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    display: flex; justify-content: space-around; align-items: center;
    border-top: 1px solid var(--color-border); position: absolute; bottom: 0; width: 100%; z-index: 100;
}
.nav-item { 
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; 
    color: var(--text-light); font-size: 0.65em; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.3s;
}
.nav-icon { width: 22px; height: 22px; stroke: var(--text-light); stroke-width: 1.5px; fill: none; transition: all 0.3s; }
.nav-item.active { color: var(--text-main); font-weight: 600; }
.nav-item.active .nav-icon { stroke: var(--text-main); stroke-width: 2px; }

/* =========================================
   👑 공통 3D 플립 카드 프레임
   ========================================= */

.card-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 340px; 
    height: 540px; 
    margin: 0 auto 40px auto; 
    perspective: 1500px; 
}

.card-container { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform-style: preserve-3d; 
    cursor: pointer; 
    z-index: 2;
}
.card-container.flipped { transform: rotateY(180deg); }

.card-face { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    border-radius: 20px; 
    overflow: hidden; 
    box-sizing: border-box; 
    box-shadow: 0 15px 40px rgba(42, 37, 34, 0.08); 
    border: 1px solid var(--color-border);
}

.card-back { 
    background-color: #ffffff; 
    color: var(--text-main); 
    transform: rotateY(180deg); 
    display: flex; flex-direction: column; 
    padding: 0;
}

/* --- 카드 앞면 속성 --- */
.card-front-content { padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; position: relative; }
.card-badge { position: absolute; top: 35px; font-size: 0.9em; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 14px; border-radius: 12px; }
.card-flip-hint { position: absolute; bottom: 25px; font-size: 0.8em; font-weight: 700; opacity: 0.8; padding: 8px 15px; border-radius: 20px; }

/* 레이어링 카드 전용 내부 속성 */
.recipe-header-box { padding: 24px; border-bottom: 1px solid rgba(0,0,0,0.1); text-align: left; }
.recipe-content { padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1;}
.cards-row { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 15px; gap: 10px; }

.mini-card-container { width: 110px; height: 150px; flex-shrink: 0; perspective: 1000px; cursor: pointer; transition: transform 0.2s;}
.mini-card-container:hover { transform: translateY(-5px); }
.mini-card { width: 100%; height: 100%; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.15); padding: 10px; position: relative;}
.mini-card-badge { font-size: 0.6em; font-weight: 700; border-radius: 6px; padding: 4px 8px; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
.mini-card-sku { font-size: 1.4em; font-weight: 800; margin-bottom: 2px; }
.mini-card-name { font-size: 0.7em; font-weight: 500; line-height: 1.2; word-break: keep-all; text-align: center; }

/* --- 카드 뒷면 속성 --- */
.back-header { padding: 24px; background-color: #fbfaf8; border-bottom: 1px solid var(--color-border); text-align: left; }
.title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;}
.title-row h3 { margin: 0; font-size: 1.6em; letter-spacing: -0.5px; color: var(--text-main);}
.title-row .sub-id { font-size: 0.8em; font-weight: 600; color: var(--text-light); }
.concept-text { font-weight: 700; font-size: 1.05em; margin-bottom: 8px; color: #d63031; word-break: keep-all;}
.tag-list { font-size: 0.85em; font-weight: 600; line-height: 1.4; color: #0984e3; }

.back-content { padding: 24px; overflow-y: auto; flex-grow: 1; text-align: left; background: #ffffff; }
.back-content::-webkit-scrollbar { width: 4px; }
.back-content::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

.story-text { font-style: italic; font-weight: 600; color: var(--text-main); margin-bottom: 12px; line-height: 1.5; font-size: 1.1em; word-break: keep-all;}
.copy-text { font-size: 0.9em; color: var(--text-light); margin-bottom: 12px; line-height: 1.5; word-break: keep-all;}
.feature-text { font-weight: 600; color: #d35400; margin-bottom: 12px; font-size: 0.95em;}
.desc-text { font-size: 0.95em; line-height: 1.6; color: #555; margin-bottom: 20px; word-break: keep-all;}

.section-title { font-size: 0.8em; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px 0; font-weight: 700; }
.notes-box { background: #fafafa; border: 1px solid var(--color-border); border-radius: 12px; padding: 15px; margin-bottom: 20px; font-size: 0.9em; }
.note-row { display: flex; margin-bottom: 8px; }
.note-row:last-child { margin-bottom: 0; }
.note-label { font-weight: 700; width: 60px; color: var(--text-main); flex-shrink: 0; text-transform: uppercase;}
.note-value { color: var(--text-light); line-height: 1.4;}
.script-box { background-color: #fffaf0; border-left: 3px solid #f1c40f; padding: 15px; font-size: 0.9em; color: #8a6d3b; border-radius: 0 12px 12px 0; line-height: 1.5; }

/* 2등 서브 카드 컨테이너 (밑장) */
.sub-card-container { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); z-index: 1; cursor: pointer;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; 
    padding: 30px 20px; box-sizing: border-box; transform: translateY(110px) scale(0.9); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.3);
}
.sub-card-container:hover { transform: translateY(90px) scale(0.92); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.sub-result-title { font-size: 0.8em; margin-bottom: 6px; font-weight: 600; opacity: 0.85; letter-spacing: 1px;}
.sub-result-name { font-size: 1.4em; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.3px;}

/* 공통 버튼 디자인 */
.btn-primary { background-color: var(--text-main); color: white; border: none; padding: 18px; font-size: 1.05em; font-weight: 500; border-radius: 16px; cursor: pointer; transition: 0.2s; letter-spacing: -0.3px; width: 100%;}
.btn-outline { background-color: transparent; color: var(--text-main); border: 1px solid var(--color-border); padding: 18px; font-size: 1.05em; font-weight: 500; border-radius: 16px; cursor: pointer; transition: 0.2s; letter-spacing: -0.3px; width: 100%;}
.btn-primary:active, .btn-outline:active { transform: scale(0.98); }

/* =========================================
   ✅ 모달 (팝업 뷰) 공통 - 블러 곡률 완벽 매칭
   ========================================= */
.modal-overlay { 
    position: absolute; /* app-container 내부에 위치 */
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.65); 
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); 
    z-index: 9999; display: none; justify-content: center; align-items: center; 
    opacity: 0; transition: opacity 0.3s ease; 
}
.modal-overlay.active { opacity: 1; display: flex; }

/* 🚨 데스크탑 폰 프레임(PC 화면)일 때 블러 모서리 곡률 정확히 맞춤 */
@media (min-width: 600px) {
    .modal-overlay {
        border-radius: 28px; 
        -webkit-mask-image: -webkit-radial-gradient(white, black); 
        transform: translateZ(0); 
    }
}

.modal-close { 
    position: absolute; top: 20px; right: 25px; color: white; font-size: 2.5em; 
    cursor: pointer; z-index: 10000; font-weight: 300; text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.modal-card-wrapper { 
    width: 100%; max-width: 360px; height: 560px; box-sizing: border-box; padding: 20px;
    position: relative; perspective: 1500px;
}

@media (max-height: 650px) {
    .modal-card-wrapper { max-height: 65vh; width: calc(65vh * 0.625); }
}

/* 🎨 그라데이션 컬러 배경 및 글씨색 바인딩 */
.bg-pure { background: var(--pure-grad); color: white; }
.bg-bloom { background: var(--bloom-grad); color: #333 !important; }
.bg-earth { background: var(--earth-grad); color: #222 !important; }
.bg-pop { background: var(--pop-grad); color: white; }
.bg-oriental { background: var(--oriental-grad); color: white; }