/* 파일 경로: reci-pick/style.css */

/* =========================================
   [1. 디자인 시스템 테마 변수]
   ========================================= */
:root {
    --global-bg: #0B192C; --global-text: #D1D5DB; --global-point: #CCFF00;
    --bg-color: #FFFFFF; --text-main: #212121; --text-sub: #757575;
    --point-orange: #FF9800; --nav-bg: rgba(255, 255, 255, 0.95);
    --border-light: #EEEEEE; --card-bg: #FFFFFF; --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
    --bg-color: #121212; --text-main: #F5F5F5; --text-sub: #B0B0B0;
    --nav-bg: rgba(30, 30, 30, 0.95); --border-light: #333333;
    --card-bg: #1E1E1E; --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* =========================================
   [2. 전체 기본 스펙 정의]
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-color); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; transition: background-color 0.3s, color 0.3s; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

/* =========================================
   [3. 2단 네비게이션 구조 스타일링]
   ========================================= */
.global-nav { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: var(--global-bg); display: flex; justify-content: center; align-items: center; z-index: 1001; }

/* 절대 깨지거나 튀어나오지 않도록 강제 방어 처리된 로고 CSS */
.global-logo-img { 
    height: 25px !important; 
    max-height: 25px !important; 
    width: auto !important; 
    max-width: 100%; 
    object-fit: contain; 
    display: block; 
}

.app-nav { position: fixed; top: 50px; left: 0; width: 100%; height: 70px; background-color: var(--nav-bg); border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; padding: 0 40px; z-index: 1000; backdrop-filter: blur(10px); }
.app-brand { font-size: 1.4rem; font-weight: 800; color: var(--point-orange); text-decoration: none; }
.app-menu { display: flex; align-items: center; gap: 25px; list-style: none; }

/* 세로 쪼개짐 원천 차단을 위한 !important 범벅 */
.app-menu a { 
    text-decoration: none; 
    color: var(--text-main); 
    font-weight: 600; 
    font-size: 0.95rem; 
    cursor: pointer; 
    padding: 8px 12px; 
    border-radius: 6px; 
    transition: all 0.2s; 
    white-space: nowrap !important; 
    word-break: keep-all !important; 
    flex-shrink: 0 !important; 
    display: inline-block;
}
.app-menu a:hover, .app-menu a.active { color: var(--point-orange); background: rgba(255, 152, 0, 0.1); }

.theme-switch-wrapper { display: flex; align-items: center; gap: 12px; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; font-weight: 700; color: var(--text-sub); }
.theme-label { letter-spacing: 1px; }
.theme-switch { position: relative; display: inline-block; width: 46px; height: 22px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; border: 2px solid var(--text-sub); transition: .4s; border-radius: 4px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: var(--text-sub); transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); border-radius: 2px; }
input:checked + .slider { border-color: var(--point-orange); box-shadow: 0 0 10px rgba(255, 152, 0, 0.3); }
input:checked + .slider:before { transform: translateX(24px); background-color: var(--point-orange); box-shadow: 0 0 8px var(--point-orange); }
.theme-status { min-width: 90px; letter-spacing: 1px; color: var(--text-main); }

/* =========================================
   [4. 레이아웃 뷰 공통 스펙]
   ========================================= */
