@layer base { :root { --bg: #111116; --s1: #1a1a20; --s2: #23232b; --s3: #2c2c36; --bd: rgba(255,255,255,0.10); --bd2: rgba(255,255,255,0.18); --ac: #e63946; --ac-cf: #d4a017; --ac-fl: #7c3aed; --t1: #f5f5f5; --t2: #b0b0b8; --t3: #7a7a88; } /* ── LIGHT MODE ── */ [data-theme="light"] { --bg: #f0f0f5; --s1: #ffffff; --s2: #f5f5fa; --s3: #e8e8f0; --bd: rgba(0,0,0,0.10); --bd2: rgba(0,0,0,0.18); --t1: #111118; --t2: #444450; --t3: #888898; } [data-theme="light"] .glass, [data-theme="light"] .cinematic-glass { background: rgba(255,255,255,0.92); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0cc; } /* ── STEP PROGRESS INDICATOR ── */ .step-progress { display: flex; align-items: center; gap: 0; margin-bottom: 16px; padding: 10px 16px; border-radius: 16px; background: var(--s2); border: 1px solid var(--bd); } .step-progress-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; cursor: default; } .step-progress-item:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px; background: var(--bd2); } .step-progress-item.done::after { background: var(--ac); } .step-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; border: 2px solid var(--bd2); background: var(--s3); color: var(--t3); transition: all 0.3s; position: relative; z-index: 1; } .step-progress-item.done .step-dot { background: var(--ac); border-color: var(--ac); color: #fff; } .step-progress-item.active .step-dot { border-color: var(--ac); color: var(--ac); box-shadow: 0 0 0 4px rgba(230,57,70,0.15); } .step-label { font-size: 9px; font-weight: 700; color: var(--t3); white-space: nowrap; letter-spacing: 0.04em; } .step-progress-item.done .step-label, .step-progress-item.active .step-label { color: var(--t2); } /* ── RETRY BUTTON ── */ .retry-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; cursor: pointer; border: none; background: rgba(255,255,255,0.07); color: var(--t3); transition: all 0.2s; } .retry-btn:hover { background: rgba(230,57,70,0.12); color: var(--ac); } /* ── STEP1 CLICKABLE ITEMS ── */ .s1-item { display: block; padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 12px; color: var(--t2); border: 1px solid transparent; transition: all 0.15s; line-height: 1.4; } .s1-item:hover { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.25); color: var(--t1); } .s1-items-list { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } /* ── TONE FEEDBACK PANEL ── */ .tone-panel { padding: 12px; border-radius: 14px; margin-top: 8px; background: rgba(124,58,237,0.06); border: 1px solid rgba(124,58,237,0.2); } /* ── RECENT PROJECTS DROPDOWN ── */ #recent-projects-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 200; min-width: 280px; border-radius: 16px; padding: 12px; background: rgba(10,10,18,0.98); border: 1px solid var(--bd); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } [data-theme="light"] #recent-projects-panel { background: rgba(255,255,255,0.98); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } /* ── E13: LIGHT MODE COMPONENT OVERRIDES ── */ [data-theme="light"] .card { background: #ffffff; border-color: rgba(0,0,0,0.09); } [data-theme="light"] .sidebar { background: rgba(248,248,252,0.98); border-right-color: rgba(0,0,0,0.08); } [data-theme="light"] .sb-btn { color: var(--t2); } [data-theme="light"] .sb-btn:hover, [data-theme="light"] .sb-btn.active { background: rgba(230,57,70,0.06); color: var(--ac); } [data-theme="light"] select, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="number"], [data-theme="light"] textarea { background: #f5f5fa; color: #111118; border-color: rgba(0,0,0,0.12); } [data-theme="light"] .step-progress { background: #f5f5fa; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .tone-panel { background: rgba(124,58,237,0.04); } [data-theme="light"] .hook-panel, [data-theme="light"] .safety-panel, [data-theme="light"] .factcheck-panel, [data-theme="light"] .version-panel { background: rgba(255,255,255,0.85); } [data-theme="light"] .bgm-card, [data-theme="light"] .ver-snapshot { background: #f0f0f5; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .sb-card { background: #f8f8fc; border-color: rgba(0,0,0,0.09); } [data-theme="light"] #storyboard-modal, [data-theme="light"] #sb2-modal, [data-theme="light"] #fu-timeline-modal, [data-theme="light"] #img-gallery-modal { background: rgba(220,220,235,0.93); } [data-theme="light"] .seo-card, [data-theme="light"] .cal-cell { background: #f5f5fa; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .yt-analysis-block { background: #f0f0f5; } [data-theme="light"] nav { background: rgba(255,255,255,0.97); border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .prompt-table-wrap table { background: #ffffff; } [data-theme="light"] .prompt-table-wrap th { background: #f0f0f5; color: #444450; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .prompt-table-wrap td { background: #fafafa; color: #222228; border-color: rgba(0,0,0,0.07); } [data-theme="light"] .prompt-table-wrap tr:hover td { background: rgba(230,57,70,0.03); } /* ── E14: MOBILE RESPONSIVE ── */ @media (max-width: 768px) { nav { padding: 8px 12px; gap: 6px; flex-wrap: wrap; } .nav-sep { display: none !important; } .max-w-3xl { max-width: 100%; padding: 0 12px; } .btn-xl { padding: 14px 28px; font-size: 14px; } .card { border-radius: 16px; } .input-field { font-size: 13px; padding: 10px 14px; } .split-panel-card { min-width: 100% !important; } .split-panels { flex-direction: column !important; } section.py-10 { padding-top: 24px; padding-bottom: 24px; } .step-progress { overflow-x: auto; } .step-label { display: none; } /* Step4 table scroll on mobile */ .prompt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* CapCut feature grid collapse */ #cc-feature-grid { grid-template-columns: 1fr 1fr !important; } /* Timeline modal full width */ #fu-timeline-modal .fu-tl-inner { flex-direction: column !important; overflow-x: auto; } /* Server dashboard compact */ #fu-server-dashboard { width: 90vw !important; right: 5vw !important; } /* Image gallery grid */ #img-gallery-modal .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { #nav-title { font-size: 13px !important; } .extras-tab { font-size: 10px; padding: 4px 8px; } .extras-nav-label { display: none; } /* Single column on very small */ #cc-feature-grid { grid-template-columns: 1fr !important; } .prompt-table-wrap table { font-size: 10px; } .prompt-table-wrap th, .prompt-table-wrap td { padding: 4px 6px !important; } /* Hide less critical nav items */ #nav-shortcuts-hint { display: none !important; } } /* ── VIDEO FEATURES v2 ── */ .dur-badge { display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700; padding:3px 9px;border-radius:999px;background:rgba(52,211,153,0.12);color:#34d399; border:1px solid rgba(52,211,153,0.25);margin-top:6px; } .hook-panel,.safety-panel,.factcheck-panel,.version-panel,.broll-panel,.palette-panel,.shot-panel,.emotion-panel { padding:14px;border-radius:14px;margin-top:8px; background:rgba(10,10,18,0.6);border:1px solid var(--bd); } .hook-score-ring { display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:50%;font-size:18px;font-weight:900; background:conic-gradient(#f59e0b var(--pct, 0%), rgba(255,255,255,0.06) 0%); } .safety-pill { display:inline-flex;align-items:center;gap:4px;padding:2px 8px; border-radius:999px;font-size:10px;font-weight:700; } .safety-ok { background:rgba(52,211,153,0.12);color:#34d399;border:1px solid rgba(52,211,153,0.3); } .safety-warn{ background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.3); } .safety-bad { background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.3); } .pal-swatch { width:28px;height:28px;border-radius:6px;cursor:pointer;flex-shrink:0; transition:transform 0.15s;border:2px solid transparent; } .pal-swatch:hover { transform:scale(1.2);border-color:rgba(255,255,255,0.4); } .emotion-curve-svg { width:100%;height:90px;border-radius:10px;background:rgba(255,255,255,0.03); } .shot-bar { height:10px;border-radius:5px;transition:width 0.6s; } .brand-kit-field { display:flex;flex-direction:column;gap:3px; } .brand-kit-field label { font-size:10px;font-weight:600;color:var(--t3); } .brand-kit-field input,.brand-kit-field textarea { background:var(--s3);border:1px solid var(--bd);border-radius:8px; padding:6px 9px;font-size:11px;color:var(--t1);outline:none;resize:none; } .ver-snapshot { padding:8px 10px;border-radius:10px;background:var(--s3);border:1px solid var(--bd); cursor:pointer;transition:all 0.15s; } .ver-snapshot:hover { border-color:rgba(165,243,252,0.4); } .comment-bubble { padding:6px 9px;border-radius:10px;background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25);font-size:10px;color:var(--t2); } .comment-bubble .cb-meta { font-size:9px;color:var(--t3);margin-bottom:3px; } .bgm-card { padding:10px 12px;border-radius:12px;background:var(--s3);border:1px solid var(--bd); cursor:pointer;transition:all 0.15s; } .bgm-card:hover { border-color:rgba(167,139,250,0.4); } .bgm-card .bgm-title { font-size:11px;font-weight:700;color:var(--t1); } .bgm-card .bgm-meta { font-size:10px;color:var(--t3);margin-top:2px; } .edl-btn,.sched-btn { font-size:10px;font-weight:700;padding:4px 10px;border-radius:8px; cursor:pointer;transition:all 0.15s;border:none; } .edl-btn { background:rgba(6,182,212,0.15);color:#22d3ee;border:1px solid rgba(6,182,212,0.3); } .sched-btn { background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3); } /* ── TTS 컨트롤 ── */ .tts-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(124,58,237,0.06); border: 1px solid rgba(124,58,237,0.2); margin-top: 8px; } .tts-btn { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all 0.15s; background: rgba(124,58,237,0.15); color: #a78bfa; } .tts-btn:hover { background: rgba(124,58,237,0.3); } .tts-btn.active { background: #7c3aed; color: #fff; } .tts-progress { flex: 1; height: 3px; border-radius: 2px; background: var(--bd2); overflow: hidden; } .tts-progress-fill { height: 100%; background: #a78bfa; width: 0%; transition: width 0.5s linear; } /* ── 스토리보드 모달 ── */ #storyboard-modal { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: flex; flex-direction: column; overflow: hidden; } /* #storyboard-modal.hidden — 전역 .hidden { display:none !important } 으로 처리됨 */ .storyboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; flex: 1; } .sb-card { border-radius: 16px; padding: 12px; cursor: grab; border: 1px solid var(--bd2); background: var(--s2); transition: all 0.15s; user-select: none; } .sb-card:hover { border-color: var(--ac); transform: translateY(-2px); } .sb-card.dragging { opacity: 0.4; cursor: grabbing; } .sb-card.drag-over { border-color: #a78bfa; background: rgba(124,58,237,0.1); } .sb-cut-num { font-size: 10px; font-weight: 900; color: var(--ac); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; } .sb-img-prompt { font-size: 11px; color: var(--t2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .sb-vo { font-size: 10px; color: var(--t3); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bd); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Step2 구성안 스토리보드 모달 ── */ #sb2-modal { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.88); backdrop-filter: blur(10px); display: flex; flex-direction: column; overflow: hidden; } .sb2-title { font-size: 11px; font-weight: 700; color: var(--t1); margin-bottom: 4px; line-height: 1.4; } .sb2-body { font-size: 10px; color: var(--t2); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .sb2-actions { display: flex; gap: 4px; margin-top: 8px; } .sb2-img-btn { font-size: 9px; padding: 3px 8px; border-radius: 6px; font-weight: 700; background: rgba(99,102,241,0.1); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); cursor: pointer; } .sb2-img-btn:hover { background: rgba(99,102,241,0.2); } .sb2-img-btn:disabled { opacity: 0.5; cursor: wait; } .sb2-preview { width: 100%; border-radius: 8px; margin-top: 8px; border: 1px solid rgba(99,102,241,0.2); object-fit: cover; } /* ── SEO 카드 ── */ .seo-card { padding: 10px 14px; border-radius: 12px; cursor: pointer; background: var(--s2); border: 1px solid var(--bd); font-size: 12px; color: var(--t1); transition: all 0.15s; } .seo-card:hover { border-color: var(--ac); background: rgba(230,57,70,0.05); } /* ── 캘린더 그리드 ── */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-cell { border-radius: 10px; padding: 8px 6px; min-height: 90px; background: var(--s2); border: 1px solid var(--bd); font-size: 10px; } .cal-cell.has-content { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.05); } .cal-day { font-weight: 900; color: var(--t3); margin-bottom: 4px; } .cal-type { font-size: 9px; padding: 1px 5px; border-radius: 5px; display: inline-block; margin-bottom: 3px; } .cal-topic { color: var(--t2); line-height: 1.3; } /* ── YouTube 분석 ── */ .yt-analysis-block { padding: 12px 16px; border-radius: 14px; margin-bottom: 8px; background: var(--s2); border: 1px solid var(--bd); } .yt-analysis-label { font-size: 10px; font-weight: 900; color: var(--t3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; } /* ══════════════════════════════════════════════════════════ ★ DESIGN SYSTEM v2 — Enhanced Visual Layer (2026-04) ════════════════════════════════════════════════════════════ */ /* — Animated gradient mesh background — */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(124,58,237,0.055) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 80% 80%, rgba(230,57,70,0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 60% 30%, rgba(59,130,246,0.03) 0%, transparent 70%); } [data-theme="light"] body::before { background: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(124,58,237,0.04) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 80% 80%, rgba(230,57,70,0.03) 0%, transparent 70%); } /* — Gradient border card — */ .card-glow { position: relative; border-radius: 24px; overflow: hidden; } .card-glow::before { content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 1px; pointer-events: none; z-index: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, rgba(124,58,237,0.12) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* — Glass card with inset highlight — */ .glass-card { background: linear-gradient(135deg, rgba(30,30,40,0.9) 0%, rgba(20,20,28,0.95) 100%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.3); } [data-theme="light"] .glass-card { background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,248,252,0.98) 100%); border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 24px rgba(0,0,0,0.08); } /* — Section header gradient accent — */ .section-header-bar { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 20px; margin-bottom: 20px; position: relative; overflow: hidden; } .section-header-bar::after { content: ''; position: absolute; right: -20px; top: -20px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, currentColor 0%, transparent 70%); opacity: 0.06; pointer-events: none; } /* — Enhanced button system — */ .btn { position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); opacity: 0; transition: opacity 0.2s; pointer-events: none; border-radius: inherit; } .btn:hover::after { opacity: 1; } .btn:active { transform: scale(0.97); } /* Shimmer effect on primary buttons */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-15deg); transition: left 0.4s; } .btn-primary:hover::before { left: 150%; } /* — Glowing active states — */ .glow-red { box-shadow: 0 0 20px rgba(230,57,70,0.35), 0 4px 12px rgba(230,57,70,0.2); } .glow-violet{ box-shadow: 0 0 20px rgba(124,58,237,0.35), 0 4px 12px rgba(124,58,237,0.2); } .glow-gold { box-shadow: 0 0 20px rgba(212,160,23,0.35), 0 4px 12px rgba(212,160,23,0.2); } .glow-blue { box-shadow: 0 0 20px rgba(59,130,246,0.35), 0 4px 12px rgba(59,130,246,0.2); } .glow-teal { box-shadow: 0 0 20px rgba(20,184,166,0.35), 0 4px 12px rgba(20,184,166,0.2); } /* nav — display:none!important (see below) */ /* Project tabs bar styling */ #project-tabs-bar { border-bottom: 1px solid rgba(255,255,255,0.05) !important; background: rgba(10,10,16,0.95) !important; backdrop-filter: blur(20px); } [data-theme="light"] #project-tabs-bar { background: rgba(248,248,252,0.95) !important; } #project-tabs-list::-webkit-scrollbar { display: none; } #project-tabs-list { scrollbar-width: none; } /* — Input field — enhance focus ring — */ .input-field:focus { border-color: var(--ac) !important; box-shadow: 0 0 0 3px rgba(230,57,70,0.10), 0 0 12px rgba(230,57,70,0.08) !important; } .input-field.flow-focus:focus { border-color: var(--ac-fl) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.10), 0 0 12px rgba(124,58,237,0.08) !important; } /* — Step progress — gradient connector — */ .step-progress { background: linear-gradient(135deg, var(--s2) 0%, rgba(30,30,42,0.8) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; } .step-progress-item.done::after { background: linear-gradient(90deg, var(--ac), rgba(230,57,70,0.4)) !important; } .step-progress-item.active .step-dot { background: rgba(230,57,70,0.15) !important; animation: pulse-ring 1.8s ease-in-out infinite; } @keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 0 4px rgba(230,57,70,0.15); } 50% { box-shadow: 0 0 0 7px rgba(230,57,70,0.08); } } /* — Storyboard drag cards — */ .sb-card { background: linear-gradient(135deg, var(--s2) 0%, var(--s3) 100%) !important; } .sb-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(230,57,70,0.3); } .sb-card.drag-over { background: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, rgba(124,58,237,0.06) 100%) !important; box-shadow: 0 0 0 2px rgba(167,139,250,0.5); } /* — Table cells — */ .prompt-table td { transition: background 0.15s; } .prompt-table tr:hover td { background: rgba(255,255,255,0.018); } /* — Section animations — */ @keyframes slideUpFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: slideUpFade 0.35s cubic-bezier(0.16,1,0.3,1) both; } /* — Loading skeleton — */ @keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%); background-size: 800px 100%; animation: shimmer 1.6s infinite linear; border-radius: 8px; } /* — Enhanced toast — */ #error-toast { border-left: 3px solid var(--ac) !important; background: linear-gradient(135deg, rgba(15,15,22,0.98) 0%, rgba(20,20,30,0.96) 100%) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important; } [data-theme="light"] #error-toast { background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,248,252,0.98) 100%) !important; } #error-toast.toast-success { border-left-color: #10b981 !important; } #error-toast.toast-info { border-left-color: #3b82f6 !important; } /* — Card hover elevation — */ .card { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important; } .card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset; transform: translateY(-1px); } /* — Smooth scrollbar thumb gradient — */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a3a48, #2a2a38) !important; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5a5a70, #3a3a50) !important; } /* — Workflow section type colors on step buttons — */ .cw-accent { --section-ac: #f87171; } .shw-accent { --section-ac: #fbbf24; } .cf-accent { --section-ac: #fcd34d; } .mv-accent { --section-ac: #a78bfa; } .brf-accent { --section-ac: #67e8f9; } /* — Responsive nav overflow — */ /* — Section divider accent line — */ .workflow-section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--bd2) 20%, var(--bd2) 80%, transparent); margin: 24px 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans KR', 'Space Grotesk', sans-serif; background: var(--bg); color: var(--t1); overflow-x: hidden; min-height: 100vh; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #3a3a44; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #555560; } /* .custom-scrollbar 스크롤바 — 전역 ::-webkit-scrollbar 규칙과 동일하여 중복 제거 */ /* TYPOGRAPHY */ .display { font-family: 'Space Grotesk', sans-serif; } .mono { font-family: 'JetBrains Mono', monospace; } /* GLASS */ .glass { background: rgba(12,12,12,0.85); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--bd); } .cinematic-glass { background: rgba(12,12,12,0.85); backdrop-filter: blur(24px); border: 1px solid var(--bd); } /* CARDS */ .card { background: var(--s1); border: 1px solid var(--bd); border-radius: 24px; transition: border-color 0.2s; } .card:hover { border-color: var(--bd2); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 14px; border: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; font-family: inherit; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--ac); color: white; } .btn-primary:hover { filter: brightness(1.12); } .btn-ghost { background: transparent; color: var(--t1); border: 1px solid var(--bd2); } .btn-ghost:hover { background: var(--s2); color: #fff; border-color: rgba(255,255,255,0.28); } .btn-violet { background: var(--ac-fl); color: white; } .btn-violet:hover { filter: brightness(1.12); } .btn-gold { background: var(--ac-cf); color: #000; } .btn-gold:hover { filter: brightness(1.1); } .btn-xl { padding: 18px 48px; font-size: 17px; border-radius: 20px; font-weight: 900; letter-spacing: 0.03em; } .btn-sm { padding: 6px 14px; font-size: 11px; border-radius: 10px; } /* INPUTS */ .input-field { width: 100%; background: var(--s1); border: 1.5px solid var(--bd); color: var(--t1); border-radius: 16px; padding: 14px 18px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; resize: none; } .input-field:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(230,57,70,0.08); } .input-field.flow-focus:focus { border-color: var(--ac-fl); box-shadow: 0 0 0 3px rgba(124,58,237,0.08); } .input-field::placeholder { color: var(--t3); } /* SELECT */ .studio-select, .genre-select { width: 100%; background: var(--s2); border: 1.5px solid var(--bd); color: var(--t1); border-radius: 14px; padding: 10px 16px; font-size: 13px; font-weight: 700; font-family: inherit; outline: none; cursor: pointer; transition: border-color 0.2s; } .studio-select:focus, .genre-select:focus { border-color: var(--ac); } /* SECTION LABEL */ .section-label { font-size: 10px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t3); } /* TAGS */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; } .tag-red { background: rgba(230,57,70,0.12); color: #e63946; border: 1px solid rgba(230,57,70,0.2); } .tag-gold { background: rgba(212,160,23,0.12); color: #d4a017; border: 1px solid rgba(212,160,23,0.2); } .tag-violet { background: rgba(124,58,237,0.12); color: #7c3aed; border: 1px solid rgba(124,58,237,0.2); } .tag-green { background: rgba(16,185,129,0.10); color: #10b981; border: 1px solid rgba(16,185,129,0.2); } .tag-blue { background: rgba(59,130,246,0.10); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); } /* ══ SIDEBAR LAYOUT ══════════════════════════════════════════ */ .sidebar { position: fixed; left: 0; top: 36px; bottom: 0; width: 220px; z-index: 100; background: rgba(6,6,10,0.97); backdrop-filter: blur(28px) saturate(180%); border-right: 1px solid var(--bd); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.04); } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); } [data-theme="light"] .sidebar { background: rgba(255,255,255,0.97); border-right-color: var(--bd); } body { margin-left: 220px; } main { padding-top: 16px !important; } #project-tabs-bar { border-bottom: 1px solid var(--bd); min-height: 32px; } /* Sidebar logo */ .sb-logo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px; border-bottom: 1px solid var(--bd); flex-shrink: 0; } /* Sidebar sections */ .sb-section { padding: 6px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); } .sb-sec-label { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); padding: 5px 8px 4px; display: flex; align-items: center; justify-content: space-between; } .sb-sub-label { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--t3); padding: 4px 8px 2px; opacity: 0.7; } .sb-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: var(--t2); font-family: inherit; transition: all 0.15s; text-align: left; } .sb-btn:hover { background: rgba(255,255,255,0.06); color: var(--t1); } /* video-tab active states reused on sidebar */ .sb-btn.v-active-cinema { background: rgba(230,57,70,0.15); color: #f87171; } .sb-btn.v-active-cf { background: rgba(212,160,23,0.15); color: #fbbf24; } .sb-btn.v-active-mv { background: rgba(224,64,251,0.15); color: #e040fb; } .sb-btn.v-active-briefing { background: rgba(8,145,178,0.15); color: #67e8f9; } .sb-btn.shorts-active { background: rgba(245,158,11,0.15); color: #f59e0b; } .sb-btn.ytscript-active { background: rgba(99,102,241,0.15); color: #a5b4fc; } .sb-btn.extras-active { background: rgba(15,118,110,0.15); color: #5eead4; } .sb-btn.s-active { background: rgba(245,158,11,0.15); color: #f59e0b; } .sb-btn.yt-active { background: rgba(99,102,241,0.15); color: #a5b4fc; } .sb-btn.ex-active { background: rgba(15,118,110,0.15); color: #5eead4; } /* Details/summary accordion */ details.sb-section > summary { cursor: pointer; } details.sb-section > summary::-webkit-details-marker { display: none; } details.sb-section[open] > summary .fa-chevron-down { transform: rotate(180deg); } /* Sidebar floating panels — open to the right */ /* .sb-panel 제거됨 — 패널들은 FAB 기준 position:fixed 인라인 스타일로 이동 */ /* Mobile */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; } .sidebar.sb-open { transform: translateX(0); } body { margin-left: 0 !important; } #sidebar-hamburger { display: flex !important; } } /* ── TOP BAR ── */ #topbar { position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 99; background: rgba(6,6,10,0.97); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 2px; padding: 0 10px; overflow: visible; } #topbar .tb-sep { width: 1px; height: 16px; background: var(--bd); flex-shrink: 0; margin: 0 4px; } #topbar .tb-btn { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: var(--t2); font-family: inherit; transition: all 0.15s; white-space: nowrap; } #topbar .tb-btn:hover { background: rgba(255,255,255,0.07); color: var(--t1); } #topbar .tb-wrap { position: relative; display: inline-flex; } .tb-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 300; max-height: calc(100vh - 52px); overflow-y: auto; } #api-key-panel { position: fixed !important; } #api-key-panel.hidden { display: none !important; } /* ── SUB-NAV BAR (쇼츠/YT대본/기타영상 드롭다운) ── */ .sub-nav-bar { display: none !important; } /* 선택 섹션 카드 hover */ #video-select-section .card:hover, #shorts-select-section .card:hover, #ytscript-select-section .card:hover, #extras-select-section .card:hover, #analytics-select-section .card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); } /* ── 플로팅 도구 FAB ────────────────────────────────────── */ #ftool-fab { position: fixed; bottom: 24px; right: 24px; z-index: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* ── 고정 단계 표시바 ── */ #sticky-step-bar { background: rgba(10,10,18,0.97); border: 1px solid var(--bd); border-radius: 18px; padding: 10px 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.7); min-width: 170px; width: 170px; display: flex; flex-direction: column; gap: 0; } #ftool-menu { min-width: 170px; width: 170px; } #sticky-step-bar .stsb-title { font-size: 8px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); padding-bottom: 7px; border-bottom: 1px solid var(--bd2); margin-bottom: 6px; } #stsb-steps { display: flex; flex-direction: column; gap: 0; } .stsb-item { display: flex; align-items: center; gap: 8px; padding: 4px 2px; position: relative; } .stsb-item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 24px; width: 2px; height: 10px; background: var(--bd2); } .stsb-item.done::after { background: var(--ac); } .stsb-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; border: 2px solid var(--bd2); background: var(--s3); color: var(--t3); transition: all 0.25s; position: relative; z-index: 1; } .stsb-item.done .stsb-dot { background: var(--ac); border-color: var(--ac); color: #fff; } .stsb-item.active .stsb-dot { border-color: var(--ac); color: var(--ac); box-shadow: 0 0 0 3px rgba(230,57,70,0.18); } .stsb-item::after { transition: background 0.25s; } .stsb-lbl { font-size: 11px; font-weight: 700; color: var(--t3); white-space: nowrap; transition: color 0.2s; } .stsb-item.done .stsb-lbl { color: var(--t2); } .stsb-item.active .stsb-lbl { color: #fff; } #sticky-step-bar.stsb-hidden { display: none; } #ftool-fab-btn { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--ac), #ff6b75); border: none; cursor: pointer; color: #fff; font-size: 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } #ftool-fab-btn:hover { transform: scale(1.08); } #ftool-fab-btn.open { transform: rotate(45deg); } #ftool-menu { background: rgba(10,10,18,0.97); border: 1px solid var(--bd); border-radius: 18px; padding: 10px 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.7); display: flex; flex-direction: column; gap: 3px; min-width: 170px; max-height: calc(100vh - 56px); overflow-y: auto; } #ftool-menu.hidden { /* 항상 표시 — hidden 무효화 */ display: flex; } #ftool-fab-btn { display: none !important; } #ftool-menu .ftool-label { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); padding: 2px 8px 6px; border-bottom: 1px solid var(--bd2); margin-bottom: 2px; } #ftool-menu .ftool-btn { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--t2); text-align: left; transition: background 0.12s; } #ftool-menu .ftool-btn:hover { background: rgba(255,255,255,0.07); color: #fff; } #ftool-menu .ftool-divider { height: 1px; background: var(--bd2); margin: 4px 6px; } .sub-nav-bar .snb-label { font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); margin-right: 4px; padding-right: 8px; border-right: 1px solid var(--bd); white-space: nowrap; } .sub-nav-bar .snb-divider { width: 1px; height: 14px; background: var(--bd); flex-shrink: 0; margin: 0 6px; } .sub-nav-bar button { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 7px; border: none; background: transparent; color: var(--t2); cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: inherit; } .sub-nav-bar button:hover { background: rgba(255,255,255,0.07); color: var(--t1); } .sub-nav-bar button.s-active, .sub-nav-bar button.yt-active, .sub-nav-bar button.ex-active { background: rgba(255,255,255,0.1); color: var(--t1); } /* sidebar sub-nav toggle button active state */ .sb-sec-label.subnav-open { color: var(--t1) !important; } .sb-sec-label.subnav-open .fa-chevron-down { transform: rotate(180deg); } body { padding-top: 36px; } @media (max-width: 768px) { .sub-nav-bar { left: 0; } } /* NAV (legacy — overridden by sidebar) */ .main-nav { display: none !important; } /* SHORTS NAV (removed — display:none) */ .shorts-nav, .shorts-nav.active { display: none !important; } .shorts-nav-inner { max-width: 1600px; margin: 0 auto; padding: 4px 20px; display: flex; align-items: center; justify-content: center; gap: 0; height: auto; overflow-x: hidden; } .shorts-tabs-grid { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content; gap: 2px 0; overflow-x: auto; scrollbar-width: none; } .shorts-tabs-grid::-webkit-scrollbar { display: none; } .shorts-nav-label { font-size: 9px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #f59e0b; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(245,158,11,0.2); margin-right: 10px; display: flex; align-items: center; gap: 5px; align-self: center; } .shorts-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; background: transparent; color: rgba(245,158,11,0.55); font-family: inherit; transition: all 0.15s; margin: 0 1px; } .shorts-tab:hover { color: #f59e0b; background: rgba(245,158,11,0.08); } .shorts-tab.s-active { color: #1a0f00; background: #f59e0b; border-radius: 6px; box-shadow: 0 0 14px rgba(245,158,11,0.3); } /* WORKFLOW STEPS */ .workflow-step { display: flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; } .workflow-step:hover { color: var(--t1); border-color: var(--bd2); } .workflow-step.ws-active { background: var(--s2); border-color: var(--bd); color: var(--t1); } .step-num { width: 16px; height: 16px; border-radius: 50%; background: var(--s3); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 900; color: var(--t3); border: 1px solid var(--bd); flex-shrink: 0; } .ws-active .step-num { background: var(--ac); color: white; border-color: var(--ac); } /* MODE BADGE */ .mode-badge { padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; transition: all 0.2s; cursor: pointer; border: 1px solid transparent; color: var(--t2); background: transparent; } .mode-badge:hover { color: var(--t1); background: rgba(255,255,255,0.06); } .mode-badge.active-mode { background: var(--ac); color: #fff; border-color: var(--ac); box-shadow: 0 0 18px rgba(230,57,70,0.30); } .mode-badge.cf-active { background: var(--ac-cf); color: #1a0f00; border-color: var(--ac-cf); box-shadow: 0 0 18px rgba(212,160,23,0.30); } .mode-shorts-default { color: #f59e0b !important; } .mode-badge.shorts-active { background: #f59e0b; color: #1a0f00 !important; border-color: #f59e0b; box-shadow: 0 0 18px rgba(245,158,11,0.35); font-weight:900; } select.mode-badge { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aab4c3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } select.mode-badge.shorts-active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a0f00'/%3E%3C/svg%3E"); } select.mode-badge option, select.mode-badge optgroup { background: #1a1a2e; color: #e2e8f0; font-weight: 600; font-size: 12px; } /* VIDEO SUB-NAV (removed — display:none) */ .video-nav, .video-nav.active { display: none !important; } .video-nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 0; height: 42px; overflow-x: auto; scrollbar-width: none; } .video-nav-inner::-webkit-scrollbar { display: none; } .video-nav-label { font-size: 9px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ac); white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(230,57,70,0.2); margin-right: 10px; display: flex; align-items: center; gap: 5px; } .video-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; background: transparent; color: rgba(230,57,70,0.5); font-family: inherit; transition: all 0.15s; margin: 0 2px; } .video-tab:hover { color: #ff6b75; background: rgba(230,57,70,0.08); } .video-tab.v-active-cinema { color: #fff; background: var(--ac); box-shadow: 0 0 14px rgba(230,57,70,0.35); border-radius: 6px; } .video-tab.v-active-cf { color: #1a0f00; background: var(--ac-cf); box-shadow: 0 0 14px rgba(212,160,23,0.35); border-radius: 6px; } .video-tab.v-active-mv { color: #1a001f; background: #e040fb; box-shadow: 0 0 14px rgba(224,64,251,0.35); border-radius: 6px; } .video-tab.v-active-briefing { color: #fff; background: #0891b2; box-shadow: 0 0 14px rgba(8,145,178,0.35); border-radius: 6px; } #mode-video-btn.video-active { background: rgba(230,57,70,0.12); border-color: var(--ac); color: #fff; box-shadow: 0 0 14px rgba(230,57,70,0.25); } #api-key-toggle-btn.key-saved { border-color: rgba(37,99,235,0.5); color: var(--t1); } #api-key-panel.show { display: flex !important; animation: fadeSlideDown 0.15s ease; } @keyframes fadeSlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } .mode-badge.mv-active { background: #e040fb; color: #1a001f; border-color: #e040fb; box-shadow: 0 0 18px rgba(224,64,251,0.35); font-weight:900; } .mode-badge.briefing-active { background: #0891b2; color: #fff; border-color: #0891b2; box-shadow: 0 0 18px rgba(8,145,178,0.35); font-weight:900; } .mode-badge.ytscript-active { background: #6366f1; color: #fff; border-color: #6366f1; box-shadow: 0 0 18px rgba(99,102,241,0.35); font-weight:900; } /* THUMBNAIL MODAL */ .thumb-modal { position:fixed; inset:0; z-index:600; background:rgba(4,8,14,0.88); backdrop-filter:blur(20px); display:none; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; } .thumb-modal.active { display:flex; } .thumb-modal-card { width:min(860px,100%); background:var(--s1); border:1.5px solid rgba(251,191,36,0.2); border-radius:20px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,0.6); margin:auto; } .thumb-concept-card { background:var(--s2); border:1.5px solid rgba(251,191,36,0.15); border-radius:14px; padding:16px; } .thumb-prompt-box { background:var(--s3); border:1px solid rgba(251,191,36,0.2); border-radius:10px; padding:12px; margin-top:10px; } .mode-badge.extras-active { background: #0f766e; color: #fff; border-color: #0f766e; box-shadow: 0 0 18px rgba(15,118,110,0.35); font-weight:900; } /* EXTRAS SUB-NAV (removed — display:none) */ .extras-nav, .extras-nav.active { display: none !important; } .extras-nav-inner { max-width: 1600px; margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; justify-content: center; } .extras-nav-label { font-size: 9px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #5eead4; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(15,118,110,0.3); margin-right: 10px; display: flex; align-items: center; gap: 5px; align-self: flex-start; padding-top: 7px; } .extras-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; background: transparent; color: rgba(15,118,110,0.65); font-family: inherit; transition: all 0.15s; margin: 2px 2px; } .extras-tab:hover { color: #5eead4; background: rgba(15,118,110,0.1); } .extras-tab.ex-active { color: #fff; background: #0f766e; box-shadow: 0 0 14px rgba(15,118,110,0.35); border-radius: 6px; } /* 구분선으로 2줄 구분 */ .extras-tab-divider { width: 100%; height: 0; border: none; border-top: 1px solid rgba(15,118,110,0.15); margin: 1px 0; flex-basis: 100%; } /* YTSCRIPT SUB-NAV (removed — display:none) */ .ytscript-nav, .ytscript-nav.active { display: none !important; } .ytscript-nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 0; height: 42px; overflow-x: auto; scrollbar-width: none; } .ytscript-nav-inner::-webkit-scrollbar { display: none; } .ytscript-nav-label { font-size: 9px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #a5b4fc; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(99,102,241,0.2); margin-right: 10px; display: flex; align-items: center; gap: 5px; } .ytscript-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; background: transparent; color: rgba(99,102,241,0.55); font-family: inherit; transition: all 0.15s; margin: 0 2px; } .ytscript-tab:hover { color: #a5b4fc; background: rgba(99,102,241,0.08); } .ytscript-tab.yt-active { color: #fff; background: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.35); border-radius: 6px; } /* BRIEFING SECTION */ .brf-type-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; } .brf-type-btn:hover { border-color:#0891b2; color:#67e8f9; } .brf-type-active { background:rgba(8,145,178,0.18); border-color:#0891b2; color:#67e8f9; box-shadow:0 0 10px rgba(8,145,178,0.2); } .brf-style-btn { padding:10px 12px; border-radius:12px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; text-align:left; } .brf-style-btn:hover { border-color:#0891b2; } .brf-style-active { background:rgba(8,145,178,0.15); border-color:#0891b2; box-shadow:0 0 10px rgba(8,145,178,0.15); } .brf-cut-card { background:var(--s2); border:1.5px solid var(--bd); border-radius:14px; padding:16px 20px; border-left:3px solid #0891b2; } .brf-grok-box { background:rgba(124,58,237,0.05); border:1px solid rgba(124,58,237,0.14); border-radius:12px; padding:14px; } /* SPLIT SCREEN BUILDER */ .split-type-btn { padding:8px 12px; border-radius:10px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; text-align:center; } .split-type-btn:hover { border-color: #7c3aed; color:#a78bfa; } .split-type-btn.sp-active { background:rgba(124,58,237,0.18); border-color:#7c3aed; color:#c4b5fd; box-shadow:0 0 12px rgba(124,58,237,0.2); } .split-sel-btn { padding:5px 10px; border-radius:8px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; } .split-sel-btn:hover { border-color:#67e8f9; color:#67e8f9; } .split-sel-active { background:rgba(103,232,249,0.15); border-color:#67e8f9; color:#67e8f9; box-shadow:0 0 10px rgba(103,232,249,0.15); } .split-panel-card { background:var(--s2); border:1.5px solid var(--bd); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; } .split-panel-card .panel-num { width:24px;height:24px;border-radius:8px;background:rgba(124,58,237,0.2);color:#a78bfa;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .split-output-box { background:var(--s1); border:1.5px solid var(--bd); border-radius:14px; padding:20px; font-size:13px; line-height:1.9; color:var(--t1); white-space:pre-wrap; word-break:break-word; min-height:120px; font-family:'Noto Sans KR',sans-serif; } .split-preview-svg { width:100%;border-radius:12px;overflow:hidden;background:#111; } /* COMPAT: mode-btn */ .mode-btn { color: #666; background: transparent; border: none; cursor: pointer; transition: all 0.2s; } .mode-btn.active-mode { background: var(--ac) !important; color: white !important; } /* HERO */ .hero-gradient { background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(230,57,70,0.07) 0%, transparent 70%); } /* DROP ZONE */ .drop-zone { border: 1.5px dashed #3a3a44; transition: all 0.2s; border-radius: 16px; } .drop-zone:hover { border-color: var(--ac); background: rgba(230,57,70,0.025); } .drop-zone.file-loaded { border-color: var(--ac) !important; background: rgba(230,57,70,0.05) !important; border-style: solid; } /* COUNT / FORMAT / ACT BUTTONS */ .count-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 14px; padding: 10px 18px; font-weight: 900; font-family: inherit; } .count-btn:hover { border-color: rgba(255,255,255,0.28); background: var(--s3); } .format-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; padding: 10px 16px; } .format-btn:hover { border-color: rgba(255,255,255,0.28); background: var(--s3); } .format-btn.active-format { background: rgba(230,57,70,0.15); border-color: rgba(230,57,70,0.5); color: white; } .act-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 12px; padding: 8px 6px; font-family: inherit; font-weight: 700; } .act-btn:hover { border-color: rgba(255,255,255,0.28); background: var(--s3); } .yt-type-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t2); transition: all 0.2s; cursor: pointer; font-size: 12px; padding: 8px 16px; font-weight: 700; font-family: inherit; } .yt-type-btn:hover { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.08); color: #a5b4fc; } .yt-type-active { background: rgba(99,102,241,0.15) !important; border-color: #6366f1 !important; color: #a5b4fc !important; } .med-opt-btn { background: var(--s3); border: 1.5px solid var(--bd); border-radius: 10px; color: var(--t3); transition: all 0.2s; cursor: pointer; font-size: 11px; padding: 6px 14px; font-weight: 700; font-family: inherit; } .med-opt-btn:hover { border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.07); color: #d8b4fe; } .pai-opt-btn { background: var(--s3); border: 1.5px solid var(--bd); border-radius: 10px; color: var(--t3); transition: all 0.2s; cursor: pointer; font-size: 11px; padding: 6px 14px; font-weight: 700; font-family: inherit; } .pai-opt-btn:hover { border-color: rgba(251,146,60,0.4); background: rgba(251,146,60,0.07); color: #fdba74; } .pai-opt-orange-active { background: rgba(251,146,60,0.14) !important; border-color: rgba(251,146,60,0.55) !important; color: #fdba74 !important; } .pai-opt-sky-active { background: rgba(56,189,248,0.13) !important; border-color: rgba(56,189,248,0.5) !important; color: #7dd3fc !important; } .pai-opt-green-active { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.5) !important; color: #86efac !important; } .pai-opt-red-active { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.5) !important; color: #fca5a5 !important; } .med-opt-purple-active { background: rgba(168,85,247,0.14) !important; border-color: rgba(168,85,247,0.55) !important; color: #d8b4fe !important; } .med-opt-green-active { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.5) !important; color: #86efac !important; } .med-opt-sm { background: var(--s3); border: 1px solid var(--bd); border-radius: 8px; color: var(--t3); transition: all 0.2s; cursor: pointer; font-size: 10px; padding: 5px 10px; font-weight: 700; font-family: inherit; } .med-opt-sm:hover { border-color: rgba(34,197,94,0.4); color: #86efac; } .ytt-opt-btn { background: var(--s3); border: 1.5px solid var(--bd); border-radius: 10px; color: var(--t3); transition: all 0.2s; cursor: pointer; font-size: 11px; padding: 6px 14px; font-weight: 700; font-family: inherit; } .ytt-opt-btn:hover { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); color: #fca5a5; } .ytt-opt-red-active { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.5) !important; color: #fca5a5 !important; } .ytt-opt-yellow-active { background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.5) !important; color: #fcd34d !important; } .wr-type-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t2); transition: all 0.2s; cursor: pointer; font-size: 12px; padding: 8px 16px; font-weight: 700; font-family: inherit; } .wr-type-btn:hover { border-color: rgba(20,184,166,0.5); background: rgba(20,184,166,0.08); color: #5eead4; } .wr-type-active { background: rgba(20,184,166,0.15) !important; border-color: #14b8a6 !important; color: #5eead4 !important; } .wr-sub-btn { background: var(--s3); border: 1.5px solid var(--bd); border-radius: 10px; color: var(--t3); transition: all 0.2s; cursor: pointer; font-size: 11px; padding: 6px 14px; font-weight: 700; font-family: inherit; } .wr-sub-btn:hover { border-color: rgba(20,184,166,0.4); background: rgba(20,184,166,0.06); color: #5eead4; } .wr-sub-active { background: rgba(20,184,166,0.12) !important; border-color: rgba(20,184,166,0.5) !important; color: #2dd4bf !important; } .shorts-cut-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 15px; padding: 10px 22px; font-weight: 900; font-family: inherit; } .shorts-cut-btn:hover { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); color: #f59e0b; } .shorts-cut-active { background: rgba(245,158,11,0.15) !important; border-color: #f59e0b !important; color: #f59e0b !important; } .mv-cut-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 15px; padding: 10px 22px; font-weight: 900; font-family: inherit; } .mv-cut-btn:hover { border-color: rgba(224,64,251,0.5); background: rgba(224,64,251,0.08); color: #e040fb; } .mv-cut-active { background: rgba(224,64,251,0.15) !important; border-color: #e040fb !important; color: #e040fb !important; } .mvq-style-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 7px 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .mvq-style-btn:hover { border-color: rgba(224,64,251,0.4); color: #e040fb; } .mvq-style-active { background: rgba(224,64,251,0.15) !important; border-color: #e040fb !important; color: #e040fb !important; } .cinema-genre-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 7px 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cinema-genre-btn:hover { border-color: rgba(230,57,70,0.4); color: #e63946; } .cinema-genre-active { background: rgba(230,57,70,0.15) !important; border-color: #e63946 !important; color: #e63946 !important; } .cw-genre-btn:hover { border-color: rgba(230,57,70,0.4); color: #f87171; } .cw-genre-active { background: rgba(230,57,70,0.2) !important; border-color: #e63946 !important; color: #f87171 !important; } .cinema-act-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 7px 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cinema-act-btn:hover { border-color: rgba(230,57,70,0.4); color: #e63946; } .cinema-act-active { background: rgba(230,57,70,0.15) !important; border-color: #e63946 !important; color: #e63946 !important; } .cinema-cut-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 15px; padding: 10px 22px; font-weight: 900; font-family: inherit; } .cinema-cut-btn:hover { border-color: rgba(230,57,70,0.5); background: rgba(230,57,70,0.08); color: #e63946; } .cinema-cut-active { background: rgba(230,57,70,0.15) !important; border-color: #e63946 !important; color: #e63946 !important; } .cinema-fmt-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 8px 16px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cinema-fmt-btn:hover { border-color: rgba(230,57,70,0.4); color: #e63946; } .cinema-fmt-active { background: rgba(230,57,70,0.15) !important; border-color: #e63946 !important; color: #e63946 !important; } .cf-genre-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 7px 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cf-genre-btn:hover { border-color: rgba(212,160,23,0.4); color: #d4a017; } .cf-genre-active { background: rgba(212,160,23,0.15) !important; border-color: #d4a017 !important; color: #d4a017 !important; } .cf-fmt-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 8px 16px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; flex: 1; text-align: center; } .cf-fmt-btn:hover { border-color: rgba(212,160,23,0.4); color: #d4a017; } .cf-fmt-active { background: rgba(212,160,23,0.15) !important; border-color: #d4a017 !important; color: #d4a017 !important; } .cf-cut-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 12px; color: var(--t1); transition: all 0.2s; cursor: pointer; font-size: 15px; padding: 10px 22px; font-weight: 900; font-family: inherit; } .cf-cut-btn:hover { border-color: rgba(212,160,23,0.5); background: rgba(212,160,23,0.08); color: #d4a017; } .cf-cut-active { background: rgba(212,160,23,0.15) !important; border-color: #d4a017 !important; color: #d4a017 !important; } /* BRIEFING QUICK */ .brfq-type-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 12px; padding: 7px 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .brfq-type-btn:hover { border-color: rgba(8,145,178,0.4); color: #67e8f9; } .brfq-type-active { background: rgba(8,145,178,0.15) !important; border-color: #0891b2 !important; color: #67e8f9 !important; } .brfq-style-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 10px; color: var(--t2); font-size: 11px; padding: 10px 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: center; line-height:1.4; } .brfq-style-btn:hover { border-color: rgba(8,145,178,0.4); color: #67e8f9; } .brfq-style-active { background: rgba(8,145,178,0.15) !important; border-color: #0891b2 !important; color: #67e8f9 !important; } /* CF / MV / BRIEFING / DISNEY / POPOUT / ANIMATION WORKFLOW - shared base */ .cw-genre-btn, .cfw-genre-btn, .mvw-style-btn, .brfw-type-btn, .dsw-genre-btn, .pvw-style-btn, .anw-genre-btn { background: var(--s2); border: 1.5px solid var(--bd2); border-radius: 8px; color: var(--t2); font-size: 11px; padding: 5px 10px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } /* section-specific hover & active colors */ .cfw-genre-btn:hover { border-color: rgba(212,160,23,0.4); color: #fbbf24; } .cfw-genre-active { background: rgba(212,160,23,0.2) !important; border-color: #d4a017 !important; color: #fbbf24 !important; } .mvw-style-btn:hover { border-color: rgba(224,64,251,0.4); color: #e040fb; } .mvw-style-active { background: rgba(224,64,251,0.2) !important; border-color: #e040fb !important; color: #e040fb !important; } .brfw-type-btn:hover { border-color: rgba(8,145,178,0.4); color: #22d3ee; } .brfw-type-active { background: rgba(8,145,178,0.2) !important; border-color: #0891b2 !important; color: #22d3ee !important; } .dsw-genre-btn:hover { border-color: rgba(167,139,250,0.4); color: #a78bfa; } .dsw-genre-active { background: rgba(167,139,250,0.2) !important; border-color: #7c3aed !important; color: #a78bfa !important; } .pvw-style-btn:hover { border-color: rgba(245,158,11,0.4); color: #f59e0b; } .pvw-style-active { background: rgba(245,158,11,0.2) !important; border-color: #f59e0b !important; color: #f59e0b !important; } .anw-genre-btn:hover { border-color: rgba(196,181,253,0.4); color: #c4b5fd; } .anw-genre-active { background: rgba(196,181,253,0.2) !important; border-color: #7c3aed !important; color: #c4b5fd !important; } /* 전역 캐릭터 스타일 버튼 */ .gs-btn { background: var(--s2); border: 1.5px solid var(--bd); border-radius: 10px; color: var(--t2); font-size: 10px; padding: 7px 4px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: center; line-height: 1.4; } .gs-btn:hover { border-color: #6366f1; background: rgba(99,102,241,0.1); color: #a5b4fc; } .gs-active { border-color: #6366f1 !important; background: rgba(99,102,241,0.18) !important; color: #c4b5fd !important; box-shadow: 0 0 8px rgba(99,102,241,0.2); } /* SELECTED */ .selected-count { border-color: var(--ac) !important; background: rgba(230,57,70,0.1) !important; color: white !important; } /* LOADING */ .loading-ring { width: 56px; height: 56px; border: 3px solid rgba(230,57,70,0.12); border-top-color: var(--ac); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* PROGRESS */ .progress-track { height: 3px; background: var(--s3); border-radius: 100px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--ac), #ff6b75); border-radius: 100px; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(230,57,70,0.5); } /* ACT DIVIDER */ .act-divider { display: flex; align-items: center; gap: 16px; padding: 6px 0; } .act-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(230,57,70,0.15), transparent); } /* SCENE CARD */ .scene-card { background: var(--s1); border: 1px solid var(--bd); border-radius: 28px; padding: 28px; transition: all 0.2s; } .scene-card:hover { border-color: rgba(230,57,70,0.18); box-shadow: 0 8px 40px rgba(0,0,0,0.35); } /* SCENE BADGE */ .scene-header-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(0,0,0,0.4); border: 1px solid var(--bd); border-left: 2px solid var(--ac); padding: 4px 12px; border-radius: 0 8px 8px 0; color: #aaa; display: inline-block; margin-bottom: 10px; } /* DIALOGUE */ .dialogue-block { font-family: 'JetBrains Mono', monospace; } .character-name { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ac); margin-bottom: 2px; } .character-direction { font-size: 10px; color: #888; font-style: italic; margin-bottom: 4px; } .character-line { font-size: 17px; color: #ddd; font-style: italic; line-height: 1.6; } /* CONTINUITY */ .continuity-note { font-size: 12px; color: #3b82f6; font-style: italic; font-family: 'JetBrains Mono', monospace; line-height: 1.6; } /* THUMB */ .thumb-card { aspect-ratio: 16/9; background: var(--s1); border-radius: 16px; overflow: hidden; border: 1px solid var(--bd); position: relative; transition: all 0.2s; } .thumb-card.ratio-9-16 { aspect-ratio: 9/16; } .thumb-card.ratio-1-1 { aspect-ratio: 1/1; } .thumb-card:hover { border-color: var(--bd2); transform: scale(1.02); } /* PLAYER */ .player-wrap { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 40px; overflow: hidden; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 0 80px rgba(0,0,0,0.8); } /* GROK / AUDIO BOXES */ .grok-box { background: rgba(124,58,237,0.05); border: 1px solid rgba(124,58,237,0.14); border-radius: 16px; padding: 16px; } .audio-box { background: rgba(16,185,129,0.04); border: 1px solid rgba(16,185,129,0.12); border-radius: 16px; padding: 16px; } /* FLOW STYLE BUTTON */ .flow-style-btn { background: var(--s1); border: 1.5px solid var(--bd); border-radius: 18px; padding: 20px; text-align: left; transition: all 0.2s; cursor: pointer; display: block; width: 100%; } .flow-style-btn:hover { border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.04); } /* ANIMATIONS */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes kenburns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.1) translate(-0.5%,-0.5%); } } .animate-fade-up { animation: fadeInUp 0.6s ease forwards; } .animate-fade-in { animation: fadeIn 0.8s ease forwards; } .kenburns-active { animation: kenburns 10s ease-in-out infinite alternate; } /* POPOUT VIDEO STYLE BUTTONS */ .pv-style-btn { cursor:pointer; font-family:inherit; } .pv-style-btn:hover { border-color:#f59e0b !important; color:#f59e0b !important; } /* DISNEY ANIMATION BUTTONS */ .disney-style-btn { cursor:pointer; font-family:inherit; } .disney-style-btn:hover { border-color:#8b5cf6 !important; color:#a78bfa !important; } .disney-genre-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:10px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t3); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; } .disney-genre-btn:hover { border-color:rgba(139,92,246,0.5); color:#a78bfa; } .disney-genre-active { background:rgba(99,102,241,0.15) !important; border-color:#7c3aed !important; color:#a78bfa !important; } .da-hero-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:8px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t3); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; } .da-hero-btn:hover { border-color:rgba(139,92,246,0.4); color:#a78bfa; } .da-hero-active { background:rgba(99,102,241,0.15) !important; border-color:#7c3aed !important; color:#a78bfa !important; } /* HIDDEN */ .hidden { display: none !important; } /* IMAGE BUILDER OVERLAY */ .ib-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,10,0.97); backdrop-filter: blur(24px) saturate(180%); overflow-y: auto; overflow-x: hidden; animation: fadeIn 0.2s ease forwards; } .ib-overlay-inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px 60px; } .ib-overlay-close { position: fixed; top: 12px; right: 16px; z-index: 201; width: 36px; height: 36px; border-radius: 50%; background: rgba(134,239,172,0.12); border: 1px solid rgba(134,239,172,0.3); color: #86efac; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s; } .ib-overlay-close:hover { background: rgba(134,239,172,0.25); transform: scale(1.1); } /* ── 자막 스타일 ── */ .sub-default span { text-shadow: 2px 2px 8px rgba(0,0,0,1), -1px -1px 4px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.8); } .sub-tiktok span { background: rgba(0,0,0,0.82); padding: 4px 14px; border-radius: 6px; letter-spacing: 0.02em; } .sub-movie span { background: rgba(0,0,0,0.62); padding: 3px 18px; border-radius: 3px; backdrop-filter: blur(6px); letter-spacing: 0.04em; } .sub-neon span { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 40px currentColor, 2px 2px 4px rgba(0,0,0,0.9); } .sub-card { background: rgba(0,0,0,0.55); backdrop-filter: blur(12px); padding: 10px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); } .sub-card span { text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } .sub-pop span { display: inline-block; animation: subpop 0.25s ease-out; } @keyframes subpop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── 자막/나레이션 설정 패널 ── */ .sv-panel { background: rgba(10,8,6,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px 20px; max-width: 860px; margin: 0 auto; } .sv-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 16px; } .sv-tab { padding: 8px 18px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; background: transparent; color: rgba(255,255,255,0.3); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; transition: all 0.15s; } .sv-tab.sv-active { color: #f59e0b; border-bottom-color: #f59e0b; } .font-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .font-btn { padding: 8px 6px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); cursor: pointer; text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); transition: all 0.15s; white-space: nowrap; } .font-btn:hover { border-color: rgba(245,158,11,0.4); color: #fff; } .font-btn.f-active { border-color: #f59e0b; background: rgba(245,158,11,0.1); color: #f59e0b; } .style-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .style-pill { padding: 5px 13px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.45); cursor: pointer; font-family: inherit; transition: all 0.15s; } .style-pill:hover { color: #fff; } .style-pill.sp-active { border-color: #f59e0b; background: rgba(245,158,11,0.12); color: #f59e0b; } .voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .voice-row { display: flex; flex-direction: column; gap: 4px; } .voice-row label { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.35); } .voice-sel { background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1); color: #fff; border-radius: 10px; padding: 7px 12px; font-size: 12px; font-family: inherit; outline: none; cursor: pointer; width: 100%; transition: border-color 0.15s; } .voice-sel:focus { border-color: #f59e0b; } .voice-preview-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); color: #f59e0b; font-size: 10px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 3px; transition: all 0.15s; align-self: flex-start; } .voice-preview-btn:hover { background: rgba(245,158,11,0.18); } .gender-filter-btns { display: flex; gap: 4px; margin-bottom: 2px; } .gender-btn { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.15s; font-family: inherit; } .gender-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); } .gender-btn.gb-all { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #fcd34d; } .gender-btn.gb-m { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.45); color: #93c5fd; } .gender-btn.gb-f { background: rgba(236,72,153,0.18); border-color: rgba(236,72,153,0.45); color: #f9a8d4; } .gender-btn.gb-n { background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.45); color: #c4b5fd; } /* SEPARATOR */ .nav-sep { width: 1px; height: 20px; background: var(--bd); flex-shrink: 0; } /* CHAR SHEET */ .char-sheet-card { background: var(--s1); border: 1px solid var(--bd); border-radius: 24px; padding: 24px; } /* CF PART BADGE */ .cf-part-badge { font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; } /* STYLE GALLERY */ .style-select-box { width: 100%; background: var(--s2); border: 1.5px solid var(--bd); border-radius: 10px; padding: 8px 12px; color: var(--t1); font-size: 12px; font-weight: 700; margin-bottom: 10px; } .style-select-box:focus { outline: none; border-color: #67e8f9; } .style-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } @media (max-width: 768px) { .style-gallery { grid-template-columns: repeat(4, 1fr); } } .style-item { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; border: 2px solid transparent; transition: all 0.15s; aspect-ratio: 1; } .style-item:hover { border-color: #67e8f9; transform: scale(1.04); } .style-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .style-item .style-num { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #aaa; font-size: 9px; font-weight: 900; text-align: center; padding: 2px 0; } .style-item.sp-img:hover { border-color: #67e8f9; } .style-item.sp-img.sp-selected { border-color: #67e8f9; box-shadow: 0 0 10px rgba(103,232,249,0.5); } .style-item.sp-img.sp-selected .style-num { color: #67e8f9; background: rgba(8,145,178,0.8); } .style-item.fl-img:hover { border-color: #a78bfa; } .style-item.fl-img.fl-selected { border-color: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,0.5); } .style-item.fl-img.fl-selected .style-num { color: #a78bfa; background: rgba(124,58,237,0.8); } /* ── Image Builder ── */ .ib-label { font-size:11px; color:var(--t2); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; display:block; } .ib-input { width:100%; background:var(--s2); border:1.5px solid var(--bd); color:var(--t1); border-radius:10px; padding:9px 12px; font-size:13px; outline:none; font-family:inherit; transition:border-color 0.15s; } .ib-input:focus { border-color:#86efac; } .ib-textarea { min-height:78px; resize:vertical; line-height:1.5; } .ib-row { display:flex; gap:5px; align-items:stretch; } .ib-row .ib-input { flex:1 1 auto; min-width:0; } .ib-preset-btn { flex:0 0 auto; background:var(--s2); border:1.5px solid var(--bd); color:#86efac; border-radius:10px; font-size:11px; font-weight:700; cursor:pointer; padding:0 10px; white-space:nowrap; transition:all 0.15s; } .ib-preset-btn:hover { border-color:#86efac; background:rgba(134,239,172,0.08); } .ib-mini-btn { flex:0 0 auto; background:var(--s3); border:1.5px solid var(--bd); color:var(--t2); border-radius:10px; font-size:11px; font-weight:700; cursor:pointer; padding:0 8px; transition:all 0.15s; min-width:32px; text-align:center; } .ib-mini-btn:hover { border-color:var(--t3); color:var(--t1); } .ib-result-box { width:100%; min-height:380px; white-space:pre-wrap; line-height:1.7; background:var(--s1); border:1.5px solid var(--bd); border-radius:12px; padding:14px; color:var(--t1); font-size:12px; font-family:'JetBrains Mono','Courier New',monospace; resize:vertical; outline:none; } .ib-modal { position:fixed; inset:0; background:rgba(4,8,14,0.78); display:none; align-items:center; justify-content:center; z-index:3000; padding:20px; overscroll-behavior:contain; } .ib-modal.active { display:flex; } .ib-modal-card { width:min(1080px,100%); max-height:88vh; overflow:auto; background:#111827; border:1.5px solid var(--bd); border-radius:18px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,0.55); overscroll-behavior:contain; } .ib-modal-hdr { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; position:sticky; top:-22px; padding:4px 0 12px; background:#111827; z-index:3; border-bottom:1px solid var(--bd); } .ib-modal-title { font-size:17px; font-weight:900; color:var(--t1); margin:0; } .ib-modal-search input { width:100%; background:#0f172a; border:1.5px solid var(--bd); border-radius:10px; color:var(--t1); padding:10px 13px; font-size:14px; outline:none; font-family:inherit; margin-bottom:14px; } .ib-modal-search input:focus { border-color:#86efac; } .ib-picker-cat { margin-bottom:16px; } .ib-picker-cat h3 { margin:0 0 10px; font-size:13px; font-weight:900; color:#86efac; } .ib-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; } .ib-picker-opt { padding:10px 12px; border-radius:10px; border:1.5px solid var(--bd); background:var(--s2); color:var(--t1); font-size:13px; font-weight:500; line-height:1.5; text-align:left; cursor:pointer; transition:all 0.15s; width:100%; } .ib-picker-opt:hover { border-color:#86efac; background:rgba(134,239,172,0.08); } .ib-adv-details summary { cursor:pointer; color:#86efac; font-size:12px; font-weight:700; list-style:none; padding:10px 14px; border:1.5px solid var(--bd); border-radius:10px; background:var(--s2); display:block; } .ib-adv-details summary::-webkit-details-marker { display:none; } .ib-adv-details[open] summary { border-radius:10px 10px 0 0; background:rgba(134,239,172,0.05); } .ib-adv-details .ib-adv-body { border:1.5px solid var(--bd); border-top:none; border-radius:0 0 10px 10px; padding:14px; } @media (max-width:768px) { .ib-picker-grid { grid-template-columns:1fr; } } /* ── SUNO AI BGM 생성 패널 ────────────────────────────────── */ #suno-bgm-panel { margin-top: 16px; background: linear-gradient(135deg, rgba(124,92,252,.10), rgba(244,114,182,.06)); border: 1px solid rgba(124,92,252,.30); border-radius: 12px; padding: 14px 16px; } .suno-hdr { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin-bottom: 12px; } .suno-hdr-logo { font-size: 1rem; font-weight: 900; background: linear-gradient(135deg, #7c5cfc, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .suno-hdr-title { font-size: .82rem; font-weight: 700; color: #f0f0f5; } .suno-ai-badge { font-size: .58rem; background: rgba(124,92,252,.22); color: #a78bfa; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(124,92,252,.35); margin-left: auto; } .suno-body { display: flex; flex-direction: column; gap: 10px; } .suno-row { display: flex; gap: 8px; align-items: flex-start; } .suno-lbl { font-size: .68rem; color: rgba(255,255,255,.35); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .suno-inp, .suno-sel { width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #f0f0f5; padding: 6px 10px; font-size: .78rem; font-family: inherit; outline: none; } .suno-inp:focus, .suno-sel:focus { border-color: #7c5cfc; } .suno-chip-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; } .suno-chip { padding: 3px 10px; border-radius: 99px; font-size: .68rem; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.5); transition: all .18s; user-select: none; } .suno-chip.on { background: rgba(124,92,252,.22); border-color: #7c5cfc; color: #c4b5fd; } .suno-dur-box { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 6px 12px; font-size: .78rem; color: #5eead4; font-family: monospace; text-align: center; min-width: 86px; cursor: pointer; white-space: nowrap; } .suno-prompt-result { display: none; background: rgba(0,0,0,.45); border: 1px solid rgba(124,92,252,.28); border-radius: 8px; padding: 10px 12px; font-size: .72rem; line-height: 1.65; max-height: 88px; overflow-y: auto; } .suno-prompt-result.show { display: block; } .suno-prompt-en { color: #c4b5fd; font-weight: 600; margin-bottom: 3px; word-break: break-all; } .suno-prompt-tags { color: #5eead4; font-size: .65rem; } .suno-actions { display: flex; gap: 6px; } .suno-act-btn { flex: 1; padding: 7px 6px; border-radius: 7px; border: none; font-size: .75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .2s; } .suno-act-gen { background: linear-gradient(135deg,#7c5cfc,#a855f7); color:#fff; } .suno-act-gen:hover { opacity: .88; transform: translateY(-1px); } .suno-act-open { background: rgba(124,92,252,.14); color: #c4b5fd; border: 1px solid rgba(124,92,252,.35); } .suno-act-open:hover { background: rgba(124,92,252,.25); } .suno-act-copy { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.10); } .suno-act-copy:hover { background: rgba(255,255,255,.12); color: #fff; } /* ── 사용 설명서 모달 스타일 ── */ /* ── 사용 설명서 모달 스타일 ── */ .help-section-title { font-size:16px;font-weight:900;color:var(--t1); margin-bottom:16px;padding-bottom:10px; border-bottom:1px solid var(--bd); font-family:'Space Grotesk',sans-serif; } .help-card { background:var(--s2);border:1px solid var(--bd);border-radius:14px; padding:16px;margin-bottom:14px; } .help-card-title { font-size:13px;font-weight:900;color:var(--t1);margin-bottom:10px; } .help-text { font-size:12px;color:var(--t2);line-height:1.7;margin:0; } .help-ol,.help-ul { font-size:12px;color:var(--t2);line-height:1.8;margin:8px 0 0; padding-left:18px; } .help-ol li,.help-ul li { margin-bottom:4px; } .help-tip { font-size:11px;color:#fbbf24;margin-top:10px;padding:8px 10px; border-radius:8px;background:rgba(251,191,36,0.07);border:1px solid rgba(251,191,36,0.2); } .help-zone { padding:10px;border-radius:10px;background:var(--s3);border:1px solid var(--bd); } .help-badge { display:inline-flex;align-items:center;gap:3px;padding:1px 7px; border-radius:6px;font-size:10px;font-weight:700; border:1px solid var(--bd2);background:var(--s3);color:var(--t2); } .help-step-box { flex:1;min-width:120px;padding:12px;border-radius:12px;border:1px solid; display:flex;flex-direction:column;align-items:center;text-align:center; } .help-faq-item { padding:10px;border-radius:10px;background:var(--s3); border:1px solid var(--bd);margin-bottom:8px; } .help-faq-q { font-size:12px;font-weight:700;color:var(--t1);margin-bottom:5px; } .help-faq-a { font-size:11px;color:var(--t2);line-height:1.6; } .help-tab { transition:all 0.15s; } .help-tab:hover { color:var(--t1) !important; background:rgba(255,255,255,0.04) !important; } #help-modal:not(.hidden) { display:flex !important; } /* ── 인라인 스타일 추출 유틸리티 클래스 ───────────────────────── */ .c-t3 { color: var(--t3); } .c-t2 { color: var(--t2); } .c-t1 { color: var(--t1); } .c-amber { color: #fbbf24; } .c-indigo { color: #a5b4fc; } .c-violet { color: #a78bfa; } .c-violet2 { color: #c4b5fd; } .c-cyan { color: #67e8f9; } .c-teal { color: #5eead4; } .c-emerald { color: #6ee7b7; } .c-orange { color: #fdba74; } .c-red { color: #f87171; } .c-rose { color: #fca5a5; } .c-green { color: #34d399; } .c-yellow { color: #f59e0b; } .c-fuchsia { color: #e040fb; } .fs22 { font-size: 22px; } .fs11 { font-size: 11px; } .mt4 { margin-top: 4px; } .ms-meta { font-size: 10px; color: var(--t3); margin-top: 2px; } .c-t3-r { color: var(--t3); font-weight: 400; } .card-label { font-weight: 800; font-size: 13px; color: var(--t1); } .ta-130 { height: 130px; font-size: 12px; } .ta-400 { height: 400px; font-size: 11px; } .ta-500 { height: 500px; font-size: 12px; line-height: 1.8; } .card-row { padding: 16px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.15s; text-align: left; } .badge-amber { background: rgba(251,191,36,0.08); color: #fbbf24; border-color: rgba(251,191,36,0.2); } .badge-dark { background: rgba(0,0,0,0.2); color: var(--t2); border-color: var(--bd); } .badge-blue { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); } .bg-s2-bd { background: var(--s2); border: 1px solid var(--bd); } .bg-s3-bd { background: var(--s3); border: 1px solid var(--bd); color: #fff; } }