/* dbyoo flaskblog style.css
 * Version: v0.2.0-pagination-only
 * Changes from v0.1.0:
 * - Added archive pagination styles (.pager, .pager-btn, .pager-mid)
 * Note:
 * - No title truncation, no z-index/overlay fixes (keeps initial behavior)
 */

:root{
  --bg:#0b0d10;
  --fg:#e9eef5;
  --muted:#9aa7b5;
  --line:#1e2630;
  --link:#87b7ff;
  --max: 860px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.75;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.topbar{
  position: sticky;
  top: 0;
  background: rgba(11,13,16,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--fg);
}

.nav{
  display:flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 14px;
}
.nav a{ color: var(--muted); }
.nav a:hover{ color: var(--fg); }

.section{ padding: 22px 0 40px; }
.h1{
  font-family: var(--mono);
  font-size: 26px;
  margin: 14px 0 8px;
}
.h2{
  font-family: var(--mono);
  font-size: 18px;
  margin: 0 0 6px;
}

.meta{
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 14px;
}

.post-item{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.summary{ color: var(--muted); margin: 0; }

.article{ padding: 22px 0 60px; }

.content{
  font-size: 16px;
}
.content p{ margin: 0 0 16px; }

.content pre{
  border: 1px solid var(--line);
  padding: 14px;
  overflow: auto;
  background: #0e1217;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
.content code{
  font-family: var(--mono);
  font-size: 0.95em;
}
.content blockquote{
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.content table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}
.content th, .content td{
  border: 1px solid var(--line);
  padding: 10px;
}
.content th{ text-align:left; }

.archive{
  list-style: none;
  padding: 0;
  margin: 0;
}
.archive li{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display:flex;
  gap: 14px;
}
.archive .date{
  min-width: 92px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}
.muted{ color: var(--muted); }

/* ---- Added in v0.2.0-pagination-only ---- */
/* Archive pagination */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 0 0;
}
.pager-btn{
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
}
.pager-btn.disabled{
  opacity: .4;
  cursor: not-allowed;
}
.pager-mid{
  font-family: var(--mono);
  font-size: 13px;
}