:root {
  --navy: #172033;
  --blue: #2563eb;
  --green: #15803d;
  --amber: #a15c00;
  --muted: #687386;
  --line: #e1e6ee;
  --surface: #fff;
  --background: #f4f6f9;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: #1d2738;
  background: var(--background);
  font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
button, a { font: inherit; }
.page { width: min(1180px, calc(100% - 40px)); margin: 38px auto 70px; }
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.eyebrow { margin: 0 0 5px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0 0 7px; font-size: 28px; }
.page-header p:last-child, .card-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.header-actions, .row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d5dce7;
  border-radius: 8px;
  color: #4f5d72;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { border-color: var(--blue); color: #fff; background: var(--blue); }
.button.danger { color: #b42318; }
.notice { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #cfe0ff; border-radius: 9px; color: #315b9f; background: #f4f8ff; font-size: 12px; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.card-heading h2 { margin: 0 0 3px; font-size: 18px; }
.card-heading strong { color: var(--blue); font-size: 13px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 980px; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 14px 15px; border-bottom: 1px solid #edf0f4; text-align: left; font-size: 12px; }
th { color: #758195; background: #fafbfc; font-size: 11px; }
td { color: #4f5c6e; }
.status { display: inline-flex; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.status.published { color: var(--green); background: #ecfdf3; }
.status.reviewed { color: #2458b6; background: #eff6ff; }
.status.draft { color: var(--amber); background: #fff8e7; }
.status.archived { color: #687386; background: #eef1f5; }
.status.review_demo { color: #7c4a03; background: #fff4d8; }
.row-actions .button { min-height: 29px; padding: 5px 8px; font-size: 10px; }
.platform-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.platform-chip { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #3d4d64; background: #edf1f6; font-size: 10px; font-weight: 800; }
.platform-chip.naver { color: #087a47; background: #e9f8f0; }
.platform-chip.meta { color: #2458b6; background: #edf4ff; }
.platform-chip.danggeun { color: #a34c0c; background: #fff2e8; }
.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; font-size: 13px; }
@media (max-width: 700px) {
  .page { width: min(100% - 24px, 1180px); margin-top: 22px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; }
}