/* 뷰컷과 같은 디자인 값 (뷰컷 static/style.css 의 :root 에서 가져옴) */
:root {
  --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9;
  --text: #1e293b; --text-muted: #475569; --border: #e2e8f0; --border-strong: #cbd5e1;
  --accent: #4f8ef7; --accent-2: #2563eb; --accent-tint: #eff6ff; --accent-tint-strong: #dbeafe;
  --danger: #dc2626; --danger-tint: #fef2f2; --success: #16a34a; --success-tint: #f0fdf4;
  --warning-tint: #fffbeb; --warning-text: #92400e;
  --radius: 14px; --radius-sm: 8px;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
body {
  margin: 0; font-family: "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px;
  word-break: keep-all; overflow-wrap: break-word;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vmax 58vmax at -8% -12%, rgba(79,142,247,.20), transparent 62%),
    radial-gradient(52vmax 52vmax at 108% 112%, rgba(129,96,245,.14), transparent 62%);
}
main { max-width: 820px; margin: 0 auto; padding: 32px 16px 80px; }

/* 머리 */
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,.5);
}
.brand small { font-weight: 600; color: var(--text-muted); font-size: 13px; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nav a { padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.nav a:hover, .nav a.on { background: var(--accent-tint); color: var(--accent-2); }
.balance { font-size: 13px; color: var(--text-muted); padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }

/* 카드·버튼 */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 4px; font-size: 18px; }
.panel .sub { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); font: inherit; font-weight: 700; padding: 11px 18px; font-size: 15px;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 24px -10px rgba(37,99,235,.55); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-2); }
.btn-big { width: 100%; padding: 16px; font-size: 17px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-naver { background: #03c75a; color: #fff; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-tint-strong); border-color: var(--accent); }
.field-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-muted); margin: 12px 0 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1 1 260px; }
.muted { color: var(--text-muted); font-size: 13.5px; }
.flash { background: var(--warning-tint); color: var(--warning-text); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* 블로그 고르기 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 14px; }
.tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab small { font-weight: 500; opacity: .8; }

/* 세 가지 시작 방법 */
.starts { display: grid; grid-template-columns: 1fr; gap: 14px; }
.step-num { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-2); font-weight: 800; align-items: center; justify-content: center; margin-right: 6px; font-size: 14px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }

/* 작업 목록 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.list .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.badge.ok { background: var(--success-tint); color: var(--success); }
.badge.run { background: var(--accent-tint); color: var(--accent-2); }
.badge.bad { background: var(--danger-tint); color: var(--danger); }
.badge.pub { background: #ecfdf5; color: #047857; }

/* 진행 막대 */
.progress { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 18px 0 10px; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.progress-msg { font-weight: 700; }

/* 결과 */
.copybar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; margin: -6px -6px 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-radius: 14px; border: 1px solid var(--border); }
.copybar .msg { color: var(--success); font-weight: 700; font-size: 14px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.info { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.info b { display: block; font-size: 16px; }
.info span { font-size: 12.5px; color: var(--text-muted); }
.info.hl { background: var(--warning-tint); }
.info.hl b { color: var(--warning-text); }
.preview { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: #fff; }
#body { max-width: 380px; margin: 0 auto; line-height: 1.8; }
#body blockquote { border-left: 4px solid #03c75a; margin: 16px 0; padding: 4px 12px; background: #f6faf7; }
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.imgs a { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.imgs img { width: 100%; height: 120px; object-fit: cover; display: block; }
.imgs span { position: absolute; left: 6px; top: 6px; background: #e03131; color: #fff; font-weight: 800; font-size: 13px; padding: 1px 7px; border-radius: 6px; }
.note { background: var(--accent-tint); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px; }
.note.warn { background: var(--warning-tint); color: var(--warning-text); }
pre.check { white-space: pre-wrap; font-size: 12.5px; background: var(--surface-2); padding: 12px; border-radius: 10px; color: var(--text-muted); }

/* 주제 추천 */
.topic { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; background: #fff; }
.topic .tt { font-weight: 800; font-size: 16px; }
.topic .why { color: var(--text-muted); font-size: 13.5px; margin: 4px 0 10px; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.t th { color: var(--text-muted); font-size: 12.5px; }

.auth-wrap { max-width: 380px; margin: 56px auto 0; }
.bookmarklet { display: inline-block; font-size: 18px; font-weight: 800; padding: 14px 24px; border-radius: 12px; background: #03c75a; color: #fff; cursor: grab; }
@media (max-width: 560px) { .panel { padding: 16px; border-radius: 16px; } .nav a { padding: 6px 9px; } }

/* 단순 화면 */
.simple { padding: 26px; }
.blog-select { width: auto; font-weight: 700; padding: 9px 12px; }
.big-input { font-size: 18px; padding: 16px 18px; border-radius: 12px; }
.result-top { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.result-top .btn { flex: 1 1 140px; padding: 14px; font-size: 16px; }
.paste-box { font-size: 17px; text-align: center; border: 2px dashed var(--accent); background: var(--accent-tint); border-radius: 12px; padding: 34px 12px; color: var(--accent-2); font-weight: 800; cursor: text; outline: none; max-height: 120px; overflow: hidden; }
.paste-box::placeholder { color: var(--accent-2); font-weight: 800; }