/**
 * influStudio - 공통 스타일시트
 * layout.html, generate.html, history-detail.html, index.html의 인라인 CSS 통합
 */

/* ============================================
   layout.html 기본 스타일
   ============================================ */
.navbar { margin-bottom: 2rem; }
.card { margin-bottom: 1rem; }
.content-preview {
    white-space: pre-wrap;
    font-family: inherit;
    max-height: 500px;
    overflow-y: auto;
}
.badge-image { background-color: #6c757d; }

/* 컨텍스트 도움말 아이콘 */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    transition: background-color 0.2s;
}
.help-icon:hover {
    background-color: #0d6efd;
}

/* 팝오버 커스텀 스타일 */
.popover {
    max-width: 320px;
}
.popover-header {
    font-size: 0.85rem;
    font-weight: 600;
}
.popover-body {
    font-size: 0.82rem;
}

/* 다크모드 오버라이드 */
[data-bs-theme="dark"] .content-preview {
    background-color: #2b3035;
}
[data-bs-theme="dark"] .list-group-item.active {
    background-color: #1a3a52;
    border-color: #2c5f8d;
}
#themeToggle {
    border: none;
    padding: 0.5rem;
}

/* ============================================
   generate.html 스타일
   ============================================ */
.list-group-item.active {
    background-color: #e7f1ff;
    border-color: #b6d4fe;
}
.content-preview {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
}
[data-bs-theme="dark"] .list-group-item.active {
    background-color: #1a3a52;
    border-color: #2c5f8d;
}
[data-bs-theme="dark"] .content-preview {
    background-color: #2b3035;
}
/* 커서 깜빡임 애니메이션 */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
#streamingCursor {
    animation: blink 1s infinite;
    font-weight: bold;
}

/* ============================================
   history-detail.html 스타일
   ============================================ */
.star-rating {
    display: flex;
    gap: 0.25rem;
}
.prompt-preview {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.85rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    padding: 1rem;
    border-radius: 0.375rem;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 0;
}

/* ============================================
   index.html 스타일
   ============================================ */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 0;
}
.feature-card {
    transition: transform 0.2s;
}
.feature-card:hover {
    transform: translateY(-5px);
}
[data-bs-theme="dark"] .hero {
    background: linear-gradient(135deg, #4a5f9d 0%, #5a3d7a 100%);
}

/* ============================================
   generate.html 위자드 플로우
   ============================================ */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
    white-space: nowrap;
}
.wizard-step.active { color: #0d6efd; font-weight: 600; }
.wizard-step.completed { color: #198754; }
.wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid #dee2e6;
    background: white;
    flex-shrink: 0;
    transition: all 0.3s;
}
.wizard-step.active .wizard-step-circle {
    border-color: #0d6efd;
    background: #0d6efd;
    color: white;
}
.wizard-step.completed .wizard-step-circle {
    border-color: #198754;
    background: #198754;
    color: white;
}
.wizard-connector {
    flex: 1;
    height: 2px;
    background: #dee2e6;
    margin: 0 0.5rem;
    transition: background 0.3s;
}
.wizard-connector.completed { background: #198754; }

.wizard-form-step { display: none; }
.wizard-form-step.active { display: block; animation: wizardFadeIn 0.3s ease; }
@keyframes wizardFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* 클래식 모드: 모든 스텝 동시 표시 */
.classic-mode .wizard-form-step { display: block !important; animation: none !important; }
.classic-mode #wizardProgress { display: none !important; }
.classic-mode .wizard-nav { display: none !important; }

/* 다크모드 위자드 */
[data-bs-theme="dark"] .wizard-step-circle { background: #212529; border-color: #495057; }
[data-bs-theme="dark"] .wizard-connector { background: #495057; }
[data-bs-theme="dark"] .wizard-step.active .wizard-step-circle { background: #0d6efd; border-color: #0d6efd; }
[data-bs-theme="dark"] .wizard-step.completed .wizard-step-circle { background: #198754; border-color: #198754; }

/* ============================================
   모바일 반응형 CSS [U7]
   ============================================ */
@media (max-width: 768px) {
    .btn-group-mobile { flex-direction: column !important; width: 100%; }
    .btn-group-mobile .btn { width: 100%; margin-bottom: 0.5rem; }
    .wizard-step-label { display: none; }
    .wizard-step-circle { width: 28px; height: 28px; font-size: 0.75rem; }
    .wizard-connector { margin: 0 0.25rem; }
}