.content-container { margin-top: 120px; flex-grow: 1; display: flex; flex-direction: column; }
.view-section { display: none; width: 100%; max-width: 1000px; margin: 0 auto; padding: 60px 20px; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   [5. 홈 메인 컴포넌트 및 캐러셀 슬라이더]
   ========================================= */
#view-home { flex-direction: column; align-items: center; text-align: center; max-width: 1200px; }
.app-icon { width: 100px; height: 100px; background: var(--point-orange); border-radius: 24px; margin: 0 auto 20px; display: flex; justify-content: center; align-items: center; color: white; font-size: 2.5rem; font-weight: bold; box-shadow: 0 10px 20px rgba(255, 152, 0, 0.2); }
.hero-title { font-size: 2.5rem; margin-bottom: 15px; }
.hero-summary { font-size: 1.1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto 30px; word-break: keep-all; }
.launch-btn { display: inline-block; background: var(--point-orange); color: #fff; text-decoration: none; padding: 15px 40px; border-radius: 12px; font-size: 1.1rem; font-weight: bold; transition: all 0.2s; margin-bottom: 60px; }
.launch-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 152, 0, 0.3); }
.overview-box { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 40px; text-align: left; margin-bottom: 50px; width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
.overview-box h3 { color: var(--point-orange); font-size: 1.3rem; margin-bottom: 15px; display: inline-block; border-bottom: 2px solid var(--point-orange); padding-bottom: 5px; }
.overview-box p { color: var(--text-main); font-size: 1.05rem; line-height: 1.8; }

.carousel-wrapper { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 20px 0 60px; }
.carousel-container { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 0 40px; -ms-overflow-style: none; scrollbar-width: none; }
.carousel-container::-webkit-scrollbar { display: none; }
.feature-card { flex: 0 0 350px; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 20px; padding: 35px; text-align: left; scroll-snap-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease; display: flex; flex-direction: column; }
.feature-card:hover { transform: translateY(-10px); border-color: var(--point-orange); }
.feature-number { font-size: 2.5rem; font-weight: 800; color: rgba(255, 152, 0, 0.2); margin-bottom: 10px; line-height: 1; }
.feature-card h4 { color: var(--text-main); font-size: 1.2rem; margin-bottom: 15px; word-break: keep-all; }
.feature-card p { color: var(--text-sub); font-size: 0.95rem; line-height: 1.6; }

.carousel-btn { position: absolute; top: 40%; transform: translateY(-50%); background: var(--nav-bg); border: 1px solid var(--border-light); border-radius: 50%; width: 50px; height: 50px; cursor: pointer; color: var(--text-main); font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10; display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
.carousel-btn:hover { background: var(--point-orange); color: white; border-color: var(--point-orange); }
.btn-prev { left: 20px; } .btn-next { right: 20px; }

/* =========================================
   [6. 법적 문서 전용 스타일]
   ========================================= */
.doc-box { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 60px 50px; text-align: left; box-shadow: var(--shadow); min-height: 400px; }
.doc-box h1 { font-size: 2.2rem; margin-bottom: 40px; text-align: center; color: var(--text-main); }
.doc-box h2 { font-size: 1.3rem; margin: 40px 0 15px; color: var(--text-main); border-left: 4px solid var(--point-orange); padding-left: 15px; }
.doc-box h2:first-of-type { margin-top: 0; }
.doc-box p { color: var(--text-sub); margin-bottom: 15px; font-size: 1rem; white-space: pre-wrap; line-height: 1.7; text-align: justify; }
.doc-box strong { color: var(--text-main); }
.doc-box ul { margin: 15px 0 15px 30px; color: var(--text-sub); line-height: 1.7; }
.doc-box li { margin-bottom: 10px; list-style-type: disc; }

.loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; color: var(--text-sub); }
.spinner { border: 4px solid var(--border-light); border-top: 4px solid var(--point-orange); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.error-msg { color: #f44336; text-align: center; font-weight: bold; }

/* =========================================
   [7. 푸터 사업자 정보]
   ========================================= */
footer { width: 100%; text-align: center; padding: 40px 20px; background-color: var(--card-bg); color: var(--text-sub); border-top: 1px solid var(--border-light); font-size: 0.85rem; margin-top: auto; line-height: 1.8; }
.footer-info { max-width: 800px; margin: 0 auto 15px; word-break: keep-all; }
.footer-info span { display: inline-block; margin-bottom: 5px; }
.footer-divider { margin: 0 10px; color: var(--border-light); font-size: 0.8rem; }
.footer-copyright { font-weight: 600; margin-top: 10px; color: var(--text-main); }

/* =========================================
   [8. 모바일 반응형 최적화 (버튼 깨짐 완벽 해결)]
   ========================================= */
@media (max-width: 768px) {
    .global-nav { height: 50px; }
    .global-logo-img { height: 20px !important; }

    .app-nav { top: 50px; height: auto; flex-direction: column; padding: 20px 15px; gap: 15px; justify-content: center; }
    
    .app-menu { flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
    /* 모바일에서도 절대 깨지지 않게 보장 */
    .app-menu a { font-size: 0.85rem; padding: 8px 12px; }
    
    .theme-switch-wrapper { font-size: 0.75rem; gap: 5px; margin-top: 5px; }
    .theme-switch { width: 40px; height: 20px; }
    .slider:before { height: 10px; width: 10px; left: 3px; bottom: 3px; }
    input:checked + .slider:before { transform: translateX(20px); }
    .theme-status { min-width: 75px; }
    
    .content-container { margin-top: 200px; }
    
    .hero-title { font-size: 2rem; }
    .doc-box { padding: 30px 20px; }
    .footer-divider { display: none; }
    .footer-info span { display: block; margin-bottom: 8px; }
}