/* tistory-pipeline 웹 UI — 모바일 우선, 라이트/다크 자동 */
:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --muted:#636c76; --line:#d9dee4; --accent:#1f6feb; --accent-fg:#fff; --ok:#1a7f37; --bad:#cf222e; --warn:#9a6700; --chip:#eef1f5; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1116; --card:#161b22; --fg:#e6edf3; --muted:#8b949e; --line:#30363d; --accent:#58a6ff; --accent-fg:#0e1116; --ok:#3fb950; --bad:#f85149; --warn:#d29922; --chip:#21262d; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif; line-height:1.55; font-size:16px; }
a { color: var(--accent); text-decoration: none; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.row { display:flex; align-items:center; gap:8px; }
.row.between { justify-content: space-between; }
.row.gap { gap: 8px; flex-wrap: wrap; }
.wrap-row { flex-wrap: wrap; }
.stack { display:flex; flex-direction:column; gap:10px; }
.inline { display:inline; }
header.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header.top .wrap { justify-content: space-between; min-height: 48px; }
.brand { font-weight: 700; color: var(--fg); }
.status-pill { font-size: 13px; color: var(--muted); display:flex; align-items:center; gap:6px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--line); display:inline-block; }
.dot.on { background: var(--ok); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
nav.tabs { background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
nav.tabs .wrap { display:flex; gap:4px; padding: 0 8px; }
nav.tabs a { color: var(--muted); padding: 12px 10px; min-height: 44px; display:inline-flex; align-items:center; white-space: nowrap; border-bottom: 2px solid transparent; font-size: 15px; }
nav.tabs a.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.badge { background: var(--accent); color: var(--accent-fg); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
main { padding: 16px 0 40px; }
h1 { font-size: 22px; margin: 8px 0 12px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.card.bad-border { border-color: var(--bad); }
.link-card { display:flex; flex-direction:column; gap:4px; color: var(--fg); }
.link-card:active { background: var(--chip); }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--card); border:1px solid var(--line); border-radius:12px; padding: 12px 8px; text-align:center; color: var(--fg); display:flex; flex-direction:column; min-height: 64px; justify-content:center; }
.tile b { font-size: 22px; }
.tile span { font-size: 12px; color: var(--muted); }
.chips { display:flex; gap:6px; overflow-x:auto; padding: 4px 0 8px; }
.chip { display:inline-block; background: var(--chip); color: var(--fg); border-radius: 14px; padding: 4px 10px; font-size: 13px; white-space: nowrap; min-height: 28px; }
.chip.on { background: var(--accent); color: var(--accent-fg); }
.chip.running { background: var(--ok); color: #fff; }
.chip.error { background: var(--bad); color: #fff; }
.chip.queued { background: var(--warn); color: #fff; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin: 6px 0; }
.note { background: var(--chip); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 15px; cursor:pointer; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
button.link { background:none; border:none; color: var(--accent); padding: 8px; min-height: 44px; cursor:pointer; font-size: 15px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0; }
input, textarea, select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); min-height: 44px; }
textarea { min-height: 72px; resize: vertical; }
label { display:flex; flex-direction:column; gap:4px; font-size: 14px; color: var(--muted); }
.flash { border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.flash.ok { background: color-mix(in srgb, var(--ok) 15%, var(--card)); color: var(--ok); }
.flash.bad { background: color-mix(in srgb, var(--bad) 15%, var(--card)); color: var(--bad); }
.flash.warn { background: color-mix(in srgb, var(--warn) 15%, var(--card)); color: var(--warn); }
.tbl { width:100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow:hidden; font-size: 14px; }
.tbl th, .tbl td { text-align:left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; }
.pre { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, monospace; font-size: 12px; max-height: 60vh; overflow:auto; }
.preview { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.prose img { max-width: 100%; }
.prose table { border-collapse: collapse; } .prose td, .prose th { border: 1px solid var(--line); padding: 4px 8px; }
footer.foot { color: var(--muted); font-size: 12px; padding: 16px; display:flex; justify-content:space-between; align-items:center; }
details summary { cursor: pointer; min-height: 32px; display:flex; align-items:center; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(6, 1fr); } h1 { font-size: 26px; } }

/* 초안 생성 진행 바 (헤더 아래 전역 · 작업 목록 · 아이디어 카드) */
.pbar-wrap { background: var(--card); border-bottom: 1px solid var(--line); padding: 6px 16px 8px; }
.pbar { height: 8px; background: var(--chip); border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.pbar.mini { height: 6px; width: 120px; display: inline-block; margin: 2px 0 0; vertical-align: middle; }
.pbar-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.pbar-text { color: var(--muted); }