@import url('https://fonts.googleapis.com/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');

:root { --cursor-x: 50%; --cursor-y: 50%; }
html { scroll-behavior: smooth; }
body { font-family: 'Pretendard', sans-serif; background: #fdfdff; color: #1e293b; overflow-x: hidden; letter-spacing: -0.02em; }

/* Fluid Background */
.fluid-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(99, 102, 241, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(255, 0, 204, 0.08) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(0, 255, 204, 0.05) 0%, transparent 50%); transition: background 0.2s ease-out; }
.aurora-blur { position: fixed; width: 140vw; height: 140vh; top: -20vh; left: -25vw; z-index: -2; background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 25%, #fae8ff 50%, #f0fdf4 100%); filter: blur(120px); animation: auroraRotate 25s linear infinite; }
@keyframes auroraRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* UI Components */
.mag-card { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(40px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2.5rem; padding: 2rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); height: fit-content; position: relative; z-index: 10; }
#studioContainer { position: relative; width: 100%; max-width: 900px; margin: 0 auto; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.aspect-shorts { aspect-ratio: 9 / 16; max-width: 420px !important; }
.aspect-long { aspect-ratio: 16 / 9; max-width: 950px !important; }
.canvas-wrapper { position: relative; width: 100%; height: 100%; background: #000; border-radius: 2.5rem; overflow: hidden; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.2); border: 12px solid #ffffff; }
canvas { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Format Toggle */
.format-toggle-container { @apply flex p-2.5 bg-white/80 backdrop-blur-3xl rounded-[3.5rem] mb-16 w-fit mx-auto shadow-2xl border-2 border-slate-100 relative; }
.format-btn { @apply flex items-center justify-center gap-5 px-14 py-6 rounded-[3rem] text-[20px] font-black uppercase tracking-tighter transition-all duration-500 relative z-10; color: #64748b; }
.format-btn.active { @apply bg-black text-white shadow-[0_20px_40px_rgba(0,0,0,0.2)] scale-[1.08]; }
.format-btn.active .yt-icon-shorts { fill: #FF0000; }
.format-btn.active .yt-icon-long { fill: #FF0000; }
.format-btn span.ratio { @apply text-[11px] font-bold opacity-30 ml-1; }
.format-btn.active span.ratio { @apply opacity-50; }
.pulse-highlight { animation: pulse-border-glow 2.5s infinite !important; border-color: rgba(99, 102, 241, 0.8) !important; }
@keyframes pulse-border-glow { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); } 70% { box-shadow: 0 0 0 25px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }

/* Guide & Controls */
.next-step-guide { position: fixed; bottom: 2.5rem; right: 2.5rem; background-color: #0f172a; color: white; padding: 1.5rem; border-radius: 2.5rem; box-shadow: 0 30px 60px rgba(0,0,0,0.4); z-index: 9999; cursor: pointer; display: flex; align-items: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translateY(200%); opacity: 0; pointer-events: none; }
.next-step-guide.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.guide-icon-box { width: 3.5rem; height: 3.5rem; border-radius: 1.25rem; background-color: #4f46e5; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.4); }

.motion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.motion-opt { @apply flex flex-col items-center gap-3 p-4 rounded-3xl border-2 border-slate-100 bg-white/50 transition-all cursor-pointer select-none text-center; }
.motion-opt.active { @apply border-indigo-600 bg-indigo-600 text-white shadow-xl scale-[1.03]; }
.motion-opt .icon-box { @apply w-[58px] h-[58px] flex items-center justify-center rounded-2xl bg-white text-indigo-500 shadow-sm transition-all; }
.motion-opt.active .icon-box { @apply bg-white/20 text-white; }
.motion-opt span { @apply text-[14px] font-black; }

.voice-opt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.voice-opt { @apply flex items-center justify-center gap-3 p-3.5 rounded-2xl border-2 border-slate-100 bg-white cursor-pointer transition-all text-[11px] font-black text-slate-500 shadow-sm hover:border-indigo-200; }
.voice-opt.active { @apply border-indigo-600 bg-indigo-600 text-white shadow-[0_10px_20px_rgba(79,70,229,0.3)] scale-[1.05] ring-4 ring-indigo-50; }
.voice-opt i { @apply text-sm opacity-60; }
.voice-opt.active i { @apply opacity-100 scale-110; }

.script-tools { @apply flex gap-2 mb-2; }
.script-tool-btn { @apply flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-xl text-[10px] font-bold border border-indigo-100 bg-white/80 text-slate-600 hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition-all; }
.script-tool-btn:disabled { @apply opacity-50 cursor-not-allowed; }

.btn-fluid { @apply bg-gradient-to-br from-slate-900 via-indigo-950 to-black text-white font-black py-9 rounded-[3.5rem] transition-all flex items-center justify-center gap-6 active:scale-95 shadow-[0_30px_60px_rgba(0,0,0,0.3)] hover:shadow-indigo-500/40 border-t-2 border-white/10 disabled:opacity-50 relative overflow-hidden; font-size: 28px; letter-spacing: -0.04em; }
.btn-fluid::before { content: ''; @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent -translate-x-full hover:animate-[shimmer_2s_infinite]; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.btn-render { @apply bg-indigo-600 text-white font-black py-4 rounded-2xl transition-all flex items-center justify-center gap-2 active:scale-95 shadow-lg hover:bg-indigo-700 disabled:opacity-50 mt-2 w-full text-xs; }

.status-container { @apply hidden w-full max-w-lg mt-8 space-y-4 text-left p-6 bg-white/90 backdrop-blur-xl rounded-[2.5rem] border-2 border-white shadow-2xl; }
.progress-bar-wrapper { @apply h-5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200 shadow-inner; }
.progress-bar-fill { @apply h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 rounded-full; width: 0%; }

.ai-assist-btn { @apply flex items-center gap-3 bg-white/80 p-4 rounded-2xl hover:bg-white transition-all shadow-sm border border-slate-100 group disabled:opacity-50; }
.ai-assist-btn i { @apply text-lg group-hover:scale-110 transition-transform; }
.ai-assist-btn span { @apply text-[11px] font-black text-slate-700; }
.ai-result-card { @apply bg-slate-800/90 border border-white/10 rounded-2xl p-5 mb-4 shadow-xl; }
.ai-result-label { @apply text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-2 block border-b border-white/5 pb-1; }
.ai-result-content { @apply text-[12px] text-slate-100 font-medium leading-relaxed; }
.ai-tag-bubble { @apply inline-block bg-indigo-500/20 text-indigo-300 px-2.5 py-0.5 rounded-md text-[10px] mr-1.5 mt-1.5 border border-indigo-500/30 font-bold; }
.credit-serif { font-family: 'Cormorant Garamond', serif; }

nav { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 4rem; z-index: 100; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; }
nav.scrolled { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(30px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 10px; }
#scriptEditor { @apply transition-all duration-500 max-h-0 opacity-0 overflow-hidden; }
#scriptEditor.active { @apply max-h-[1200px] opacity-100 mt-4; }

.gallery-item { position: relative; aspect-ratio: 1/1; border-radius: 1rem; overflow: hidden; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: grab; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item:hover { border-color: #6366f1; transform: scale(1.02); transition: all 0.2s; }
.btn-delete-img { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(255, 0, 0, 0.8); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 20; opacity: 0; transition: opacity 0.2s; }
.gallery-item:hover .btn-delete-img { opacity: 1; }



/* [수정됨] 계단형 프로세스 (꽉 채우기 & 반응형) */
.step-container { position: relative; padding-left: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.step-container::before { content: ''; position: absolute; top: 2rem; left: 2rem; width: 2px; height: 90%; background: linear-gradient(to bottom, #6366f1 0%, #e0e7ff 100%); z-index: 0; opacity: 0.5; }

.step-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    width: 100%; /* 너비 100%로 변경 (가로 꽉 채움) */
    cursor: default;
}

.step-card:hover { transform: translateX(5px) translateY(-5px); background: white; box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2); border-color: #6366f1; z-index: 10; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: #6366f1; color: white; border-radius: 50%; font-size: 0.75rem; font-weight: 900; margin-right: 0.75rem; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4); flex-shrink: 0; }

/* 계단 효과 (너비 제한을 풀고 왼쪽 여백만 살림) */
.step-container > div:nth-child(1) { margin-left: 0%; width: 100%; }
.step-container > div:nth-child(2) { margin-left: 2%; width: 98%; }
.step-container > div:nth-child(3) { margin-left: 4%; width: 96%; }
.step-container > div:nth-child(4) { margin-left: 6%; width: 94%; }
.step-container > div:nth-child(5) { margin-left: 8%; width: 92%; }




@media (max-width: 768px) {
    .motion-grid, .voice-opt-grid { grid-template-columns: repeat(2, 1fr); }
    /* 모바일에서는 계단 효과 제거하고 꽉 채움 */
    .step-card { width: 100% !important; margin-left: 0 !important; }
    .step-container::before { display: none; }
    .mag-card { padding: 1.5rem; }
    nav { padding: 1.25rem 1.5rem; }
}

/* assets/css/style_blog.css 에 추가 */

/* AI 결과 박스 애니메이션 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* 강조된 텍스트 스타일 */
b {
    font-weight: 700;
}

/* assets/css/style_blog.css 추가 */
.frame-color-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.frame-color-btn:hover { transform: scale(1.1); }
.frame-color-btn.active { transform: scale(1.15); box-shadow: 0 0 0 2px white, 0 0 0 4px #22c55e; }

/* 캔버스 컨테이너 및 고해상도 대응 스타일 */
.canvas-container {
    width: 100%;
    max-width: 800px; /* PC에서 보이는 최대 너비 제한 */
    margin: 0 auto;
    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

#blogCanvas {
    width: 100% !important;  /* 부모 너비에 무조건 맞춤 */
    height: auto !important; /* 가로세로 비율 유지 */
    display: block;
    cursor: crosshair;
    touch-action: none;      /* 모바일에서 드래그 시 브라우저 스크롤 방지 */
}

/* 플레이스홀더 아이콘 처리 */
#canvasPlaceholder {
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
}


/* --- 매트 두께 슬라이더 완전 수정 (가시성 확보) --- */

/* style_blog.css 수정본 */

/* 1. 슬라이더 영역: display 제어는 자바스크립트에 맡깁니다. */
#matteSliderArea {
    display: none; 
    background: #f8fafc; 
    padding: 15px 20px;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    margin-top: 10px;
    opacity: 1 !important; /* 투명도 문제 해결 */
}

/* 2. 슬라이더 바 디자인: 흰색으로 보이지 않게 회색과 초록색 대비 강화 */
#matteWidth {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #cbd5e1; /* 진한 회색 바 */
    border-radius: 4px;
    outline: none;
}

#matteWidth::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #10b981; /* 선명한 초록색 조절기 */
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* AI 매거진 시각화 스타일 */
.magazine-layout h1, .analysis-section p { word-break: keep-all; }
.animate-fade-in { animation: fadeInMag 0.6s ease-out forwards; }
@keyframes fadeInMag { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }