diff --git a/ado2-marketing-intelligence---lala-cabin/.gitignore b/ado2-marketing-intelligence---lala-cabin/.gitignore deleted file mode 100755 index a547bf3..0000000 --- a/ado2-marketing-intelligence---lala-cabin/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/ado2-marketing-intelligence---lala-cabin/App.tsx b/ado2-marketing-intelligence---lala-cabin/App.tsx deleted file mode 100755 index f7ca3fb..0000000 --- a/ado2-marketing-intelligence---lala-cabin/App.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import React, { useMemo } from 'react'; -import { ArrowLeft, Sparkles, MapPin, Target, Zap, LayoutGrid, Users, Crown, TrendingUp } from 'lucide-react'; -import { LALA_CABIN_DATA } from './constants'; -import { GeometricChart } from './components/GeometricChart'; -import { KeywordBubble } from './components/KeywordBubble'; -import { BrandData, USP } from './types'; - -// Logic to calculate scores based on ICP (Ideal Customer Profile) signals -const calculateDynamicScores = (data: BrandData): USP[] => { - // 1. Extract Demand Signals from Targets (Needs + Triggers) - const marketSignals = data.targets.flatMap(t => [...t.needs, ...t.triggers]).map(s => s.replace(/\s+/g, '')); - - // High value keywords that represent the "Core Value" of this specific property type - const coreKeywords = ['프라이빗', '감성', '독채', '캐빈', '조명', '불멍', 'Private', 'Mood']; - - return data.usps.map(usp => { - let calculatedScore = 65; // Base score - const contentStr = (usp.label + usp.subLabel + usp.description).replace(/\s+/g, ''); - - // 2. Cross-reference USP with Market Signals - marketSignals.forEach(signal => { - if (contentStr.includes(signal)) calculatedScore += 4; - }); - - // 3. Boost based on Core Keywords (Weighted Importance) - coreKeywords.forEach(keyword => { - if (contentStr.includes(keyword)) calculatedScore += 6; - }); - - // 4. Special Boost based on specific Marketing Pillars (checking English SubLabels) - if (usp.subLabel === 'CONCEPT') calculatedScore += 10; - if (usp.subLabel === 'PRIVACY') calculatedScore += 8; - if (usp.subLabel === 'NIGHT MOOD') calculatedScore += 8; - if (usp.subLabel === 'PHOTO SPOT') calculatedScore += 5; - - return { - ...usp, - score: Math.min(Math.round(calculatedScore), 99) // Cap at 99 - }; - }); -}; - -export default function App() { - const rawData = LALA_CABIN_DATA; - - // Calculate scores on mount (or when data changes) - const scoredUSPs = useMemo(() => calculateDynamicScores(rawData), [rawData]); - - // Find the top selling point - const topUSP = useMemo(() => [...scoredUSPs].sort((a, b) => b.score - a.score)[0], [scoredUSPs]); - - return ( -
- {/* Top Navigation */} -
- -
- - {/* Main Header */} -
-
-
- -
-
-

브랜드 인텔리전스

-

- AI 데이터 분석을 통해 도출된 라라캐빈의 핵심 전략입니다. -

-
- - {/* Grid Container */} -
- - {/* LEFT COLUMN: Identity & Text Analysis */} -
- - {/* Main Identity Card */} -
-
-
- - 브랜드 정체성 - -
- -

{rawData.name}

-
- -
-

{rawData.address}

-

{rawData.subAddress}

-
-
- -
-
-

입지 특성 분석

-

{rawData.locationAnalysis}

-
-
-

컨셉 확장성

-

{rawData.conceptAnalysis}

-
-
-
- - {/* Positioning & Strategy Card */} -
-

- 시장 포지셔닝 -

- -
-
- 카테고리 정의 - {rawData.positioning.category} -
-
- 핵심 가치 (Core Value) - {rawData.positioning.coreValue} -
-
-
- - {/* Target Audience Card */} -
-

- 타겟 페르소나 -

-
- {rawData.targets.map((target, idx) => ( -
-
-
{target.segment}
-
{target.age}
-
-
-
- {target.needs.map((need, i) => ( - {need} - ))} -
-

- Trigger: {target.triggers.join(', ')} -

-
-
- ))} -
-
- -
- - {/* RIGHT COLUMN: Visuals & Keywords */} -
- - {/* Chart Card */} -
- -
-

주요 셀링 포인트 (USP)

-
- - AI Data Analysis -
-
- -
- -
- - {/* Core Competitiveness Highlight */} - {topUSP && ( -
-
- -
-
-
- Core Competitiveness -
-
-
-
{topUSP.label}
-
{topUSP.subLabel}
-
- {/* Score removed */} -
-
-
- )} - -
- {scoredUSPs.filter(u => u.label !== topUSP.label).slice(0, 4).map((usp, idx) => ( -
-
-
{usp.subLabel}
- {/* Score removed */} -
-
{usp.label}
-
{usp.description}
-
- ))} -
-
- - {/* Keywords Card */} -
-

추천 타겟 키워드

-
- {rawData.keywords.map((keyword, idx) => ( - - ))} -
-
- -
-
- - {/* Floating Action Button (Sticky Bottom) */} -
- -
-
- ); -} \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/README.md b/ado2-marketing-intelligence---lala-cabin/README.md deleted file mode 100755 index d767aa2..0000000 --- a/ado2-marketing-intelligence---lala-cabin/README.md +++ /dev/null @@ -1,20 +0,0 @@ -
-GHBanner -
- -# Run and deploy your AI Studio app - -This contains everything you need to run your app locally. - -View your app in AI Studio: https://ai.studio/apps/drive/198bB4uG9EOOi0btQWINncwYJz7xEjWS3 - -## Run Locally - -**Prerequisites:** Node.js - - -1. Install dependencies: - `npm install` -2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key -3. Run the app: - `npm run dev` diff --git a/ado2-marketing-intelligence---lala-cabin/components/GeometricChart.tsx b/ado2-marketing-intelligence---lala-cabin/components/GeometricChart.tsx deleted file mode 100755 index 4c66635..0000000 --- a/ado2-marketing-intelligence---lala-cabin/components/GeometricChart.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React from 'react'; -import { USP } from '../types'; - -interface GeometricChartProps { - data: USP[]; -} - -export const GeometricChart: React.FC = ({ data }) => { - // Increased canvas size to prevent labels (especially on the right side like 'Privacy') from being cut off - const size = 500; - const center = size / 2; - const radius = 110; // Slightly increased radius for better visibility - const sides = data.length; - - // Mint Color #94FBE0 - const accentColor = "#94FBE0"; - - // Calculate polygon points - const getPoints = (r: number) => { - return data.map((_, i) => { - const angle = (Math.PI * 2 * i) / sides - Math.PI / 2; - const x = center + r * Math.cos(angle); - const y = center + r * Math.sin(angle); - return `${x},${y}`; - }).join(' '); - }; - - // Calculate data points based on score - const getDataPoints = () => { - return data.map((item, i) => { - const normalizedScore = item.score / 100; - const r = radius * normalizedScore; - const angle = (Math.PI * 2 * i) / sides - Math.PI / 2; - const x = center + r * Math.cos(angle); - const y = center + r * Math.sin(angle); - return `${x},${y}`; - }).join(' '); - }; - - // Calculate label positions (pushed out slightly further) - const labelRadius = radius + 55; // Increased padding for labels - const labels = data.map((item, i) => { - const angle = (Math.PI * 2 * i) / sides - Math.PI / 2; - const x = center + labelRadius * Math.cos(angle); - const y = center + labelRadius * Math.sin(angle); - - // Adjust text anchor based on position - let anchor: 'start' | 'middle' | 'end' = 'middle'; - if (x < center - 20) anchor = 'end'; - if (x > center + 20) anchor = 'start'; - - return { x, y, text: item.label, sub: item.subLabel, anchor, score: item.score }; - }); - - return ( -
- - - - - - - - - {/* Background Grids (Concentric) - Increased Opacity for Visibility */} - {[1, 0.75, 0.5, 0.25].map((scale, i) => ( - - ))} - - {/* Axes Lines - Increased Opacity */} - {data.map((_, i) => { - const angle = (Math.PI * 2 * i) / sides - Math.PI / 2; - const x = center + radius * Math.cos(angle); - const y = center + radius * Math.sin(angle); - return ( - - ); - })} - - {/* Data Shape */} - - - {/* Data Points (Dots) - Increased base size and highlight size */} - {data.map((item, i) => { - const normalizedScore = item.score / 100; - const r = radius * normalizedScore; - const angle = (Math.PI * 2 * i) / sides - Math.PI / 2; - const x = center + r * Math.cos(angle); - const y = center + r * Math.sin(angle); - const isHigh = item.score >= 90; - return ( - - {isHigh && ( - - )} - {/* Base dot is brighter (white) for all, slightly smaller for non-high */} - - - ) - })} - - {/* Labels */} - {labels.map((l, i) => { - const isHigh = l.score >= 90; - return ( - - - {l.text} - - - {l.sub} - - - ); - })} - -
- ); -}; \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/components/KeywordBubble.tsx b/ado2-marketing-intelligence---lala-cabin/components/KeywordBubble.tsx deleted file mode 100755 index 3ac29fc..0000000 --- a/ado2-marketing-intelligence---lala-cabin/components/KeywordBubble.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -interface KeywordBubbleProps { - text: string; -} - -export const KeywordBubble: React.FC = ({ text }) => { - return ( -
- # {text} -
- ); -}; \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/constants.ts b/ado2-marketing-intelligence---lala-cabin/constants.ts deleted file mode 100755 index 6cacae7..0000000 --- a/ado2-marketing-intelligence---lala-cabin/constants.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { BrandData } from './types'; - -export const LALA_CABIN_DATA: BrandData = { - name: "라라캐빈 펜션", - address: "경기 가평군 조종면 와곡길 176", - subAddress: "[별관] 경기 가평군 조종면 운악리 175-6", - summary: "서울·경기 북부 근교 1~2시간대 숏브레이크 권역에 위치한 캐빈 감성 스테이. 조종면의 한적함과 프라이빗한 독채 구조를 강점으로 내세우며, '숲속 캐빈 무드'와 '야간 조명 감성'이 핵심입니다.", - locationAnalysis: "조종면은 청평/가평읍 대비 '한적함·프라이빗' 이미지가 강해 커플 및 소규모 힐링 고객에게 유리하며, 운악산 권역의 자연형 스테이 포지셔닝에 적합합니다.", - conceptAnalysis: "'라라캐빈'은 오두막(Cabin) 연상을 강하게 주며, 감성 목조/숲속/프라이빗 스테이로 스토리텔링 확장성이 큽니다. 별관의 동 분리 구조는 '세컨드 하우스' 느낌을 강화합니다.", - usps: [ - { label: "입지 환경", subLabel: "LOCATION", score: 85, description: "서울근교 한적한 조종면 자연권 숲속 드라이브" }, - { label: "브랜드 컨셉", subLabel: "CONCEPT", score: 95, description: "숙소 자체가 여행 목적이 되는 캐빈 감성" }, - { label: "프라이버시", subLabel: "PRIVACY", score: 90, description: "우리만 쓰는 느낌의 별관 분리동 독립 동선" }, - { label: "야간 무드", subLabel: "NIGHT MOOD", score: 92, description: "어두울수록 예쁜 스테이 장면과 불멍" }, - { label: "힐링 요소", subLabel: "HEALING", score: 88, description: "창밖 자연로딩, 숲뷰 산책 리셋" }, - { label: "포토 스팟", subLabel: "PHOTO SPOT", score: 94, description: "찍는 곳마다 커버샷 무드, 인스타 각" }, - { label: "숏브레이크", subLabel: "SHORT GETAWAY", score: 80, description: "1박2일 가볍게 떠나는 주말 리셋 여행" } - ], - keywords: [ - "가평 독채 펜션", "숲속 오두막", "감성 숙소", "불멍 스테이", - "서울근교 드라이브", "프라이빗 힐링", "커플 여행", "운악산 펜션", - "반려견 동반", "비오는날 감성" - ], - targets: [ - { - segment: "서울·경기 커플", - age: "25~39세", - needs: ["사진", "분위기", "프라이빗"], - triggers: ["숲속 캐빈 무드", "비 오는 날 감성", "밤 조명"] - }, - { - segment: "소규모 우정여행", - age: "20~34세", - needs: ["예쁜 공간", "수다", "바베큐"], - triggers: ["인스타 각", "감성 포토존", "테이블 셋업"] - }, - { - segment: "힐링 부부", - age: "30~50세", - needs: ["조용한 휴식", "숙면", "따뜻함"], - triggers: ["조용한 숲뷰", "따뜻한 캐빈", "기념일"] - } - ], - positioning: { - category: "서울근교 숲속 캐빈 감성 스테이", - coreValue: "프라이빗한 휴식 + 사진이 되는 공간 + 밤 무드", - strategy: "시설 나열보다 '장면(Scenes)' 중심의 마케팅 전개" - } -}; \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/index.html b/ado2-marketing-intelligence---lala-cabin/index.html deleted file mode 100755 index f7651b2..0000000 --- a/ado2-marketing-intelligence---lala-cabin/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - ADO2 Brand Analysis - - - - - - - - -
- - - \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/index.tsx b/ado2-marketing-intelligence---lala-cabin/index.tsx deleted file mode 100755 index 6ca5361..0000000 --- a/ado2-marketing-intelligence---lala-cabin/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App'; - -const rootElement = document.getElementById('root'); -if (!rootElement) { - throw new Error("Could not find root element to mount to"); -} - -const root = ReactDOM.createRoot(rootElement); -root.render( - - - -); \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/metadata.json b/ado2-marketing-intelligence---lala-cabin/metadata.json deleted file mode 100755 index 1bfb315..0000000 --- a/ado2-marketing-intelligence---lala-cabin/metadata.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "ADO2 Marketing Intelligence - Lala Cabin", - "description": "AI-powered marketing analysis dashboard for Lala Cabin Pension visualizing brand identity, target demographics, and key selling points.", - "requestFramePermissions": [] -} \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/package.json b/ado2-marketing-intelligence---lala-cabin/package.json deleted file mode 100755 index 1803756..0000000 --- a/ado2-marketing-intelligence---lala-cabin/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "ado2-marketing-intelligence---lala-cabin", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "react-dom": "^19.2.3", - "react": "^19.2.3", - "lucide-react": "^0.563.0" - }, - "devDependencies": { - "@types/node": "^22.14.0", - "@vitejs/plugin-react": "^5.0.0", - "typescript": "~5.8.2", - "vite": "^6.2.0" - } -} diff --git a/ado2-marketing-intelligence---lala-cabin/tsconfig.json b/ado2-marketing-intelligence---lala-cabin/tsconfig.json deleted file mode 100755 index 2c6eed5..0000000 --- a/ado2-marketing-intelligence---lala-cabin/tsconfig.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2022", - "experimentalDecorators": true, - "useDefineForClassFields": false, - "module": "ESNext", - "lib": [ - "ES2022", - "DOM", - "DOM.Iterable" - ], - "skipLibCheck": true, - "types": [ - "node" - ], - "moduleResolution": "bundler", - "isolatedModules": true, - "moduleDetection": "force", - "allowJs": true, - "jsx": "react-jsx", - "paths": { - "@/*": [ - "./*" - ] - }, - "allowImportingTsExtensions": true, - "noEmit": true - } -} \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/types.ts b/ado2-marketing-intelligence---lala-cabin/types.ts deleted file mode 100755 index 9ea0640..0000000 --- a/ado2-marketing-intelligence---lala-cabin/types.ts +++ /dev/null @@ -1,30 +0,0 @@ -export interface USP { - label: string; - subLabel: string; - score: number; // 0-100 - description: string; -} - -export interface TargetPersona { - segment: string; - age: string; - needs: string[]; - triggers: string[]; -} - -export interface BrandData { - name: string; - address: string; - subAddress: string; - summary: string; - locationAnalysis: string; - conceptAnalysis: string; - usps: USP[]; - keywords: string[]; - targets: TargetPersona[]; - positioning: { - category: string; - coreValue: string; - strategy: string; - }; -} \ No newline at end of file diff --git a/ado2-marketing-intelligence---lala-cabin/vite.config.ts b/ado2-marketing-intelligence---lala-cabin/vite.config.ts deleted file mode 100755 index ee5fb8d..0000000 --- a/ado2-marketing-intelligence---lala-cabin/vite.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import path from 'path'; -import { defineConfig, loadEnv } from 'vite'; -import react from '@vitejs/plugin-react'; - -export default defineConfig(({ mode }) => { - const env = loadEnv(mode, '.', ''); - return { - server: { - port: 3000, - host: '0.0.0.0', - }, - plugins: [react()], - define: { - 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), - 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) - }, - resolve: { - alias: { - '@': path.resolve(__dirname, '.'), - } - } - }; -}); diff --git a/index.css b/index.css deleted file mode 100644 index c28b10d..0000000 --- a/index.css +++ /dev/null @@ -1,12585 +0,0 @@ -/* ===================================================== - CASTAD Design System - CSS Variables & Component Classes - ===================================================== */ - -/* ===================================================== - CSS Variables - Design Tokens - ===================================================== */ -:root { - /* Primary Colors */ - --color-mint: #a6ffea; - --color-mint-hover: #8affda; - --color-mint-glow: rgba(166, 255, 234, 0.6); - --color-mint-10: rgba(166, 255, 234, 0.1); - --color-mint-20: rgba(166, 255, 234, 0.2); - --color-mint-30: rgba(166, 255, 234, 0.3); - --color-mint-50: rgba(166, 255, 234, 0.5); - - --color-purple: #a682ff; - --color-purple-hover: #9570f0; - --color-purple-glow: rgba(166, 130, 255, 0.2); - --color-purple-80: rgba(166, 130, 255, 0.8); - - /* Background Colors - Teal-600 based */ - --color-bg-dark: #002224; - --color-bg-darker: #001a1c; - --color-bg-card: #003538; - --color-bg-card-inner: #004548; - - /* Text Colors */ - --color-text-white: #ffffff; - --color-text-gray-300: #d1d5db; - --color-text-gray-400: #9ca3af; - --color-text-gray-500: #6b7280; - - /* Border Colors */ - --color-border-white-5: rgba(255, 255, 255, 0.05); - --color-border-white-10: rgba(255, 255, 255, 0.1); - --color-border-gray-600: #4b5563; - --color-border-gray-700: #374151; - - /* Shadows */ - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - --shadow-purple: 0 10px 15px -3px rgba(166, 130, 255, 0.2); - --shadow-mint-glow: 0 0 10px rgba(166, 255, 234, 0.6); - - /* Spacing */ - --spacing-page: 1.5rem; - --spacing-page-md: 2rem; - - /* Border Radius */ - --radius-sm: 0.5rem; - --radius-md: 0.75rem; - --radius-lg: 1rem; - --radius-xl: 1.25rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-full: 9999px; - - /* Font Sizes */ - --text-xs: 0.75rem; - --text-sm: 0.875rem; - --text-base: 1rem; - --text-lg: 1.125rem; - --text-xl: 1.25rem; - --text-2xl: 1.5rem; - --text-3xl: 1.875rem; - --text-4xl: 2.25rem; - - /* Transitions */ - --transition-fast: 150ms; - --transition-normal: 200ms; - --transition-slow: 300ms; -} - -/* ===================================================== - Layout Components - ===================================================== */ - -/* Landing Page Container - Free Scroll */ -.landing-container { - width: 100%; - height: 100dvh; - overflow-y: scroll; - overflow-x: hidden; - background-color: var(--color-bg-darker); -} - -.landing-section { - background: var(--Color-teal-800, #002224); - min-height: 100dvh; - width: 100%; -} - -/* Page Container */ -.page-container { - display: flex; - flex-direction: column; - height: 100%; - padding: var(--spacing-page); - overflow: hidden; - background-color: #002224; - position: relative; -} - -@media (min-width: 768px) { - .page-container { - padding: var(--spacing-page-md); - } -} - -/* Page Container - Full Height with Background */ -.page-container-full { - width: 100%; - min-height: 100dvh; - color: var(--color-text-white); - display: flex; - flex-direction: column; - padding: var(--spacing-page); - background-color: var(--color-bg-dark); -} - -@media (min-width: 768px) { - .page-container-full { - padding: var(--spacing-page-md); - } -} - -@media (min-width: 1024px) { - .page-container-full { - padding: 2.5rem; - } -} - -/* Wizard Page Container - 단계별 페이지 전환용 */ -.wizard-page-container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - background-color: #002224; - overflow-y: auto; -} - -/* Main Content Area */ -.main-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 1.5rem; - max-width: 72rem; - margin-left: auto; - margin-right: auto; - width: 100%; - min-height: 0; - overflow: hidden; -} - -@media (min-width: 1024px) { - .main-content { - flex-direction: row; - } -} - -/* Dashboard Layout */ -.dashboard-layout { - display: flex; - width: 100%; - min-height: 100dvh; - background-color: var(--color-bg-darker); - color: var(--color-text-white); -} - -.dashboard-content { - flex: 1; - min-height: 0; - position: relative; - overflow-y: auto; - padding-left: 0; -} - -/* ===================================================== - Card Components - ===================================================== */ - -/* Base Card */ -.card { - background-color: var(--color-bg-card); - border-radius: var(--radius-3xl); - padding: var(--spacing-page); - border: 1px solid var(--color-border-white-5); - box-shadow: var(--shadow-xl); -} - -@media (min-width: 768px) { - .card { - padding: var(--spacing-page-md); - } -} - -/* Card Variants */ -.card-flex { - display: flex; - flex-direction: column; -} - -.card-flex-1 { - flex: 1; -} - -.card-flex-2 { - flex: 2; -} - -.card-overflow-hidden { - overflow: hidden; -} - -/* Card Inner (Darker Background) */ -.card-inner { - background-color: rgba(18, 26, 29, 0.5); - border-radius: var(--radius-2xl); - border: 1px solid var(--color-border-white-5); - padding: 1rem; -} - -/* ===================================================== - Header Components - ===================================================== */ - -/* Page Header */ -.page-header { - text-align: center; - margin-bottom: 2rem; - flex-shrink: 0; -} - -/* Page Title */ -.page-title { - font-size: var(--text-3xl); - font-weight: 700; - margin-bottom: 0.5rem; - letter-spacing: -0.025em; -} - -@media (min-width: 768px) { - .page-title { - font-size: var(--text-4xl); - } -} - -/* Page Subtitle */ -.page-subtitle { - color: var(--color-text-gray-400); - font-size: var(--text-base); -} - -@media (min-width: 768px) { - .page-subtitle { - font-size: var(--text-lg); - } -} - -/* Section Title (Mint color uppercase) */ -.section-title { - color: #94FBE0; - font-size: 16px; - font-weight: 600; - letter-spacing: -0.006em; - margin-bottom: 0; - flex-shrink: 0; -} - -/* Section Title Purple */ -.section-title-purple { - color: #AE72F9; - font-size: 16px; - font-weight: 600; - letter-spacing: -0.006em; - margin-bottom: 0; - display: block; -} - -/* ===================================================== - Button Components - ===================================================== */ - -/* Primary Button (Purple) */ -.btn-primary { - background-color: var(--color-purple); - color: var(--color-text-white); - font-weight: 700; - padding: 1rem 4rem; - border-radius: var(--radius-full); - transition: all var(--transition-normal); - transform: scale(1); - box-shadow: var(--shadow-purple); - font-size: var(--text-lg); - border: none; - cursor: pointer; -} - -.btn-primary:hover { - background-color: var(--color-purple-hover); -} - -.btn-primary:active { - transform: scale(0.95); -} - -.btn-primary:disabled { - background-color: #4b5563; - color: var(--color-text-gray-400); - cursor: not-allowed; - box-shadow: none; -} - -/* Secondary Button (Mint) */ -.btn-secondary { - background-color: var(--color-mint); - color: var(--color-bg-dark); - font-weight: 700; - padding: 1rem; - border-radius: var(--radius-xl); - transition: all var(--transition-normal); - transform: scale(1); - font-size: var(--text-base); - border: none; - cursor: pointer; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.btn-secondary:hover { - background-color: var(--color-mint-hover); -} - -.btn-secondary:active { - transform: scale(0.98); -} - -.btn-secondary:disabled { - background-color: rgba(166, 255, 234, 0.5); - color: rgba(18, 26, 29, 0.5); - cursor: not-allowed; -} - -/* Outline Button */ -.btn-outline { - background-color: transparent; - border: 1px solid var(--color-border-gray-600); - color: var(--color-text-white); - font-weight: 700; - padding: 1rem 4rem; - border-radius: var(--radius-full); - transition: all var(--transition-normal); - font-size: var(--text-base); - cursor: pointer; -} - -.btn-outline:hover { - border-color: var(--color-text-gray-500); -} - -/* Back Button */ -.btn-back { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.25rem; - border-radius: var(--radius-full); - border: 1px solid var(--color-border-gray-600); - background-color: transparent; - color: var(--color-text-gray-300); - font-size: var(--text-base); - transition: background-color var(--transition-normal); - cursor: pointer; -} - -.btn-back:hover { - background-color: rgba(31, 41, 55, 1); -} - -/* Regenerate Button (Mint Outline) */ -.btn-regenerate { - margin-top: 1rem; - width: 100%; - padding: 0.75rem; - background-color: var(--color-mint-20); - color: var(--color-mint); - border: 1px solid var(--color-mint-30); - font-weight: 700; - border-radius: var(--radius-xl); - transition: background-color var(--transition-normal); - font-size: var(--text-base); - flex-shrink: 0; - cursor: pointer; -} - -.btn-regenerate:hover { - background-color: var(--color-mint-30); -} - -.btn-regenerate:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Selection Button */ -.btn-select { - padding: 0.75rem; - border-radius: var(--radius-xl); - border: 1px solid var(--color-border-gray-700); - background-color: rgba(18, 26, 29, 0.4); - color: var(--color-text-gray-400); - font-size: var(--text-sm); - font-weight: 700; - transition: all var(--transition-normal); - cursor: pointer; -} - -.btn-select:hover { - border-color: var(--color-border-gray-600); -} - -.btn-select.active { - border-color: var(--color-mint); - background-color: var(--color-bg-dark); - color: var(--color-mint); -} - -.btn-select:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ===================================================== - Form Components - ===================================================== */ - -/* Select Input */ -.select-input { - width: 100%; - padding: 0.75rem 1rem; - border-radius: var(--radius-xl); - background-color: var(--color-bg-dark); - border: 1px solid var(--color-border-gray-700); - font-size: var(--text-base); - color: var(--color-text-gray-300); -} - -.select-input:focus { - outline: none; - border-color: var(--color-mint); -} - -.select-input:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Text Input */ -.text-input { - width: 100%; - padding: 0.75rem 1rem; - border-radius: var(--radius-xl); - background-color: var(--color-bg-dark); - border: 1px solid var(--color-border-gray-700); - font-size: var(--text-base); - color: var(--color-text-gray-300); -} - -.text-input:focus { - outline: none; - border-color: var(--color-mint); -} - -/* Textarea - Lyrics */ -.textarea-lyrics { - flex: 1; - overflow-y: auto; - font-size: var(--text-sm); - color: var(--color-text-gray-400); - background-color: transparent; - resize: none; - border: none; - padding-right: 0.5rem; - line-height: 1.625; - min-height: 0; -} - -.textarea-lyrics:focus { - outline: none; - color: var(--color-text-gray-300); -} - -/* ===================================================== - Navigation Components - ===================================================== */ - -/* Back Button Container */ -.back-button-container { - width: 100%; - max-width: 1040px; - display: flex; - justify-content: flex-start; - margin-bottom: 1.5rem; - flex-shrink: 0; -} - -/* Bottom Button Container */ -.bottom-button-container { - position: fixed; - bottom: 32px; - left: 0; - right: 0; - display: flex; - justify-content: center; - z-index: 30; - pointer-events: none; -} - -.bottom-button-container > * { - pointer-events: all; -} - -@media (min-width: 768px) { - .bottom-button-container { - left: 240px; - } -} - -/* ===================================================== - Sidebar Components - ===================================================== */ - -/* Sidebar Container */ -.sidebar { - position: fixed; - height: 100vh; - display: flex; - flex-direction: column; - background-color: var(--color-bg-dark); - border-right: 1px solid var(--color-border-white-5); - transition: all var(--transition-slow); - z-index: 50; -} - -@media (min-width: 768px) { - .sidebar { - position: sticky; - top: 0; - flex-shrink: 0; - } -} - -.sidebar.expanded { - width: 15rem; -} - -.sidebar.collapsed { - width: 5rem; -} - -.sidebar.mobile-open { - transform: translateX(0); -} - -.sidebar.mobile-closed { - transform: translateX(-100%); -} - -@media (min-width: 768px) { - .sidebar.mobile-closed { - transform: translateX(0); - } -} - -/* Sidebar Header */ -.sidebar-header { - padding: 1.25rem; - display: flex; - align-items: center; - justify-content: space-between; -} - -.sidebar-header.collapsed { - flex-direction: column; - gap: 1rem; -} - -/* Sidebar Logo */ -.sidebar-logo { - font-family: 'Playfair Display', serif; - font-style: italic; - font-size: var(--text-2xl); - font-weight: 700; - letter-spacing: -0.025em; - color: var(--color-text-white); - cursor: pointer; - transition: color var(--transition-normal); -} - -.sidebar-logo:hover { - color: var(--color-mint); -} - -/* Sidebar Menu */ -.sidebar-menu { - flex: 1; - padding: 0 0.75rem; - margin-top: 1rem; - overflow-y: auto; -} - -/* Sidebar Menu Item */ -.sidebar-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - border-radius: var(--radius-xl); - transition: all var(--transition-normal); - cursor: pointer; - margin-bottom: 0.25rem; - position: relative; - overflow: hidden; -} - -.sidebar-item.collapsed { - justify-content: center; - width: 3rem; - height: 3rem; - margin-left: auto; - margin-right: auto; - padding: 0; -} - -.sidebar-item.active { - background-color: var(--color-mint); - color: var(--color-bg-dark); -} - -.sidebar-item:not(.active) { - color: var(--color-text-gray-400); -} - -.sidebar-item:not(.active):not(.disabled):hover { - background-color: rgba(255, 255, 255, 0.05); - color: var(--color-text-white); -} - -.sidebar-item.disabled { - opacity: 0.4; - cursor: not-allowed; - pointer-events: none; -} - -.sidebar-item-icon { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - transition: color var(--transition-normal); -} - -.sidebar-item.active .sidebar-item-icon { - color: var(--color-bg-dark); -} - -.sidebar-item-label { - font-size: 16px; - font-weight: 700; - white-space: nowrap; -} - -/* Sidebar Footer */ -.sidebar-footer { - padding: 1rem; - margin-top: auto; - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Credit Card */ -.credit-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-2xl); - padding: 1rem; - border: 1px solid var(--color-border-white-5); -} - -.credit-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -.credit-label { - color: var(--color-text-gray-400); - font-size: var(--text-sm); - font-weight: 500; -} - -.credit-value { - color: var(--color-text-white); - font-size: var(--text-sm); - font-weight: 700; -} - -.credit-bar { - width: 100%; - height: 0.375rem; - background-color: #1f2937; - border-radius: var(--radius-full); - overflow: hidden; - margin-bottom: 0.75rem; -} - -.credit-bar-fill { - height: 100%; - background-color: var(--color-mint); -} - -.credit-upgrade-btn { - width: 100%; - padding: 0.625rem; - background-color: var(--color-bg-dark); - color: var(--color-text-white); - font-size: var(--text-sm); - font-weight: 700; - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-gray-700); - transition: background-color var(--transition-normal); - cursor: pointer; -} - -.credit-upgrade-btn:hover { - background-color: #1f2937; -} - -/* Profile Section */ -.profile-section { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0 0.5rem; -} - -.profile-section.collapsed { - flex-direction: column; -} - -.profile-avatar { - width: 2.5rem; - height: 2.5rem; - border-radius: var(--radius-full); - border: 1px solid var(--color-border-gray-700); - object-fit: cover; -} - -.profile-avatar-default { - display: flex; - align-items: center; - justify-content: center; - background-color: var(--color-bg-gray-700); - color: var(--color-text-gray-400); -} - -.profile-name { - color: var(--color-text-white); - font-size: var(--text-sm); - font-weight: 700; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.profile-credits { - color: rgba(255, 255, 255, 0.6); - font-size: 12px; - font-weight: 500; - margin-top: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Sidebar Language Switch */ -.sidebar-language-switch { - padding: 0 1rem 0.75rem; - display: flex; - justify-content: flex-start; -} - -/* Toggle container */ -.lang-toggle { - position: relative; - display: flex; - background: rgba(255, 255, 255, 0.08); - border-radius: 999px; - padding: 2px; - width: 100%; - max-width: 120px; -} - -.lang-toggle-option { - flex: 1; - position: relative; - z-index: 1; - padding: 4px 0; - font-size: 14px; - font-weight: 600; - letter-spacing: 0.03em; - color: rgba(255, 255, 255, 0.4); - background: none; - border: none; - cursor: pointer; - transition: color 0.3s ease; - text-align: center; -} - -.lang-toggle-option.active { - color: #ffffff; -} - -.lang-toggle-option:hover:not(.active) { - color: rgba(255, 255, 255, 0.6); -} - -/* Sliding indicator */ -.lang-toggle-slider { - position: absolute; - top: 2px; - bottom: 2px; - width: calc(50% - 2px); - background: rgba(255, 255, 255, 0.15); - border-radius: 999px; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - pointer-events: none; -} - -.lang-toggle-slider.left { - transform: translateX(2px); -} - -.lang-toggle-slider.right { - transform: translateX(calc(100% + 2px)); -} - -/* Collapsed state - simple button */ -.lang-toggle-collapsed { - padding: 4px 6px; - font-size: 10px; - font-weight: 700; - letter-spacing: 0.03em; - color: rgba(255, 255, 255, 0.5); - background: rgba(255, 255, 255, 0.08); - border: none; - border-radius: 6px; - cursor: pointer; - transition: all 0.3s ease; -} - -.lang-toggle-collapsed:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.15); -} - -/* Sidebar Footer Actions */ -.sidebar-footer-actions { - display: flex; - flex-direction: column; -} - -.sidebar-footer-actions .logout-btn { - width: 100%; -} - -.sidebar-inquiry-btn { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - color: var(--color-text-gray-400); - text-decoration: none; - transition: color var(--transition-normal); - white-space: nowrap; - font-size: var(--text-sm); - font-weight: 700; - flex-shrink: 0; -} - -.sidebar-inquiry-btn:hover { - color: var(--color-text-white); -} - -.sidebar-inquiry-btn.collapsed { - justify-content: center; - padding: 0.75rem; -} - -/* Logout Button */ -.logout-btn { - width: 100%; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - color: var(--color-text-gray-400); - background: none; - border: none; - transition: color var(--transition-normal); - cursor: pointer; -} - -.logout-btn:hover { - color: var(--color-text-white); -} - -.logout-btn.collapsed { - justify-content: center; -} - -.logout-btn-label { - font-size: var(--text-sm); - font-weight: 700; -} - -/* 모바일 전용 사이드바 튜토리얼 토글 */ -.sidebar-tutorial-btn { - display: none; -} - -@media (max-width: 767px) { - .sidebar-tutorial-btn { - display: flex; - align-items: center; - gap: 0.75rem; - width: 100%; - margin-top: 0.5rem; - padding: 0.75rem; - border-radius: var(--radius-lg); - color: var(--color-text-gray-400); - border: none; - background: none; - cursor: pointer; - font-size: var(--text-sm); - font-weight: 500; - transition: color var(--transition-normal), background-color var(--transition-normal); - } - - .sidebar-tutorial-btn:hover { - color: var(--color-text-white); - background-color: rgba(255, 255, 255, 0.05); - } - - .sidebar-tutorial-btn.active { - color: var(--color-mint); - } - - .sidebar-tutorial-label { - text-align: left; - } - - .sidebar-tutorial-badge { - font-size: 11px; - font-weight: 700; - } - - .sidebar-tutorial-badge.on { - color: var(--color-mint); - } - - .sidebar-tutorial-badge.off { - color: var(--color-text-gray-400); - } -} - -/* Mobile Menu Button */ -.mobile-menu-btn { - position: fixed; - top: 1rem; - right: 1rem; - z-index: 40; - padding: 0.625rem; - background-color: var(--color-bg-card); - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-white-10); - color: var(--color-text-gray-400); - cursor: pointer; -} - -.mobile-menu-btn:hover { - color: var(--color-text-white); -} - -@media (min-width: 768px) { - .mobile-menu-btn { - display: none; - } -} - -/* Mobile Overlay */ -.mobile-overlay { - position: fixed; - inset: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 40; -} - -@media (min-width: 768px) { - .mobile-overlay { - display: none; - } -} - -/* ===================================================== - Player Components - ===================================================== */ - -/* Player Bar */ -.player-bar { - background-color: rgba(0, 0, 0, 0.4); - border-radius: var(--radius-full); - padding: 0.75rem; - display: flex; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; -} - -/* Play Button */ -.play-btn { - color: var(--color-mint); - flex-shrink: 0; - transition: transform var(--transition-normal); - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.play-btn:hover { - transform: scale(1.1); -} - -.play-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Progress Bar */ -.progress-bar-container { - flex: 1; - height: 0.375rem; - background-color: #1f2937; - border-radius: var(--radius-full); - position: relative; - cursor: pointer; -} - -.progress-bar-container:disabled, -.progress-bar-container.disabled { - cursor: not-allowed; - opacity: 0.5; -} - -.progress-bar-fill { - position: absolute; - left: 0; - top: 0; - height: 100%; - background-color: var(--color-mint); - border-radius: var(--radius-full); -} - -.progress-bar-thumb { - position: absolute; - top: 50%; - transform: translateY(-50%) translateX(-50%); - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; -} - -.progress-bar-thumb-glow { - position: absolute; - width: 1rem; - height: 1rem; - background-color: var(--color-mint); - border-radius: var(--radius-full); - opacity: 0.2; - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -.progress-bar-thumb-dot { - width: 0.75rem; - height: 0.75rem; - background-color: var(--color-mint); - border-radius: var(--radius-full); - box-shadow: var(--shadow-mint-glow); - border: 1px solid rgba(18, 26, 29, 0.2); -} - -/* Time Display */ -.time-display { - font-size: var(--text-sm); - color: var(--color-text-gray-500); - font-family: monospace; - text-align: right; - white-space: nowrap; -} - -/* ===================================================== - Image Grid Components - ===================================================== */ - -/* Image Grid */ -.image-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; -} - -.image-grid-4 { - grid-template-columns: repeat(4, 1fr); - gap: 0.5rem; -} - -/* Image Item */ -.image-item { - aspect-ratio: 1; - background-color: rgba(18, 26, 29, 0.5); - border-radius: var(--radius-xl); - border: 1px solid var(--color-border-white-5); - position: relative; - overflow: hidden; -} - -.image-item img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.image-item-badge { - position: absolute; - top: 0.5rem; - left: 0.5rem; - padding: 0.25rem 0.5rem; - background-color: var(--color-purple-80); - border-radius: 0.25rem; - font-size: var(--text-xs); - color: var(--color-text-white); - font-weight: 500; -} - -.image-item-remove { - position: absolute; - top: 0.5rem; - right: 0.5rem; - width: 1.75rem; - height: 1.75rem; - background-color: rgba(0, 0, 0, 0.6); - border-radius: var(--radius-full); - display: flex; - align-items: center; - justify-content: center; - color: rgba(255, 255, 255, 0.7); - border: none; - cursor: pointer; - transition: all var(--transition-normal); -} - -.image-item-remove:hover { - background-color: rgba(239, 68, 68, 0.8); - color: var(--color-text-white); -} - -/* ===================================================== - Upload Components - ===================================================== */ - -/* Upload Zone */ -.upload-zone { - flex: 1; - border: 2px dashed var(--color-border-gray-600); - border-radius: var(--radius-2xl); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 1.5rem; - text-align: center; - cursor: pointer; - transition: border-color var(--transition-normal); -} - -.upload-zone:hover { - border-color: rgba(166, 255, 234, 0.5); -} - -.upload-zone-icon { - margin-bottom: 1rem; - color: var(--color-text-gray-500); - transition: color var(--transition-normal); -} - -.upload-zone:hover .upload-zone-icon { - color: var(--color-mint); -} - -.upload-zone-title { - color: var(--color-text-gray-300); - font-size: var(--text-base); - font-weight: 500; - line-height: 1.625; - margin-bottom: 0.5rem; -} - -.upload-zone-subtitle { - color: var(--color-text-gray-500); - font-size: var(--text-sm); -} - -/* ===================================================== - Tag Components - ===================================================== */ - -/* Tag */ -.tag { - padding: 0.625rem 1.25rem; - background-color: var(--color-bg-card-inner); - border-radius: var(--radius-full); - font-size: var(--text-base); - color: #e5e7eb; - border: 1px solid var(--color-border-white-10); -} - -/* Tag with Dot */ -.tag-dot { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: var(--text-sm); - color: var(--color-text-gray-400); -} - -.tag-dot::before { - content: ''; - width: 0.375rem; - height: 0.375rem; - border-radius: var(--radius-full); - background-color: var(--color-mint); -} - -/* ===================================================== - Social Card Components - ===================================================== */ - -/* Social Card */ -.social-card { - display: flex; - align-items: center; - gap: 1rem; - background-color: var(--color-bg-dark); - padding: 1rem; - border-radius: var(--radius-2xl); - border: 1px solid var(--color-border-white-5); - transition: all var(--transition-normal); - cursor: pointer; -} - -.social-card:hover { - border-color: var(--color-border-white-10); -} - -.social-card.selected { - border-color: var(--color-mint); - box-shadow: 0 0 15px rgba(166, 255, 234, 0.15); - background-color: var(--color-bg-card); -} - -.social-icon { - width: 2.5rem; - height: 2.5rem; - border-radius: var(--radius-xl); - display: flex; - align-items: center; - justify-content: center; - position: relative; - transition: transform var(--transition-slow); -} - -.social-icon-inner { - width: 1.5rem; - height: 1.5rem; - color: var(--color-text-white); -} - -.social-check { - position: absolute; - top: -0.25rem; - right: -0.25rem; - width: 1.25rem; - height: 1.25rem; - background-color: var(--color-mint); - border-radius: var(--radius-full); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-bg-dark); - border: 2px solid var(--color-bg-dark); -} - -.social-name { - font-size: var(--text-base); - font-weight: 700; - transition: color var(--transition-normal); -} - -.social-card.selected .social-name { - color: var(--color-text-white); -} - -.social-card:not(.selected) .social-name { - color: var(--color-text-gray-300); -} - -.social-email { - margin-left: auto; - font-size: var(--text-sm); - color: var(--color-purple); -} - -/* ===================================================== - Video Preview Components - ===================================================== */ - -/* Video Container */ -.video-container { - flex: 1; - background-color: #000; - border-radius: var(--radius-2xl); - position: relative; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - min-height: 200px; -} - -.video-pattern { - position: absolute; - inset: 0; - opacity: 0.1; - background-image: - linear-gradient(45deg, var(--color-bg-dark) 25%, transparent 25%), - linear-gradient(-45deg, var(--color-bg-dark) 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, var(--color-bg-dark) 75%), - linear-gradient(-45deg, transparent 75%, var(--color-bg-dark) 75%); - background-size: 40px 40px; - background-position: 0 0, 0 20px, 20px -20px, -20px 0px; -} - -.video-controls { - position: absolute; - bottom: 1rem; - left: 1rem; - right: 1rem; - z-index: 10; -} - -.video-controls-inner { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.video-play-btn { - color: var(--color-text-white); - background: none; - border: none; - cursor: pointer; - transition: color var(--transition-normal); -} - -.video-play-btn:hover { - color: var(--color-mint); -} - -.video-progress { - flex: 1; - height: 0.375rem; - background-color: rgba(255, 255, 255, 0.2); - border-radius: var(--radius-full); - overflow: hidden; -} - -.video-progress-fill { - height: 100%; - background-color: var(--color-mint); -} - -/* Video Player */ -.video-player { - width: 100%; - height: 100%; - object-fit: contain; - cursor: pointer; -} - -/* Video Loading State */ -.video-loading { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 2rem; - text-align: center; -} - -/* Video Error State */ -.video-error { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 2rem; - text-align: center; -} - -.video-error svg { - width: 4rem; - height: 4rem; - color: #ef4444; - margin-bottom: 1rem; -} - -/* Social Card Disabled State */ -.social-card.disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ===================================================== - Tags Container - ===================================================== */ - -.tags-container { - margin-top: 1rem; - background-color: rgba(18, 26, 29, 0.6); - border-radius: var(--radius-xl); - padding: 0.75rem 1rem; - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: center; - border: 1px solid var(--color-border-white-5); - flex-shrink: 0; -} - -/* ===================================================== - Status Messages - ===================================================== */ - -/* Error Message */ -.error-message { - margin-top: 1rem; - padding: 0.75rem; - background-color: rgba(239, 68, 68, 0.1); - border: 1px solid rgba(239, 68, 68, 0.3); - border-radius: var(--radius-xl); - color: #f87171; - font-size: var(--text-sm); - flex-shrink: 0; -} - -/* Status Message */ -.status-message { - margin-top: 1rem; - padding: 0.75rem; - background-color: var(--color-mint-10); - border: 1px solid var(--color-mint-30); - border-radius: var(--radius-xl); - color: var(--color-mint); - font-size: var(--text-sm); - display: flex; - align-items: center; - gap: 0.5rem; - flex-shrink: 0; -} - -/* ===================================================== - Utility Classes - ===================================================== */ - -/* Flex utilities */ -.flex-center { - display: flex; - align-items: center; - justify-content: center; -} - -.flex-between { - display: flex; - align-items: center; - justify-content: space-between; -} - -.flex-col { - display: flex; - flex-direction: column; -} - -.flex-1 { - flex: 1; -} - -.flex-2 { - flex: 2; -} - -.shrink-0 { - flex-shrink: 0; -} - -.min-h-0 { - min-height: 0; -} - -/* Gap utilities */ -.gap-2 { gap: 0.5rem; } -.gap-3 { gap: 0.75rem; } -.gap-4 { gap: 1rem; } -.gap-6 { gap: 1.5rem; } - -/* Margin utilities */ -.mb-1 { margin-bottom: 0.25rem; } -.mb-2 { margin-bottom: 0.5rem; } -.mb-3 { margin-bottom: 0.75rem; } -.mb-4 { margin-bottom: 1rem; } -.mb-6 { margin-bottom: 1.5rem; } -.mt-4 { margin-top: 1rem; } -.mt-6 { margin-top: 1.5rem; } - -/* Text utilities */ -.text-center { text-align: center; } -.text-right { text-align: right; } -.font-bold { font-weight: 700; } -.font-medium { font-weight: 500; } - -/* Overflow utilities */ -.overflow-hidden { overflow: hidden; } -.overflow-y-auto { overflow-y: auto; } - -/* Width utilities */ -.w-full { width: 100%; } - -/* Animation */ -@keyframes pulse { - 0%, 100% { opacity: 0.2; } - 50% { opacity: 0.4; } -} - -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.animate-spin { - animation: spin 1s linear infinite; -} - -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -/* Grid utilities */ -.grid-cols-3 { - display: grid; - grid-template-columns: repeat(3, 1fr); -} - -/* Space utilities */ -.space-y-4 > * + * { - margin-top: 1rem; -} - -.space-y-5 > * + * { - margin-top: 1.25rem; -} - -/* Min width */ -.min-w-280 { - min-width: 280px; -} - -/* Scrollbar utility */ -.scrollbar-hide { - scrollbar-width: none; - -ms-overflow-style: none; -} - -.scrollbar-hide::-webkit-scrollbar { - display: none; -} - -/* ===================================================== - Completion Page Components - ===================================================== */ - -/* Completion Page Title */ -.completion-title { - font-size: 1.75rem; - font-weight: 600; - color: #E5F1F2; - line-height: 1.19; - letter-spacing: -0.006em; - margin: 0 0 1.5rem 0; - text-align: center; - padding: 0 1rem; -} - -@media (min-width: 768px) { - .completion-title { - font-size: 2.5rem; - margin-bottom: 2rem; - } -} - -/* Completion Container - wrapper for the two cards */ -.completion-container { - margin: 0 auto 1.5rem auto; - max-width: 1400px; - width: calc(100% - 4rem); - display: flex; - flex-direction: column; - gap: 1.5rem; - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; -} - -@media (min-width: 1024px) { - .completion-container { - flex-direction: row; - gap: 2rem; - max-width: 1400px; - overflow: hidden; - } -} - -@media (min-width: 1280px) { - .completion-container { - max-width: 1600px; - } -} - -@media (max-width: 480px) { - .completion-container { - width: calc(100% - 2rem); - gap: 1.25rem; - } -} - -@media (min-width: 481px) and (max-width: 767px) { - .completion-container { - width: calc(100% - 3rem); - } -} - -/* Completion Columns */ -.completion-column { - display: flex; - flex-direction: column; -} - -.completion-column-left { - width: 100%; - min-width: 0; - flex-shrink: 0; -} - -.completion-column-right { - width: 100%; - flex-shrink: 0; -} - -@media (min-width: 1024px) { - .completion-column-left { - flex: 1; - width: auto; - } - - .completion-column-right { - width: 400px; - } -} - -@media (min-width: 1280px) { - .completion-column-right { - width: 450px; - } -} - -/* Video Preview Card & Sharing Card - uses asset-column base + card styling */ -.video-preview-card, -.sharing-card { - background-color: #01393B; - border-radius: 40px; - padding: 1.5rem; - border: none; - box-shadow: none; - overflow: hidden; - display: flex; - flex-direction: column; - gap: 1.25rem; - flex-shrink: 0; -} - -@media (min-width: 768px) { - .video-preview-card, - .sharing-card { - padding: 2rem; - } -} - -@media (min-width: 1024px) { - .video-preview-card { - flex-shrink: 1; - flex: 1; - min-height: 0; - } - - .video-preview-card, - .sharing-card { - padding: 2.5rem; - } -} - -/* Completion Video Wrapper */ -.completion-video-wrapper { - display: flex; - flex-direction: column; -} - -@media (min-width: 1024px) { - .completion-video-wrapper { - flex: 1; - min-height: 0; - } -} - -/* Video Container for Completion - always 16:9 aspect ratio (horizontal letterbox) */ -.video-preview-card .video-container { - position: relative; - aspect-ratio: 16 / 9; - width: 100%; - max-width: 100%; - margin: 0 auto; - background-color: #000; -} - -@media (min-width: 768px) { - .video-preview-card .video-container { - max-width: 100%; - } -} - -@media (min-width: 1024px) { - .video-preview-card .video-container { - max-width: 100%; - } -} - -/* Video Overlay */ -.video-overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); - padding: 1.5rem; - pointer-events: none; -} - -.video-overlay-content { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.video-overlay-title { - font-size: 1.25rem; - font-weight: 800; - color: #FFFFFF; - line-height: 1.3; - letter-spacing: -0.006em; - text-align: center; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); - margin: 0; -} - -.video-overlay-logo { - font-size: 0.375rem; - font-weight: 400; - color: rgba(255, 255, 255, 0.6); - line-height: 1.3; - letter-spacing: -0.006em; - text-align: center; - align-self: flex-end; -} - -/* AI Optimization Section */ -.ai-optimization-section { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 0.75rem; - padding: 1rem; - background-color: #002224; - border-radius: 8px; -} - -@media (min-width: 768px) { - .ai-optimization-section { - flex-direction: row; - gap: 1.25rem; - } -} - -.ai-optimization-title { - font-size: 0.875rem; - font-weight: 600; - color: #94FBE0; - line-height: 1.19; - letter-spacing: -0.006em; - margin: 0; - flex-shrink: 0; -} - -.ai-optimization-tags { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.75rem; -} - -@media (min-width: 768px) { - .ai-optimization-tags { - gap: 1.25rem; - justify-content: flex-start; - } -} - -.ai-tag { - display: flex; - align-items: center; - gap: 0.5rem; - height: 20px; -} - -.ai-tag-dot { - width: 6px; - height: 6px; - background-color: #94FBE0; - border-radius: 50%; - flex-shrink: 0; -} - -.ai-tag-text { - font-size: 0.875rem; - font-weight: 400; - color: #E5F1F2; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Sharing Card Layout */ -.sharing-card { - justify-content: space-between; -} - -.sharing-content { - flex: 1; - min-height: 0; - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -.sharing-actions { - display: flex; - flex-direction: column; - gap: 0.75rem; - flex-shrink: 0; -} - -/* Social List New */ -.social-list-new { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.completion-social-card { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - padding: 1rem; - background-color: #002224; - border-radius: 8px; - cursor: pointer; - transition: all var(--transition-normal); -} - -.completion-social-card:hover:not(.disabled) { - background-color: #01393B; -} - -.completion-social-card.disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.completion-social-info { - display: flex; - align-items: center; - gap: 1rem; -} - -.completion-social-logo { - width: 32px; - height: 32px; - object-fit: cover; - object-position: center; - flex-shrink: 0; - border-radius: 4px; - background-color: transparent; -} - -.completion-social-name { - font-size: 0.875rem; - font-weight: 400; - color: #FFFFFF; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.completion-social-email { - font-size: 0.75rem; - font-weight: 400; - color: #94FBE0; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Social Card - Text Layout */ -.completion-social-text { - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -.completion-social-channel { - font-size: 0.75rem; - font-weight: 400; - color: #94FBE0; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Connected Account Display */ -.completion-social-thumbnail { - width: 36px; - height: 36px; - border-radius: 50%; - object-fit: cover; - flex-shrink: 0; - border: 2px solid #94FBE0; -} - -.completion-social-channel-name { - font-size: 0.875rem; - font-weight: 600; - color: #FFFFFF; - line-height: 1.2; -} - -.completion-social-platform { - font-size: 0.7rem; - font-weight: 400; - color: rgba(255, 255, 255, 0.5); - line-height: 1.2; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* Social Card States */ -.completion-social-card.connected { - border: 1px solid rgba(166, 255, 234, 0.3); - background-color: rgba(0, 34, 36, 0.8); -} - -.completion-social-card.selected { - border: 1px solid #94FBE0; - background-color: rgba(148, 251, 224, 0.1); -} - -/* Social Card Status */ -.completion-social-status { - font-size: 0.75rem; - font-weight: 500; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - white-space: nowrap; -} - -.completion-social-status.connected { - color: #94FBE0; - background-color: rgba(148, 251, 224, 0.15); - display: flex; - align-items: center; - gap: 0.25rem; -} - -.completion-social-status.connecting { - color: #fbbf24; - background-color: rgba(251, 191, 36, 0.15); -} - -.completion-social-status.not-connected { - color: #9ca3af; - background-color: rgba(156, 163, 175, 0.15); -} - -/* Social Card Actions */ -.completion-social-actions { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.completion-social-disconnect { - font-size: 0.75rem; - font-weight: 500; - color: #f87171; - background: transparent; - border: none; - cursor: pointer; - padding: 0.25rem 0.5rem; - border-radius: 4px; - transition: all var(--transition-normal); -} - -.completion-social-disconnect:hover { - background-color: rgba(248, 113, 113, 0.15); -} - -/* Completion Buttons */ -.btn-completion-deploy { - width: 100%; - padding: 0.625rem 2.5rem; - background-color: #AE72F9; - border: none; - border-radius: var(--radius-full); - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - line-height: 1.19; - letter-spacing: -0.006em; - height: 48px; -} - -.btn-completion-deploy:hover:not(:disabled) { - background-color: #9B5FE0; -} - -.btn-completion-deploy:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.btn-completion-download { - width: 100%; - padding: 0.625rem 2.5rem; - background-color: transparent; - border: 1px solid #AE72F9; - border-radius: var(--radius-full); - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - line-height: 1.19; - letter-spacing: -0.006em; - height: 48px; -} - -.btn-completion-download:hover:not(:disabled) { - border-color: #9B5FE0; - background-color: rgba(174, 114, 249, 0.1); -} - -.btn-completion-download:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ===================================================== - Completion v2 (피그마 디자인 기반) - ===================================================== */ - -.comp2-page { - height: 100%; - background: #002224; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.comp2-header { - padding: 8px 32px; - height: 64px; - display: flex; - align-items: center; - flex-shrink: 0; -} - -.comp2-back-btn { - display: flex; - align-items: center; - gap: 4px; - background-color: #462E64; - color: #CFABFB; - font-size: 0.875rem; - font-weight: 600; - padding: 0 1.25rem 0 0.5rem; - height: 36px; - border: 1px solid #694596; - border-radius: 999px; - cursor: pointer; - white-space: nowrap; - transition: background-color 0.2s; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.comp2-back-btn:hover { - background-color: #5a3a80; -} - -.comp2-container { - width: calc(100% - 64px); - max-width: 1440px; - margin: 16px auto; - background: #01393B; - border-radius: 24px; - padding: 24px; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - overflow: hidden; -} - -.comp2-title-row { - padding: 16px; - text-align: center; - flex-shrink: 0; -} - -.comp2-page-title { - font-size: 30px; - font-weight: 700; - color: #FFFFFF; - letter-spacing: -0.006em; - line-height: 1.3; - margin-bottom: 8px; -} - -.comp2-page-subtitle { - font-size: 16px; - font-weight: 400; - color: #9BCACC; - line-height: 1.29; -} - - -.comp2-grid { - display: flex; - gap: 24px; - flex: 1; - min-height: 0; - overflow: hidden; -} - -/* 영상 섹션 */ -.comp2-video-section { - flex: 0 0 60%; - display: flex; - flex-direction: column; - min-width: 0; - overflow: hidden; -} - -.comp2-video-wrapper { - background: #01191A; - border-radius: 16px; - position: relative; - overflow: hidden; - width: 100%; - flex: 1; - min-height: 0; -} - -.comp2-video-player { - width: 100%; - height: 100%; - object-fit: contain; - cursor: pointer; - background: #01191A; -} - -.comp2-video-placeholder { - width: 100%; - height: 100%; - background: #01191A; -} - -.comp2-video-loading, -.comp2-video-error { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 20px; -} - -.comp2-loading-text { - color: #9BCACC; - margin-top: 16px; -} - -.comp2-error-icon { - width: 64px; - height: 64px; - color: #E15252; - margin-bottom: 16px; -} - -.comp2-error-text { - color: #9BCACC; - margin-bottom: 16px; - text-align: center; -} - -.comp2-retry-btn { - padding: 10px 20px; - background: rgba(174, 114, 249, 0.36); - border-radius: 8px; - color: #CFABFB; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: opacity 0.2s; -} - -.comp2-retry-btn:hover { - opacity: 0.85; -} - -/* 영상 컨트롤 */ -.comp2-video-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); - padding: 24px 24px 16px; - display: flex; - flex-direction: column; - gap: 16px; - transition: opacity 0.3s ease; -} - -.comp2-video-controls.visible { - opacity: 1; - pointer-events: auto; -} - -.comp2-video-controls.hidden { - opacity: 0; - pointer-events: none; -} - -.comp2-progress-bar { - width: 100%; - height: 8px; - background: #034A4D; - border-radius: 999px; - overflow: hidden; -} - -.comp2-progress-fill { - height: 100%; - background: #E5F1F2; - border-radius: 999px; - transition: width 0.1s linear; -} - -.comp2-controls-row { - display: flex; - align-items: center; - gap: 32px; -} - -.comp2-play-btn { - width: 32px; - height: 32px; - color: #FFFFFF; - cursor: pointer; - flex-shrink: 0; -} - -.comp2-volume-control { - display: flex; - align-items: center; - gap: 8px; - flex: 1; -} - -.comp2-volume-control svg { - width: 32px; - height: 32px; - color: #FFFFFF; - flex-shrink: 0; -} - -.comp2-volume-bar { - flex: 1; - height: 4px; - background: #034A4D; - border-radius: 999px; - overflow: hidden; -} - -.comp2-volume-fill { - width: 40%; - height: 100%; - background: #E5F1F2; - border-radius: 999px; -} - -.comp2-time-display { - display: flex; - align-items: center; - gap: 4px; - font-size: 16px; - font-weight: 400; - line-height: 1.375; - letter-spacing: -0.006em; -} - -.comp2-time-current { - color: #E5F1F2; -} - -.comp2-time-divider { - color: #9BCACC; -} - -.comp2-time-total { - color: #9BCACC; -} - -/* 정보 섹션 */ -.comp2-info-section { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - position: relative; - min-height: 0; - border-left: 3px solid #067C80; - padding-left: 16px; -} - -.comp2-info-header { - display: flex; - align-items: center; - flex-shrink: 0; -} - -.comp2-info-label { - font-size: 16px; - font-weight: 400; - color: #9BCACC; - line-height: 1.29; -} - -.comp2-info-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - overflow-y: auto; - min-height: 0; - padding-right: 4px; -} - -/* 스크롤바 스타일링 */ -.comp2-info-content::-webkit-scrollbar { - width: 4px; -} - -.comp2-info-content::-webkit-scrollbar-track { - background: transparent; -} - -.comp2-info-content::-webkit-scrollbar-thumb { - background: #067C80; - border-radius: 999px; -} - -.comp2-info-content::-webkit-scrollbar-thumb:hover { - background: #088a8e; -} - -.comp2-file-info { - display: flex; - flex-direction: column; - gap: 2px; -} - -.comp2-filename { - font-size: 20px; - font-weight: 700; - color: #FFFFFF; - letter-spacing: -0.006em; - line-height: 1.3; -} - -.comp2-filesize { - font-size: 14px; - font-weight: 400; - color: #9BCACC; - line-height: 1.29; -} - -.comp2-divider { - width: 100%; - height: 1px; - background: #046266; -} - -.comp2-meta-grid { - display: flex; - flex-direction: column; - gap: 8px; - flex: 1; -} - -.comp2-meta-item { - display: flex; -} - -.comp2-meta-label { - font-size: 16px; - font-weight: 400; - color: #9BCACC; - line-height: 1.29; -} - -.comp2-meta-divider { - width: 100%; - height: 1px; - background: #046266; -} - -.comp2-lyrics-section { - display: flex; - flex-direction: column; - gap: 4px; - flex: 1; -} - -.comp2-lyrics-text { - font-size: 16px; - font-weight: 400; - color: #E5F1F2; - line-height: 1.625; - letter-spacing: -0.006em; - white-space: pre-line; - flex: 1; - margin: 0; -} - -.comp2-lyrics-paragraphs { - display: flex; - flex-direction: column; - gap: 1rem; - flex: 1; -} - -.comp2-lyrics-para-section { - display: flex; - flex-direction: column; - gap: 0.3rem; -} - -.comp2-lyrics-tag { - font-size: 12px; - font-weight: 700; - color: #379599; - letter-spacing: 0.05em; -} - -/* 소셜 연결 섹션 */ -.comp2-social-connect-section { - display: flex; - flex-direction: column; - gap: 8px; - flex: 1; -} - -.comp2-social-header { - display: flex; - gap: 4px; -} - -.comp2-social-label { - font-size: 14px; - font-weight: 400; - color: #E5F1F2; - line-height: 1.29; -} - -.comp2-required-mark { - font-size: 14px; - font-weight: 400; - color: #E15252; - line-height: 1.29; -} - -.comp2-social-buttons { - display: flex; - flex-direction: column; - gap: 12px; -} - -.comp2-social-connect-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 10px 20px; - background: rgba(148, 251, 224, 0.11); - border-radius: 16px; - cursor: pointer; - transition: opacity 0.2s; -} - -.comp2-social-connect-btn:hover { - opacity: 0.85; -} - -.comp2-social-connect-btn svg { - flex-shrink: 0; -} - -.comp2-social-connect-btn span { - font-size: 14px; - font-weight: 600; - color: #76C9B3; - letter-spacing: -0.006em; - line-height: 1.19; - text-align: center; -} - -.comp2-error-message { - font-size: 14px; - color: #E15252; - margin-top: 8px; -} - -/* 하단 버튼 */ -.comp2-buttons { - display: flex; - gap: 8px; - flex-shrink: 0; - margin-top: auto; -} - -.comp2-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 8px 12px; - flex: 1; - height: 40px; - border-radius: 8px; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.006em; - line-height: 1.19; - text-align: center; - cursor: pointer; - transition: opacity 0.2s; - white-space: nowrap; -} - -.comp2-btn-secondary { - background: rgba(174, 114, 249, 0.36); - color: #CFABFB; -} - -.comp2-btn-secondary:hover:not(:disabled) { - opacity: 0.85; -} - -.comp2-btn-secondary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.comp2-btn-primary { - background: #AE72F9; - color: #FFFFFF; -} - -.comp2-btn-primary:hover:not(:disabled) { - opacity: 0.85; -} - -.comp2-btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* 반응형 */ -@media (max-width: 1024px) { - .comp2-container { - width: calc(100% - 32px); - margin: 16px; - padding: 16px; - overflow-y: auto; - } - - .comp2-grid { - flex-direction: column; - gap: 16px; - overflow: visible; - flex: none; - height: auto; - min-height: auto; - } - - .comp2-video-section { - flex: none; - width: 100%; - } - - .comp2-video-wrapper { - flex: none; - height: auto; - } - - .comp2-video-player { - height: auto; - } - - .comp2-info-section { - flex: none; - border-left: none; - padding-left: 0; - border-top: 3px solid #067C80; - padding-top: 16px; - } - - .comp2-info-content { - flex: none; - height: auto; - overflow: visible; - min-height: auto; - } - - .comp2-buttons { - flex-direction: row; - margin-top: 16px; - } -} - -/* ===================================================== - Analysis Result Page Components - ===================================================== */ - -/* Analysis Page Wrapper - 전체 레이아웃 */ -.analysis-page-wrapper { - display: flex; - width: 100%; - height: 100vh; - height: 100dvh; - background-color: #002224; - color: white; -} - -/* Analysis Page Main - 스크롤 가능한 메인 영역 */ -.analysis-page-main { - flex: 1; - overflow-y: auto; - overflow-x: hidden; - height: 100%; -} - -/* Analysis Container - 콘텐츠 래퍼 */ -.analysis-container { - width: 100%; - min-height: 100%; - color: var(--color-text-white); - display: flex; - flex-direction: column; - align-items: center; - background-color: #002224; - box-sizing: border-box; - padding: 0 16px 120px 16px; /* 고정 버튼 영역 확보 */ -} - -@media (min-width: 768px) { - .analysis-container { - padding: 0 32px 120px 32px; - } -} - -/* Header Area (Back Button + Title) */ -.analysis-header-area { - width: 100%; - max-width: 1440px; - padding: 8px 0; - box-sizing: border-box; -} - -/* Analysis Header */ -.analysis-header { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 24px 0; -} - -.analysis-icon { - color: var(--color-purple); - margin-bottom: 12px; -} - -.analysis-icon svg { - width: 40px; - height: 40px; -} - -/* Analysis Grid - 모바일: 세로 배치, 데스크톱: 가로 배치 */ -.analysis-grid { - width: 100%; - max-width: 1440px; - display: flex; - flex-direction: column; - gap: 24px; - box-sizing: border-box; -} - -/* 데스크톱(1024px 이상)에서 가로 배치 */ -@media (min-width: 1024px) { - .analysis-grid { - flex-direction: row; - align-items: flex-start; - gap: 40px; - padding: 0 200px; - } -} - -/* Brand Identity Card - 왼쪽 */ -.brand-identity-card { - background-color: #01393B; - border-radius: 24px; - padding: 24px; - display: flex; - flex-direction: column; - gap: 24px; - border: none; - box-shadow: none; - width: 100%; - box-sizing: border-box; -} - -@media (min-width: 768px) { - .brand-identity-card { - border-radius: 40px; - padding: 32px; - gap: 32px; - } -} - -@media (min-width: 1024px) { - .brand-identity-card { - flex: 1; - } -} - -.brand-header { - display: flex; - align-items: center; - gap: 8px; -} - -.brand-content { - display: flex; - flex-direction: column; - gap: 16px; -} - -.brand-name { - font-size: 20px; - font-weight: 700; - color: #E5F1F2; - letter-spacing: -0.006em; - margin: 0; - line-height: 1.2; -} - -@media (min-width: 768px) { - .brand-name { - font-size: 24px; - } -} - -.brand-location { - color: #6AB0B3; - font-size: 14px; - letter-spacing: -0.006em; - margin: 0; - line-height: 1.2; -} - -.brand-subtitle { - color: #6AB0B3; - font-size: 14px; - font-weight: 400; - letter-spacing: -0.006em; -} - -.brand-info { - display: flex; - flex-direction: row; - align-items: center; - gap: 4px; -} - -/* Report Content */ -.report-content { - color: #CEE5E6; - font-family: 'Pretendard', sans-serif; - font-size: 15px; - font-weight: 500; - line-height: 1.5; - letter-spacing: -0.006em; -} - -@media (min-width: 768px) { - .report-content { - font-size: 17px; - line-height: 1.45; - } -} - -/* Right Side Cards Container */ -.analysis-cards-column { - display: flex; - flex-direction: column; - gap: 24px; - width: 100%; -} - -/* 데스크톱(1024px 이상)에서만 sticky 적용 */ -@media (min-width: 1024px) { - .analysis-cards-column { - flex: 1; - position: sticky; - top: 40px; - align-self: flex-start; - } -} - -/* Feature Card for Analysis Page */ -.analysis-cards-column .feature-card { - background-color: #01393B; - border-radius: 24px; - padding: 24px; - border: none; - box-shadow: none; - display: flex; - flex-direction: column; - gap: 24px; - width: 100%; - box-sizing: border-box; -} - -@media (min-width: 768px) { - .analysis-cards-column .feature-card { - border-radius: 40px; - padding: 32px; - gap: 32px; - } -} - -/* Selling Points Card */ -.selling-points-card { - flex: 1; -} - -/* Selling Points Grid - 모바일: 1열, 태블릿 이상: 2열 */ -.selling-points-grid { - display: grid; - grid-template-columns: 1fr; - gap: 8px; -} - -@media (min-width: 640px) { - .selling-points-grid { - grid-template-columns: 1fr 1fr; - gap: 0; - } -} - -/* Selling Point Item */ -.selling-point-item { - background-color: #034A4D; - padding: 20px 16px; - display: flex; - flex-direction: column; - gap: 12px; - border-radius: 16px; -} - -@media (min-width: 640px) { - .selling-point-item { - padding: 24px 20px; - gap: 16px; - border-radius: 0; - } - /* 첫 번째 행 왼쪽 */ - .selling-point-item:nth-child(1) { - border-radius: 16px 0 0 0; - } - /* 첫 번째 행 오른쪽 */ - .selling-point-item:nth-child(2) { - border-radius: 0 16px 0 0; - } - /* 마지막 행 왼쪽 */ - .selling-point-item:nth-last-child(2):nth-child(odd) { - border-radius: 0 0 0 16px; - } - /* 마지막 행 오른쪽 */ - .selling-point-item:nth-last-child(1):nth-child(even) { - border-radius: 0 0 16px 0; - } -} - -.selling-point-title { - font-family: 'Pretendard', sans-serif; - font-size: 14px; - font-weight: 600; - color: #6AB0B3; - letter-spacing: -0.006em; - line-height: 1; -} - -.selling-point-content { - display: flex; - flex-direction: column; - gap: 8px; -} - -.selling-point-content p { - font-family: 'Pretendard', sans-serif; - font-size: 15px; - font-weight: 500; - color: #CEE5E6; - letter-spacing: -0.006em; - line-height: 1.2; - margin: 0; -} - -@media (min-width: 768px) { - .selling-point-content p { - font-size: 17px; - line-height: 1; - } -} - -/* Keywords Card */ -.keywords-card { - flex-shrink: 0; -} - -/* Tags Wrapper */ -.tags-wrapper { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-content: flex-start; -} - -/* Feature Tag - 피그마: pill 형태 */ -.feature-tag { - padding: 8px 16px; - background-color: #034A4D; - border-radius: 999px; - font-family: 'Pretendard', sans-serif; - font-size: 15px; - font-weight: 500; - color: #CEE5E6; - letter-spacing: -0.006em; - border: none; -} - -@media (min-width: 768px) { - .feature-tag { - font-size: 17px; - } -} - -/* Analysis Bottom Button - 화면 하단 고정 */ -.analysis-bottom { - position: fixed; - bottom: 0; - left: 0; - right: 0; - padding: 20px 16px; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - background: linear-gradient(to top, #002224 70%, transparent); - z-index: 100; -} - -@media (min-width: 768px) { - .analysis-bottom { - padding: 24px 32px; - } -} - -.analysis-bottom .btn-primary { - width: 160px; - height: 48px; - padding: 10px 24px; - background-color: #AE72F9; - border-radius: 999px; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - font-weight: 600; - color: #FFFFFF; - letter-spacing: -0.006em; - border: none; - cursor: pointer; - transition: background-color 0.2s ease; - box-shadow: 0 4px 20px rgba(174, 114, 249, 0.4); -} - -.analysis-bottom .btn-primary:hover { - background-color: #9B5DE5; -} - -/* ===================================================== - Brand Intelligence Page Typography (3단계 체계) - - Title: 24px (섹션 제목) - - Body: 16px (본문) - - Label: 14px (라벨, 태그) - ===================================================== */ - -/* 페이지 헤더 */ -.bi-page-header { - text-align: center; - margin-bottom: 48px; - padding: 0 16px; -} - -.bi-page-icon { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.bi-star-icon { - width: 48px; - height: 48px; - animation: twinkle 2.5s ease-in-out infinite; -} - -@keyframes twinkle { - 0%, 100% { - opacity: 0.7; - transform: scale(1); - filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4)); - } - 50% { - opacity: 1; - transform: scale(1.05); - filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.7)); - } -} - -.bi-page-title { - font-size: 32px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 16px; - letter-spacing: -0.02em; -} - -.bi-page-desc { - font-size: 16px; - color: #6AB0B3; - line-height: 1.6; - max-width: 600px; - margin: 0 auto; -} - -.bi-page-desc .highlight { - color: #2dd4bf; - font-weight: 600; -} - -/* 카드 공통 스타일 */ -.bi-card { - background-color: #01393B; - border-radius: 24px; - padding: 32px; - border: 1px solid rgba(106, 176, 179, 0.1); -} - -.bi-card-title { - font-size: 18px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 24px; -} - - -/* 섹션 라벨 */ -.bi-section-label { - font-size: 18px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 8px; -} - -/* 브랜드명 (대형) */ -.bi-brand-name { - font-size: 32px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 12px; - letter-spacing: -0.02em; -} - -/* 주소/위치 정보 */ -.bi-location { - font-size: 16px; - color: #6AB0B3; - line-height: 1.5; - display: flex; - align-items: flex-start; - gap: 8px; -} - -.bi-location svg { - flex-shrink: 0; - margin-top: 2px; -} - -/* 본문 텍스트 */ -.bi-body-text { - font-size: 16px; - color: rgba(255, 255, 255, 0.9); - line-height: 1.7; -} - -/* 서브 섹션 제목 */ -.bi-subsection-title { - font-size: 14px; - font-weight: 600; - color: #2dd4bf; - margin-bottom: 8px; -} - -/* 값/내용 강조 */ -.bi-value { - font-size: 16px; - font-weight: 600; - color: #FFFFFF; - line-height: 1.5; -} - -.bi-value-large { - font-size: 24px; - font-weight: 700; - color: #FFFFFF; - line-height: 1.4; -} - -/* 내부 카드/박스 */ -.bi-inner-box { - background-color: rgba(0, 34, 36, 0.5); - border-radius: 16px; - padding: 20px; - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.bi-inner-box-accent { - background: linear-gradient(to right, rgba(0, 34, 36, 0.5), rgba(1, 57, 59, 0.8)); - border-left: 4px solid #2dd4bf; -} - -/* 태그/뱃지 */ -.bi-tag { - font-size: 14px; - padding: 6px 12px; - background-color: rgba(45, 212, 191, 0.1); - color: #2dd4bf; - border-radius: 6px; - font-weight: 500; -} - -.bi-tag-outline { - font-size: 16px; - padding: 10px 20px; - background-color: transparent; - color: #FFFFFF; - border: 1px solid rgba(106, 176, 179, 0.3); - border-radius: 100px; -} - -.bi-tag-outline:hover { - border-color: rgba(45, 212, 191, 0.5); -} - -/* USP 카드 */ -.bi-usp-top { - background: linear-gradient(to right, rgba(45, 212, 191, 0.1), rgba(174, 114, 249, 0.1)); - border: 1px solid rgba(45, 212, 191, 0.3); - border-radius: 16px; - padding: 24px; - margin-bottom: 24px; -} - -.bi-usp-item { - background-color: rgba(0, 34, 36, 0.4); - border: 1px solid rgba(255, 255, 255, 0.05); - border-radius: 16px; - padding: 20px; -} - -.bi-usp-category { - font-size: 13px; - font-weight: 500; - color: #6AB0B3; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 8px; -} - -.bi-usp-category-accent { - color: #2dd4bf; -} - -.bi-usp-description { - font-size: 15px; - font-weight: 400; - color: rgba(255, 255, 255, 0.7); - line-height: 1.5; -} - -.bi-usp-badge { - font-size: 14px; - padding: 4px 12px; - background-color: rgba(45, 212, 191, 0.2); - color: #2dd4bf; - border-radius: 4px; - font-weight: 600; -} - -.bi-usp-english-category { - font-size: 13px; - font-weight: 500; - color: #6AB0B3; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.bi-usp-korean-category { - font-size: 20px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 6px; -} - -.bi-usp-score { - font-size: 24px; - font-weight: 700; - color: #6AB0B3; -} - -/* 페르소나 카드 */ -.bi-persona-name { - font-size: 16px; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 4px; -} - -.bi-persona-age { - font-size: 14px; - color: #6AB0B3; -} - -.bi-persona-trigger { - font-size: 14px; - color: rgba(255, 255, 255, 0.7); - line-height: 1.5; - border-top: 1px solid rgba(255, 255, 255, 0.05); - padding-top: 12px; - margin-top: 12px; -} - -.bi-persona-trigger strong { - color: #2dd4bf; - font-weight: 600; -} - -/* 레이더 차트 라벨 */ -.bi-chart-label { - font-size: 14px; - fill: rgba(255, 255, 255, 0.9); - font-weight: 600; -} - -.bi-chart-sublabel { - font-size: 13px; - fill: rgba(255, 255, 255, 0.5); - font-weight: 500; -} - -/* 반응형 */ -@media (min-width: 768px) { - .bi-page-title { - font-size: 40px; - } - - .bi-page-desc { - font-size: 18px; - } - - .bi-brand-name { - font-size: 36px; - } -} - -/* ===================================================== - Brand Intelligence v2 - ===================================================== */ - -.bi2-page { - display: flex; - width: 100%; - min-height: 100vh; - padding-top: 64px; - padding-bottom: 160px; - flex-direction: column; - align-items: center; - background: linear-gradient(to bottom, #002224, #01191a); - color: #E5F1F2; - font-family: 'Pretendard', sans-serif; - overflow-x: auto; -} - -/* 헤더 */ -.bi2-header { - position: fixed; - top: 0; - left: 0; - right: 0; - display: flex; - align-items: center; - justify-content: flex-start; - padding: 8px 1rem; - height: 64px; - z-index: 30; -} - -@media (min-width: 768px) { - .bi2-header { - padding: 8px 2rem; - } - - body:has(.sidebar.expanded) .bi2-header { - left: 15rem; - } - - body:has(.sidebar.collapsed) .bi2-header { - left: 5rem; - } -} - -.bi2-back-btn { - display: flex; - align-items: center; - gap: 4px; - padding: 8px 20px 8px 8px; - background: #462E64; - border: 1px solid #694596; - border-radius: 999px; - color: #CFABFB; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: opacity 0.2s; - letter-spacing: -0.006em; -} - -.bi2-back-btn:hover { - opacity: 0.85; -} - -/* 타이틀 영역 */ -.bi2-page-title-section { - display: flex; - max-width: 1440px; - padding: 68px 16px 50px 16px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 24px; - align-self: stretch; - margin: 0 auto; -} - -.bi2-page-divider { - height: 0; - width: calc(100% - 32px); - max-width: 1440px; - border: none; - border-top: 1px solid var(--Color-teal-500, #067C80); - margin: 0 auto; -} - -.bi2-title-icon { - width: 80px; - height: 80px; -} - -.bi2-star-icon { - width: 80px; - height: 80px; - aspect-ratio: 1/1; - animation: twinkle 2.5s ease-in-out infinite; -} - -.bi2-title-text { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; - align-self: stretch; -} - -.bi2-main-title { - color: var(--Color-white, #FFF); - text-align: center; - font-family: Pretendard; - font-size: 48px; - font-style: normal; - font-weight: 600; - line-height: normal; - letter-spacing: -0.288px; - align-self: stretch; -} - -.bi2-subtitle { - font-size: 21px; - font-weight: 400; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.19; - text-align: center; - align-self: stretch; -} - -/* 메인 컨테이너 */ -.bi2-main-container { - display: flex; - max-width: 1440px; - min-width: 1000px; - padding: 68px 32px 112px 32px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 88px; - align-self: stretch; - margin: 0 auto; -} - -/* 매장 헤더 */ -.bi2-store-header { - display: flex; - flex-direction: column; - gap: 4px; -} - -.bi2-store-name { - color: var(--Color-white, #FFF); - font-family: Pretendard; - font-size: 40px; - font-style: normal; - font-weight: 600; - line-height: 130%; /* 52px */ - letter-spacing: -0.24px; -} - -.bi2-store-address { - color: var(--Color-teal-200, #9BCACC); - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 22px; /* 137.5% */ - letter-spacing: -0.096px; -} - -/* 섹션 공통 */ -.bi2-section { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 20px; - align-self: stretch; -} - -.bi2-section-title { - color: var(--Color-white, #FFF); - font-family: Pretendard; - font-size: 28px; - font-style: normal; - font-weight: 600; - line-height: 130%; /* 36.4px */ - letter-spacing: -0.168px; -} - -/* 브랜드 정체성 카드 */ -.bi2-identity-card { - background: #034245; - border: 1px solid #94FBE0; - border-radius: 20px; - padding: 22px 24px; - display: flex; - flex-direction: column; - gap: 22px; - box-shadow: 0 0 40px rgba(148, 251, 224, 0.1); -} - -.bi2-identity-top { - display: flex; - flex-direction: column; - gap: 16px; -} - -.bi2-identity-core { - display: flex; - flex-direction: column; - gap: 4px; -} - -.bi2-label-sm { - color: var(--Color-teal-50, #E5F1F2); - /* Body_600 */ - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 22px; /* 137.5% */ - letter-spacing: -0.096px; -} - -.bi2-core-value { - color: var(--Color-mint-50, #F4FFFC); - font-family: Pretendard; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 130%; /* 31.2px */ - letter-spacing: -0.144px; -} - -.bi2-category-text { - color: var(--Color-teal-50, #E5F1F2); - font-family: Pretendard; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: 22px; /* 122.222% */ - letter-spacing: -0.108px; -} - -.bi2-identity-divider { - width: 100%; - height: 1px; - background: #067C80; -} - -.bi2-identity-bottom { - display: flex; - gap: 40px; -} - -.bi2-identity-col { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; -} - -.bi2-body-text { - color: var(--Color-teal-100, #CEE5E6); - font-family: Pretendard; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 160%; /* 28.8px */ - letter-spacing: -0.108px; -} - -/* 셀링 포인트 카드 */ -.bi2-selling-card { - display: flex; - padding: 16px 20px; - justify-content: center; - align-items: center; - gap: 100px; - align-self: stretch; - border-radius: 20px; - border: 1px solid var(--Color-teal-700, #034A4D); - background: var(--Color-teal-750, #01393B); -} - -.bi2-selling-chart { - flex-shrink: 0; -} - -.bi2-radar-container { - display: flex; - justify-content: center; - align-items: center; -} - -@media (max-width: 768px) { - .bi2-radar-container svg { - width: min(95vw, 440px) !important; - height: min(95vw, 360px) !important; - } - - .bi2-radar-label-text { - display: none; - } -} - -.bi2-selling-list { - display: flex; - flex-direction: column; - gap: 24px; -} - -.bi2-selling-item { - display: flex; - align-items: center; - gap: 16px; -} - -.bi2-rank-badge { - width: 20px; - height: 20px; - min-width: 20px; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: 600; - letter-spacing: -0.006em; - background: #206764; - color: #94FBE0; -} - -.bi2-rank-badge.top { - background: #94FBE0; - color: #002224; -} - -.bi2-selling-item-text { - display: flex; - align-items: center; - gap: 8px; -} - -.bi2-selling-name { - font-size: 20px; - font-weight: 600; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.375; -} - -.bi2-selling-desc { - font-size: 14px; - font-weight: 600; - color: #9BCACC; - letter-spacing: -0.006em; - line-height: 1.29; -} - -/* 고객 유형 카드 */ -.bi2-persona-grid { - display: flex; - align-items: stretch; - gap: 16px; - width: 100%; -} - -.bi2-persona-card { - display: flex; - padding: 20px; - flex-direction: column; - align-items: stretch; - gap: 16px; - flex: 1 0 0; - align-self: stretch; - border-radius: 20px; - border: 1px solid var(--Color-teal-700, #034A4D); - background: var(--Color-teal-750, #01393B); -} - -.bi2-persona-header { - display: flex; - padding-bottom: 8px; - flex-direction: column; - align-items: flex-start; - gap: 4px; - align-self: stretch; -} - -.bi2-persona-info { - display: flex; - align-items: baseline; - gap: 6px; -} - -.bi2-persona-name { - color: var(--Color-teal-50, #E5F1F2); - font-family: Pretendard; - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: 130%; /* 26px */ - letter-spacing: -0.12px; -} - -.bi2-persona-age { - color: var(--Color-teal-200, #9BCACC); - /* 14_600 */ - font-family: Pretendard; - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: 18px; /* 128.571% */ -} - -.bi2-persona-desc { - color: var(--Color-teal-100, #CEE5E6); - /* 14_600 */ - font-family: Pretendard; - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: 18px; /* 128.571% */ -} - -.bi2-persona-divider { - width: 100%; - height: 1px; - background: #067C80; -} - -.bi2-persona-detail { - display: flex; - gap: 16px; - padding: 0 4px; -} - -.bi2-persona-detail.grow { - display: flex; - padding: 0 4px; - align-items: flex-start; - gap: 4px; - align-self: stretch; -} - -.bi2-label-xs { - color: var(--Color-teal-100, #CEE5E6); - font-family: Pretendard; - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: 18px; /* 128.571% */ -} - -.bi2-persona-detail-text { - flex: 1; - color: var(--Color-teal-50, #E5F1F2); - text-align: right; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 26px; - letter-spacing: -0.096px; - white-space: pre-line; -} - -/* 추천 타겟 키워드 */ -.bi2-keyword-header { - display: flex; - flex-direction: column; - gap: 8px; -} - -.bi2-keyword-subtitle { - color: var(--Color-teal-200, #9BCACC); - /* Body_600 */ - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 22px; /* 137.5% */ - letter-spacing: -0.096px; -} - -.bi2-keyword-tags { - display: flex; - align-items: flex-start; - align-content: flex-start; - gap: 8px; - align-self: stretch; - flex-wrap: wrap; -} - -.bi2-keyword-pill { - display: flex; - align-items: center; - justify-content: center; - padding: 8px 16px; - background: #01393B; - border-radius: 999px; - font-size: 20px; - font-weight: 600; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.375; -} - -/* 하단 고정 버튼 */ -.bi2-bottom-button-container { - position: fixed; - bottom: 32px; - left: 0; - right: 0; - display: flex; - justify-content: center; - z-index: 50; - pointer-events: none; -} - -@media (min-width: 768px) { - body:has(.sidebar.expanded) .bi2-bottom-button-container { - left: 15rem; - } - - body:has(.sidebar.collapsed) .bi2-bottom-button-container { - left: 5rem; - } -} - -.bi2-generate-btn { - pointer-events: auto; - display: flex; - align-items: center; - gap: 8px; - padding: 12px 48px; - background: #A65EFF; - color: #FFFFFF; - font-size: 16px; - font-weight: 700; - border: none; - border-radius: 999px; - cursor: pointer; - box-shadow: 0 4px 24px rgba(174, 114, 249, 0.4); - transition: background-color 0.2s, transform 0.2s; -} - -.bi2-generate-btn:hover { - background: #8B3FE8; - transform: scale(1.05); -} - -/* 반응형 – 태블릿/모바일 (≤768px) */ -@media (max-width: 768px) { - .bi2-page { - padding-top: 64px; - } - - .bi2-main-container { - min-width: unset; - margin: 0 16px; - padding: 24px 0px 80px; - gap: 64px; - border-radius: 24px; - } - - .bi2-selling-card { - flex-direction: column; - gap: 32px; - } - - .bi2-persona-grid { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 20px; - align-self: stretch; - } - - .bi2-identity-bottom { - flex-direction: column; - gap: 24px; - } - - .bi2-main-title { - color: var(--Color-white, #FFF); - text-align: center; - font-family: Pretendard; - font-size: 45px; - font-style: normal; - font-weight: 600; - line-height: normal; - letter-spacing: -0.288px; - } - - .bi2-store-name { - font-size: 32px; - } - - .bi2-selling-name { - font-size: 16px; - } - - .bi2-keyword-pill { - font-size: 16px; - } -} - -/* ===================================================== - URL Input Content (GenerationFlow 내 URL 입력 단계) - ===================================================== */ - -.url-input-container { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: #002224; - padding: 2rem; - box-sizing: border-box; -} - -.url-input-content { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - max-width: 400px; - width: 100%; -} - -.url-input-icon { - color: #AE72F9; - margin-bottom: 24px; -} - -.url-input-logo { - margin-bottom: 0px; -} - -.url-input-logo img { - height: 70px; - width: auto; -} - -.url-input-title { - font-family: 'Pretendard', sans-serif; - font-size: 40px; - font-weight: 600; - color: #E5F1F2; - letter-spacing: -0.006em; - margin: 0 0 8px 0; - line-height: 1.2; -} - -.url-input-subtitle { - font-family: 'Pretendard', sans-serif; - font-size: 14px; - font-weight: 400; - color: #9BCACC; - letter-spacing: -0.006em; - margin: 0 0 40px 0; -} - -.url-input-form { - width: 100%; - display: flex; - flex-direction: column; - gap: 10px; -} - -.url-input-wrapper { - display: flex; - align-items: stretch; - width: 100%; - background-color: #01393B; - border: 1px solid #034A4D; - border-radius: 12px; - overflow: visible; - position: relative; -} - -.url-input-field { - flex: 1; - width: 100%; - padding: 16px 20px; - background-color: transparent; - border: none; - font-family: 'Pretendard', sans-serif; - font-size: 16px; - color: #E5F1F2; - outline: none; - text-align: left; -} - -.url-input-field::placeholder { - color: #6AB0B3; -} - - -.url-input-button { - margin: auto; - max-width: 400px; - width: 100%; - padding: 11px 16px; - border-radius: 12px; - background-color: #AE72F9; - color: #ffffff; - font-weight: 600; - font-size: 16px; - letter-spacing: -0.006em; - box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4); - transition: all var(--transition-normal); - border: none; - cursor: pointer; - animation: button-glow 1.5s ease-in-out infinite; -} - -.url-input-button:hover:not(:disabled) { - background-color: #9B5DE5; -} - -.url-input-button:disabled { - background-color: #4A5568; - cursor: not-allowed; -} - -.url-input-manual-button { - margin: auto; - max-width: 400px; - width: 100%; - padding: 11px 16px; - border-radius: 12px; - border: 1px solid rgba(155, 202, 204, 0.35); - background: transparent; - color: rgba(155, 202, 204, 0.8); - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all var(--transition-normal); -} - -.url-input-manual-button:hover { - border-color: #9BCACC; - color: #9BCACC; - background: rgba(155, 202, 204, 0.06); -} - -.url-input-error { - color: #F56565; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - margin: 0; - text-align: left; -} - -.url-input-guide { - font-family: 'Pretendard', sans-serif; - font-size: 14px; - color: #6AB0B3; - margin: 0 0 10px; - white-space: pre-line; -} - -/* URL Input Dropdown */ -.url-input-dropdown-container { - position: relative; - flex-shrink: 0; - width: auto; -} - -.url-input-dropdown-trigger { - display: flex; - align-items: center; - gap: 8px; - padding: 16px 16px; - background-color: transparent; - border: none; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - color: #E5F1F2; - cursor: pointer; - white-space: nowrap; - transition: background-color 0.2s ease; -} - -.url-input-dropdown-trigger:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -.url-input-dropdown-arrow { - transition: transform 0.2s ease; -} - -.url-input-dropdown-arrow.open { - transform: rotate(180deg); -} - -.url-input-dropdown-menu { - position: absolute; - top: calc(100% + 4px); - left: 0; - min-width: 100%; - background-color: #01393B; - border: 1px solid #034A4D; - border-radius: 12px; - overflow: hidden; - z-index: 100; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.url-input-dropdown-item { - display: block; - width: 100%; - padding: 12px 16px; - background: none; - border: none; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - color: #9BCACC; - text-align: left; - cursor: pointer; - transition: all 0.2s ease; -} - -.url-input-dropdown-item:hover { - background-color: #034A4D; - color: #E5F1F2; -} - -.url-input-dropdown-item.active { - background-color: #034A4D; - color: #94FBE0; -} - -/* URL Input Autocomplete (Dashboard) */ -.url-input-field-container { - position: relative; - flex: 1; - display: flex; -} - -.url-input-autocomplete-dropdown { - position: absolute; - top: calc(100% + 4px); - left: 0; - right: 0; - background-color: #01393B; - border: 1px solid rgba(148, 251, 224, 0.2); - border-radius: 12px; - max-height: 300px; - overflow-y: auto; - z-index: 100; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); -} - -.url-input-autocomplete-loading { - padding: 16px; - text-align: center; - color: rgba(255, 255, 255, 0.6); - font-size: 14px; -} - -.url-input-autocomplete-item { - display: block; - width: 100%; - padding: 12px 16px; - background: transparent; - border: none; - border-bottom: 1px solid rgba(148, 251, 224, 0.1); - text-align: left; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.url-input-autocomplete-item:last-child { - border-bottom: none; -} - -.url-input-autocomplete-item:hover, -.url-input-autocomplete-item.highlighted { - background-color: rgba(148, 251, 224, 0.1); -} - -.url-input-autocomplete-title { - font-size: 14px; - font-weight: 500; - color: #E5F1F2; - margin-bottom: 4px; -} - -.url-input-autocomplete-title b { - color: #94FBE0; - font-weight: 600; -} - -.url-input-autocomplete-address { - font-size: 12px; - color: rgba(255, 255, 255, 0.5); -} - -/* ===================================================== - Landing Page Components - ===================================================== */ - -/* Hero Section */ -.hero-section { - width: 100%; - min-height: 100dvh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #002224; - color: var(--color-text-white); - padding: 80px 1rem 100px; - position: relative; - overflow: hidden; - box-sizing: border-box; -} - -/* 세로가 짧은 화면 대응 */ -@media (max-height: 700px) { - .hero-section { - padding: 70px 1rem 80px; - justify-content: flex-start; - padding-top: 100px; - } -} - -@media (max-height: 600px) { - .hero-section { - padding: 60px 1rem 70px; - padding-top: 80px; - } -} - -/* Animated Background Orbs */ -.hero-bg-orbs { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; - pointer-events: none; - z-index: 0; -} - -/* JavaScript controlled random orbs */ -.hero-orb-random { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.65; - pointer-events: none; - will-change: left, top, transform; -} - -.hero-content { - display: flex; - flex-direction: column; - align-items: center; - z-index: 20; - position: relative; - margin-top: 50px; -} - -.hero-logo { - width: 280px; - height: auto; - margin-bottom: 1rem; -} - -@media (min-width: 640px) { - .hero-logo { - width: 400px; - } -} - -@media (min-width: 768px) { - .hero-logo { - width: 500px; - } -} - -@media (min-width: 1024px) { - .hero-logo { - width: 554px; - } -} - -/* 세로가 짧은 화면에서 로고 크기 축소 */ -@media (max-height: 700px) { - .hero-logo { - width: 240px; - margin-bottom: 0.5rem; - } -} - -@media (max-height: 600px) { - .hero-logo { - width: 200px; - margin-bottom: 0.5rem; - } -} - -.hero-subtitle { - font-size: var(--text-sm); - font-weight: 300; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.8); - text-align: center; - max-width: 32rem; -} - -@media (min-width: 640px) { - .hero-subtitle { - font-size: var(--text-base); - margin-bottom: 3rem; - } -} - -@media (min-width: 768px) { - .hero-subtitle { - font-size: var(--text-lg); - } -} - -/* Hero Form */ -.hero-form { - padding-top: 50px; - width: 100%; - max-width: 375px; - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} - -/* 세로가 짧은 화면에서 폼 간격 조정 */ -@media (max-height: 700px) { - .hero-form { - gap: 6px; - max-width: 350px; - } -} - -@media (max-height: 600px) { - .hero-form { - gap: 4px; - max-width: 320px; - } -} - -.hero-input-label { - font-size: 14px; - font-weight: 600; - color: #ffffff; - letter-spacing: -0.006em; -} - -.hero-input-wrapper { - display: flex; - width: 100%; - height: 48px; - padding: 11px 24px; - align-items: center; - gap: 10px; - border-radius: 999px; - background: var(--Color-white, #FFF); - position: relative; -} - -.hero-input-wrapper.focused { - box-shadow: 0 0 0 4px #379599; -} - -.hero-input-wrapper.error { - box-shadow: 0 0 0 1px #F87171; -} - -.hero-input { - flex: 1; - background: transparent; - border: none; - color: #6AB0B3; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.006em; - text-align: left; - min-width: 0; -} - -.hero-input:focus { - outline: none; -} - -.hero-input::placeholder { - color: #6AB0B3; -} - -.hero-input.has-value { - color: #002224; - font-weight: 500; -} - -.hero-input-clear { - flex-shrink: 0; - width: 24px; - height: 24px; - padding: 0; - border: none; - background: transparent; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -} - -.hero-input-clear img { - width: 24px; - height: 24px; -} - -/* Hero Dropdown */ -.hero-dropdown-container { - position: relative; - flex-shrink: 0; -} - -.hero-dropdown-trigger { - display: flex; - align-items: center; - gap: 6px; - padding: 8px 12px; - background-color: transparent; - border: none; - border-right: 1px solid #E5E7EB; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - font-weight: 600; - color: #374151; - cursor: pointer; - white-space: nowrap; - transition: color 0.2s ease; - margin-right: 12px; -} - -.hero-dropdown-trigger:hover { - color: #111827; -} - -.hero-dropdown-arrow { - transition: transform 0.2s ease; -} - -.hero-dropdown-arrow.open { - transform: rotate(180deg); -} - -.hero-dropdown-menu { - position: absolute; - top: calc(100% + 4px); - left: 0; - min-width: 100px; - background-color: #ffffff; - border: 1px solid #E5E7EB; - border-radius: 12px; - overflow: hidden; - z-index: 100; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.hero-dropdown-item { - display: block; - width: 100%; - padding: 12px 16px; - background: none; - border: none; - font-family: 'Pretendard', sans-serif; - font-size: 14px; - color: #6B7280; - text-align: left; - cursor: pointer; - transition: all 0.2s ease; -} - -.hero-dropdown-item:hover { - background-color: #F3F4F6; - color: #111827; -} - -.hero-dropdown-item.active { - background-color: #F0FDF4; - color: #059669; -} - -/* Hero Autocomplete */ -.hero-input-container { - flex: 1; - min-width: 0; -} - -.hero-autocomplete-dropdown { - position: absolute; - top: calc(100% + 4px); - left: 90px; - right: 0; - background-color: #ffffff; - border: 1px solid #E5E7EB; - border-radius: 12px; - overflow: hidden; - z-index: 200; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - max-height: 300px; - overflow-y: auto; -} - -.hero-autocomplete-loading { - padding: 16px; - text-align: center; - color: #6B7280; - font-size: 14px; -} - -.hero-autocomplete-item { - display: block; - width: 100%; - padding: 12px 16px; - background: none; - border: none; - border-bottom: 1px solid #F3F4F6; - text-align: left; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.hero-autocomplete-item:last-child { - border-bottom: none; -} - -.hero-autocomplete-item:hover, -.hero-autocomplete-item.highlighted { - background-color: #F9FAFB; -} - -.hero-autocomplete-title { - font-family: 'Pretendard', sans-serif; - font-size: 14px; - font-weight: 600; - color: #111827; - margin-bottom: 4px; -} - -.hero-autocomplete-title b { - color: #059669; -} - -.hero-autocomplete-address { - font-family: 'Pretendard', sans-serif; - font-size: 12px; - color: #6B7280; -} - -.hero-input-hint { - font-size: 14px; - font-weight: 400; - color: #CEE5E6; - letter-spacing: -0.006em; - margin: 10px; - white-space: pre-line; -} - -.hero-error { - color: #f87171; - font-size: var(--text-xs); - text-align: center; -} - -.hero-button { - display: flex; - height: 48px; - padding: 11px 16px; - justify-content: center; - align-items: center; - gap: 10px; - width: 100%; - padding: 11px 16px; - border-radius: 999px; - background-color: #AE72F9; - color: #ffffff; - font-weight: 600; - font-size: 14px; - letter-spacing: -0.006em; - box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4); - transition: all var(--transition-normal); - border: none; - cursor: pointer; - animation: button-glow 1.5s ease-in-out infinite; -} - -@keyframes button-glow { - 0%, 100% { - box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.5); - } - 50% { - box-shadow: 0px 4px 28px 0px rgba(174, 114, 249, 0.8), 0px 0px 16px 0px rgba(166, 255, 234, 0.4); - } -} - -.hero-manual-button { - width: 100%; - padding: 11px 16px; - height: 48px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.3); - background: transparent; - color: rgba(255, 255, 255, 0.8); - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all var(--transition-normal); -} - -.hero-manual-button:hover { - border-color: rgba(255, 255, 255, 0.6); - color: #fff; - background: rgba(255, 255, 255, 0.06); -} - -.hero-button:hover { - background-color: #9a5ef0; - animation: none; - box-shadow: 0px 4px 32px 0px rgba(174, 114, 249, 0.6); -} - -.hero-button:active { - transform: scale(0.98); -} - -/* Scroll Indicator */ -.scroll-indicator { - position: absolute; - bottom: 2rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - transition: opacity var(--transition-normal); - cursor: pointer; - background: none; - border: none; - color: #9BCACC; - z-index: 10; -} - -@media (min-width: 640px) { - .scroll-indicator { - bottom: 3rem; - } -} - -/* 세로가 짧은 화면에서 스크롤 인디케이터 조정 */ -@media (max-height: 700px) { - .scroll-indicator { - bottom: 1rem; - gap: 8px; - } -} - -@media (max-height: 600px) { - .scroll-indicator { - bottom: 0.5rem; - gap: 4px; - } - - .scroll-indicator-text { - font-size: 10px; - } - - .scroll-indicator-icon { - width: 32px; - height: 32px; - } -} - -.scroll-indicator:hover { - opacity: 0.8; -} - -.scroll-indicator-text { - font-size: 12px; - font-weight: 400; - letter-spacing: -0.006em; - color: #9BCACC; -} - -.scroll-indicator-icon { - width: 40px; - height: 40px; - border: 1px solid #9BCACC; - border-radius: 999px; - display: flex; - align-items: center; - justify-content: center; - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-8px); - } -} - -/* ===================================================== - Welcome Section Components - ===================================================== */ - -/* Welcome Section */ -.welcome-section { - width: 100%; - min-height: 100dvh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - background-color: #002224; - color: var(--color-text-white); - padding: 0; - position: relative; -} - -.welcome-content { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - padding: 6rem 1rem 6rem; - position: relative; -} - -/* Star Icon - centered above title */ -.welcome-star { - width: 40px; - height: 40px; - margin: 0 auto 12px; -} - -.welcome-star img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.welcome-header { - text-align: center; - margin-bottom: 3rem; - z-index: 1; -} - -@media (min-width: 768px) { - .welcome-header { - margin-bottom: 4rem; - } -} - -.welcome-title { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 1rem; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 640px) { - .welcome-title { - font-size: 2rem; - } -} - -@media (min-width: 768px) { - .welcome-title { - font-size: 2.5rem; - } -} - -.welcome-subtitle { - color: #9BCACC; - font-size: var(--text-sm); - font-weight: 600; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 640px) { - .welcome-subtitle { - font-size: var(--text-base); - } -} - -@media (min-width: 768px) { - .welcome-subtitle { - font-size: 1.5rem; - } -} - -/* Feature Cards Grid */ -.feature-grid { - display: flex; - flex-direction: column; - gap: 1rem; - width: 100%; - max-width: 1144px; - margin: 0 auto; - z-index: 1; - padding: 0 1rem; -} - -@media (min-width: 640px) { - .feature-grid { - gap: 1rem; - } -} - -@media (min-width: 768px) { - .feature-grid { - flex-direction: row; - gap: 24px; - justify-content: center; - padding: 0 1rem; - } -} - -@media (min-width: 1024px) { - .feature-grid { - gap: 32px; - padding: 0; - } -} - -/* Feature Card */ -.feature-card { - position: relative; - background-color: #01393B; - border-radius: 40px; - padding: 24px 24px; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 16px; - width: 100%; - flex: 1; -} - -@media (min-width: 768px) { - .feature-card { - flex: 1; - max-width: 280px; - min-height: 340px; - padding: 24px 24px; - gap: 16px; - } -} - -@media (min-width: 1024px) { - .feature-card { - max-width: 500px; - min-height: 440px; - padding: 24px 24px; - gap: 16px; - } -} - -.feature-number-badge { - width: 32px; - height: 32px; - flex-shrink: 0; - border-radius: 999px; - border: 1px solid #9BCACC; - display: flex; - align-items: center; - justify-content: center; -} - -@media (min-width: 768px) { - .feature-number-badge { - width: 36px; - height: 36px; - } -} - -@media (min-width: 1024px) { - .feature-number-badge { - width: 40px; - height: 40px; - } -} - -.feature-number-badge span { - font-size: 16px; - font-weight: 600; - color: #9BCACC; - letter-spacing: -0.006em; -} - -@media (min-width: 1024px) { - .feature-number-badge span { - font-size: 20px; - } -} - -.feature-card-title { - font-size: 16px; - font-weight: 600; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 768px) { - .feature-card-title { - font-size: 18px; - } -} - -@media (min-width: 1024px) { - .feature-card-title { - font-size: 24px; - } -} - -.feature-icon-box { - width: 100px; - height: 100px; - border-radius: 32px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -@media (min-width: 768px) { - .feature-icon-box { - width: 120px; - height: 120px; - border-radius: 36px; - } -} - -@media (min-width: 1024px) { - .feature-icon-box { - width: 160px; - height: 160px; - border-radius: 40px; - } -} - -.feature-icon-img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.feature-card-description { - font-size: 12px; - font-weight: 400; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.45; - white-space: pre-line; -} - -@media (min-width: 768px) { - .feature-card-description { - font-size: 14px; - } -} - -@media (min-width: 1024px) { - .feature-card-description { - font-size: 16px; - } -} - -/* Legacy feature-item styles (for backward compatibility) */ -.feature-item { - position: relative; - background-color: #01393B; - border-radius: 2.5rem; - padding: 1.5rem 2rem; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - transition: all var(--transition-normal); - border: 1px solid transparent; - gap: 1.5rem; - width: 100%; -} - -@media (min-width: 768px) { - .feature-item { - width: 360px; - min-height: 440px; - padding: 1.5rem 2.5rem; - } -} - -.feature-number { - width: 2.5rem; - height: 2.5rem; - flex-shrink: 0; - border-radius: var(--radius-full); - border: 1px solid #9BCACC; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - font-weight: 600; - color: #9BCACC; - letter-spacing: -0.006em; - line-height: 1.19; -} - -.feature-title { - font-size: var(--text-base); - font-weight: 600; - color: #E5F1F2; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 768px) { - .feature-title { - font-size: 1.5rem; - } -} - -.feature-icon { - width: 160px; - height: 160px; - border-radius: 2.5rem; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; -} - -.feature-icon img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.feature-description { - color: #E5F1F2; - font-size: var(--text-sm); - line-height: 1.45; - letter-spacing: -0.006em; - white-space: pre-line; -} - -@media (min-width: 768px) { - .feature-description { - font-size: var(--text-base); - } -} - -/* Welcome Button */ -.btn-start { - padding: 0.625rem 3rem; - border-radius: var(--radius-full); - background-color: #AE72F9; - color: var(--color-text-white); - font-weight: 600; - font-size: var(--text-sm); - transition: all var(--transition-normal); - border: none; - cursor: pointer; - margin: 0 auto; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 768px) { - .btn-start { - padding: 0.75rem 3.5rem; - } -} - -.btn-start:hover { - background-color: #9570f0; - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(174, 114, 249, 0.3); -} - -.btn-start:active { - transform: scale(0.95); -} - -/* Legacy buttons - keep for other sections */ -.welcome-buttons { - display: flex; - gap: 1rem; -} - -.btn-ghost { - padding: 0.75rem 2rem; - border-radius: var(--radius-full); - border: 1px solid var(--color-border-gray-700); - background-color: transparent; - color: var(--color-text-white); - font-weight: 700; - font-size: var(--text-xs); - transition: all var(--transition-normal); - cursor: pointer; - margin-bottom: 1rem; -} - -@media (min-width: 640px) { - .btn-ghost { - font-size: var(--text-sm); - } -} - -.btn-ghost:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -.btn-cta { - padding: 0.75rem 2.5rem; - border-radius: var(--radius-full); - background-color: var(--color-purple); - color: var(--color-text-white); - font-weight: 700; - font-size: var(--text-xs); - box-shadow: var(--shadow-purple); - transition: all var(--transition-normal); - border: none; - cursor: pointer; - margin-bottom: 1rem; -} - -@media (min-width: 640px) { - .btn-cta { - font-size: var(--text-sm); - } -} - -@media (min-width: 768px) { - .btn-cta { - padding: 0.75rem 3.5rem; - } -} - -.btn-cta:hover { - background-color: var(--color-purple-hover); -} - -.btn-cta:active { - transform: scale(0.95); -} - -/* ===================================================== - Display Section Components - ===================================================== */ - -/* Display Section */ -.display-section { - width: 100%; - min-height: 100dvh; - display: flex; - flex-direction: column; - justify-content: flex-start; - background-color: #002224; - color: var(--color-text-white); - position: relative; - overflow: hidden; -} - -.display-section .content-safe-area { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 50px 16px 0 16px; -} - -/* Display Frames Container */ -.display-frames { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 2rem; - margin-bottom: 2rem; - width: 100%; - max-width: 72rem; -} - -@media (min-width: 640px) { - .display-frames { - gap: 1rem; - } -} - -@media (min-width: 768px) { - .display-frames { - gap: 1rem; - } -} - -@media (min-width: 1024px) { - .display-frames { - gap: 2rem; - } -} - -/* Display Frame - 가로 크기는 feature-card와 일치, 세로는 9:16 비율 */ -.display-frame { - display: flex; - aspect-ratio: 9 / 16; - border-radius: 2.5rem; - overflow: hidden; - position: relative; - transition: all var(--transition-normal); -} - -@media (min-width: 768px) { - .display-frame { - width: 280px; - } -} - -@media (min-width: 1024px) { - .display-frame { - width: 360px; - } -} - -.display-frame img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.display-video { - width: 100%; - height: 100%; - border: none; - border-radius: 2.5rem; - pointer-events: none; -} - -.display-frame-hidden-mobile { - display: none; -} - -@media (min-width: 768px) { - .display-frame-hidden-mobile { - display: flex; - } -} - -/* Legacy Video Frames - Keep for backward compatibility */ -.video-frames { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 0.5rem; - margin-bottom: 2rem; - width: 100%; - max-width: 72rem; -} - -@media (min-width: 640px) { - .video-frames { - gap: 1.5rem; - } -} - -@media (min-width: 768px) { - .video-frames { - gap: 2.5rem; - margin-bottom: 4rem; - } -} - -@media (min-width: 1024px) { - .video-frames { - gap: 3.5rem; - } -} - -/* Phone Frame */ -.phone-frame { - display: flex; - width: 135px; - aspect-ratio: 9/16; - border-radius: 24px; - background-color: #000; - border: 1px solid rgba(255, 255, 255, 0.1); - overflow: hidden; - position: relative; - box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9); - align-items: center; - justify-content: center; - transition: all var(--transition-normal); -} - -@media (min-width: 640px) { - .phone-frame { - width: 190px; - border-radius: 40px; - } -} - -@media (min-width: 768px) { - .phone-frame { - width: 230px; - border-radius: 48px; - } -} - -@media (min-width: 1024px) { - .phone-frame { - width: 280px; - } -} - -.phone-frame.hidden-mobile { - display: none; -} - -@media (min-width: 768px) { - .phone-frame.hidden-mobile { - display: flex; - } -} - -.phone-video-container { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - pointer-events: none; - overflow: hidden; -} - -.phone-video-container iframe { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 180%; - height: 100%; - object-fit: cover; -} - -.phone-bezel { - position: absolute; - inset: 0; - border: 6px solid #20282b; - border-radius: 24px; - pointer-events: none; - z-index: 20; -} - -@media (min-width: 640px) { - .phone-bezel { - border-width: 10px; - border-radius: 40px; - } -} - -@media (min-width: 768px) { - .phone-bezel { - border-radius: 48px; - } -} - -.phone-notch { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 25%; - height: 12px; - background-color: #20282b; - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; - z-index: 30; - opacity: 0.8; -} - -@media (min-width: 640px) { - .phone-notch { - height: 20px; - } -} - -/* Display Button */ -.display-button { - padding: 0.625rem 3rem; - border-radius: var(--radius-full); - background-color: #AE72F9; - color: var(--color-text-white); - font-weight: 600; - font-size: var(--text-sm); - letter-spacing: -0.006em; - line-height: 1.19; - transition: all var(--transition-normal); - border: none; - cursor: pointer; - margin-top: 30px; -} - -@media (min-width: 768px) { - .display-button { - padding: 0.75rem 3.5rem; - } -} - -.display-button:hover { - background-color: #9570f0; - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(174, 114, 249, 0.3); -} - -.display-button:active { - transform: scale(0.95); -} - -/* ===================================================== - Login Section Components - ===================================================== */ - -/* Login Container */ -.login-container { - width: 100%; - height: 100dvh; - background-color: #002224; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--color-text-white); - padding: 1rem; - position: relative; - overflow: hidden; -} - -@media (min-width: 640px) { - .login-container { - padding: 1.5rem; - } -} - -/* Login Back Button */ -.login-back-btn { - position: absolute; - top: 0.875rem; - left: 1.5rem; - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.5rem 1.25rem 0.5rem 0.5rem; - border-radius: var(--radius-full); - border: 1px solid #694596; - background-color: transparent; - color: #CFABFB; - font-size: var(--text-sm); - font-weight: 600; - letter-spacing: -0.006em; - line-height: 1.19; - transition: all var(--transition-normal); - cursor: pointer; -} - -.login-back-btn img { - width: 20px; - height: 20px; -} - -.login-back-btn:hover { - background-color: rgba(105, 69, 150, 0.1); - border-color: #8662C7; -} - -.login-back-btn:active { - transform: scale(0.95); -} - -/* Login Content */ -.login-content { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 4rem; - max-width: 600px; -} - -@media (min-width: 768px) { - .login-content { - gap: 5rem; - } -} - -/* Login Logo */ -.login-logo { - width: 350px; - height: auto; -} - -@media (min-width: 768px) { - .login-logo { - width: 554px; - } -} - -.login-logo img { - width: 100%; - height: auto; - object-fit: contain; -} - -/* Kakao Button */ -.btn-kakao { - width: 100%; - max-width: 250px; - padding: 0.75rem 1rem; - border-radius: var(--radius-full); - background-color: #FEE500; - color: rgba(0, 0, 0, 0.85); - font-weight: 600; - font-size: var(--text-base); - letter-spacing: 0; - line-height: 1.19; - transition: all var(--transition-normal); - border: none; - cursor: pointer; -} - -@media (min-width: 768px) { - .btn-kakao { - max-width: 296px; - padding: 0.9375rem 1rem; - } -} - -.btn-kakao:hover { - background-color: #FDDC00; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3); -} - -.btn-kakao:active { - transform: scale(0.95); -} - -.btn-kakao:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - -.btn-kakao:disabled:hover { - background-color: #FEE500; - transform: none; - box-shadow: none; -} - -/* Login Error */ -.login-error { - color: #FF6B6B; - font-size: 14px; - text-align: center; - padding: 12px 16px; - background-color: rgba(255, 107, 107, 0.1); - border-radius: 8px; - margin-bottom: 16px; - max-width: 296px; - width: 100%; -} - -/* Legacy styles - keep for backward compatibility */ -.login-title { - font-family: 'Playfair Display', serif; - font-style: italic; - font-size: var(--text-3xl); - font-weight: 700; - margin-bottom: 0.5rem; - letter-spacing: -0.025em; - line-height: 1; - color: var(--color-text-white); -} - -@media (min-width: 640px) { - .login-title { - font-size: var(--text-4xl); - margin-bottom: 0.75rem; - } -} - -@media (min-width: 768px) { - .login-title { - font-size: 3rem; - } -} - -@media (min-width: 1024px) { - .login-title { - font-size: 3.75rem; - } -} - -.login-subtitle { - font-size: 9px; - font-weight: 300; - margin-bottom: 1.5rem; - opacity: 0.8; -} - -@media (min-width: 640px) { - .login-subtitle { - font-size: 10px; - margin-bottom: 2rem; - } -} - -@media (min-width: 768px) { - .login-subtitle { - font-size: var(--text-xs); - margin-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .login-subtitle { - font-size: var(--text-sm); - } -} - -/* ===================================================== - Loading Section Components - ===================================================== */ - -/* Loading Container */ -.loading-container { - width: 100%; - height: 100vh; - background-color: #002224; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--color-text-white); - padding: 0 1.5rem; -} - -.loading-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 3rem; - max-width: 600px; -} - -@media (min-width: 768px) { - .loading-content { - gap: 4rem; - } -} - -/* Loading Logo */ -.loading-logo { - width: 200px; - height: auto; -} - -@media (min-width: 768px) { - .loading-logo { - width: 308px; - } -} - -.loading-logo img { - width: 100%; - height: auto; - object-fit: contain; -} - -/* Loading Section */ -.loading-section { - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; - width: 100%; -} - -.loading-title { - font-size: 1.5rem; - font-weight: 700; - letter-spacing: -0.006em; - line-height: 1.19; - color: #FFFFFF; - text-align: center; -} - -@media (min-width: 768px) { - .loading-title { - font-size: 2rem; - } -} - -/* Loading Progress Bar */ -.loading-progress-wrapper { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - margin-top: 24px; - width: 240px; -} - -.loading-progress-bar { - width: 100%; - height: 4px; - background: rgba(255, 255, 255, 0.1); - border-radius: 2px; - overflow: hidden; -} - -.loading-progress-fill { - height: 100%; - background: #a6ffea; - border-radius: 2px; - transition: width 0.1s linear; -} - -.loading-progress-text { - font-size: 13px; - color: rgba(255, 255, 255, 0.5); - font-variant-numeric: tabular-nums; -} - -/* Loading Spinner Wrapper */ -.loading-spinner-wrapper { - width: 120px; - height: 120px; - display: flex; - align-items: center; - justify-content: center; -} - -@media (min-width: 768px) { - .loading-spinner-wrapper { - width: 200px; - height: 200px; - } -} - -.loading-spinner-icon { - width: 100%; - height: 100%; - animation: spin 2s linear infinite; -} - -/* Legacy Loading Spinner - Keep for backward compatibility */ -.loading-spinner { - position: relative; - margin-bottom: 2rem; -} - -.loading-ring { - width: 4rem; - height: 4rem; - border: 4px solid rgba(166, 130, 255, 0.2); - border-top-color: var(--color-purple); - border-radius: var(--radius-full); - animation: spin 1s linear infinite; -} - -.loading-dot { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.loading-dot-inner { - width: 1rem; - height: 1rem; - background-color: var(--color-purple); - border-radius: var(--radius-full); - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - box-shadow: 0 0 15px var(--color-purple); -} - -.loading-text { - text-align: center; -} - -.loading-text > * + * { - margin-top: 0.5rem; -} - -.loading-description { - color: var(--color-text-gray-400); - font-size: var(--text-sm); - font-weight: 300; - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -@media (min-width: 640px) { - .loading-description { - font-size: var(--text-base); - } -} - -/* ===================================================== - Dashboard Content Components - ===================================================== */ - -/* Dashboard Container */ -.dashboard-container { - width: 100%; - min-width: 375px; - padding: 0.75rem; - display: flex; - flex-direction: column; - background-color: var(--color-bg-dark); - color: var(--color-text-white); -} - -@media (min-width: 640px) { - .dashboard-container { - padding: 1rem; - } -} - -@media (min-width: 768px) { - .dashboard-container { - padding: 1.5rem; - } -} - -/* Dashboard Header */ -.dashboard-header { - flex-shrink: 0; - margin-bottom: 0.5rem; - margin-left: 2.5rem; -} - -@media (min-width: 640px) { - .dashboard-header { - margin-bottom: 0.75rem; - } -} - -@media (min-width: 768px) { - .dashboard-header { - margin-bottom: 1rem; - margin-left: 0; - } -} - -.dashboard-title { - font-size: 32px; - font-weight: 700; - letter-spacing: -0.025em; -} - -.dashboard-description { - font-size: 16px; - color: var(--color-text-gray-500); - margin-top: 0.125rem; -} - -/* Stats Grid */ -.stats-grid { - flex-shrink: 0; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -@media (min-width: 640px) { - .stats-grid { - gap: 0.75rem; - margin-bottom: 0.75rem; - } -} - -@media (min-width: 768px) { - .stats-grid { - margin-bottom: 1rem; - } -} - -/* Stat Card */ -.stat-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.5rem; - border: 1px solid var(--color-border-white-5); - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.125rem; - box-shadow: var(--shadow-xl); - transition: transform var(--transition-normal); -} - -@media (min-width: 640px) { - .stat-card { - padding: 0.75rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .stat-card { - padding: 1rem; - } -} - -.stat-card:hover { - transform: scale(1.02); -} - -.stat-label { - font-size: 14px; - font-weight: 700; - color: var(--color-text-gray-400); - text-transform: uppercase; - letter-spacing: 0.1em; -} - -.stat-value { - font-size: 24px; - font-weight: 700; - color: var(--color-text-white); - line-height: 1.25; -} - -.stat-trend { - display: inline-flex; - align-items: center; - gap: 2px; - font-size: 12px; - color: var(--color-mint); - font-weight: 500; -} - -/* Chart Card */ -.chart-card { - flex: 1; - min-height: 0; - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.75rem; - border: 1px solid var(--color-border-white-5); - display: flex; - flex-direction: column; - position: relative; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - overflow: hidden; -} - -@media (min-width: 640px) { - .chart-card { - padding: 1rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .chart-card { - padding: 1.5rem; - border-radius: var(--radius-3xl); - } -} - -.chart-header { - flex-shrink: 0; - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -@media (min-width: 640px) { - .chart-header { - margin-bottom: 0.75rem; - } -} - -@media (min-width: 768px) { - .chart-header { - margin-bottom: 1rem; - } -} - -.chart-title { - font-size: 8px; - font-weight: 700; - color: var(--color-text-gray-400); - text-transform: uppercase; - letter-spacing: 0.1em; -} - -.chart-legend { - display: flex; - gap: 0.375rem; - align-items: center; -} - -.chart-legend-dot { - width: 0.375rem; - height: 0.375rem; - border-radius: var(--radius-full); - background-color: var(--color-mint); -} - -.chart-legend-text { - font-size: 14px; - color: var(--color-text-gray-400); -} - -.chart-container { - flex: 1; - position: relative; - min-height: 0; -} - -.chart-badge { - position: absolute; - top: 45%; - left: 55%; - transform: translate(-50%, -100%); - margin-bottom: 0.5rem; - display: flex; - flex-direction: column; - align-items: center; - pointer-events: none; -} - -.chart-badge-value { - background-color: var(--color-mint); - color: var(--color-bg-dark); - padding: 0.125rem 0.5rem; - border-radius: var(--radius-md); - font-size: 9px; - font-weight: 700; - box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2); -} - -.chart-badge-line { - width: 2px; - height: 0.5rem; - background-color: rgba(166, 255, 234, 0.5); - margin-top: 0.125rem; -} - -@media (min-width: 640px) { - .chart-badge-line { - height: 0.75rem; - } -} - -.chart-xaxis { - flex-shrink: 0; - display: flex; - justify-content: space-between; - margin-top: 0.5rem; - padding: 0 0.5rem; - font-size: 8px; - color: var(--color-text-gray-500); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1em; - border-top: 1px solid var(--color-border-white-5); - padding-top: 0.5rem; -} - -@media (min-width: 640px) { - .chart-xaxis { - margin-top: 0.75rem; - padding: 0 1rem; - font-size: 9px; - padding-top: 0.75rem; - } -} - -@media (min-width: 768px) { - .chart-xaxis { - margin-top: 1rem; - padding: 0 1.5rem; - } -} - -/* Dashboard Header Extended */ -.dashboard-header-row { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 0.5rem; -} - -@media (min-width: 768px) { - .dashboard-header-row { - margin-bottom: 1rem; - margin-left: 0; - align-items: center; - } -} - -.dashboard-last-updated { - font-size: 12px; - color: var(--color-text-gray-500); - display: none; -} - -@media (min-width: 768px) { - .dashboard-last-updated { - display: block; - font-size: 12px; - } -} - -/* Stats Grid 5 Columns */ -.stats-grid-5 { - flex-shrink: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -@media (min-width: 640px) { - .stats-grid-5 { - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; - margin-bottom: 1rem; - } -} - -@media (min-width: 768px) { - .stats-grid-5 { - grid-template-columns: repeat(5, 1fr); - } -} - -/* Stat Trend with Direction */ -.stat-trend-wrapper { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.stat-trend-icon { - width: 10px; - height: 10px; -} - -@media (min-width: 640px) { - .stat-trend-icon { - width: 12px; - height: 12px; - } -} - -.stat-trend.up { - color: var(--color-mint); -} - -.stat-trend.down { - color: #f87171; -} - -.stat-trend.neutral { - color: var(--color-text-gray-400); -} - -/* Dashboard Section */ -.dashboard-section { - margin-bottom: 0.75rem; -} - -@media (min-width: 768px) { - .dashboard-section { - margin-bottom: 1rem; - } -} - -.dashboard-section-title { - font-size: 24px; - font-weight: 600; - color: var(--color-text-white); - margin-bottom: 0.5rem; -} - -/* Chart Legend Dual (for YoY comparison) */ -.chart-legend-dual { - display: flex; - gap: 1rem; - align-items: center; -} - -.chart-legend-item { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.chart-legend-line { - width: 1rem; - height: 2px; - border-radius: var(--radius-full); -} - -.chart-legend-line.solid { - background-color: var(--color-mint); -} - -.chart-legend-line.dashed { - background: repeating-linear-gradient( - 90deg, - var(--color-purple) 0px, - var(--color-purple) 3px, - transparent 3px, - transparent 6px - ); -} - -/* Platform Tabs */ -.platform-tabs { - display: flex; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -@media (min-width: 768px) { - .platform-tabs { - margin-bottom: 1rem; - } -} - -.platform-tab { - padding: 0.5rem 0.75rem; - border-radius: var(--radius-full); - border: 1px solid var(--color-border-gray-700); - background-color: transparent; - color: var(--color-text-gray-400); - font-size: var(--text-xs); - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - display: flex; - align-items: center; - gap: 0.375rem; -} - -@media (min-width: 640px) { - .platform-tab { - padding: 0.5rem 1rem; - /* font-size: var(--text-sm); */ - gap: 0.5rem; - } -} - -.platform-tab:hover { - border-color: var(--color-border-gray-600); - color: var(--color-text-gray-300); -} - -.platform-tab.active { - border-color: var(--color-mint); - background-color: rgba(166, 255, 234, 0.1); - color: var(--color-mint); -} - -.platform-tab-icon { - width: 0.875rem; - height: 0.875rem; -} - -@media (min-width: 640px) { - .platform-tab-icon { - width: 1rem; - height: 1rem; - } -} - -/* Mode Toggle */ -.mode-toggle { - display: flex; - flex-shrink: 0; - border: 1px solid var(--color-border-gray-700); - border-radius: var(--radius-full); - overflow: hidden; -} - -.mode-btn { - min-width: 48px; - padding: 0.375rem 0.875rem; - background-color: transparent; - color: var(--color-text-gray-400); - font-size: 16px; - white-space: nowrap; - font-weight: 600; - cursor: pointer; - border: none; - transition: all var(--transition-normal); -} - -.mode-btn:hover { - color: var(--color-text-gray-300); - background-color: rgba(255, 255, 255, 0.05); -} - -.mode-btn.active { - background-color: rgba(166, 255, 234, 0.15); - color: var(--color-mint); -} - -/* Platform Metrics Grid */ -.platform-metrics-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; -} - -@media (min-width: 640px) { - .platform-metrics-grid { - gap: 0.75rem; - } -} - -@media (min-width: 768px) { - .platform-metrics-grid { - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } -} - -/* Metric Card */ -.metric-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.75rem; - border: 1px solid var(--color-border-white-5); - display: flex; - flex-direction: column; - gap: 0.375rem; - box-shadow: var(--shadow-xl); - transition: transform var(--transition-normal); -} - -@media (min-width: 640px) { - .metric-card { - padding: 1rem; - border-radius: var(--radius-2xl); - gap: 0.5rem; - } -} - -.metric-card:hover { - transform: scale(1.02); -} - -.metric-card-header { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.metric-card-icon { - width: 1rem; - height: 1rem; - color: var(--color-text-gray-400); -} - -@media (min-width: 640px) { - .metric-card-icon { - width: 1.25rem; - height: 1.25rem; - } -} - -.metric-card-label { - font-size: var(--text-xs); - color: var(--color-text-gray-400); - font-weight: 500; -} - -@media (min-width: 640px) { - .metric-card-label { - font-size: var(--text-sm); - } -} - -.metric-card-value { - font-size: var(--text-xl); - font-weight: 700; - color: var(--color-text-white); - display: flex; - align-items: baseline; - gap: 0.25rem; -} - -.metric-card-unit { - font-size: var(--text-xs); - color: var(--color-text-gray-500); - font-weight: 400; -} - -.metric-card-trend { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 9px; - font-weight: 500; -} - -.metric-card-trend.up { - color: var(--color-mint); -} - -.metric-card-trend.down { - color: #f87171; -} - -.metric-card-trend-icon { - width: 10px; - height: 10px; -} - -@media (min-width: 640px) { - .metric-card-trend-icon { - width: 12px; - height: 12px; - } -} - -/* YoY Chart */ -.yoy-chart-card { - min-width: 351px; - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.5rem; - border: 1px solid var(--color-border-white-5); - box-shadow: var(--shadow-xl); - margin-bottom: 0.75rem; - overflow: hidden; -} - -@media (min-width: 640px) { - .yoy-chart-card { - padding: 1rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .yoy-chart-card { - padding: 1.5rem; - margin-bottom: 1rem; - } -} - -.yoy-chart-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.75rem; -} - -@media (min-width: 768px) { - .yoy-chart-header { - margin-bottom: 1rem; - } -} - -.yoy-chart-container { - position: relative; - width: 100%; - height: 180px; -} - -@media (min-width: 640px) { - .yoy-chart-container { - height: 220px; - } -} - -@media (min-width: 768px) { - .yoy-chart-container { - height: 280px; - } -} - -.yoy-chart-svg { - width: 100%; - height: 100%; -} - -.yoy-chart-xaxis { - display: flex; - justify-content: space-between; - margin-top: 0.5rem; - padding: 0; - font-size: 8px; - color: var(--color-text-gray-500); - font-weight: 500; -} - -@media (min-width: 640px) { - .yoy-chart-xaxis { - font-size: 9px; - margin-top: 0.75rem; - } -} - -@media (min-width: 768px) { - .yoy-chart-xaxis { - font-size: 10px; - } -} - -/* Chart Wrapper for Tooltip */ -.yoy-chart-wrapper { - position: relative; - width: 100%; - height: 100%; -} - -/* Chart Tooltip */ -.chart-tooltip { - background-color: rgba(28, 42, 46, 0.95); - border: 1px solid var(--color-border-white-10); - border-radius: var(--radius-lg); - padding: 0.75rem; - min-width: 120px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); - pointer-events: none; - z-index: 100; - animation: tooltipFadeIn 0.2s ease; -} - -@keyframes tooltipFadeIn { - from { opacity: 0; transform: translateY(4px); } - to { opacity: 1; transform: translateY(0); } -} - -.chart-tooltip-title { - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-text-white); - margin-bottom: 0.5rem; - text-align: center; -} - -.chart-tooltip-row { - display: flex; - align-items: center; - gap: 0.375rem; - margin-bottom: 0.25rem; -} - -.chart-tooltip-dot { - width: 8px; - height: 8px; - border-radius: var(--radius-full); -} - -.chart-tooltip-dot.mint { - background-color: var(--color-mint); -} - -.chart-tooltip-dot.purple { - background-color: var(--color-purple); -} - -.chart-tooltip-label { - font-size: var(--text-xs); - color: var(--color-text-gray-400); - flex: 1; -} - -.chart-tooltip-value { - font-size: var(--text-xs); - font-weight: 600; - color: var(--color-text-white); -} - -.chart-tooltip-change { - margin-top: 0.5rem; - padding-top: 0.5rem; - border-top: 1px solid var(--color-border-white-5); - font-size: var(--text-xs); - font-weight: 600; - color: var(--color-mint); - text-align: center; -} - -.chart-tooltip-change.down { - color: #ff6b6b; -} - -.chart-tooltip-change.neutral { - color: var(--color-text-gray-400); -} - -/* Chart Animations */ -.chart-line-animated { - stroke-dasharray: 2000; - stroke-dashoffset: 2000; - transition: stroke-dashoffset 1.5s ease-out; -} - -.chart-line-animated.visible { - stroke-dashoffset: 0; -} - -.chart-area-animated { - opacity: 0; - transition: opacity 0.8s ease-out 0.5s; -} - -.chart-area-animated.visible { - opacity: 1; -} - -.chart-point-animated { - opacity: 0; - transform-origin: center; - transition: opacity 0.3s ease; -} - -.chart-point-animated.visible { - opacity: 1; -} - -/* Platform Section Card */ -.platform-section-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.75rem; - border: 1px solid var(--color-border-white-5); - box-shadow: var(--shadow-xl); -} - -@media (min-width: 640px) { - .platform-section-card { - padding: 1rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .platform-section-card { - padding: 1.5rem; - } -} - -.platform-section-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.75rem; - flex-wrap: wrap; - gap: 0.5rem; -} - -@media (min-width: 768px) { - .platform-section-header { - margin-bottom: 1rem; - } -} - -/* Stats Grid 8 Columns */ -.stats-grid-8 { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 0.5rem; -} - -@media (min-width: 640px) { - .stats-grid-8 { - gap: 0.75rem; - } -} - -/* Platform Metrics Grid 8 Columns */ -.platform-metrics-grid-8 { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; -} - -@media (min-width: 640px) { - .platform-metrics-grid-8 { - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; - } -} - -@media (min-width: 1024px) { - .platform-metrics-grid-8 { - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } -} - -/* Dashboard Two Column Layout */ -.dashboard-two-column { - display: grid; - grid-template-columns: 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -@media (min-width: 1024px) { - .dashboard-two-column { - grid-template-columns: 2fr 1fr; - gap: 1rem; - margin-bottom: 1rem; - } -} - -/* Top Content Card */ -.top-content-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.75rem; - border: 1px solid var(--color-border-white-5); - box-shadow: var(--shadow-xl); -} - -@media (min-width: 640px) { - .top-content-card { - padding: 1rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .top-content-card { - padding: 1rem; - } -} - -.top-content-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.top-content-item { - display: flex; - gap: 0.75rem; - padding: 0.5rem; - border-radius: var(--radius-lg); - background-color: var(--color-bg-card-inner); - transition: transform var(--transition-normal); -} - -.top-content-item:hover { - transform: scale(1.01); -} - -.top-content-thumbnail { - position: relative; - width: 80px; - height: 45px; - border-radius: var(--radius-md); - overflow: hidden; - flex-shrink: 0; -} - -@media (min-width: 640px) { - .top-content-thumbnail { - width: 100px; - height: 56px; - } -} - -.top-content-thumbnail img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.top-content-platform-badge { - position: absolute; - bottom: 4px; - right: 4px; - background-color: rgba(0, 0, 0, 0.7); - border-radius: var(--radius-sm); - padding: 2px; - display: flex; - align-items: center; - justify-content: center; -} - -.top-content-platform-icon { - width: 12px; - height: 12px; - color: white; -} - -.top-content-info { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.25rem; -} - -.top-content-title { - max-width: 215px; - font-size: 14px; - font-weight: 600; - color: var(--color-text-white); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.top-content-stats { - display: flex; - gap: 0.75rem; -} - -.top-content-stat { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 12px; - color: var(--color-text-gray-400); -} - -.top-content-stat svg { - color: var(--color-text-gray-500); -} - -.top-content-date { - font-size: 12px; - color: var(--color-text-gray-500); -} - -/* Audience Section */ -.audience-section { - margin-bottom: 0.75rem; -} - -@media (min-width: 768px) { - .audience-section { - margin-bottom: 1rem; - } -} - -.audience-cards { - display: grid; - grid-template-columns: 1fr; - gap: 0.75rem; -} - -@media (min-width: 768px) { - .audience-cards { - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } -} - -.audience-card { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 1rem; - border: 1px solid var(--color-border-white-5); - box-shadow: var(--shadow-xl); -} - -@media (min-width: 640px) { - .audience-card { - padding: 1.25rem; - border-radius: var(--radius-2xl); - } -} - -.audience-card-title { - font-size: 20px; - font-weight: 600; - color: var(--color-text-gray-300); - margin-bottom: 1rem; -} - -/* Audience Bar Chart */ -.audience-bar-chart { - display: flex; - flex-direction: column; - gap: 0.625rem; -} - -.audience-bar-item { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.audience-bar-label { - font-size: 14px; - color: var(--color-text-gray-400); - width: 60px; - flex-shrink: 0; -} - -.audience-bar-track { - flex: 1; - height: 8px; - background-color: var(--color-bg-card-inner); - border-radius: var(--radius-full); - overflow: hidden; -} - -.audience-bar-fill { - height: 100%; - background: linear-gradient(90deg, var(--color-mint), var(--color-purple)); - border-radius: var(--radius-full); - transition: width 0.5s ease-out; -} - -.audience-bar-value { - font-size: 14px; - color: var(--color-text-white); - width: 36px; - text-align: right; - flex-shrink: 0; -} - -/* Gender Chart */ -.gender-chart { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.gender-chart-bars { - display: flex; - height: 32px; - border-radius: var(--radius-full); - overflow: hidden; -} - -.gender-bar { - display: flex; - align-items: center; - justify-content: center; - transition: width 0.5s ease-out; -} - -.gender-bar span { - font-size: var(--text-xs); - font-weight: 600; - color: var(--color-bg-dark); -} - -.gender-bar.male { - background: linear-gradient(90deg, #60a5fa, #3b82f6); -} - -.gender-bar.female { - background: linear-gradient(90deg, #f472b6, #ec4899); -} - -.gender-chart-labels { - display: flex; - justify-content: space-between; -} - -.gender-label { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 14px; - color: var(--color-text-gray-400); -} - -.gender-label::before { - content: ''; - width: 8px; - height: 8px; - border-radius: var(--radius-full); -} - -.gender-label.male::before { - background-color: #3b82f6; -} - -.gender-label.female::before { - background-color: #ec4899; -} - -/* ===================================================== - Business Settings Components - ===================================================== */ - -/* Settings Container */ -.settings-container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0.75rem; - background-color: var(--color-bg-dark); - color: var(--color-text-white); - overflow: hidden; -} - -@media (min-width: 640px) { - .settings-container { - padding: 1rem; - } -} - -@media (min-width: 768px) { - .settings-container { - padding: 1.5rem; - } -} - -/* Settings Header */ -.settings-header { - text-align: center; - margin-bottom: 1rem; - max-width: 42rem; - margin-left: 2.5rem; -} - -@media (min-width: 640px) { - .settings-header { - margin-bottom: 1.5rem; - } -} - -@media (min-width: 768px) { - .settings-header { - margin-bottom: 2rem; - margin-left: 0; - } -} - -.settings-title { - font-size: var(--text-lg); - font-weight: 700; - margin-bottom: 0.25rem; -} - -@media (min-width: 640px) { - .settings-title { - font-size: var(--text-xl); - margin-bottom: 0.5rem; - } -} - -@media (min-width: 768px) { - .settings-title { - font-size: 1.5rem; - } -} - -@media (min-width: 1024px) { - .settings-title { - font-size: var(--text-3xl); - } -} - -.settings-description { - color: var(--color-text-gray-400); - font-size: 9px; - font-weight: 300; - line-height: 1.625; - opacity: 0.8; -} - -@media (min-width: 640px) { - .settings-description { - font-size: 10px; - } -} - -@media (min-width: 768px) { - .settings-description { - font-size: var(--text-xs); - } -} - -/* Settings Card */ -.settings-card { - width: 100%; - max-width: 36rem; -} - -.settings-card-inner { - background-color: var(--color-bg-card); - border-radius: var(--radius-xl); - padding: 0.75rem; - border: 1px solid var(--color-border-white-5); - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); -} - -@media (min-width: 640px) { - .settings-card-inner { - padding: 1rem; - border-radius: var(--radius-2xl); - } -} - -@media (min-width: 768px) { - .settings-card-inner { - padding: 1.5rem; - border-radius: var(--radius-3xl); - } -} - -.settings-card-title { - color: var(--color-mint); - font-size: 9px; - font-weight: 700; - margin-bottom: 0.5rem; - letter-spacing: 0.1em; - text-transform: uppercase; -} - -@media (min-width: 640px) { - .settings-card-title { - font-size: 10px; - margin-bottom: 0.75rem; - } -} - -@media (min-width: 768px) { - .settings-card-title { - font-size: var(--text-xs); - margin-bottom: 1rem; - } -} - -/* Social Items */ -.social-items { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -@media (min-width: 640px) { - .social-items { - gap: 0.75rem; - } -} - -.social-item { - background-color: var(--color-bg-dark); - padding: 0.5rem; - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-white-5); - display: flex; - align-items: center; - justify-content: space-between; - transition: border-color var(--transition-normal); -} - -@media (min-width: 640px) { - .social-item { - padding: 0.75rem; - border-radius: var(--radius-xl); - } -} - -.social-item:hover { - border-color: var(--color-border-white-10); -} - -.social-item-left { - display: flex; - align-items: center; - gap: 0.5rem; -} - -@media (min-width: 640px) { - .social-item-left { - gap: 0.75rem; - } -} - -.social-item-icon { - width: 1.5rem; - height: 1.5rem; - border-radius: var(--radius-lg); - display: flex; - align-items: center; - justify-content: center; -} - -@media (min-width: 640px) { - .social-item-icon { - width: 2rem; - height: 2rem; - } -} - -.social-item-icon-inner { - width: 0.75rem; - height: 0.75rem; -} - -@media (min-width: 640px) { - .social-item-icon-inner { - width: 1rem; - height: 1rem; - } -} - -.social-item-name { - font-size: 10px; - font-weight: 700; - color: var(--color-text-gray-300); -} - -@media (min-width: 640px) { - .social-item-name { - font-size: var(--text-xs); - } -} - -.social-item-connect { - color: var(--color-mint); - font-size: 9px; - font-weight: 700; - background: none; - border: none; - cursor: pointer; -} - -@media (min-width: 640px) { - .social-item-connect { - font-size: 10px; - } -} - -.social-item-connect:hover { - text-decoration: underline; -} - -/* ===================================================== - Footer Component - ===================================================== */ - -/* Landing Footer */ -.landing-footer { - width: 100%; - background: var(--Color-teal-800, #002224); - padding: 40px 1.5rem; -} - -@media (min-width: 768px) { - .landing-footer { - padding: 48px 5rem; - } -} - -@media (min-width: 1024px) { - .landing-footer { - padding: 60px 100px; - } -} - -.footer-content { - display: flex; - flex-direction: column; - gap: 2rem; - max-width: 1144px; - margin: 0 auto; -} - -@media (min-width: 768px) { - .footer-content { - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 4rem; - } -} - -.footer-left { - min-width: 262px; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.footer-logo { - height: 24px; - width: auto; - object-fit: contain; -} - -.footer-copyright { - font-size: 14px; - font-weight: 400; - color: #379599; - letter-spacing: -0.006em; - line-height: 1.19; -} - -.footer-links { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; -} - -.footer-link { - font-size: 13px; - color: #379599; - text-decoration: none; - opacity: 0.8; -} - -.footer-link:hover { - opacity: 1; - text-decoration: underline; -} - -.footer-link-divider { - font-size: 13px; - color: #379599; - opacity: 0.5; -} - -.footer-right { - max-width: 600px; - display: flex; - flex-direction: column; - gap: 4px; -} - -.footer-info { - font-size: 12px; - font-weight: 400; - color: #CEE5E6; - letter-spacing: -0.006em; - line-height: 1.19; -} - -@media (min-width: 768px) { - .footer-info { - font-size: 14px; - } -} - -/* ===================================================== - Header Component - ===================================================== */ - -/* Landing Header */ -.landing-header { - width: calc(100% - 2rem); - max-width: 1280px; - padding: 12px 12px 12px 24px; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 16px; - left: 50%; - transform: translateX(-50%); - z-index: 10100; - background: rgba(0, 34, 36, 0.3); - border: 1px solid rgba(229, 241, 242, 0.2); - border-radius: 999px; - backdrop-filter: blur(40px); - -webkit-backdrop-filter: blur(40px); -} - -@media (min-width: 768px) { - .landing-header { - width: calc(100% - 10rem); - } -} - -.header-logo { - display: flex; - align-items: center; - height: 16px; -} - -.header-logo img { - height: 100%; - width: auto; - object-fit: contain; -} - -.header-actions { - display: flex; - align-items: center; - gap: 8px; -} - -.header-actions .lang-toggle { - width: auto; - max-width: none; - padding: 2px; - flex-shrink: 0; -} - -.header-actions .lang-toggle-option { - padding: 4px 10px; - white-space: nowrap; -} - -.header-login-btn { - padding: 10px 24px; - border-radius: 999px; - background-color: #94FBE0; - color: #000000; - font-weight: 600; - font-size: 14px; - border: none; - cursor: pointer; - transition: all var(--transition-normal); - letter-spacing: -0.006em; - line-height: 1.19; -} - -.header-login-btn:hover { - background-color: #7fe8cc; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(148, 251, 224, 0.3); -} - -.header-login-btn:active { - transform: scale(0.95); -} - -.header-start-btn { - padding: 10px 24px; - border-radius: 999px; - background-color: #AE72F9; - color: #FFFFFF; - font-weight: 600; - font-size: 14px; - border: none; - cursor: pointer; - transition: all var(--transition-normal); - letter-spacing: -0.006em; - line-height: 1.19; -} - -.header-start-btn:hover { - background-color: #9B5DE5; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(174, 114, 249, 0.3); -} - -.header-start-btn:active { - transform: scale(0.95); -} - -.header-avatar { - width: 2rem; - height: 2rem; - border-radius: var(--radius-full); - overflow: hidden; - border: 1px solid var(--color-border-gray-700); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -} - -@media (min-width: 640px) { - .header-avatar { - width: 2.5rem; - height: 2.5rem; - } -} - -.header-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} - -/* ===================================================== - Content Safe Area (for Landing Pages) - ===================================================== */ -.content-safe-area { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -} - - -/* ===================================================== - Sound Studio Styles - ===================================================== */ - -/* Sound Studio Page */ -.sound-studio-page { - height: 100%; - background-color: #002224; - overflow-y: auto; - overflow-x: hidden; - padding: 80px 1rem 120px; -} - -@media (min-width: 768px) { - .sound-studio-page { - padding: 80px 2rem 120px; - left: 240px; - } -} - -/* Sound Studio Header */ -.sound-studio-header { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 64px; - display: flex; - align-items: center; - padding: 0 1rem; - z-index: 30; - pointer-events: none; -} - -.sound-studio-header > * { - pointer-events: all; -} - -@media (min-width: 768px) { - .sound-studio-header { - left: 240px; - padding: 0 2rem; - } -} - -.btn-back-new { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.5rem 1.25rem 0.5rem 0.5rem; - background-color: #462E64; - border: 1px solid #694596; - border-radius: var(--radius-full); - color: #CFABFB; - font-size: var(--text-sm); - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - width: fit-content; - flex-shrink: 0; -} - -.btn-back-new:hover { - background-color: #694596; - border-color: #8B5BC7; -} - -/* Progress Indicator */ -.progress-indicator { - display: flex; - flex-direction: column; - gap: 0.25rem; - width: 280px; -} - -.progress-label { - display: flex; - align-items: center; - gap: 1rem; -} - -.progress-text { - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-text-white); -} - -.progress-numbers { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.progress-current { - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-text-white); -} - -.progress-divider, -.progress-total { - font-size: 0.8125rem; - font-weight: 400; - color: #379599; -} - -.progress-bar-wrapper { - position: relative; - width: 100%; - height: 8px; - background-color: #01393B; - border-radius: var(--radius-full); - overflow: hidden; -} - -.progress-bar-track { - width: 100%; - height: 100%; - background: linear-gradient(90deg, #94FBE0 0%, #AE72F9 100%); - border-radius: var(--radius-full); -} - -/* Sound Studio Title */ -.sound-studio-title { - font-size: 2rem; - font-weight: 700; - color: #ffffff; - text-align: center; - width: 100%; - margin: 0 auto 1rem; - padding: 0; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Sound Studio Container */ -.sound-studio-container { - height: 96%; - min-height: 600px; - background-color: #01393B; - border-radius: 24px; - padding: 1.25rem 1rem; - margin: 0 auto; - max-width: 1440px; - width: 100%; - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -@media (min-width: 768px) { - .sound-studio-container { - border-radius: 40px; - padding: 2rem; - } -} - -/* Sound Studio Columns */ -.sound-studio-columns { - display: flex; - flex-direction: column; - gap: 1.5rem; - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; -} - -/* Sound Column */ -.sound-column { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - gap: 1.25rem; - flex-shrink: 0; - font-size: 14px; -} - -.sound-column > *:not(.btn-generate-sound):not(.error-message-new):not(.status-message-new) { - width: 100%; -} - -/* Lyrics Column */ -.lyrics-column { - width: 100%; - display: flex; - flex-direction: column; - gap: 1.25rem; - flex-shrink: 0; -} - -/* Column Title */ -.column-title { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-mint); - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Sound Studio Section */ -.sound-studio-section { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -/* Input Label */ -.input-label { - font-size: var(--text-sm); - font-weight: 600; - color: #CEE5E6; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Sound Type Grid */ -.sound-type-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; -} - -/* Sound Type Button */ -.sound-type-btn { - padding: 1rem; - background-color: #002224; - border: 1px solid rgba(255, 255, 255, 0.05); - border-radius: 8px; - color: var(--color-text-white); - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - text-align: center; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.sound-type-btn:hover:not(:disabled) { - background-color: rgba(0, 34, 36, 0.8); - border-color: rgba(255, 255, 255, 0.1); -} - -.sound-type-btn.active { - border-color: var(--color-mint); -} - -.sound-type-btn.active:hover:not(:disabled) { - border-color: var(--color-mint); -} - -.sound-type-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Genre Grid */ -.genre-grid { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.genre-row { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; -} - -/* Genre Button */ -.genre-btn { - padding: 1rem; - background-color: #002224; - border: 1px solid rgba(255, 255, 255, 0.05); - border-radius: 8px; - color: var(--color-text-white); - font-size: var(--text-sm); - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - text-align: center; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.genre-btn:hover:not(:disabled) { - background-color: rgba(0, 34, 36, 0.8); - border-color: rgba(255, 255, 255, 0.1); -} - -.genre-btn.active:hover:not(:disabled) { - border-color: var(--color-mint); -} - -.genre-btn.active { - border-color: var(--color-mint); -} - -.genre-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.genre-btn-placeholder { - /* Empty space for grid alignment */ -} - -/* Language Selector */ -.language-selector-wrapper { - position: relative; -} - -.language-selector { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 1rem; - background-color: #002224; - border: 1px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: border-color 0.2s, background-color 0.2s; -} - -.language-selector:hover:not(:disabled) { - background-color: #003A3C; -} - -.language-selector:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.language-display { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.language-flag { - font-size: 1.25rem; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.language-name { - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-text-white); - line-height: 1.19; - letter-spacing: -0.006em; -} - -.language-dropdown-icon { - width: 1rem; - height: 1rem; - opacity: 0.7; - transition: transform 0.2s; -} - -.language-dropdown-icon.open { - transform: rotate(180deg); -} - -/* Language Dropdown Menu */ -.language-dropdown-menu { - position: absolute; - top: calc(100% + 0.5rem); - left: 0; - right: 0; - max-height: 220px; - background-color: #002224; - border: 1px solid #046266; - border-radius: 8px; - overflow-y: auto; - z-index: 100; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - overscroll-behavior: contain; -} - -.language-dropdown-menu::-webkit-scrollbar { - width: 6px; -} - -.language-dropdown-menu::-webkit-scrollbar-track { - background: transparent; -} - -.language-dropdown-menu::-webkit-scrollbar-thumb { - background: #046266; - border-radius: 3px; -} - -.language-dropdown-menu::-webkit-scrollbar-thumb:hover { - background: #379599; -} - -.language-dropdown-item { - width: 100%; - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1rem; - background-color: #002224; - border: none; - cursor: pointer; - transition: background-color 0.2s; -} - -.language-dropdown-item:hover { - background-color: #003A3C; -} - -.language-dropdown-item.active { - background-color: #046266; -} - -.language-dropdown-item .language-flag { - font-size: 1.25rem; -} - -.language-dropdown-item .language-name { - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-text-white); -} - -/* Lyrics Header */ -.lyrics-header { - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -.lyrics-subtitle { - font-size: var(--text-sm); - font-weight: 600; - color: #CEE5E6; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Audio Player */ -.audio-player { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background-color: #002224; - border-radius: 8px; -} - -.play-btn-new { - width: 1.5rem; - height: 1.5rem; - display: flex; - align-items: center; - justify-content: center; - background: none; - border: none; - color: var(--color-text-white); - cursor: pointer; - transition: all var(--transition-normal); - flex-shrink: 0; -} - -.play-btn-new:hover:not(.disabled) { - color: var(--color-mint); -} - -.play-btn-new.disabled { - opacity: 0.3; - cursor: not-allowed; -} - -.audio-progress-container { - flex: 1; - height: 4px; - background-color: #046266; - border-radius: var(--radius-full); - position: relative; - cursor: pointer; -} - -.audio-progress-container.disabled { - cursor: not-allowed; -} - -.audio-progress-fill { - height: 100%; - background-color: var(--color-mint); - border-radius: var(--radius-full); - transition: width 0.1s ease-out; -} - -.audio-time { - font-size: var(--text-sm); - font-weight: 400; - color: #046266; - min-width: 40px; - text-align: right; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Lyrics Display */ -.lyrics-display { - flex: 1; - display: flex; - background-color: #002224; - border-radius: 8px; - padding: 1rem; - overflow: hidden; -} - -.lyrics-textarea { - width: 100%; - min-height: 200px; - background: transparent; - border: none; - color: var(--color-text-white); - font-size: 16px; - font-family: inherit; - resize: none; - outline: none; - line-height: 1.6; - scrollbar-width: thin; - scrollbar-color: #046266 transparent; -} - -.lyrics-textarea::-webkit-scrollbar { - width: 6px; -} - -.lyrics-textarea::-webkit-scrollbar-track { - background: transparent; -} - -.lyrics-textarea::-webkit-scrollbar-thumb { - background: #046266; - border-radius: 3px; -} - -.lyrics-textarea::-webkit-scrollbar-thumb:hover { - background: #379599; -} - -.lyrics-paragraphs { - width: 100%; - overflow-y: auto; - padding: 1rem; - display: flex; - flex-direction: column; - gap: 1.25rem; - scrollbar-color: #046266 transparent; -} - -.lyrics-paragraphs::-webkit-scrollbar { - width: 6px; -} - -.lyrics-paragraphs::-webkit-scrollbar-track { - background: transparent; -} - -.lyrics-paragraphs::-webkit-scrollbar-thumb { - background: #046266; - border-radius: 3px; -} - -.lyrics-section { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.lyrics-tag { - font-size: var(--text-xs); - font-weight: 700; - color: #379599; - letter-spacing: 0.05em; -} - -.lyrics-paragraph { - font-size: var(--text-sm); - font-weight: 400; - color: #CEE5E6; - line-height: 1.9; - white-space: pre-line; - margin: 0; -} - -.lyrics-placeholder { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--text-sm); - font-weight: 400; - color: #6AB0B3; - text-align: center; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Generate Sound Button */ -.btn-generate-sound { - height: 40px; - min-width: 120px; - padding: 0.625rem 1.25rem; - background-color: #94FBE0; - border: none; - border-radius: var(--radius-full); - color: #000000; - font-size: var(--text-sm); - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - line-height: 1.19; - letter-spacing: -0.006em; - margin-top: 10px; -} - -.btn-generate-sound:hover:not(.disabled) { - background-color: #6ef5ca; -} - -.btn-generate-sound.disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.regenerate-hint { - font-size: 14px; - color: #CEE5E6; - text-align: center; -} - -.charge-credits-link { - display: block; - margin-top: 6px; - font-size: 13px; - color: #AE72F9; - text-decoration: underline; - cursor: pointer; -} - -/* Video Generate Button */ -.btn-video-generate { - padding: 0.625rem 2.5rem; - background-color: #AE72F9; - border: none; - border-radius: var(--radius-full); - color: #FFFFFF; - height: 40px; - font-size: var(--text-sm); - font-weight: 600; - cursor: pointer; - transition: all var(--transition-normal); - line-height: 1.19; - letter-spacing: -0.006em; - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - min-width: fit-content; -} - -.btn-video-generate:hover:not(.disabled):not(.generating) { - background-color: #9B5DE5; -} - -.btn-video-generate.disabled { - background-color: #462E64; - color: #8B5BC7; - opacity: 0.7; - cursor: not-allowed; -} - -.btn-video-generate.generating { - background-color: #AE72F9; - color: #FFFFFF; - padding: 0.625rem 1.5rem; - cursor: default; -} - -.video-gen-text { - font-size: var(--text-sm); - font-weight: 600; - color: #FFFFFF; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.video-gen-progress-bar { - width: 280px; - height: 8px; - background-color: #694596; - border-radius: var(--radius-full); - overflow: hidden; - position: relative; -} - -.video-gen-progress-fill { - height: 100%; - background-color: #FFFFFF; - border-radius: var(--radius-full); - transition: width 0.5s ease-out; -} - -/* Error and Status Messages */ -.error-message-new { - padding: 0.75rem 1rem; - background-color: rgba(239, 68, 68, 0.1); - border: 1px solid rgba(239, 68, 68, 0.3); - border-radius: var(--radius-lg); - color: #fca5a5; - font-size: var(--text-sm); - text-align: center; -} - -.status-message-new { - padding: 0.75rem 1rem; - background-color: rgba(148, 251, 224, 0.1); - border: 1px solid rgba(148, 251, 224, 0.3); - border-radius: var(--radius-lg); - color: var(--color-mint); - font-size: var(--text-sm); - text-align: center; - white-space: pre-line; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - margin-top: 10px; -} - -/* Responsive Styles for Sound Studio */ -@media (min-width: 768px) { - .progress-indicator { - width: 100%; - } - - .sound-type-grid { - gap: 0.5rem; - } - - .sound-type-btn { - padding: 0.75rem 0.5rem; - font-size: 14px; - } - - .genre-row { - gap: 0.5rem; - } - - .genre-btn { - padding: 0.75rem 0.5rem; - font-size: 14px; - } -} - -@media (min-width: 640px) and (max-width: 767px) { - .sound-studio-columns { - gap: 2rem; - } -} - -@media (min-width: 768px) and (max-width: 1023px) { - .sound-studio-columns { - gap: 2rem; - } -} - -@media (min-width: 1024px) { - .sound-studio-columns { - flex-direction: row; - gap: 3rem; - } - - .sound-column { - flex: 1; - width: auto; - min-height: 0; - font-size: 14px; - } - - .lyrics-column { - flex: 1; - width: auto; - min-height: 0; - } - - .column-title { - font-size: 1.25rem; - } - - .lyrics-display { - min-height: 250px; - } -} - -/* ==================================== - Asset Management (Brand Asset) Styles - ==================================== */ - -/* Asset Page Layout */ -.asset-page { - height: 100%; - background-color: #002224; - position: relative; -} - -/* Fixed Header - 뒤로가기 */ -.asset-sticky-header { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 64px; - display: flex; - align-items: center; - padding: 0 1rem; - z-index: 30; - pointer-events: none; -} - -.asset-sticky-header > * { - pointer-events: all; -} - -@media (min-width: 768px) { - .asset-sticky-header { - left: 240px; - padding: 0 2rem; - } -} - -/* 뒤로가기 버튼 */ -.asset-back-btn { - display: flex; - align-items: center; - gap: 4px; - background-color: #462E64; - color: #CFABFB; - font-size: 0.875rem; - font-weight: 600; - padding: 0 1.25rem 0 0.5rem; - height: 36px; - border: 1px solid #694596; - border-radius: 999px; - cursor: pointer; - white-space: nowrap; - transition: background-color 0.2s; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.asset-back-btn:hover { - background-color: #5a3a80; -} - -/* Single Scroll Area */ -.asset-scroll-area { - height: 100%; - overflow-y: auto; - overflow-x: hidden; - padding: 80px 2rem 120px; -} - -.asset-scroll-area::-webkit-scrollbar { - width: 6px; -} - -.asset-scroll-area::-webkit-scrollbar-track { - background: transparent; -} - -.asset-scroll-area::-webkit-scrollbar-thumb { - background: #379599; - border-radius: 3px; -} - -.asset-scroll-area::-webkit-scrollbar-thumb:hover { - background: #4AABAF; -} - -/* Fixed Footer - 다음 단계 */ -.asset-sticky-footer { - position: fixed; - bottom: 32px; - left: 0; - right: 0; - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - z-index: 30; - pointer-events: none; -} - -.asset-sticky-footer > * { - pointer-events: all; -} - -@media (min-width: 768px) { - body:has(.sidebar.expanded) .asset-sticky-footer { - left: 15rem; - right: 0; - width: auto; - display: flex; - justify-content: center; - } - - body:has(.sidebar.collapsed) .asset-sticky-footer { - left: 5rem; - right: 0; - width: auto; - display: flex; - justify-content: center; - } -} - -/* Asset Title */ -.asset-title { - font-size: 2rem; - font-weight: 700; - color: #E5F1F2; - padding: 0 0 1.5rem; - text-align: center; - line-height: 1.19; - letter-spacing: -0.006em; - margin: 0; -} - -/* Asset Container */ -.asset-container { - margin: 0 auto; - max-width: 1136px; - width: 100%; - display: flex; - flex-direction: column; - gap: 1rem; -} - -@media (min-width: 1024px) { - .asset-container { - flex-direction: row; - } -} - -/* Asset Columns */ -.asset-column { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.asset-column-left { - width: 100%; - min-width: 0; - flex-shrink: 0; - background-color: #01393B; - border-radius: 24px; - padding: 1.25rem 1rem; -} - -.asset-column-right { - width: 100%; - flex-shrink: 0; - gap: 1rem; - display: flex; - flex-direction: column; -} - -@media (min-width: 1024px) { - .asset-column-left { - flex: 1; - min-height: 0; - overflow: hidden; - border-radius: 40px; - padding: 2rem; - } - - .asset-column-right { - width: 280px; - } -} - -/* Asset Section Header */ -.asset-section-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.5rem; - flex-shrink: 0; -} - -.asset-section-header-left { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.asset-section-subtitle { - font-size: 0.875rem; - font-weight: 400; - color: #6AB0B3; - line-height: 1.19; - letter-spacing: -0.006em; -} - -/* Asset Section Title */ -.asset-section-title { - font-size: 1.5rem; - font-weight: 600; - color: #94FBE0; - line-height: 1.19; - letter-spacing: -0.009em; - margin: 0; -} - -/* Mobile Upload Button (visible only on mobile/tablet) */ -.asset-mobile-upload-btn { - display: flex; - align-items: center; - gap: 4px; - background-color: #94FBE0; - color: #000; - font-size: 0.75rem; - font-weight: 600; - padding: 0 10px; - height: 24px; - border: none; - border-radius: 999px; - cursor: pointer; - white-space: nowrap; - flex-shrink: 0; -} - -@media (min-width: 1024px) { - .asset-mobile-upload-btn { - display: none; - } -} - -/* Asset Image List */ -.asset-image-list { - background-color: #002224; - border-radius: 8px; - padding: 0.5rem; - max-height: 1080px; - overflow-y: auto; -} - -.asset-image-list::-webkit-scrollbar { - width: 6px; -} - -.asset-image-list::-webkit-scrollbar-track { - background: transparent; -} - -.asset-image-list::-webkit-scrollbar-thumb { - background: #067C80; - border-radius: 3px; -} - -.asset-image-list::-webkit-scrollbar-thumb:hover { - background: #088a8e; -} - -/* Load More Button */ -.asset-load-more { - width: 100%; - padding: 0.625rem 1rem; - background-color: #002224; - color: #9BCACC; - font-size: 0.875rem; - font-weight: 600; - border: 1px solid #379599; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.2s, border-color 0.2s; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.asset-load-more:hover { - background-color: #003A3C; - border-color: #4AABAF; -} - -/* Asset Image Grid */ -.asset-image-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; -} - -.asset-image-item { - position: relative; - aspect-ratio: 1; - border-radius: 8px; - overflow: hidden; - background-color: #000; -} - -.asset-image-item img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.asset-image-badge { - position: absolute; - top: 8px; - left: 8px; - background-color: #EFE3FE; - color: #AE72F9; - font-size: 0.75rem; - font-weight: 600; - padding: 4px 8px; - border-radius: 4px; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.asset-image-remove { - position: absolute; - top: 8px; - right: 8px; - width: 30px; - height: 30px; - background-color: rgba(0, 0, 0, 0.6); - border: none; - border-radius: 999px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - color: #FFFFFF; - transition: background-color 0.2s; -} - -.asset-image-remove:hover { - background-color: rgba(0, 0, 0, 0.8); -} - -/* Asset Upload Section */ -.asset-upload-section { - display: none; - flex-direction: column; - gap: 1rem; - flex: 1; - background-color: #01393B; - border-radius: 40px; - padding: 2rem; -} - -@media (min-width: 1024px) { - .asset-upload-section { - display: flex; - } -} - -.asset-upload-zone { - flex: 1; - border: 1px dashed #379599; - border-radius: 8px; - background-color: #002224; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: border-color 0.2s, background-color 0.2s; - min-height: 150px; -} - -.asset-upload-zone:hover { - border-color: #4AABAF; - background-color: #003A3C; -} - -.asset-upload-text { - font-size: 0.875rem; - font-weight: 600; - color: #9BCACC; - text-align: center; - line-height: 1.19; - letter-spacing: -0.006em; - margin: 0; -} - -/* Asset Ratio Section */ -.asset-ratio-section { - display: flex; - flex-direction: column; - gap: 1rem; - background-color: #01393B; - border-radius: 24px; - padding: 1.25rem 1rem; -} - -@media (min-width: 1024px) { - .asset-ratio-section { - border-radius: 40px; - padding: 2rem; - } -} - -.asset-ratio-buttons { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.asset-ratio-button { - display: flex; - align-items: center; - gap: 1rem; - padding: 0 1rem; - height: 48px; - background-color: #002224; - border: 1px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: border-color 0.2s, background-color 0.2s; - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 600; - line-height: 1.19; - letter-spacing: -0.006em; - width: 100%; -} - -.asset-ratio-button:hover { - background-color: #003A3C; -} - -.asset-ratio-button.active { - border-color: #94FBE0; - background-color: #002224; -} - -.asset-ratio-label { - font-weight: 600; - color: #E5F1F2; -} - -.asset-ratio-subtitle { - font-size: 0.875rem; - font-weight: 400; - color: #9BCACC; -} - -.asset-ratio-icon { - width: 32px; - height: 32px; - background-color: #002224; - border-radius: 2px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.asset-ratio-icon-vertical .asset-ratio-box { - width: 18px; - height: 32px; - background-color: #046266; - border-radius: 4px; -} - -.asset-ratio-icon-horizontal .asset-ratio-box { - width: 32px; - height: 18px; - background-color: #046266; - border-radius: 4px; -} - -/* Asset Next Button */ - -.asset-next-button { - background-color: #AE72F9; - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 600; - padding: 10px 40px; - border: none; - border-radius: 999px; - cursor: pointer; - transition: background-color 0.2s; - line-height: 1.19; - letter-spacing: -0.006em; -} - -.asset-next-button:hover:not(:disabled) { - background-color: #9D5FE8; -} - -.asset-next-button:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Responsive Styles */ -@media (max-width: 639px) { - .asset-title { - font-size: 1.5rem; - padding-bottom: 1rem; - } - - .asset-scroll-area { - padding: 80px 1rem 120px; - } - - .asset-image-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 640px) and (max-width: 767px) { - .asset-title { - font-size: 1.75rem; - padding-bottom: 1.25rem; - } - - .asset-scroll-area { - padding: 80px 1.5rem 120px; - } -} - -/* Height-based responsive adjustments */ -@media (max-height: 700px) { - .asset-title { - font-size: 1.75rem; - padding-bottom: 0.75rem; - } - - .asset-upload-zone { - min-height: 100px; - } -} - -@media (max-height: 600px) { - .asset-upload-zone { - min-height: 80px; - } -} - -/* ===================================================== - ADO2 Contents Page Styles - ===================================================== */ - -.ado2-contents-page { - padding: 32px; - min-height: 100%; - background-color: var(--color-bg-darker); -} - -.ado2-contents-header { - display: flex; - align-items: baseline; - gap: 16px; - margin-bottom: 16px; -} - -.ado2-sort-pills { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-bottom: 20px; -} - -.ado2-sort-pill { - padding: 6px 14px; - border-radius: 20px; - border: 1px solid rgba(155, 202, 204, 0.3); - background: transparent; - color: #9BCACC; - font-size: 13px; - cursor: pointer; - transition: background 0.15s, color 0.15s, border-color 0.15s; - white-space: nowrap; -} - -.ado2-sort-pill:hover { - background: rgba(155, 202, 204, 0.1); - color: #fff; -} - -.ado2-sort-pill.active { - background: #1A8F93; - border-color: #1A8F93; - color: #fff; - font-weight: 600; -} - -.ado2-contents-title { - font-size: 32px; - font-weight: 700; - color: var(--color-text-white); - letter-spacing: -0.6%; -} - -.ado2-contents-count { - font-size: 17px; - font-weight: 500; - color: #9BCACC; -} - -.ado2-contents-filters { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 24px; - flex-wrap: wrap; -} - -.ado2-filter-select { - height: 38px; - padding: 0 12px; - border-radius: 8px; - border: 1px solid rgba(255,255,255,0.15); - background: rgba(255,255,255,0.07); - color: var(--color-text-white); - font-size: 14px; - cursor: pointer; - outline: none; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 10px center; - padding-right: 30px; - min-width: 110px; -} - -.ado2-filter-select:focus { - border-color: rgba(155,202,204,0.5); -} - -.ado2-filter-select option { - background: #1e2a2b; - color: var(--color-text-white); -} - -.ado2-filter-search { - display: flex; - gap: 8px; - flex: 1; - max-width: 360px; -} - -.ado2-filter-input { - flex: 1; - height: 38px; - padding: 0 12px; - border-radius: 8px; - border: 1px solid rgba(255,255,255,0.15); - background: rgba(255,255,255,0.07); - color: var(--color-text-white); - font-size: 14px; - outline: none; -} - -.ado2-filter-input::placeholder { - color: rgba(255,255,255,0.35); -} - -.ado2-filter-input:focus { - border-color: rgba(155,202,204,0.5); -} - -.ado2-filter-btn { - height: 38px; - padding: 0 16px; - border-radius: 8px; - border: none; - background: #9BCACC; - color: #1a2a2b; - font-size: 14px; - font-weight: 600; - cursor: pointer; - white-space: nowrap; -} - -.ado2-filter-btn:hover { - background: #7db8bb; -} - -.ado2-order-btn { - height: 38px; - width: 38px; - border-radius: 8px; - border: 1px solid rgba(255,255,255,0.15); - background: rgba(255,255,255,0.07); - color: var(--color-text-white); - font-size: 18px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.ado2-order-btn:hover { - background: rgba(155,202,204,0.2); - border-color: rgba(155,202,204,0.5); -} - -.ado2-region-pill { - display: inline-flex; - align-items: center; - gap: 6px; - height: 38px; - padding: 0 16px; - border-radius: 999px; - border: 1.5px solid rgba(255,255,255,0.25); - background: transparent; - color: rgba(255,255,255,0.5); - font-size: 14px; - cursor: pointer; - white-space: nowrap; - transition: border-color 0.15s, color 0.15s, background 0.15s; -} - -.ado2-region-pill:hover { - border-color: rgba(155,202,204,0.6); - color: var(--color-text-white); -} - -.ado2-region-pill.active { - border-color: #9BCACC; - color: #9BCACC; - background: rgba(155,202,204,0.08); -} - -.ado2-region-clear { - font-size: 12px; - color: rgba(155,202,204,0.7); - padding: 1px 3px; - border-radius: 4px; - line-height: 1; -} - -.ado2-region-clear:hover { - color: #9BCACC; - background: rgba(155,202,204,0.15); -} - -.city-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.6); - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; -} - -.city-modal { - background: #1a2a2b; - border: 1px solid rgba(255,255,255,0.12); - border-radius: 16px; - width: 375px; - max-width: 92vw; - display: flex; - flex-direction: column; -} - -.city-modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px 20px 14px; - border-bottom: 1px solid rgba(255,255,255,0.08); - flex-shrink: 0; -} - -.city-modal-title { - font-size: 16px; - font-weight: 600; - color: var(--color-text-white); - display: flex; - align-items: center; - gap: 8px; -} - -.city-modal-back { - background: none; - border: none; - color: rgba(255,255,255,0.6); - font-size: 18px; - cursor: pointer; - padding: 0 4px; - line-height: 1; -} - -.city-modal-back:hover { - color: var(--color-text-white); -} - -.city-modal-close { - background: none; - border: none; - color: rgba(255,255,255,0.5); - font-size: 16px; - cursor: pointer; - padding: 4px 6px; - border-radius: 6px; -} - -.city-modal-close:hover { - color: var(--color-text-white); - background: rgba(255,255,255,0.08); -} - -.city-modal-grid { - display: flex; - flex-direction: column; - padding: 8px 0; -} - -.city-modal-region-item { - display: flex; - align-items: center; - gap: 8px; - width: 100%; - padding: 14px 20px; - background: none; - border: none; - border-bottom: 1px solid rgba(255,255,255,0.05); - color: var(--color-text-white); - font-size: 15px; - cursor: pointer; - text-align: left; -} - -.city-modal-region-item:hover { - background: rgba(255,255,255,0.05); -} - -.city-modal-region-item.has-selected { - color: #9BCACC; -} - -.city-modal-region-badge { - font-size: 12px; - background: rgba(155,202,204,0.2); - color: #9BCACC; - border-radius: 10px; - padding: 2px 8px; -} - -.city-modal-arrow { - margin-left: auto; - color: rgba(255,255,255,0.3); - font-size: 18px; -} - -.city-modal-item-wrap { - display: flex; - flex-wrap: wrap; - gap: 8px; - padding: 12px 16px 20px; -} - -.city-modal-item { - padding: 7px 16px; - border-radius: 20px; - border: 1px solid rgba(255,255,255,0.15); - background: rgba(255,255,255,0.05); - color: var(--color-text-white); - font-size: 13px; - cursor: pointer; - white-space: nowrap; -} - -.city-modal-item:hover { - background: rgba(155,202,204,0.15); - border-color: rgba(155,202,204,0.4); -} - -.city-modal-item.active { - background: #9BCACC; - border-color: #9BCACC; - color: #1a2a2b; - font-weight: 600; -} - -.city-modal-item-all { - border-style: dashed; - border-color: rgba(255,255,255,0.3); -} - -.city-modal-item-all.active { - border-style: solid; -} - -.ado2-contents-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 16px; -} - -.ado2-content-card { - display: flex; - flex-direction: column; - border-radius: 20px; - overflow: hidden; - background-color: #034A4D; -} - -.content-card-thumbnail { - width: 100%; - aspect-ratio: 9 / 16; - background-color: #01393B; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.content-video-preview { - width: 100%; - height: 100%; - object-fit: cover; -} - -.content-no-video { - color: #6AB0B3; - display: flex; - align-items: center; - justify-content: center; -} - -/* ADO2 갤러리 호버 오버레이 */ -.ado2-gallery-thumbnail-wrap { - position: relative; -} - -.ado2-gallery-overlay { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0); - display: flex; - align-items: center; - justify-content: center; - transition: background 0.2s ease; - pointer-events: none; -} - -.ado2-gallery-thumbnail-wrap:hover .ado2-gallery-overlay { - background: rgba(0, 0, 0, 0.45); -} - -.ado2-gallery-play-btn { - width: 56px; - height: 56px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.9); - color: #01282A; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transform: scale(0.8); - transition: opacity 0.2s ease, transform 0.2s ease; - padding-left: 4px; -} - -.ado2-gallery-thumbnail-wrap:hover .ado2-gallery-play-btn { - opacity: 1; - transform: scale(1); -} - -.content-card-info { - padding: 16px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.content-card-text { - display: flex; - flex-direction: column; - gap: 2px; -} - -.content-card-title { - font-size: 18px; - font-weight: 700; - color: var(--color-text-white); - letter-spacing: -0.6%; - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.content-card-like { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - font-size: 15px; - font-weight: 500; - color: #9BCACC; - white-space: nowrap; - flex-shrink: 0; - margin-left: 8px; -} - -.content-card-date { - font-size: 14px; - font-weight: 400; - color: #6AB0B3; - letter-spacing: -0.6%; - margin: 0; -} - -.content-card-actions { - display: flex; - gap: 6px; -} - -.content-download-btn { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - padding: 10px 10px 10px 8px; - height: 34px; - background-color: #462E64; - border: none; - border-radius: 8px; - color: #F7F1FE; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s; -} - -.content-download-btn:hover:not(:disabled) { - background-color: #563d7a; -} - -.content-download-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.content-download-btn svg { - stroke: #F7F1FE; -} - -.content-delete-btn { - width: 34px; - height: 34px; - display: flex; - align-items: center; - justify-content: center; - padding: 8px; - background-color: #01393B; - border: none; - border-radius: 8px; - color: #6AB0B3; - cursor: pointer; - transition: background-color 0.2s; -} - -.content-delete-btn:hover { - background-color: #024648; -} - -.content-delete-btn svg { - stroke: #6AB0B3; -} - -/* Loading, Error, Empty States */ -.ado2-contents-loading, -.ado2-contents-error, -.ado2-contents-empty { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 400px; - gap: 16px; - color: #9BCACC; -} - -.ado2-contents-loading .loading-spinner { - width: 40px; - height: 40px; - border: 3px solid #01393B; - border-top-color: #6AB0B3; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.retry-btn { - padding: 10px 20px; - background-color: #034A4D; - border: 1px solid #6AB0B3; - border-radius: 8px; - color: #6AB0B3; - font-size: 14px; - cursor: pointer; - transition: background-color 0.2s; -} - -.retry-btn:hover { - background-color: #024648; -} - -/* Pagination */ -.ado2-contents-pagination { - display: flex; - align-items: center; - justify-content: center; - gap: 16px; - margin-top: 32px; - padding-bottom: 32px; -} - -.pagination-btn { - padding: 10px 20px; - background-color: #034A4D; - border: 1px solid #6AB0B3; - border-radius: 8px; - color: #6AB0B3; - font-size: 14px; - cursor: pointer; - transition: background-color 0.2s; -} - -.pagination-btn:hover:not(:disabled) { - background-color: #024648; -} - -.pagination-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ── VideoDetailPage / VideoDetailModal ─────────────────────────── */ - -/* 모달 내부 콘텐츠 (풀페이지의 video-detail-page와 동일 스타일, 배경 제외) */ -.video-detail-modal-content { - color: #fff; - padding: 24px 32px; -} - -.video-detail-page-content { - color: #fff; - padding: 0; - flex: 1; - display: flex; - flex-direction: column; -} - -/* 모달 닫기 버튼 */ -.video-detail-close-btn { - display: flex; - align-items: center; - justify-content: center; - background: none; - border: none; - color: #9BCACC; - cursor: pointer; - padding: 4px; - margin-left: auto; - transition: color 0.2s; -} - -.video-detail-close-btn:hover { - color: #fff; -} - -.video-detail-page { - min-height: 100vh; - background: #01282A; - color: #fff; - padding: 24px 32px; - max-width: 900px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.video-detail-header { - margin-bottom: 24px; -} - -.video-detail-back-btn { - display: flex; - align-items: center; - gap: 6px; - background: none; - border: none; - color: #9BCACC; - font-size: 14px; - cursor: pointer; - padding: 4px 0; - transition: color 0.2s; -} - -.video-detail-back-btn:hover { - color: #fff; -} - -.video-detail-content { - display: flex; - gap: 32px; - flex-wrap: wrap; - align-items: center; - flex: 1; - margin: auto 0; -} - -/* 가로 영상: 영상 위, 정보 아래 */ -.video-detail-content.landscape { - flex-direction: column; -} - -.video-detail-player { - display: block; - width: 100%; - height: auto; - max-width: 450px; - border-radius: 12px; - flex-shrink: 0; -} - -.video-detail-content.landscape .video-detail-player { - max-width: 100%; - width: 100%; -} - -.video-detail-info { - flex: 1 1 220px; - display: flex; - flex-direction: column; - gap: 12px; - padding-top: 8px; - align-self: flex-start; -} - -.video-detail-content.landscape .video-detail-info { - flex: 1 1 auto; - width: 100%; - align-self: stretch; - padding-top: 0; -} - -.video-detail-store { - font-size: 22px; - font-weight: 600; - margin: 0; - line-height: 1.3; -} - -.video-detail-date { - font-size: 14px; - color: #9BCACC; - margin: 0; -} - -.video-detail-copy-btn { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 10px 16px; - background: #034A4D; - border: 1px solid #6AB0B3; - border-radius: 8px; - color: #9BCACC; - font-size: 14px; - cursor: pointer; - transition: background 0.2s, color 0.2s; - width: fit-content; -} - -.video-detail-copy-btn:hover { - background: #024648; - color: #fff; -} - -.video-detail-copy-btn.copied { - background: #1A8F93; - border-color: #1A8F93; - color: #fff; -} - -.video-detail-share-menu { - position: absolute; - top: calc(100% + 6px); - left: 0; - z-index: 100; - background: #012023; - border: 1px solid #2A6669; - border-radius: 10px; - padding: 6px; - min-width: 160px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); - display: flex; - flex-direction: column; - gap: 2px; -} - -.video-detail-share-item { - display: flex; - align-items: center; - gap: 10px; - padding: 9px 12px; - background: transparent; - border: none; - border-radius: 7px; - color: #C5E8EA; - font-size: 14px; - cursor: pointer; - transition: background 0.15s; - width: 100%; - text-align: left; -} - -.video-detail-share-item:hover { - background: #023E42; - color: #fff; -} - -/* 비로그인 플레이스홀더 */ -.video-detail-placeholder { - flex: 1 1 320px; - max-width: 480px; - aspect-ratio: 9/16; - max-height: 80vh; - background: #034A4D; - border-radius: 12px; - filter: blur(4px); - opacity: 0.4; -} - -.video-detail-placeholder-text { - height: 24px; - background: #034A4D; - border-radius: 6px; - opacity: 0.4; - filter: blur(4px); -} - -.video-detail-placeholder-text.short { - width: 60%; - height: 16px; -} - -/* ── 댓글 섹션 ─────────────────────────────── */ - -.video-detail-comments { - border-top: 1px solid rgba(155, 202, 204, 0.2); - padding-top: 20px; - margin-top: 8px; -} - -.video-detail-comments-header { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 16px; -} - -.video-detail-comments-count { - font-size: 14px; - color: #9BCACC; - font-weight: 500; -} - -/* 댓글 작성자 프로필 */ -.video-detail-comment-profile { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 10px; -} - -.video-detail-comment-profile-avatar-wrap { - position: relative; - flex-shrink: 0; -} - -.video-detail-avatar-change-btn { - position: absolute; - bottom: -4px; - right: -4px; - width: 18px; - height: 18px; - border-radius: 50%; - background: #1A8F93; - border: none; - color: #fff; - font-size: 11px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - line-height: 1; -} - -.video-detail-nickname-input { - flex: 0 0 auto; - width: 200px; - background: #034A4D; - border: 1px solid rgba(155, 202, 204, 0.25); - border-radius: 8px; - padding: 8px 12px; - color: #fff; - font-size: 13px; - outline: none; -} - -.video-detail-nickname-input::placeholder { - color: #6B9EA0; -} - -.video-detail-nickname-input:focus { - border-color: #9BCACC; -} - -/* 댓글 닉네임 */ -.video-detail-comment-nickname { - font-size: 13px; - font-weight: 600; - color: #9BCACC; - display: block; - margin-bottom: 2px; -} - -/* 날짜 + 삭제 버튼 한 줄 */ -.video-detail-comment-bottom { - display: flex; - align-items: center; - gap: 10px; - margin-top: 4px; -} - -.video-detail-comments-title { - font-size: 17px; - font-weight: 600; - margin: 0; -} - -.video-detail-comment-input-wrap { - display: flex; - gap: 8px; - margin-bottom: 24px; -} - -.video-detail-comment-input { - flex: 1; - background: #034A4D; - border: 1px solid rgba(155, 202, 204, 0.25); - border-radius: 8px; - padding: 12px 16px; - color: #fff; - font-size: 14px; - outline: none; - transition: border-color 0.2s; - resize: none; - overflow: hidden; - line-height: 1.5; - min-height: 44px; - font-family: inherit; -} - -.video-detail-comment-input::placeholder { - color: #6B9EA0; -} - -.video-detail-comment-input:focus { - border-color: #9BCACC; -} - -.video-detail-comment-input:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.video-detail-comment-submit { - padding: 12px 20px; - background: #1A8F93; - border: none; - border-radius: 8px; - color: #fff; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: background 0.2s; - white-space: nowrap; -} - -.video-detail-comment-submit:hover:not(:disabled) { - background: #158489; -} - -.video-detail-comment-submit:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.video-detail-comments-empty { - color: #6B9EA0; - font-size: 14px; - margin: 0; -} - -.video-detail-comment-list { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - gap: 20px; -} - -.video-detail-comment-item { - display: flex; - gap: 12px; -} - -.video-detail-comment-avatar { - width: 36px; - height: 36px; - border-radius: 50%; - object-fit: cover; - flex-shrink: 0; - background: #034A4D; -} - -.video-detail-comment-avatar.small { - width: 28px; - height: 28px; -} - -.video-detail-comment-body { - flex: 1; -} - -.video-detail-comment-meta { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 4px; -} - -.video-detail-comment-name { - font-size: 14px; - font-weight: 600; -} - -.video-detail-comment-date { - font-size: 12px; - color: #6B9EA0; -} - -.video-detail-comment-text { - font-size: 14px; - color: #C8E6E8; - margin: 0; - line-height: 1.5; - word-break: break-all; - overflow-wrap: break-word; -} - -.video-detail-comment-delete { - background: none; - border: none; - color: #6B9EA0; - font-size: 12px; - cursor: pointer; - padding: 0; - transition: color 0.2s; -} - -.video-detail-comment-delete:hover { - color: #ff6b6b; -} - -.video-detail-reply-list { - list-style: none; - padding: 0; - margin: 8px 0 0 0; - display: flex; - flex-direction: column; - gap: 12px; -} - -.video-detail-reply-item { - display: flex; - gap: 10px; - padding-left: 4px; - border-left: 2px solid rgba(155, 202, 204, 0.2); -} - -.video-detail-comments-more { - width: 100%; - margin-top: 16px; - padding: 10px; - background: transparent; - border: 1px solid rgba(155, 202, 204, 0.25); - border-radius: 8px; - color: #9BCACC; - font-size: 14px; - cursor: pointer; - transition: background 0.2s; -} - -.video-detail-comments-more:hover:not(:disabled) { - background: rgba(155, 202, 204, 0.08); -} - -.video-detail-comments-more:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* 좋아요 버튼 */ -.video-detail-like-btn { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 10px 16px; - background: #034A4D; - border: 1px solid rgba(155, 202, 204, 0.3); - border-radius: 8px; - color: #9BCACC; - font-size: 14px; - cursor: pointer; - transition: background 0.2s, color 0.2s, border-color 0.2s; -} - -.video-detail-like-btn:hover:not(:disabled) { - background: #024648; - color: #fff; -} - -.video-detail-like-btn.liked { - background: rgba(255, 100, 100, 0.15); - border-color: rgba(255, 100, 100, 0.4); - color: #ff6b6b; -} - -.video-detail-like-btn:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -@media (max-width: 600px) { - .video-detail-page { - padding: 16px; - } - .video-detail-content { - flex-direction: column; - } - .video-detail-player { - max-width: 100%; - width: 100%; - } - .video-detail-info { - flex: 0 0 auto; - width: 100%; - align-self: auto; - padding-top: 0; - } -} - -.pagination-info { - color: #9BCACC; - font-size: 14px; -} - -/* Responsive */ -@media (max-width: 768px) { - .ado2-contents-page { - padding: 16px; - } - - .ado2-contents-header { - flex-direction: column; - gap: 8px; - } - - .ado2-contents-title { - font-size: 24px; - } - - .ado2-contents-grid { - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 12px; - } -} - -/* ===================================================== - Delete Confirmation Modal - ===================================================== */ -.delete-modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.6); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; -} - -.delete-modal { - background: linear-gradient(180deg, #1A3A3E 0%, #0D2426 100%); - border: 1px solid rgba(148, 251, 224, 0.2); - border-radius: 16px; - padding: 32px 40px; - min-width: 360px; - max-width: 90vw; - text-align: center; -} - -.delete-modal-title { - font-size: 18px; - font-weight: 600; - color: #FFFFFF; - margin: 0 0 12px 0; -} - -.delete-modal-description { - font-size: 14px; - color: rgba(255, 255, 255, 0.6); - margin: 0 0 28px 0; -} - -.delete-modal-actions { - display: flex; - gap: 12px; - justify-content: center; -} - -.delete-modal-btn { - padding: 12px 32px; - border-radius: 8px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.delete-modal-btn.cancel { - background-color: rgba(255, 255, 255, 0.1); - color: #FFFFFF; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.delete-modal-btn.cancel:hover { - background-color: rgba(255, 255, 255, 0.15); -} - -.delete-modal-btn.confirm { - background-color: #EF4444; - color: #FFFFFF; -} - -.delete-modal-btn.confirm:hover { - background-color: #DC2626; -} - -.delete-modal-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ============================================ - Social Connect Pages - ============================================ */ - -.social-connect-page { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background-color: #002224; - padding: 1rem; -} - -.social-connect-card { - background-color: #0a1a1c; - border-radius: 16px; - padding: 3rem; - max-width: 400px; - width: 100%; - text-align: center; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.social-connect-card.success { - border-color: rgba(148, 251, 224, 0.3); -} - -.social-connect-card.error { - border-color: rgba(248, 113, 113, 0.3); -} - -.social-connect-icon { - width: 80px; - height: 80px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 1.5rem; -} - -.social-connect-icon.success { - background-color: rgba(148, 251, 224, 0.15); - color: #94FBE0; -} - -.social-connect-icon.error { - background-color: rgba(248, 113, 113, 0.15); - color: #f87171; -} - -.social-connect-profile-image { - width: 80px; - height: 80px; - border-radius: 50%; - object-fit: cover; - margin: 0 auto 1.5rem; - border: 3px solid #94FBE0; -} - -.social-connect-account-info { - margin-bottom: 1.5rem; -} - -.social-connect-channel-badge { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.375rem 0.875rem; - background-color: rgba(148, 251, 224, 0.15); - color: #94FBE0; - border-radius: 9999px; - font-size: 0.875rem; - font-weight: 500; -} - -.social-connect-title { - font-size: 1.5rem; - font-weight: 600; - color: #FFFFFF; - margin-bottom: 0.75rem; -} - -.social-connect-message { - font-size: 1rem; - color: rgba(255, 255, 255, 0.7); - margin-bottom: 0.5rem; -} - -.social-connect-detail { - font-size: 0.875rem; - color: rgba(255, 255, 255, 0.5); - margin-bottom: 1.5rem; -} - -.social-connect-countdown { - font-size: 0.875rem; - color: #94FBE0; - margin-bottom: 1rem; -} - -.social-connect-actions { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.social-connect-button { - width: 100%; - padding: 0.875rem 1.5rem; - border-radius: 9999px; - font-size: 0.875rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - border: none; - background-color: #94FBE0; - color: #002224; -} - -.social-connect-button:hover { - background-color: #7fe6cb; -} - -.social-connect-button.secondary { - background-color: transparent; - color: #FFFFFF; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.social-connect-button.secondary:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -.social-connect-spinner { - width: 64px; - height: 64px; - margin: 0 auto 1.5rem; -} - -.social-spinner-svg { - width: 100%; - height: 100%; - animation: social-spinner-rotate 1.5s linear infinite; -} - -.social-spinner-svg circle { - stroke: #2dd4bf; - stroke-linecap: round; - stroke-dasharray: 90, 150; - stroke-dashoffset: 0; - animation: social-spinner-dash 1.5s ease-in-out infinite; -} - -@keyframes social-spinner-rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes social-spinner-dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} - -/* ============================================ - My Info Page (내 정보) - ============================================ */ - -.myinfo-page { - flex: 1; - padding: 2rem; - max-width: 900px; - background-color: #002224; -} - -.myinfo-title { - font-size: 1.75rem; - font-weight: 700; - color: #FFFFFF; - margin-bottom: 1.5rem; -} - -/* 탭 네비게이션 */ -.myinfo-tabs { - display: flex; - gap: 0.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - margin-bottom: 2rem; -} - -.myinfo-tab { - padding: 0.75rem 1rem; - background: none; - border: none; - color: rgba(255, 255, 255, 0.5); - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - position: relative; - transition: color 0.2s ease; -} - -.myinfo-tab:hover { - color: rgba(255, 255, 255, 0.8); -} - -.myinfo-tab.active { - color: #FFFFFF; -} - -.myinfo-tab.active::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, #a6ffea, #a682ff); -} - -/* 탭 컨텐츠 */ -.myinfo-content { - display: flex; - flex-direction: column; - gap: 2rem; -} - -.myinfo-section { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.myinfo-section-title { - font-size: 0.875rem; - font-weight: 500; - color: rgba(255, 255, 255, 0.6); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.myinfo-placeholder { - color: rgba(255, 255, 255, 0.5); - font-size: 0.9rem; - padding: 2rem; - text-align: center; - background: rgba(255, 255, 255, 0.03); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.06); -} - -.myinfo-credits-card { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.myinfo-credits-row { - display: flex; - align-items: center; - justify-content: space-between; -} - -.myinfo-credits-label { - color: rgba(255, 255, 255, 0.6); - font-size: 0.95rem; -} - - -.myinfo-credits-value { - color: #a6ffea; - font-size: 1.4rem; - font-weight: 700; - letter-spacing: 0.02em; -} - -.myinfo-credits-desc { - color: rgba(255, 255, 255, 0.4); - font-size: 0.85rem; - margin: 0; - flex: 1; -} - -.myinfo-credits-charge-btn { - padding: 0.75rem 1.25rem; - background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); - border: none; - border-radius: 8px; - color: #002224; - font-size: 0.875rem; - font-weight: 600; - cursor: pointer; - white-space: nowrap; - transition: all 0.2s ease; -} - -.myinfo-credits-charge-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(166, 255, 234, 0.3); -} - -.myinfo-popup-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.6); - display: flex; - align-items: center; - justify-content: center; - z-index: 9999; -} - -.myinfo-popup { - background: #132034; - border: 1px solid rgba(78, 205, 196, 0.3); - border-radius: 16px; - padding: 2rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 1.25rem; - width: 380px; - max-width: 90vw; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); -} - -.myinfo-popup-title { - color: #fff; - font-size: 1.05rem; - font-weight: 700; - margin: 0 0 0.5rem; - align-self: flex-start; -} - -.myinfo-popup-message { - color: #fff; - font-size: 1.1rem; - font-weight: 600; - text-align: center; - margin: 0; -} - -.myinfo-popup-field { - display: flex; - flex-direction: column; - gap: 0.4rem; - width: 100%; -} - -.myinfo-popup-label { - color: rgba(255, 255, 255, 0.6); - font-size: 0.85rem; -} - -.myinfo-popup-counter { - display: flex; - align-items: center; - gap: 0; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 8px; - overflow: hidden; -} - -.myinfo-popup-counter-btn { - background: rgba(255, 255, 255, 0.08); - border: none; - color: #fff; - font-size: 1.25rem; - width: 48px; - min-width: 48px; - height: 44px; - cursor: pointer; - transition: background 0.15s; - flex-shrink: 0; -} - -.myinfo-popup-counter-btn:hover { - background: rgba(255, 255, 255, 0.15); -} - -.myinfo-popup-input { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 8px; - color: #fff; - font-size: 0.95rem; - padding: 0.6rem 0.875rem; - outline: none; - width: 100%; - box-sizing: border-box; -} - -.myinfo-popup-input--center { - border: none; - border-left: 1px solid rgba(255, 255, 255, 0.12); - border-right: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 0; - text-align: center; - flex: 1; - height: 44px; - padding: 0; -} - -.myinfo-popup-input--center::-webkit-inner-spin-button, -.myinfo-popup-input--center::-webkit-outer-spin-button { - -webkit-appearance: none; -} - -.myinfo-popup-input:focus { - border-color: rgba(78, 205, 196, 0.5); -} - -.myinfo-popup-textarea { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 8px; - color: #fff; - font-size: 0.9rem; - padding: 0.6rem 0.875rem; - outline: none; - resize: none; - width: 100%; - box-sizing: border-box; - font-family: inherit; -} - -.myinfo-popup-textarea:focus { - border-color: rgba(78, 205, 196, 0.5); -} - -.myinfo-popup-actions { - display: flex; - gap: 0.75rem; - width: 100%; - justify-content: flex-end; - margin-top: 0.25rem; -} - -.myinfo-popup-cancel { - background: rgba(255, 255, 255, 0.08); - color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 8px; - padding: 0.6rem 1.25rem; - font-size: 0.9rem; - cursor: pointer; - transition: background 0.2s; -} - -.myinfo-popup-cancel:hover { - background: rgba(255, 255, 255, 0.13); -} - -.myinfo-popup-close { - background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); - color: #002224; - border: none; - border-radius: 8px; - padding: 0.6rem 1.5rem; - font-size: 0.9rem; - font-weight: 700; - cursor: pointer; - transition: opacity 0.2s; -} - -.myinfo-popup-close:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.myinfo-popup-close:not(:disabled):hover { - opacity: 0.85; -} - -/* 내 비즈니스 카드 */ -.myinfo-business-card { - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 12px; - padding: 1.5rem; -} - -.myinfo-business-empty-title { - font-size: 1.1rem; - font-weight: 600; - color: #FFFFFF; - margin-bottom: 0.5rem; -} - -.myinfo-business-empty-desc { - font-size: 0.85rem; - color: rgba(255, 255, 255, 0.5); - margin-bottom: 1.25rem; -} - -.myinfo-business-input-row { - display: flex; - gap: 0.75rem; - align-items: center; -} - -.myinfo-business-input { - flex: 1; - padding: 0.75rem 1rem; - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #FFFFFF; - font-size: 0.9rem; -} - -.myinfo-business-input::placeholder { - color: rgba(255, 255, 255, 0.3); -} - -.myinfo-business-input:focus { - outline: none; - border-color: #a6ffea; -} - -.myinfo-business-submit { - padding: 0.75rem 1.25rem; - background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); - border: none; - border-radius: 8px; - color: #002224; - font-size: 0.875rem; - font-weight: 600; - cursor: pointer; - white-space: nowrap; - transition: all 0.2s ease; -} - -.myinfo-business-submit:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(166, 255, 234, 0.3); -} - -/* 소셜 채널 버튼들 (가로 배치) */ -.myinfo-social-buttons { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; -} - -.myinfo-social-btn { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.625rem 1rem; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 8px; - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.myinfo-social-btn:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.25); -} - -.myinfo-social-btn.connected { - border-color: rgba(166, 255, 234, 0.4); - background: rgba(166, 255, 234, 0.08); -} - -.myinfo-social-btn:disabled, -.myinfo-social-btn.disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.myinfo-social-btn-icon { - width: 20px; - height: 20px; - border-radius: 4px; - object-fit: cover; -} - -/* 연결된 계정 목록 */ -.myinfo-connected-accounts { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-top: 1.25rem; -} - -.myinfo-connected-card { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 1.25rem; - background: rgba(166, 255, 234, 0.03); - border: 1px solid rgba(166, 255, 234, 0.15); - border-radius: 12px; -} - -.myinfo-connected-info { - display: flex; - align-items: center; - gap: 0.875rem; -} - -.myinfo-connected-avatar { - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; -} - -.myinfo-connected-icon { - width: 40px; - height: 40px; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.myinfo-connected-icon img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.myinfo-connected-text { - display: flex; - flex-direction: column; - gap: 0.125rem; -} - -.myinfo-connected-channel { - font-size: 0.9rem; - font-weight: 600; - color: #FFFFFF; -} - -.myinfo-connected-platform { - font-size: 0.7rem; - color: rgba(255, 255, 255, 0.5); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.myinfo-connected-actions { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.myinfo-connected-badge { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.75rem; - font-weight: 500; - color: #a6ffea; -} - -.myinfo-connected-disconnect { - padding: 0.375rem 0.75rem; - background: transparent; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: rgba(255, 255, 255, 0.6); - font-size: 0.75rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.myinfo-connected-disconnect:hover { - background: rgba(248, 113, 113, 0.1); - border-color: rgba(248, 113, 113, 0.3); - color: #f87171; -} - -.myinfo-loading { - font-size: 0.85rem; - color: rgba(255, 255, 255, 0.5); - text-align: center; - padding: 0.5rem; - margin-top: 1rem; -} - -/* 모바일 반응형 */ -@media (max-width: 768px) { - .myinfo-page { - padding: 1.25rem; - } - - .myinfo-title { - font-size: 1.5rem; - } - - .myinfo-tabs { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - } - - .myinfo-tabs::-webkit-scrollbar { - display: none; - } - - .myinfo-tab { - white-space: nowrap; - padding: 0.625rem 0.75rem; - font-size: 0.8rem; - } - - .myinfo-business-input-row { - flex-direction: column; - } - - .myinfo-business-submit { - width: 100%; - } -} - -/* ===================================================== - Content Upload Button (ADO2 콘텐츠 페이지) - ===================================================== */ - -.content-upload-btn { - width: 34px; - height: 34px; - display: flex; - align-items: center; - justify-content: center; - padding: 8px; - background-color: #01393B; - border: none; - border-radius: 8px; - color: #6AB0B3; - cursor: pointer; - transition: background-color 0.2s; -} - -.content-upload-btn:hover:not(:disabled) { - background-color: #024648; -} - -.content-upload-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.content-upload-btn svg { - stroke: #6AB0B3; -} - -/* ===================================================== - Social Posting Modal - ===================================================== */ - -.social-posting-overlay { - position: fixed; - inset: 0; - background-color: rgba(0, 0, 0, 0.7); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 1rem; -} - -.social-posting-modal { - width: 100%; - max-width: 900px; - max-height: 90vh; - background-color: #002224; - border-radius: 16px; - border: 1px solid rgba(166, 255, 234, 0.1); - display: flex; - flex-direction: column; - overflow: hidden; -} - -.social-posting-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.25rem 1.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.social-posting-title { - font-size: 24px; - font-weight: 600; - color: #FFFFFF; - margin: 0; -} - -.social-posting-close { - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - border-radius: 6px; - transition: all 0.2s; -} - -.social-posting-close:hover { - color: #FFFFFF; - background: rgba(255, 255, 255, 0.1); -} - -.social-posting-content { - display: flex; - flex: 1; - overflow: hidden; -} - -@media (max-width: 768px) { - .social-posting-content { - flex-direction: column; - } -} - -/* Video Preview Section */ -.social-posting-preview { - width: 45%; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - background-color: #001a1c; - border-right: 1px solid rgba(255, 255, 255, 0.08); - overflow: hidden; -} - -@media (max-width: 768px) { - .social-posting-preview { - width: 100%; - height: 80vh; - border-right: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - } -} - -.social-posting-video-container { - max-width: 100%; - max-height: 100%; - background-color: #000; - border-radius: 12px; - overflow: hidden; - display: inline-flex; -} - -.social-posting-video.horizontal { - display: block; - width: 100%; - height: auto; -} - -.social-posting-video.vertical { - display: block; - max-height: 100%; - width: auto; -} - -/* Form Section */ -.social-posting-form { - flex: 1; - padding: 1.5rem; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -/* .social-posting-video-info { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.social-posting-label-badge { - padding: 0.375rem 0.75rem; - background: rgba(166, 130, 255, 0.15); - border: 1px solid rgba(166, 130, 255, 0.3); - border-radius: 6px; - font-size: 0.75rem; - font-weight: 500; - color: #a682ff; -} - -.social-posting-add-btn { - width: 26px; - height: 26px; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - border: 1px dashed rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: rgba(255, 255, 255, 0.4); - font-size: 1rem; - cursor: pointer; -} */ - -.social-posting-video-meta { - padding: 0.5rem; -} - -.social-posting-video-title { - font-size: 18px; - font-weight: 500; - color: #FFFFFF; - margin: 0 0 0.25rem 0; -} - -.social-posting-video-specs { - font-size: 14px; - color: rgba(255, 255, 255, 0.5); - margin: 0; -} - -.social-posting-field { - display: flex; - flex-direction: column; - gap: 0.5rem; - position: relative; -} - -.social-posting-label { - font-size: 16px; - font-weight: 500; - color: rgba(255, 255, 255, 0.8); -} - -.social-posting-label .required { - color: #a6ffea; -} - -.social-posting-input, -.social-posting-select, -.social-posting-textarea { - width: 100%; - padding: 0.75rem 1rem; - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #FFFFFF; - font-size: 14px; - font-family: 'Pretendard', sans-serif; - transition: border-color 0.2s; -} - -.social-posting-input::placeholder, -.social-posting-textarea::placeholder { - color: rgba(255, 255, 255, 0.3); -} - -/* SEO 자동 생성 shimmer 효과 */ -@keyframes seo-shimmer { - 0% { background-position: 200% center; } - 100% { background-position: -200% center; } -} - -.seo-input-wrapper { - position: relative; -} - -.seo-input-wrapper .social-posting-input, -.seo-input-wrapper .social-posting-textarea { - width: 100%; -} - -.seo-shimmer-text { - position: absolute; - top: 50%; - left: 12px; - transform: translateY(-50%); - pointer-events: none; - font-size: 14px; - font-family: 'Pretendard', sans-serif; - background: linear-gradient( - 90deg, - rgba(166, 255, 234, 0.25) 0%, - #a6ffea 40%, - rgba(166, 255, 234, 0.25) 80% - ); - background-size: 200% 100%; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - animation: seo-shimmer 3s linear infinite; -} - -.seo-input-wrapper:has(.social-posting-textarea) .seo-shimmer-text { - top: 14px; - transform: none; -} - -.social-posting-input:focus, -.social-posting-select:focus, -.social-posting-textarea:focus { - outline: none; - border-color: rgba(166, 255, 234, 0.4); -} - -.social-posting-select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 1rem center; - padding-right: 2.5rem; -} - -.social-posting-select option { - background-color: #002224; - color: #FFFFFF; -} - -.social-posting-textarea { - resize: vertical; - min-height: 80px; -} - -.social-posting-char-count { - position: absolute; - right: 0; - top: 0; - font-size: 0.7rem; - color: rgba(255, 255, 255, 0.4); -} - -.social-posting-loading, -.social-posting-no-accounts { - padding: 1rem; - text-align: center; - color: rgba(255, 255, 255, 0.5); - font-size: 0.85rem; -} - -.social-posting-no-accounts-hint { - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.4); - margin-top: 0.25rem; -} - -/* Radio Group */ -.social-posting-radio-group { - display: flex; - gap: 1.25rem; -} - -.social-posting-radio { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -.social-posting-radio input[type="radio"] { - width: 16px; - height: 16px; - accent-color: #a6ffea; - cursor: pointer; -} - -.social-posting-radio .radio-label { - font-size: 14px; - color: rgba(255, 255, 255, 0.8); -} - -.social-posting-radio .radio-label.disabled { - color: rgba(255, 255, 255, 0.4); -} - -/* ===================================================== - Schedule DateTime Picker - ===================================================== */ - -.schedule-datetime-picker { - margin-top: 12px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - padding: 16px; - display: flex; - flex-direction: column; - gap: 14px; -} - -.mini-calendar { - width: 100%; -} - -.mini-calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; -} - -.mini-calendar-title { - font-size: 0.85rem; - font-weight: 600; - color: rgba(255, 255, 255, 0.9); -} - -.mini-calendar-nav { - background: none; - border: none; - color: rgba(255, 255, 255, 0.6); - font-size: 1.2rem; - cursor: pointer; - padding: 2px 8px; - border-radius: 6px; - line-height: 1; - transition: background 0.15s, color 0.15s; -} - -.mini-calendar-nav:hover { - background: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.9); -} - -.mini-calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 2px; -} - -.mini-calendar-day-label { - text-align: center; - font-size: 0.72rem; - color: rgba(255, 255, 255, 0.4); - padding: 4px 0; -} - -.mini-calendar-cell { - background: none; - border: none; - color: rgba(255, 255, 255, 0.85); - font-size: 0.78rem; - cursor: pointer; - padding: 5px 2px; - border-radius: 6px; - text-align: center; - transition: background 0.15s; -} - -.mini-calendar-cell:hover:not(.disabled):not(.selected) { - background: rgba(255, 255, 255, 0.1); -} - -.mini-calendar-cell.other-month { - color: rgba(255, 255, 255, 0.25); -} - -.mini-calendar-cell.today { - color: #a6ffea; - font-weight: 600; -} - -.mini-calendar-cell.selected { - background: #a65eff; - color: #fff; - font-weight: 600; -} - -.mini-calendar-cell.disabled { - color: rgba(255, 255, 255, 0.2); - cursor: not-allowed; -} - -.schedule-time-picker { - display: flex; - flex-direction: column; - gap: 8px; - padding-top: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.schedule-time-label { - font-size: 0.8rem; - color: rgba(255, 255, 255, 0.6); - font-weight: 500; -} - -.schedule-time-selects { - display: flex; - gap: 8px; -} - -.schedule-time-select { - flex: 1; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 8px; - color: rgba(255, 255, 255, 0.9); - font-size: 0.85rem; - padding: 8px 10px; - cursor: pointer; - outline: none; - appearance: auto; -} - -.schedule-time-select:focus { - border-color: rgba(166, 95, 255, 0.6); -} - -.schedule-time-select option { - background: #1a2a2a; - color: rgba(255, 255, 255, 0.9); -} - -.schedule-datetime-preview { - font-size: 0.8rem; - color: #a65eff; - font-weight: 600; - margin: 0; -} - -/* Footer */ -.social-posting-footer { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 1.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(0, 0, 0, 0.2); -} - -.social-posting-footer-note { - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.5); - margin: 0; -} - -.social-posting-link { - color: #a6ffea; - text-decoration: underline; -} - -.social-posting-actions { - display: flex; - gap: 0.75rem; -} - -.social-posting-btn { - padding: 0.625rem 1.25rem; - border-radius: 8px; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; -} - -.social-posting-btn.cancel { - background: transparent; - border: 1px solid rgba(255, 255, 255, 0.15); - color: rgba(255, 255, 255, 0.7); -} - -.social-posting-btn.cancel:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.25); -} - -.social-posting-btn.submit { - background: linear-gradient(135deg, #a682ff 0%, #8b5cf6 100%); - border: none; - color: #FFFFFF; -} - -.social-posting-btn.submit:hover:not(:disabled) { - background: linear-gradient(135deg, #9570f0 0%, #7c4fe0 100%); -} - -.social-posting-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Mobile Adjustments */ -@media (max-width: 768px) { - .social-posting-modal { - max-height: 95vh; - } - - .social-posting-header { - padding: 1rem; - } - - .social-posting-form { - padding: 1rem; - } - - .social-posting-footer { - flex-direction: column; - gap: 1rem; - padding: 1rem; - } - - .social-posting-footer-note { - text-align: center; - } - - .social-posting-actions { - width: 100%; - } - - .social-posting-btn { - flex: 1; - } - - .social-posting-radio-group { - flex-direction: column; - gap: 0.75rem; - } -} - -/* Custom Scrollbar for Social Posting Modal */ -.social-posting-modal::-webkit-scrollbar, -.social-posting-content::-webkit-scrollbar, -.social-posting-form::-webkit-scrollbar { - width: 6px; -} - -.social-posting-modal::-webkit-scrollbar-track, -.social-posting-content::-webkit-scrollbar-track, -.social-posting-form::-webkit-scrollbar-track { - background: #001a1c; -} - -.social-posting-modal::-webkit-scrollbar-thumb, -.social-posting-content::-webkit-scrollbar-thumb, -.social-posting-form::-webkit-scrollbar-thumb { - background: #003d40; - border-radius: 3px; -} - -.social-posting-modal::-webkit-scrollbar-thumb:hover, -.social-posting-content::-webkit-scrollbar-thumb:hover, -.social-posting-form::-webkit-scrollbar-thumb:hover { - background: #004d50; -} - -/* Firefox scrollbar */ -.social-posting-modal, -.social-posting-content, -.social-posting-form { - scrollbar-width: thin; - scrollbar-color: #003d40 #001a1c; -} - -/* Custom Channel Dropdown */ -.social-posting-channel-dropdown { - position: relative; -} - -.social-posting-channel-trigger { - width: 100%; - padding: 0.75rem 1rem; - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #FFFFFF; - font-size: 0.875rem; - font-family: 'Pretendard', sans-serif; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - transition: border-color 0.2s; -} - -.social-posting-channel-trigger:hover { - border-color: rgba(255, 255, 255, 0.2); -} - -.social-posting-channel-trigger.open { - border-color: rgba(166, 255, 234, 0.4); -} - -.social-posting-channel-selected { - display: flex; - align-items: center; - gap: 0.625rem; -} - -.social-posting-channel-icon { - width: 24px; - height: 24px; - border-radius: 4px; - object-fit: cover; -} - -.social-posting-channel-arrow { - width: 12px; - height: 12px; - transition: transform 0.2s; -} - -.social-posting-channel-trigger.open .social-posting-channel-arrow { - transform: rotate(180deg); -} - -.social-posting-channel-placeholder { - color: rgba(255, 255, 255, 0.35); -} - -.social-posting-channel-menu { - position: absolute; - top: 100%; - left: 0; - right: 0; - margin-top: 4px; - background-color: #003538; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - overflow: hidden; - z-index: 10; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.social-posting-channel-option { - width: 100%; - padding: 0.75rem 1rem; - background: transparent; - border: none; - color: #FFFFFF; - font-size: 0.875rem; - font-family: 'Pretendard', sans-serif; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.625rem; - transition: background-color 0.15s; -} - -.social-posting-channel-option:hover { - background-color: rgba(166, 255, 234, 0.1); -} - -.social-posting-channel-option.selected { - background-color: rgba(166, 255, 234, 0.15); -} - -.social-posting-channel-option-icon { - width: 24px; - height: 24px; - border-radius: 4px; - object-fit: cover; -} - - -/* ============================================ - Upload Progress Modal Styles - ============================================ */ - -.upload-progress-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 1100; - padding: 1rem; -} - -.upload-progress-modal { - width: 100%; - max-width: 420px; - background: linear-gradient(180deg, #003538 0%, #002224 100%); - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.1); - overflow: hidden; -} - -.upload-progress-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.25rem 1.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.upload-progress-title { - font-size: 1.125rem; - font-weight: 600; - color: #FFFFFF; - margin: 0; -} - -.upload-progress-close { - background: transparent; - border: none; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - padding: 0.25rem; - display: flex; - transition: color 0.2s; -} - -.upload-progress-close:hover { - color: #FFFFFF; -} - -.upload-progress-content { - padding: 2rem 1.5rem; - display: flex; - flex-direction: column; - align-items: center; - gap: 1.25rem; -} - -/* Spinner */ -.upload-progress-spinner { - width: 64px; - height: 64px; -} - -.upload-spinner-svg { - width: 100%; - height: 100%; - animation: upload-spinner-rotate 1.5s linear infinite; -} - -.upload-spinner-svg circle { - stroke: #a6ffea; - stroke-dasharray: 90, 150; - stroke-dashoffset: 0; - stroke-linecap: round; - animation: upload-spinner-dash 1.5s ease-in-out infinite; -} - -@keyframes upload-spinner-rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes upload-spinner-dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} - -/* Status Icons */ -.upload-progress-icon { - width: 64px; - height: 64px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} - -.upload-progress-icon.success { - background: rgba(166, 255, 234, 0.15); - color: #a6ffea; -} - -.upload-progress-icon.error { - background: rgba(248, 113, 113, 0.15); - color: #f87171; -} - -/* Status Text */ -.upload-progress-status { - font-size: 1.25rem; - font-weight: 600; - color: #FFFFFF; - margin: 0; -} - -.upload-progress-status.completed { - color: #a6ffea; -} - -.upload-progress-status.failed { - color: #f87171; -} - -/* Progress Bar */ -.upload-progress-bar-container { - width: 100%; - max-width: 280px; - position: relative; -} - -.upload-progress-bar-container::before { - content: ''; - display: block; - width: 100%; - height: 8px; - background: rgba(255, 255, 255, 0.1); - border-radius: 4px; -} - -.upload-progress-bar-fill { - position: absolute; - top: 0; - left: 0; - height: 8px; - background: linear-gradient(90deg, #a6ffea 0%, #4fd1c5 100%); - border-radius: 4px; - transition: width 0.3s ease; -} - -.upload-progress-percent { - display: block; - text-align: center; - margin-top: 0.5rem; - font-size: 0.875rem; - color: rgba(255, 255, 255, 0.7); -} - -/* Info Section */ -.upload-progress-info { - width: 100%; - background: rgba(255, 255, 255, 0.05); - border-radius: 8px; - padding: 1rem; -} - -.upload-progress-info-row { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; -} - -.upload-progress-info-row + .upload-progress-info-row { - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -.upload-progress-label { - font-size: 0.8125rem; - color: rgba(255, 255, 255, 0.5); - flex-shrink: 0; -} - -.upload-progress-value { - font-size: 0.875rem; - color: #FFFFFF; - text-align: right; - word-break: break-word; -} - -/* Error Message */ -.upload-progress-error { - width: 100%; - background: rgba(248, 113, 113, 0.1); - border: 1px solid rgba(248, 113, 113, 0.3); - border-radius: 8px; - padding: 0.875rem 1rem; -} - -.upload-progress-error p { - margin: 0; - font-size: 0.875rem; - color: #f87171; - text-align: center; -} - -/* YouTube Link */ -.upload-progress-youtube-link { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: #FF0000; - color: #FFFFFF; - font-size: 0.875rem; - font-weight: 500; - text-decoration: none; - border-radius: 8px; - transition: background-color 0.2s; -} - -.upload-progress-youtube-link:hover { - background: #CC0000; -} - -.upload-youtube-icon { - width: 20px; - height: 20px; -} - -/* Footer */ -.upload-progress-footer { - padding: 1.25rem 1.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); - display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; -} - -.upload-progress-calendar-link { - font-size: 0.8rem; - color: rgba(255, 255, 255, 0.45); - cursor: pointer; - text-decoration: underline; - text-underline-offset: 3px; -} - -.upload-progress-calendar-link:hover { - color: rgba(255, 255, 255, 0.75); -} - -.upload-progress-btn { - padding: 0.75rem 2rem; - border-radius: 8px; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; -} - -.upload-progress-btn.primary { - background: linear-gradient(135deg, #a6ffea 0%, #4fd1c5 100%); - border: none; - color: #002224; -} - -.upload-progress-btn.primary:hover { - opacity: 0.9; - transform: translateY(-1px); -} - -.upload-progress-note { - margin: 0; - font-size: 0.8125rem; - color: rgba(255, 255, 255, 0.5); - text-align: center; -} - -/* ===================================================== - Test Data Button (for development/testing) - ===================================================== */ -.test-data-button { - position: fixed; - bottom: 24px; - right: 24px; - padding: 12px 20px; - background-color: rgba(174, 114, 249, 0.9); - color: #FFFFFF; - border: 1px solid rgba(174, 114, 249, 0.5); - border-radius: 8px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - z-index: 9999; - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(174, 114, 249, 0.3); -} - -.test-data-button:hover { - background-color: rgba(174, 114, 249, 1); - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(174, 114, 249, 0.4); -} - -.test-data-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - -/* Calendar panel scrollbar */ -.calendar-panel-scroll::-webkit-scrollbar { - width: 4px; -} - -.calendar-panel-scroll::-webkit-scrollbar-track { - background: transparent; -} - -.calendar-panel-scroll::-webkit-scrollbar-thumb { - background: #067C80; - border-radius: 999px; -} - -.calendar-panel-scroll::-webkit-scrollbar-thumb:hover { - background: #088a8e; -} - -/* Firefox */ -.calendar-panel-scroll { - scrollbar-width: thin; - scrollbar-color: #067C80 transparent; -} - -/* ===================================================== - Tutorial Overlay - ===================================================== */ - -.tutorial-overlay-root { - position: fixed; - inset: 0; - z-index: 10000; - pointer-events: none; -} - -.tutorial-overlay-svg { - position: fixed; - inset: 0; - width: 100%; - height: 100%; - pointer-events: none; - cursor: default; -} - -.tutorial-overlay-blocker { - position: fixed; - background: rgba(0, 0, 0, 0.72); - pointer-events: all; -} - -@keyframes tutorial-pulse { - 0%, 100% { - border-color: rgba(166, 255, 234, 0.9); - box-shadow: 0 0 0 2px rgba(166, 255, 234, 0.3), - 0 0 16px 4px rgba(166, 255, 234, 0.35), - 0 0 40px 8px rgba(166, 255, 234, 0.15); - } - 50% { - border-color: rgba(166, 255, 234, 0.5); - box-shadow: 0 0 0 5px rgba(166, 255, 234, 0.12), - 0 0 32px 10px rgba(166, 255, 234, 0.5), - 0 0 64px 20px rgba(166, 255, 234, 0.2); - } -} - -.tutorial-spotlight-ring { - position: fixed; - border: 4px solid rgba(166, 255, 234, 0.85); - border-radius: 12px; - box-shadow: 0 0 0 1px rgba(166, 255, 234, 0.2), 0 0 12px 2px rgba(166, 255, 234, 0.15); - pointer-events: none; - z-index: 10001; - animation: tutorial-pulse 2s ease-in-out infinite; -} - -.tutorial-tooltip { - position: fixed; - pointer-events: all; - z-index: 10002; - display: flex; - width: 370px; - padding: 20px; - flex-direction: column; - gap: 8px; - border-radius: 12px; - border: 1px solid var(--Color-teal-600, #046266); - background: var(--Color-teal-800, #002224); -} - -.tutorial-tooltip-title { - align-self: stretch; - color: rgba(255, 255, 255, 0.70); - /* 14 */ - font-family: Pretendard; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 18px; /* 128.571% */ -} - -.tutorial-tooltip-desc { - display: flex; - padding-bottom: 16px; - flex-direction: column; - align-items: flex-start; - gap: 4px; - align-self: stretch; - line-height: 1.5; - white-space: pre-line; - align-self: stretch; - color: var(--Color-white, #FFF); - font-family: Pretendard; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: 24px; /* 133.333% */ - letter-spacing: -0.108px; -} - -.tutorial-tooltip-note { - align-self: stretch; - color: rgba(255, 255, 255, 0.60); - font-family: Pretendard; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 100%; - letter-spacing: -0.072px; - margin: -8px 0 14px; - white-space: pre-line; -} - -.tutorial-tooltip-footer { - display: flex; - align-items: center; - justify-content: space-between; -} - -.tutorial-tooltip-footer-left { - display: flex; - align-items: center; - gap: 8px; -} - -.tutorial-tooltip-counter { - color: rgba(255, 255, 255, 0.60); - font-family: Pretendard; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 100%; /* 12px */ - letter-spacing: -0.072px; -} - -.tutorial-tooltip-actions { - display: flex; - gap: 10px; -} - -.tutorial-btn-skip { - color: rgba(255, 255, 255, 0.60); - font-family: Pretendard; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 100%; /* 12px */ - letter-spacing: -0.072px; -} - -.tutorial-btn-skip:hover { - color: rgba(255, 255, 255, 0.7); -} - -.tutorial-btn-prev { - display: flex; - padding: 8px 12px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - background: var(--Color-teal-200, #9BCACC); - color: var(--Color-teal-800, #002224); - font-family: Pretendard; - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 100%; /* 13px */ - letter-spacing: -0.078px; -} - -.tutorial-btn-prev:hover { - background: rgba(255, 255, 255, 0.14); -} - -.tutorial-btn-next { - display: flex; - padding: 8px 12px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - background: var(--Color-teal-200, #9BCACC); - color: var(--Color-teal-800, #002224); - font-family: Pretendard; - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 100%; /* 13px */ - letter-spacing: -0.078px; -} - -.tutorial-btn-next:hover { - background: rgba(255, 255, 255, 0.14); -} - -/* 말풍선 variant — 색상은 기본 tooltip과 동일, 꼬리만 추가 */ -.tutorial-tooltip-bubble { - border-radius: 12px; -} - -/* 꼬리 (화살표) */ -.tutorial-tooltip-bubble::before { - content: ''; - position: absolute; - width: 0; - height: 0; - border: 10px solid transparent; -} - -.tutorial-tooltip-bubble--bottom::before { - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-bottom-color: #1a2630; -} - -.tutorial-tooltip-bubble--top::before { - top: 100%; - left: 50%; - transform: translateX(-50%); - border-top-color: #1a2630; -} - -.tutorial-tooltip-bubble--right::before { - right: 100%; - top: 50%; - transform: translateY(-50%); - border-right-color: #1a2630; -} - -.tutorial-tooltip-bubble--left::before { - left: 100%; - top: 50%; - transform: translateY(-50%); - border-left-color: #1a2630; -} - -.tutorial-tooltip-action-hint { - font-size: 11px; - color: #a6ffea; - margin: 8px 0 0; - opacity: 0.8; -} - -/* 튜토리얼 재시작 팝업 */ -.tutorial-restart-backdrop { - position: fixed; - inset: 0; - z-index: 10100; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0.5); -} - -.tutorial-restart-popup { - background: #1a2630; - border: 1px solid rgba(166, 255, 234, 0.25); - border-radius: 14px; - padding: 24px 28px; - width: 320px; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); -} - -.tutorial-restart-title { - font-size: 16px; - font-weight: 700; - color: #a6ffea; - margin: 0 0 10px; -} - -.tutorial-restart-desc { - font-size: 13px; - color: rgba(255, 255, 255, 0.65); - margin: 0 0 20px; - line-height: 1.5; -} - -.tutorial-restart-actions { - display: flex; - justify-content: flex-end; - gap: 8px; -} - -.tutorial-restart-cancel { - font-size: 13px; - color: rgba(255, 255, 255, 0.5); - background: rgba(255, 255, 255, 0.08); - border: none; - border-radius: 8px; - cursor: pointer; - padding: 7px 16px; -} - -.tutorial-restart-cancel:hover { - background: rgba(255, 255, 255, 0.14); - color: rgba(255, 255, 255, 0.8); -} - -.tutorial-restart-confirm { - font-size: 13px; - font-weight: 600; - color: #0d1a1f; - background: #a6ffea; - border: none; - border-radius: 8px; - cursor: pointer; - padding: 7px 18px; -} - -.tutorial-restart-confirm:hover { - background: #c0fff2; -} - -/* 사이드바 튜토리얼 버튼 */ -.tutorial-restart-fab { - position: fixed; - top: 16px; - right: 20px; - z-index: 900; - display: flex; - align-items: center; - gap: 8px; - padding: 7px 14px; - background: rgba(0, 34, 36, 0.85); - border: 1px solid rgba(166, 255, 234, 0.25); - border-radius: 20px; - color: rgba(255, 255, 255, 0.65); - cursor: pointer; - font-size: 13px; - backdrop-filter: blur(6px); - transition: background 0.15s, color 0.15s, border-color 0.15s; -} - -.tutorial-restart-fab:hover { - background: rgba(166, 255, 234, 0.12); - border-color: rgba(166, 255, 234, 0.5); - color: #a6ffea; -} - -/* 튜토리얼 토글 버튼 */ -.tutorial-toggle-fab { - position: fixed; - top: 16px; - right: 20px; - z-index: 900; - display: flex; - align-items: center; - gap: 8px; - padding: 7px 14px; - background: rgba(0, 34, 36, 0.85); - border: 1px solid rgba(166, 255, 234, 0.25); - border-radius: 20px; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - font-size: 13px; - backdrop-filter: blur(6px); - transition: background 0.15s, color 0.15s, border-color 0.15s; -} - -.tutorial-toggle-fab:hover { - background: rgba(166, 255, 234, 0.12); - border-color: rgba(166, 255, 234, 0.5); - color: #a6ffea; -} - -.tutorial-toggle-fab.active { - color: #a6ffea; - border-color: rgba(166, 255, 234, 0.4); -} - -@media (max-width: 767px) { - .tutorial-toggle-fab { - display: none; - } -} - -.tutorial-toggle-badge { - font-size: 10px; - font-weight: 700; - padding: 2px 6px; - border-radius: 4px; - transition: background 0.15s, color 0.15s; -} - -.tutorial-toggle-badge.on { - background: #a6ffea; - color: #002224; -} - -.tutorial-toggle-badge.off { - background: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.4); -} - -/* BusinessNameInputModal */ -.manual-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.6); - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; -} - -.manual-modal { - background: #1a2a2b; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - width: 375px; - max-width: 92vw; - display: flex; - flex-direction: column; -} - -.manual-modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.manual-modal-title { - font-size: 15px; - font-weight: 600; - color: #fff; -} - -.manual-modal-close { - background: none; - border: none; - color: rgba(255, 255, 255, 0.5); - font-size: 16px; - cursor: pointer; - padding: 0; - line-height: 1; -} - -.manual-modal-close:hover { - color: #fff; -} - -.manual-modal-body { - display: flex; - flex-direction: column; - gap: 16px; - padding: 20px 20px 24px; -} - -.manual-modal-field { - display: flex; - flex-direction: column; - gap: 6px; -} - -.manual-modal-label { - font-size: 13px; - font-weight: 500; - color: rgba(255, 255, 255, 0.7); -} - -.manual-modal-input { - width: 100%; - padding: 10px 14px; - border-radius: 8px; - border: 1px solid rgba(155, 202, 204, 0.25); - background: rgba(255, 255, 255, 0.06); - color: #fff; - font-size: 14px; - outline: none; - box-sizing: border-box; - transition: border-color 0.15s; -} - -.manual-modal-input::placeholder { - color: rgba(255, 255, 255, 0.3); -} - -.manual-modal-input:focus { - border-color: #9BCACC; -} - -.manual-modal-city-btn { - width: 100%; - padding: 10px 14px; - border-radius: 8px; - border: 1px solid rgba(155, 202, 204, 0.25); - background: rgba(255, 255, 255, 0.06); - color: rgba(255, 255, 255, 0.3); - font-size: 14px; - text-align: left; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - transition: border-color 0.15s; - box-sizing: border-box; -} - -.manual-modal-city-btn.selected { - color: #fff; -} - -.manual-modal-city-btn:hover { - border-color: #9BCACC; -} - -.manual-modal-actions { - display: flex; - gap: 8px; - margin-top: 4px; -} - -.manual-modal-cancel { - flex: 1; - padding: 11px 0; - border-radius: 8px; - border: 1px solid rgba(155, 202, 204, 0.3); - background: transparent; - color: rgba(255, 255, 255, 0.6); - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: background 0.15s; -} - -.manual-modal-cancel:hover { - background: rgba(155, 202, 204, 0.08); -} - -.manual-modal-submit { - flex: 2; - padding: 11px 0; - border-radius: 8px; - border: none; - background: #9BCACC; - color: #1a2a2b; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: background 0.15s, opacity 0.15s; -} - -.manual-modal-submit:hover:not(:disabled) { - background: #b0d8da; -} - -.manual-modal-submit:disabled { - opacity: 0.35; - cursor: not-allowed; -} diff --git a/index.html b/index.html index 3c2e33b..1ca09e5 100755 --- a/index.html +++ b/index.html @@ -162,7 +162,6 @@ } } -
diff --git a/public/example_analysis.json b/public/example_analysis.json deleted file mode 100644 index fb3bdc5..0000000 --- a/public/example_analysis.json +++ /dev/null @@ -1,244 +0,0 @@ -{ - "status": "completed", - "image_list": [ - "https://ldb-phinf.pstatic.net/20260112_189/1768176025117RmItD_PNG/ChatGPT_Image_2026%B3%E2_1%BF%F9_9%C0%CF_%BF%C0%C8%C4_03_21_56.png", - "https://ldb-phinf.pstatic.net/20251215_290/1765776039787CALYj_JPEG/IMG_0060.JPG", - "https://ldb-phinf.pstatic.net/20251215_70/1765776016674Nbo0Q_JPEG/IMG_0067_%BA%B9%BB%E7.jpg", - "https://ldb-phinf.pstatic.net/20251215_136/17657760168457kDf6_JPEG/KakaoTalk_20251214_181208552_03_%BA%B9%BB%E7.jpg", - "https://ldb-phinf.pstatic.net/20251215_38/1765776039760cYgOj_JPEG/IMG_0044.JPG", - "https://ldb-phinf.pstatic.net/20251128_248/1764320049551B1gHl_JPEG/KakaoTalk_20251128_174635084_27.jpg", - "https://ldb-phinf.pstatic.net/20251128_209/1764320105053L8V2f_JPEG/KakaoTalk_20251128_174635084_17.jpg", - "https://ldb-phinf.pstatic.net/20241205_181/1733360083850LsEVv_JPEG/KakaoTalk_20241203_155353799_09.jpg", - "https://ldb-phinf.pstatic.net/20251128_209/1764320017959Rh3vs_JPEG/KakaoTalk_20251128_174635084_13.jpg", - "https://ldb-phinf.pstatic.net/20251128_102/1764320169035vluJN_JPEG/KakaoTalk_20251128_174635084_12.jpg", - "https://ldb-phinf.pstatic.net/20241129_249/17328584834569zWJT_JPEG/6S5A0642-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241129_196/1732858501391FjLpd_JPEG/6S5A0657.jpg", - "https://ldb-phinf.pstatic.net/20241202_230/1733105198846QGbcW_JPEG/8.jpg", - "https://ldb-phinf.pstatic.net/20241202_94/1733105214373Q8ncR_JPEG/%B5%BF%B1%D7%B6%F3%B9%CC_%C3%A2%B9%AE_%B9%E6%B0%A1%C0%BB_2.jpg", - "https://ldb-phinf.pstatic.net/20231207_110/1701910802632rDM5r_JPEG/a_%28301%29-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_7/1733106037765MNR8e_JPEG/9-1.jpg", - "https://ldb-phinf.pstatic.net/20240118_42/17055625561156LIx7_JPEG/6S5A0809-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_246/1705562556109bihHB_JPEG/6S5A1820-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_259/1733104881690lDgnH_JPEG/3-2.jpg", - "https://ldb-phinf.pstatic.net/20231207_76/1701910651888PpVap_JPEG/%C6%EA%B5%E5%B6%F3%C0%CC%B7%EB.jpg", - "https://ldb-phinf.pstatic.net/20231207_242/1701910651863IAAlE_JPEG/%B0%AD%BE%C6%C1%F6_%BA%F1%C7%B0.jpg", - "https://ldb-phinf.pstatic.net/20241202_120/17331038087267aQ0S_JPEG/KakaoTalk_20241015_154536888_04.jpg", - "https://ldb-phinf.pstatic.net/20250710_164/17521338301365LRwl_JPEG/6S5A6748-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_169/1752133830016fqFlL_JPEG/6S5A6760-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_80/1701920469022ef7TW_JPEG/6S5A0614-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_140/17173835278369nntD_JPEG/6S5A6707.jpg", - "https://ldb-phinf.pstatic.net/20250710_173/1752133829861tPALd_JPEG/6S5A7136.jpg", - "https://ldb-phinf.pstatic.net/20241202_248/1733106037776BGjJx_JPEG/1-1.jpg", - "https://ldb-phinf.pstatic.net/20240603_275/1717383527874oJOpz_JPEG/DJI_0040-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_153/1752133811173ba7oE_JPEG/6S5A6458.jpg", - "https://ldb-phinf.pstatic.net/20250710_185/1752133829868FyD76_JPEG/6S5A6815.jpg", - "https://ldb-phinf.pstatic.net/20250710_220/1752133829963w1aee_JPEG/6S5A6856.jpg", - "https://ldb-phinf.pstatic.net/20250710_228/1752133830002U65jg_JPEG/6S5A6864.jpg", - "https://ldb-phinf.pstatic.net/20250710_178/1752133829793fQQ2E_JPEG/6S5A7016-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_279/1752133829838lTSC9_JPEG/6S5A7034-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_179/1752133811452tOl7F_JPEG/6S5A6363.jpg", - "https://ldb-phinf.pstatic.net/20250710_75/1752133811152vd5ts_JPEG/6S5A6513.jpg", - "https://ldb-phinf.pstatic.net/20250710_147/1752133810693TfR5M_JPEG/6S5A6556.jpg", - "https://ldb-phinf.pstatic.net/20250710_202/1752133811177NRBDn_JPEG/6S5A6619-2.jpg", - "https://ldb-phinf.pstatic.net/20250710_196/1752133811066ufvpA_JPEG/6S5A6657.jpg", - "https://ldb-phinf.pstatic.net/20250710_280/1752133811307QCs3n_JPEG/6S5A6709.jpg", - "https://ldb-phinf.pstatic.net/20240603_85/1717383527884ST2DF_JPEG/6S5A6540.jpg", - "https://ldb-phinf.pstatic.net/20240603_249/1717383528285Om6dI_JPEG/6S5A6648.jpg", - "https://ldb-phinf.pstatic.net/20240603_288/1717383528022TxA4c_JPEG/6S5A6785.jpg", - "https://ldb-phinf.pstatic.net/20240909_284/1725865224424ux2W4_JPEG/6S5A9299-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241129_87/1732858513628bWPt7_JPEG/6S5A9837-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_50/1733105457578cGfYD_JPEG/6S5A9807-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_100/1717383527950q4yNf_JPEG/6S5A7056.jpg", - "https://ldb-phinf.pstatic.net/20240603_221/1717383527791s4ziP_JPEG/6S5A6673.jpg", - "https://ldb-phinf.pstatic.net/20241202_134/17331166295182o4vs_JPEG/47%C6%F2_%2829%29.jpg", - "https://ldb-phinf.pstatic.net/20241202_249/17331060371685uFQi_JPEG/3-1_%281%29.jpg", - "https://ldb-phinf.pstatic.net/20240909_238/1725865224397wnWE5_JPEG/DJI_0157.jpg", - "https://ldb-phinf.pstatic.net/20231206_34/1701833355386Nsg5j_JPEG/6S5A9995.jpg", - "https://ldb-phinf.pstatic.net/20241202_293/1733105206236d8l2f_JPEG/8-1.jpg", - "https://ldb-phinf.pstatic.net/20241202_224/1733105239528RLN59_JPEG/3-1-min.jpg", - "https://ldb-phinf.pstatic.net/20241202_31/1733116629874BYgpO_JPEG/47%C6%F2_%2823%29.jpg", - "https://ldb-phinf.pstatic.net/20241205_106/1733360083918ER1RI_JPEG/KakaoTalk_20241203_155353799_27.jpg", - "https://ldb-phinf.pstatic.net/20241129_126/17328584834200qVDw_JPEG/6S5A0645.jpg", - "https://ldb-phinf.pstatic.net/20240909_35/1725865128231ar2eM_PNG/KakaoTalk_20240710_163045662.png", - "https://ldb-phinf.pstatic.net/20241202_153/1733105180908PyVIC_JPEG/KakaoTalk_20231027_143438563_25-min.jpg", - "https://ldb-phinf.pstatic.net/20241129_128/1732858517984PFmrJ_JPEG/KakaoTalk_20241119_105023750.jpg", - "https://ldb-phinf.pstatic.net/20231207_124/1701910720268qeACJ_JPEG/%B9%D9%BA%A3%C5%A5.jpg", - "https://ldb-phinf.pstatic.net/20241202_55/173310545746333mf8_JPEG/6S5A9837-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_11/1733106430749ovoeY_JPEG/37%C6%F2_%2820%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_185/1701910772479mexsh_JPEG/a_%28282%29.jpg", - "https://ldb-phinf.pstatic.net/20240118_211/17055625561294XsN2_JPEG/6S5A1803-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_156/17055625560847R7SL_JPEG/6S5A0934-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_179/17019107724184CCEU_JPEG/6S5A9906.jpg", - "https://ldb-phinf.pstatic.net/20231207_287/1701910772339cG7K0_JPEG/a_%28119%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_40/1701910675360dvC1i_JPEG/%C8%AD%C0%E5%BD%C7_%281%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_263/1701910675262pevKk_JPEG/%C8%AD%C0%E5%BD%C7_%284%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_73/1701910651864xPI48_JPEG/%BB%E7%B6%F7_%BC%A4%C7%AA.jpg", - "https://ldb-phinf.pstatic.net/20231207_265/17019204486629hzae_JPEG/6S5A0645.jpg", - "https://ldb-phinf.pstatic.net/20241202_147/1733103809000xsMrG_JPEG/KakaoTalk_20241015_154532027_01.jpg", - "https://ldb-phinf.pstatic.net/20241202_77/1733103809037HSO4S_JPEG/KakaoTalk_20241015_154532027_02.jpg", - "https://ldb-phinf.pstatic.net/20241202_233/1733103809020IMEdL_JPEG/KakaoTalk_20241015_154532027_06.jpg", - "https://ldb-phinf.pstatic.net/20241202_53/1733103808802Wui9x_JPEG/KakaoTalk_20241015_154532027_04.jpg", - "https://ldb-phinf.pstatic.net/20241202_230/1733103808998dOq0b_JPEG/KakaoTalk_20241015_154532027_15.jpg", - "https://ldb-phinf.pstatic.net/20241202_122/1733103808509lOt9x_JPEG/KakaoTalk_20241015_154536888_13.jpg", - "https://ldb-phinf.pstatic.net/20241202_246/1733103809045RdnEP_JPEG/KakaoTalk_20241015_154536888_11.jpg", - "https://ldb-phinf.pstatic.net/20241202_287/1733103808656oB1xz_JPEG/KakaoTalk_20241015_154536888_06.jpg", - "https://ldb-phinf.pstatic.net/20241202_222/1733103808508hkf5K_JPEG/KakaoTalk_20241015_154536888_08.jpg", - "https://ldb-phinf.pstatic.net/20241202_229/1733103808818KGAps_JPEG/KakaoTalk_20241015_154536888_02.jpg", - "https://ldb-phinf.pstatic.net/20241202_12/1733103808751cVAsT_JPEG/KakaoTalk_20241015_154536888_03.jpg", - "https://ldb-phinf.pstatic.net/20240909_261/1725865224473Uo7V9_JPEG/6S5A9371-%C6%ED%C1%FD-%C6%ED%C1%FD-2.jpg", - "https://ldb-phinf.pstatic.net/20240909_22/1725865224495AL798_JPEG/6S5A9557-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_177/1725865224462eX1Pi_JPEG/DJI_0149-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_165/1725865224480S7c1j_JPEG/6S5A9468-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_85/1725865224421CNRrk_JPEG/DJI_0155.jpg", - "https://ldb-phinf.pstatic.net/20240909_62/1725865224361fP2d2_JPEG/6S5A9434.jpg", - "https://ldb-phinf.pstatic.net/20240909_155/1725865224363Xxt8y_JPEG/6S5A9431-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_13/1725865224457BGLGs_JPEG/6S5A9456.jpg", - "https://ldb-phinf.pstatic.net/20240603_162/1717383527882Vnrsk_JPEG/6S5A6786.jpg", - "https://ldb-phinf.pstatic.net/20240603_256/1717383527892WXOKA_JPEG/6S5A6896.jpg", - "https://ldb-phinf.pstatic.net/20240603_130/1717383527800oHSKA_JPEG/6S5A6904.jpg", - "https://ldb-phinf.pstatic.net/20240603_118/17173835277794IXlt_JPEG/6S5A6946.jpg", - "https://ldb-phinf.pstatic.net/20240603_257/1717383527822ITvHM_JPEG/6S5A6973.jpg", - "https://ldb-phinf.pstatic.net/20240603_170/1717383527880sTdFE_JPEG/DJI_0039-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_10/1717383527863CVLJ2_JPEG/DJI_0087-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_94/1717383527921sDeDB_JPEG/DJI_0091-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231206_81/1701833426718D5Qwk_JPEG/b_%28119%29-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_153/17055625561274LAs5_JPEG/6S5A1460-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_8/1705562556139zGkjb_JPEG/6S5A1780.jpg", - "https://ldb-phinf.pstatic.net/20240118_57/1705562556129IR40O_JPEG/6S5A1199.jpg", - "https://ldb-phinf.pstatic.net/20240118_260/1705562556111cA7PG_JPEG/6S5A1927-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_183/1701910720221oI66j_JPEG/%B9%D9%BA%A3%C5%A52.jpg", - "https://ldb-phinf.pstatic.net/20231207_247/1701910720113MBgKD_JPEG/%B9%D9%BA%A3%C5%A5_%282%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_227/1701910720098FE7Si_JPEG/6S5A0001.jpg", - "https://ldb-phinf.pstatic.net/20231206_24/1701833408064fgoVj_JPEG/b_%2874%29.jpg", - "https://ldb-phinf.pstatic.net/20240603_100/1717383527883LWVq4_JPEG/6S5A6022-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_169/17173835278856AEUV_JPEG/6S5A5974-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_155/1717383527937gxiyc_JPEG/6S5A5988.jpg", - "https://ldb-phinf.pstatic.net/20231206_160/170183333003287LrV_JPEG/6S5A0243-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_217/1717383528190t41X5_JPEG/6S5A6027.jpg", - "https://ldb-phinf.pstatic.net/20240603_142/1717383527892jHtgI_JPEG/6S5A6643.jpg", - "https://ldb-phinf.pstatic.net/20240603_251/1717383527948jTN2a_JPEG/6S5A6125.jpg", - "https://ldb-phinf.pstatic.net/20240603_189/1717383527880wu4Bv_JPEG/6S5A6326.jpg", - "https://ldb-phinf.pstatic.net/20240603_14/1717383527794qCuuu_JPEG/6S5A6337.jpg", - "https://ldb-phinf.pstatic.net/20240603_220/1717383528017rKdOw_JPEG/6S5A6773.jpg" - ], - "image_count": 119, - "m_id": 1, - "processed_info": { - "customer_name": "풀스테이 스테이펫 홍천", - "region": "", - "detail_region_info": "강원 홍천군 화촌면 답연밭길 5-2 스테이펫 홍천" - }, - "marketing_analysis": { - "brand_identity": { - "location_feature_analysis": "강원 홍천 화촌면의 자연 친화적 입지는 도심 소음에서 벗어난 ‘조용한 숲세권’ 체류 니즈에 최적이며, 수도권에서 주말 이동이 가능한 거리감으로 숏브레이크 수요를 흡수하기 유리합니다.", - "concept_scalability": "‘스테이펫’ 콘셉트는 반려동물 동반 숙박을 넘어 펫 어메니티·펫 포토·펫 웰니스(산책 코스/케어 서비스)까지 확장 가능해, 체류 전 과정의 경험 가치를 패키지화하기 좋습니다." - }, - "market_positioning": { - "category_definition": "자연 속 프라이빗 애견 동반 힐링 스테이", - "core_value": "반려동물과 ‘눈치 없이’ 온전히 쉬는 프라이빗한 쉼" - }, - "target_persona": [ - { - "persona": "주말 펫캉스 커플(반려견 1마리) – 조용한 자연에서 둘+한 마리의 리셋 여행을 찾는 2030", - "age": { - "min_age": 27, - "max_age": 39 - }, - "favor_target": [ - "반려견 동반 가능 숙소", - "자연 뷰/산책하기 좋은 동선", - "청결한 침구와 탈취 관리", - "프라이빗한 공간 구성", - "감성 사진이 잘 나오는 무드" - ], - "decision_trigger": "반려견 동반 + 프라이빗하게 쉴 수 있다는 확신(후기/시설 안내)" - }, - { - "persona": "도심 탈출 1인/2인 힐링러 – 조용한 곳에서 휴식·독서를 즐기며 재충전하는 직장인", - "age": { - "min_age": 29, - "max_age": 45 - }, - "favor_target": [ - "소음 적은 입지", - "자연 속 뷰", - "편안한 침대/휴식형 라운지", - "야간 감성 조명", - "체크인/이용 동선의 간편함" - ], - "decision_trigger": "‘조용함’과 ‘자연 몰입’이 보장되는 입지/분위기" - }, - { - "persona": "가족형 펫오너 – 반려견과 함께 안전하고 편하게 머물며 추억을 만드는 3040", - "age": { - "min_age": 33, - "max_age": 49 - }, - "favor_target": [ - "반려견 안전 동선(미끄럼/울타리 등)", - "넓은 휴식 공간", - "바베큐 등 가족형 액티비티", - "주차/이동 편의", - "위생/청결 신뢰" - ], - "decision_trigger": "가족 단위도 불편 없는 공간감 + 펫 프렌들리 정책" - } - ], - "selling_points": [ - { - "english_category": "PET FRIENDLY", - "korean_category": "애견 동반", - "description": "반려견과 함께하는 완전한 휴식", - "score": 95 - }, - { - "english_category": "HEALING", - "korean_category": "힐링 요소", - "description": "홍천 자연 속 리셋 스테이", - "score": 90 - }, - { - "english_category": "PRIVACY", - "korean_category": "프라이버시", - "description": "눈치 없이 즐기는 프라이빗 쉼", - "score": 88 - }, - { - "english_category": "SHORT GETAWAY", - "korean_category": "숏브레이크", - "description": "주말에 딱, 가볍게 떠나는 홍천", - "score": 82 - }, - { - "english_category": "NIGHT MOOD", - "korean_category": "야간 감성", - "description": "밤이 더 예쁜 감성 무드", - "score": 78 - }, - { - "english_category": "BBQ PARTY", - "korean_category": "바베큐", - "description": "자연을 곁들인 바베큐 한 판", - "score": 75 - }, - { - "english_category": "PHOTO SPOT", - "korean_category": "포토 스팟", - "description": "반려견 인생샷 남기는 공간", - "score": 73 - } - ], - "target_keywords": [ - "홍천애견동반숙소", - "강원도애견동반펜션", - "스테이펫", - "펫캉스", - "반려견동반여행", - "홍천감성숙소", - "강원도힐링스테이", - "숲뷰숙소", - "주말여행추천", - "프라이빗스테이" - ] - } -} \ No newline at end of file diff --git a/public/example_analysis_en.json b/public/example_analysis_en.json deleted file mode 100644 index 177e64a..0000000 --- a/public/example_analysis_en.json +++ /dev/null @@ -1,244 +0,0 @@ -{ - "status": "completed", - "image_list": [ - "https://ldb-phinf.pstatic.net/20260112_189/1768176025117RmItD_PNG/ChatGPT_Image_2026%B3%E2_1%BF%F9_9%C0%CF_%BF%C0%C8%C4_03_21_56.png", - "https://ldb-phinf.pstatic.net/20251215_290/1765776039787CALYj_JPEG/IMG_0060.JPG", - "https://ldb-phinf.pstatic.net/20251215_70/1765776016674Nbo0Q_JPEG/IMG_0067_%BA%B9%BB%E7.jpg", - "https://ldb-phinf.pstatic.net/20251215_136/17657760168457kDf6_JPEG/KakaoTalk_20251214_181208552_03_%BA%B9%BB%E7.jpg", - "https://ldb-phinf.pstatic.net/20251215_38/1765776039760cYgOj_JPEG/IMG_0044.JPG", - "https://ldb-phinf.pstatic.net/20251128_248/1764320049551B1gHl_JPEG/KakaoTalk_20251128_174635084_27.jpg", - "https://ldb-phinf.pstatic.net/20251128_209/1764320105053L8V2f_JPEG/KakaoTalk_20251128_174635084_17.jpg", - "https://ldb-phinf.pstatic.net/20241205_181/1733360083850LsEVv_JPEG/KakaoTalk_20241203_155353799_09.jpg", - "https://ldb-phinf.pstatic.net/20251128_209/1764320017959Rh3vs_JPEG/KakaoTalk_20251128_174635084_13.jpg", - "https://ldb-phinf.pstatic.net/20251128_102/1764320169035vluJN_JPEG/KakaoTalk_20251128_174635084_12.jpg", - "https://ldb-phinf.pstatic.net/20241129_249/17328584834569zWJT_JPEG/6S5A0642-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241129_196/1732858501391FjLpd_JPEG/6S5A0657.jpg", - "https://ldb-phinf.pstatic.net/20241202_230/1733105198846QGbcW_JPEG/8.jpg", - "https://ldb-phinf.pstatic.net/20241202_94/1733105214373Q8ncR_JPEG/%B5%BF%B1%D7%B6%F3%B9%CC_%C3%A2%B9%AE_%B9%E6%B0%A1%C0%BB_2.jpg", - "https://ldb-phinf.pstatic.net/20231207_110/1701910802632rDM5r_JPEG/a_%28301%29-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_7/1733106037765MNR8e_JPEG/9-1.jpg", - "https://ldb-phinf.pstatic.net/20240118_42/17055625561156LIx7_JPEG/6S5A0809-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_246/1705562556109bihHB_JPEG/6S5A1820-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_259/1733104881690lDgnH_JPEG/3-2.jpg", - "https://ldb-phinf.pstatic.net/20231207_76/1701910651888PpVap_JPEG/%C6%EA%B5%E5%B6%F3%C0%CC%B7%EB.jpg", - "https://ldb-phinf.pstatic.net/20231207_242/1701910651863IAAlE_JPEG/%B0%AD%BE%C6%C1%F6_%BA%F1%C7%B0.jpg", - "https://ldb-phinf.pstatic.net/20241202_120/17331038087267aQ0S_JPEG/KakaoTalk_20241015_154536888_04.jpg", - "https://ldb-phinf.pstatic.net/20250710_164/17521338301365LRwl_JPEG/6S5A6748-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_169/1752133830016fqFlL_JPEG/6S5A6760-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_80/1701920469022ef7TW_JPEG/6S5A0614-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_140/17173835278369nntD_JPEG/6S5A6707.jpg", - "https://ldb-phinf.pstatic.net/20250710_173/1752133829861tPALd_JPEG/6S5A7136.jpg", - "https://ldb-phinf.pstatic.net/20241202_248/1733106037776BGjJx_JPEG/1-1.jpg", - "https://ldb-phinf.pstatic.net/20240603_275/1717383527874oJOpz_JPEG/DJI_0040-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_153/1752133811173ba7oE_JPEG/6S5A6458.jpg", - "https://ldb-phinf.pstatic.net/20250710_185/1752133829868FyD76_JPEG/6S5A6815.jpg", - "https://ldb-phinf.pstatic.net/20250710_220/1752133829963w1aee_JPEG/6S5A6856.jpg", - "https://ldb-phinf.pstatic.net/20250710_228/1752133830002U65jg_JPEG/6S5A6864.jpg", - "https://ldb-phinf.pstatic.net/20250710_178/1752133829793fQQ2E_JPEG/6S5A7016-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_279/1752133829838lTSC9_JPEG/6S5A7034-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20250710_179/1752133811452tOl7F_JPEG/6S5A6363.jpg", - "https://ldb-phinf.pstatic.net/20250710_75/1752133811152vd5ts_JPEG/6S5A6513.jpg", - "https://ldb-phinf.pstatic.net/20250710_147/1752133810693TfR5M_JPEG/6S5A6556.jpg", - "https://ldb-phinf.pstatic.net/20250710_202/1752133811177NRBDn_JPEG/6S5A6619-2.jpg", - "https://ldb-phinf.pstatic.net/20250710_196/1752133811066ufvpA_JPEG/6S5A6657.jpg", - "https://ldb-phinf.pstatic.net/20250710_280/1752133811307QCs3n_JPEG/6S5A6709.jpg", - "https://ldb-phinf.pstatic.net/20240603_85/1717383527884ST2DF_JPEG/6S5A6540.jpg", - "https://ldb-phinf.pstatic.net/20240603_249/1717383528285Om6dI_JPEG/6S5A6648.jpg", - "https://ldb-phinf.pstatic.net/20240603_288/1717383528022TxA4c_JPEG/6S5A6785.jpg", - "https://ldb-phinf.pstatic.net/20240909_284/1725865224424ux2W4_JPEG/6S5A9299-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241129_87/1732858513628bWPt7_JPEG/6S5A9837-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_50/1733105457578cGfYD_JPEG/6S5A9807-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_100/1717383527950q4yNf_JPEG/6S5A7056.jpg", - "https://ldb-phinf.pstatic.net/20240603_221/1717383527791s4ziP_JPEG/6S5A6673.jpg", - "https://ldb-phinf.pstatic.net/20241202_134/17331166295182o4vs_JPEG/47%C6%F2_%2829%29.jpg", - "https://ldb-phinf.pstatic.net/20241202_249/17331060371685uFQi_JPEG/3-1_%281%29.jpg", - "https://ldb-phinf.pstatic.net/20240909_238/1725865224397wnWE5_JPEG/DJI_0157.jpg", - "https://ldb-phinf.pstatic.net/20231206_34/1701833355386Nsg5j_JPEG/6S5A9995.jpg", - "https://ldb-phinf.pstatic.net/20241202_293/1733105206236d8l2f_JPEG/8-1.jpg", - "https://ldb-phinf.pstatic.net/20241202_224/1733105239528RLN59_JPEG/3-1-min.jpg", - "https://ldb-phinf.pstatic.net/20241202_31/1733116629874BYgpO_JPEG/47%C6%F2_%2823%29.jpg", - "https://ldb-phinf.pstatic.net/20241205_106/1733360083918ER1RI_JPEG/KakaoTalk_20241203_155353799_27.jpg", - "https://ldb-phinf.pstatic.net/20241129_126/17328584834200qVDw_JPEG/6S5A0645.jpg", - "https://ldb-phinf.pstatic.net/20240909_35/1725865128231ar2eM_PNG/KakaoTalk_20240710_163045662.png", - "https://ldb-phinf.pstatic.net/20241202_153/1733105180908PyVIC_JPEG/KakaoTalk_20231027_143438563_25-min.jpg", - "https://ldb-phinf.pstatic.net/20241129_128/1732858517984PFmrJ_JPEG/KakaoTalk_20241119_105023750.jpg", - "https://ldb-phinf.pstatic.net/20231207_124/1701910720268qeACJ_JPEG/%B9%D9%BA%A3%C5%A7.jpg", - "https://ldb-phinf.pstatic.net/20241202_55/173310545746333mf8_JPEG/6S5A9837-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20241202_11/1733106430749ovoeY_JPEG/37%C6%F2_%2820%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_185/1701910772479mexsh_JPEG/a_%28282%29.jpg", - "https://ldb-phinf.pstatic.net/20240118_211/17055625561294XsN2_JPEG/6S5A1803-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_156/17055625560847R7SL_JPEG/6S5A0934-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_179/17019107724184CCEU_JPEG/6S5A9906.jpg", - "https://ldb-phinf.pstatic.net/20231207_287/1701910772339cG7K0_JPEG/a_%28119%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_40/1701910675360dvC1i_JPEG/%C8%AD%C0%E5%BD%C7_%281%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_263/1701910675262pevKk_JPEG/%C8%AD%C0%E5%BD%C7_%284%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_73/1701910651864xPI48_JPEG/%BB%E7%B6%F7_%BC%A4%C7%AA.jpg", - "https://ldb-phinf.pstatic.net/20231207_265/17019204486629hzae_JPEG/6S5A0645.jpg", - "https://ldb-phinf.pstatic.net/20241202_147/1733103809000xsMrG_JPEG/KakaoTalk_20241015_154532027_01.jpg", - "https://ldb-phinf.pstatic.net/20241202_77/1733103809037HSO4S_JPEG/KakaoTalk_20241015_154532027_02.jpg", - "https://ldb-phinf.pstatic.net/20241202_233/1733103809020IMEdL_JPEG/KakaoTalk_20241015_154532027_06.jpg", - "https://ldb-phinf.pstatic.net/20241202_53/1733103808802Wui9x_JPEG/KakaoTalk_20241015_154532027_04.jpg", - "https://ldb-phinf.pstatic.net/20241202_230/1733103808998dOq0b_JPEG/KakaoTalk_20241015_154532027_15.jpg", - "https://ldb-phinf.pstatic.net/20241202_122/1733103808509lOt9x_JPEG/KakaoTalk_20241015_154536888_13.jpg", - "https://ldb-phinf.pstatic.net/20241202_246/1733103809045RdnEP_JPEG/KakaoTalk_20241015_154536888_11.jpg", - "https://ldb-phinf.pstatic.net/20241202_287/1733103808656oB1xz_JPEG/KakaoTalk_20241015_154536888_06.jpg", - "https://ldb-phinf.pstatic.net/20241202_222/1733103808508hkf5K_JPEG/KakaoTalk_20241015_154536888_08.jpg", - "https://ldb-phinf.pstatic.net/20241202_229/1733103808818KGAps_JPEG/KakaoTalk_20241015_154536888_02.jpg", - "https://ldb-phinf.pstatic.net/20241202_12/1733103808751cVAsT_JPEG/KakaoTalk_20241015_154536888_03.jpg", - "https://ldb-phinf.pstatic.net/20240909_261/1725865224473Uo7V9_JPEG/6S5A9371-%C6%ED%C1%FD-%C6%ED%C1%FD-2.jpg", - "https://ldb-phinf.pstatic.net/20240909_22/1725865224495AL798_JPEG/6S5A9557-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_177/1725865224462eX1Pi_JPEG/DJI_0149-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_165/1725865224480S7c1j_JPEG/6S5A9468-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_85/1725865224421CNRrk_JPEG/DJI_0155.jpg", - "https://ldb-phinf.pstatic.net/20240909_62/1725865224361fP2d2_JPEG/6S5A9434.jpg", - "https://ldb-phinf.pstatic.net/20240909_155/1725865224363Xxt8y_JPEG/6S5A9431-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240909_13/1725865224457BGLGs_JPEG/6S5A9456.jpg", - "https://ldb-phinf.pstatic.net/20240603_162/1717383527882Vnrsk_JPEG/6S5A6786.jpg", - "https://ldb-phinf.pstatic.net/20240603_256/1717383527892WXOKA_JPEG/6S5A6896.jpg", - "https://ldb-phinf.pstatic.net/20240603_130/1717383527800oHSKA_JPEG/6S5A6904.jpg", - "https://ldb-phinf.pstatic.net/20240603_118/17173835277794IXlt_JPEG/6S5A6946.jpg", - "https://ldb-phinf.pstatic.net/20240603_257/1717383527822ITvHM_JPEG/6S5A6973.jpg", - "https://ldb-phinf.pstatic.net/20240603_170/1717383527880sTdFE_JPEG/DJI_0039-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_10/1717383527863CVLJ2_JPEG/DJI_0087-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_94/1717383527921sDeDB_JPEG/DJI_0091-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231206_81/1701833426718D5Qwk_JPEG/b_%28119%29-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_153/17055625561274LAs5_JPEG/6S5A1460-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240118_8/1705562556139zGkjb_JPEG/6S5A1780.jpg", - "https://ldb-phinf.pstatic.net/20240118_57/1705562556129IR40O_JPEG/6S5A1199.jpg", - "https://ldb-phinf.pstatic.net/20240118_260/1705562556111cA7PG_JPEG/6S5A1927-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20231207_183/1701910720221oI66j_JPEG/%B9%D9%BA%A3%C5%A52.jpg", - "https://ldb-phinf.pstatic.net/20231207_247/1701910720113MBgKD_JPEG/%B9%D9%BA%A3%C5%A5_%282%29.jpg", - "https://ldb-phinf.pstatic.net/20231207_227/1701910720098FE7Si_JPEG/6S5A0001.jpg", - "https://ldb-phinf.pstatic.net/20231206_24/1701833408064fgoVj_JPEG/b_%2874%29.jpg", - "https://ldb-phinf.pstatic.net/20240603_100/1717383527883LWVq4_JPEG/6S5A6022-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_169/17173835278856AEUV_JPEG/6S5A5974-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_155/1717383527937gxiyc_JPEG/6S5A5988.jpg", - "https://ldb-phinf.pstatic.net/20231206_160/170183333003287LrV_JPEG/6S5A0243-%C6%ED%C1%FD.jpg", - "https://ldb-phinf.pstatic.net/20240603_217/1717383528190t41X5_JPEG/6S5A6027.jpg", - "https://ldb-phinf.pstatic.net/20240603_142/1717383527892jHtgI_JPEG/6S5A6643.jpg", - "https://ldb-phinf.pstatic.net/20240603_251/1717383527948jTN2a_JPEG/6S5A6125.jpg", - "https://ldb-phinf.pstatic.net/20240603_189/1717383527880wu4Bv_JPEG/6S5A6326.jpg", - "https://ldb-phinf.pstatic.net/20240603_14/1717383527794qCuuu_JPEG/6S5A6337.jpg", - "https://ldb-phinf.pstatic.net/20240603_220/1717383528017rKdOw_JPEG/6S5A6773.jpg" - ], - "image_count": 119, - "m_id": 1, - "processed_info": { - "customer_name": "Fullstay StayPet Hongcheon", - "region": "", - "detail_region_info": "5-2 Dapyeonbat-gil, Hwachon-myeon, Hongcheon-gun, Gangwon-do, Korea" - }, - "marketing_analysis": { - "brand_identity": { - "location_feature_analysis": "Located in the nature-rich Hwachon-myeon area of Hongcheon, Gangwon-do, this property offers the ideal setting for a 'quiet forest retreat' away from urban noise. Its proximity to the Seoul metropolitan area makes it perfect for weekend short-break getaways.", - "concept_scalability": "The 'StayPet' concept extends beyond simple pet-friendly accommodation to include pet amenities, pet photo zones, and pet wellness experiences (walking trails/care services), enabling a comprehensive packaged experience throughout the entire stay." - }, - "market_positioning": { - "category_definition": "Private Pet-Friendly Healing Stay in Nature", - "core_value": "A private retreat where you and your pet can relax without worry" - }, - "target_persona": [ - { - "persona": "Weekend Pet-cation Couples (with 1 dog) – Millennials seeking a reset trip for two + one furry friend in peaceful nature", - "age": { - "min_age": 27, - "max_age": 39 - }, - "favor_target": [ - "Pet-friendly accommodation", - "Nature views / great walking trails", - "Clean bedding and odor management", - "Private space configuration", - "Aesthetic mood for great photos" - ], - "decision_trigger": "Confidence in pet-friendly + private relaxation (verified through reviews and facility info)" - }, - { - "persona": "Urban Escape Solo/Duo Healers – Working professionals recharging with quiet rest and reading in nature", - "age": { - "min_age": 29, - "max_age": 45 - }, - "favor_target": [ - "Low-noise location", - "Nature views", - "Comfortable beds / relaxation lounge", - "Ambient night lighting", - "Simple check-in / easy access" - ], - "decision_trigger": "Guaranteed 'quietness' and 'nature immersion' through location and atmosphere" - }, - { - "persona": "Family Pet Owners – Families in their 30s-40s creating memories with their pets in a safe, comfortable stay", - "age": { - "min_age": 33, - "max_age": 49 - }, - "favor_target": [ - "Pet safety features (non-slip floors / fencing)", - "Spacious relaxation areas", - "Family activities like BBQ", - "Parking / travel convenience", - "Hygiene / cleanliness assurance" - ], - "decision_trigger": "Spacious enough for families + reliable pet-friendly policies" - } - ], - "selling_points": [ - { - "english_category": "PET FRIENDLY", - "korean_category": "Pet-Friendly", - "description": "A complete retreat with your beloved pet", - "score": 95 - }, - { - "english_category": "HEALING", - "korean_category": "Healing", - "description": "A reset stay in Hongcheon's natural surroundings", - "score": 90 - }, - { - "english_category": "PRIVACY", - "korean_category": "Privacy", - "description": "A private retreat — relax without a care", - "score": 88 - }, - { - "english_category": "SHORT GETAWAY", - "korean_category": "Short Getaway", - "description": "A quick weekend escape to Hongcheon", - "score": 82 - }, - { - "english_category": "NIGHT MOOD", - "korean_category": "Night Mood", - "description": "An aesthetic ambiance that shines at night", - "score": 78 - }, - { - "english_category": "BBQ PARTY", - "korean_category": "BBQ Party", - "description": "A BBQ feast surrounded by nature", - "score": 75 - }, - { - "english_category": "PHOTO SPOT", - "korean_category": "Photo Spot", - "description": "The perfect spot for unforgettable pet photos", - "score": 73 - } - ], - "target_keywords": [ - "Hongcheon pet-friendly stay", - "Gangwon-do pet pension", - "StayPet", - "Pet-cation", - "Travel with pets", - "Hongcheon aesthetic stay", - "Gangwon healing retreat", - "Forest view accommodation", - "Weekend trip recommendation", - "Private stay" - ] - } -} diff --git a/src/components/BusinessNameInputModal.tsx b/src/components/BusinessNameInputModal.tsx index 2550383..804c585 100644 --- a/src/components/BusinessNameInputModal.tsx +++ b/src/components/BusinessNameInputModal.tsx @@ -60,6 +60,7 @@ const BusinessNameInputModal: React.FC = ({ onClose {t('landing.hero.manualModalTitle')} +

{t('landing.hero.manualModalSubtitle')}

@@ -113,7 +114,7 @@ const BusinessNameInputModal: React.FC = ({ onClose onClick={handleSubmit} disabled={!isValid} > - {t('landing.hero.analyzeButton')} + {t('landing.hero.manualAnalyzeButton')}
diff --git a/src/components/SearchInputForm.tsx b/src/components/SearchInputForm.tsx index e616416..7c07e6c 100644 --- a/src/components/SearchInputForm.tsx +++ b/src/components/SearchInputForm.tsx @@ -36,8 +36,7 @@ const SearchInputForm: React.FC = ({ }) => { const { t } = useTranslation(); const [inputValue, setInputValue] = useState(''); - const [searchType, setSearchType] = useState('name'); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [searchType] = useState('name'); const [isFocused, setIsFocused] = useState(false); const [isManualModalOpen, setIsManualModalOpen] = useState(false); const [localError, setLocalError] = useState(''); @@ -47,16 +46,12 @@ const SearchInputForm: React.FC = ({ const [selectedItem, setSelectedItem] = useState(null); const [highlightedIndex, setHighlightedIndex] = useState(-1); - const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory(searchType === 'manual' ? 'name' : searchType); + const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory('name'); const debounceRef = useRef(null); - const dropdownRef = useRef(null); const autocompleteRef = useRef(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { - setIsDropdownOpen(false); - } if (autocompleteRef.current && !autocompleteRef.current.contains(event.target as Node)) { setShowAutocomplete(false); } @@ -65,19 +60,8 @@ const SearchInputForm: React.FC = ({ return () => document.removeEventListener('mousedown', handleClickOutside); }, []); - const searchTypeOptions = [ - { value: 'url' as SearchType, label: 'URL' }, - { value: 'name' as SearchType, label: t('landing.hero.searchTypeBusinessName') }, - ]; - - const getPlaceholder = () => - searchType === 'url' ? 'https://naver.me/abcdef' : t('landing.hero.placeholderBusinessName'); - - const getGuideText = () => - searchType === 'url' ? t('landing.hero.guideUrl') : t('landing.hero.guideBusinessName'); - const handleAutocompleteSearch = useCallback(async (query: string) => { - if (!query.trim() || searchType !== 'name') { + if (!query.trim()) { setAutocompleteResults([]); setShowAutocomplete(false); return; @@ -93,7 +77,7 @@ const SearchInputForm: React.FC = ({ } finally { setIsAutocompleteLoading(false); } - }, [searchType]); + }, []); const handleSelectAutocomplete = (item: AccommodationSearchItem) => { setInputValue(item.title.replace(/<[^>]*>/g, '')); @@ -133,18 +117,20 @@ const SearchInputForm: React.FC = ({ }; const handleStart = () => { - if (!inputValue.trim()) { - setLocalError(searchType === 'url' ? t('landing.hero.errorUrlRequired') : t('landing.hero.errorNameRequired')); + const trimmed = inputValue.trim(); + if (!trimmed) { + setLocalError(t('landing.hero.errorInputRequired')); return; } - if (searchType === 'url' && !isValidUrl(inputValue.trim())) { - setLocalError(t('landing.hero.errorInvalidUrl')); + if (isValidUrl(trimmed)) { + setLocalError(''); + onAnalyze?.(trimmed, 'url'); return; } setLocalError(''); - if (searchType === 'name' && selectedItem && onAutocomplete) { + if (selectedItem && onAutocomplete) { onAutocomplete({ address: selectedItem.address, roadAddress: selectedItem.roadAddress, @@ -168,44 +154,14 @@ const SearchInputForm: React.FC = ({ return (
- {/* 드롭다운 */} -
- - {isDropdownOpen && ( -
- {searchTypeOptions.map((option) => ( - - ))} -
- )} -
+ {/* 유형 라벨 */} + {/*
+
+ + {t('landing.hero.searchTypeLabel')} + +
+
*/} {/* 입력 필드 */}
@@ -213,39 +169,28 @@ const SearchInputForm: React.FC = ({ type="text" value={inputValue} onChange={(e) => { - let value = e.target.value; - if (searchType === 'url') { - const urlMatch = value.match(/https?:\/\/\S+/); - if (urlMatch && urlMatch[0] !== value) value = urlMatch[0]; - } + const value = e.target.value; setInputValue(value); setSelectedItem(null); setHighlightedIndex(-1); hideOnInput(value); if (localError) setLocalError(''); - if (searchType === 'name') { - if (debounceRef.current) clearTimeout(debounceRef.current); + if (debounceRef.current) clearTimeout(debounceRef.current); + if (isValidUrl(value)) { + setAutocompleteResults([]); + setShowAutocomplete(false); + } else { debounceRef.current = setTimeout(() => handleAutocompleteSearch(value), 300); } }} - onPaste={(e: React.ClipboardEvent) => { - if (searchType !== 'url') return; - const pasted = e.clipboardData.getData('text'); - const urlMatch = pasted.match(/https?:\/\/[^\s]+/); - if (urlMatch) { - e.preventDefault(); - setInputValue(urlMatch[0]); - if (localError) setLocalError(''); - } - }} onFocus={() => { setIsFocused(true); - if (searchType === 'name' && autocompleteResults.length > 0) setShowAutocomplete(true); + if (autocompleteResults.length > 0) setShowAutocomplete(true); openHistory(inputValue); }} onBlur={() => { setIsFocused(false); setTimeout(() => closeHistory(), 150); }} onKeyDown={handleKeyDown} - placeholder={getPlaceholder()} + placeholder={t('landing.hero.placeholderCombined')} className={`hero-input ${inputValue ? 'has-value' : ''}`} /> @@ -255,12 +200,8 @@ const SearchInputForm: React.FC = ({ items={filteredHistory} onSelect={(item) => { closeHistory(); - if (item.type === 'url') { - setSearchType('url'); - setInputValue(item.value); - } else { - setSearchType('name'); - setInputValue(item.value); + setInputValue(item.value); + if (item.type === 'name') { setSelectedItem({ title: item.value, address: item.address || '', roadAddress: item.roadAddress || '' }); } }} @@ -273,7 +214,7 @@ const SearchInputForm: React.FC = ({ )} {/* 자동완성 결과 */} - {showAutocomplete && searchType === 'name' && ( + {showAutocomplete && (
{isAutocompleteLoading ? (
{t('landing.hero.searching')}
@@ -313,7 +254,7 @@ const SearchInputForm: React.FC = ({ )}
- {getGuideText()} + {t('landing.hero.guideCombined')} {error &&

{error}

} @@ -321,9 +262,13 @@ const SearchInputForm: React.FC = ({ {t('landing.hero.analyzeButton')} - +
또는
+ +
e.key === 'Enter' && handleManualButtonClick()}> + {t('landing.hero.searchTypeManual')} +

{t('landing.hero.manualButtonDesc')}

+
{/* onManualButtonClick 미제공 시 모달을 내부에서 관리 */} {!onManualButtonClick && isManualModalOpen && ( diff --git a/src/components/Tutorial/tutorialSteps.ts b/src/components/Tutorial/tutorialSteps.ts index 0633fd7..1d25bad 100644 --- a/src/components/Tutorial/tutorialSteps.ts +++ b/src/components/Tutorial/tutorialSteps.ts @@ -46,15 +46,6 @@ export const tutorialSteps: TutorialStepDef[] = [ { key: TUTORIAL_KEYS.LANDING, hints: [ - { - targetSelector: '.hero-dropdown-trigger', - titleKey: 'tutorial.landing.dropdown.title', - descriptionKey: 'tutorial.landing.dropdown.desc', - position: 'top', - clickToAdvance: false, - noSpotlight: true, - variant: 'bubble', - }, { targetSelector: '.hero-input-wrapper', titleKey: 'tutorial.landing.field.title', @@ -65,10 +56,10 @@ export const tutorialSteps: TutorialStepDef[] = [ variant: 'bubble', }, { - targetSelector: '.hero-manual-button', + targetSelector: '.hero-manual-card-title', titleKey: 'tutorial.landing.manual.title', descriptionKey: 'tutorial.landing.manual.desc', - position: 'bottom', + position: 'top', clickToAdvance: false, noSpotlight: true, variant: 'bubble', diff --git a/src/components/WizardStepper.tsx b/src/components/WizardStepper.tsx new file mode 100644 index 0000000..6c4863e --- /dev/null +++ b/src/components/WizardStepper.tsx @@ -0,0 +1,53 @@ + +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +interface WizardStepperProps { + currentStep: number; // 0~3, matching wizardStep in GenerationFlow +} + +const WizardStepper: React.FC = ({ currentStep }) => { + const { t } = useTranslation(); + + const steps = [ + t('wizardSteps.brandAnalysis'), + t('wizardSteps.asset'), + t('wizardSteps.sound'), + t('wizardSteps.video'), + ]; + + return ( +
+ {steps.map((label, index) => { + const isDone = index < currentStep; + const isCurrent = index === currentStep; + const stateClass = isDone ? ' done' : isCurrent ? ' current' : ' pending'; + + return ( + + {/* 노드: 2rem 고정 너비. 라벨은 absolute로 노드 중심 아래에 붙음 */} +
+
+ {isDone ? ( + + + + ) : ( + {index + 1} + )} +
+ {label} +
+ + {/* 연결선: flex:1로 남은 공간을 균등하게 채움 */} + {index < steps.length - 1 && ( +
+ )} + + ); + })} +
+ ); +}; + +export default WizardStepper; diff --git a/src/index.tsx b/src/index.tsx index b070285..894893b 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './i18n'; +import './styles/index.css'; import App from './App'; declare global { diff --git a/src/locales/en.json b/src/locales/en.json index 7b3c09b..b399545 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,4 +1,10 @@ { + "wizardSteps": { + "brandAnalysis": "Analysis", + "asset": "Image", + "sound": "Sound", + "video": "Video" + }, "header": { "loginFailedAlert": "Failed to get login URL. Please try again.", "start": "Get Started", @@ -28,8 +34,7 @@ "finish": "Done", "landing": { "intro": { "title": "Welcome to ADO2 Tutorial", "desc": "We'll guide you through ADO2 step by step." }, - "dropdown": { "title": "Choose Search Type", "desc": "Select URL or business name from the dropdown." }, - "field": { "title": "Enter Search Term", "desc": "For URL, paste a Naver Maps share URL.\nFor business name, type the name and select from the list." }, + "field": { "title": "Enter Search Term", "desc": "Paste a Naver Maps share URL,\nor type a business name and select from the list." }, "manual": { "title": "Direct Input", "desc": "You can also enter the business name and address manually to start analysis." }, "button": { "title": "Start Brand Analysis", "desc": "Click the button to let AI start analyzing your brand." } }, @@ -42,12 +47,18 @@ "sound": { "genre": { "title": "Select Genre", "desc": "Pick a music genre that fits your brand.", "note": "Background music is coming soon." }, "language": { "title": "Select Language", "desc": "You can choose the language for the sound.\nWant to continue with Korean?" }, - "generate": { "title": "Generate Sound", "desc": "Click the button and AI will generate lyrics and music in your chosen genre and language." }, + "generate": { "title": "Generate Sound", "desc": "Click the button and AI will generate lyrics and music." }, "lyrics": { "title": "Lyrics Complete", "desc": "AI wrote lyrics in your selected language.\nCheck the generated lyrics." }, "lyricsWait": { "title": "Generating Music", "desc": "AI is composing music based on the lyrics.\nPlease wait a moment." }, "audioPlayer": { "title": "Preview the Music", "desc": "Music generation is complete.\nPress play to listen to the generated music." }, "video": { "title": "Generate Video", "desc": "Click the button to start generating your video." } }, + "completion": { + "contentInfo": { "title": "Content Info", "desc": "Check the title, genre, resolution, and lyrics of the generated content." }, + "generating": { "title": "Generating Video", "desc": "AI is creating your video.\nPlease wait a moment." }, + "completion": { "title": "Video Complete!", "desc": "Your video is ready. Want to take a look?" }, + "myInfo": { "title": "Connect Social Account", "desc": "To upload your video to YouTube, connect your social account in My Info. Click to go there." } + }, "myInfo": { "myInfo": { "title": "My Info", "desc": "In My Info, you can manage your social connections and view connected accounts." }, "connect": { "title": "Connect Now", "desc": "Click the YouTube connect button to go to the connection page.", "note": "Instagram connection is coming soon." }, @@ -60,12 +71,6 @@ "delete": { "title": "Delete", "desc": "Remove videos you no longer need." }, "upload": { "title": "Upload to Social Media", "desc": "Select a video and upload it to social media." } }, - "completion": { - "contentInfo": { "title": "Content Info", "desc": "Check the title, genre, resolution, and lyrics of the generated content." }, - "generating": { "title": "Generating Video", "desc": "AI is creating your video.\nPlease wait a moment." }, - "completion": { "title": "Video Complete!", "desc": "Your video is ready. Want to take a look?" }, - "myInfo": { "title": "Connect Social Account", "desc": "To upload your video to YouTube, connect your social account in My Info. Click to go there." } - }, "upload": { "seo": { "title": "Title & Description", "desc": "AI is generating the title and description for your video. Please wait a moment." }, "required": { "title": "Required Fields", "desc": "Fields marked with * are required.\nPlease check them before uploading." }, @@ -94,7 +99,7 @@ } }, "footer": { - "company":"O2O Inc.", + "company": "O2O Inc.", "businessNumber": "Business Registration No. : 620-87-00810 | CEO : Ahn Sungmin", "headquarters": "HQ : Unicorn Lab Daegu A05, 5F, 111 Oksan-ro, Buk-gu, Daegu, Korea", "researchCenter": "R&D : Rooms 504-505 (East), KT Pangyo Bldg, 32 Geumto-ro, Sujeong-gu, Seongnam-si, Gyeonggi-do, Korea", @@ -123,7 +128,7 @@ "privacyPrivate": "Private", "publishTimeLabel": "Publish Time", "publishNow": "Publish Now", - "publishSchedule": "Schedule (Coming Soon)", + "publishSchedule": "Schedule", "footerNote": "", "footerNoteLink": "", "cancel": "Cancel", @@ -137,7 +142,29 @@ "uploadFailed": "Upload failed.", "autoSeoTitle": "Auto-generating... (30–60 sec)", "autoSeoDescription": "Auto-generating... (30–60 sec)", - "autoSeoTags": "Auto-generating... (30–60 sec)" + "autoSeoTags": "Auto-generating... (30–60 sec)", + "youtubeCallback": { + "connecting": "Connecting YouTube...", + "pleaseWait": "Please wait a moment.", + "failed": "Connection Failed", + "errorAuthCancelled": "Google authentication was cancelled or failed.", + "errorNoCode": "Authorization code was not received.", + "errorProcessing": "An error occurred while processing the YouTube connection." + }, + "connectError": { + "title": "{{platform}} Connection Failed", + "defaultError": "An unknown error occurred.", + "detail": "Please try again. If the problem persists, contact customer support.", + "retry": "Try Again" + }, + "connectSuccess": { + "title": "{{name}} Connected", + "messageWithChannel": "{{platform}} account has been successfully connected.", + "messageWithoutChannel": "Account has been successfully connected.", + "verified": "Verified", + "countdown": "Redirecting in {{count}} seconds...", + "goNow": "Go Now" + } }, "upload": { "title": "YouTube Upload", @@ -154,25 +181,24 @@ "confirm": "OK", "close": "Close", "doNotClose": "Upload is in progress. Do not close this window.", - "goToCalendar": "View in Calendar", - "scheduleConflict": "Schedule adjusted to {{time}} due to a conflict." }, + "goToCalendar": "View in Calendar", + "scheduleConflict": "Schedule adjusted to {{time}} due to a conflict." + }, "landing": { "hero": { - "searchTypeBusinessName": "Business Name", - "placeholderBusinessName": "Enter a business name", - "guideUrl": "Search for a place on Naver Maps, tap Share,\nthen paste the URL here.", - "guideBusinessName": "Search by business name to retrieve information.", - "errorUrlRequired": "Please enter a URL.", - "errorNameRequired": "Please enter a business name.", - "errorInvalidUrl": "Invalid URL format. (e.g., https://example.com)", + "searchTypeLabel": "Business Name | URL", + "placeholderCombined": "Enter a business name or Naver Maps/Place URL", + "guideCombined": "Enter a business name, or paste a Naver Maps share URL (naver.me/...) to automatically retrieve information.", + "errorInputRequired": "Please enter a business name or URL.", + "errorInvalidUrl": "Invalid URL format. (e.g., https://naver.me/abcdef)", "analyzeButton": "Brand Analysis", "scrollMore": "Scroll to see more", - "testDataLoading": "Loading...", - "testData": "Test Data", - "testDataLoadFailed": "Failed to load test data.", "searching": "Searching...", - "searchTypeManual": "Manual Input", - "manualModalTitle": "Enter Business Info", + "searchTypeManual": "Not on Naver? Enter manually", + "manualButtonDesc": "Even businesses not listed on Naver Maps/Place can get\na full brand analysis, lyrics, music, and video\njust by entering the name, region, and address.", + "manualModalTitle": "Enter Business Info Directly", + "manualModalSubtitle": "Even businesses not on Naver can start brand analysis by filling in the details below.", + "manualAnalyzeButton": "Get Started", "manualLabelName": "Business Name", "manualLabelAddress": "Address", "manualLabelRegion": "Region", @@ -210,8 +236,6 @@ "guideBusinessName": "Search by business name to retrieve information.", "searchButton": "Search", "searching": "Searching...", - "testDataLoading": "Loading...", - "testData": "Test Data", "searchTypeManual": "Manual Input", "errorSelectFromList": "Please select a business from the list.", "errorUrlRequired": "Please enter a URL.", @@ -268,8 +292,8 @@ "videoGenerating": "Generating Video", "noBusinessInfo": "No business information. Please try again.", "noImageUploadInfo": "No image upload information. Please go back to the previous step and try again.", - "generatingLyrics": "Generating lyrics...\n(30–60 sec)", - "generatingSong": "Generating music...\n(1–2 min)", + "generatingLyrics": "Generating lyrics... (30–60 sec)", + "generatingSong": "Generating music... (1–2 min)", "songQueued": "Song generation queued...", "retryMessage": "Regenerating due to timeout... ({{count}}/{{max}})", "lyricGenerationFailed": "Lyrics generation request failed.", diff --git a/src/locales/ko.json b/src/locales/ko.json index cde52e4..a205e79 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -1,4 +1,10 @@ { + "wizardSteps": { + "brandAnalysis": "분석", + "asset": "이미지", + "sound": "사운드", + "video": "영상" + }, "header": { "loginFailedAlert": "로그인 URL을 가져오는데 실패했습니다. 다시 시도해주세요.", "start": "시작하기", @@ -28,8 +34,7 @@ "finish": "완료", "landing": { "intro": { "title": "ADO2 튜토리얼 시작", "desc": "ADO2 사용 방법을 단계별로 안내해 드릴게요." }, - "dropdown": { "title": "검색 방식 선택", "desc": "드롭다운에서 URL 또는 업체명 중 원하는 방식을 선택하세요." }, - "field": { "title": "입력하기", "desc": "URL 방식이라면 네이버 지도 공유 URL,\n업체명 방식이라면 업체명을 입력하고 목록에서 선택하세요." }, + "field": { "title": "입력하기", "desc": "네이버 지도 공유 URL을 붙여넣거나,\n업체명을 입력하면 자동으로 목록에서 선택할 수 있어요." }, "manual": { "title": "직접 입력", "desc": "업체명과 주소를 직접 입력해서 분석을 시작할 수도 있어요." }, "button": { "title": "브랜드 분석 시작", "desc": "버튼을 누르면 AI가 브랜드를 분석하기 시작해요." } }, @@ -137,7 +142,29 @@ "uploadFailed": "업로드에 실패했습니다.", "autoSeoTitle": "자동으로 작성중입니다. (30~60초 소요)", "autoSeoDescription": "자동으로 작성중입니다. (30~60초 소요)", - "autoSeoTags": "자동으로 작성중입니다. (30~60초 소요)" + "autoSeoTags": "자동으로 작성중입니다. (30~60초 소요)", + "youtubeCallback": { + "connecting": "YouTube 연결 중...", + "pleaseWait": "잠시만 기다려주세요.", + "failed": "연결 실패", + "errorAuthCancelled": "Google 인증이 취소되었거나 실패했습니다.", + "errorNoCode": "인증 코드를 받지 못했습니다.", + "errorProcessing": "YouTube 연결 처리 중 오류가 발생했습니다." + }, + "connectError": { + "title": "{{platform}} 연결 실패", + "defaultError": "알 수 없는 오류가 발생했습니다.", + "detail": "다시 시도해주세요. 문제가 지속되면 고객 지원에 문의해주세요.", + "retry": "다시 시도" + }, + "connectSuccess": { + "title": "{{name}} 연결 완료", + "messageWithChannel": "{{platform}} 계정이 성공적으로 연결되었습니다.", + "messageWithoutChannel": "계정이 성공적으로 연결되었습니다.", + "verified": "인증됨", + "countdown": "{{count}}초 후 자동으로 이동합니다...", + "goNow": "지금 이동" + } }, "upload": { "title": "YouTube 업로드", @@ -158,21 +185,19 @@ "scheduleConflict": "예약 시간이 충돌하여 {{time}}으로 조정되었습니다." }, "landing": { "hero": { - "searchTypeBusinessName": "업체명", - "placeholderBusinessName": "업체명을 입력하세요.", - "guideUrl": "네이버지도에서 장소를 검색하고 공유 선택, \n나오는 URL을 붙여 넣어 주세요.", - "guideBusinessName": "업체명으로 검색하여 정보를 가져옵니다.", - "errorUrlRequired": "URL을 입력해주세요.", - "errorNameRequired": "업체명을 입력해주세요.", - "errorInvalidUrl": "올바른 URL 형식이 아닙니다. (예: https://example.com)", + "searchTypeLabel": "업체명 | URL", + "placeholderCombined": "업체명 또는 URL을 입력하세요.", + "guideCombined": "네이버 지도 공유 URL을 붙여넣거나,\n업체명을 입력하면 자동으로 정보를 가져옵니다.", + "errorInputRequired": "업체명 또는 URL을 입력해주세요.", + "errorInvalidUrl": "올바른 URL 형식이 아닙니다. (예: https://naver.me/abcdef)", "analyzeButton": "브랜드 분석", "scrollMore": "스크롤하여 더 보기", - "testDataLoading": "로딩 중...", - "testData": "테스트 데이터", - "testDataLoadFailed": "테스트 데이터를 불러오는데 실패했습니다.", "searching": "검색 중...", - "searchTypeManual": "직접 입력", - "manualModalTitle": "업체 정보 입력", + "searchTypeManual": "네이버에 없는 업체인가요? 직접 입력하기", + "manualButtonDesc": "네이버 지도/플레이스에 등록되지 않은 업체도\n업체명·지역·상세주소만 입력하면\n가사·음악·영상 제작까지 가능합니다.", + "manualModalTitle": "업체 정보 직접 입력", + "manualModalSubtitle": "네이버에 등록되지 않은 업체도 아래 정보만 입력하면 가사·음악·영상 제작까지 할 수 있어요.", + "manualAnalyzeButton": "시작하기", "manualLabelName": "업체명", "manualLabelAddress": "주소", "manualLabelRegion": "지역", @@ -210,8 +235,6 @@ "guideBusinessName": "업체명으로 검색하여 정보를 가져옵니다.", "searchButton": "검색하기", "searching": "검색 중...", - "testDataLoading": "로딩 중...", - "testData": "테스트 데이터", "searchTypeManual": "직접 입력", "errorSelectFromList": "목록에서 업체를 선택해 주세요.", "errorUrlRequired": "URL을 입력해주세요.", diff --git a/src/pages/Dashboard/AssetManagementSection.tsx b/src/pages/Dashboard/AssetManagementSection.tsx deleted file mode 100755 index f18aa3c..0000000 --- a/src/pages/Dashboard/AssetManagementSection.tsx +++ /dev/null @@ -1,21 +0,0 @@ - -import React from 'react'; -import Sidebar from '../../components/Sidebar'; -import AssetManagementContent from './AssetManagementContent'; - -interface AssetManagementSectionProps { - onBack: () => void; -} - -const AssetManagementSection: React.FC = ({ onBack }) => { - return ( -
- -
- {}} /> -
-
- ); -}; - -export default AssetManagementSection; diff --git a/src/pages/Dashboard/CompletionContent.tsx b/src/pages/Dashboard/CompletionContent.tsx index 01d2467..250b310 100755 --- a/src/pages/Dashboard/CompletionContent.tsx +++ b/src/pages/Dashboard/CompletionContent.tsx @@ -409,14 +409,14 @@ const CompletionContent: React.FC = ({ return (
-
+ {/*
-
+
*/}

{t('completion.contentComplete')}

diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx index 2c5dc23..72ff05c 100755 --- a/src/pages/Dashboard/GenerationFlow.tsx +++ b/src/pages/Dashboard/GenerationFlow.tsx @@ -19,6 +19,7 @@ import { crawlUrl, autocomplete, marketingAnalysis, AutocompleteRequest, getUser import { useTutorial } from '../../components/Tutorial/useTutorial'; import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps'; import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay'; +import WizardStepper from '../../components/WizardStepper'; const WIZARD_STEP_KEY = 'castad_wizard_step'; const ACTIVE_ITEM_KEY = 'castad_active_item'; @@ -288,19 +289,6 @@ const GenerationFlow: React.FC = ({ } }; - // 테스트용 랜덤 m_id 생성 (99 ~ 300) - const generateRandomMId = (): number => { - return Math.floor(Math.random() * (300 - 99 + 1)) + 99; - }; - - // 테스트 데이터로 브랜드 분석 페이지 이동 - const handleTestData = (data: CrawlingResponse) => { - const tagged = { ...data, m_id: generateRandomMId(), _isTestData: true }; - setAnalysisData(tagged); - localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(tagged)); - goToWizardStep(0); // 브랜드 분석 결과로 - }; - // 언어 변경 시 테스트 데이터 다시 로드 useEffect(() => { const saved = localStorage.getItem(ANALYSIS_DATA_KEY); @@ -439,7 +427,6 @@ const GenerationFlow: React.FC = ({ onAnalyze={handleStartAnalysis} onAutocomplete={handleAutocomplete} onManualInput={handleManualInput} - onTestData={handleTestData} error={analysisError} /> ); @@ -496,6 +483,7 @@ const GenerationFlow: React.FC = ({ businessInfo={currentBusinessInfo} imageTaskId={imageTaskId} mId={analysisData?.m_id ?? 0} + bizType={analysisData?.biz_type ?? 'place'} videoGenerationStatus={videoGenerationStatus} videoGenerationProgress={videoGenerationProgress} onGoToPayment={handleGoToPayment} @@ -551,12 +539,22 @@ const GenerationFlow: React.FC = ({ case '내 정보': return ; case '새 프로젝트 만들기': - // 브랜드 분석(0)과 로딩(-1)은 전체 화면으로 표시 - if (wizardStep === 0 || wizardStep === -1) { + // 로딩(-1), URL 입력(-2)은 스텝퍼 없이 전체 화면으로 표시 + if (wizardStep === -1 || wizardStep === -2) { return renderWizardContent(); } + // 브랜드 분석(0)은 전체 화면 스크롤이지만 스텝퍼는 표시 + if (wizardStep === 0) { + return ( + <> + + {renderWizardContent()} + + ); + } return (
+ {renderWizardContent()}
); diff --git a/src/pages/Dashboard/SoundStudioContent.tsx b/src/pages/Dashboard/SoundStudioContent.tsx index 55e5319..616cf1f 100755 --- a/src/pages/Dashboard/SoundStudioContent.tsx +++ b/src/pages/Dashboard/SoundStudioContent.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { generateLyric, waitForLyricComplete, generateSong, waitForSongComplete } from '../../utils/api'; +import { generateLyric, waitForLyricComplete, generateSong, waitForSongComplete, downloadSong } from '../../utils/api'; import { LANGUAGE_MAP } from '../../types/api'; interface BusinessInfo { @@ -16,6 +16,7 @@ interface SoundStudioContentProps { businessInfo?: BusinessInfo; imageTaskId: string | null; mId: number; + bizType?: string; onStatusChange?: (status: string) => void; videoGenerationStatus?: 'idle' | 'generating' | 'complete' | 'error'; videoGenerationProgress?: number; @@ -26,6 +27,10 @@ type GenerationStatus = 'idle' | 'generating_lyric' | 'generating_song' | 'polli const MAX_RETRY_COUNT = 3; +// 생성 완료된 곡 상태를 새로고침 후에도 복원하기 위한 키 +// GenerationFlow의 clearAllProjectStorage가 이 키를 포함해 정리함 +const SONG_GENERATION_KEY = 'castad_song_generation'; + const sanitizeError = (message: string, fallback: string): string => { if ( message.includes('Traceback') || @@ -54,6 +59,7 @@ const SoundStudioContent: React.FC = ({ businessInfo, imageTaskId, mId, + bizType = 'place', onStatusChange, videoGenerationStatus = 'idle', videoGenerationProgress = 0, @@ -89,6 +95,41 @@ const SoundStudioContent: React.FC = ({ localStorage.setItem('castad_song_completion', JSON.stringify(completionData)); }; + // 새로고침 후 생성 완료된 곡 상태 복원 + useEffect(() => { + const saved = localStorage.getItem(SONG_GENERATION_KEY); + if (!saved) return; + + try { + const parsed = JSON.parse(saved); + if (parsed.status !== 'complete' || !parsed.audioUrl || !parsed.songTaskId) return; + + // 저장된 URL로 일단 복원 후, 서버에서 최신 URL 재조회 시도 + setSongTaskId(parsed.songTaskId); + setAudioUrl(parsed.audioUrl); + setLyrics(parsed.lyrics ?? ''); + setStatus('complete'); + + // downloadSong으로 최신 URL을 재조회해 갱신 (만료 방지) + downloadSong(parsed.songTaskId) + .then((res) => { + if (res.success && res.song_result_url) { + setAudioUrl(res.song_result_url); + // 저장값도 갱신 + localStorage.setItem(SONG_GENERATION_KEY, JSON.stringify({ + ...parsed, + audioUrl: res.song_result_url, + })); + } + }) + .catch(() => { + // 재조회 실패 시 저장된 URL 그대로 사용 + }); + } catch { + // 파싱 실패 시 무시 + } + }, []); // 마운트 1회만 실행 + // Close language dropdown when clicking outside // Auto-navigate to next page when video generation is complete useEffect(() => { @@ -128,6 +169,18 @@ const SoundStudioContent: React.FC = ({ setStatusMessage(''); setRetryCount(0); + // 새로고침 후에도 복원할 수 있도록 완료된 곡 상태를 저장 + try { + localStorage.setItem(SONG_GENERATION_KEY, JSON.stringify({ + audioUrl: statusResponse.song_result_url, + songTaskId: taskId, + lyrics: currentLyrics, + status: 'complete', + })); + } catch { + // localStorage 쓰기 실패는 무시 + } + } catch (error) { console.error('Polling failed:', error); @@ -286,6 +339,9 @@ const SoundStudioContent: React.FC = ({ return; } + // 새 곡 생성 시작 — 이전에 저장된 완료 곡 제거 + localStorage.removeItem(SONG_GENERATION_KEY); + setStatus('generating_lyric'); setErrorMessage(null); setStatusMessage(t('soundStudio.generatingLyrics')); @@ -306,6 +362,7 @@ const SoundStudioContent: React.FC = ({ m_id: mId, region: businessInfo.region, task_id: imageTaskId, + biz_type: bizType, orientation, ...(isInstrumental && { instrumental: true }), }); diff --git a/src/pages/Dashboard/UrlInputContent.tsx b/src/pages/Dashboard/UrlInputContent.tsx index c84f547..2ddcdea 100644 --- a/src/pages/Dashboard/UrlInputContent.tsx +++ b/src/pages/Dashboard/UrlInputContent.tsx @@ -1,43 +1,18 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; +import React from 'react'; import { AutocompleteRequest } from '../../utils/api'; -import { CrawlingResponse } from '../../types/api'; import SearchInputForm, { SearchType } from '../../components/SearchInputForm'; -// 환경변수에서 테스트 모드 확인 -const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true'; - interface UrlInputContentProps { onAnalyze: (value: string, type?: SearchType) => void; onAutocomplete?: (data: AutocompleteRequest) => void; onManualInput?: (businessName: string, address: string) => void; - onTestData?: (data: CrawlingResponse) => void; error: string | null; } -const UrlInputContent: React.FC = ({ onAnalyze, onAutocomplete, onManualInput, onTestData, error }) => { - const { t, i18n } = useTranslation(); - const [isLoadingTest, setIsLoadingTest] = useState(false); - - const handleTestData = async () => { - if (!onTestData) return; - setIsLoadingTest(true); - try { - const jsonFile = i18n.language === 'en' ? '/example_analysis_en.json' : '/example_analysis.json'; - const response = await fetch(jsonFile); - const data: CrawlingResponse = await response.json(); - onTestData(data); - } catch (err) { - console.error('테스트 데이터 로드 실패:', err); - } finally { - setIsLoadingTest(false); - } - }; - +const UrlInputContent: React.FC = ({ onAnalyze, onAutocomplete, onManualInput, error }) => { return (
- {/* 로고 */}
ADO2
@@ -49,17 +24,6 @@ const UrlInputContent: React.FC = ({ onAnalyze, onAutocomp error={error} />
- - {/* 테스트 버튼 (VITE_IS_TESTPAGE=true일 때만 표시) */} - {isTestPage && onTestData && ( - - )}
); }; diff --git a/src/pages/Landing/HeroSection.tsx b/src/pages/Landing/HeroSection.tsx index e2c9556..fc36817 100755 --- a/src/pages/Landing/HeroSection.tsx +++ b/src/pages/Landing/HeroSection.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { AutocompleteRequest, isLoggedIn } from '../../utils/api'; -import { CrawlingResponse } from '../../types/api'; import { useTutorial } from '../../components/Tutorial/useTutorial'; import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps'; import TutorialOverlay from '../../components/Tutorial/TutorialOverlay'; @@ -11,9 +10,6 @@ import LoginPromptModal from '../../components/LoginPromptModal'; import SearchInputForm from '../../components/SearchInputForm'; import { SearchType } from '../../components/SearchInputForm'; -// 환경변수에서 테스트 모드 확인 -const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true'; - // Orb configuration with movement zones to prevent overlap interface OrbConfig { id: string; @@ -40,18 +36,15 @@ interface HeroSectionProps { onAnalyze?: (value: string, type?: SearchType) => void; onAutocomplete?: (data: AutocompleteRequest) => void; onManualInput?: (businessName: string, address: string) => void; - onTestData?: (data: CrawlingResponse) => void; onNext?: () => void; error?: string | null; scrollProgress?: number; } -const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, onManualInput, onTestData, onNext, error: externalError, scrollProgress = 0 }) => { - const { t, i18n } = useTranslation(); +const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, onManualInput, onNext, error: externalError, scrollProgress = 0 }) => { + const { t } = useTranslation(); const [isManualModalOpen, setIsManualModalOpen] = useState(false); const [isLoginPromptOpen, setIsLoginPromptOpen] = useState(false); - const [testError, setTestError] = useState(''); - const [isLoadingTest, setIsLoadingTest] = useState(false); const orbRefs = useRef<(HTMLDivElement | null)[]>([]); const animationRefs = useRef([]); const tutorial = useTutorial(); @@ -66,22 +59,6 @@ const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, on } }, []); - // 테스트 데이터 로드 핸들러 - const handleTestData = async () => { - if (!onTestData) return; - setIsLoadingTest(true); - try { - const jsonFile = i18n.language === 'en' ? '/example_analysis_en.json' : '/example_analysis.json'; - const response = await fetch(jsonFile); - const data: CrawlingResponse = await response.json(); - onTestData(data); - } catch { - setTestError(t('landing.hero.testDataLoadFailed')); - } finally { - setIsLoadingTest(false); - } - }; - // Orb 랜덤 이동 애니메이션 useEffect(() => { const moveOrb = (orb: HTMLDivElement, index: number) => { @@ -179,7 +156,7 @@ const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, on setIsLoginPromptOpen(true); } }} - error={externalError || testError || null} + error={externalError || null} />
@@ -193,13 +170,6 @@ const HeroSection: React.FC = ({ onAnalyze, onAutocomplete, on
- {/* 테스트 버튼 */} - {isTestPage && onTestData && ( - - )} - {tutorial.isActive && !isManualModalOpen && ( { - // URL 파라미터 파싱 + const { t } = useTranslation(); + const searchParams = new URLSearchParams(window.location.search); const platform = searchParams.get('platform') || 'unknown'; - const errorMessage = searchParams.get('error') || '알 수 없는 오류가 발생했습니다.'; + const errorMessage = searchParams.get('error') || t('social.connectError.defaultError'); const platformName = platform === 'youtube' ? 'YouTube' : platform === 'instagram' ? 'Instagram' : @@ -25,19 +27,19 @@ const SocialConnectError: React.FC = () => {
-

{platformName} 연결 실패

+

{t('social.connectError.title', { platform: platformName })}

{errorMessage}

- 다시 시도해주세요. 문제가 지속되면 고객 지원에 문의해주세요. + {t('social.connectError.detail')}

diff --git a/src/pages/Social/SocialConnectSuccess.tsx b/src/pages/Social/SocialConnectSuccess.tsx index 737938f..ad54c32 100644 --- a/src/pages/Social/SocialConnectSuccess.tsx +++ b/src/pages/Social/SocialConnectSuccess.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; -// 연결된 소셜 계정 정보를 저장하는 localStorage 키 const SOCIAL_CONNECTED_KEY = 'castad_social_connected'; interface ConnectedSocialAccount { @@ -13,9 +13,9 @@ interface ConnectedSocialAccount { } const SocialConnectSuccess: React.FC = () => { + const { t } = useTranslation(); const [countdown, setCountdown] = useState(3); - // URL 파라미터 파싱 const searchParams = new URLSearchParams(window.location.search); const platform = searchParams.get('platform') || 'unknown'; const accountId = searchParams.get('account_id') || ''; @@ -26,7 +26,6 @@ const SocialConnectSuccess: React.FC = () => { platform === 'instagram' ? 'Instagram' : platform === 'facebook' ? 'Facebook' : platform; - // 연결된 계정 정보를 localStorage에 저장 useEffect(() => { if (platform && accountId) { const connectedAccount: ConnectedSocialAccount = { @@ -42,7 +41,6 @@ const SocialConnectSuccess: React.FC = () => { }, [platform, accountId, channelName, profileImage]); const navigateToHome = () => { - // URL을 루트로 변경하고 페이지 새로고침하여 generation_flow로 이동 window.location.href = '/'; }; @@ -64,7 +62,6 @@ const SocialConnectSuccess: React.FC = () => { return (
- {/* 프로필 이미지가 있으면 표시 */} {profileImage ? ( { )}

- {channelName || platformName} 연결 완료 + {t('social.connectSuccess.title', { name: channelName || platformName })}

- {channelName ? ( - <>{platformName} 계정이 성공적으로 연결되었습니다. - ) : ( - <>계정이 성공적으로 연결되었습니다. - )} + {channelName + ? t('social.connectSuccess.messageWithChannel', { platform: platformName }) + : t('social.connectSuccess.messageWithoutChannel')}

{channelName && ( @@ -98,20 +93,20 @@ const SocialConnectSuccess: React.FC = () => { - 인증됨 + {t('social.connectSuccess.verified')}
)}

- {countdown}초 후 자동으로 이동합니다... + {t('social.connectSuccess.countdown', { count: countdown })}

diff --git a/src/pages/Social/YouTubeOAuthCallback.tsx b/src/pages/Social/YouTubeOAuthCallback.tsx index 8c266c8..f35ab6c 100644 --- a/src/pages/Social/YouTubeOAuthCallback.tsx +++ b/src/pages/Social/YouTubeOAuthCallback.tsx @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44'; const YouTubeOAuthCallback: React.FC = () => { + const { t } = useTranslation(); const [status, setStatus] = useState<'processing' | 'error'>('processing'); const [errorMessage, setErrorMessage] = useState(''); @@ -18,7 +20,7 @@ const YouTubeOAuthCallback: React.FC = () => { if (error) { console.error('[YouTube OAuth] Error from Google:', error); setStatus('error'); - setErrorMessage('Google 인증이 취소되었거나 실패했습니다.'); + setErrorMessage(t('social.youtubeCallback.errorAuthCancelled')); setTimeout(() => { window.location.href = '/social/connect/error?platform=youtube&error=' + encodeURIComponent(error); }, 1500); @@ -28,7 +30,7 @@ const YouTubeOAuthCallback: React.FC = () => { if (!code) { console.error('[YouTube OAuth] No code received'); setStatus('error'); - setErrorMessage('인증 코드를 받지 못했습니다.'); + setErrorMessage(t('social.youtubeCallback.errorNoCode')); setTimeout(() => { window.location.href = '/social/connect/error?platform=youtube&error=no_code'; }, 1500); @@ -46,7 +48,7 @@ const YouTubeOAuthCallback: React.FC = () => { } catch (err) { console.error('[YouTube OAuth] Failed to process callback:', err); setStatus('error'); - setErrorMessage('YouTube 연결 처리 중 오류가 발생했습니다.'); + setErrorMessage(t('social.youtubeCallback.errorProcessing')); setTimeout(() => { window.location.href = '/social/connect/error?platform=youtube&error=processing_failed'; }, 1500); @@ -66,8 +68,8 @@ const YouTubeOAuthCallback: React.FC = () => { -

YouTube 연결 중...

-

잠시만 기다려주세요.

+

{t('social.youtubeCallback.connecting')}

+

{t('social.youtubeCallback.pleaseWait')}

) : ( <> @@ -78,7 +80,7 @@ const YouTubeOAuthCallback: React.FC = () => { -

연결 실패

+

{t('social.youtubeCallback.failed')}

{errorMessage}

)} diff --git a/src/styles/base-components.css b/src/styles/base-components.css new file mode 100644 index 0000000..f4b5531 --- /dev/null +++ b/src/styles/base-components.css @@ -0,0 +1,947 @@ +/* ===================================================== + Layout Components + ===================================================== */ + +/* Landing Page Container - Free Scroll */ +.landing-container { + width: 100%; + height: 100dvh; + overflow-y: scroll; + overflow-x: hidden; + background-color: var(--color-bg-darker); +} + +.landing-section { + background: var(--Color-teal-800, #002224); + min-height: 100dvh; + width: 100%; +} + +/* Page Container */ +.page-container { + display: flex; + flex-direction: column; + height: 100%; + padding: var(--spacing-page); + overflow: hidden; + background-color: #002224; + position: relative; +} + +@media (min-width: 768px) { + .page-container { + padding: var(--spacing-page-md); + } +} + +/* Page Container - Full Height with Background */ +.page-container-full { + width: 100%; + min-height: 100dvh; + color: var(--color-text-white); + display: flex; + flex-direction: column; + padding: var(--spacing-page); + background-color: var(--color-bg-dark); +} + +@media (min-width: 768px) { + .page-container-full { + padding: var(--spacing-page-md); + } +} + +@media (min-width: 1024px) { + .page-container-full { + padding: 2.5rem; + } +} + +/* Wizard Page Container - 단계별 페이지 전환용 */ +.wizard-page-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background-color: #002224; + overflow-y: auto; +} + +/* Main Content Area */ +.main-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 1.5rem; + max-width: 72rem; + margin-left: auto; + margin-right: auto; + width: 100%; + min-height: 0; + overflow: hidden; +} + +@media (min-width: 1024px) { + .main-content { + flex-direction: row; + } +} + +/* Dashboard Layout */ +.dashboard-layout { + display: flex; + width: 100%; + min-height: 100dvh; + background-color: var(--color-bg-darker); + color: var(--color-text-white); +} + +.dashboard-content { + flex: 1; + min-height: 0; + position: relative; + overflow-y: auto; + padding-left: 0; +} + +/* ===================================================== + Card Components + ===================================================== */ + +/* Base Card */ +.card { + background-color: var(--color-bg-card); + border-radius: var(--radius-3xl); + padding: var(--spacing-page); + border: 1px solid var(--color-border-white-5); + box-shadow: var(--shadow-xl); +} + +@media (min-width: 768px) { + .card { + padding: var(--spacing-page-md); + } +} + +/* Card Variants */ +.card-flex { + display: flex; + flex-direction: column; +} + +.card-flex-1 { + flex: 1; +} + +.card-flex-2 { + flex: 2; +} + +.card-overflow-hidden { + overflow: hidden; +} + +/* Card Inner (Darker Background) */ +.card-inner { + background-color: rgba(18, 26, 29, 0.5); + border-radius: var(--radius-2xl); + border: 1px solid var(--color-border-white-5); + padding: 1rem; +} + +/* ===================================================== + Header Components + ===================================================== */ + +/* Page Header */ +.page-header { + text-align: center; + margin-bottom: 2rem; + flex-shrink: 0; +} + +/* Page Title */ +.page-title { + font-size: var(--text-3xl); + font-weight: 700; + margin-bottom: 0.5rem; + letter-spacing: -0.025em; +} + +@media (min-width: 768px) { + .page-title { + font-size: var(--text-4xl); + } +} + +/* Page Subtitle */ +.page-subtitle { + color: var(--color-text-gray-400); + font-size: var(--text-base); +} + +@media (min-width: 768px) { + .page-subtitle { + font-size: var(--text-lg); + } +} + +/* Section Title (Mint color uppercase) */ +.section-title { + color: #94FBE0; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.006em; + margin-bottom: 0; + flex-shrink: 0; +} + +/* Section Title Purple */ +.section-title-purple { + color: #AE72F9; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.006em; + margin-bottom: 0; + display: block; +} + +/* ===================================================== + Button Components + ===================================================== */ + +/* Primary Button (Purple) */ +.btn-primary { + background-color: var(--color-purple); + color: var(--color-text-white); + font-weight: 700; + padding: 1rem 4rem; + border-radius: var(--radius-full); + transition: all var(--transition-normal); + transform: scale(1); + box-shadow: var(--shadow-purple); + font-size: var(--text-lg); + border: none; + cursor: pointer; +} + +.btn-primary:hover { + background-color: var(--color-purple-hover); +} + +.btn-primary:active { + transform: scale(0.95); +} + +.btn-primary:disabled { + background-color: #4b5563; + color: var(--color-text-gray-400); + cursor: not-allowed; + box-shadow: none; +} + +/* Secondary Button (Mint) */ +.btn-secondary { + background-color: var(--color-mint); + color: var(--color-bg-dark); + font-weight: 700; + padding: 1rem; + border-radius: var(--radius-xl); + transition: all var(--transition-normal); + transform: scale(1); + font-size: var(--text-base); + border: none; + cursor: pointer; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.btn-secondary:hover { + background-color: var(--color-mint-hover); +} + +.btn-secondary:active { + transform: scale(0.98); +} + +.btn-secondary:disabled { + background-color: rgba(166, 255, 234, 0.5); + color: rgba(18, 26, 29, 0.5); + cursor: not-allowed; +} + +/* Outline Button */ +.btn-outline { + background-color: transparent; + border: 1px solid var(--color-border-gray-600); + color: var(--color-text-white); + font-weight: 700; + padding: 1rem 4rem; + border-radius: var(--radius-full); + transition: all var(--transition-normal); + font-size: var(--text-base); + cursor: pointer; +} + +.btn-outline:hover { + border-color: var(--color-text-gray-500); +} + +/* Back Button */ +.btn-back { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1.25rem; + border-radius: var(--radius-full); + border: 1px solid var(--color-border-gray-600); + background-color: transparent; + color: var(--color-text-gray-300); + font-size: var(--text-base); + transition: background-color var(--transition-normal); + cursor: pointer; +} + +.btn-back:hover { + background-color: rgba(31, 41, 55, 1); +} + +/* Regenerate Button (Mint Outline) */ +.btn-regenerate { + margin-top: 1rem; + width: 100%; + padding: 0.75rem; + background-color: var(--color-mint-20); + color: var(--color-mint); + border: 1px solid var(--color-mint-30); + font-weight: 700; + border-radius: var(--radius-xl); + transition: background-color var(--transition-normal); + font-size: var(--text-base); + flex-shrink: 0; + cursor: pointer; +} + +.btn-regenerate:hover { + background-color: var(--color-mint-30); +} + +.btn-regenerate:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Selection Button */ +.btn-select { + padding: 0.75rem; + border-radius: var(--radius-xl); + border: 1px solid var(--color-border-gray-700); + background-color: rgba(18, 26, 29, 0.4); + color: var(--color-text-gray-400); + font-size: var(--text-sm); + font-weight: 700; + transition: all var(--transition-normal); + cursor: pointer; +} + +.btn-select:hover { + border-color: var(--color-border-gray-600); +} + +.btn-select.active { + border-color: var(--color-mint); + background-color: var(--color-bg-dark); + color: var(--color-mint); +} + +.btn-select:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ===================================================== + Form Components + ===================================================== */ + +/* Select Input */ +.select-input { + width: 100%; + padding: 0.75rem 1rem; + border-radius: var(--radius-xl); + background-color: var(--color-bg-dark); + border: 1px solid var(--color-border-gray-700); + font-size: var(--text-base); + color: var(--color-text-gray-300); +} + +.select-input:focus { + outline: none; + border-color: var(--color-mint); +} + +.select-input:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Text Input */ +.text-input { + width: 100%; + padding: 0.75rem 1rem; + border-radius: var(--radius-xl); + background-color: var(--color-bg-dark); + border: 1px solid var(--color-border-gray-700); + font-size: var(--text-base); + color: var(--color-text-gray-300); +} + +.text-input:focus { + outline: none; + border-color: var(--color-mint); +} + +/* Textarea - Lyrics */ +.textarea-lyrics { + flex: 1; + overflow-y: auto; + font-size: var(--text-sm); + color: var(--color-text-gray-400); + background-color: transparent; + resize: none; + border: none; + padding-right: 0.5rem; + line-height: 1.625; + min-height: 0; +} + +.textarea-lyrics:focus { + outline: none; + color: var(--color-text-gray-300); +} + +/* ===================================================== + Navigation Components + ===================================================== */ + +/* Back Button Container */ +.back-button-container { + width: 100%; + max-width: 1040px; + display: flex; + justify-content: flex-start; + margin-bottom: 1.5rem; + flex-shrink: 0; +} + +/* Bottom Button Container */ +.bottom-button-container { + position: fixed; + bottom: 32px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 30; + pointer-events: none; +} + +.bottom-button-container > * { + pointer-events: all; +} + +@media (min-width: 768px) { + .bottom-button-container { + left: 240px; + } +} + +/* ===================================================== + Sidebar Components + ===================================================== */ + +/* Sidebar Container */ +.sidebar { + position: fixed; + height: 100vh; + display: flex; + flex-direction: column; + background-color: var(--color-bg-dark); + border-right: 1px solid var(--color-border-white-5); + transition: all var(--transition-slow); + z-index: 50; +} + +@media (min-width: 768px) { + .sidebar { + position: sticky; + top: 0; + flex-shrink: 0; + } +} + +.sidebar.expanded { + width: 15rem; +} + +.sidebar.collapsed { + width: 5rem; +} + +.sidebar.mobile-open { + transform: translateX(0); +} + +.sidebar.mobile-closed { + transform: translateX(-100%); +} + +@media (min-width: 768px) { + .sidebar.mobile-closed { + transform: translateX(0); + } +} + +/* Sidebar Header */ +.sidebar-header { + padding: 1.25rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.sidebar-header.collapsed { + flex-direction: column; + gap: 1rem; +} + +/* Sidebar Logo */ +.sidebar-logo { + font-family: 'Playfair Display', serif; + font-style: italic; + font-size: var(--text-2xl); + font-weight: 700; + letter-spacing: -0.025em; + color: var(--color-text-white); + cursor: pointer; + transition: color var(--transition-normal); +} + +.sidebar-logo:hover { + color: var(--color-mint); +} + +/* Sidebar Menu */ +.sidebar-menu { + flex: 1; + padding: 0 0.75rem; + margin-top: 1rem; + overflow-y: auto; +} + +/* Sidebar Menu Item */ +.sidebar-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + border-radius: var(--radius-xl); + transition: all var(--transition-normal); + cursor: pointer; + margin-bottom: 0.25rem; + position: relative; + overflow: hidden; +} + +.sidebar-item.collapsed { + justify-content: center; + width: 3rem; + height: 3rem; + margin-left: auto; + margin-right: auto; + padding: 0; +} + +.sidebar-item.active { + background-color: var(--color-mint); + color: var(--color-bg-dark); +} + +.sidebar-item:not(.active) { + color: var(--color-text-gray-400); +} + +.sidebar-item:not(.active):not(.disabled):hover { + background-color: rgba(255, 255, 255, 0.05); + color: var(--color-text-white); +} + +.sidebar-item.disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; +} + +.sidebar-item-icon { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + transition: color var(--transition-normal); +} + +.sidebar-item.active .sidebar-item-icon { + color: var(--color-bg-dark); +} + +.sidebar-item-label { + font-size: 16px; + font-weight: 700; + white-space: nowrap; +} + +/* Sidebar Footer */ +.sidebar-footer { + padding: 1rem; + margin-top: auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* Credit Card */ +.credit-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-2xl); + padding: 1rem; + border: 1px solid var(--color-border-white-5); +} + +.credit-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.credit-label { + color: var(--color-text-gray-400); + font-size: var(--text-sm); + font-weight: 500; +} + +.credit-value { + color: var(--color-text-white); + font-size: var(--text-sm); + font-weight: 700; +} + +.credit-bar { + width: 100%; + height: 0.375rem; + background-color: #1f2937; + border-radius: var(--radius-full); + overflow: hidden; + margin-bottom: 0.75rem; +} + +.credit-bar-fill { + height: 100%; + background-color: var(--color-mint); +} + +.credit-upgrade-btn { + width: 100%; + padding: 0.625rem; + background-color: var(--color-bg-dark); + color: var(--color-text-white); + font-size: var(--text-sm); + font-weight: 700; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border-gray-700); + transition: background-color var(--transition-normal); + cursor: pointer; +} + +.credit-upgrade-btn:hover { + background-color: #1f2937; +} + +/* Profile Section */ +.profile-section { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0 0.5rem; +} + +.profile-section.collapsed { + flex-direction: column; +} + +.profile-avatar { + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-full); + border: 1px solid var(--color-border-gray-700); + object-fit: cover; +} + +.profile-avatar-default { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-bg-gray-700); + color: var(--color-text-gray-400); +} + +.profile-name { + color: var(--color-text-white); + font-size: var(--text-sm); + font-weight: 700; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.profile-credits { + color: rgba(255, 255, 255, 0.6); + font-size: 12px; + font-weight: 500; + margin-top: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Sidebar Language Switch */ +.sidebar-language-switch { + padding: 0 1rem 0.75rem; + display: flex; + justify-content: flex-start; +} + +/* Toggle container */ +.lang-toggle { + position: relative; + display: flex; + background: rgba(255, 255, 255, 0.08); + border-radius: 999px; + padding: 2px; + width: 100%; + max-width: 120px; +} + +.lang-toggle-option { + flex: 1; + position: relative; + z-index: 1; + padding: 4px 0; + font-size: 14px; + font-weight: 600; + letter-spacing: 0.03em; + color: rgba(255, 255, 255, 0.4); + background: none; + border: none; + cursor: pointer; + transition: color 0.3s ease; + text-align: center; +} + +.lang-toggle-option.active { + color: #ffffff; +} + +.lang-toggle-option:hover:not(.active) { + color: rgba(255, 255, 255, 0.6); +} + +/* Sliding indicator */ +.lang-toggle-slider { + position: absolute; + top: 2px; + bottom: 2px; + width: calc(50% - 2px); + background: rgba(255, 255, 255, 0.15); + border-radius: 999px; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; +} + +.lang-toggle-slider.left { + transform: translateX(2px); +} + +.lang-toggle-slider.right { + transform: translateX(calc(100% + 2px)); +} + +/* Collapsed state - simple button */ +.lang-toggle-collapsed { + padding: 4px 6px; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.03em; + color: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.08); + border: none; + border-radius: 6px; + cursor: pointer; + transition: all 0.3s ease; +} + +.lang-toggle-collapsed:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.15); +} + +/* Sidebar Footer Actions */ +.sidebar-footer-actions { + display: flex; + flex-direction: column; +} + +.sidebar-footer-actions .logout-btn { + width: 100%; +} + +.sidebar-inquiry-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + color: var(--color-text-gray-400); + text-decoration: none; + transition: color var(--transition-normal); + white-space: nowrap; + font-size: var(--text-sm); + font-weight: 700; + flex-shrink: 0; +} + +.sidebar-inquiry-btn:hover { + color: var(--color-text-white); +} + +.sidebar-inquiry-btn.collapsed { + justify-content: center; + padding: 0.75rem; +} + +/* Logout Button */ +.logout-btn { + width: 100%; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + color: var(--color-text-gray-400); + background: none; + border: none; + transition: color var(--transition-normal); + cursor: pointer; +} + +.logout-btn:hover { + color: var(--color-text-white); +} + +.logout-btn.collapsed { + justify-content: center; +} + +.logout-btn-label { + font-size: var(--text-sm); + font-weight: 700; +} + +/* 모바일 전용 사이드바 튜토리얼 토글 */ +.sidebar-tutorial-btn { + display: none; +} + +@media (max-width: 767px) { + .sidebar-tutorial-btn { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + margin-top: 0.5rem; + padding: 0.75rem; + border-radius: var(--radius-lg); + color: var(--color-text-gray-400); + border: none; + background: none; + cursor: pointer; + font-size: var(--text-sm); + font-weight: 500; + transition: color var(--transition-normal), background-color var(--transition-normal); + } + + .sidebar-tutorial-btn:hover { + color: var(--color-text-white); + background-color: rgba(255, 255, 255, 0.05); + } + + .sidebar-tutorial-btn.active { + color: var(--color-mint); + } + + .sidebar-tutorial-label { + text-align: left; + } + + .sidebar-tutorial-badge { + font-size: 11px; + font-weight: 700; + } + + .sidebar-tutorial-badge.on { + color: var(--color-mint); + } + + .sidebar-tutorial-badge.off { + color: var(--color-text-gray-400); + } +} + +/* Mobile Menu Button */ +.mobile-menu-btn { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 40; + padding: 0.625rem; + background-color: var(--color-bg-card); + border-radius: var(--radius-lg); + border: 1px solid var(--color-border-white-10); + color: var(--color-text-gray-400); + cursor: pointer; +} + +.mobile-menu-btn:hover { + color: var(--color-text-white); +} + +@media (min-width: 768px) { + .mobile-menu-btn { + display: none; + } +} + +/* Mobile Overlay */ +.mobile-overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 40; +} + +@media (min-width: 768px) { + .mobile-overlay { + display: none; + } +} + diff --git a/src/styles/business-settings.css b/src/styles/business-settings.css new file mode 100644 index 0000000..b2cd970 --- /dev/null +++ b/src/styles/business-settings.css @@ -0,0 +1,502 @@ +/* ===================================================== + Business Settings Components + ===================================================== */ + +/* Settings Container */ +.settings-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0.75rem; + background-color: var(--color-bg-dark); + color: var(--color-text-white); + overflow: hidden; +} + +@media (min-width: 640px) { + .settings-container { + padding: 1rem; + } +} + +@media (min-width: 768px) { + .settings-container { + padding: 1.5rem; + } +} + +/* Settings Header */ +.settings-header { + text-align: center; + margin-bottom: 1rem; + max-width: 42rem; + margin-left: 2.5rem; +} + +@media (min-width: 640px) { + .settings-header { + margin-bottom: 1.5rem; + } +} + +@media (min-width: 768px) { + .settings-header { + margin-bottom: 2rem; + margin-left: 0; + } +} + +.settings-title { + font-size: var(--text-lg); + font-weight: 700; + margin-bottom: 0.25rem; +} + +@media (min-width: 640px) { + .settings-title { + font-size: var(--text-xl); + margin-bottom: 0.5rem; + } +} + +@media (min-width: 768px) { + .settings-title { + font-size: 1.5rem; + } +} + +@media (min-width: 1024px) { + .settings-title { + font-size: var(--text-3xl); + } +} + +.settings-description { + color: var(--color-text-gray-400); + font-size: 9px; + font-weight: 300; + line-height: 1.625; + opacity: 0.8; +} + +@media (min-width: 640px) { + .settings-description { + font-size: 10px; + } +} + +@media (min-width: 768px) { + .settings-description { + font-size: var(--text-xs); + } +} + +/* Settings Card */ +.settings-card { + width: 100%; + max-width: 36rem; +} + +.settings-card-inner { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.75rem; + border: 1px solid var(--color-border-white-5); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +} + +@media (min-width: 640px) { + .settings-card-inner { + padding: 1rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .settings-card-inner { + padding: 1.5rem; + border-radius: var(--radius-3xl); + } +} + +.settings-card-title { + color: var(--color-mint); + font-size: 9px; + font-weight: 700; + margin-bottom: 0.5rem; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +@media (min-width: 640px) { + .settings-card-title { + font-size: 10px; + margin-bottom: 0.75rem; + } +} + +@media (min-width: 768px) { + .settings-card-title { + font-size: var(--text-xs); + margin-bottom: 1rem; + } +} + +/* Social Items */ +.social-items { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +@media (min-width: 640px) { + .social-items { + gap: 0.75rem; + } +} + +.social-item { + background-color: var(--color-bg-dark); + padding: 0.5rem; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border-white-5); + display: flex; + align-items: center; + justify-content: space-between; + transition: border-color var(--transition-normal); +} + +@media (min-width: 640px) { + .social-item { + padding: 0.75rem; + border-radius: var(--radius-xl); + } +} + +.social-item:hover { + border-color: var(--color-border-white-10); +} + +.social-item-left { + display: flex; + align-items: center; + gap: 0.5rem; +} + +@media (min-width: 640px) { + .social-item-left { + gap: 0.75rem; + } +} + +.social-item-icon { + width: 1.5rem; + height: 1.5rem; + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 640px) { + .social-item-icon { + width: 2rem; + height: 2rem; + } +} + +.social-item-icon-inner { + width: 0.75rem; + height: 0.75rem; +} + +@media (min-width: 640px) { + .social-item-icon-inner { + width: 1rem; + height: 1rem; + } +} + +.social-item-name { + font-size: 10px; + font-weight: 700; + color: var(--color-text-gray-300); +} + +@media (min-width: 640px) { + .social-item-name { + font-size: var(--text-xs); + } +} + +.social-item-connect { + color: var(--color-mint); + font-size: 9px; + font-weight: 700; + background: none; + border: none; + cursor: pointer; +} + +@media (min-width: 640px) { + .social-item-connect { + font-size: 10px; + } +} + +.social-item-connect:hover { + text-decoration: underline; +} + +/* ===================================================== + Footer Component + ===================================================== */ + +/* Landing Footer */ +.landing-footer { + width: 100%; + background: var(--Color-teal-800, #002224); + padding: 40px 1.5rem; +} + +@media (min-width: 768px) { + .landing-footer { + padding: 48px 5rem; + } +} + +@media (min-width: 1024px) { + .landing-footer { + padding: 60px 100px; + } +} + +.footer-content { + display: flex; + flex-direction: column; + gap: 2rem; + max-width: 1144px; + margin: 0 auto; +} + +@media (min-width: 768px) { + .footer-content { + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 4rem; + } +} + +.footer-left { + min-width: 262px; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.footer-logo { + height: 24px; + width: auto; + object-fit: contain; +} + +.footer-copyright { + font-size: 14px; + font-weight: 400; + color: #379599; + letter-spacing: -0.006em; + line-height: 1.19; +} + +.footer-links { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.footer-link { + font-size: 13px; + color: #379599; + text-decoration: none; + opacity: 0.8; +} + +.footer-link:hover { + opacity: 1; + text-decoration: underline; +} + +.footer-link-divider { + font-size: 13px; + color: #379599; + opacity: 0.5; +} + +.footer-right { + max-width: 600px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.footer-info { + font-size: 12px; + font-weight: 400; + color: #CEE5E6; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .footer-info { + font-size: 14px; + } +} + +/* ===================================================== + Header Component + ===================================================== */ + +/* Landing Header */ +.landing-header { + width: calc(100% - 2rem); + max-width: 1280px; + padding: 12px 12px 12px 24px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 16px; + left: 50%; + transform: translateX(-50%); + z-index: 10100; + background: rgba(0, 34, 36, 0.3); + border: 1px solid rgba(229, 241, 242, 0.2); + border-radius: 999px; + backdrop-filter: blur(40px); + -webkit-backdrop-filter: blur(40px); +} + +@media (min-width: 768px) { + .landing-header { + width: calc(100% - 10rem); + } +} + +.header-logo { + display: flex; + align-items: center; + height: 16px; +} + +.header-logo img { + height: 100%; + width: auto; + object-fit: contain; +} + +.header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.header-actions .lang-toggle { + width: auto; + max-width: none; + padding: 2px; + flex-shrink: 0; +} + +.header-actions .lang-toggle-option { + padding: 4px 10px; + white-space: nowrap; +} + +.header-login-btn { + padding: 10px 24px; + border-radius: 999px; + background-color: #94FBE0; + color: #000000; + font-weight: 600; + font-size: 14px; + border: none; + cursor: pointer; + transition: all var(--transition-normal); + letter-spacing: -0.006em; + line-height: 1.19; +} + +.header-login-btn:hover { + background-color: #7fe8cc; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(148, 251, 224, 0.3); +} + +.header-login-btn:active { + transform: scale(0.95); +} + +.header-start-btn { + padding: 10px 24px; + border-radius: 999px; + background-color: #AE72F9; + color: #FFFFFF; + font-weight: 600; + font-size: 14px; + border: none; + cursor: pointer; + transition: all var(--transition-normal); + letter-spacing: -0.006em; + line-height: 1.19; +} + +.header-start-btn:hover { + background-color: #9B5DE5; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(174, 114, 249, 0.3); +} + +.header-start-btn:active { + transform: scale(0.95); +} + +.header-avatar { + width: 2rem; + height: 2rem; + border-radius: var(--radius-full); + overflow: hidden; + border: 1px solid var(--color-border-gray-700); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +@media (min-width: 640px) { + .header-avatar { + width: 2.5rem; + height: 2.5rem; + } +} + +.header-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* ===================================================== + Content Safe Area (for Landing Pages) + ===================================================== */ +.content-safe-area { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + + diff --git a/src/styles/contents-social.css b/src/styles/contents-social.css new file mode 100644 index 0000000..1eea947 --- /dev/null +++ b/src/styles/contents-social.css @@ -0,0 +1,2008 @@ +/* ===================================================== + ADO2 Contents Page Styles + ===================================================== */ + +.ado2-contents-page { + padding: 32px; + min-height: 100%; + background-color: var(--color-bg-darker); +} + +.ado2-contents-header { + display: flex; + align-items: baseline; + gap: 16px; + margin-bottom: 16px; +} + +.ado2-sort-pills { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 20px; +} + +.ado2-sort-pill { + padding: 6px 14px; + border-radius: 20px; + border: 1px solid rgba(155, 202, 204, 0.3); + background: transparent; + color: #9BCACC; + font-size: 13px; + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; + white-space: nowrap; +} + +.ado2-sort-pill:hover { + background: rgba(155, 202, 204, 0.1); + color: #fff; +} + +.ado2-sort-pill.active { + background: #1A8F93; + border-color: #1A8F93; + color: #fff; + font-weight: 600; +} + +.ado2-contents-title { + font-size: 32px; + font-weight: 700; + color: var(--color-text-white); + letter-spacing: -0.6%; +} + +.ado2-contents-count { + font-size: 17px; + font-weight: 500; + color: #9BCACC; +} + +.ado2-contents-filters { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; + flex-wrap: wrap; +} + +.ado2-filter-select { + height: 38px; + padding: 0 12px; + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.07); + color: var(--color-text-white); + font-size: 14px; + cursor: pointer; + outline: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 30px; + min-width: 110px; +} + +.ado2-filter-select:focus { + border-color: rgba(155,202,204,0.5); +} + +.ado2-filter-select option { + background: #1e2a2b; + color: var(--color-text-white); +} + +.ado2-filter-search { + display: flex; + gap: 8px; + flex: 1; + max-width: 360px; +} + +.ado2-filter-input { + flex: 1; + height: 38px; + padding: 0 12px; + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.07); + color: var(--color-text-white); + font-size: 14px; + outline: none; +} + +.ado2-filter-input::placeholder { + color: rgba(255,255,255,0.35); +} + +.ado2-filter-input:focus { + border-color: rgba(155,202,204,0.5); +} + +.ado2-filter-btn { + height: 38px; + padding: 0 16px; + border-radius: 8px; + border: none; + background: #9BCACC; + color: #1a2a2b; + font-size: 14px; + font-weight: 600; + cursor: pointer; + white-space: nowrap; +} + +.ado2-filter-btn:hover { + background: #7db8bb; +} + +.ado2-order-btn { + height: 38px; + width: 38px; + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.07); + color: var(--color-text-white); + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.ado2-order-btn:hover { + background: rgba(155,202,204,0.2); + border-color: rgba(155,202,204,0.5); +} + +.ado2-region-pill { + display: inline-flex; + align-items: center; + gap: 6px; + height: 38px; + padding: 0 16px; + border-radius: 999px; + border: 1.5px solid rgba(255,255,255,0.25); + background: transparent; + color: rgba(255,255,255,0.5); + font-size: 14px; + cursor: pointer; + white-space: nowrap; + transition: border-color 0.15s, color 0.15s, background 0.15s; +} + +.ado2-region-pill:hover { + border-color: rgba(155,202,204,0.6); + color: var(--color-text-white); +} + +.ado2-region-pill.active { + border-color: #9BCACC; + color: #9BCACC; + background: rgba(155,202,204,0.08); +} + +.ado2-region-clear { + font-size: 12px; + color: rgba(155,202,204,0.7); + padding: 1px 3px; + border-radius: 4px; + line-height: 1; +} + +.ado2-region-clear:hover { + color: #9BCACC; + background: rgba(155,202,204,0.15); +} + +.city-modal-backdrop { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.6); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} + +.city-modal { + background: #1a2a2b; + border: 1px solid rgba(255,255,255,0.12); + border-radius: 16px; + width: 375px; + max-width: 92vw; + display: flex; + flex-direction: column; +} + +.city-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 20px 14px; + border-bottom: 1px solid rgba(255,255,255,0.08); + flex-shrink: 0; +} + +.city-modal-title { + font-size: 16px; + font-weight: 600; + color: var(--color-text-white); + display: flex; + align-items: center; + gap: 8px; +} + +.city-modal-back { + background: none; + border: none; + color: rgba(255,255,255,0.6); + font-size: 18px; + cursor: pointer; + padding: 0 4px; + line-height: 1; +} + +.city-modal-back:hover { + color: var(--color-text-white); +} + +.city-modal-close { + background: none; + border: none; + color: rgba(255,255,255,0.5); + font-size: 16px; + cursor: pointer; + padding: 4px 6px; + border-radius: 6px; +} + +.city-modal-close:hover { + color: var(--color-text-white); + background: rgba(255,255,255,0.08); +} + +.city-modal-grid { + display: flex; + flex-direction: column; + padding: 8px 0; +} + +.city-modal-region-item { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding: 14px 20px; + background: none; + border: none; + border-bottom: 1px solid rgba(255,255,255,0.05); + color: var(--color-text-white); + font-size: 15px; + cursor: pointer; + text-align: left; +} + +.city-modal-region-item:hover { + background: rgba(255,255,255,0.05); +} + +.city-modal-region-item.has-selected { + color: #9BCACC; +} + +.city-modal-region-badge { + font-size: 12px; + background: rgba(155,202,204,0.2); + color: #9BCACC; + border-radius: 10px; + padding: 2px 8px; +} + +.city-modal-arrow { + margin-left: auto; + color: rgba(255,255,255,0.3); + font-size: 18px; +} + +.city-modal-item-wrap { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 12px 16px 20px; +} + +.city-modal-item { + padding: 7px 16px; + border-radius: 20px; + border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.05); + color: var(--color-text-white); + font-size: 13px; + cursor: pointer; + white-space: nowrap; +} + +.city-modal-item:hover { + background: rgba(155,202,204,0.15); + border-color: rgba(155,202,204,0.4); +} + +.city-modal-item.active { + background: #9BCACC; + border-color: #9BCACC; + color: #1a2a2b; + font-weight: 600; +} + +.city-modal-item-all { + border-style: dashed; + border-color: rgba(255,255,255,0.3); +} + +.city-modal-item-all.active { + border-style: solid; +} + +.ado2-contents-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; +} + +.ado2-content-card { + display: flex; + flex-direction: column; + border-radius: 20px; + overflow: hidden; + background-color: #034A4D; +} + +.content-card-thumbnail { + width: 100%; + aspect-ratio: 9 / 16; + background-color: #01393B; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.content-video-preview { + width: 100%; + height: 100%; + object-fit: cover; +} + +.content-no-video { + color: #6AB0B3; + display: flex; + align-items: center; + justify-content: center; +} + +/* ADO2 갤러리 호버 오버레이 */ +.ado2-gallery-thumbnail-wrap { + position: relative; +} + +.ado2-gallery-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0); + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s ease; + pointer-events: none; +} + +.ado2-gallery-thumbnail-wrap:hover .ado2-gallery-overlay { + background: rgba(0, 0, 0, 0.45); +} + +.ado2-gallery-play-btn { + width: 56px; + height: 56px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.9); + color: #01282A; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transform: scale(0.8); + transition: opacity 0.2s ease, transform 0.2s ease; + padding-left: 4px; +} + +.ado2-gallery-thumbnail-wrap:hover .ado2-gallery-play-btn { + opacity: 1; + transform: scale(1); +} + +.content-card-info { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.content-card-text { + display: flex; + flex-direction: column; + gap: 2px; +} + +.content-card-title { + font-size: 18px; + font-weight: 700; + color: var(--color-text-white); + letter-spacing: -0.6%; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.content-card-like { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + font-size: 15px; + font-weight: 500; + color: #9BCACC; + white-space: nowrap; + flex-shrink: 0; + margin-left: 8px; +} + +.content-card-date { + font-size: 14px; + font-weight: 400; + color: #6AB0B3; + letter-spacing: -0.6%; + margin: 0; +} + +.content-card-actions { + display: flex; + gap: 6px; +} + +.content-download-btn { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + padding: 10px 10px 10px 8px; + height: 34px; + background-color: #462E64; + border: none; + border-radius: 8px; + color: #F7F1FE; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; +} + +.content-download-btn:hover:not(:disabled) { + background-color: #563d7a; +} + +.content-download-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.content-download-btn svg { + stroke: #F7F1FE; +} + +.content-delete-btn { + width: 34px; + height: 34px; + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + background-color: #01393B; + border: none; + border-radius: 8px; + color: #6AB0B3; + cursor: pointer; + transition: background-color 0.2s; +} + +.content-delete-btn:hover { + background-color: #024648; +} + +.content-delete-btn svg { + stroke: #6AB0B3; +} + +/* Loading, Error, Empty States */ +.ado2-contents-loading, +.ado2-contents-error, +.ado2-contents-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 400px; + gap: 16px; + color: #9BCACC; +} + +.ado2-contents-loading .loading-spinner { + width: 40px; + height: 40px; + border: 3px solid #01393B; + border-top-color: #6AB0B3; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.retry-btn { + padding: 10px 20px; + background-color: #034A4D; + border: 1px solid #6AB0B3; + border-radius: 8px; + color: #6AB0B3; + font-size: 14px; + cursor: pointer; + transition: background-color 0.2s; +} + +.retry-btn:hover { + background-color: #024648; +} + +/* Pagination */ +.ado2-contents-pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-top: 32px; + padding-bottom: 32px; +} + +.pagination-btn { + padding: 10px 20px; + background-color: #034A4D; + border: 1px solid #6AB0B3; + border-radius: 8px; + color: #6AB0B3; + font-size: 14px; + cursor: pointer; + transition: background-color 0.2s; +} + +.pagination-btn:hover:not(:disabled) { + background-color: #024648; +} + +.pagination-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ── VideoDetailPage / VideoDetailModal ─────────────────────────── */ + +/* 모달 내부 콘텐츠 (풀페이지의 video-detail-page와 동일 스타일, 배경 제외) */ +.video-detail-modal-content { + color: #fff; + padding: 24px 32px; +} + +.video-detail-page-content { + color: #fff; + padding: 0; + flex: 1; + display: flex; + flex-direction: column; +} + +/* 모달 닫기 버튼 */ +.video-detail-close-btn { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: #9BCACC; + cursor: pointer; + padding: 4px; + margin-left: auto; + transition: color 0.2s; +} + +.video-detail-close-btn:hover { + color: #fff; +} + +.video-detail-page { + min-height: 100vh; + background: #01282A; + color: #fff; + padding: 24px 32px; + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.video-detail-header { + margin-bottom: 24px; +} + +.video-detail-back-btn { + display: flex; + align-items: center; + gap: 6px; + background: none; + border: none; + color: #9BCACC; + font-size: 14px; + cursor: pointer; + padding: 4px 0; + transition: color 0.2s; +} + +.video-detail-back-btn:hover { + color: #fff; +} + +.video-detail-content { + display: flex; + gap: 32px; + flex-wrap: wrap; + align-items: center; + flex: 1; + margin: auto 0; +} + +/* 가로 영상: 영상 위, 정보 아래 */ +.video-detail-content.landscape { + flex-direction: column; +} + +.video-detail-player { + display: block; + width: 100%; + height: auto; + max-width: 450px; + border-radius: 12px; + flex-shrink: 0; +} + +.video-detail-content.landscape .video-detail-player { + max-width: 100%; + width: 100%; +} + +.video-detail-info { + flex: 1 1 220px; + display: flex; + flex-direction: column; + gap: 12px; + padding-top: 8px; + align-self: flex-start; +} + +.video-detail-content.landscape .video-detail-info { + flex: 1 1 auto; + width: 100%; + align-self: stretch; + padding-top: 0; +} + +.video-detail-store { + font-size: 22px; + font-weight: 600; + margin: 0; + line-height: 1.3; +} + +.video-detail-date { + font-size: 14px; + color: #9BCACC; + margin: 0; +} + +.video-detail-copy-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 10px 16px; + background: #034A4D; + border: 1px solid #6AB0B3; + border-radius: 8px; + color: #9BCACC; + font-size: 14px; + cursor: pointer; + transition: background 0.2s, color 0.2s; + width: fit-content; +} + +.video-detail-copy-btn:hover { + background: #024648; + color: #fff; +} + +.video-detail-copy-btn.copied { + background: #1A8F93; + border-color: #1A8F93; + color: #fff; +} + +.video-detail-share-menu { + position: absolute; + top: calc(100% + 6px); + left: 0; + z-index: 100; + background: #012023; + border: 1px solid #2A6669; + border-radius: 10px; + padding: 6px; + min-width: 160px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + gap: 2px; +} + +.video-detail-share-item { + display: flex; + align-items: center; + gap: 10px; + padding: 9px 12px; + background: transparent; + border: none; + border-radius: 7px; + color: #C5E8EA; + font-size: 14px; + cursor: pointer; + transition: background 0.15s; + width: 100%; + text-align: left; +} + +.video-detail-share-item:hover { + background: #023E42; + color: #fff; +} + +/* 비로그인 플레이스홀더 */ +.video-detail-placeholder { + flex: 1 1 320px; + max-width: 480px; + aspect-ratio: 9/16; + max-height: 80vh; + background: #034A4D; + border-radius: 12px; + filter: blur(4px); + opacity: 0.4; +} + +.video-detail-placeholder-text { + height: 24px; + background: #034A4D; + border-radius: 6px; + opacity: 0.4; + filter: blur(4px); +} + +.video-detail-placeholder-text.short { + width: 60%; + height: 16px; +} + +/* ── 댓글 섹션 ─────────────────────────────── */ + +.video-detail-comments { + border-top: 1px solid rgba(155, 202, 204, 0.2); + padding-top: 20px; + margin-top: 8px; +} + +.video-detail-comments-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +.video-detail-comments-count { + font-size: 14px; + color: #9BCACC; + font-weight: 500; +} + +/* 댓글 작성자 프로필 */ +.video-detail-comment-profile { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.video-detail-comment-profile-avatar-wrap { + position: relative; + flex-shrink: 0; +} + +.video-detail-avatar-change-btn { + position: absolute; + bottom: -4px; + right: -4px; + width: 18px; + height: 18px; + border-radius: 50%; + background: #1A8F93; + border: none; + color: #fff; + font-size: 11px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +.video-detail-nickname-input { + flex: 0 0 auto; + width: 200px; + background: #034A4D; + border: 1px solid rgba(155, 202, 204, 0.25); + border-radius: 8px; + padding: 8px 12px; + color: #fff; + font-size: 13px; + outline: none; +} + +.video-detail-nickname-input::placeholder { + color: #6B9EA0; +} + +.video-detail-nickname-input:focus { + border-color: #9BCACC; +} + +/* 댓글 닉네임 */ +.video-detail-comment-nickname { + font-size: 13px; + font-weight: 600; + color: #9BCACC; + display: block; + margin-bottom: 2px; +} + +/* 날짜 + 삭제 버튼 한 줄 */ +.video-detail-comment-bottom { + display: flex; + align-items: center; + gap: 10px; + margin-top: 4px; +} + +.video-detail-comments-title { + font-size: 17px; + font-weight: 600; + margin: 0; +} + +.video-detail-comment-input-wrap { + display: flex; + gap: 8px; + margin-bottom: 24px; +} + +.video-detail-comment-input { + flex: 1; + background: #034A4D; + border: 1px solid rgba(155, 202, 204, 0.25); + border-radius: 8px; + padding: 12px 16px; + color: #fff; + font-size: 14px; + outline: none; + transition: border-color 0.2s; + resize: none; + overflow: hidden; + line-height: 1.5; + min-height: 44px; + font-family: inherit; +} + +.video-detail-comment-input::placeholder { + color: #6B9EA0; +} + +.video-detail-comment-input:focus { + border-color: #9BCACC; +} + +.video-detail-comment-input:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.video-detail-comment-submit { + padding: 12px 20px; + background: #1A8F93; + border: none; + border-radius: 8px; + color: #fff; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s; + white-space: nowrap; +} + +.video-detail-comment-submit:hover:not(:disabled) { + background: #158489; +} + +.video-detail-comment-submit:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.video-detail-comments-empty { + color: #6B9EA0; + font-size: 14px; + margin: 0; +} + +.video-detail-comment-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 20px; +} + +.video-detail-comment-item { + display: flex; + gap: 12px; +} + +.video-detail-comment-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + background: #034A4D; +} + +.video-detail-comment-avatar.small { + width: 28px; + height: 28px; +} + +.video-detail-comment-body { + flex: 1; +} + +.video-detail-comment-meta { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 4px; +} + +.video-detail-comment-name { + font-size: 14px; + font-weight: 600; +} + +.video-detail-comment-date { + font-size: 12px; + color: #6B9EA0; +} + +.video-detail-comment-text { + font-size: 14px; + color: #C8E6E8; + margin: 0; + line-height: 1.5; + word-break: break-all; + overflow-wrap: break-word; +} + +.video-detail-comment-delete { + background: none; + border: none; + color: #6B9EA0; + font-size: 12px; + cursor: pointer; + padding: 0; + transition: color 0.2s; +} + +.video-detail-comment-delete:hover { + color: #ff6b6b; +} + +.video-detail-reply-list { + list-style: none; + padding: 0; + margin: 8px 0 0 0; + display: flex; + flex-direction: column; + gap: 12px; +} + +.video-detail-reply-item { + display: flex; + gap: 10px; + padding-left: 4px; + border-left: 2px solid rgba(155, 202, 204, 0.2); +} + +.video-detail-comments-more { + width: 100%; + margin-top: 16px; + padding: 10px; + background: transparent; + border: 1px solid rgba(155, 202, 204, 0.25); + border-radius: 8px; + color: #9BCACC; + font-size: 14px; + cursor: pointer; + transition: background 0.2s; +} + +.video-detail-comments-more:hover:not(:disabled) { + background: rgba(155, 202, 204, 0.08); +} + +.video-detail-comments-more:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* 좋아요 버튼 */ +.video-detail-like-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 10px 16px; + background: #034A4D; + border: 1px solid rgba(155, 202, 204, 0.3); + border-radius: 8px; + color: #9BCACC; + font-size: 14px; + cursor: pointer; + transition: background 0.2s, color 0.2s, border-color 0.2s; +} + +.video-detail-like-btn:hover:not(:disabled) { + background: #024648; + color: #fff; +} + +.video-detail-like-btn.liked { + background: rgba(255, 100, 100, 0.15); + border-color: rgba(255, 100, 100, 0.4); + color: #ff6b6b; +} + +.video-detail-like-btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +@media (max-width: 600px) { + .video-detail-page { + padding: 16px; + } + .video-detail-content { + flex-direction: column; + } + .video-detail-player { + max-width: 100%; + width: 100%; + } + .video-detail-info { + flex: 0 0 auto; + width: 100%; + align-self: auto; + padding-top: 0; + } +} + +.pagination-info { + color: #9BCACC; + font-size: 14px; +} + +/* Responsive */ +@media (max-width: 768px) { + .ado2-contents-page { + padding: 16px; + } + + .ado2-contents-header { + flex-direction: column; + gap: 8px; + } + + .ado2-contents-title { + font-size: 24px; + } + + .ado2-contents-grid { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 12px; + } +} + +/* ===================================================== + Delete Confirmation Modal + ===================================================== */ +.delete-modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.delete-modal { + background: linear-gradient(180deg, #1A3A3E 0%, #0D2426 100%); + border: 1px solid rgba(148, 251, 224, 0.2); + border-radius: 16px; + padding: 32px 40px; + min-width: 360px; + max-width: 90vw; + text-align: center; +} + +.delete-modal-title { + font-size: 18px; + font-weight: 600; + color: #FFFFFF; + margin: 0 0 12px 0; +} + +.delete-modal-description { + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + margin: 0 0 28px 0; +} + +.delete-modal-actions { + display: flex; + gap: 12px; + justify-content: center; +} + +.delete-modal-btn { + padding: 12px 32px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + border: none; +} + +.delete-modal-btn.cancel { + background-color: rgba(255, 255, 255, 0.1); + color: #FFFFFF; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.delete-modal-btn.cancel:hover { + background-color: rgba(255, 255, 255, 0.15); +} + +.delete-modal-btn.confirm { + background-color: #EF4444; + color: #FFFFFF; +} + +.delete-modal-btn.confirm:hover { + background-color: #DC2626; +} + +.delete-modal-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ============================================ + Social Connect Pages + ============================================ */ + +.social-connect-page { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #002224; + padding: 1rem; +} + +.social-connect-card { + background-color: #0a1a1c; + border-radius: 16px; + padding: 3rem; + max-width: 400px; + width: 100%; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.social-connect-card.success { + border-color: rgba(148, 251, 224, 0.3); +} + +.social-connect-card.error { + border-color: rgba(248, 113, 113, 0.3); +} + +.social-connect-icon { + width: 80px; + height: 80px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; +} + +.social-connect-icon.success { + background-color: rgba(148, 251, 224, 0.15); + color: #94FBE0; +} + +.social-connect-icon.error { + background-color: rgba(248, 113, 113, 0.15); + color: #f87171; +} + +.social-connect-profile-image { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + margin: 0 auto 1.5rem; + border: 3px solid #94FBE0; +} + +.social-connect-account-info { + margin-bottom: 1.5rem; +} + +.social-connect-channel-badge { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 0.875rem; + background-color: rgba(148, 251, 224, 0.15); + color: #94FBE0; + border-radius: 9999px; + font-size: 0.875rem; + font-weight: 500; +} + +.social-connect-title { + font-size: 1.5rem; + font-weight: 600; + color: #FFFFFF; + margin-bottom: 0.75rem; +} + +.social-connect-message { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 0.5rem; +} + +.social-connect-detail { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.5); + margin-bottom: 1.5rem; +} + +.social-connect-countdown { + font-size: 0.875rem; + color: #94FBE0; + margin-bottom: 1rem; +} + +.social-connect-actions { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.social-connect-button { + width: 100%; + padding: 0.875rem 1.5rem; + border-radius: 9999px; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + border: none; + background-color: #94FBE0; + color: #002224; +} + +.social-connect-button:hover { + background-color: #7fe6cb; +} + +.social-connect-button.secondary { + background-color: transparent; + color: #FFFFFF; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.social-connect-button.secondary:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.social-connect-spinner { + width: 64px; + height: 64px; + margin: 0 auto 1.5rem; +} + +.social-spinner-svg { + width: 100%; + height: 100%; + animation: social-spinner-rotate 1.5s linear infinite; +} + +.social-spinner-svg circle { + stroke: #2dd4bf; + stroke-linecap: round; + stroke-dasharray: 90, 150; + stroke-dashoffset: 0; + animation: social-spinner-dash 1.5s ease-in-out infinite; +} + +@keyframes social-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes social-spinner-dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} + +/* ============================================ + My Info Page (내 정보) + ============================================ */ + +.myinfo-page { + flex: 1; + padding: 2rem; + max-width: 900px; + background-color: #002224; +} + +.myinfo-title { + font-size: 1.75rem; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 1.5rem; +} + +/* 탭 네비게이션 */ +.myinfo-tabs { + display: flex; + gap: 0.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 2rem; +} + +.myinfo-tab { + padding: 0.75rem 1rem; + background: none; + border: none; + color: rgba(255, 255, 255, 0.5); + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + position: relative; + transition: color 0.2s ease; +} + +.myinfo-tab:hover { + color: rgba(255, 255, 255, 0.8); +} + +.myinfo-tab.active { + color: #FFFFFF; +} + +.myinfo-tab.active::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, #a6ffea, #a682ff); +} + +/* 탭 컨텐츠 */ +.myinfo-content { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.myinfo-section { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.myinfo-section-title { + font-size: 0.875rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.6); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.myinfo-placeholder { + color: rgba(255, 255, 255, 0.5); + font-size: 0.9rem; + padding: 2rem; + text-align: center; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.myinfo-credits-card { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.myinfo-credits-row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.myinfo-credits-label { + color: rgba(255, 255, 255, 0.6); + font-size: 0.95rem; +} + + +.myinfo-credits-value { + color: #a6ffea; + font-size: 1.4rem; + font-weight: 700; + letter-spacing: 0.02em; +} + +.myinfo-credits-desc { + color: rgba(255, 255, 255, 0.4); + font-size: 0.85rem; + margin: 0; + flex: 1; +} + +.myinfo-credits-charge-btn { + padding: 0.75rem 1.25rem; + background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); + border: none; + border-radius: 8px; + color: #002224; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s ease; +} + +.myinfo-credits-charge-btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(166, 255, 234, 0.3); +} + +.myinfo-popup-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; +} + +.myinfo-popup { + background: #132034; + border: 1px solid rgba(78, 205, 196, 0.3); + border-radius: 16px; + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + width: 380px; + max-width: 90vw; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); +} + +.myinfo-popup-title { + color: #fff; + font-size: 1.05rem; + font-weight: 700; + margin: 0 0 0.5rem; + align-self: flex-start; +} + +.myinfo-popup-message { + color: #fff; + font-size: 1.1rem; + font-weight: 600; + text-align: center; + margin: 0; +} + +.myinfo-popup-field { + display: flex; + flex-direction: column; + gap: 0.4rem; + width: 100%; +} + +.myinfo-popup-label { + color: rgba(255, 255, 255, 0.6); + font-size: 0.85rem; +} + +.myinfo-popup-counter { + display: flex; + align-items: center; + gap: 0; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + overflow: hidden; +} + +.myinfo-popup-counter-btn { + background: rgba(255, 255, 255, 0.08); + border: none; + color: #fff; + font-size: 1.25rem; + width: 48px; + min-width: 48px; + height: 44px; + cursor: pointer; + transition: background 0.15s; + flex-shrink: 0; +} + +.myinfo-popup-counter-btn:hover { + background: rgba(255, 255, 255, 0.15); +} + +.myinfo-popup-input { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + color: #fff; + font-size: 0.95rem; + padding: 0.6rem 0.875rem; + outline: none; + width: 100%; + box-sizing: border-box; +} + +.myinfo-popup-input--center { + border: none; + border-left: 1px solid rgba(255, 255, 255, 0.12); + border-right: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 0; + text-align: center; + flex: 1; + height: 44px; + padding: 0; +} + +.myinfo-popup-input--center::-webkit-inner-spin-button, +.myinfo-popup-input--center::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +.myinfo-popup-input:focus { + border-color: rgba(78, 205, 196, 0.5); +} + +.myinfo-popup-textarea { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + color: #fff; + font-size: 0.9rem; + padding: 0.6rem 0.875rem; + outline: none; + resize: none; + width: 100%; + box-sizing: border-box; + font-family: inherit; +} + +.myinfo-popup-textarea:focus { + border-color: rgba(78, 205, 196, 0.5); +} + +.myinfo-popup-actions { + display: flex; + gap: 0.75rem; + width: 100%; + justify-content: flex-end; + margin-top: 0.25rem; +} + +.myinfo-popup-cancel { + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + padding: 0.6rem 1.25rem; + font-size: 0.9rem; + cursor: pointer; + transition: background 0.2s; +} + +.myinfo-popup-cancel:hover { + background: rgba(255, 255, 255, 0.13); +} + +.myinfo-popup-close { + background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); + color: #002224; + border: none; + border-radius: 8px; + padding: 0.6rem 1.5rem; + font-size: 0.9rem; + font-weight: 700; + cursor: pointer; + transition: opacity 0.2s; +} + +.myinfo-popup-close:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.myinfo-popup-close:not(:disabled):hover { + opacity: 0.85; +} + +/* 내 비즈니스 카드 */ +.myinfo-business-card { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; + padding: 1.5rem; +} + +.myinfo-business-empty-title { + font-size: 1.1rem; + font-weight: 600; + color: #FFFFFF; + margin-bottom: 0.5rem; +} + +.myinfo-business-empty-desc { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.5); + margin-bottom: 1.25rem; +} + +.myinfo-business-input-row { + display: flex; + gap: 0.75rem; + align-items: center; +} + +.myinfo-business-input { + flex: 1; + padding: 0.75rem 1rem; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #FFFFFF; + font-size: 0.9rem; +} + +.myinfo-business-input::placeholder { + color: rgba(255, 255, 255, 0.3); +} + +.myinfo-business-input:focus { + outline: none; + border-color: #a6ffea; +} + +.myinfo-business-submit { + padding: 0.75rem 1.25rem; + background: linear-gradient(135deg, #a6ffea 0%, #7ee8cf 100%); + border: none; + border-radius: 8px; + color: #002224; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s ease; +} + +.myinfo-business-submit:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(166, 255, 234, 0.3); +} + +/* 소셜 채널 버튼들 (가로 배치) */ +.myinfo-social-buttons { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.myinfo-social-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 8px; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.myinfo-social-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.25); +} + +.myinfo-social-btn.connected { + border-color: rgba(166, 255, 234, 0.4); + background: rgba(166, 255, 234, 0.08); +} + +.myinfo-social-btn:disabled, +.myinfo-social-btn.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.myinfo-social-btn-icon { + width: 20px; + height: 20px; + border-radius: 4px; + object-fit: cover; +} + +/* 연결된 계정 목록 */ +.myinfo-connected-accounts { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-top: 1.25rem; +} + +.myinfo-connected-card { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + background: rgba(166, 255, 234, 0.03); + border: 1px solid rgba(166, 255, 234, 0.15); + border-radius: 12px; +} + +.myinfo-connected-info { + display: flex; + align-items: center; + gap: 0.875rem; +} + +.myinfo-connected-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.myinfo-connected-icon { + width: 40px; + height: 40px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.myinfo-connected-icon img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.myinfo-connected-text { + display: flex; + flex-direction: column; + gap: 0.125rem; +} + +.myinfo-connected-channel { + font-size: 0.9rem; + font-weight: 600; + color: #FFFFFF; +} + +.myinfo-connected-platform { + font-size: 0.7rem; + color: rgba(255, 255, 255, 0.5); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.myinfo-connected-actions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.myinfo-connected-badge { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.75rem; + font-weight: 500; + color: #a6ffea; +} + +.myinfo-connected-disconnect { + padding: 0.375rem 0.75rem; + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 6px; + color: rgba(255, 255, 255, 0.6); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.myinfo-connected-disconnect:hover { + background: rgba(248, 113, 113, 0.1); + border-color: rgba(248, 113, 113, 0.3); + color: #f87171; +} + +.myinfo-loading { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.5); + text-align: center; + padding: 0.5rem; + margin-top: 1rem; +} + +/* 모바일 반응형 */ +@media (max-width: 768px) { + .myinfo-page { + padding: 1.25rem; + } + + .myinfo-title { + font-size: 1.5rem; + } + + .myinfo-tabs { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + + .myinfo-tabs::-webkit-scrollbar { + display: none; + } + + .myinfo-tab { + white-space: nowrap; + padding: 0.625rem 0.75rem; + font-size: 0.8rem; + } + + .myinfo-business-input-row { + flex-direction: column; + } + + .myinfo-business-submit { + width: 100%; + } +} + +/* ===================================================== + Content Upload Button (ADO2 콘텐츠 페이지) + ===================================================== */ + +.content-upload-btn { + width: 34px; + height: 34px; + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + background-color: #01393B; + border: none; + border-radius: 8px; + color: #6AB0B3; + cursor: pointer; + transition: background-color 0.2s; +} + +.content-upload-btn:hover:not(:disabled) { + background-color: #024648; +} + +.content-upload-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.content-upload-btn svg { + stroke: #6AB0B3; +} + diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css new file mode 100644 index 0000000..9e8e60d --- /dev/null +++ b/src/styles/dashboard.css @@ -0,0 +1,1187 @@ +/* ===================================================== + Dashboard Content Components + ===================================================== */ + +/* Dashboard Container */ +.dashboard-container { + width: 100%; + min-width: 375px; + padding: 0.75rem; + display: flex; + flex-direction: column; + background-color: var(--color-bg-dark); + color: var(--color-text-white); +} + +@media (min-width: 640px) { + .dashboard-container { + padding: 1rem; + } +} + +@media (min-width: 768px) { + .dashboard-container { + padding: 1.5rem; + } +} + +/* Dashboard Header */ +.dashboard-header { + flex-shrink: 0; + margin-bottom: 0.5rem; + margin-left: 2.5rem; +} + +@media (min-width: 640px) { + .dashboard-header { + margin-bottom: 0.75rem; + } +} + +@media (min-width: 768px) { + .dashboard-header { + margin-bottom: 1rem; + margin-left: 0; + } +} + +.dashboard-title { + font-size: 32px; + font-weight: 700; + letter-spacing: -0.025em; +} + +.dashboard-description { + font-size: 16px; + color: var(--color-text-gray-500); + margin-top: 0.125rem; +} + +/* Stats Grid */ +.stats-grid { + flex-shrink: 0; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +@media (min-width: 640px) { + .stats-grid { + gap: 0.75rem; + margin-bottom: 0.75rem; + } +} + +@media (min-width: 768px) { + .stats-grid { + margin-bottom: 1rem; + } +} + +/* Stat Card */ +.stat-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.5rem; + border: 1px solid var(--color-border-white-5); + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.125rem; + box-shadow: var(--shadow-xl); + transition: transform var(--transition-normal); +} + +@media (min-width: 640px) { + .stat-card { + padding: 0.75rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .stat-card { + padding: 1rem; + } +} + +.stat-card:hover { + transform: scale(1.02); +} + +.stat-label { + font-size: 14px; + font-weight: 700; + color: var(--color-text-gray-400); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.stat-value { + font-size: 24px; + font-weight: 700; + color: var(--color-text-white); + line-height: 1.25; +} + +.stat-trend { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: 12px; + color: var(--color-mint); + font-weight: 500; +} + +/* Chart Card */ +.chart-card { + flex: 1; + min-height: 0; + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.75rem; + border: 1px solid var(--color-border-white-5); + display: flex; + flex-direction: column; + position: relative; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + overflow: hidden; +} + +@media (min-width: 640px) { + .chart-card { + padding: 1rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .chart-card { + padding: 1.5rem; + border-radius: var(--radius-3xl); + } +} + +.chart-header { + flex-shrink: 0; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +@media (min-width: 640px) { + .chart-header { + margin-bottom: 0.75rem; + } +} + +@media (min-width: 768px) { + .chart-header { + margin-bottom: 1rem; + } +} + +.chart-title { + font-size: 8px; + font-weight: 700; + color: var(--color-text-gray-400); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.chart-legend { + display: flex; + gap: 0.375rem; + align-items: center; +} + +.chart-legend-dot { + width: 0.375rem; + height: 0.375rem; + border-radius: var(--radius-full); + background-color: var(--color-mint); +} + +.chart-legend-text { + font-size: 14px; + color: var(--color-text-gray-400); +} + +.chart-container { + flex: 1; + position: relative; + min-height: 0; +} + +.chart-badge { + position: absolute; + top: 45%; + left: 55%; + transform: translate(-50%, -100%); + margin-bottom: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + pointer-events: none; +} + +.chart-badge-value { + background-color: var(--color-mint); + color: var(--color-bg-dark); + padding: 0.125rem 0.5rem; + border-radius: var(--radius-md); + font-size: 9px; + font-weight: 700; + box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2); +} + +.chart-badge-line { + width: 2px; + height: 0.5rem; + background-color: rgba(166, 255, 234, 0.5); + margin-top: 0.125rem; +} + +@media (min-width: 640px) { + .chart-badge-line { + height: 0.75rem; + } +} + +.chart-xaxis { + flex-shrink: 0; + display: flex; + justify-content: space-between; + margin-top: 0.5rem; + padding: 0 0.5rem; + font-size: 8px; + color: var(--color-text-gray-500); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + border-top: 1px solid var(--color-border-white-5); + padding-top: 0.5rem; +} + +@media (min-width: 640px) { + .chart-xaxis { + margin-top: 0.75rem; + padding: 0 1rem; + font-size: 9px; + padding-top: 0.75rem; + } +} + +@media (min-width: 768px) { + .chart-xaxis { + margin-top: 1rem; + padding: 0 1.5rem; + } +} + +/* Dashboard Header Extended */ +.dashboard-header-row { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.5rem; +} + +@media (min-width: 768px) { + .dashboard-header-row { + margin-bottom: 1rem; + margin-left: 0; + align-items: center; + } +} + +.dashboard-last-updated { + font-size: 12px; + color: var(--color-text-gray-500); + display: none; +} + +@media (min-width: 768px) { + .dashboard-last-updated { + display: block; + font-size: 12px; + } +} + +/* Stats Grid 5 Columns */ +.stats-grid-5 { + flex-shrink: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 640px) { + .stats-grid-5 { + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; + margin-bottom: 1rem; + } +} + +@media (min-width: 768px) { + .stats-grid-5 { + grid-template-columns: repeat(5, 1fr); + } +} + +/* Stat Trend with Direction */ +.stat-trend-wrapper { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.stat-trend-icon { + width: 10px; + height: 10px; +} + +@media (min-width: 640px) { + .stat-trend-icon { + width: 12px; + height: 12px; + } +} + +.stat-trend.up { + color: var(--color-mint); +} + +.stat-trend.down { + color: #f87171; +} + +.stat-trend.neutral { + color: var(--color-text-gray-400); +} + +/* Dashboard Section */ +.dashboard-section { + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .dashboard-section { + margin-bottom: 1rem; + } +} + +.dashboard-section-title { + font-size: 24px; + font-weight: 600; + color: var(--color-text-white); + margin-bottom: 0.5rem; +} + +/* Chart Legend Dual (for YoY comparison) */ +.chart-legend-dual { + display: flex; + gap: 1rem; + align-items: center; +} + +.chart-legend-item { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.chart-legend-line { + width: 1rem; + height: 2px; + border-radius: var(--radius-full); +} + +.chart-legend-line.solid { + background-color: var(--color-mint); +} + +.chart-legend-line.dashed { + background: repeating-linear-gradient( + 90deg, + var(--color-purple) 0px, + var(--color-purple) 3px, + transparent 3px, + transparent 6px + ); +} + +/* Platform Tabs */ +.platform-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .platform-tabs { + margin-bottom: 1rem; + } +} + +.platform-tab { + padding: 0.5rem 0.75rem; + border-radius: var(--radius-full); + border: 1px solid var(--color-border-gray-700); + background-color: transparent; + color: var(--color-text-gray-400); + font-size: var(--text-xs); + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + display: flex; + align-items: center; + gap: 0.375rem; +} + +@media (min-width: 640px) { + .platform-tab { + padding: 0.5rem 1rem; + /* font-size: var(--text-sm); */ + gap: 0.5rem; + } +} + +.platform-tab:hover { + border-color: var(--color-border-gray-600); + color: var(--color-text-gray-300); +} + +.platform-tab.active { + border-color: var(--color-mint); + background-color: rgba(166, 255, 234, 0.1); + color: var(--color-mint); +} + +.platform-tab-icon { + width: 0.875rem; + height: 0.875rem; +} + +@media (min-width: 640px) { + .platform-tab-icon { + width: 1rem; + height: 1rem; + } +} + +/* Mode Toggle */ +.mode-toggle { + display: flex; + flex-shrink: 0; + border: 1px solid var(--color-border-gray-700); + border-radius: var(--radius-full); + overflow: hidden; +} + +.mode-btn { + min-width: 48px; + padding: 0.375rem 0.875rem; + background-color: transparent; + color: var(--color-text-gray-400); + font-size: 16px; + white-space: nowrap; + font-weight: 600; + cursor: pointer; + border: none; + transition: all var(--transition-normal); +} + +.mode-btn:hover { + color: var(--color-text-gray-300); + background-color: rgba(255, 255, 255, 0.05); +} + +.mode-btn.active { + background-color: rgba(166, 255, 234, 0.15); + color: var(--color-mint); +} + +/* Platform Metrics Grid */ +.platform-metrics-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; +} + +@media (min-width: 640px) { + .platform-metrics-grid { + gap: 0.75rem; + } +} + +@media (min-width: 768px) { + .platform-metrics-grid { + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + } +} + +/* Metric Card */ +.metric-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.75rem; + border: 1px solid var(--color-border-white-5); + display: flex; + flex-direction: column; + gap: 0.375rem; + box-shadow: var(--shadow-xl); + transition: transform var(--transition-normal); +} + +@media (min-width: 640px) { + .metric-card { + padding: 1rem; + border-radius: var(--radius-2xl); + gap: 0.5rem; + } +} + +.metric-card:hover { + transform: scale(1.02); +} + +.metric-card-header { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.metric-card-icon { + width: 1rem; + height: 1rem; + color: var(--color-text-gray-400); +} + +@media (min-width: 640px) { + .metric-card-icon { + width: 1.25rem; + height: 1.25rem; + } +} + +.metric-card-label { + font-size: var(--text-xs); + color: var(--color-text-gray-400); + font-weight: 500; +} + +@media (min-width: 640px) { + .metric-card-label { + font-size: var(--text-sm); + } +} + +.metric-card-value { + font-size: var(--text-xl); + font-weight: 700; + color: var(--color-text-white); + display: flex; + align-items: baseline; + gap: 0.25rem; +} + +.metric-card-unit { + font-size: var(--text-xs); + color: var(--color-text-gray-500); + font-weight: 400; +} + +.metric-card-trend { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 9px; + font-weight: 500; +} + +.metric-card-trend.up { + color: var(--color-mint); +} + +.metric-card-trend.down { + color: #f87171; +} + +.metric-card-trend-icon { + width: 10px; + height: 10px; +} + +@media (min-width: 640px) { + .metric-card-trend-icon { + width: 12px; + height: 12px; + } +} + +/* YoY Chart */ +.yoy-chart-card { + min-width: 351px; + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.5rem; + border: 1px solid var(--color-border-white-5); + box-shadow: var(--shadow-xl); + margin-bottom: 0.75rem; + overflow: hidden; +} + +@media (min-width: 640px) { + .yoy-chart-card { + padding: 1rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .yoy-chart-card { + padding: 1.5rem; + margin-bottom: 1rem; + } +} + +.yoy-chart-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .yoy-chart-header { + margin-bottom: 1rem; + } +} + +.yoy-chart-container { + position: relative; + width: 100%; + height: 180px; +} + +@media (min-width: 640px) { + .yoy-chart-container { + height: 220px; + } +} + +@media (min-width: 768px) { + .yoy-chart-container { + height: 280px; + } +} + +.yoy-chart-svg { + width: 100%; + height: 100%; +} + +.yoy-chart-xaxis { + display: flex; + justify-content: space-between; + margin-top: 0.5rem; + padding: 0; + font-size: 8px; + color: var(--color-text-gray-500); + font-weight: 500; +} + +@media (min-width: 640px) { + .yoy-chart-xaxis { + font-size: 9px; + margin-top: 0.75rem; + } +} + +@media (min-width: 768px) { + .yoy-chart-xaxis { + font-size: 10px; + } +} + +/* Chart Wrapper for Tooltip */ +.yoy-chart-wrapper { + position: relative; + width: 100%; + height: 100%; +} + +/* Chart Tooltip */ +.chart-tooltip { + background-color: rgba(28, 42, 46, 0.95); + border: 1px solid var(--color-border-white-10); + border-radius: var(--radius-lg); + padding: 0.75rem; + min-width: 120px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); + pointer-events: none; + z-index: 100; + animation: tooltipFadeIn 0.2s ease; +} + +@keyframes tooltipFadeIn { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } +} + +.chart-tooltip-title { + font-size: var(--text-sm); + font-weight: 600; + color: var(--color-text-white); + margin-bottom: 0.5rem; + text-align: center; +} + +.chart-tooltip-row { + display: flex; + align-items: center; + gap: 0.375rem; + margin-bottom: 0.25rem; +} + +.chart-tooltip-dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); +} + +.chart-tooltip-dot.mint { + background-color: var(--color-mint); +} + +.chart-tooltip-dot.purple { + background-color: var(--color-purple); +} + +.chart-tooltip-label { + font-size: var(--text-xs); + color: var(--color-text-gray-400); + flex: 1; +} + +.chart-tooltip-value { + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-text-white); +} + +.chart-tooltip-change { + margin-top: 0.5rem; + padding-top: 0.5rem; + border-top: 1px solid var(--color-border-white-5); + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-mint); + text-align: center; +} + +.chart-tooltip-change.down { + color: #ff6b6b; +} + +.chart-tooltip-change.neutral { + color: var(--color-text-gray-400); +} + +/* Chart Animations */ +.chart-line-animated { + stroke-dasharray: 2000; + stroke-dashoffset: 2000; + transition: stroke-dashoffset 1.5s ease-out; +} + +.chart-line-animated.visible { + stroke-dashoffset: 0; +} + +.chart-area-animated { + opacity: 0; + transition: opacity 0.8s ease-out 0.5s; +} + +.chart-area-animated.visible { + opacity: 1; +} + +.chart-point-animated { + opacity: 0; + transform-origin: center; + transition: opacity 0.3s ease; +} + +.chart-point-animated.visible { + opacity: 1; +} + +/* Platform Section Card */ +.platform-section-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.75rem; + border: 1px solid var(--color-border-white-5); + box-shadow: var(--shadow-xl); +} + +@media (min-width: 640px) { + .platform-section-card { + padding: 1rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .platform-section-card { + padding: 1.5rem; + } +} + +.platform-section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; + flex-wrap: wrap; + gap: 0.5rem; +} + +@media (min-width: 768px) { + .platform-section-header { + margin-bottom: 1rem; + } +} + +/* Stats Grid 8 Columns */ +.stats-grid-8 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 0.5rem; +} + +@media (min-width: 640px) { + .stats-grid-8 { + gap: 0.75rem; + } +} + +/* Platform Metrics Grid 8 Columns */ +.platform-metrics-grid-8 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; +} + +@media (min-width: 640px) { + .platform-metrics-grid-8 { + grid-template-columns: repeat(4, 1fr); + gap: 0.75rem; + } +} + +@media (min-width: 1024px) { + .platform-metrics-grid-8 { + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + } +} + +/* Dashboard Two Column Layout */ +.dashboard-two-column { + display: grid; + grid-template-columns: 1fr; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 1024px) { + .dashboard-two-column { + grid-template-columns: 2fr 1fr; + gap: 1rem; + margin-bottom: 1rem; + } +} + +/* Top Content Card */ +.top-content-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 0.75rem; + border: 1px solid var(--color-border-white-5); + box-shadow: var(--shadow-xl); +} + +@media (min-width: 640px) { + .top-content-card { + padding: 1rem; + border-radius: var(--radius-2xl); + } +} + +@media (min-width: 768px) { + .top-content-card { + padding: 1rem; + } +} + +.top-content-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.top-content-item { + display: flex; + gap: 0.75rem; + padding: 0.5rem; + border-radius: var(--radius-lg); + background-color: var(--color-bg-card-inner); + transition: transform var(--transition-normal); +} + +.top-content-item:hover { + transform: scale(1.01); +} + +.top-content-thumbnail { + position: relative; + width: 80px; + height: 45px; + border-radius: var(--radius-md); + overflow: hidden; + flex-shrink: 0; +} + +@media (min-width: 640px) { + .top-content-thumbnail { + width: 100px; + height: 56px; + } +} + +.top-content-thumbnail img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.top-content-platform-badge { + position: absolute; + bottom: 4px; + right: 4px; + background-color: rgba(0, 0, 0, 0.7); + border-radius: var(--radius-sm); + padding: 2px; + display: flex; + align-items: center; + justify-content: center; +} + +.top-content-platform-icon { + width: 12px; + height: 12px; + color: white; +} + +.top-content-info { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.25rem; +} + +.top-content-title { + max-width: 215px; + font-size: 14px; + font-weight: 600; + color: var(--color-text-white); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.top-content-stats { + display: flex; + gap: 0.75rem; +} + +.top-content-stat { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 12px; + color: var(--color-text-gray-400); +} + +.top-content-stat svg { + color: var(--color-text-gray-500); +} + +.top-content-date { + font-size: 12px; + color: var(--color-text-gray-500); +} + +/* Audience Section */ +.audience-section { + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .audience-section { + margin-bottom: 1rem; + } +} + +.audience-cards { + display: grid; + grid-template-columns: 1fr; + gap: 0.75rem; +} + +@media (min-width: 768px) { + .audience-cards { + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + } +} + +.audience-card { + background-color: var(--color-bg-card); + border-radius: var(--radius-xl); + padding: 1rem; + border: 1px solid var(--color-border-white-5); + box-shadow: var(--shadow-xl); +} + +@media (min-width: 640px) { + .audience-card { + padding: 1.25rem; + border-radius: var(--radius-2xl); + } +} + +.audience-card-title { + font-size: 20px; + font-weight: 600; + color: var(--color-text-gray-300); + margin-bottom: 1rem; +} + +/* Audience Bar Chart */ +.audience-bar-chart { + display: flex; + flex-direction: column; + gap: 0.625rem; +} + +.audience-bar-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.audience-bar-label { + font-size: 14px; + color: var(--color-text-gray-400); + width: 60px; + flex-shrink: 0; +} + +.audience-bar-track { + flex: 1; + height: 8px; + background-color: var(--color-bg-card-inner); + border-radius: var(--radius-full); + overflow: hidden; +} + +.audience-bar-fill { + height: 100%; + background: linear-gradient(90deg, var(--color-mint), var(--color-purple)); + border-radius: var(--radius-full); + transition: width 0.5s ease-out; +} + +.audience-bar-value { + font-size: 14px; + color: var(--color-text-white); + width: 36px; + text-align: right; + flex-shrink: 0; +} + +/* Gender Chart */ +.gender-chart { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.gender-chart-bars { + display: flex; + height: 32px; + border-radius: var(--radius-full); + overflow: hidden; +} + +.gender-bar { + display: flex; + align-items: center; + justify-content: center; + transition: width 0.5s ease-out; +} + +.gender-bar span { + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-bg-dark); +} + +.gender-bar.male { + background: linear-gradient(90deg, #60a5fa, #3b82f6); +} + +.gender-bar.female { + background: linear-gradient(90deg, #f472b6, #ec4899); +} + +.gender-chart-labels { + display: flex; + justify-content: space-between; +} + +.gender-label { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 14px; + color: var(--color-text-gray-400); +} + +.gender-label::before { + content: ''; + width: 8px; + height: 8px; + border-radius: var(--radius-full); +} + +.gender-label.male::before { + background-color: #3b82f6; +} + +.gender-label.female::before { + background-color: #ec4899; +} + diff --git a/src/styles/generation-flow.css b/src/styles/generation-flow.css new file mode 100644 index 0000000..3c1ca38 --- /dev/null +++ b/src/styles/generation-flow.css @@ -0,0 +1,2809 @@ +/* ===================================================== + Completion Page Components + ===================================================== */ + +/* Completion Page Title */ +.completion-title { + font-size: 1.75rem; + font-weight: 600; + color: #E5F1F2; + line-height: 1.19; + letter-spacing: -0.006em; + margin: 0 0 1.5rem 0; + text-align: center; + padding: 0 1rem; +} + +@media (min-width: 768px) { + .completion-title { + font-size: 2.5rem; + margin-bottom: 2rem; + } +} + +/* Completion Container - wrapper for the two cards */ +.completion-container { + margin: 0 auto 1.5rem auto; + max-width: 1400px; + width: calc(100% - 4rem); + display: flex; + flex-direction: column; + gap: 1.5rem; + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; +} + +@media (min-width: 1024px) { + .completion-container { + flex-direction: row; + gap: 2rem; + max-width: 1400px; + overflow: hidden; + } +} + +@media (min-width: 1280px) { + .completion-container { + max-width: 1600px; + } +} + +@media (max-width: 480px) { + .completion-container { + width: calc(100% - 2rem); + gap: 1.25rem; + } +} + +@media (min-width: 481px) and (max-width: 767px) { + .completion-container { + width: calc(100% - 3rem); + } +} + +/* Completion Columns */ +.completion-column { + display: flex; + flex-direction: column; +} + +.completion-column-left { + width: 100%; + min-width: 0; + flex-shrink: 0; +} + +.completion-column-right { + width: 100%; + flex-shrink: 0; +} + +@media (min-width: 1024px) { + .completion-column-left { + flex: 1; + width: auto; + } + + .completion-column-right { + width: 400px; + } +} + +@media (min-width: 1280px) { + .completion-column-right { + width: 450px; + } +} + +/* Video Preview Card & Sharing Card - uses asset-column base + card styling */ +.video-preview-card, +.sharing-card { + background-color: #01393B; + border-radius: 40px; + padding: 1.5rem; + border: none; + box-shadow: none; + overflow: hidden; + display: flex; + flex-direction: column; + gap: 1.25rem; + flex-shrink: 0; +} + +@media (min-width: 768px) { + .video-preview-card, + .sharing-card { + padding: 2rem; + } +} + +@media (min-width: 1024px) { + .video-preview-card { + flex-shrink: 1; + flex: 1; + min-height: 0; + } + + .video-preview-card, + .sharing-card { + padding: 2.5rem; + } +} + +/* Completion Video Wrapper */ +.completion-video-wrapper { + display: flex; + flex-direction: column; +} + +@media (min-width: 1024px) { + .completion-video-wrapper { + flex: 1; + min-height: 0; + } +} + +/* Video Container for Completion - always 16:9 aspect ratio (horizontal letterbox) */ +.video-preview-card .video-container { + position: relative; + aspect-ratio: 16 / 9; + width: 100%; + max-width: 100%; + margin: 0 auto; + background-color: #000; +} + +@media (min-width: 768px) { + .video-preview-card .video-container { + max-width: 100%; + } +} + +@media (min-width: 1024px) { + .video-preview-card .video-container { + max-width: 100%; + } +} + +/* Video Overlay */ +.video-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); + padding: 1.5rem; + pointer-events: none; +} + +.video-overlay-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.video-overlay-title { + font-size: 1.25rem; + font-weight: 800; + color: #FFFFFF; + line-height: 1.3; + letter-spacing: -0.006em; + text-align: center; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + margin: 0; +} + +.video-overlay-logo { + font-size: 0.375rem; + font-weight: 400; + color: rgba(255, 255, 255, 0.6); + line-height: 1.3; + letter-spacing: -0.006em; + text-align: center; + align-self: flex-end; +} + +/* AI Optimization Section */ +.ai-optimization-section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.75rem; + padding: 1rem; + background-color: #002224; + border-radius: 8px; +} + +@media (min-width: 768px) { + .ai-optimization-section { + flex-direction: row; + gap: 1.25rem; + } +} + +.ai-optimization-title { + font-size: 0.875rem; + font-weight: 600; + color: #94FBE0; + line-height: 1.19; + letter-spacing: -0.006em; + margin: 0; + flex-shrink: 0; +} + +.ai-optimization-tags { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; +} + +@media (min-width: 768px) { + .ai-optimization-tags { + gap: 1.25rem; + justify-content: flex-start; + } +} + +.ai-tag { + display: flex; + align-items: center; + gap: 0.5rem; + height: 20px; +} + +.ai-tag-dot { + width: 6px; + height: 6px; + background-color: #94FBE0; + border-radius: 50%; + flex-shrink: 0; +} + +.ai-tag-text { + font-size: 0.875rem; + font-weight: 400; + color: #E5F1F2; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Sharing Card Layout */ +.sharing-card { + justify-content: space-between; +} + +.sharing-content { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.sharing-actions { + display: flex; + flex-direction: column; + gap: 0.75rem; + flex-shrink: 0; +} + +/* Social List New */ +.social-list-new { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.completion-social-card { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + padding: 1rem; + background-color: #002224; + border-radius: 8px; + cursor: pointer; + transition: all var(--transition-normal); +} + +.completion-social-card:hover:not(.disabled) { + background-color: #01393B; +} + +.completion-social-card.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.completion-social-info { + display: flex; + align-items: center; + gap: 1rem; +} + +.completion-social-logo { + width: 32px; + height: 32px; + object-fit: cover; + object-position: center; + flex-shrink: 0; + border-radius: 4px; + background-color: transparent; +} + +.completion-social-name { + font-size: 0.875rem; + font-weight: 400; + color: #FFFFFF; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.completion-social-email { + font-size: 0.75rem; + font-weight: 400; + color: #94FBE0; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Social Card - Text Layout */ +.completion-social-text { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.completion-social-channel { + font-size: 0.75rem; + font-weight: 400; + color: #94FBE0; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Connected Account Display */ +.completion-social-thumbnail { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + border: 2px solid #94FBE0; +} + +.completion-social-channel-name { + font-size: 0.875rem; + font-weight: 600; + color: #FFFFFF; + line-height: 1.2; +} + +.completion-social-platform { + font-size: 0.7rem; + font-weight: 400; + color: rgba(255, 255, 255, 0.5); + line-height: 1.2; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Social Card States */ +.completion-social-card.connected { + border: 1px solid rgba(166, 255, 234, 0.3); + background-color: rgba(0, 34, 36, 0.8); +} + +.completion-social-card.selected { + border: 1px solid #94FBE0; + background-color: rgba(148, 251, 224, 0.1); +} + +/* Social Card Status */ +.completion-social-status { + font-size: 0.75rem; + font-weight: 500; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + white-space: nowrap; +} + +.completion-social-status.connected { + color: #94FBE0; + background-color: rgba(148, 251, 224, 0.15); + display: flex; + align-items: center; + gap: 0.25rem; +} + +.completion-social-status.connecting { + color: #fbbf24; + background-color: rgba(251, 191, 36, 0.15); +} + +.completion-social-status.not-connected { + color: #9ca3af; + background-color: rgba(156, 163, 175, 0.15); +} + +/* Social Card Actions */ +.completion-social-actions { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.completion-social-disconnect { + font-size: 0.75rem; + font-weight: 500; + color: #f87171; + background: transparent; + border: none; + cursor: pointer; + padding: 0.25rem 0.5rem; + border-radius: 4px; + transition: all var(--transition-normal); +} + +.completion-social-disconnect:hover { + background-color: rgba(248, 113, 113, 0.15); +} + +/* Completion Buttons */ +.btn-completion-deploy { + width: 100%; + padding: 0.625rem 2.5rem; + background-color: #AE72F9; + border: none; + border-radius: var(--radius-full); + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + line-height: 1.19; + letter-spacing: -0.006em; + height: 48px; +} + +.btn-completion-deploy:hover:not(:disabled) { + background-color: #9B5FE0; +} + +.btn-completion-deploy:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.btn-completion-download { + width: 100%; + padding: 0.625rem 2.5rem; + background-color: transparent; + border: 1px solid #AE72F9; + border-radius: var(--radius-full); + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + line-height: 1.19; + letter-spacing: -0.006em; + height: 48px; +} + +.btn-completion-download:hover:not(:disabled) { + border-color: #9B5FE0; + background-color: rgba(174, 114, 249, 0.1); +} + +.btn-completion-download:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ===================================================== + Completion v2 (피그마 디자인 기반) + ===================================================== */ + +.comp2-page { + height: 100%; + background: #002224; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.comp2-header { + padding: 8px 32px; + height: 64px; + display: flex; + align-items: center; + flex-shrink: 0; +} + +.comp2-back-btn { + display: flex; + align-items: center; + gap: 4px; + background-color: #462E64; + color: #CFABFB; + font-size: 0.875rem; + font-weight: 600; + padding: 0 1.25rem 0 0.5rem; + height: 36px; + border: 1px solid #694596; + border-radius: 999px; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.2s; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.comp2-back-btn:hover { + background-color: #5a3a80; +} + +.comp2-container { + width: calc(100% - 64px); + max-width: 1440px; + margin: 16px auto; + background: #01393B; + border-radius: 24px; + padding: 24px; + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + overflow: hidden; +} + +.comp2-title-row { + padding: 16px; + text-align: center; + flex-shrink: 0; +} + +.comp2-page-title { + font-size: 30px; + font-weight: 700; + color: #FFFFFF; + letter-spacing: -0.006em; + line-height: 1.3; + margin-bottom: 8px; +} + +.comp2-page-subtitle { + font-size: 16px; + font-weight: 400; + color: #9BCACC; + line-height: 1.29; +} + + +.comp2-grid { + display: flex; + gap: 24px; + flex: 1; + min-height: 0; + overflow: hidden; +} + +/* 영상 섹션 */ +.comp2-video-section { + flex: 0 0 60%; + display: flex; + flex-direction: column; + min-width: 0; + overflow: hidden; +} + +.comp2-video-wrapper { + background: #01191A; + border-radius: 16px; + position: relative; + overflow: hidden; + width: 100%; + flex: 1; + min-height: 0; +} + +.comp2-video-player { + width: 100%; + height: 100%; + object-fit: contain; + cursor: pointer; + background: #01191A; +} + +.comp2-video-placeholder { + width: 100%; + height: 100%; + background: #01191A; +} + +.comp2-video-loading, +.comp2-video-error { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; +} + +.comp2-loading-text { + color: #9BCACC; + margin-top: 16px; +} + +.comp2-error-icon { + width: 64px; + height: 64px; + color: #E15252; + margin-bottom: 16px; +} + +.comp2-error-text { + color: #9BCACC; + margin-bottom: 16px; + text-align: center; +} + +.comp2-retry-btn { + padding: 10px 20px; + background: rgba(174, 114, 249, 0.36); + border-radius: 8px; + color: #CFABFB; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s; +} + +.comp2-retry-btn:hover { + opacity: 0.85; +} + +/* 영상 컨트롤 */ +.comp2-video-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); + padding: 24px 24px 16px; + display: flex; + flex-direction: column; + gap: 16px; + transition: opacity 0.3s ease; +} + +.comp2-video-controls.visible { + opacity: 1; + pointer-events: auto; +} + +.comp2-video-controls.hidden { + opacity: 0; + pointer-events: none; +} + +.comp2-progress-bar { + width: 100%; + height: 8px; + background: #034A4D; + border-radius: 999px; + overflow: hidden; +} + +.comp2-progress-fill { + height: 100%; + background: #E5F1F2; + border-radius: 999px; + transition: width 0.1s linear; +} + +.comp2-controls-row { + display: flex; + align-items: center; + gap: 32px; +} + +.comp2-play-btn { + width: 32px; + height: 32px; + color: #FFFFFF; + cursor: pointer; + flex-shrink: 0; +} + +.comp2-volume-control { + display: flex; + align-items: center; + gap: 8px; + flex: 1; +} + +.comp2-volume-control svg { + width: 32px; + height: 32px; + color: #FFFFFF; + flex-shrink: 0; +} + +.comp2-volume-bar { + flex: 1; + height: 4px; + background: #034A4D; + border-radius: 999px; + overflow: hidden; +} + +.comp2-volume-fill { + width: 40%; + height: 100%; + background: #E5F1F2; + border-radius: 999px; +} + +.comp2-time-display { + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.375; + letter-spacing: -0.006em; +} + +.comp2-time-current { + color: #E5F1F2; +} + +.comp2-time-divider { + color: #9BCACC; +} + +.comp2-time-total { + color: #9BCACC; +} + +/* 정보 섹션 */ +.comp2-info-section { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + position: relative; + min-height: 0; + border-left: 3px solid #067C80; + padding-left: 16px; +} + +.comp2-info-header { + display: flex; + align-items: center; + flex-shrink: 0; +} + +.comp2-info-label { + font-size: 16px; + font-weight: 400; + color: #9BCACC; + line-height: 1.29; +} + +.comp2-info-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: auto; + min-height: 0; + padding-right: 4px; +} + +/* 스크롤바 스타일링 */ +.comp2-info-content::-webkit-scrollbar { + width: 4px; +} + +.comp2-info-content::-webkit-scrollbar-track { + background: transparent; +} + +.comp2-info-content::-webkit-scrollbar-thumb { + background: #067C80; + border-radius: 999px; +} + +.comp2-info-content::-webkit-scrollbar-thumb:hover { + background: #088a8e; +} + +.comp2-file-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.comp2-filename { + font-size: 20px; + font-weight: 700; + color: #FFFFFF; + letter-spacing: -0.006em; + line-height: 1.3; +} + +.comp2-filesize { + font-size: 14px; + font-weight: 400; + color: #9BCACC; + line-height: 1.29; +} + +.comp2-divider { + width: 100%; + height: 1px; + background: #046266; +} + +.comp2-meta-grid { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; +} + +.comp2-meta-item { + display: flex; +} + +.comp2-meta-label { + font-size: 16px; + font-weight: 400; + color: #9BCACC; + line-height: 1.29; +} + +.comp2-meta-divider { + width: 100%; + height: 1px; + background: #046266; +} + +.comp2-lyrics-section { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.comp2-lyrics-text { + font-size: 16px; + font-weight: 400; + color: #E5F1F2; + line-height: 1.625; + letter-spacing: -0.006em; + white-space: pre-line; + flex: 1; + margin: 0; +} + +.comp2-lyrics-paragraphs { + display: flex; + flex-direction: column; + gap: 1rem; + flex: 1; +} + +.comp2-lyrics-para-section { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.comp2-lyrics-tag { + font-size: 12px; + font-weight: 700; + color: #379599; + letter-spacing: 0.05em; +} + +/* 소셜 연결 섹션 */ +.comp2-social-connect-section { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; +} + +.comp2-social-header { + display: flex; + gap: 4px; +} + +.comp2-social-label { + font-size: 14px; + font-weight: 400; + color: #E5F1F2; + line-height: 1.29; +} + +.comp2-required-mark { + font-size: 14px; + font-weight: 400; + color: #E15252; + line-height: 1.29; +} + +.comp2-social-buttons { + display: flex; + flex-direction: column; + gap: 12px; +} + +.comp2-social-connect-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 10px 20px; + background: rgba(148, 251, 224, 0.11); + border-radius: 16px; + cursor: pointer; + transition: opacity 0.2s; +} + +.comp2-social-connect-btn:hover { + opacity: 0.85; +} + +.comp2-social-connect-btn svg { + flex-shrink: 0; +} + +.comp2-social-connect-btn span { + font-size: 14px; + font-weight: 600; + color: #76C9B3; + letter-spacing: -0.006em; + line-height: 1.19; + text-align: center; +} + +.comp2-error-message { + font-size: 14px; + color: #E15252; + margin-top: 8px; +} + +/* 하단 버튼 */ +.comp2-buttons { + display: flex; + gap: 8px; + flex-shrink: 0; + margin-top: auto; +} + +.comp2-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 8px 12px; + flex: 1; + height: 40px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.006em; + line-height: 1.19; + text-align: center; + cursor: pointer; + transition: opacity 0.2s; + white-space: nowrap; +} + +.comp2-btn-secondary { + background: rgba(174, 114, 249, 0.36); + color: #CFABFB; +} + +.comp2-btn-secondary:hover:not(:disabled) { + opacity: 0.85; +} + +.comp2-btn-secondary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.comp2-btn-primary { + background: #AE72F9; + color: #FFFFFF; +} + +.comp2-btn-primary:hover:not(:disabled) { + opacity: 0.85; +} + +.comp2-btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* 반응형 */ +@media (max-width: 1024px) { + .comp2-container { + width: calc(100% - 32px); + margin: 16px; + padding: 16px; + overflow-y: auto; + } + + .comp2-grid { + flex-direction: column; + gap: 16px; + overflow: visible; + flex: none; + height: auto; + min-height: auto; + } + + .comp2-video-section { + flex: none; + width: 100%; + } + + .comp2-video-wrapper { + flex: none; + height: auto; + } + + .comp2-video-player { + height: auto; + } + + .comp2-info-section { + flex: none; + border-left: none; + padding-left: 0; + border-top: 3px solid #067C80; + padding-top: 16px; + } + + .comp2-info-content { + flex: none; + height: auto; + overflow: visible; + min-height: auto; + } + + .comp2-buttons { + flex-direction: row; + margin-top: 16px; + } +} + +/* ===================================================== + Analysis Result Page Components + ===================================================== */ + +/* Analysis Page Wrapper - 전체 레이아웃 */ +.analysis-page-wrapper { + display: flex; + width: 100%; + height: 100vh; + height: 100dvh; + background-color: #002224; + color: white; +} + +/* Analysis Page Main - 스크롤 가능한 메인 영역 */ +.analysis-page-main { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + height: 100%; +} + +/* Analysis Container - 콘텐츠 래퍼 */ +.analysis-container { + width: 100%; + min-height: 100%; + color: var(--color-text-white); + display: flex; + flex-direction: column; + align-items: center; + background-color: #002224; + box-sizing: border-box; + padding: 0 16px 120px 16px; /* 고정 버튼 영역 확보 */ +} + +@media (min-width: 768px) { + .analysis-container { + padding: 0 32px 120px 32px; + } +} + +/* Header Area (Back Button + Title) */ +.analysis-header-area { + width: 100%; + max-width: 1440px; + padding: 8px 0; + box-sizing: border-box; +} + +/* Analysis Header */ +.analysis-header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 24px 0; +} + +.analysis-icon { + color: var(--color-purple); + margin-bottom: 12px; +} + +.analysis-icon svg { + width: 40px; + height: 40px; +} + +/* Analysis Grid - 모바일: 세로 배치, 데스크톱: 가로 배치 */ +.analysis-grid { + width: 100%; + max-width: 1440px; + display: flex; + flex-direction: column; + gap: 24px; + box-sizing: border-box; +} + +/* 데스크톱(1024px 이상)에서 가로 배치 */ +@media (min-width: 1024px) { + .analysis-grid { + flex-direction: row; + align-items: flex-start; + gap: 40px; + padding: 0 200px; + } +} + +/* Brand Identity Card - 왼쪽 */ +.brand-identity-card { + background-color: #01393B; + border-radius: 24px; + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; + border: none; + box-shadow: none; + width: 100%; + box-sizing: border-box; +} + +@media (min-width: 768px) { + .brand-identity-card { + border-radius: 40px; + padding: 32px; + gap: 32px; + } +} + +@media (min-width: 1024px) { + .brand-identity-card { + flex: 1; + } +} + +.brand-header { + display: flex; + align-items: center; + gap: 8px; +} + +.brand-content { + display: flex; + flex-direction: column; + gap: 16px; +} + +.brand-name { + font-size: 20px; + font-weight: 700; + color: #E5F1F2; + letter-spacing: -0.006em; + margin: 0; + line-height: 1.2; +} + +@media (min-width: 768px) { + .brand-name { + font-size: 24px; + } +} + +.brand-location { + color: #6AB0B3; + font-size: 14px; + letter-spacing: -0.006em; + margin: 0; + line-height: 1.2; +} + +.brand-subtitle { + color: #6AB0B3; + font-size: 14px; + font-weight: 400; + letter-spacing: -0.006em; +} + +.brand-info { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +/* Report Content */ +.report-content { + color: #CEE5E6; + font-family: 'Pretendard', sans-serif; + font-size: 15px; + font-weight: 500; + line-height: 1.5; + letter-spacing: -0.006em; +} + +@media (min-width: 768px) { + .report-content { + font-size: 17px; + line-height: 1.45; + } +} + +/* Right Side Cards Container */ +.analysis-cards-column { + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; +} + +/* 데스크톱(1024px 이상)에서만 sticky 적용 */ +@media (min-width: 1024px) { + .analysis-cards-column { + flex: 1; + position: sticky; + top: 40px; + align-self: flex-start; + } +} + +/* Feature Card for Analysis Page */ +.analysis-cards-column .feature-card { + background-color: #01393B; + border-radius: 24px; + padding: 24px; + border: none; + box-shadow: none; + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; + box-sizing: border-box; +} + +@media (min-width: 768px) { + .analysis-cards-column .feature-card { + border-radius: 40px; + padding: 32px; + gap: 32px; + } +} + +/* Selling Points Card */ +.selling-points-card { + flex: 1; +} + +/* Selling Points Grid - 모바일: 1열, 태블릿 이상: 2열 */ +.selling-points-grid { + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +@media (min-width: 640px) { + .selling-points-grid { + grid-template-columns: 1fr 1fr; + gap: 0; + } +} + +/* Selling Point Item */ +.selling-point-item { + background-color: #034A4D; + padding: 20px 16px; + display: flex; + flex-direction: column; + gap: 12px; + border-radius: 16px; +} + +@media (min-width: 640px) { + .selling-point-item { + padding: 24px 20px; + gap: 16px; + border-radius: 0; + } + /* 첫 번째 행 왼쪽 */ + .selling-point-item:nth-child(1) { + border-radius: 16px 0 0 0; + } + /* 첫 번째 행 오른쪽 */ + .selling-point-item:nth-child(2) { + border-radius: 0 16px 0 0; + } + /* 마지막 행 왼쪽 */ + .selling-point-item:nth-last-child(2):nth-child(odd) { + border-radius: 0 0 0 16px; + } + /* 마지막 행 오른쪽 */ + .selling-point-item:nth-last-child(1):nth-child(even) { + border-radius: 0 0 16px 0; + } +} + +.selling-point-title { + font-family: 'Pretendard', sans-serif; + font-size: 14px; + font-weight: 600; + color: #6AB0B3; + letter-spacing: -0.006em; + line-height: 1; +} + +.selling-point-content { + display: flex; + flex-direction: column; + gap: 8px; +} + +.selling-point-content p { + font-family: 'Pretendard', sans-serif; + font-size: 15px; + font-weight: 500; + color: #CEE5E6; + letter-spacing: -0.006em; + line-height: 1.2; + margin: 0; +} + +@media (min-width: 768px) { + .selling-point-content p { + font-size: 17px; + line-height: 1; + } +} + +/* Keywords Card */ +.keywords-card { + flex-shrink: 0; +} + +/* Tags Wrapper */ +.tags-wrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-content: flex-start; +} + +/* Feature Tag - 피그마: pill 형태 */ +.feature-tag { + padding: 8px 16px; + background-color: #034A4D; + border-radius: 999px; + font-family: 'Pretendard', sans-serif; + font-size: 15px; + font-weight: 500; + color: #CEE5E6; + letter-spacing: -0.006em; + border: none; +} + +@media (min-width: 768px) { + .feature-tag { + font-size: 17px; + } +} + +/* Analysis Bottom Button - 화면 하단 고정 */ +.analysis-bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: 20px 16px; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + background: linear-gradient(to top, #002224 70%, transparent); + z-index: 100; +} + +@media (min-width: 768px) { + .analysis-bottom { + padding: 24px 32px; + } +} + +.analysis-bottom .btn-primary { + width: 160px; + height: 48px; + padding: 10px 24px; + background-color: #AE72F9; + border-radius: 999px; + font-family: 'Pretendard', sans-serif; + font-size: 14px; + font-weight: 600; + color: #FFFFFF; + letter-spacing: -0.006em; + border: none; + cursor: pointer; + transition: background-color 0.2s ease; + box-shadow: 0 4px 20px rgba(174, 114, 249, 0.4); +} + +.analysis-bottom .btn-primary:hover { + background-color: #9B5DE5; +} + +/* ===================================================== + Brand Intelligence Page Typography (3단계 체계) + - Title: 24px (섹션 제목) + - Body: 16px (본문) + - Label: 14px (라벨, 태그) + ===================================================== */ + +/* 페이지 헤더 */ +.bi-page-header { + text-align: center; + margin-bottom: 48px; + padding: 0 16px; +} + +.bi-page-icon { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.bi-star-icon { + width: 48px; + height: 48px; + animation: twinkle 2.5s ease-in-out infinite; +} + +@keyframes twinkle { + 0%, 100% { + opacity: 0.7; + transform: scale(1); + filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4)); + } + 50% { + opacity: 1; + transform: scale(1.05); + filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.7)); + } +} + +.bi-page-title { + font-size: 32px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.bi-page-desc { + font-size: 16px; + color: #6AB0B3; + line-height: 1.6; + max-width: 600px; + margin: 0 auto; +} + +.bi-page-desc .highlight { + color: #2dd4bf; + font-weight: 600; +} + +/* 카드 공통 스타일 */ +.bi-card { + background-color: #01393B; + border-radius: 24px; + padding: 32px; + border: 1px solid rgba(106, 176, 179, 0.1); +} + +.bi-card-title { + font-size: 18px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 24px; +} + + +/* 섹션 라벨 */ +.bi-section-label { + font-size: 18px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 8px; +} + +/* 브랜드명 (대형) */ +.bi-brand-name { + font-size: 32px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 12px; + letter-spacing: -0.02em; +} + +/* 주소/위치 정보 */ +.bi-location { + font-size: 16px; + color: #6AB0B3; + line-height: 1.5; + display: flex; + align-items: flex-start; + gap: 8px; +} + +.bi-location svg { + flex-shrink: 0; + margin-top: 2px; +} + +/* 본문 텍스트 */ +.bi-body-text { + font-size: 16px; + color: rgba(255, 255, 255, 0.9); + line-height: 1.7; +} + +/* 서브 섹션 제목 */ +.bi-subsection-title { + font-size: 14px; + font-weight: 600; + color: #2dd4bf; + margin-bottom: 8px; +} + +/* 값/내용 강조 */ +.bi-value { + font-size: 16px; + font-weight: 600; + color: #FFFFFF; + line-height: 1.5; +} + +.bi-value-large { + font-size: 24px; + font-weight: 700; + color: #FFFFFF; + line-height: 1.4; +} + +/* 내부 카드/박스 */ +.bi-inner-box { + background-color: rgba(0, 34, 36, 0.5); + border-radius: 16px; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.bi-inner-box-accent { + background: linear-gradient(to right, rgba(0, 34, 36, 0.5), rgba(1, 57, 59, 0.8)); + border-left: 4px solid #2dd4bf; +} + +/* 태그/뱃지 */ +.bi-tag { + font-size: 14px; + padding: 6px 12px; + background-color: rgba(45, 212, 191, 0.1); + color: #2dd4bf; + border-radius: 6px; + font-weight: 500; +} + +.bi-tag-outline { + font-size: 16px; + padding: 10px 20px; + background-color: transparent; + color: #FFFFFF; + border: 1px solid rgba(106, 176, 179, 0.3); + border-radius: 100px; +} + +.bi-tag-outline:hover { + border-color: rgba(45, 212, 191, 0.5); +} + +/* USP 카드 */ +.bi-usp-top { + background: linear-gradient(to right, rgba(45, 212, 191, 0.1), rgba(174, 114, 249, 0.1)); + border: 1px solid rgba(45, 212, 191, 0.3); + border-radius: 16px; + padding: 24px; + margin-bottom: 24px; +} + +.bi-usp-item { + background-color: rgba(0, 34, 36, 0.4); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 16px; + padding: 20px; +} + +.bi-usp-category { + font-size: 13px; + font-weight: 500; + color: #6AB0B3; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 8px; +} + +.bi-usp-category-accent { + color: #2dd4bf; +} + +.bi-usp-description { + font-size: 15px; + font-weight: 400; + color: rgba(255, 255, 255, 0.7); + line-height: 1.5; +} + +.bi-usp-badge { + font-size: 14px; + padding: 4px 12px; + background-color: rgba(45, 212, 191, 0.2); + color: #2dd4bf; + border-radius: 4px; + font-weight: 600; +} + +.bi-usp-english-category { + font-size: 13px; + font-weight: 500; + color: #6AB0B3; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.bi-usp-korean-category { + font-size: 20px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 6px; +} + +.bi-usp-score { + font-size: 24px; + font-weight: 700; + color: #6AB0B3; +} + +/* 페르소나 카드 */ +.bi-persona-name { + font-size: 16px; + font-weight: 700; + color: #FFFFFF; + margin-bottom: 4px; +} + +.bi-persona-age { + font-size: 14px; + color: #6AB0B3; +} + +.bi-persona-trigger { + font-size: 14px; + color: rgba(255, 255, 255, 0.7); + line-height: 1.5; + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding-top: 12px; + margin-top: 12px; +} + +.bi-persona-trigger strong { + color: #2dd4bf; + font-weight: 600; +} + +/* 레이더 차트 라벨 */ +.bi-chart-label { + font-size: 14px; + fill: rgba(255, 255, 255, 0.9); + font-weight: 600; +} + +.bi-chart-sublabel { + font-size: 13px; + fill: rgba(255, 255, 255, 0.5); + font-weight: 500; +} + +/* 반응형 */ +@media (min-width: 768px) { + .bi-page-title { + font-size: 40px; + } + + .bi-page-desc { + font-size: 18px; + } + + .bi-brand-name { + font-size: 36px; + } +} + +/* ===================================================== + Brand Intelligence v2 + ===================================================== */ + +.bi2-page { + display: flex; + width: 100%; + min-height: 100vh; + padding-bottom: 100px; + flex-direction: column; + align-items: center; + background: linear-gradient(to bottom, #002224, #01191a); + color: #E5F1F2; + font-family: 'Pretendard', sans-serif; + overflow-x: auto; +} + +/* 헤더 */ +.bi2-header { + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 8px 1rem; + height: 64px; + z-index: 30; +} + +@media (min-width: 768px) { + .bi2-header { + padding: 8px 2rem; + } + + body:has(.sidebar.expanded) .bi2-header { + left: 15rem; + } + + body:has(.sidebar.collapsed) .bi2-header { + left: 5rem; + } +} + +.bi2-back-btn { + display: flex; + align-items: center; + gap: 4px; + padding: 8px 20px 8px 8px; + background: #462E64; + border: 1px solid #694596; + border-radius: 999px; + color: #CFABFB; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s; + letter-spacing: -0.006em; +} + +.bi2-back-btn:hover { + opacity: 0.85; +} + +/* 타이틀 영역 */ +.bi2-page-title-section { + display: flex; + max-width: 1440px; + padding: 50px 16px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + align-self: stretch; + margin: 0 auto; +} + +.bi2-page-divider { + height: 0; + width: calc(100% - 32px); + max-width: 1440px; + border: none; + border-top: 1px solid var(--Color-teal-500, #067C80); + margin: 0 auto; +} + +.bi2-title-icon { + width: 80px; + height: 80px; +} + +.bi2-star-icon { + width: 80px; + height: 80px; + aspect-ratio: 1/1; + animation: twinkle 2.5s ease-in-out infinite; +} + +.bi2-title-text { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + align-self: stretch; +} + +.bi2-main-title { + color: var(--Color-white, #FFF); + text-align: center; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: -0.288px; + align-self: stretch; +} + +.bi2-subtitle { + font-size: 21px; + font-weight: 400; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.19; + text-align: center; + align-self: stretch; +} + +/* 메인 컨테이너 */ +.bi2-main-container { + display: flex; + max-width: 1440px; + min-width: 1000px; + padding: 68px 32px 112px 32px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 88px; + align-self: stretch; + margin: 0 auto; +} + +/* 매장 헤더 */ +.bi2-store-header { + display: flex; + flex-direction: column; + gap: 4px; +} + +.bi2-store-name { + color: var(--Color-white, #FFF); + font-family: Pretendard; + font-size: 40px; + font-style: normal; + font-weight: 600; + line-height: 130%; /* 52px */ + letter-spacing: -0.24px; +} + +.bi2-store-address { + color: var(--Color-teal-200, #9BCACC); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 22px; /* 137.5% */ + letter-spacing: -0.096px; +} + +/* 섹션 공통 */ +.bi2-section { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + align-self: stretch; +} + +.bi2-section-title { + color: var(--Color-white, #FFF); + font-family: Pretendard; + font-size: 28px; + font-style: normal; + font-weight: 600; + line-height: 130%; /* 36.4px */ + letter-spacing: -0.168px; +} + +/* 브랜드 정체성 카드 */ +.bi2-identity-card { + background: #034245; + border: 1px solid #94FBE0; + border-radius: 20px; + padding: 22px 24px; + display: flex; + flex-direction: column; + gap: 22px; + box-shadow: 0 0 40px rgba(148, 251, 224, 0.1); +} + +.bi2-identity-top { + display: flex; + flex-direction: column; + gap: 16px; +} + +.bi2-identity-core { + display: flex; + flex-direction: column; + gap: 4px; +} + +.bi2-label-sm { + color: var(--Color-teal-50, #E5F1F2); + /* Body_600 */ + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 22px; /* 137.5% */ + letter-spacing: -0.096px; +} + +.bi2-core-value { + color: var(--Color-mint-50, #F4FFFC); + font-family: Pretendard; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 130%; /* 31.2px */ + letter-spacing: -0.144px; +} + +.bi2-category-text { + color: var(--Color-teal-50, #E5F1F2); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 22px; /* 122.222% */ + letter-spacing: -0.108px; +} + +.bi2-identity-divider { + width: 100%; + height: 1px; + background: #067C80; +} + +.bi2-identity-bottom { + display: flex; + gap: 40px; +} + +.bi2-identity-col { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; +} + +.bi2-body-text { + color: var(--Color-teal-100, #CEE5E6); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 160%; /* 28.8px */ + letter-spacing: -0.108px; +} + +/* 셀링 포인트 카드 */ +.bi2-selling-card { + display: flex; + padding: 16px 20px; + justify-content: center; + align-items: center; + gap: 100px; + align-self: stretch; + border-radius: 20px; + border: 1px solid var(--Color-teal-700, #034A4D); + background: var(--Color-teal-750, #01393B); +} + +.bi2-selling-chart { + flex-shrink: 0; +} + +.bi2-radar-container { + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 768px) { + .bi2-radar-container svg { + width: min(95vw, 440px) !important; + height: min(95vw, 360px) !important; + } + + .bi2-radar-label-text { + display: none; + } +} + +.bi2-selling-list { + display: flex; + flex-direction: column; + gap: 24px; +} + +.bi2-selling-item { + display: flex; + align-items: center; + gap: 16px; +} + +.bi2-rank-badge { + width: 20px; + height: 20px; + min-width: 20px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 600; + letter-spacing: -0.006em; + background: #206764; + color: #94FBE0; +} + +.bi2-rank-badge.top { + background: #94FBE0; + color: #002224; +} + +.bi2-selling-item-text { + display: flex; + align-items: center; + gap: 8px; +} + +.bi2-selling-name { + font-size: 20px; + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.375; +} + +.bi2-selling-desc { + font-size: 14px; + font-weight: 600; + color: #9BCACC; + letter-spacing: -0.006em; + line-height: 1.29; +} + +/* 고객 유형 카드 */ +.bi2-persona-grid { + display: flex; + align-items: stretch; + gap: 16px; + width: 100%; +} + +.bi2-persona-card { + display: flex; + padding: 20px; + flex-direction: column; + align-items: stretch; + gap: 16px; + flex: 1 0 0; + align-self: stretch; + border-radius: 20px; + border: 1px solid var(--Color-teal-700, #034A4D); + background: var(--Color-teal-750, #01393B); +} + +.bi2-persona-header { + display: flex; + padding-bottom: 8px; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; +} + +.bi2-persona-info { + display: flex; + align-items: baseline; + gap: 6px; +} + +.bi2-persona-name { + color: var(--Color-teal-50, #E5F1F2); + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 130%; /* 26px */ + letter-spacing: -0.12px; +} + +.bi2-persona-age { + color: var(--Color-teal-200, #9BCACC); + /* 14_600 */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 18px; /* 128.571% */ +} + +.bi2-persona-desc { + color: var(--Color-teal-100, #CEE5E6); + /* 14_600 */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 18px; /* 128.571% */ +} + +.bi2-persona-divider { + width: 100%; + height: 1px; + background: #067C80; +} + +.bi2-persona-detail { + display: flex; + gap: 16px; + padding: 0 4px; +} + +.bi2-persona-detail.grow { + display: flex; + padding: 0 4px; + align-items: flex-start; + gap: 4px; + align-self: stretch; +} + +.bi2-label-xs { + color: var(--Color-teal-100, #CEE5E6); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 18px; /* 128.571% */ +} + +.bi2-persona-detail-text { + flex: 1; + color: var(--Color-teal-50, #E5F1F2); + text-align: right; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 26px; + letter-spacing: -0.096px; + white-space: pre-line; +} + +/* 추천 타겟 키워드 */ +.bi2-keyword-header { + display: flex; + flex-direction: column; + gap: 8px; +} + +.bi2-keyword-subtitle { + color: var(--Color-teal-200, #9BCACC); + /* Body_600 */ + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 22px; /* 137.5% */ + letter-spacing: -0.096px; +} + +.bi2-keyword-tags { + display: flex; + align-items: flex-start; + align-content: flex-start; + gap: 8px; + align-self: stretch; + flex-wrap: wrap; +} + +.bi2-keyword-pill { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + background: #01393B; + border-radius: 999px; + font-size: 20px; + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.375; +} + +/* 하단 고정 버튼 */ +.bi2-bottom-button-container { + position: fixed; + bottom: 32px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 50; + pointer-events: none; +} + +@media (min-width: 768px) { + body:has(.sidebar.expanded) .bi2-bottom-button-container { + left: 15rem; + } + + body:has(.sidebar.collapsed) .bi2-bottom-button-container { + left: 5rem; + } +} + +.bi2-generate-btn { + pointer-events: auto; + display: flex; + align-items: center; + gap: 8px; + padding: 12px 48px; + background: #A65EFF; + color: #FFFFFF; + font-size: 16px; + font-weight: 700; + border: none; + border-radius: 999px; + cursor: pointer; + box-shadow: 0 4px 24px rgba(174, 114, 249, 0.4); + transition: background-color 0.2s, transform 0.2s; +} + +.bi2-generate-btn:hover { + background: #8B3FE8; + transform: scale(1.05); +} + +/* 반응형 – 태블릿/모바일 (≤768px) */ +@media (max-width: 768px) { + .bi2-page { + padding-bottom: 100px; + } + + .bi2-main-container { + min-width: unset; + margin: 0 16px; + padding: 24px 0px 80px; + gap: 64px; + border-radius: 24px; + } + + .bi2-selling-card { + flex-direction: column; + gap: 32px; + } + + .bi2-persona-grid { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + align-self: stretch; + } + + .bi2-identity-bottom { + flex-direction: column; + gap: 24px; + } + + .bi2-main-title { + color: var(--Color-white, #FFF); + text-align: center; + font-family: Pretendard; + font-size: 45px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: -0.288px; + } + + .bi2-store-name { + font-size: 32px; + } + + .bi2-selling-name { + font-size: 16px; + } + + .bi2-keyword-pill { + font-size: 16px; + } +} + +/* ===================================================== + URL Input Content (GenerationFlow 내 URL 입력 단계) + ===================================================== */ + +.url-input-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #002224; + color: var(--color-text-white); + padding: 80px 1rem 100px; + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +.url-input-content { + display: flex; + flex-direction: column; + align-items: center; + z-index: 20; + position: relative; + margin-top: 50px; + width: 100%; +} + +.url-input-icon { + color: #AE72F9; + margin-bottom: 24px; +} + +.url-input-logo { + margin-bottom: 1rem; +} + +.url-input-logo img { + width: 350px; + height: auto; +} + +.url-input-title { + font-family: 'Pretendard', sans-serif; + font-size: 40px; + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + margin: 0 0 8px 0; + line-height: 1.2; +} + +.url-input-subtitle { + font-family: 'Pretendard', sans-serif; + font-size: 14px; + font-weight: 400; + color: #9BCACC; + letter-spacing: -0.006em; + margin: 0 0 40px 0; +} + +.url-input-form { + width: 100%; + display: flex; + flex-direction: column; + gap: 10px; +} + +.url-input-wrapper { + display: flex; + align-items: stretch; + width: 100%; + background-color: #01393B; + border: 1px solid #034A4D; + border-radius: 12px; + overflow: visible; + position: relative; +} + +.url-input-field { + flex: 1; + width: 100%; + padding: 16px 20px; + background-color: transparent; + border: none; + font-family: 'Pretendard', sans-serif; + font-size: 16px; + color: #E5F1F2; + outline: none; + text-align: left; +} + +.url-input-field::placeholder { + color: #6AB0B3; +} + + +.url-input-button { + margin: auto; + max-width: 400px; + width: 100%; + padding: 11px 16px; + border-radius: 12px; + background-color: #AE72F9; + color: #ffffff; + font-weight: 600; + font-size: 16px; + letter-spacing: -0.006em; + box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4); + transition: all var(--transition-normal); + border: none; + cursor: pointer; + animation: button-glow 1.5s ease-in-out infinite; +} + +.url-input-button:hover:not(:disabled) { + background-color: #9B5DE5; +} + +.url-input-button:disabled { + background-color: #4A5568; + cursor: not-allowed; +} + +.url-input-manual-button { + margin: auto; + max-width: 400px; + width: 100%; + padding: 11px 16px; + border-radius: 12px; + border: 1px solid rgba(155, 202, 204, 0.35); + background: transparent; + color: rgba(155, 202, 204, 0.8); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all var(--transition-normal); +} + +.url-input-manual-button:hover { + border-color: #9BCACC; + color: #9BCACC; + background: rgba(155, 202, 204, 0.06); +} + +.url-input-error { + color: #F56565; + font-family: 'Pretendard', sans-serif; + font-size: 14px; + margin: 0; + text-align: left; +} + +.url-input-guide { + font-family: 'Pretendard', sans-serif; + font-size: 14px; + color: #6AB0B3; + margin: 0 0 10px; + white-space: pre-line; +} + +/* URL Input Dropdown */ +.url-input-dropdown-container { + position: relative; + flex-shrink: 0; + width: auto; +} + +.url-input-dropdown-trigger { + display: flex; + align-items: center; + gap: 8px; + padding: 16px 16px; + background-color: transparent; + border: none; + font-family: 'Pretendard', sans-serif; + font-size: 14px; + color: #E5F1F2; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.2s ease; +} + +.url-input-dropdown-trigger:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.url-input-dropdown-arrow { + transition: transform 0.2s ease; +} + +.url-input-dropdown-arrow.open { + transform: rotate(180deg); +} + +.url-input-dropdown-menu { + position: absolute; + top: calc(100% + 4px); + left: 0; + min-width: 100%; + background-color: #01393B; + border: 1px solid #034A4D; + border-radius: 12px; + overflow: hidden; + z-index: 100; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.url-input-dropdown-item { + display: block; + width: 100%; + padding: 12px 16px; + background: none; + border: none; + font-family: 'Pretendard', sans-serif; + font-size: 14px; + color: #9BCACC; + text-align: left; + cursor: pointer; + transition: all 0.2s ease; +} + +.url-input-dropdown-item:hover { + background-color: #034A4D; + color: #E5F1F2; +} + +.url-input-dropdown-item.active { + background-color: #034A4D; + color: #94FBE0; +} + +/* URL Input Autocomplete (Dashboard) */ +.url-input-field-container { + position: relative; + flex: 1; + display: flex; +} + +.url-input-autocomplete-dropdown { + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + background-color: #01393B; + border: 1px solid rgba(148, 251, 224, 0.2); + border-radius: 12px; + max-height: 300px; + overflow-y: auto; + z-index: 100; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); +} + +.url-input-autocomplete-loading { + padding: 16px; + text-align: center; + color: rgba(255, 255, 255, 0.6); + font-size: 14px; +} + +.url-input-autocomplete-item { + display: block; + width: 100%; + padding: 12px 16px; + background: transparent; + border: none; + border-bottom: 1px solid rgba(148, 251, 224, 0.1); + text-align: left; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.url-input-autocomplete-item:last-child { + border-bottom: none; +} + +.url-input-autocomplete-item:hover, +.url-input-autocomplete-item.highlighted { + background-color: rgba(148, 251, 224, 0.1); +} + +.url-input-autocomplete-title { + font-size: 14px; + font-weight: 500; + color: #E5F1F2; + margin-bottom: 4px; +} + +.url-input-autocomplete-title b { + color: #94FBE0; + font-weight: 600; +} + +.url-input-autocomplete-address { + font-size: 12px; + color: rgba(255, 255, 255, 0.5); +} + +/* ===================================================== + Wizard Stepper (단계 인디케이터) + .wizard-step은 노드 너비(2rem) 고정. 라벨은 absolute로 + 항상 노드 정중앙 아래에 위치. 선은 flex:1로 간격 채움. + ===================================================== */ + +.wizard-stepper { + display: flex; + align-items: flex-start; + padding: 2rem; /* 하단: absolute 라벨 공간 */ + flex-shrink: 0; + width: 100%; + max-width: 560px; + margin: 0 auto 0; + box-sizing: border-box; +} + +@media (max-width: 1100px) { + .wizard-stepper { + margin: 50px auto 0; + } +} + +/* 노드 셀: 노드 너비와 동일한 2rem 고정. 라벨은 이 밖으로 넘침 */ +.wizard-step { + flex: none; + width: 2rem; + position: relative; + display: flex; + justify-content: center; + z-index: 1; +} + +/* 연결선: 노드 사이 남은 공간을 flex:1로 채움 */ +.wizard-step-line { + flex: 1; + height: 1.5px; + background-color: rgba(255, 255, 255, 0.15); + margin-top: calc(1rem - 0.75px); /* 2rem 노드의 수직 중심에 정렬 */ + transition: background-color 0.3s; +} + +.wizard-step-line.done { + background-color: var(--color-mint, #a6ffea); + opacity: 0.8; +} + +/* 노드 (원형 번호/체크) */ +.wizard-stepper-node { + width: 2rem; + height: 2rem; + flex-shrink: 0; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 600; + transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; +} + +.wizard-step.pending .wizard-stepper-node { + background-color: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.35); + border: 1.5px solid rgba(255, 255, 255, 0.15); +} + +.wizard-step.current .wizard-stepper-node { + background-color: transparent; + color: var(--color-mint, #a6ffea); + border: 2px solid var(--color-mint, #a6ffea); + box-shadow: 0 0 10px rgba(166, 255, 234, 0.45); +} + +.wizard-step.done .wizard-stepper-node { + background-color: var(--color-mint, #a6ffea); + color: #002224; + border: none; +} + +/* 단계 라벨: 노드 셀 absolute로 항상 노드 중심 아래 정렬 */ +.wizard-stepper-label { + position: absolute; + top: calc(2rem + 0.5rem); + left: 50%; + transform: translateX(-50%); + font-size: 16px; + font-weight: 400; + color: rgba(255, 255, 255, 0.35); + white-space: nowrap; + text-align: center; + transition: color 0.3s, font-weight 0.3s; +} + +.wizard-step.current .wizard-stepper-label { + color: var(--color-mint, #a6ffea); + font-weight: 600; +} + +.wizard-step.done .wizard-stepper-label { + color: rgba(255, 255, 255, 0.55); +} + +/* 모바일 반응형 */ +@media (max-width: 480px) { + .wizard-stepper { + padding: 2rem; + max-width: 100%; + } + + .wizard-stepper-node { + width: 1.625rem; + height: 1.625rem; + font-size: 16px; + } + + .wizard-step { + width: 1.625rem; + } + + .wizard-step-line { + margin-top: calc(0.8125rem - 0.75px); + } + + .wizard-stepper-label { + font-size: 16px; + top: calc(1.625rem + 0.4rem); + } +} + diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..7d1c146 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,12 @@ +/* CASTAD Design System - 도메인별 CSS 파일 매니페스트 */ + +@import './tokens.css'; +@import './base-components.css'; +@import './media-components.css'; +@import './generation-flow.css'; +@import './landing.css'; +@import './dashboard.css'; +@import './business-settings.css'; +@import './studio-assets.css'; +@import './contents-social.css'; +@import './modals-overlays.css'; diff --git a/src/styles/landing.css b/src/styles/landing.css new file mode 100644 index 0000000..d79b41a --- /dev/null +++ b/src/styles/landing.css @@ -0,0 +1,1642 @@ +/* ===================================================== + Landing Page Components + ===================================================== */ + +/* Hero Section */ +.hero-section { + width: 100%; + min-height: 100dvh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #002224; + color: var(--color-text-white); + padding: 80px 1rem 100px; + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +/* 세로가 짧은 화면 대응 */ +@media (max-height: 700px) { + .hero-section { + padding: 70px 1rem 80px; + justify-content: flex-start; + padding-top: 100px; + } +} + +@media (max-height: 600px) { + .hero-section { + padding: 60px 1rem 70px; + padding-top: 80px; + } +} + +/* Animated Background Orbs */ +.hero-bg-orbs { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + pointer-events: none; + z-index: 0; +} + +/* JavaScript controlled random orbs */ +.hero-orb-random { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.65; + pointer-events: none; + will-change: left, top, transform; +} + +.hero-content { + display: flex; + flex-direction: column; + align-items: center; + z-index: 20; + position: relative; + margin-top: 50px; +} + +.hero-logo { + width: 280px; + height: auto; + margin-bottom: 1rem; +} + +@media (min-width: 640px) { + .hero-logo { + width: 400px; + } +} + +@media (min-width: 768px) { + .hero-logo { + width: 500px; + } +} + +@media (min-width: 1024px) { + .hero-logo { + width: 554px; + } +} + +/* 세로가 짧은 화면에서 로고 크기 축소 */ +@media (max-height: 700px) { + .hero-logo { + width: 240px; + margin-bottom: 0.5rem; + } +} + +@media (max-height: 600px) { + .hero-logo { + width: 200px; + margin-bottom: 0.5rem; + } +} + +.hero-subtitle { + font-size: var(--text-sm); + font-weight: 300; + margin-bottom: 2rem; + color: rgba(255, 255, 255, 0.8); + text-align: center; + max-width: 32rem; +} + +@media (min-width: 640px) { + .hero-subtitle { + font-size: var(--text-base); + margin-bottom: 3rem; + } +} + +@media (min-width: 768px) { + .hero-subtitle { + font-size: var(--text-lg); + } +} + +/* Hero Form */ +.hero-form { + padding-top: 50px; + width: 100%; + max-width: 375px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +/* 세로가 짧은 화면에서 폼 간격 조정 */ +@media (max-height: 700px) { + .hero-form { + gap: 6px; + max-width: 350px; + } +} + +@media (max-height: 600px) { + .hero-form { + gap: 4px; + max-width: 320px; + } +} + +.hero-input-label { + font-size: 14px; + font-weight: 600; + color: #ffffff; + letter-spacing: -0.006em; +} + +.hero-input-wrapper { + display: flex; + width: 100%; + min-height: 48px; + padding: 8px 20px; + align-items: center; + gap: 10px; + border-radius: 999px; + background: var(--Color-white, #FFF); + position: relative; +} + +.hero-input-wrapper.focused { + box-shadow: 0 0 0 4px #379599; +} + +.hero-input-wrapper.error { + box-shadow: 0 0 0 1px #F87171; +} + +.hero-input { + flex: 1; + background: transparent; + border: none; + color: #6AB0B3; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.006em; + text-align: center; + min-width: 0; +} + +.hero-input:focus { + outline: none; +} + +.hero-input::placeholder { + color: #6AB0B3; +} + +.hero-input.has-value { + color: #002224; + font-weight: 500; +} + +.hero-input-clear { + flex-shrink: 0; + width: 24px; + height: 24px; + padding: 0; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-input-clear img { + width: 24px; + height: 24px; +} + +/* Hero Dropdown */ +.hero-dropdown-container { + position: relative; + flex-shrink: 0; + align-self: stretch; + display: flex; + align-items: center; + background: var(--color-mint-hover); + border-radius: 999px 0 0 999px; + margin: -8px -20px; + padding-left: 20px; +} + +.hero-dropdown-trigger { + display: flex; + flex-direction: column; + gap: 2px; + padding: 0 14px 0 0; + background-color: transparent; + border: none; + border-right: 1px solid rgba(55, 149, 153, 0.25); + white-space: nowrap; +} + +.hero-dropdown-sublabel { + font-size: 10px; + font-weight: 400; + color: #379599; + letter-spacing: -0.006em; +} + +.hero-dropdown-main { + display: flex; + align-items: center; + gap: 4px; + font-family: 'Pretendard', sans-serif; + font-size: 14px; + font-weight: 600; + color: #002224; +} + +/* Hero Autocomplete */ +.hero-input-container { + flex: 1; + min-width: 0; + display: flex; +} + +.hero-autocomplete-dropdown { + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + background-color: #ffffff; + border: 1px solid #E5E7EB; + border-radius: 12px; + overflow: hidden; + z-index: 200; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + max-height: 300px; + overflow-y: auto; +} + +.hero-autocomplete-loading { + padding: 16px; + text-align: center; + color: #6B7280; + font-size: 14px; +} + +.hero-autocomplete-item { + display: block; + width: 100%; + padding: 12px 16px; + background: none; + border: none; + border-bottom: 1px solid #F3F4F6; + text-align: left; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.hero-autocomplete-item:last-child { + border-bottom: none; +} + +.hero-autocomplete-item:hover, +.hero-autocomplete-item.highlighted { + background-color: #F9FAFB; +} + +.hero-autocomplete-title { + font-family: 'Pretendard', sans-serif; + font-size: 14px; + font-weight: 600; + color: #111827; + margin-bottom: 4px; +} + +.hero-autocomplete-title b { + color: #059669; +} + +.hero-autocomplete-address { + font-family: 'Pretendard', sans-serif; + font-size: 12px; + color: #6B7280; +} + +.hero-input-hint { + font-size: 14px; + font-weight: 400; + color: #CEE5E6; + letter-spacing: -0.006em; + margin: 10px; + white-space: pre-line; +} + +.hero-error { + color: #f87171; + font-size: var(--text-xs); + text-align: center; +} + +.hero-button { + display: flex; + height: 48px; + padding: 11px 16px; + justify-content: center; + align-items: center; + gap: 10px; + width: 100%; + padding: 11px 16px; + border-radius: 999px; + background-color: #AE72F9; + color: #ffffff; + font-weight: 600; + font-size: 14px; + letter-spacing: -0.006em; + box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4); + transition: all var(--transition-normal); + border: none; + cursor: pointer; + /* animation: button-glow 1.5s ease-in-out infinite; */ +} + +@keyframes button-glow { + 0%, 100% { + box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.5); + } + 50% { + box-shadow: 0px 4px 28px 0px rgba(174, 114, 249, 0.8), 0px 0px 16px 0px rgba(166, 255, 234, 0.4); + } +} + +.hero-divider { + display: flex; + align-items: center; + width: 100%; + gap: 12px; + color: var(--color-text-gray-300); + font-size: 13px; +} + +.hero-divider::before, +.hero-divider::after { + content: ''; + flex: 1; + height: 1px; + background: rgba(55, 149, 153, 0.25); +} + +.hero-manual-card { + width: 100%; + padding: 16px 20px; + border-radius: 16px; + border: 1.5px solid var(--color-mint); + background: rgba(15, 60, 60, 0.5); + box-shadow: 0 0 12px rgba(55, 149, 153, 0.15), inset 0 0 20px rgba(55, 149, 153, 0.04); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + cursor: pointer; + transition: all var(--transition-normal); +} + +.hero-manual-card:hover { + border-color: rgba(55, 149, 153, 1); + box-shadow: 0 0 20px rgba(55, 149, 153, 0.3), inset 0 0 20px rgba(55, 149, 153, 0.06); +} + +.hero-manual-card-title { + display: block; + width: 100%; + padding: 10px 20px; + border-radius: 999px; + border: 1.5px solid var(--color-mint); + background: var(--color-mint-20); + color: var(--color-mint); + font-size: 14px; + font-weight: 600; + letter-spacing: -0.006em; + text-align: center; +} + +.hero-manual-button-desc { + font-size: 14px; + font-weight: 400; + color: var(--color-text-gray-300); + text-align: center; + line-height: 1.7; + white-space: pre-line; + margin: 0; +} + +.hero-button:hover { + background-color: #9a5ef0; + animation: none; + box-shadow: 0px 4px 32px 0px rgba(174, 114, 249, 0.6); +} + +.hero-button:active { + transform: scale(0.98); +} + +/* Scroll Indicator */ +.scroll-indicator { + position: absolute; + bottom: 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + transition: opacity var(--transition-normal); + cursor: pointer; + background: none; + border: none; + color: #9BCACC; + z-index: 10; +} + +@media (min-width: 640px) { + .scroll-indicator { + bottom: 3rem; + } +} + +/* 세로가 짧은 화면에서 스크롤 인디케이터 조정 */ +@media (max-height: 700px) { + .scroll-indicator { + bottom: 1rem; + gap: 8px; + } +} + +@media (max-height: 600px) { + .scroll-indicator { + bottom: 0.5rem; + gap: 4px; + } + + .scroll-indicator-text { + font-size: 10px; + } + + .scroll-indicator-icon { + width: 32px; + height: 32px; + } +} + +.scroll-indicator:hover { + opacity: 0.8; +} + +.scroll-indicator-text { + font-size: 12px; + font-weight: 400; + letter-spacing: -0.006em; + color: #9BCACC; +} + +.scroll-indicator-icon { + width: 40px; + height: 40px; + border: 1px solid #9BCACC; + border-radius: 999px; + display: flex; + align-items: center; + justify-content: center; + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-8px); + } +} + +/* ===================================================== + Welcome Section Components + ===================================================== */ + +/* Welcome Section */ +.welcome-section { + width: 100%; + min-height: 100dvh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + background-color: #002224; + color: var(--color-text-white); + padding: 0; + position: relative; +} + +.welcome-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + padding: 6rem 1rem 6rem; + position: relative; +} + +/* Star Icon - centered above title */ +.welcome-star { + width: 40px; + height: 40px; + margin: 0 auto 12px; +} + +.welcome-star img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.welcome-header { + text-align: center; + margin-bottom: 3rem; + z-index: 1; +} + +@media (min-width: 768px) { + .welcome-header { + margin-bottom: 4rem; + } +} + +.welcome-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 640px) { + .welcome-title { + font-size: 2rem; + } +} + +@media (min-width: 768px) { + .welcome-title { + font-size: 2.5rem; + } +} + +.welcome-subtitle { + color: #9BCACC; + font-size: var(--text-sm); + font-weight: 600; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 640px) { + .welcome-subtitle { + font-size: var(--text-base); + } +} + +@media (min-width: 768px) { + .welcome-subtitle { + font-size: 1.5rem; + } +} + +/* Feature Cards Grid */ +.feature-grid { + display: flex; + flex-direction: column; + gap: 1rem; + width: 100%; + max-width: 1144px; + margin: 0 auto; + z-index: 1; + padding: 0 1rem; +} + +@media (min-width: 640px) { + .feature-grid { + gap: 1rem; + } +} + +@media (min-width: 768px) { + .feature-grid { + flex-direction: row; + gap: 24px; + justify-content: center; + padding: 0 1rem; + } +} + +@media (min-width: 1024px) { + .feature-grid { + gap: 32px; + padding: 0; + } +} + +/* Feature Card */ +.feature-card { + position: relative; + background-color: #01393B; + border-radius: 40px; + padding: 24px 24px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 16px; + width: 100%; + flex: 1; +} + +@media (min-width: 768px) { + .feature-card { + flex: 1; + max-width: 280px; + min-height: 340px; + padding: 24px 24px; + gap: 16px; + } +} + +@media (min-width: 1024px) { + .feature-card { + max-width: 500px; + min-height: 440px; + padding: 24px 24px; + gap: 16px; + } +} + +.feature-number-badge { + width: 32px; + height: 32px; + flex-shrink: 0; + border-radius: 999px; + border: 1px solid #9BCACC; + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + .feature-number-badge { + width: 36px; + height: 36px; + } +} + +@media (min-width: 1024px) { + .feature-number-badge { + width: 40px; + height: 40px; + } +} + +.feature-number-badge span { + font-size: 16px; + font-weight: 600; + color: #9BCACC; + letter-spacing: -0.006em; +} + +@media (min-width: 1024px) { + .feature-number-badge span { + font-size: 20px; + } +} + +.feature-card-title { + font-size: 16px; + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .feature-card-title { + font-size: 18px; + } +} + +@media (min-width: 1024px) { + .feature-card-title { + font-size: 24px; + } +} + +.feature-icon-box { + width: 100px; + height: 100px; + border-radius: 32px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +@media (min-width: 768px) { + .feature-icon-box { + width: 120px; + height: 120px; + border-radius: 36px; + } +} + +@media (min-width: 1024px) { + .feature-icon-box { + width: 160px; + height: 160px; + border-radius: 40px; + } +} + +.feature-icon-img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.feature-card-description { + font-size: 12px; + font-weight: 400; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.45; + white-space: pre-line; +} + +@media (min-width: 768px) { + .feature-card-description { + font-size: 14px; + } +} + +@media (min-width: 1024px) { + .feature-card-description { + font-size: 16px; + } +} + +/* Legacy feature-item styles (for backward compatibility) */ +.feature-item { + position: relative; + background-color: #01393B; + border-radius: 2.5rem; + padding: 1.5rem 2rem; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + transition: all var(--transition-normal); + border: 1px solid transparent; + gap: 1.5rem; + width: 100%; +} + +@media (min-width: 768px) { + .feature-item { + width: 360px; + min-height: 440px; + padding: 1.5rem 2.5rem; + } +} + +.feature-number { + width: 2.5rem; + height: 2.5rem; + flex-shrink: 0; + border-radius: var(--radius-full); + border: 1px solid #9BCACC; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-weight: 600; + color: #9BCACC; + letter-spacing: -0.006em; + line-height: 1.19; +} + +.feature-title { + font-size: var(--text-base); + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .feature-title { + font-size: 1.5rem; + } +} + +.feature-icon { + width: 160px; + height: 160px; + border-radius: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; +} + +.feature-icon img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.feature-description { + color: #E5F1F2; + font-size: var(--text-sm); + line-height: 1.45; + letter-spacing: -0.006em; + white-space: pre-line; +} + +@media (min-width: 768px) { + .feature-description { + font-size: var(--text-base); + } +} + +/* Welcome Button */ +.btn-start { + padding: 0.625rem 3rem; + border-radius: var(--radius-full); + background-color: #AE72F9; + color: var(--color-text-white); + font-weight: 600; + font-size: var(--text-sm); + transition: all var(--transition-normal); + border: none; + cursor: pointer; + margin: 0 auto; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .btn-start { + padding: 0.75rem 3.5rem; + } +} + +.btn-start:hover { + background-color: #9570f0; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(174, 114, 249, 0.3); +} + +.btn-start:active { + transform: scale(0.95); +} + +/* Legacy buttons - keep for other sections */ +.welcome-buttons { + display: flex; + gap: 1rem; +} + +.btn-ghost { + padding: 0.75rem 2rem; + border-radius: var(--radius-full); + border: 1px solid var(--color-border-gray-700); + background-color: transparent; + color: var(--color-text-white); + font-weight: 700; + font-size: var(--text-xs); + transition: all var(--transition-normal); + cursor: pointer; + margin-bottom: 1rem; +} + +@media (min-width: 640px) { + .btn-ghost { + font-size: var(--text-sm); + } +} + +.btn-ghost:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.btn-cta { + padding: 0.75rem 2.5rem; + border-radius: var(--radius-full); + background-color: var(--color-purple); + color: var(--color-text-white); + font-weight: 700; + font-size: var(--text-xs); + box-shadow: var(--shadow-purple); + transition: all var(--transition-normal); + border: none; + cursor: pointer; + margin-bottom: 1rem; +} + +@media (min-width: 640px) { + .btn-cta { + font-size: var(--text-sm); + } +} + +@media (min-width: 768px) { + .btn-cta { + padding: 0.75rem 3.5rem; + } +} + +.btn-cta:hover { + background-color: var(--color-purple-hover); +} + +.btn-cta:active { + transform: scale(0.95); +} + +/* ===================================================== + Display Section Components + ===================================================== */ + +/* Display Section */ +.display-section { + width: 100%; + min-height: 100dvh; + display: flex; + flex-direction: column; + justify-content: flex-start; + background-color: #002224; + color: var(--color-text-white); + position: relative; + overflow: hidden; +} + +.display-section .content-safe-area { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 50px 16px 0 16px; +} + +/* Display Frames Container */ +.display-frames { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + margin-bottom: 2rem; + width: 100%; + max-width: 72rem; +} + +@media (min-width: 640px) { + .display-frames { + gap: 1rem; + } +} + +@media (min-width: 768px) { + .display-frames { + gap: 1rem; + } +} + +@media (min-width: 1024px) { + .display-frames { + gap: 2rem; + } +} + +/* Display Frame - 가로 크기는 feature-card와 일치, 세로는 9:16 비율 */ +.display-frame { + display: flex; + aspect-ratio: 9 / 16; + border-radius: 2.5rem; + overflow: hidden; + position: relative; + transition: all var(--transition-normal); +} + +@media (min-width: 768px) { + .display-frame { + width: 280px; + } +} + +@media (min-width: 1024px) { + .display-frame { + width: 360px; + } +} + +.display-frame img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.display-video { + width: 100%; + height: 100%; + border: none; + border-radius: 2.5rem; + pointer-events: none; +} + +.display-frame-hidden-mobile { + display: none; +} + +@media (min-width: 768px) { + .display-frame-hidden-mobile { + display: flex; + } +} + +/* Legacy Video Frames - Keep for backward compatibility */ +.video-frames { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.5rem; + margin-bottom: 2rem; + width: 100%; + max-width: 72rem; +} + +@media (min-width: 640px) { + .video-frames { + gap: 1.5rem; + } +} + +@media (min-width: 768px) { + .video-frames { + gap: 2.5rem; + margin-bottom: 4rem; + } +} + +@media (min-width: 1024px) { + .video-frames { + gap: 3.5rem; + } +} + +/* Phone Frame */ +.phone-frame { + display: flex; + width: 135px; + aspect-ratio: 9/16; + border-radius: 24px; + background-color: #000; + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: hidden; + position: relative; + box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9); + align-items: center; + justify-content: center; + transition: all var(--transition-normal); +} + +@media (min-width: 640px) { + .phone-frame { + width: 190px; + border-radius: 40px; + } +} + +@media (min-width: 768px) { + .phone-frame { + width: 230px; + border-radius: 48px; + } +} + +@media (min-width: 1024px) { + .phone-frame { + width: 280px; + } +} + +.phone-frame.hidden-mobile { + display: none; +} + +@media (min-width: 768px) { + .phone-frame.hidden-mobile { + display: flex; + } +} + +.phone-video-container { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; +} + +.phone-video-container iframe { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 180%; + height: 100%; + object-fit: cover; +} + +.phone-bezel { + position: absolute; + inset: 0; + border: 6px solid #20282b; + border-radius: 24px; + pointer-events: none; + z-index: 20; +} + +@media (min-width: 640px) { + .phone-bezel { + border-width: 10px; + border-radius: 40px; + } +} + +@media (min-width: 768px) { + .phone-bezel { + border-radius: 48px; + } +} + +.phone-notch { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 25%; + height: 12px; + background-color: #20282b; + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + z-index: 30; + opacity: 0.8; +} + +@media (min-width: 640px) { + .phone-notch { + height: 20px; + } +} + +/* Display Button */ +.display-button { + padding: 0.625rem 3rem; + border-radius: var(--radius-full); + background-color: #AE72F9; + color: var(--color-text-white); + font-weight: 600; + font-size: var(--text-sm); + letter-spacing: -0.006em; + line-height: 1.19; + transition: all var(--transition-normal); + border: none; + cursor: pointer; + margin-top: 30px; +} + +@media (min-width: 768px) { + .display-button { + padding: 0.75rem 3.5rem; + } +} + +.display-button:hover { + background-color: #9570f0; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(174, 114, 249, 0.3); +} + +.display-button:active { + transform: scale(0.95); +} + +/* ===================================================== + Login Section Components + ===================================================== */ + +/* Login Container */ +.login-container { + width: 100%; + height: 100dvh; + background-color: #002224; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--color-text-white); + padding: 1rem; + position: relative; + overflow: hidden; +} + +@media (min-width: 640px) { + .login-container { + padding: 1.5rem; + } +} + +/* Login Back Button */ +.login-back-btn { + position: absolute; + top: 0.875rem; + left: 1.5rem; + display: flex; + align-items: center; + gap: 0.25rem; + padding: 0.5rem 1.25rem 0.5rem 0.5rem; + border-radius: var(--radius-full); + border: 1px solid #694596; + background-color: transparent; + color: #CFABFB; + font-size: var(--text-sm); + font-weight: 600; + letter-spacing: -0.006em; + line-height: 1.19; + transition: all var(--transition-normal); + cursor: pointer; +} + +.login-back-btn img { + width: 20px; + height: 20px; +} + +.login-back-btn:hover { + background-color: rgba(105, 69, 150, 0.1); + border-color: #8662C7; +} + +.login-back-btn:active { + transform: scale(0.95); +} + +/* Login Content */ +.login-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 4rem; + max-width: 600px; +} + +@media (min-width: 768px) { + .login-content { + gap: 5rem; + } +} + +/* Login Logo */ +.login-logo { + width: 350px; + height: auto; +} + +@media (min-width: 768px) { + .login-logo { + width: 554px; + } +} + +.login-logo img { + width: 100%; + height: auto; + object-fit: contain; +} + +/* Kakao Button */ +.btn-kakao { + width: 100%; + max-width: 250px; + padding: 0.75rem 1rem; + border-radius: var(--radius-full); + background-color: #FEE500; + color: rgba(0, 0, 0, 0.85); + font-weight: 600; + font-size: var(--text-base); + letter-spacing: 0; + line-height: 1.19; + transition: all var(--transition-normal); + border: none; + cursor: pointer; +} + +@media (min-width: 768px) { + .btn-kakao { + max-width: 296px; + padding: 0.9375rem 1rem; + } +} + +.btn-kakao:hover { + background-color: #FDDC00; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3); +} + +.btn-kakao:active { + transform: scale(0.95); +} + +.btn-kakao:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + +.btn-kakao:disabled:hover { + background-color: #FEE500; + transform: none; + box-shadow: none; +} + +/* Login Error */ +.login-error { + color: #FF6B6B; + font-size: 14px; + text-align: center; + padding: 12px 16px; + background-color: rgba(255, 107, 107, 0.1); + border-radius: 8px; + margin-bottom: 16px; + max-width: 296px; + width: 100%; +} + +/* Legacy styles - keep for backward compatibility */ +.login-title { + font-family: 'Playfair Display', serif; + font-style: italic; + font-size: var(--text-3xl); + font-weight: 700; + margin-bottom: 0.5rem; + letter-spacing: -0.025em; + line-height: 1; + color: var(--color-text-white); +} + +@media (min-width: 640px) { + .login-title { + font-size: var(--text-4xl); + margin-bottom: 0.75rem; + } +} + +@media (min-width: 768px) { + .login-title { + font-size: 3rem; + } +} + +@media (min-width: 1024px) { + .login-title { + font-size: 3.75rem; + } +} + +.login-subtitle { + font-size: 9px; + font-weight: 300; + margin-bottom: 1.5rem; + opacity: 0.8; +} + +@media (min-width: 640px) { + .login-subtitle { + font-size: 10px; + margin-bottom: 2rem; + } +} + +@media (min-width: 768px) { + .login-subtitle { + font-size: var(--text-xs); + margin-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .login-subtitle { + font-size: var(--text-sm); + } +} + +/* ===================================================== + Loading Section Components + ===================================================== */ + +/* Loading Container */ +.loading-container { + width: 100%; + height: 100vh; + background-color: #002224; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--color-text-white); + padding: 0 1.5rem; +} + +.loading-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; + max-width: 600px; +} + +@media (min-width: 768px) { + .loading-content { + gap: 4rem; + } +} + +/* Loading Logo */ +.loading-logo { + width: 200px; + height: auto; +} + +@media (min-width: 768px) { + .loading-logo { + width: 308px; + } +} + +.loading-logo img { + width: 100%; + height: auto; + object-fit: contain; +} + +/* Loading Section */ +.loading-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + width: 100%; +} + +.loading-title { + font-size: 1.5rem; + font-weight: 700; + letter-spacing: -0.006em; + line-height: 1.19; + color: #FFFFFF; + text-align: center; +} + +@media (min-width: 768px) { + .loading-title { + font-size: 2rem; + } +} + +/* Loading Progress Bar */ +.loading-progress-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + margin-top: 24px; + width: 240px; +} + +.loading-progress-bar { + width: 100%; + height: 4px; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; +} + +.loading-progress-fill { + height: 100%; + background: #a6ffea; + border-radius: 2px; + transition: width 0.1s linear; +} + +.loading-progress-text { + font-size: 13px; + color: rgba(255, 255, 255, 0.5); + font-variant-numeric: tabular-nums; +} + +/* Loading Spinner Wrapper */ +.loading-spinner-wrapper { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + .loading-spinner-wrapper { + width: 200px; + height: 200px; + } +} + +.loading-spinner-icon { + width: 100%; + height: 100%; + animation: spin 2s linear infinite; +} + +/* Legacy Loading Spinner - Keep for backward compatibility */ +.loading-spinner { + position: relative; + margin-bottom: 2rem; +} + +.loading-ring { + width: 4rem; + height: 4rem; + border: 4px solid rgba(166, 130, 255, 0.2); + border-top-color: var(--color-purple); + border-radius: var(--radius-full); + animation: spin 1s linear infinite; +} + +.loading-dot { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.loading-dot-inner { + width: 1rem; + height: 1rem; + background-color: var(--color-purple); + border-radius: var(--radius-full); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + box-shadow: 0 0 15px var(--color-purple); +} + +.loading-text { + text-align: center; +} + +.loading-text > * + * { + margin-top: 0.5rem; +} + +.loading-description { + color: var(--color-text-gray-400); + font-size: var(--text-sm); + font-weight: 300; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@media (min-width: 640px) { + .loading-description { + font-size: var(--text-base); + } +} + diff --git a/src/styles/media-components.css b/src/styles/media-components.css new file mode 100644 index 0000000..24cd42b --- /dev/null +++ b/src/styles/media-components.css @@ -0,0 +1,593 @@ +/* ===================================================== + Player Components + ===================================================== */ + +/* Player Bar */ +.player-bar { + background-color: rgba(0, 0, 0, 0.4); + border-radius: var(--radius-full); + padding: 0.75rem; + display: flex; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; +} + +/* Play Button */ +.play-btn { + color: var(--color-mint); + flex-shrink: 0; + transition: transform var(--transition-normal); + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.play-btn:hover { + transform: scale(1.1); +} + +.play-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Progress Bar */ +.progress-bar-container { + flex: 1; + height: 0.375rem; + background-color: #1f2937; + border-radius: var(--radius-full); + position: relative; + cursor: pointer; +} + +.progress-bar-container:disabled, +.progress-bar-container.disabled { + cursor: not-allowed; + opacity: 0.5; +} + +.progress-bar-fill { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-mint); + border-radius: var(--radius-full); +} + +.progress-bar-thumb { + position: absolute; + top: 50%; + transform: translateY(-50%) translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; +} + +.progress-bar-thumb-glow { + position: absolute; + width: 1rem; + height: 1rem; + background-color: var(--color-mint); + border-radius: var(--radius-full); + opacity: 0.2; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.progress-bar-thumb-dot { + width: 0.75rem; + height: 0.75rem; + background-color: var(--color-mint); + border-radius: var(--radius-full); + box-shadow: var(--shadow-mint-glow); + border: 1px solid rgba(18, 26, 29, 0.2); +} + +/* Time Display */ +.time-display { + font-size: var(--text-sm); + color: var(--color-text-gray-500); + font-family: monospace; + text-align: right; + white-space: nowrap; +} + +/* ===================================================== + Image Grid Components + ===================================================== */ + +/* Image Grid */ +.image-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; +} + +.image-grid-4 { + grid-template-columns: repeat(4, 1fr); + gap: 0.5rem; +} + +/* Image Item */ +.image-item { + aspect-ratio: 1; + background-color: rgba(18, 26, 29, 0.5); + border-radius: var(--radius-xl); + border: 1px solid var(--color-border-white-5); + position: relative; + overflow: hidden; +} + +.image-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.image-item-badge { + position: absolute; + top: 0.5rem; + left: 0.5rem; + padding: 0.25rem 0.5rem; + background-color: var(--color-purple-80); + border-radius: 0.25rem; + font-size: var(--text-xs); + color: var(--color-text-white); + font-weight: 500; +} + +.image-item-remove { + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + background-color: rgba(0, 0, 0, 0.6); + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + color: rgba(255, 255, 255, 0.7); + border: none; + cursor: pointer; + transition: all var(--transition-normal); +} + +.image-item-remove:hover { + background-color: rgba(239, 68, 68, 0.8); + color: var(--color-text-white); +} + +/* ===================================================== + Upload Components + ===================================================== */ + +/* Upload Zone */ +.upload-zone { + flex: 1; + border: 2px dashed var(--color-border-gray-600); + border-radius: var(--radius-2xl); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1.5rem; + text-align: center; + cursor: pointer; + transition: border-color var(--transition-normal); +} + +.upload-zone:hover { + border-color: rgba(166, 255, 234, 0.5); +} + +.upload-zone-icon { + margin-bottom: 1rem; + color: var(--color-text-gray-500); + transition: color var(--transition-normal); +} + +.upload-zone:hover .upload-zone-icon { + color: var(--color-mint); +} + +.upload-zone-title { + color: var(--color-text-gray-300); + font-size: var(--text-base); + font-weight: 500; + line-height: 1.625; + margin-bottom: 0.5rem; +} + +.upload-zone-subtitle { + color: var(--color-text-gray-500); + font-size: var(--text-sm); +} + +/* ===================================================== + Tag Components + ===================================================== */ + +/* Tag */ +.tag { + padding: 0.625rem 1.25rem; + background-color: var(--color-bg-card-inner); + border-radius: var(--radius-full); + font-size: var(--text-base); + color: #e5e7eb; + border: 1px solid var(--color-border-white-10); +} + +/* Tag with Dot */ +.tag-dot { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: var(--text-sm); + color: var(--color-text-gray-400); +} + +.tag-dot::before { + content: ''; + width: 0.375rem; + height: 0.375rem; + border-radius: var(--radius-full); + background-color: var(--color-mint); +} + +/* ===================================================== + Social Card Components + ===================================================== */ + +/* Social Card */ +.social-card { + display: flex; + align-items: center; + gap: 1rem; + background-color: var(--color-bg-dark); + padding: 1rem; + border-radius: var(--radius-2xl); + border: 1px solid var(--color-border-white-5); + transition: all var(--transition-normal); + cursor: pointer; +} + +.social-card:hover { + border-color: var(--color-border-white-10); +} + +.social-card.selected { + border-color: var(--color-mint); + box-shadow: 0 0 15px rgba(166, 255, 234, 0.15); + background-color: var(--color-bg-card); +} + +.social-icon { + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-xl); + display: flex; + align-items: center; + justify-content: center; + position: relative; + transition: transform var(--transition-slow); +} + +.social-icon-inner { + width: 1.5rem; + height: 1.5rem; + color: var(--color-text-white); +} + +.social-check { + position: absolute; + top: -0.25rem; + right: -0.25rem; + width: 1.25rem; + height: 1.25rem; + background-color: var(--color-mint); + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-bg-dark); + border: 2px solid var(--color-bg-dark); +} + +.social-name { + font-size: var(--text-base); + font-weight: 700; + transition: color var(--transition-normal); +} + +.social-card.selected .social-name { + color: var(--color-text-white); +} + +.social-card:not(.selected) .social-name { + color: var(--color-text-gray-300); +} + +.social-email { + margin-left: auto; + font-size: var(--text-sm); + color: var(--color-purple); +} + +/* ===================================================== + Video Preview Components + ===================================================== */ + +/* Video Container */ +.video-container { + flex: 1; + background-color: #000; + border-radius: var(--radius-2xl); + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + min-height: 200px; +} + +.video-pattern { + position: absolute; + inset: 0; + opacity: 0.1; + background-image: + linear-gradient(45deg, var(--color-bg-dark) 25%, transparent 25%), + linear-gradient(-45deg, var(--color-bg-dark) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--color-bg-dark) 75%), + linear-gradient(-45deg, transparent 75%, var(--color-bg-dark) 75%); + background-size: 40px 40px; + background-position: 0 0, 0 20px, 20px -20px, -20px 0px; +} + +.video-controls { + position: absolute; + bottom: 1rem; + left: 1rem; + right: 1rem; + z-index: 10; +} + +.video-controls-inner { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.video-play-btn { + color: var(--color-text-white); + background: none; + border: none; + cursor: pointer; + transition: color var(--transition-normal); +} + +.video-play-btn:hover { + color: var(--color-mint); +} + +.video-progress { + flex: 1; + height: 0.375rem; + background-color: rgba(255, 255, 255, 0.2); + border-radius: var(--radius-full); + overflow: hidden; +} + +.video-progress-fill { + height: 100%; + background-color: var(--color-mint); +} + +/* Video Player */ +.video-player { + width: 100%; + height: 100%; + object-fit: contain; + cursor: pointer; +} + +/* Video Loading State */ +.video-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + text-align: center; +} + +/* Video Error State */ +.video-error { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + text-align: center; +} + +.video-error svg { + width: 4rem; + height: 4rem; + color: #ef4444; + margin-bottom: 1rem; +} + +/* Social Card Disabled State */ +.social-card.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ===================================================== + Tags Container + ===================================================== */ + +.tags-container { + margin-top: 1rem; + background-color: rgba(18, 26, 29, 0.6); + border-radius: var(--radius-xl); + padding: 0.75rem 1rem; + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + border: 1px solid var(--color-border-white-5); + flex-shrink: 0; +} + +/* ===================================================== + Status Messages + ===================================================== */ + +/* Error Message */ +.error-message { + margin-top: 1rem; + padding: 0.75rem; + background-color: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.3); + border-radius: var(--radius-xl); + color: #f87171; + font-size: var(--text-sm); + flex-shrink: 0; +} + +/* Status Message */ +.status-message { + margin-top: 1rem; + padding: 0.75rem; + background-color: var(--color-mint-10); + border: 1px solid var(--color-mint-30); + border-radius: var(--radius-xl); + color: var(--color-mint); + font-size: var(--text-sm); + display: flex; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; +} + +/* ===================================================== + Utility Classes + ===================================================== */ + +/* Flex utilities */ +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.flex-1 { + flex: 1; +} + +.flex-2 { + flex: 2; +} + +.shrink-0 { + flex-shrink: 0; +} + +.min-h-0 { + min-height: 0; +} + +/* Gap utilities */ +.gap-2 { gap: 0.5rem; } +.gap-3 { gap: 0.75rem; } +.gap-4 { gap: 1rem; } +.gap-6 { gap: 1.5rem; } + +/* Margin utilities */ +.mb-1 { margin-bottom: 0.25rem; } +.mb-2 { margin-bottom: 0.5rem; } +.mb-3 { margin-bottom: 0.75rem; } +.mb-4 { margin-bottom: 1rem; } +.mb-6 { margin-bottom: 1.5rem; } +.mt-4 { margin-top: 1rem; } +.mt-6 { margin-top: 1.5rem; } + +/* Text utilities */ +.text-center { text-align: center; } +.text-right { text-align: right; } +.font-bold { font-weight: 700; } +.font-medium { font-weight: 500; } + +/* Overflow utilities */ +.overflow-hidden { overflow: hidden; } +.overflow-y-auto { overflow-y: auto; } + +/* Width utilities */ +.w-full { width: 100%; } + +/* Animation */ +@keyframes pulse { + 0%, 100% { opacity: 0.2; } + 50% { opacity: 0.4; } +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +/* Grid utilities */ +.grid-cols-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +/* Space utilities */ +.space-y-4 > * + * { + margin-top: 1rem; +} + +.space-y-5 > * + * { + margin-top: 1.25rem; +} + +/* Min width */ +.min-w-280 { + min-width: 280px; +} + +/* Scrollbar utility */ +.scrollbar-hide { + scrollbar-width: none; + -ms-overflow-style: none; +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; +} + diff --git a/src/styles/modals-overlays.css b/src/styles/modals-overlays.css new file mode 100644 index 0000000..df60268 --- /dev/null +++ b/src/styles/modals-overlays.css @@ -0,0 +1,1585 @@ +/* ===================================================== + Social Posting Modal + ===================================================== */ + +.social-posting-overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + padding: 1rem; +} + +.social-posting-modal { + width: 100%; + max-width: 900px; + max-height: 90vh; + background-color: #002224; + border-radius: 16px; + border: 1px solid rgba(166, 255, 234, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.social-posting-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 1.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.social-posting-title { + font-size: 24px; + font-weight: 600; + color: #FFFFFF; + margin: 0; +} + +.social-posting-close { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + border-radius: 6px; + transition: all 0.2s; +} + +.social-posting-close:hover { + color: #FFFFFF; + background: rgba(255, 255, 255, 0.1); +} + +.social-posting-content { + display: flex; + flex: 1; + overflow: hidden; +} + +@media (max-width: 768px) { + .social-posting-content { + flex-direction: column; + } +} + +/* Video Preview Section */ +.social-posting-preview { + width: 45%; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background-color: #001a1c; + border-right: 1px solid rgba(255, 255, 255, 0.08); + overflow: hidden; +} + +@media (max-width: 768px) { + .social-posting-preview { + width: 100%; + height: 80vh; + border-right: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + } +} + +.social-posting-video-container { + max-width: 100%; + max-height: 100%; + background-color: #000; + border-radius: 12px; + overflow: hidden; + display: inline-flex; +} + +.social-posting-video.horizontal { + display: block; + width: 100%; + height: auto; +} + +.social-posting-video.vertical { + display: block; + max-height: 100%; + width: auto; +} + +/* Form Section */ +.social-posting-form { + flex: 1; + padding: 1.5rem; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +/* .social-posting-video-info { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.social-posting-label-badge { + padding: 0.375rem 0.75rem; + background: rgba(166, 130, 255, 0.15); + border: 1px solid rgba(166, 130, 255, 0.3); + border-radius: 6px; + font-size: 0.75rem; + font-weight: 500; + color: #a682ff; +} + +.social-posting-add-btn { + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: 1px dashed rgba(255, 255, 255, 0.2); + border-radius: 6px; + color: rgba(255, 255, 255, 0.4); + font-size: 1rem; + cursor: pointer; +} */ + +.social-posting-video-meta { + padding: 0.5rem; +} + +.social-posting-video-title { + font-size: 18px; + font-weight: 500; + color: #FFFFFF; + margin: 0 0 0.25rem 0; +} + +.social-posting-video-specs { + font-size: 14px; + color: rgba(255, 255, 255, 0.5); + margin: 0; +} + +.social-posting-field { + display: flex; + flex-direction: column; + gap: 0.5rem; + position: relative; +} + +.social-posting-label { + font-size: 16px; + font-weight: 500; + color: rgba(255, 255, 255, 0.8); +} + +.social-posting-label .required { + color: #a6ffea; +} + +.social-posting-input, +.social-posting-select, +.social-posting-textarea { + width: 100%; + padding: 0.75rem 1rem; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #FFFFFF; + font-size: 14px; + font-family: 'Pretendard', sans-serif; + transition: border-color 0.2s; +} + +.social-posting-input::placeholder, +.social-posting-textarea::placeholder { + color: rgba(255, 255, 255, 0.3); +} + +/* SEO 자동 생성 shimmer 효과 */ +@keyframes seo-shimmer { + 0% { background-position: 200% center; } + 100% { background-position: -200% center; } +} + +.seo-input-wrapper { + position: relative; +} + +.seo-input-wrapper .social-posting-input, +.seo-input-wrapper .social-posting-textarea { + width: 100%; +} + +.seo-shimmer-text { + position: absolute; + top: 50%; + left: 12px; + transform: translateY(-50%); + pointer-events: none; + font-size: 14px; + font-family: 'Pretendard', sans-serif; + background: linear-gradient( + 90deg, + rgba(166, 255, 234, 0.25) 0%, + #a6ffea 40%, + rgba(166, 255, 234, 0.25) 80% + ); + background-size: 200% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: seo-shimmer 3s linear infinite; +} + +.seo-input-wrapper:has(.social-posting-textarea) .seo-shimmer-text { + top: 14px; + transform: none; +} + +.social-posting-input:focus, +.social-posting-select:focus, +.social-posting-textarea:focus { + outline: none; + border-color: rgba(166, 255, 234, 0.4); +} + +.social-posting-select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + padding-right: 2.5rem; +} + +.social-posting-select option { + background-color: #002224; + color: #FFFFFF; +} + +.social-posting-textarea { + resize: vertical; + min-height: 80px; +} + +.social-posting-char-count { + position: absolute; + right: 0; + top: 0; + font-size: 0.7rem; + color: rgba(255, 255, 255, 0.4); +} + +.social-posting-loading, +.social-posting-no-accounts { + padding: 1rem; + text-align: center; + color: rgba(255, 255, 255, 0.5); + font-size: 0.85rem; +} + +.social-posting-no-accounts-hint { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.4); + margin-top: 0.25rem; +} + +/* Radio Group */ +.social-posting-radio-group { + display: flex; + gap: 1.25rem; +} + +.social-posting-radio { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.social-posting-radio input[type="radio"] { + width: 16px; + height: 16px; + accent-color: #a6ffea; + cursor: pointer; +} + +.social-posting-radio .radio-label { + font-size: 14px; + color: rgba(255, 255, 255, 0.8); +} + +.social-posting-radio .radio-label.disabled { + color: rgba(255, 255, 255, 0.4); +} + +/* ===================================================== + Schedule DateTime Picker + ===================================================== */ + +.schedule-datetime-picker { + margin-top: 12px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 16px; + display: flex; + flex-direction: column; + gap: 14px; +} + +.mini-calendar { + width: 100%; +} + +.mini-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; +} + +.mini-calendar-title { + font-size: 0.85rem; + font-weight: 600; + color: rgba(255, 255, 255, 0.9); +} + +.mini-calendar-nav { + background: none; + border: none; + color: rgba(255, 255, 255, 0.6); + font-size: 1.2rem; + cursor: pointer; + padding: 2px 8px; + border-radius: 6px; + line-height: 1; + transition: background 0.15s, color 0.15s; +} + +.mini-calendar-nav:hover { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); +} + +.mini-calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} + +.mini-calendar-day-label { + text-align: center; + font-size: 0.72rem; + color: rgba(255, 255, 255, 0.4); + padding: 4px 0; +} + +.mini-calendar-cell { + background: none; + border: none; + color: rgba(255, 255, 255, 0.85); + font-size: 0.78rem; + cursor: pointer; + padding: 5px 2px; + border-radius: 6px; + text-align: center; + transition: background 0.15s; +} + +.mini-calendar-cell:hover:not(.disabled):not(.selected) { + background: rgba(255, 255, 255, 0.1); +} + +.mini-calendar-cell.other-month { + color: rgba(255, 255, 255, 0.25); +} + +.mini-calendar-cell.today { + color: #a6ffea; + font-weight: 600; +} + +.mini-calendar-cell.selected { + background: #a65eff; + color: #fff; + font-weight: 600; +} + +.mini-calendar-cell.disabled { + color: rgba(255, 255, 255, 0.2); + cursor: not-allowed; +} + +.schedule-time-picker { + display: flex; + flex-direction: column; + gap: 8px; + padding-top: 12px; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.schedule-time-label { + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 500; +} + +.schedule-time-selects { + display: flex; + gap: 8px; +} + +.schedule-time-select { + flex: 1; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + color: rgba(255, 255, 255, 0.9); + font-size: 0.85rem; + padding: 8px 10px; + cursor: pointer; + outline: none; + appearance: auto; +} + +.schedule-time-select:focus { + border-color: rgba(166, 95, 255, 0.6); +} + +.schedule-time-select option { + background: #1a2a2a; + color: rgba(255, 255, 255, 0.9); +} + +.schedule-datetime-preview { + font-size: 0.8rem; + color: #a65eff; + font-weight: 600; + margin: 0; +} + +/* Footer */ +.social-posting-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.2); +} + +.social-posting-footer-note { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.5); + margin: 0; +} + +.social-posting-link { + color: #a6ffea; + text-decoration: underline; +} + +.social-posting-actions { + display: flex; + gap: 0.75rem; +} + +.social-posting-btn { + padding: 0.625rem 1.25rem; + border-radius: 8px; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +.social-posting-btn.cancel { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.7); +} + +.social-posting-btn.cancel:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.25); +} + +.social-posting-btn.submit { + background: linear-gradient(135deg, #a682ff 0%, #8b5cf6 100%); + border: none; + color: #FFFFFF; +} + +.social-posting-btn.submit:hover:not(:disabled) { + background: linear-gradient(135deg, #9570f0 0%, #7c4fe0 100%); +} + +.social-posting-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Mobile Adjustments */ +@media (max-width: 768px) { + .social-posting-modal { + max-height: 95vh; + } + + .social-posting-header { + padding: 1rem; + } + + .social-posting-form { + padding: 1rem; + } + + .social-posting-footer { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .social-posting-footer-note { + text-align: center; + } + + .social-posting-actions { + width: 100%; + } + + .social-posting-btn { + flex: 1; + } + + .social-posting-radio-group { + flex-direction: column; + gap: 0.75rem; + } +} + +/* Custom Scrollbar for Social Posting Modal */ +.social-posting-modal::-webkit-scrollbar, +.social-posting-content::-webkit-scrollbar, +.social-posting-form::-webkit-scrollbar { + width: 6px; +} + +.social-posting-modal::-webkit-scrollbar-track, +.social-posting-content::-webkit-scrollbar-track, +.social-posting-form::-webkit-scrollbar-track { + background: #001a1c; +} + +.social-posting-modal::-webkit-scrollbar-thumb, +.social-posting-content::-webkit-scrollbar-thumb, +.social-posting-form::-webkit-scrollbar-thumb { + background: #003d40; + border-radius: 3px; +} + +.social-posting-modal::-webkit-scrollbar-thumb:hover, +.social-posting-content::-webkit-scrollbar-thumb:hover, +.social-posting-form::-webkit-scrollbar-thumb:hover { + background: #004d50; +} + +/* Firefox scrollbar */ +.social-posting-modal, +.social-posting-content, +.social-posting-form { + scrollbar-width: thin; + scrollbar-color: #003d40 #001a1c; +} + +/* Custom Channel Dropdown */ +.social-posting-channel-dropdown { + position: relative; +} + +.social-posting-channel-trigger { + width: 100%; + padding: 0.75rem 1rem; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #FFFFFF; + font-size: 0.875rem; + font-family: 'Pretendard', sans-serif; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: border-color 0.2s; +} + +.social-posting-channel-trigger:hover { + border-color: rgba(255, 255, 255, 0.2); +} + +.social-posting-channel-trigger.open { + border-color: rgba(166, 255, 234, 0.4); +} + +.social-posting-channel-selected { + display: flex; + align-items: center; + gap: 0.625rem; +} + +.social-posting-channel-icon { + width: 24px; + height: 24px; + border-radius: 4px; + object-fit: cover; +} + +.social-posting-channel-arrow { + width: 12px; + height: 12px; + transition: transform 0.2s; +} + +.social-posting-channel-trigger.open .social-posting-channel-arrow { + transform: rotate(180deg); +} + +.social-posting-channel-placeholder { + color: rgba(255, 255, 255, 0.35); +} + +.social-posting-channel-menu { + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 4px; + background-color: #003538; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + overflow: hidden; + z-index: 10; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.social-posting-channel-option { + width: 100%; + padding: 0.75rem 1rem; + background: transparent; + border: none; + color: #FFFFFF; + font-size: 0.875rem; + font-family: 'Pretendard', sans-serif; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.625rem; + transition: background-color 0.15s; +} + +.social-posting-channel-option:hover { + background-color: rgba(166, 255, 234, 0.1); +} + +.social-posting-channel-option.selected { + background-color: rgba(166, 255, 234, 0.15); +} + +.social-posting-channel-option-icon { + width: 24px; + height: 24px; + border-radius: 4px; + object-fit: cover; +} + + +/* ============================================ + Upload Progress Modal Styles + ============================================ */ + +.upload-progress-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1100; + padding: 1rem; +} + +.upload-progress-modal { + width: 100%; + max-width: 420px; + background: linear-gradient(180deg, #003538 0%, #002224 100%); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: hidden; +} + +.upload-progress-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 1.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.upload-progress-title { + font-size: 1.125rem; + font-weight: 600; + color: #FFFFFF; + margin: 0; +} + +.upload-progress-close { + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + padding: 0.25rem; + display: flex; + transition: color 0.2s; +} + +.upload-progress-close:hover { + color: #FFFFFF; +} + +.upload-progress-content { + padding: 2rem 1.5rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; +} + +/* Spinner */ +.upload-progress-spinner { + width: 64px; + height: 64px; +} + +.upload-spinner-svg { + width: 100%; + height: 100%; + animation: upload-spinner-rotate 1.5s linear infinite; +} + +.upload-spinner-svg circle { + stroke: #a6ffea; + stroke-dasharray: 90, 150; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: upload-spinner-dash 1.5s ease-in-out infinite; +} + +@keyframes upload-spinner-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes upload-spinner-dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} + +/* Status Icons */ +.upload-progress-icon { + width: 64px; + height: 64px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.upload-progress-icon.success { + background: rgba(166, 255, 234, 0.15); + color: #a6ffea; +} + +.upload-progress-icon.error { + background: rgba(248, 113, 113, 0.15); + color: #f87171; +} + +/* Status Text */ +.upload-progress-status { + font-size: 1.25rem; + font-weight: 600; + color: #FFFFFF; + margin: 0; +} + +.upload-progress-status.completed { + color: #a6ffea; +} + +.upload-progress-status.failed { + color: #f87171; +} + +/* Progress Bar */ +.upload-progress-bar-container { + width: 100%; + max-width: 280px; + position: relative; +} + +.upload-progress-bar-container::before { + content: ''; + display: block; + width: 100%; + height: 8px; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + +.upload-progress-bar-fill { + position: absolute; + top: 0; + left: 0; + height: 8px; + background: linear-gradient(90deg, #a6ffea 0%, #4fd1c5 100%); + border-radius: 4px; + transition: width 0.3s ease; +} + +.upload-progress-percent { + display: block; + text-align: center; + margin-top: 0.5rem; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.7); +} + +/* Info Section */ +.upload-progress-info { + width: 100%; + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + padding: 1rem; +} + +.upload-progress-info-row { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; +} + +.upload-progress-info-row + .upload-progress-info-row { + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.upload-progress-label { + font-size: 0.8125rem; + color: rgba(255, 255, 255, 0.5); + flex-shrink: 0; +} + +.upload-progress-value { + font-size: 0.875rem; + color: #FFFFFF; + text-align: right; + word-break: break-word; +} + +/* Error Message */ +.upload-progress-error { + width: 100%; + background: rgba(248, 113, 113, 0.1); + border: 1px solid rgba(248, 113, 113, 0.3); + border-radius: 8px; + padding: 0.875rem 1rem; +} + +.upload-progress-error p { + margin: 0; + font-size: 0.875rem; + color: #f87171; + text-align: center; +} + +/* YouTube Link */ +.upload-progress-youtube-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: #FF0000; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 500; + text-decoration: none; + border-radius: 8px; + transition: background-color 0.2s; +} + +.upload-progress-youtube-link:hover { + background: #CC0000; +} + +.upload-youtube-icon { + width: 20px; + height: 20px; +} + +/* Footer */ +.upload-progress-footer { + padding: 1.25rem 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.upload-progress-calendar-link { + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.45); + cursor: pointer; + text-decoration: underline; + text-underline-offset: 3px; +} + +.upload-progress-calendar-link:hover { + color: rgba(255, 255, 255, 0.75); +} + +.upload-progress-btn { + padding: 0.75rem 2rem; + border-radius: 8px; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +.upload-progress-btn.primary { + background: linear-gradient(135deg, #a6ffea 0%, #4fd1c5 100%); + border: none; + color: #002224; +} + +.upload-progress-btn.primary:hover { + opacity: 0.9; + transform: translateY(-1px); +} + +.upload-progress-note { + margin: 0; + font-size: 0.8125rem; + color: rgba(255, 255, 255, 0.5); + text-align: center; +} + +/* Calendar panel scrollbar */ +.calendar-panel-scroll::-webkit-scrollbar { + width: 4px; +} + +.calendar-panel-scroll::-webkit-scrollbar-track { + background: transparent; +} + +.calendar-panel-scroll::-webkit-scrollbar-thumb { + background: #067C80; + border-radius: 999px; +} + +.calendar-panel-scroll::-webkit-scrollbar-thumb:hover { + background: #088a8e; +} + +/* Firefox */ +.calendar-panel-scroll { + scrollbar-width: thin; + scrollbar-color: #067C80 transparent; +} + +/* ===================================================== + Tutorial Overlay + ===================================================== */ + +.tutorial-overlay-root { + position: fixed; + inset: 0; + z-index: 10000; + pointer-events: none; +} + +.tutorial-overlay-svg { + position: fixed; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; + cursor: default; +} + +.tutorial-overlay-blocker { + position: fixed; + background: rgba(0, 0, 0, 0.72); + pointer-events: all; +} + +@keyframes tutorial-pulse { + 0%, 100% { + border-color: rgba(166, 255, 234, 0.9); + box-shadow: 0 0 0 2px rgba(166, 255, 234, 0.3), + 0 0 16px 4px rgba(166, 255, 234, 0.35), + 0 0 40px 8px rgba(166, 255, 234, 0.15); + } + 50% { + border-color: rgba(166, 255, 234, 0.5); + box-shadow: 0 0 0 5px rgba(166, 255, 234, 0.12), + 0 0 32px 10px rgba(166, 255, 234, 0.5), + 0 0 64px 20px rgba(166, 255, 234, 0.2); + } +} + +.tutorial-spotlight-ring { + position: fixed; + border: 4px solid rgba(166, 255, 234, 0.85); + border-radius: 12px; + box-shadow: 0 0 0 1px rgba(166, 255, 234, 0.2), 0 0 12px 2px rgba(166, 255, 234, 0.15); + pointer-events: none; + z-index: 10001; + animation: tutorial-pulse 2s ease-in-out infinite; +} + +.tutorial-tooltip { + position: fixed; + pointer-events: all; + z-index: 10002; + display: flex; + width: 370px; + padding: 20px; + flex-direction: column; + gap: 8px; + border-radius: 12px; + border: 1px solid var(--Color-teal-600, #046266); + background: var(--Color-teal-800, #002224); +} + +.tutorial-tooltip-title { + align-self: stretch; + color: rgba(255, 255, 255, 0.70); + /* 14 */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ +} + +.tutorial-tooltip-desc { + display: flex; + padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; + line-height: 1.5; + white-space: pre-line; + align-self: stretch; + color: var(--Color-white, #FFF); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.108px; +} + +.tutorial-tooltip-note { + align-self: stretch; + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; + letter-spacing: -0.072px; + margin: -8px 0 14px; + white-space: pre-line; +} + +.tutorial-tooltip-footer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.tutorial-tooltip-footer-left { + display: flex; + align-items: center; + gap: 8px; +} + +.tutorial-tooltip-counter { + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 12px */ + letter-spacing: -0.072px; +} + +.tutorial-tooltip-actions { + display: flex; + gap: 10px; +} + +.tutorial-btn-skip { + color: rgba(255, 255, 255, 0.60); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 12px */ + letter-spacing: -0.072px; +} + +.tutorial-btn-skip:hover { + color: rgba(255, 255, 255, 0.7); +} + +.tutorial-btn-prev { + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 4px; + background: var(--Color-teal-200, #9BCACC); + color: var(--Color-teal-800, #002224); + font-family: Pretendard; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 13px */ + letter-spacing: -0.078px; +} + +.tutorial-btn-prev:hover { + background: rgba(255, 255, 255, 0.14); +} + +.tutorial-btn-next { + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 4px; + background: var(--Color-teal-200, #9BCACC); + color: var(--Color-teal-800, #002224); + font-family: Pretendard; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 13px */ + letter-spacing: -0.078px; +} + +.tutorial-btn-next:hover { + background: rgba(255, 255, 255, 0.14); +} + +/* 말풍선 variant — 색상은 기본 tooltip과 동일, 꼬리만 추가 */ +.tutorial-tooltip-bubble { + border-radius: 12px; +} + +/* 꼬리 (화살표) */ +.tutorial-tooltip-bubble::before { + content: ''; + position: absolute; + width: 0; + height: 0; + border: 10px solid transparent; +} + +.tutorial-tooltip-bubble--bottom::before { + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-bottom-color: #1a2630; +} + +.tutorial-tooltip-bubble--top::before { + top: 100%; + left: 50%; + transform: translateX(-50%); + border-top-color: #1a2630; +} + +.tutorial-tooltip-bubble--right::before { + right: 100%; + top: 50%; + transform: translateY(-50%); + border-right-color: #1a2630; +} + +.tutorial-tooltip-bubble--left::before { + left: 100%; + top: 50%; + transform: translateY(-50%); + border-left-color: #1a2630; +} + +.tutorial-tooltip-action-hint { + font-size: 11px; + color: #a6ffea; + margin: 8px 0 0; + opacity: 0.8; +} + +/* 튜토리얼 재시작 팝업 */ +.tutorial-restart-backdrop { + position: fixed; + inset: 0; + z-index: 10100; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.5); +} + +.tutorial-restart-popup { + background: #1a2630; + border: 1px solid rgba(166, 255, 234, 0.25); + border-radius: 14px; + padding: 24px 28px; + width: 320px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); +} + +.tutorial-restart-title { + font-size: 16px; + font-weight: 700; + color: #a6ffea; + margin: 0 0 10px; +} + +.tutorial-restart-desc { + font-size: 13px; + color: rgba(255, 255, 255, 0.65); + margin: 0 0 20px; + line-height: 1.5; +} + +.tutorial-restart-actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.tutorial-restart-cancel { + font-size: 13px; + color: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.08); + border: none; + border-radius: 8px; + cursor: pointer; + padding: 7px 16px; +} + +.tutorial-restart-cancel:hover { + background: rgba(255, 255, 255, 0.14); + color: rgba(255, 255, 255, 0.8); +} + +.tutorial-restart-confirm { + font-size: 13px; + font-weight: 600; + color: #0d1a1f; + background: #a6ffea; + border: none; + border-radius: 8px; + cursor: pointer; + padding: 7px 18px; +} + +.tutorial-restart-confirm:hover { + background: #c0fff2; +} + +/* 사이드바 튜토리얼 버튼 */ +.tutorial-restart-fab { + position: fixed; + top: 16px; + right: 20px; + z-index: 900; + display: flex; + align-items: center; + gap: 8px; + padding: 7px 14px; + background: rgba(0, 34, 36, 0.85); + border: 1px solid rgba(166, 255, 234, 0.25); + border-radius: 20px; + color: rgba(255, 255, 255, 0.65); + cursor: pointer; + font-size: 13px; + backdrop-filter: blur(6px); + transition: background 0.15s, color 0.15s, border-color 0.15s; +} + +.tutorial-restart-fab:hover { + background: rgba(166, 255, 234, 0.12); + border-color: rgba(166, 255, 234, 0.5); + color: #a6ffea; +} + +/* 튜토리얼 토글 버튼 */ +.tutorial-toggle-fab { + position: fixed; + top: 16px; + right: 20px; + z-index: 900; + display: flex; + align-items: center; + gap: 8px; + padding: 7px 14px; + background: rgba(0, 34, 36, 0.85); + border: 1px solid rgba(166, 255, 234, 0.25); + border-radius: 20px; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + font-size: 13px; + backdrop-filter: blur(6px); + transition: background 0.15s, color 0.15s, border-color 0.15s; +} + +.tutorial-toggle-fab:hover { + background: rgba(166, 255, 234, 0.12); + border-color: rgba(166, 255, 234, 0.5); + color: #a6ffea; +} + +.tutorial-toggle-fab.active { + color: #a6ffea; + border-color: rgba(166, 255, 234, 0.4); +} + +@media (max-width: 767px) { + .tutorial-toggle-fab { + display: none; + } +} + +.tutorial-toggle-badge { + font-size: 10px; + font-weight: 700; + padding: 2px 6px; + border-radius: 4px; + transition: background 0.15s, color 0.15s; +} + +.tutorial-toggle-badge.on { + background: #a6ffea; + color: #002224; +} + +.tutorial-toggle-badge.off { + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.4); +} + +/* BusinessNameInputModal */ +.manual-modal-backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} + +.manual-modal { + background: #1a2a2b; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + width: 375px; + max-width: 92vw; + display: flex; + flex-direction: column; +} + +.manual-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.manual-modal-title { + font-size: 18px; + font-weight: 600; + color: #fff; +} + +.manual-modal-subtitle { + font-size: 15px; + font-weight: 400; + color: rgba(155, 202, 204, 0.7); + padding: 15px 20px 0; + line-height: 1.6; +} + +.manual-modal-close { + background: none; + border: none; + color: rgba(255, 255, 255, 0.5); + font-size: 16px; + cursor: pointer; + padding: 0; + line-height: 1; +} + +.manual-modal-close:hover { + color: #fff; +} + +.manual-modal-body { + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 20px 24px; +} + +.manual-modal-field { + display: flex; + flex-direction: column; + gap: 6px; +} + +.manual-modal-label { + font-size: 16px; + font-weight: 500; + color: rgba(255, 255, 255, 0.7); +} + +.manual-modal-input { + width: 100%; + padding: 10px 14px; + border-radius: 8px; + border: 1px solid rgba(155, 202, 204, 0.25); + background: rgba(255, 255, 255, 0.06); + color: #fff; + font-size: 14px; + outline: none; + box-sizing: border-box; + transition: border-color 0.15s; +} + +.manual-modal-input::placeholder { + color: rgba(255, 255, 255, 0.3); +} + +.manual-modal-input:focus { + border-color: #9BCACC; +} + +.manual-modal-city-btn { + width: 100%; + padding: 10px 14px; + border-radius: 8px; + border: 1px solid rgba(155, 202, 204, 0.25); + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.3); + font-size: 14px; + text-align: left; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: border-color 0.15s; + box-sizing: border-box; +} + +.manual-modal-city-btn.selected { + color: #fff; +} + +.manual-modal-city-btn:hover { + border-color: #9BCACC; +} + +.manual-modal-actions { + display: flex; + gap: 8px; + margin-top: 4px; +} + +.manual-modal-cancel { + flex: 1; + padding: 11px 0; + border-radius: 8px; + border: 1px solid rgba(155, 202, 204, 0.3); + background: transparent; + color: rgba(255, 255, 255, 0.6); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: background 0.15s; +} + +.manual-modal-cancel:hover { + background: rgba(155, 202, 204, 0.08); +} + +.manual-modal-submit { + flex: 2; + padding: 11px 0; + border-radius: 8px; + border: none; + background: #9BCACC; + color: #1a2a2b; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background 0.15s, opacity 0.15s; +} + +.manual-modal-submit:hover:not(:disabled) { + background: #b0d8da; +} + +.manual-modal-submit:disabled { + opacity: 0.35; + cursor: not-allowed; +} diff --git a/src/styles/studio-assets.css b/src/styles/studio-assets.css new file mode 100644 index 0000000..1d93a6b --- /dev/null +++ b/src/styles/studio-assets.css @@ -0,0 +1,1354 @@ +/* ===================================================== + Sound Studio Styles + ===================================================== */ + +/* Sound Studio Page */ +.sound-studio-page { + height: 100%; + background-color: #002224; + overflow-y: auto; + overflow-x: hidden; + padding: 30px 1rem 120px; +} + +@media (min-width: 768px) { + .sound-studio-page { + padding: 30px 2rem 120px; + left: 240px; + } +} + +/* Sound Studio Header */ +.sound-studio-header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 64px; + display: flex; + align-items: center; + padding: 0 1rem; + z-index: 30; + pointer-events: none; +} + +.sound-studio-header > * { + pointer-events: all; +} + +@media (min-width: 768px) { + .sound-studio-header { + left: 240px; + padding: 0 2rem; + } +} + +.btn-back-new { + display: flex; + align-items: center; + gap: 0.25rem; + padding: 0.5rem 1.25rem 0.5rem 0.5rem; + background-color: #462E64; + border: 1px solid #694596; + border-radius: var(--radius-full); + color: #CFABFB; + font-size: var(--text-sm); + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + width: fit-content; + flex-shrink: 0; +} + +.btn-back-new:hover { + background-color: #694596; + border-color: #8B5BC7; +} + +/* Progress Indicator */ +.progress-indicator { + display: flex; + flex-direction: column; + gap: 0.25rem; + width: 280px; +} + +.progress-label { + display: flex; + align-items: center; + gap: 1rem; +} + +.progress-text { + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-white); +} + +.progress-numbers { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.progress-current { + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-white); +} + +.progress-divider, +.progress-total { + font-size: 0.8125rem; + font-weight: 400; + color: #379599; +} + +.progress-bar-wrapper { + position: relative; + width: 100%; + height: 8px; + background-color: #01393B; + border-radius: var(--radius-full); + overflow: hidden; +} + +.progress-bar-track { + width: 100%; + height: 100%; + background: linear-gradient(90deg, #94FBE0 0%, #AE72F9 100%); + border-radius: var(--radius-full); +} + +/* Sound Studio Title */ +.sound-studio-title { + font-size: 2rem; + font-weight: 700; + color: #ffffff; + text-align: center; + width: 100%; + margin: 0 auto 1rem; + padding: 0; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Sound Studio Container */ +.sound-studio-container { + height: 96%; + min-height: 620px; + background-color: #01393B; + border-radius: 24px; + padding: 1.25rem 1rem; + margin: 0 auto; + max-width: 1440px; + width: 100%; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +@media (min-width: 768px) { + .sound-studio-container { + border-radius: 40px; + padding: 2rem; + } +} + +/* Sound Studio Columns */ +.sound-studio-columns { + display: flex; + flex-direction: column; + gap: 1.5rem; + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; +} + +/* Sound Column */ +.sound-column { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + flex-shrink: 0; + font-size: 14px; +} + +.sound-column > *:not(.btn-generate-sound):not(.error-message-new):not(.status-message-new) { + width: 100%; +} + +/* Lyrics Column */ +.lyrics-column { + width: 100%; + display: flex; + flex-direction: column; + gap: 1.25rem; + flex-shrink: 0; +} + +/* Column Title */ +.column-title { + font-size: 1.125rem; + font-weight: 600; + color: var(--color-mint); + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Sound Studio Section */ +.sound-studio-section { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +/* Input Label */ +.input-label { + font-size: var(--text-sm); + font-weight: 600; + color: #CEE5E6; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Sound Type Grid */ +.sound-type-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; +} + +/* Sound Type Button */ +.sound-type-btn { + padding: 1rem; + background-color: #002224; + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 8px; + color: var(--color-text-white); + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + text-align: center; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.sound-type-btn:hover:not(:disabled) { + background-color: rgba(0, 34, 36, 0.8); + border-color: rgba(255, 255, 255, 0.1); +} + +.sound-type-btn.active { + border-color: var(--color-mint); +} + +.sound-type-btn.active:hover:not(:disabled) { + border-color: var(--color-mint); +} + +.sound-type-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Genre Grid */ +.genre-grid { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.genre-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; +} + +/* Genre Button */ +.genre-btn { + padding: 1rem; + background-color: #002224; + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 8px; + color: var(--color-text-white); + font-size: var(--text-sm); + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + text-align: center; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.genre-btn:hover:not(:disabled) { + background-color: rgba(0, 34, 36, 0.8); + border-color: rgba(255, 255, 255, 0.1); +} + +.genre-btn.active:hover:not(:disabled) { + border-color: var(--color-mint); +} + +.genre-btn.active { + border-color: var(--color-mint); +} + +.genre-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Language Selector */ +.language-selector-wrapper { + position: relative; +} + +.language-selector { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + background-color: #002224; + border: 1px solid transparent; + border-radius: 8px; + cursor: pointer; + transition: border-color 0.2s, background-color 0.2s; +} + +.language-selector:hover:not(:disabled) { + background-color: #003A3C; +} + +.language-selector:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.language-display { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.language-flag { + font-size: 1.25rem; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.language-name { + font-size: var(--text-sm); + font-weight: 600; + color: var(--color-text-white); + line-height: 1.19; + letter-spacing: -0.006em; +} + +.language-dropdown-icon { + width: 1rem; + height: 1rem; + opacity: 0.7; + transition: transform 0.2s; +} + +.language-dropdown-icon.open { + transform: rotate(180deg); +} + +/* Language Dropdown Menu */ +.language-dropdown-menu { + position: absolute; + top: calc(100% + 0.5rem); + left: 0; + right: 0; + max-height: 220px; + background-color: #002224; + border: 1px solid #046266; + border-radius: 8px; + overflow-y: auto; + z-index: 100; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + overscroll-behavior: contain; +} + +.language-dropdown-menu::-webkit-scrollbar { + width: 6px; +} + +.language-dropdown-menu::-webkit-scrollbar-track { + background: transparent; +} + +.language-dropdown-menu::-webkit-scrollbar-thumb { + background: #046266; + border-radius: 3px; +} + +.language-dropdown-menu::-webkit-scrollbar-thumb:hover { + background: #379599; +} + +.language-dropdown-item { + width: 100%; + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background-color: #002224; + border: none; + cursor: pointer; + transition: background-color 0.2s; +} + +.language-dropdown-item:hover { + background-color: #003A3C; +} + +.language-dropdown-item.active { + background-color: #046266; +} + +.language-dropdown-item .language-flag { + font-size: 1.25rem; +} + +.language-dropdown-item .language-name { + font-size: var(--text-sm); + font-weight: 600; + color: var(--color-text-white); +} + +/* Lyrics Header */ +.lyrics-header { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.lyrics-subtitle { + font-size: var(--text-sm); + font-weight: 600; + color: #CEE5E6; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Audio Player */ +.audio-player { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: #002224; + border-radius: 8px; +} + +.play-btn-new { + width: 1.5rem; + height: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--color-text-white); + cursor: pointer; + transition: all var(--transition-normal); + flex-shrink: 0; +} + +.play-btn-new:hover:not(.disabled) { + color: var(--color-mint); +} + +.play-btn-new.disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.audio-progress-container { + flex: 1; + height: 4px; + background-color: #046266; + border-radius: var(--radius-full); + position: relative; + cursor: pointer; +} + +.audio-progress-container.disabled { + cursor: not-allowed; +} + +.audio-progress-fill { + height: 100%; + background-color: var(--color-mint); + border-radius: var(--radius-full); + transition: width 0.1s ease-out; +} + +.audio-time { + font-size: var(--text-sm); + font-weight: 400; + color: #046266; + min-width: 40px; + text-align: right; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Lyrics Display */ +.lyrics-display { + flex: 1; + display: flex; + background-color: #002224; + border-radius: 8px; + padding: 1rem; + overflow: hidden; +} + +.lyrics-textarea { + width: 100%; + min-height: 200px; + background: transparent; + border: none; + color: var(--color-text-white); + font-size: 16px; + font-family: inherit; + resize: none; + outline: none; + line-height: 1.6; + scrollbar-width: thin; + scrollbar-color: #046266 transparent; +} + +.lyrics-textarea::-webkit-scrollbar { + width: 6px; +} + +.lyrics-textarea::-webkit-scrollbar-track { + background: transparent; +} + +.lyrics-textarea::-webkit-scrollbar-thumb { + background: #046266; + border-radius: 3px; +} + +.lyrics-textarea::-webkit-scrollbar-thumb:hover { + background: #379599; +} + +.lyrics-paragraphs { + width: 100%; + overflow-y: auto; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1.25rem; + scrollbar-color: #046266 transparent; +} + +.lyrics-paragraphs::-webkit-scrollbar { + width: 6px; +} + +.lyrics-paragraphs::-webkit-scrollbar-track { + background: transparent; +} + +.lyrics-paragraphs::-webkit-scrollbar-thumb { + background: #046266; + border-radius: 3px; +} + +.lyrics-section { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.lyrics-tag { + font-size: var(--text-xs); + font-weight: 700; + color: #379599; + letter-spacing: 0.05em; +} + +.lyrics-paragraph { + font-size: var(--text-sm); + font-weight: 400; + color: #CEE5E6; + line-height: 1.9; + white-space: pre-line; + margin: 0; +} + +.lyrics-placeholder { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-sm); + font-weight: 400; + color: #6AB0B3; + text-align: center; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Generate Sound Button */ +.btn-generate-sound { + height: 40px; + min-width: 120px; + padding: 0.625rem 1.25rem; + background-color: #94FBE0; + border: none; + border-radius: var(--radius-full); + color: #000000; + font-size: var(--text-sm); + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + line-height: 1.19; + letter-spacing: -0.006em; + margin-top: 10px; +} + +.btn-generate-sound:hover:not(.disabled) { + background-color: #6ef5ca; +} + +.btn-generate-sound.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.regenerate-hint { + font-size: 14px; + color: #CEE5E6; + text-align: center; +} + +.charge-credits-link { + display: block; + margin-top: 6px; + font-size: 13px; + color: #AE72F9; + text-decoration: underline; + cursor: pointer; +} + +/* Video Generate Button */ +.btn-video-generate { + padding: 0.625rem 2.5rem; + background-color: #AE72F9; + border: none; + border-radius: var(--radius-full); + color: #FFFFFF; + height: 40px; + font-size: var(--text-sm); + font-weight: 600; + cursor: pointer; + transition: all var(--transition-normal); + line-height: 1.19; + letter-spacing: -0.006em; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + min-width: fit-content; +} + +.btn-video-generate:hover:not(.disabled):not(.generating) { + background-color: #9B5DE5; +} + +.btn-video-generate.disabled { + background-color: #462E64; + color: #8B5BC7; + opacity: 0.7; + cursor: not-allowed; +} + +.btn-video-generate.generating { + background-color: #AE72F9; + color: #FFFFFF; + padding: 0.625rem 1.5rem; + cursor: default; +} + +.video-gen-text { + font-size: var(--text-sm); + font-weight: 600; + color: #FFFFFF; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.video-gen-progress-bar { + width: 280px; + height: 8px; + background-color: #694596; + border-radius: var(--radius-full); + overflow: hidden; + position: relative; +} + +.video-gen-progress-fill { + height: 100%; + background-color: #FFFFFF; + border-radius: var(--radius-full); + transition: width 0.5s ease-out; +} + +/* Error and Status Messages */ +.error-message-new { + padding: 0.75rem 1rem; + background-color: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.3); + border-radius: var(--radius-lg); + color: #fca5a5; + font-size: var(--text-sm); + text-align: center; +} + +.status-message-new { + padding: 0.75rem 1rem; + background-color: rgba(148, 251, 224, 0.1); + border: 1px solid rgba(148, 251, 224, 0.3); + border-radius: var(--radius-lg); + color: var(--color-mint); + font-size: var(--text-sm); + text-align: center; + white-space: pre-line; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 10px; +} + +/* Responsive Styles for Sound Studio */ +@media (min-width: 768px) { + .progress-indicator { + width: 100%; + } + + .sound-type-grid { + gap: 0.5rem; + } + + .sound-type-btn { + padding: 0.75rem 0.5rem; + font-size: 14px; + } + + .genre-row { + gap: 0.5rem; + } + + .genre-btn { + padding: 0.75rem 0.5rem; + font-size: 14px; + } +} + +@media (min-width: 640px) and (max-width: 767px) { + .sound-studio-columns { + gap: 2rem; + } +} + +@media (min-width: 768px) and (max-width: 1023px) { + .sound-studio-columns { + gap: 2rem; + } +} + +@media (min-width: 1024px) { + .sound-studio-columns { + flex-direction: row; + gap: 3rem; + } + + .sound-column { + flex: 1; + width: auto; + min-height: 0; + font-size: 14px; + } + + .lyrics-column { + flex: 1; + width: auto; + min-height: 0; + } + + .column-title { + font-size: 1.25rem; + } + + .lyrics-display { + min-height: 250px; + } +} + +/* ==================================== + Asset Management (Brand Asset) Styles + ==================================== */ + +/* Asset Page Layout */ +.asset-page { + height: 100%; + background-color: #002224; + position: relative; +} + +/* Fixed Header - 뒤로가기 */ +.asset-sticky-header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 64px; + display: flex; + align-items: center; + padding: 0 1rem; + z-index: 30; + pointer-events: none; +} + +.asset-sticky-header > * { + pointer-events: all; +} + +@media (min-width: 768px) { + .asset-sticky-header { + left: 240px; + padding: 0 2rem; + } +} + +/* 뒤로가기 버튼 */ +.asset-back-btn { + display: flex; + align-items: center; + gap: 4px; + background-color: #462E64; + color: #CFABFB; + font-size: 0.875rem; + font-weight: 600; + padding: 0 1.25rem 0 0.5rem; + height: 36px; + border: 1px solid #694596; + border-radius: 999px; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.2s; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.asset-back-btn:hover { + background-color: #5a3a80; +} + +/* Single Scroll Area */ +.asset-scroll-area { + height: 100%; + overflow-y: auto; + overflow-x: hidden; + padding: 2rem 2rem 120px; +} + +.asset-scroll-area::-webkit-scrollbar { + width: 6px; +} + +.asset-scroll-area::-webkit-scrollbar-track { + background: transparent; +} + +.asset-scroll-area::-webkit-scrollbar-thumb { + background: #379599; + border-radius: 3px; +} + +.asset-scroll-area::-webkit-scrollbar-thumb:hover { + background: #4AABAF; +} + +/* Fixed Footer - 다음 단계 */ +.asset-sticky-footer { + position: fixed; + bottom: 32px; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + z-index: 30; + pointer-events: none; +} + +.asset-sticky-footer > * { + pointer-events: all; +} + +@media (min-width: 768px) { + body:has(.sidebar.expanded) .asset-sticky-footer { + left: 15rem; + right: 0; + width: auto; + display: flex; + justify-content: center; + } + + body:has(.sidebar.collapsed) .asset-sticky-footer { + left: 5rem; + right: 0; + width: auto; + display: flex; + justify-content: center; + } +} + +/* Asset Title */ +.asset-title { + font-size: 2rem; + font-weight: 700; + color: #E5F1F2; + padding: 0 0 1.5rem; + text-align: center; + line-height: 1.19; + letter-spacing: -0.006em; + margin: 0; +} + +/* Asset Container */ +.asset-container { + margin: 0 auto; + max-width: 1136px; + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (min-width: 1024px) { + .asset-container { + flex-direction: row; + } +} + +/* Asset Columns */ +.asset-column { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.asset-column-left { + width: 100%; + min-width: 0; + flex-shrink: 0; + background-color: #01393B; + border-radius: 24px; + padding: 1.25rem 1rem; +} + +.asset-column-right { + width: 100%; + flex-shrink: 0; + gap: 1rem; + display: flex; + flex-direction: column; +} + +@media (min-width: 1024px) { + .asset-column-left { + flex: 1; + min-height: 0; + overflow: hidden; + border-radius: 40px; + padding: 2rem; + } + + .asset-column-right { + width: 280px; + } +} + +/* Asset Section Header */ +.asset-section-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + flex-shrink: 0; +} + +.asset-section-header-left { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.asset-section-subtitle { + font-size: 0.875rem; + font-weight: 400; + color: #6AB0B3; + line-height: 1.19; + letter-spacing: -0.006em; +} + +/* Asset Section Title */ +.asset-section-title { + font-size: 1.5rem; + font-weight: 600; + color: #94FBE0; + line-height: 1.19; + letter-spacing: -0.009em; + margin: 0; +} + +/* Mobile Upload Button (visible only on mobile/tablet) */ +.asset-mobile-upload-btn { + display: flex; + align-items: center; + gap: 4px; + background-color: #94FBE0; + color: #000; + font-size: 0.75rem; + font-weight: 600; + padding: 0 10px; + height: 24px; + border: none; + border-radius: 999px; + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; +} + +@media (min-width: 1024px) { + .asset-mobile-upload-btn { + display: none; + } +} + +/* Asset Image List */ +.asset-image-list { + background-color: #002224; + border-radius: 8px; + padding: 0.5rem; + max-height: 1080px; + overflow-y: auto; +} + +.asset-image-list::-webkit-scrollbar { + width: 6px; +} + +.asset-image-list::-webkit-scrollbar-track { + background: transparent; +} + +.asset-image-list::-webkit-scrollbar-thumb { + background: #067C80; + border-radius: 3px; +} + +.asset-image-list::-webkit-scrollbar-thumb:hover { + background: #088a8e; +} + +/* Load More Button */ +.asset-load-more { + width: 100%; + padding: 0.625rem 1rem; + background-color: #002224; + color: #9BCACC; + font-size: 0.875rem; + font-weight: 600; + border: 1px solid #379599; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s, border-color 0.2s; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.asset-load-more:hover { + background-color: #003A3C; + border-color: #4AABAF; +} + +/* Asset Image Grid */ +.asset-image-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.5rem; +} + +.asset-image-item { + position: relative; + aspect-ratio: 1; + border-radius: 8px; + overflow: hidden; + background-color: #000; +} + +.asset-image-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.asset-image-badge { + position: absolute; + top: 8px; + left: 8px; + background-color: #EFE3FE; + color: #AE72F9; + font-size: 0.75rem; + font-weight: 600; + padding: 4px 8px; + border-radius: 4px; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.asset-image-remove { + position: absolute; + top: 8px; + right: 8px; + width: 30px; + height: 30px; + background-color: rgba(0, 0, 0, 0.6); + border: none; + border-radius: 999px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #FFFFFF; + transition: background-color 0.2s; +} + +.asset-image-remove:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Asset Upload Section */ +.asset-upload-section { + display: none; + flex-direction: column; + gap: 1rem; + flex: 1; + background-color: #01393B; + border-radius: 40px; + padding: 2rem; +} + +@media (min-width: 1024px) { + .asset-upload-section { + display: flex; + } +} + +.asset-upload-zone { + flex: 1; + border: 1px dashed #379599; + border-radius: 8px; + background-color: #002224; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: border-color 0.2s, background-color 0.2s; + min-height: 150px; +} + +.asset-upload-zone:hover { + border-color: #4AABAF; + background-color: #003A3C; +} + +.asset-upload-text { + font-size: 0.875rem; + font-weight: 600; + color: #9BCACC; + text-align: center; + line-height: 1.19; + letter-spacing: -0.006em; + margin: 0; +} + +/* Asset Ratio Section */ +.asset-ratio-section { + display: flex; + flex-direction: column; + gap: 1rem; + background-color: #01393B; + border-radius: 24px; + padding: 1.25rem 1rem; +} + +@media (min-width: 1024px) { + .asset-ratio-section { + border-radius: 40px; + padding: 2rem; + } +} + +.asset-ratio-buttons { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.asset-ratio-button { + display: flex; + align-items: center; + gap: 1rem; + padding: 0 1rem; + height: 48px; + background-color: #002224; + border: 1px solid transparent; + border-radius: 8px; + cursor: pointer; + transition: border-color 0.2s, background-color 0.2s; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 600; + line-height: 1.19; + letter-spacing: -0.006em; + width: 100%; +} + +.asset-ratio-button:hover { + background-color: #003A3C; +} + +.asset-ratio-button.active { + border-color: #94FBE0; + background-color: #002224; +} + +.asset-ratio-label { + font-weight: 600; + color: #E5F1F2; +} + +.asset-ratio-subtitle { + font-size: 0.875rem; + font-weight: 400; + color: #9BCACC; +} + +.asset-ratio-icon { + width: 32px; + height: 32px; + background-color: #002224; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.asset-ratio-icon-vertical .asset-ratio-box { + width: 18px; + height: 32px; + background-color: #046266; + border-radius: 4px; +} + +.asset-ratio-icon-horizontal .asset-ratio-box { + width: 32px; + height: 18px; + background-color: #046266; + border-radius: 4px; +} + +/* Asset Next Button */ + +.asset-next-button { + background-color: #AE72F9; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 600; + padding: 10px 40px; + border: none; + border-radius: 999px; + cursor: pointer; + transition: background-color 0.2s; + line-height: 1.19; + letter-spacing: -0.006em; +} + +.asset-next-button:hover:not(:disabled) { + background-color: #9D5FE8; +} + +.asset-next-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Responsive Styles */ +@media (max-width: 639px) { + .asset-title { + font-size: 1.5rem; + padding-bottom: 1rem; + } + + .asset-scroll-area { + padding: 80px 1rem 120px; + } + + .asset-image-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 640px) and (max-width: 767px) { + .asset-title { + font-size: 1.75rem; + padding-bottom: 1.25rem; + } + + .asset-scroll-area { + padding: 80px 1.5rem 120px; + } +} + +/* Height-based responsive adjustments */ +@media (max-height: 700px) { + .asset-title { + font-size: 1.75rem; + padding-bottom: 0.75rem; + } + + .asset-upload-zone { + min-height: 100px; + } +} + +@media (max-height: 600px) { + .asset-upload-zone { + min-height: 80px; + } +} + diff --git a/src/styles/tokens.css b/src/styles/tokens.css new file mode 100644 index 0000000..af1c6c9 --- /dev/null +++ b/src/styles/tokens.css @@ -0,0 +1,74 @@ +/* ===================================================== + CASTAD Design System - CSS Variables & Component Classes + ===================================================== */ + +/* ===================================================== + CSS Variables - Design Tokens + ===================================================== */ +:root { + /* Primary Colors */ + --color-mint: #a6ffea; + --color-mint-hover: #8affda; + --color-mint-glow: rgba(166, 255, 234, 0.6); + --color-mint-10: rgba(166, 255, 234, 0.1); + --color-mint-20: rgba(166, 255, 234, 0.2); + --color-mint-30: rgba(166, 255, 234, 0.3); + --color-mint-50: rgba(166, 255, 234, 0.5); + + --color-purple: #a682ff; + --color-purple-hover: #9570f0; + --color-purple-glow: rgba(166, 130, 255, 0.2); + --color-purple-80: rgba(166, 130, 255, 0.8); + + /* Background Colors - Teal-600 based */ + --color-bg-dark: #002224; + --color-bg-darker: #001a1c; + --color-bg-card: #003538; + --color-bg-card-inner: #004548; + + /* Text Colors */ + --color-text-white: #ffffff; + --color-text-gray-300: #d1d5db; + --color-text-gray-400: #9ca3af; + --color-text-gray-500: #6b7280; + + /* Border Colors */ + --color-border-white-5: rgba(255, 255, 255, 0.05); + --color-border-white-10: rgba(255, 255, 255, 0.1); + --color-border-gray-600: #4b5563; + --color-border-gray-700: #374151; + + /* Shadows */ + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-purple: 0 10px 15px -3px rgba(166, 130, 255, 0.2); + --shadow-mint-glow: 0 0 10px rgba(166, 255, 234, 0.6); + + /* Spacing */ + --spacing-page: 1.5rem; + --spacing-page-md: 2rem; + + /* Border Radius */ + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --radius-xl: 1.25rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-full: 9999px; + + /* Font Sizes */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + + /* Transitions */ + --transition-fast: 150ms; + --transition-normal: 200ms; + --transition-slow: 300ms; +} + diff --git a/src/types/api.ts b/src/types/api.ts index e055eef..1c5c759 100644 --- a/src/types/api.ts +++ b/src/types/api.ts @@ -36,10 +36,12 @@ export interface CrawlingResponse { image_list: string[]; image_count: number; m_id: number; + biz_type: string; processed_info: { customer_name: string; region: string; detail_region_info: string; + biz_type: string; }; marketing_analysis: MarketingAnalysis; } @@ -67,6 +69,7 @@ export interface LyricGenerateRequest { m_id: number; region: string; task_id: string; + biz_type?: string; orientation?: 'vertical' | 'horizontal'; instrumental?: boolean; }