/* ===== 회원가입 단계별 스타일 ===== */ .step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; } .step-indicator .step { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--bg); color: var(--text3); border: 2px solid var(--border); } .step-indicator .step.active { background: var(--primary); color: white; border-color: var(--primary); } .step-indicator .step.done { background: rgba(124,58,237,0.15); color: var(--primary); border-color: var(--primary); } .step-indicator .step-line { width: 30px; height: 2px; background: var(--border); } .step-indicator .step-line.done { background: var(--primary); } /* 약관 동의 */ .terms-section { background: var(--surface); border-radius: 8px; padding: 16px; border: 1px solid var(--border); } .terms-check-all { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text1); cursor: pointer; padding: 4px 0; } .terms-divider { height: 1px; background: var(--border); margin: 12px 0; } .terms-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text1); cursor: pointer; padding: 6px 0; } .terms-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); } .terms-check-all input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); } .terms-view-btn { margin-left: auto; background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; } /* 폼 라벨 */ .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } .form-group { margin-bottom: 14px; } .form-input { width: 100%; padding: 14px 16px; border-radius: 8px; font-size: 15px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text1); outline: none; box-sizing: border-box; transition: border-color 0.2s; } .form-input:focus { border-color: var(--primary); } /* 소셜 로그인 버튼 */ .social-btn { width: 100%; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text1); box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.1s; } .social-btn:active { transform: scale(0.98); } .kakao-btn { background: #FEE500; border-color: #FEE500; color: #191919; } .divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text3); font-size: 12px; font-weight: 600; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* 인증 페이지 레이아웃 */ .auth-page { width: 100%; max-width: 380px; padding: 40px 24px; } /* ================================================================ WhereCrew 디자인 가이드라인 v1.0 — 전체 앱 CSS 오버라이드 ================================================================ */ /* ── Google Fonts 로드 (Noto Sans KR + Inter) ── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ── 디자인 가이드라인 토큰 전면 적용 ── */ :root { /* 브랜드 컬러 */ --brand: #7C3AED; --brand-dark: #6B21A8; --brand-glow: #A78BFA; --brand-light: rgba(124,58,237,0.18); --bg-tint: rgba(124,58,237,0.10); --border-purple: #DDD6FE; /* 기존 변수 매핑 (하위 호환) */ --primary: #7C3AED; --primary-dark: #6B21A8; --primary-light: #C4B5FD; --primary-bg: rgba(124,58,237,0.20); --primary-glow: rgba(124,58,237,0.25); --tint: #7C3AED; /* 배경 */ --bg: #0F0E17; --bg2: #1A1825; --surface: #1E1C2A; /* 텍스트 */ --text1: #F0EEF8; --text2: #A89EC4; --text3: #6B6380; --muted: #6B6380; /* 테두리 */ --border: #2D2A3E; /* 시맨틱 */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --error: #EF4444; /* 카테고리 컬러 */ --running: #DC2626; --hiking: #059669; --cycling: #2563EB; --motorcycle: #475569; /* 반경 — 가이드라인: 20px 기본, 12px 버튼 */ --r-xs: 4px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 6px; --r-2xl: 24px; --r-full: 9999px; /* 그림자 */ --shadow-sm: 0 1px 3px rgba(15,10,30,0.06), 0 1px 2px rgba(15,10,30,0.04); --shadow-md: 0 4px 12px rgba(15,10,30,0.08), 0 2px 4px rgba(15,10,30,0.04); --shadow-lg: 0 8px 32px rgba(15,10,30,0.10), 0 4px 8px rgba(15,10,30,0.06); --shadow-brand: 0 4px 20px rgba(124,58,237,0.35); --shadow-card: 0 2px 12px rgba(15,10,30,0.06); } /* ── 전역 폰트 ── */ *, *::before, *::after { box-sizing: border-box; } html, body { font-family: 'Noto Sans KR', 'Inter', -apple-system, 'Apple SD Gothic Neo', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); color: var(--text1); } /* ================================================================ AUTH 화면 — 가이드라인 로그인/회원가입 스타일 ================================================================ */ #auth-screen { background: var(--bg) !important; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; } .auth-page { width: 100%; max-width: 400px; padding: 0 0 40px; margin: 0 auto; } /* 회원가입 모드에서 소셜 섹션 숨기기 */ .auth-page.register-mode #auth-social-section { display: none; } /* 로고 */ .auth-logo { text-align: center; margin-bottom: 40px; } .auth-logo .big { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; color: var(--text1); } .auth-logo .big em { font-style: normal; background: linear-gradient(135deg, #A78BFA, #7C3AED); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-logo .sub { font-size: 14px; font-weight: 500; color: var(--text3); margin-top: 8px; letter-spacing: 0.01em; } /* 소셜 버튼 */ .social-btn { width: 100%; padding: 15px 20px; border-radius: var(--r-md) !important; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; transition: transform 80ms ease, box-shadow 150ms ease; border: 1.5px solid var(--border) !important; background: var(--surface) !important; color: var(--text1) !important; box-shadow: var(--shadow-sm); } .social-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .social-btn:active { transform: scale(0.97) !important; box-shadow: var(--shadow-sm); } /* 카카오 버튼 */ .kakao-btn { background: #FEE500 !important; border-color: #FEE500 !important; color: #191919 !important; box-shadow: 0 2px 8px rgba(254,229,0,0.4) !important; } .kakao-btn:hover { box-shadow: 0 4px 16px rgba(254,229,0,0.5) !important; } /* 구글 버튼 */ .google-btn { background: #0F0E17 !important; border-color: var(--border) !important; color: var(--text2) !important; border-radius: var(--r-md) !important; } /* 구분선 */ .divider, .auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; } .divider::before, .divider::after, .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* 폼 입력 */ .auth-input, .form-input { width: 100%; padding: 14px 16px; border-radius: var(--r-md) !important; font-size: 15px; border: 1.5px solid var(--border) !important; background: var(--bg) !important; color: var(--text1); outline: none; margin-bottom: 10px; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; } .auth-input:focus, .form-input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important; } /* 로그인 버튼 */ .auth-btn, .btn-primary { border-radius: var(--r-md) !important; background: var(--brand) !important; color: #FFFFFF !important; font-weight: 800; font-size: 16px; border: none !important; box-shadow: var(--shadow-brand) !important; transition: transform 80ms ease, box-shadow 150ms ease, background 150ms ease; cursor: pointer; } .auth-btn:hover, .btn-primary:hover { background: var(--brand-dark) !important; box-shadow: 0 6px 24px rgba(124,58,237,0.45) !important; transform: translateY(-1px); } .auth-btn:active, .btn-primary:active { transform: scale(0.97) !important; box-shadow: var(--shadow-brand) !important; } /* 보조 버튼 */ .btn-secondary { border-radius: var(--r-md) !important; background: var(--bg) !important; color: var(--text1) !important; border: 1.5px solid var(--border) !important; font-weight: 600; transition: transform 80ms ease, box-shadow 150ms ease; } .btn-secondary:hover { border-color: var(--brand) !important; color: var(--brand) !important; transform: translateY(-1px); } .btn-secondary:active { transform: scale(0.97) !important; } /* 토글 링크 */ .auth-toggle { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text3); } .auth-toggle-btn { color: var(--brand) !important; font-weight: 700; background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* 스텝 인디케이터 */ .step-indicator .step.active { background: var(--brand) !important; border-color: var(--brand) !important; box-shadow: 0 2px 8px rgba(124,58,237,0.3); } .step-indicator .step.done { background: var(--brand-light) !important; color: var(--brand-dark) !important; border-color: var(--border-purple) !important; } .step-indicator .step-line.done { background: var(--brand) !important; } /* ================================================================ 앱 상단 네비바 — 랜딩 고정 메뉴 스타일 적용 ================================================================ */ #navbar, .nav-drawer, .nav-icon-btn, .nav-link-btn, .nav-drawer-btn { font-family: 'Noto Sans KR', sans-serif; } /* ================================================================ 탭 바 — 가이드라인 스타일 ================================================================ */ .tab-bar { background: var(--surface, rgba(18,18,28,0.97)) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -1px 0 var(--border); } .tab-item { color: var(--muted) !important; transition: color 0.2s !important; } .tab-item.active { color: var(--brand) !important; } .tab-item.active .ti-icon svg { stroke-width: 2.5 !important; } .ti-label { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; } .tab-rec-btn { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: linear-gradient(135deg, #A78BFA, #7C3AED) !important; box-shadow: var(--shadow-brand) !important; transition: transform 80ms ease, box-shadow 150ms ease !important; } .tab-rec-btn:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 24px rgba(124,58,237,0.45) !important; } .tab-rec-btn:active { transform: scale(0.94) !important; box-shadow: 0 2px 8px rgba(124,58,237,0.3) !important; } /* ================================================================ 필터 탭 — 가이드라인 스타일 ================================================================ */ .filter-tabs { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; padding: 0 12px !important; gap: 4px !important; } .filter-tab { padding: 10px 14px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text3) !important; border: 1.5px solid transparent !important; border-radius: var(--r-full) !important; background: none !important; margin: 6px 2px !important; transition: all 0.15s !important; white-space: nowrap; cursor: pointer; } .filter-tab:hover { color: var(--brand) !important; background: var(--brand-light) !important; border-color: var(--border-purple) !important; } .filter-tab.active { background: var(--brand) !important; color: #FFFFFF !important; border-color: var(--brand) !important; box-shadow: 0 2px 8px rgba(124,58,237,0.25) !important; } /* ================================================================ 스토리 바 — 가이드라인 스타일 ================================================================ */ .story-bar { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 16px !important; } .story-ring { background: linear-gradient(135deg, #A78BFA, #7C3AED) !important; box-shadow: 0 2px 8px rgba(124,58,237,0.25); } .story-add .story-ring { background: linear-gradient(135deg, #A78BFA, #7C3AED) !important; } .story-add .story-ring-inner { background: linear-gradient(135deg, #7C3AED, #6B21A8) !important; } .story-ph { background: linear-gradient(135deg, var(--brand-light), var(--border-purple)) !important; color: var(--brand-dark) !important; } .story-label { font-size: 11px; font-weight: 600; color: var(--text3); } /* ================================================================ 피드 카드 — 가이드라인 스타일 ================================================================ */ .feed-card { background: var(--surface) !important; border-radius: 0 !important; border: none !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 0 !important; transition: background 0.15s; } .feed-card:hover { background: var(--bg-tint) !important; } .fc-avatar { border: 2.5px solid var(--border-purple) !important; border-radius: 50% !important; } .fc-avatar-placeholder { background: linear-gradient(135deg, var(--brand-light), var(--border-purple)) !important; color: var(--brand-dark) !important; } .fc-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .fc-sub { font-size: 12px; color: var(--text3); } /* 카테고리 배지 */ .type-pill { border-radius: var(--r-full) !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 9px !important; } .tp-running { background: rgba(220,38,38,0.10) !important; color: #DC2626 !important; } .tp-hiking { background: rgba(5,150,105,0.10) !important; color: #059669 !important; } .tp-cycling { background: rgba(37,99,235,0.10) !important; color: #2563EB !important; } .tp-motorcycle { background: rgba(71,85,105,0.10) !important; color: #475569 !important; } /* 등급 배지 */ .grade-pill { border-radius: var(--r-full) !important; } .gp-새싹 { background: rgba(5,150,105,0.10) !important; color: #059669 !important; } .gp-베테랑 { background: rgba(245,158,11,0.10) !important; color: #D97706 !important; } .gp-가이드 { background: rgba(124,58,237,0.10) !important; color: var(--brand-dark) !important; } /* 피드 통계 */ .fc-stats { border-bottom: 1px solid var(--border) !important; background: var(--bg-tint) !important; } .fc-stat-val { font-size: 20px !important; font-weight: 900 !important; color: var(--brand-dark) !important; letter-spacing: -0.03em !important; font-family: 'Inter', sans-serif !important; } .fc-stat-lbl { font-size: 10px !important; font-weight: 700 !important; color: var(--muted) !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .fc-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; } /* 액션 버튼 */ .fc-action-btn { border-radius: var(--r-sm) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text3) !important; transition: background 0.15s, color 0.15s !important; } .fc-action-btn:hover { background: var(--brand-light) !important; color: var(--brand) !important; } .fc-action-btn.liked { color: var(--danger) !important; } .fc-action-btn.liked svg { fill: var(--danger) !important; stroke: var(--danger) !important; } /* ================================================================ 일반 카드 — 가이드라인 Feature Card 스타일 ================================================================ */ .card { background: var(--surface) !important; border-radius: var(--r-xl) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; overflow: hidden; } .card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(15,10,30,0.10) !important; border-color: var(--border-purple) !important; } .card:active { transform: scale(0.98) !important; } .card-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--text1) !important; line-height: 1.3 !important; } .card-meta { font-size: 12px !important; color: var(--text3) !important; } .card-price { font-size: 17px !important; font-weight: 900 !important; color: var(--brand-dark) !important; letter-spacing: -0.02em !important; font-family: 'Inter', sans-serif !important; } /* ================================================================ 클럽 카드 — 가이드라인 스타일 ================================================================ */ .club-card { background: var(--surface) !important; border-radius: var(--r-xl) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .club-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(15,10,30,0.10) !important; } .club-card:active { transform: scale(0.98) !important; } .cc-cover { border-radius: var(--r-xl) var(--r-xl) 0 0 !important; } .cc-name { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .cc-desc { font-size: 13px !important; color: var(--text3) !important; line-height: 1.5 !important; } /* ================================================================ 섹션 헤더 — 가이드라인 스타일 ================================================================ */ .section-header { padding: 20px 20px 10px !important; } .section-title { font-size: 20px !important; font-weight: 900 !important; letter-spacing: -0.025em !important; color: var(--text1) !important; line-height: 1.2 !important; } .section-more { font-size: 13px !important; font-weight: 700 !important; color: var(--brand) !important; text-decoration: none; } .section-more:hover { text-decoration: underline; text-underline-offset: 2px; } /* 섹션 레이블 */ .section-label { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-light); color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full); margin-bottom: 16px; } /* ================================================================ 배지 — 가이드라인 스타일 ================================================================ */ .badge { border-radius: var(--r-full) !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important; } .badge-primary { background: var(--brand-light) !important; color: var(--brand-dark) !important; } .badge-danger { background: rgba(239,68,68,0.10) !important; color: var(--danger) !important; } .badge-warning { background: rgba(245,158,11,0.10) !important; color: #D97706 !important; } .badge-success { background: rgba(16,185,129,0.10) !important; color: #059669 !important; } /* ================================================================ 프로필 헤더 (마이페이지) — 가이드라인 스타일 ================================================================ */ .profile-header { background: linear-gradient(160deg, #1A1428 0%, #221A35 60%) !important; border-bottom: 1px solid var(--border) !important; padding: 28px 20px 24px !important; } .ph-avatar { border: 3px solid var(--border-purple) !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(124,58,237,0.15) !important; } .ph-avatar-placeholder { background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(109,40,217,0.45)) !important; } .ph-name { font-size: 22px !important; font-weight: 900 !important; letter-spacing: -0.025em !important; color: var(--text1) !important; } .ph-stat-val { font-size: 24px !important; font-weight: 900 !important; color: var(--primary-light) !important; letter-spacing: -0.03em !important; font-family: 'Inter', sans-serif !important; } .ph-stat-lbl { font-size: 11px !important; font-weight: 700 !important; color: var(--text3) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .ph-stat + .ph-stat { border-left: 1px solid var(--border) !important; } /* ================================================================ 메뉴 섹션 (마이페이지) — 가이드라인 스타일 ================================================================ */ .menu-section { background: var(--surface) !important; border-radius: var(--r-xl) !important; margin: 12px 16px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important; overflow: hidden; } .menu-item { padding: 15px 16px !important; transition: background 0.15s !important; border-bottom: 1px solid var(--border) !important; } .menu-item:last-child { border-bottom: none !important; } .menu-item:hover { background: rgba(124,58,237,0.12) !important; } .menu-item:active { background: rgba(124,58,237,0.20) !important; } .menu-icon { width: 38px !important; height: 38px !important; border-radius: var(--r-md) !important; } .menu-text .title { font-size: 15px !important; font-weight: 600 !important; color: var(--text1) !important; } .menu-text .sub { font-size: 12px !important; color: var(--text3) !important; margin-top: 2px !important; } .menu-toggle { border-radius: var(--r-full) !important; background: var(--border) !important; } .menu-toggle.on { background: var(--brand) !important; } /* ================================================================ 모달 / 바텀 시트 — 가이드라인 스타일 ================================================================ */ .modal-overlay { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; background: rgba(15,5,32,0.5) !important; } .modal-sheet { border-radius: var(--r-2xl) var(--r-2xl) 0 0 !important; background: var(--surface) !important; box-shadow: 0 -8px 40px rgba(15,5,32,0.15) !important; } .modal-handle { background: var(--border) !important; width: 40px !important; height: 4px !important; border-radius: var(--r-full) !important; margin: 14px auto 0 !important; } .modal-title { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--text1) !important; } .modal-close { width: 32px !important; height: 32px !important; border-radius: var(--r-sm) !important; background: var(--bg-tint) !important; border: none !important; color: var(--text3) !important; transition: background 0.15s, color 0.15s !important; } .modal-close:hover { background: var(--brand-light) !important; color: var(--brand) !important; } .back-btn { border-radius: var(--r-sm) !important; background: var(--bg-tint) !important; transition: background 0.15s !important; } .back-btn:hover { background: var(--brand-light) !important; } /* ================================================================ 폼 요소 — 가이드라인 스타일 ================================================================ */ .form-label { font-size: 13px !important; font-weight: 700 !important; color: var(--text2) !important; margin-bottom: 8px !important; letter-spacing: 0.01em !important; } .form-input, .form-textarea { border-radius: var(--r-md) !important; border: 1.5px solid var(--border) !important; background: var(--bg) !important; color: var(--text1) !important; font-family: inherit !important; font-size: 15px !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .form-input:focus, .form-textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important; outline: none !important; } /* 검색 입력 */ #search-input { border-radius: var(--r-full) !important; border: 1.5px solid var(--border) !important; background: var(--bg-tint) !important; font-size: 15px !important; transition: border-color 0.2s, box-shadow 0.2s !important; } #search-input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important; background: var(--bg) !important; } /* ================================================================ 진행 바 — 가이드라인 스타일 ================================================================ */ .progress-bar { height: 4px !important; background: var(--border) !important; border-radius: var(--r-full) !important; } .progress-fill { background: linear-gradient(90deg, #A78BFA, #7C3AED) !important; border-radius: var(--r-full) !important; transition: width 0.4s cubic-bezier(0.16,1,0.3,1) !important; } /* ================================================================ 로딩 & 빈 상태 — 가이드라인 스타일 ================================================================ */ .spinner { border-color: var(--border) !important; border-top-color: var(--brand) !important; width: 32px !important; height: 32px !important; border-width: 3px !important; } .empty-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--text1) !important; } .empty-sub { color: var(--text3) !important; line-height: 1.6 !important; } /* ================================================================ FAB 버튼 — 가이드라인 스타일 ================================================================ */ .fab { position: fixed !important; bottom: 80px !important; right: 20px !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; background: linear-gradient(135deg, #A78BFA, #7C3AED) !important; border: none !important; box-shadow: var(--shadow-brand) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform 80ms ease, box-shadow 150ms ease !important; z-index: 300 !important; } .fab:hover { transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 8px 28px rgba(124,58,237,0.45) !important; } .fab:active { transform: scale(0.94) !important; box-shadow: var(--shadow-brand) !important; } /* ================================================================ 배너 광고 — 가이드라인 스타일 ================================================================ */ .banner-ad { border-radius: var(--r-lg) !important; overflow: hidden !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; } /* ================================================================ 토스트 알림 — 가이드라인 스타일 ================================================================ */ #toast { border-radius: var(--r-md) !important; background: #1A0A2E !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: 0 8px 32px rgba(15,5,32,0.3) !important; padding: 12px 20px !important; } /* ================================================================ 디테일 통계 — 가이드라인 스타일 ================================================================ */ .detail-stats { border-radius: var(--r-xl) !important; overflow: hidden !important; } .detail-stat-val { font-size: 26px !important; font-weight: 900 !important; color: var(--brand-dark) !important; letter-spacing: -0.03em !important; font-family: 'Inter', sans-serif !important; } .detail-stat-lbl { font-size: 11px !important; font-weight: 700 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* ================================================================ 약관 체크박스 — 가이드라인 스타일 ================================================================ */ .terms-section { border-radius: var(--r-lg) !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(139,92,246,0.25) !important; } .terms-check input[type="checkbox"], .terms-check-all input[type="checkbox"] { accent-color: var(--brand) !important; } .terms-view-btn { color: var(--brand) !important; } /* ================================================================ 관리자 페이지 — 가이드라인 스타일 ================================================================ */ .admin-nav-item.active { color: var(--brand) !important; border-left-color: var(--brand) !important; background: var(--brand-light) !important; } .admin-save-btn { background: var(--brand) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-brand) !important; } /* ================================================================ 활동 카테고리 컬러 유지 ================================================================ */ .running-color { color: var(--running) !important; } .hiking-color { color: var(--hiking) !important; } .cycling-color { color: var(--cycling) !important; } .motorcycle-color { color: var(--motorcycle) !important; } /* ================================================================ 링크 & 강조 ================================================================ */ a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ================================================================ 섹션 구분선 ================================================================ */ .section-divider { height: 8px !important; background: var(--bg-tint) !important; } /* ================================================================ PWA 팝업 — 가이드라인 스타일 ================================================================ */ #pwa-install-popup > div { border-radius: var(--r-2xl) var(--r-2xl) 0 0 !important; background: var(--surface) !important; box-shadow: 0 -8px 40px rgba(15,5,32,0.15) !important; } /* ================================================================ 푸터 — 가이드라인 스타일 ================================================================ */ .site-footer { background: #1A0A2E !important; color: rgba(255,255,255,0.7) !important; padding: 40px 24px 32px !important; font-size: 13px !important; line-height: 1.7 !important; } .footer-logo { font-size: 22px !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #FFFFFF !important; margin-bottom: 4px !important; } .footer-logo span { background: linear-gradient(135deg, #A78BFA, #7C3AED) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .footer-tagline { font-size: 13px !important; color: rgba(255,255,255,0.45) !important; margin-bottom: 24px !important; } .footer-label { color: rgba(255,255,255,0.45) !important; font-size: 12px !important; font-weight: 600 !important; min-width: 110px !important; } .footer-value { color: rgba(255,255,255,0.75) !important; font-size: 12px !important; } .footer-value a { color: var(--brand-glow) !important; text-decoration: none !important; } .footer-value a:hover { text-decoration: underline !important; } .footer-divider { border: none !important; border-top: 1px solid rgba(255,255,255,0.1) !important; margin: 20px 0 !important; height: 1px !important; } .footer-copyright { color: rgba(255,255,255,0.35) !important; font-size: 12px !important; } .footer-links a { color: rgba(255,255,255,0.45) !important; font-size: 12px !important; text-decoration: none !important; } .footer-links a:hover { color: var(--brand-glow) !important; } /* ================================================================ 스크롤바 숨김 ================================================================ */ ::-webkit-scrollbar { width: 0; height: 0; } /* ================================================================ 애니메이션 — 가이드라인 스타일 ================================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* 페이지 전환 */ .page.active { animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* GPX Canvas 오버레이 */ .fc-media-wrap { position: relative; overflow: hidden; } .fc-media-container { position: relative; display: block; } .fc-gpx-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 200px; pointer-events: none; z-index: 2; } .fc-map-layer { position: absolute; top: 0; left: 0; width: 100%; height: 200px; z-index: 1; } .fc-view-toggle { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border-radius: 20px; padding: 4px 10px; font-size: 11px; color: #fff; cursor: pointer; z-index: 10; display: flex; gap: 6px; align-items: center; user-select: none; transition: background 0.2s; } .fc-view-toggle:hover { background: rgba(0,0,0,0.75); } /* AI 경로 배지 */ .ai-route-badge { display: inline-flex; align-items: center; gap: 2px; background: linear-gradient(135deg, #6C63FF, #9B59B6); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; margin-left: 4px; vertical-align: middle; letter-spacing: 0.3px; } /* AI 경로 계획 탭 강조 */ .ai-plan-tab { background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(155,89,182,0.15)) !important; border: 1px solid rgba(108,99,255,0.4) !important; color: #9B8FFF !important; } .ai-plan-tab.active { background: linear-gradient(135deg, #6C63FF, #9B59B6) !important; color: #fff !important; border-color: transparent !important; } /* AI 경로 계획 UI */ #ai-route-planner { padding: 16px; display: none; } #ai-route-planner.show { display: block; } .arp-title { font-size: 18px; font-weight: 700; color: var(--text1); margin-bottom: 4px; } .arp-sub { font-size: 13px; color: var(--text2); margin-bottom: 16px; } .arp-type-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .arp-type-btn { flex: 1; min-width: 70px; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s; } .arp-type-btn.active { border-color: var(--primary); background: rgba(108,99,255,0.12); color: var(--primary); } .arp-map-wrap { border-radius: 16px; overflow: hidden; height: 320px; margin-bottom: 12px; position: relative; border: 1.5px solid var(--border); } #arp-map { width: 100%; height: 100%; } .arp-map-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 20px; pointer-events: none; white-space: nowrap; z-index: 1000; } .arp-waypoints { margin-bottom: 12px; } .arp-wp-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-radius: 10px; margin-bottom: 6px; font-size: 13px; color: var(--text1); } .arp-wp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .arp-wp-remove { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; padding: 0 4px; } .arp-actions { display: flex; gap: 10px; margin-bottom: 16px; } .arp-btn { flex: 1; padding: 12px; border-radius: 12px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; } .arp-btn-clear { background: var(--surface); color: var(--text2); border: 1px solid var(--border); } .arp-btn-generate { background: linear-gradient(135deg, #6C63FF, #9B59B6); color: #fff; } .arp-result { border-radius: 16px; overflow: hidden; height: 280px; border: 1.5px solid rgba(108,99,255,0.4); display: none; position: relative; } .arp-result.show { display: block; } #arp-result-map { width: 100%; height: 100%; } .arp-result-info { background: var(--surface); border-radius: 12px; padding: 14px 16px; margin-top: 12px; display: none; } .arp-result-info.show { display: block; } .arp-result-stats { display: flex; gap: 16px; margin-bottom: 10px; } .arp-rs { text-align: center; flex: 1; } .arp-rs-val { font-size: 18px; font-weight: 700; color: var(--primary); } .arp-rs-label { font-size: 11px; color: var(--text2); margin-top: 2px; } .arp-save-btn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: linear-gradient(135deg, #6C63FF, #9B59B6); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; }