/* ══════════════════════════════════════════
   다온 블로그 자동화 — 공통 스타일
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:      #6c63ff;
  --primary-dark: #574fd6;
  --secondary:    #ff6584;
  --bg:           #f0f2f8;
  --surface:      #ffffff;
  --text:         #1e1e2e;
  --text-muted:   #6b7280;
  --border:       #e5e7eb;
  --radius:       12px;
  --shadow:       0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.14);
  --wp-blue:      #21759b;
  --naver-green:  #03c75a;
  --tistory-org:  #ff5a1f;
}

body {
  font-family: 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ─── Flash 메시지 ─────────────────────────── */
.flash-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.flash {
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: slideIn .3s ease;
}
.flash--success { background: #d1fae5; color: #065f46; }
.flash--warning { background: #fef3c7; color: #92400e; }
.flash--info    { background: #dbeafe; color: #1e40af; }
.flash--error   { background: #fee2e2; color: #991b1b; }

@keyframes slideIn {
  from { transform: translateX(2rem); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ══════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════ */
.login-wrapper {
  display: flex;
  min-height: 100vh;
}

/* 왼쪽 브랜드 패널 */
.login-brand {
  flex: 0 0 42%;
  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 60%, var(--secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.login-brand::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  top: -150px; left: -150px;
}
.login-brand::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  bottom: -80px; right: -80px;
}

.brand-inner { position: relative; z-index: 1; color: #fff; }

.brand-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
}
.logo-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.logo-text  { font-size: 1.6rem; font-weight: 700; letter-spacing: .05em; }

.brand-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.brand-desc {
  font-size: 1rem;
  line-height: 1.8;
  opacity: .85;
  margin-bottom: 2rem;
}

.platform-badges { display: flex; gap: .6rem; flex-wrap: wrap; }
.badge {
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge--wp      { background: rgba(33,117,155,.5);  color: #fff; border: 1px solid rgba(255,255,255,.3); }
.badge--naver   { background: rgba(3,199,90,.4);    color: #fff; border: 1px solid rgba(255,255,255,.3); }
.badge--tistory { background: rgba(255,90,31,.4);   color: #fff; border: 1px solid rgba(255,255,255,.3); }

/* 오른쪽 로그인 패널 */
.login-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg);
}

.login-box {
  background: var(--surface);
  border-radius: 20px;
  padding: 2.5rem 2.8rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}

.login-header { margin-bottom: 2rem; }
.login-header h2 { font-size: 1.7rem; font-weight: 700; color: var(--text); }
.login-header p  { font-size: .9rem;  color: var(--text-muted); margin-top: .3rem; }

.alert {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  margin-bottom: 1.2rem;
}
.alert--error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

.form-group { margin-bottom: 1.3rem; }
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .45rem;
  letter-spacing: .03em;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: .9rem;
  font-size: 1rem;
  pointer-events: none;
}
.input-wrap input {
  width: 100%;
  padding: .75rem 2.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--text);
  background: #fafafa;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,.12);
  background: var(--surface);
}
.toggle-pw {
  position: absolute;
  right: .9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: .6;
  transition: opacity .2s;
}
.toggle-pw:hover { opacity: 1; }

.btn-login {
  width: 100%;
  padding: .85rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(108,99,255,.35);
  margin-top: .5rem;
}
.btn-login:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,99,255,.4); }
.btn-login:active { transform: translateY(0); }
.btn-arrow { font-size: 1.1rem; transition: transform .2s; }
.btn-login:hover .btn-arrow { transform: translateX(4px); }

.login-footer {
  text-align: center;
  margin-top: 1.8rem;
  font-size: .78rem;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════ */
.dashboard-wrapper {
  display: flex;
  min-height: 100vh;
}

/* 사이드바 */
.sidebar {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  position: fixed;
  top: 0; left: 0; bottom: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.sidebar-brand .logo-icon { font-size: 1.4rem; }
.sidebar-brand .logo-text { font-size: 1.1rem; font-weight: 700; color: var(--primary); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .9rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item--active { background: rgba(108,99,255,.1); color: var(--primary); font-weight: 600; }
.nav-item--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.nav-icon { font-size: 1.1rem; }
.badge-soon {
  margin-left: auto;
  font-size: .65rem;
  background: var(--bg);
  color: var(--text-muted);
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.sidebar-footer { padding-top: 1rem; border-top: 1px solid var(--border); }
.btn-logout {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem .9rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-logout:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* 메인 영역 */
.main-content {
  margin-left: 240px;
  flex: 1;
  padding: 2rem 2.5rem;
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.page-title { font-size: 1.5rem; font-weight: 700; }
.page-sub    { font-size: .9rem; color: var(--text-muted); margin-top: .2rem; }

/* 상태 카드 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card--blue   { border-color: var(--wp-blue); }
.stat-card--green  { border-color: var(--naver-green); }
.stat-card--orange { border-color: var(--tistory-org); }
.stat-card--purple { border-color: var(--primary); }
.stat-icon   { font-size: 2rem; }
.stat-label  { font-size: .8rem; color: var(--text-muted); margin-bottom: .2rem; }
.stat-value  { font-size: 1rem; font-weight: 600; }

/* 안내 박스 */
.info-box {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow);
}
.info-box h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.info-box ol { padding-left: 1.4rem; }
.info-box li { font-size: .92rem; line-height: 2; color: var(--text-muted); }
.info-box li strong { color: var(--text); }

/* ══════════════════════════════════════════
   DASHBOARD — 상태 카드 추가
   ══════════════════════════════════════════ */
.stat-card--link { text-decoration: none; cursor: pointer; }
.stat-card--link:hover { background: #f8f7ff; }
.stat-arrow { margin-left: auto; color: var(--primary); font-size: 1.1rem; opacity: 0; transition: opacity .2s; }
.stat-card--link:hover .stat-arrow { opacity: 1; }
.stat-value--ok { color: #059669; }

/* ══════════════════════════════════════════
   NAVER SETTINGS — 추가 스타일
   ══════════════════════════════════════════ */

/* 경고 배너 변형 */
.guide-banner--warn {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.guide-banner--warn ul { padding-left: 1.2rem; margin-top: .25rem; }
.guide-banner--warn li { list-style: disc; }

/* 환경 체크 행 */
.env-check-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.env-result {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .87rem;
  font-weight: 500;
  animation: slideIn .25s ease;
}
.env-result--ok   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.env-result--fail { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* 환경 상세 */
.env-detail {
  margin-top: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.env-row {
  display: flex;
  align-items: center;
  padding: .55rem 1rem;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.env-row:last-child { border-bottom: none; }
.env-label { width: 130px; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.env-val   { color: var(--text); }
.env-val--mono { font-family: 'Consolas', monospace; font-size: .8rem; color: var(--text-muted); }

.tag {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.tag--ok   { background: #d1fae5; color: #065f46; }
.tag--fail { background: #fee2e2; color: #991b1b; }

.link { color: var(--primary); text-decoration: none; font-size: .75rem; }
.link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════════ */

/* 탭 */
.settings-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.stab {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
  transition: color .15s, background .15s;
}
.stab:hover { color: var(--text); background: var(--bg); }
.stab--active {
  color: var(--primary);
  background: var(--surface);
  border-color: var(--border);
  font-weight: 600;
}
.stab--disabled { opacity: .45; pointer-events: none; }

/* 설정 카드 */
.settings-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow);
  max-width: 860px;
}

/* 안내 배너 */
.guide-banner {
  display: flex;
  gap: 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  font-size: .875rem;
  line-height: 1.8;
  color: #1e40af;
}
.guide-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.guide-banner ol { padding-left: 1.2rem; margin-top: .25rem; }

/* 섹션 */
.form-section { margin-bottom: 2rem; }
.section-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* 그리드 폼 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1.5rem;
}
.form-group--full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.required { color: #ef4444; }
.saved-badge {
  font-size: .72rem;
  background: #d1fae5;
  color: #065f46;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-weight: 500;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-prefix {
  position: absolute;
  left: .85rem;
  font-size: .95rem;
  pointer-events: none;
}
.input-wrap input,
.input-wrap select {
  width: 100%;
  padding: .7rem 1rem .7rem 2.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: #fafafa;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-wrap select { appearance: none; cursor: pointer; padding-right: 2rem; }
.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,.1);
  background: #fff;
}
.toggle-pw-btn {
  position: absolute;
  right: .8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  opacity: .55;
  transition: opacity .2s;
}
.toggle-pw-btn:hover { opacity: 1; }

.form-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.img-query-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.img-query-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,.1);
  background: #fff;
}

/* 토글 스위치 */
.toggle-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.toggle-wrap { position: relative; }
.toggle-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: inline-block;
  width: 42px; height: 24px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  transition: background .2s;
  cursor: pointer;
}
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s;
}
.toggle-wrap input:checked + .toggle-track { background: var(--primary); }
.toggle-wrap input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

/* 액션 버튼 */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}
.btn-primary {
  padding: .7rem 1.6rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(108,99,255,.3);
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(108,99,255,.38); }
.btn-secondary {
  padding: .7rem 1.4rem;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .15s, background .15s;
}
.btn-secondary:hover { border-color: var(--primary); background: #f5f4ff; color: var(--primary); }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* 테스트 결과 */
.test-result {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 500;
  animation: slideIn .25s ease;
}
.test-result--ok   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.test-result--fail { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ══════════════════════════════════════════
   TISTORY SETTINGS
   ══════════════════════════════════════════ */
.guide-banner--ok     { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.guide-banner--danger { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

.section-badge {
  font-size:.72rem; font-weight:500;
  background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe;
  padding:.1rem .5rem; border-radius:999px;
  margin-left:.5rem; text-transform:none; letter-spacing:0;
}

.blog-list {
  margin-top:1rem; padding:1rem 1.2rem;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
}
.blog-list-title { font-size:.82rem; font-weight:600; color:var(--text-muted); margin-bottom:.6rem; }
.blog-chip {
  display:inline-block; padding:.3rem .8rem; margin:.2rem;
  background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;
  border-radius:999px; font-size:.82rem; font-weight:500;
}

/* ══════════════════════════════════════════
   CLAUDE API SETTINGS
   ══════════════════════════════════════════ */

/* 모델 카드 선택 */
.model-cards { display:flex; flex-direction:column; gap:.75rem; }
.model-card {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem;
  border:1.5px solid var(--border); border-radius:var(--radius);
  cursor:pointer; background:var(--surface);
  transition:border-color .15s, background .15s;
}
.model-card input[type="radio"] { display:none; }
.model-card:hover { border-color:#a5b4fc; background:#fafafe; }
.model-card--active { border-color:var(--primary); background:#f5f3ff; }
.model-card--active::before {
  content:'✔'; color:var(--primary); font-size:.85rem; font-weight:700; flex-shrink:0;
}
.model-info { flex:1; }
.model-name { font-size:.92rem; font-weight:600; color:var(--text); }
.model-desc { font-size:.78rem; color:var(--text-muted); margin-top:.15rem; }

.model-badge {
  padding:.25rem .7rem; border-radius:999px; font-size:.72rem; font-weight:700;
  white-space:nowrap; flex-shrink:0;
}
.model-badge--best { background:#fdf4ff; color:#7e22ce; border:1px solid #e9d5ff; }
.model-badge--rec  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.model-badge--fast { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }

/* 슬라이더 */
.input-wrap--slider { padding:0; border:none; background:transparent; }
.input-wrap--slider input[type="range"] {
  width:100%; padding:0; border:none; background:transparent; cursor:pointer;
  accent-color:var(--primary);
}
.input-wrap--slider input[type="range"]:focus { box-shadow:none; }
.slider-labels {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem; color:var(--text-muted); margin-top:.3rem; padding:0 .1rem;
}
.slider-cur { font-weight:700; color:var(--primary); font-size:.88rem; }

/* 텍스트에어리어 */
.textarea {
  width:100%; padding:.8rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-size:.88rem; line-height:1.7; color:var(--text);
  background:#fafafa; outline:none; resize:vertical;
  font-family:'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  transition:border-color .2s, box-shadow .2s;
}
.textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,99,255,.1); background:#fff;
}

/* 프리셋 버튼 */
.prompt-presets { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }
.preset-label   { font-size:.78rem; color:var(--text-muted); font-weight:600; flex-shrink:0; }
.preset-btn {
  padding:.3rem .8rem;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:999px; font-size:.78rem; cursor:pointer;
  color:var(--text-muted); transition:all .15s;
}
.preset-btn:hover { border-color:var(--primary); color:var(--primary); background:#f5f3ff; }

/* 인라인 코드 */
.icode {
  background:#f1f5f9; border:1px solid #e2e8f0;
  border-radius:4px; padding:.1rem .4rem;
  font-family:'Consolas',monospace; font-size:.82rem; color:#475569;
}

/* ─── 키워드 자동 추천 ────────────────────── */
.kw-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.kw-label-row label { margin-bottom: 0; }

.btn-suggest {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .75rem;
  background: linear-gradient(135deg, #6c63ff, #a78bfa);
  color: #fff; border: none; border-radius: 999px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-suggest:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.btn-suggest:disabled { opacity: .55; cursor: not-allowed; }

.kw-suggestions {
  margin-top: .6rem;
  padding: .7rem .8rem;
  background: #f5f3ff;
  border: 1.5px solid #ddd6fe;
  border-radius: var(--radius);
}
.kw-suggest-label {
  font-size: .72rem; color: #7c3aed; font-weight: 600;
  margin-bottom: .45rem;
}
.kw-suggest-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.kw-suggest-chip {
  padding: .28rem .7rem;
  background: #fff; border: 1.5px solid #c4b5fd;
  border-radius: 999px; font-size: .78rem; color: #5b21b6;
  cursor: pointer; transition: all .15s;
}
.kw-suggest-chip:hover { background: #ede9fe; border-color: #7c3aed; }
.kw-suggest-chip--on {
  background: #7c3aed; border-color: #7c3aed; color: #fff;
}

/* ─── Unsplash 이미지 결과 ─────────────────── */
.result-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .5rem;
}
.result-img-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #f8fafc;
}
.result-img-item img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; display: block;
  transition: transform .2s;
}
.result-img-item:hover img { transform: scale(1.03); }
.result-img-num {
  position: absolute; top: .4rem; left: .4rem;
  background: rgba(0,0,0,.55); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  padding: .1rem .45rem; line-height: 1.4;
}
.result-img-credit {
  padding: .3rem .5rem;
  font-size: .7rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-img-credit a { color: var(--primary); text-decoration: none; }
.result-img-credit a:hover { text-decoration: underline; }
.result-img-item { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.result-img-item:hover { box-shadow: 0 4px 16px rgba(108,99,255,.18); }
.result-img-item--selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,99,255,.3); }
.result-img-item--selected img { opacity: .88; }
.img-sel-badge {
  position: absolute; top: .4rem; left: .4rem;
  width: 1.5rem; height: 1.5rem;
  background: var(--primary); color: #fff;
  border-radius: 50%; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 2;
  user-select: none;
}
.btn-apply-images {
  margin-top: .75rem; width: 100%;
  padding: .55rem 1rem;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.btn-apply-images:hover { opacity: .88; }
.images-hint {
  font-size: .76rem; color: var(--text-muted); margin: .3rem 0 .6rem;
}
/* 이미지 탭 */
.img-tab-row { display:flex; gap:.4rem; margin-bottom:.2rem; }
.img-tab {
  padding: .35rem .85rem; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: .82rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.img-tab--active {
  border-color: var(--primary); background: var(--primary);
  color: #fff;
}
/* 직접 업로드 */
.direct-img-list { display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem; }
.direct-img-row { display:flex; align-items:flex-start; gap:.6rem; }
.direct-img-badge {
  width: 1.6rem; height: 1.6rem; flex-shrink: 0; margin-top:.35rem;
  background: var(--primary); color: #fff;
  border-radius: 50%; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.direct-img-body { flex: 1; min-width: 0; }
.direct-img-label { display:flex; cursor:pointer; }
.direct-img-btn {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  font-size: .82rem; color: var(--text-muted);
  background: var(--surface); transition: border-color .15s, color .15s;
}
.direct-img-label:hover .direct-img-btn { border-color: var(--primary); color: var(--primary); }
.direct-img-preview {
  display: flex; align-items: center; gap: .6rem;
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: .4rem .6rem;
}
.direct-img-preview img {
  width: 64px; height: 48px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0;
}
.direct-img-meta { font-size: .75rem; color: var(--text-muted); flex:1; min-width:0; word-break:break-all; }
.direct-img-clear {
  padding: .25rem .55rem; border-radius: 4px;
  border: 1px solid #fca5a5; background: #fff0f0;
  color: #dc2626; font-size: .75rem; cursor: pointer; flex-shrink:0;
}
.direct-img-clear:hover { background: #fee2e2; }

/* 이미지 미설정 안내 */
.img-setup-tip {
  font-size: .8rem; color: var(--text-muted);
  background: #f8fafc; border: 1.5px dashed var(--border);
  border-radius: var(--radius); padding: .6rem .9rem;
}
.img-setup-tip a { color: var(--primary); }

/* ─── Gemini 대시보드 카드 색상 ───────────── */
.stat-card--teal { border-top: 4px solid #0d9488; }
.stat-card--teal .stat-icon { background: #f0fdfa; color: #0d9488; }

/* ─── Unsplash 대시보드 카드 색상 ─────────── */
.stat-card--img { border-top: 4px solid #111827; }
.stat-card--img .stat-icon { background: #f9fafb; color: #111827; }

/* ─── AI 엔진 선택 카드 (글 생성 페이지) ── */
.ai-provider-cards {
  display: flex; gap: .75rem;
}
.ai-card {
  flex: 1; display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1rem;
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .15s; position: relative;
  background: var(--surface);
}
.ai-card input[type="radio"] { display: none; }
.ai-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.ai-card-info { flex: 1; }
.ai-card-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.ai-card-sub  { font-size: .72rem; color: var(--text-muted); }
.ai-card--active {
  border-color: var(--primary); background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(108,99,255,.12);
}
.ai-card--disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.ai-card-badge-off {
  font-size: .68rem; background: #fee2e2; color: #b91c1c;
  border-radius: 999px; padding: .1rem .5rem; font-weight: 600;
}

/* ══════════════════════════════════════════
   GENERATE PAGE
   ══════════════════════════════════════════ */

/* 2열 레이아웃 */
.gen-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* 입력 패널 카드 */
.gen-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* 키워드 태그 입력 */
.keyword-input-row { display: flex; gap: .5rem; }
.btn-kw-add {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer; color: var(--primary);
  transition: background .15s, border-color .15s;
}
.btn-kw-add:hover { background: #f5f3ff; border-color: var(--primary); }

.kw-tags { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 0; }
.kw-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem;
  background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe; border-radius: 999px;
  font-size: .8rem; font-weight: 500;
}
.kw-tag button {
  background: none; border: none; cursor: pointer;
  color: #1d4ed8; font-size: .95rem; line-height: 1;
  padding: 0; margin-left: .1rem;
}
.kw-tag button:hover { color: #ef4444; }

/* 글 길이 카드 */
.length-cards { display: flex; gap: .6rem; }
.len-card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: .7rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.len-card input[type="radio"] { display: none; }
.len-card:hover { border-color: #a5b4fc; background: #fafafe; }
.len-card--active {
  border-color: var(--primary-dark);
  background: rgba(108,99,255,.18);
  box-shadow: 0 0 0 3px rgba(108,99,255,.18);
}
.len-card--active .len-name { color: var(--primary-dark); }
.len-card--active .len-desc { color: #4338ca; }
/* JS가 죽어도 라디오 체크 상태로 강조되게 */
.len-card:has(input:checked) {
  border-color: var(--primary-dark);
  background: rgba(108,99,255,.18);
  box-shadow: 0 0 0 3px rgba(108,99,255,.18);
}
.len-card:has(input:checked) .len-name { color: var(--primary-dark); }
.len-card:has(input:checked) .len-desc { color: #4338ca; }
.len-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.len-desc { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

/* 플랫폼 체크박스 */
.platform-checks { display: flex; gap: .6rem; flex-wrap: wrap; }
.plat-check {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; font-size: .85rem; font-weight: 500;
  color: var(--text-muted); transition: all .15s;
}
.plat-check input[type="checkbox"] { display: none; }
.plat-check:has(input:checked) { color: var(--text); }
.plat-check--wp:has(input:checked)      { border-color: var(--wp-blue);    background: #f0f7ff; color: var(--wp-blue); }
.plat-check--naver:has(input:checked)   { border-color: var(--naver-green); background: #f0fff7; color: #057a40; }
.plat-check--tistory:has(input:checked) { border-color: var(--tistory-org); background: #fff7f0; color: var(--tistory-org); }
.plat-icon { font-size: 1rem; }

/* 생성 버튼 */
.btn-generate {
  width: 100%;
  padding: .9rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: var(--radius);
  font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 4px 16px rgba(108,99,255,.35);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .02em;
}
.btn-generate:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(108,99,255,.42); }
.btn-generate:disabled { opacity: .65; cursor: not-allowed; }

/* 에러 */
.gen-error {
  padding: .75rem 1rem;
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fca5a5; border-radius: var(--radius);
  font-size: .85rem; white-space: pre-wrap; word-break: break-all;
}

/* 결과 패널 */
.gen-result-panel {
  min-height: 500px;
  display: flex; flex-direction: column;
}

/* 플레이스홀더 */
.result-placeholder {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow); min-height: 400px;
}
.placeholder-inner { text-align: center; color: var(--text-muted); }
.placeholder-icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: .4; }
.placeholder-inner p { font-size: .95rem; line-height: 1.8; }

/* 로딩 */
.result-loading {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow); min-height: 400px; gap: 1.2rem;
}
.loading-spinner {
  width: 48px; height: 48px;
  border: 4px solid #e0e0f0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 1rem; font-weight: 600; color: var(--text); }
.loading-sub  { font-size: .85rem; color: var(--text-muted); }

/* 결과 카드 */
.result-content {
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow); padding: 1.6rem 1.8rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.result-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .8rem; border-bottom: 1px solid var(--border);
}
.result-model { font-size: .78rem; color: var(--text-muted); margin-right: .5rem; }
.result-stamp { font-size: .82rem; font-weight: 600; color: #059669; }
.btn-copy-all {
  padding: .35rem .8rem;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .8rem; cursor: pointer;
  color: var(--text-muted); transition: all .15s;
}
.btn-copy-all:hover { border-color: var(--primary); color: var(--primary); }

/* 결과 필드 */
.result-field { display: flex; flex-direction: column; gap: .45rem; }
.result-field-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
}
.result-field-label > span:first-child { flex: 1; }
.btn-copy-field {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; opacity: .5; transition: opacity .15s;
}
.btn-copy-field:hover { opacity: 1; }

.result-input {
  width: 100%; padding: .65rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; color: var(--text);
  background: #fafafa; outline: none;
  transition: border-color .2s;
}
.result-input:focus { border-color: var(--primary); background: #fff; }

.result-textarea {
  width: 100%; padding: .65rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .88rem; line-height: 1.7; color: var(--text);
  background: #fafafa; outline: none; resize: vertical;
  transition: border-color .2s;
  font-family: 'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
.result-textarea:focus { border-color: var(--primary); background: #fff; }
.result-textarea--sm { rows: 2; min-height: 60px; }

/* 자 수 */
.char-count { font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.char-count--over { color: #ef4444; font-weight: 600; }

/* 태그 / 해시태그 행 */
.result-tags-row { display: flex; gap: 1rem; }
.result-field--half { flex: 1; }
.result-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 32px; }
.chip {
  display: inline-block; padding: .25rem .7rem;
  border-radius: 999px; font-size: .78rem; font-weight: 500;
}
.chip--tag  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.chip--hash { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* 본문 탭 */
.content-tabs { display: flex; gap: .3rem; }
.ctab {
  padding: .2rem .65rem;
  border: 1.5px solid var(--border); border-radius: 999px;
  font-size: .75rem; cursor: pointer; background: none;
  color: var(--text-muted); transition: all .15s;
}
.ctab:hover      { border-color: #a5b4fc; color: var(--primary); }
.ctab--active    { border-color: var(--primary); background: #f5f3ff; color: var(--primary); font-weight: 600; }

.content-panel {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; min-height: 240px;
  background: #fafafa;
}

/* 블로그 미리보기 스타일 */
.blog-preview { line-height: 1.8; font-size: .9rem; overflow-y: auto; max-height: 420px; }
.blog-preview h2 { font-size: 1.15rem; font-weight: 700; margin: 1.2em 0 .5em; color: var(--text); }
.blog-preview h3 { font-size: 1rem;    font-weight: 600; margin: 1em 0 .4em;   color: var(--text); }
.blog-preview p  { margin-bottom: .8em; color: #374151; }
.blog-preview ul, .blog-preview ol { padding-left: 1.5rem; margin-bottom: .8em; }
.blog-preview li { margin-bottom: .3em; }
.blog-preview strong { font-weight: 700; color: var(--text); }
.blog-preview img   { max-width: 100%; height: auto; display: block; }
.blog-preview figure { margin: 1.2rem 0; }
/* 글 상세 페이지: max-height 제한 없이 전체 표시 */
.detail-card .blog-preview { max-height: none; overflow-y: visible; }

/* 숨김 textarea */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* 토스트 */
.toast-msg {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: #1e1e2e; color: #fff;
  padding: .6rem 1.4rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 9999; transition: opacity .4s;
}

/* ══════════════════════════════════════════
   POSTS LIST & DETAIL
   ══════════════════════════════════════════ */

/* 저장 버튼 */
.btn-save {
  padding:.35rem .9rem;
  background: linear-gradient(135deg,#059669,#047857);
  color:#fff; border:none; border-radius:var(--radius);
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:opacity .15s;
}
.btn-save:hover:not(:disabled) { opacity:.88; }
.btn-save:disabled { opacity:.65; cursor:not-allowed; }
.btn-save--done { background:linear-gradient(135deg,#6b7280,#4b5563); }

/* 포스트 테이블 */
.posts-table-wrap { background:var(--surface); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.posts-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.posts-table thead { background:var(--bg); }
.posts-table th {
  padding:.75rem 1rem; text-align:left;
  font-size:.78rem; font-weight:700; color:var(--text-muted);
  border-bottom:1px solid var(--border); letter-spacing:.04em;
}
.posts-table td { padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.posts-table tbody tr:last-child td { border-bottom:none; }
.posts-table tbody tr:hover { background:#fafafe; }

.post-title-link { font-weight:600; color:var(--text); text-decoration:none; }
.post-title-link:hover { color:var(--primary); }
.post-topic { font-size:.75rem; color:var(--text-muted); margin-top:.2rem; }
.td-date { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }

/* 플랫폼 뱃지 */
.plat-badges { display:flex; gap:.3rem; flex-wrap:wrap; }
.pbadge {
  display:inline-block; padding:.15rem .5rem;
  border-radius:4px; font-size:.72rem; font-weight:700;
}
.pbadge--wp      { background:#e0f0f8; color:var(--wp-blue); }
.pbadge--naver   { background:#e6faf0; color:#057a40; }
.pbadge--tistory { background:#fff0e8; color:var(--tistory-org); }

/* 태그 미리보기 */
.tag-preview { font-size:.78rem; color:var(--text-muted); }
.model-chip  { font-size:.75rem; background:var(--bg); color:var(--text-muted); padding:.15rem .5rem; border-radius:4px; }

/* 상태 뱃지 */
.status-badge {
  display:inline-block; padding:.2rem .65rem;
  border-radius:999px; font-size:.75rem; font-weight:600;
}
.status-badge--ok    { background:#d1fae5; color:#065f46; }
.status-badge--warn  { background:#fef3c7; color:#92400e; }
.status-badge--draft { background:#f1f5f9; color:#475569; }
.status-badge--fail  { background:#fee2e2; color:#991b1b; }

/* 행 버튼 */
.row-actions { display:flex; gap:.3rem; }
.act-btn {
  width:28px; height:28px; border-radius:6px; border:none;
  background:var(--bg); cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:background .15s;
}
.act-btn:hover { background:#e5e7eb; }
.act-btn--del:hover { background:#fee2e2; }

/* 빈 상태 */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem; background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
  color:var(--text-muted); text-align:center;
}
.empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; }

/* 상세 페이지 */
.back-link { font-size:.85rem; color:var(--primary); text-decoration:none; }
.back-link:hover { text-decoration:underline; }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.detail-card {
  background:var(--surface); border-radius:16px;
  padding:1.4rem 1.6rem; box-shadow:var(--shadow);
}
.detail-section-title {
  font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted);
  margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border);
}
.meta-dl { display:grid; grid-template-columns:90px 1fr; gap:.45rem .8rem; font-size:.88rem; }
.meta-dl dt { color:var(--text-muted); font-weight:600; align-self:start; padding-top:.05rem; }
.meta-dl dd { color:var(--text); }
.empty-note { font-size:.85rem; color:var(--text-muted); text-align:center; padding:1.5rem 0; }

/* ─── 반응형 ─────────────────────────────── */
@media (max-width: 768px) {
  .login-brand { display: none; }
  .login-panel { padding: 1.5rem; }

  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: 1rem; }
  .sidebar-nav { flex-direction: row; flex: none; }
  .main-content { margin-left: 0; padding: 1.2rem; }
}