@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #F5F0EB; color: #3D3929; min-height: 100vh; display: flex; }

/* ── 사이드바 ── */
.sidebar {
  width: 260px; background: #FDFBF7; border-right: 1px solid #E8E0D4;
  display: flex; flex-direction: column; height: 100vh; position: fixed;
}
.sidebar-logo { padding: 20px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; gap: 12px; }
.logo-icon {
  width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #2E7D32, #1B5E20);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff;
}
.logo-text { font-size: 15px; font-weight: 800; color: #2C2416; }
.logo-sub { font-size: 11px; color: #9E9585; font-weight: 500; }
.sidebar-section { padding: 16px 12px 8px; font-size: 11px; font-weight: 600; color: #9E9585; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 2px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #6B6353; transition: all 0.15s; user-select: none;
}
.sidebar-item:hover { background: #F0EAE0; color: #3D3929; }
.sidebar-item.active { background: #E8F5E9; color: #2E7D32; }
.sidebar-item .icon { width: 18px; text-align: center; font-size: 14px; }
.sidebar-item .badge { margin-left: auto; background: #E8F5E9; color: #2E7D32; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.sidebar-item .badge-amber { margin-left: auto; background: #FFF3E0; color: #E65100; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.sidebar-status { margin-top: auto; padding: 16px; border-top: 1px solid #E8E0D4; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.dot-on { background: #2E7D32; box-shadow: 0 0 8px rgba(46,125,50,0.5); }
.dot-off { background: #BDB5A8; }

/* ── 메인 ── */
.main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: 48px; background: #FDFBF7; border-bottom: 1px solid #E8E0D4;
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.topbar-title { font-size: 13px; color: #9E9585; }
.topbar-title span { color: #2C2416; font-weight: 600; }
.topbar-actions { display: flex; gap: 8px; }
.topbar-btn {
  padding: 6px 14px; border-radius: 6px; border: 1px solid #D4CCBF;
  background: #FDFBF7; color: #3D3929; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif;
}
.topbar-btn:hover { background: #F0EAE0; border-color: #BDB5A8; }
.topbar-btn.primary { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.topbar-btn.primary:hover { background: #388E3C; }
.topbar-btn.danger { background: #C62828; border-color: #C62828; color: #fff; }
.topbar-btn.danger:hover { background: #D32F2F; }

.content { flex: 1; padding: 24px; overflow-y: auto; }
.page { display: none; }
.page.active { display: block; }

/* ── 스탯/패널/테이블 ── */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { background: #FDFBF7; border: 1px solid #E8E0D4; border-radius: 8px; padding: 16px 20px; }
.stat-label { font-size: 11px; color: #9E9585; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: #2C2416; }
.stat-value.green { color: #2E7D32; }
.stat-value.amber { color: #E65100; }
.stat-value.blue { color: #1565C0; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: #FDFBF7; border: 1px solid #E8E0D4; border-radius: 8px; overflow: hidden; }
.panel.full { grid-column: 1 / -1; }
.panel-header { padding: 12px 16px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-size: 13px; font-weight: 600; color: #2C2416; }
.panel-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #E8F5E9; color: #2E7D32; }
.panel-body { padding: 0; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 8px 16px; font-size: 11px; font-weight: 600; color: #9E9585; border-bottom: 1px solid #E8E0D4; text-transform: uppercase; letter-spacing: 0.5px; }
.tbl td { padding: 10px 16px; font-size: 13px; color: #3D3929; border-bottom: 1px solid #E8E0D415; }
.tbl tr:hover td { background: #F0EAE040; }
.tbl tr:last-child td { border-bottom: none; }

/* ── 태그 ── */
.tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tag-pending { background: #FFF3E0; color: #E65100; }
.tag-queued { background: #FFF8E1; color: #F57F17; }
.tag-writing { background: #E3F2FD; color: #1565C0; }
.tag-review { background: #F3E5F5; color: #7B1FA2; }
.tag-published { background: #E8F5E9; color: #2E7D32; }
.tag-failed { background: #FFEBEE; color: #C62828; }
.tag-wp { background: #E3F2FD; color: #1565C0; }
.tag-blogger { background: #FFF3E0; color: #E65100; }

/* ── 터미널 ── */
.terminal { background: #2C2416; padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; max-height: 240px; overflow-y: auto; }
.log-line { color: #BDB5A8; }
.log-line .ts { color: #6B6353; }
.log-line .ok { color: #66BB6A; }
.log-line .warn { color: #FFB74D; }
.log-line .err { color: #EF5350; }
.log-line .info { color: #42A5F5; }

/* ── 폼 ── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: #6B6353; margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 8px 12px; border: 1px solid #D4CCBF; border-radius: 6px;
  background: #FDFBF7; font-size: 13px; color: #3D3929; font-family: 'Inter', sans-serif; transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: #2E7D32; }
.form-input::placeholder { color: #BDB5A8; }
textarea.form-input { resize: vertical; min-height: 80px; font-family: 'JetBrains Mono', monospace; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { font-size: 11px; color: #9E9585; margin-top: 4px; }
.btn { padding: 8px 18px; border-radius: 6px; border: 1px solid #D4CCBF; background: #FDFBF7; color: #3D3929; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; }
.btn:hover { background: #F0EAE0; }
.btn-primary { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.btn-primary:hover { background: #388E3C; }
.btn-danger { background: #C62828; border-color: #C62828; color: #fff; }
.btn-danger:hover { background: #D32F2F; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-group { display: flex; gap: 8px; margin-top: 16px; }
.empty { padding: 32px; text-align: center; color: #9E9585; font-size: 13px; }

/* ── 모달 ── */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44,36,22,0.5); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #FDFBF7; border-radius: 10px; width: 480px; max-height: 80vh; overflow-y: auto; border: 1px solid #E8E0D4; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 15px; font-weight: 700; color: #2C2416; }
.modal-close { cursor: pointer; font-size: 18px; color: #9E9585; background: none; border: none; }
.modal-body { padding: 20px; }

/* ── AI 작업실: 에디터 주력 + 오른쪽 채팅 슬라이드 ── */
.studio-wrapper { position: relative; height: calc(100vh - 96px); overflow: hidden; }
.studio-editor { height: 100%; overflow-y: auto; transition: margin-right 0.3s; }

/* 채팅 열리면 메인 content 전체 줄어듦 */
.main.chat-open .content { margin-right: 380px; transition: margin-right 0.3s; }
.content { transition: margin-right 0.3s; }

.editor-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.editor-toolbar select { padding: 6px 12px; border: 1px solid #D4CCBF; border-radius: 6px; font-size: 13px; background: #FDFBF7; color: #3D3929; font-family: 'Inter', sans-serif; }

.editor-card { background: #FDFBF7; border: 1px solid #E8E0D4; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.editor-card-header { padding: 10px 16px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; justify-content: space-between; }
.editor-card-label { font-size: 11px; font-weight: 600; color: #9E9585; text-transform: uppercase; letter-spacing: 0.5px; }

.editor-title-input {
  width: 100%; padding: 16px; border: none; font-size: 18px; font-weight: 700;
  color: #2C2416; background: transparent; font-family: 'Inter', sans-serif; outline: none;
}
.editor-title-input::placeholder { color: #BDB5A8; }

.editor-content {
  width: 100%; min-height: 240px; padding: 16px; border: none; font-size: 14px;
  line-height: 1.8; color: #3D3929; background: transparent;
  font-family: 'Inter', sans-serif; outline: none; resize: vertical;
}
.editor-content::placeholder { color: #BDB5A8; }

.editor-meta { padding: 8px 16px; border-top: 1px solid #E8E0D415; display: flex; align-items: center; gap: 16px; font-size: 12px; color: #9E9585; }

.editor-image-area {
  width: 100%; min-height: 200px; background: #F0EAE0;
  display: flex; align-items: center; justify-content: center; color: #9E9585; font-size: 13px; position: relative;
}
.editor-image-area img { width: 100%; display: block; }
.editor-image-actions { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 6px; }

.editor-bottom { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.editor-queue-info { font-size: 13px; color: #6B6353; }
.editor-queue-info strong { color: #2C2416; }

/* ── 오른쪽 AI 채팅 패널 (VS Code 스타일) ── */
.chat-panel {
  position: fixed; top: 48px; right: -380px; width: 380px; height: calc(100vh - 48px);
  background: #FDFBF7; border-left: 1px solid #E8E0D4;
  display: flex; flex-direction: column; transition: right 0.3s; z-index: 50;
}
.chat-panel.open { right: 0; }

.chat-header { padding: 12px 16px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; justify-content: space-between; }
.chat-close { cursor: pointer; font-size: 16px; color: #9E9585; background: none; border: none; padding: 4px; }
.chat-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 90%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.chat-msg.user { align-self: flex-end; background: #2E7D32; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.ai { align-self: flex-start; background: #F0EAE0; color: #3D3929; border-bottom-left-radius: 4px; }
.chat-msg .msg-name { font-size: 11px; font-weight: 600; margin-bottom: 4px; opacity: 0.7; }
.chat-msg.ai .msg-name { color: #2E7D32; }
.chat-input-area { padding: 12px 16px; border-top: 1px solid #E8E0D4; display: flex; gap: 8px; }
.chat-input {
  flex: 1; padding: 8px 12px; border: 1px solid #D4CCBF; border-radius: 6px;
  background: #FDFBF7; font-size: 13px; color: #3D3929; font-family: 'Inter', sans-serif; outline: none;
}
.chat-input:focus { border-color: #2E7D32; }
.chat-send { padding: 8px 14px; background: #2E7D32; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chat-send:hover { background: #388E3C; }

/* chat-toggle은 topbar-btn으로 대체됨 */

/* ── 큐 바 ── */
.queue-bar { background: #FDFBF7; border: 1px solid #E8E0D4; border-radius: 8px; overflow: hidden; }
.queue-bar-header { padding: 10px 16px; border-bottom: 1px solid #E8E0D4; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.queue-bar-header:hover { background: #F0EAE040; }
.queue-bar-title { font-size: 12px; font-weight: 600; color: #6B6353; }
.queue-items { max-height: 160px; overflow-y: auto; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #E8E0D415; cursor: pointer; transition: background 0.1s; font-size: 13px; }
.queue-item:hover { background: #F0EAE040; }
.queue-item.selected { background: #E8F5E920; border-left: 3px solid #2E7D32; }
.queue-item:last-child { border-bottom: none; }
.queue-kw { font-weight: 600; color: #2C2416; }
.queue-site { color: #9E9585; font-size: 11px; }
.queue-status { margin-left: auto; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .panels { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .studio-editor.chat-open { margin-right: 0; }
  .chat-panel { width: 100%; right: -100%; }
}