/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ⚡ NanoBanana Renewal v2.1 — Studio CSS
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 📁 파일명: /new/_acc/css/studio.css
 * 📌 버전: v1.3
 * 📅 수정일: 2026-02-25
 * 📝 설명: ★ [v1.3] Save to Templates 모달 + 버튼 스타일 추가
 *          ★ [v1.2] frontend-preview.html에서 분리
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* ===== Studio CSS ===== */
.studio-view { max-width: 1200px; margin: 0 auto; }
/* 브레드크럼 네비게이션 */
.studio-breadcrumb { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--banana-light); border: 1px solid var(--banana-border); border-radius: 10px; margin-bottom: 16px; gap: 12px; }
.breadcrumb-trail { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.breadcrumb-trail > * { white-space: nowrap; }
.breadcrumb-trail a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; }
.breadcrumb-trail a:hover { opacity: 0.75; }
.breadcrumb-trail a i { margin-right: 2px; }
.breadcrumb-item { font-size: 13px; font-weight: 500; color: var(--banana-text); white-space: nowrap; }
.breadcrumb-root { cursor: pointer; color: var(--accent); font-weight: 600; transition: opacity 0.15s; }
.breadcrumb-root:hover { opacity: 0.75; }
.breadcrumb-root i { margin-right: 2px; }
.breadcrumb-sep { color: var(--text-secondary); font-size: 10px; }
.breadcrumb-category { font-size: 12px; color: var(--accent); font-weight: 600; }
.breadcrumb-category i { margin-right: 2px; }
.breadcrumb-title { font-size: 12px; color: var(--banana-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1px solid var(--banana-border); border-radius: 8px; color: var(--banana-text); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0; margin-left: auto; text-decoration: none; }
.breadcrumb-back:hover { background: var(--banana-medium); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .studio-breadcrumb { background: var(--surface); }
[data-theme="dark"] .breadcrumb-back:hover { background: rgba(245, 158, 11, 0.15); }
.studio-header { margin-bottom: 20px; }
.studio-header h2 { font-size: 24px; font-weight: 700; color: var(--banana-text); margin-bottom: 12px; }
.studio-header h2 i { color: var(--accent); }
.studio-layout { display: grid; grid-template-columns: 38% 62%; gap: 20px; align-items: start; }
.studio-left { min-width: 0; }
.studio-right { min-width: 0; }
.studio-generate-layout { gap: 20px; align-items: start; }
.studio-prompts-tab { display: flex; flex-direction: column; gap: 16px; }
.studio-search { width: 100%; padding: 12px 16px; border: 1px solid var(--banana-border); border-radius: 10px; font-size: 14px; background: var(--bg); color: var(--banana-text); box-sizing: border-box; }
.studio-search:focus { outline: none; border-color: var(--accent); }
.studio-prompt-list { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.studio-prompt-empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--text-secondary); text-align: center; }
.studio-prompt-empty-list i { font-size: 36px; color: var(--banana-border); }
.studio-prompt-card { background: var(--bg); border: 1px solid var(--banana-border); border-radius: 12px; padding: 20px; position: sticky; top: 70px; }
.studio-prompt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--text-secondary); text-align: center; }
.studio-prompt-empty i { font-size: 48px; color: var(--banana-border); }
.btn-select-prompt { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-select-prompt:hover { opacity: 0.9; }
.studio-prompt-detail { display: flex; flex-direction: column; gap: 12px; }
.studio-prompt-thumb { width: 100%; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--banana-light); }
.studio-prompt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.studio-prompt-meta h4 { font-size: 16px; font-weight: 600; color: var(--banana-text); margin-bottom: 4px; }
.studio-prompt-category { font-size: 12px; color: var(--text-secondary); }
.studio-prompt-text { font-size: 13px; line-height: 1.5; color: var(--banana-text); max-height: 120px; overflow-y: auto; padding: 12px; background: var(--banana-light); border-radius: 8px; border: 1px solid var(--banana-border); }
.btn-change-prompt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
/* Studio History Button */
.studio-history-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: 1px solid var(--banana-border); border-radius: 8px; color: var(--banana-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.studio-history-btn:hover { background: var(--banana-light); border-color: var(--accent); color: var(--accent); }

/* Studio Filter Tags */
.studio-filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Studio Prompt List Item */
.studio-prompt-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border: 1px solid var(--banana-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.studio-prompt-list-item:hover { border-color: var(--accent); background: var(--banana-light); }
.spl-thumb { width: 48px; height: 48px; min-width: 48px; border-radius: 8px; background: var(--banana-medium); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); }
.spl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spl-meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.spl-dot { color: var(--text-secondary); }
.spl-title { font-size: 13px; font-weight: 500; color: var(--banana-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary); }
.spl-stats span { display: flex; align-items: center; gap: 3px; }
.spl-stats i { font-size: 10px; color: var(--accent); }
.spl-cat-tag { display: inline-block; padding: 2px 8px; background: var(--banana-medium); border-radius: 4px; font-size: 11px; color: var(--banana-text); font-weight: 500; }
.spl-select-btn { padding: 6px 14px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.spl-select-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Studio Load More */
.studio-load-more { width: 100%; padding: 10px; background: transparent; border: 1px dashed var(--banana-border); border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.studio-load-more:hover { background: var(--banana-light); border-color: var(--accent); color: var(--accent); }

/* ===== Studio Prompt Gallery Grid ===== */
.studio-prompt-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; min-height: 200px;
}
.studio-gallery-card {
    background: var(--bg); border: 1px solid var(--banana-border);
    border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.2s;
}
.studio-gallery-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,107,53,0.12); }
.studio-gallery-thumb {
    width: 100%; aspect-ratio: 4/3; background: var(--banana-medium);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--accent); overflow: hidden;
}
.studio-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.studio-gallery-body { padding: 8px 10px; }
.studio-gallery-title {
    font-size: 12px; font-weight: 600; color: var(--banana-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
.studio-gallery-meta { display: flex; justify-content: space-between; align-items: center; }
.studio-gallery-cat { font-size: 10px; color: var(--accent); font-weight: 500; }
.studio-gallery-stats { font-size: 10px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.studio-gallery-stats i { font-size: 9px; color: var(--accent); }
[data-theme="dark"] .studio-gallery-card { background: var(--surface); }
[data-theme="dark"] .studio-gallery-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
@media (max-width: 768px) { .studio-prompt-grid { grid-template-columns: repeat(2, 1fr); } }

/* Model Credits Badge */
.model-credits { font-size: 0.8rem; color: #6b7280; }

[data-theme="dark"] .studio-prompt-card { background: var(--surface); }
[data-theme="dark"] .studio-search { background: var(--surface); }
[data-theme="dark"] .studio-prompt-text { background: var(--surface); }
[data-theme="dark"] .studio-history-btn { background: var(--surface); border-color: var(--banana-border); color: var(--banana-text); }
[data-theme="dark"] .studio-history-btn:hover { background: var(--banana-medium); color: var(--accent); }
[data-theme="dark"] .studio-prompt-list-item { background: var(--surface); border-color: var(--banana-border); }
[data-theme="dark"] .studio-prompt-list-item:hover { background: var(--banana-medium); }
[data-theme="dark"] .spl-thumb { background: var(--banana-medium); }
[data-theme="dark"] .spl-cat-tag { background: var(--banana-medium); color: var(--banana-text); }
[data-theme="dark"] .studio-load-more { border-color: var(--banana-border); }
[data-theme="dark"] .studio-load-more:hover { background: var(--banana-medium); }

/* ===== [v1.3] Save to Templates ===== */
/* 버튼 */
.result-action-btn.save-tpl { background: var(--accent); color: #fff; border-color: var(--accent); }
.result-action-btn.save-tpl:hover { background: #d97706; border-color: #d97706; }

/* 모달 오버레이 */
.save-tpl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.save-tpl-dialog { background: var(--bg); border-radius: 16px; width: 420px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.save-tpl-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--banana-border); }
.save-tpl-header h3 { font-size: 16px; margin: 0; color: var(--banana-text); }
.save-tpl-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-secondary); padding: 0 4px; }
.save-tpl-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.save-tpl-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.save-tpl-input,
.save-tpl-select { padding: 10px 12px; border: 2px solid var(--banana-border); border-radius: 10px; font-size: 14px; background: var(--banana-light); color: var(--banana-text); outline: none; transition: border-color 0.2s; }
.save-tpl-input:focus,
.save-tpl-select:focus { border-color: var(--accent); }
.save-tpl-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--banana-border); }
.save-tpl-btn { padding: 10px 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.save-tpl-btn.cancel { background: var(--banana-light); color: var(--text-secondary); }
.save-tpl-btn.cancel:hover { background: var(--banana-medium); }
.save-tpl-btn.confirm { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.save-tpl-btn.confirm:hover { background: linear-gradient(135deg, #d97706, #b45309); }
.save-tpl-btn:disabled { opacity: 0.5; pointer-events: none; }

/* 다크모드 */
[data-theme="dark"] .save-tpl-dialog { background: var(--surface); }
[data-theme="dark"] .save-tpl-input,
[data-theme="dark"] .save-tpl-select { background: var(--bg); border-color: var(--banana-border); }
[data-theme="dark"] .save-tpl-btn.cancel { background: var(--banana-medium); }