/* Admin screens — 02-design-system.md §4.13 (form elements) and §5.11 (login, 글쓰기).
   Same tokens as the public site; only the vertical rhythm is halved, because the admin
   screens are a tool rather than a room to walk through. Requires tokens.css + site.css. */

.admin main > * { margin-top: var(--sp-admin-section); }
.admin main > :last-child { margin-bottom: var(--sp-admin-section); }

.admin .container { max-width: 960px; }

.admin .section-label { margin-bottom: var(--sp-4); }

.admin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--sp-4);
}

/* ── AdminInput / AdminSelect §4.13 ──────────────────────── */

.admin-field { margin-bottom: 32px; }

.admin-field label {
  font: var(--w-text) var(--fs-small)/1 var(--sans);
  letter-spacing: 0.16em;
  color: var(--label);
  display: block;
  margin-bottom: 12px;
}

.admin-field input,
.admin-field textarea,
.admin-field select {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line-control);
  padding: 14px 16px;
  font: 400 16px/1.6 var(--sans);
  color: var(--ink);
  border-radius: 0;
}

.admin-field textarea {
  min-height: 340px;
  resize: vertical;
}

/* §5.11 — 본문 미리보기 토글 switches the composer between the two type voices. */
.admin-field textarea.prose {
  font: 400 17px/2.3 var(--serif);
}

.admin-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.admin-field input:focus-visible,
.admin-field textarea:focus-visible,
.admin-field select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.admin-field .hint {
  font: var(--w-text) 15px/1.7 var(--sans);
  color: var(--label);
  margin-top: 8px;
}

.admin-field.error input,
.admin-field.error textarea,
.admin-field.error select { border-color: #8a3f3f; }

/* The only chromatic colour in the palette (§4.13). */
.admin-field .error-msg {
  color: var(--error);
  font: var(--w-text) 15.5px/1.6 var(--sans);
  margin-top: 8px;
}

.admin-field .required {
  color: var(--error);
  margin-left: 4px;
}

.admin-fieldset {
  border: 1px solid var(--line);
  padding: 32px;
  margin-bottom: 32px;
}

.admin-fieldset legend {
  font: var(--w-text) var(--fs-small)/1 var(--sans);
  letter-spacing: 0.16em;
  color: var(--label);
  padding: 0 10px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.admin-button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font: var(--w-text) 15.5px/1 var(--sans);
  letter-spacing: 0.12em;
  padding: 16px 40px;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}

.admin-button:hover { background: #3a352c; border-color: #3a352c; }

.admin-button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-control);
}

.admin-button.secondary:hover { background: transparent; color: var(--link-hover); border-color: currentColor; }

.admin-button[disabled] {
  background: transparent;
  color: var(--label);
  border-color: var(--line-strong);
  cursor: default;
}

.admin-actions {
  display: flex;
  gap: 16px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* ── Login §5.11 ─────────────────────────────────────────── */

.admin-login {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--sp-section) 0;
}

.admin-login .admin-button { width: 100%; }

.admin-login .form-error {
  color: var(--error);
  font: var(--w-text) 15.5px/1.8 var(--sans);
  margin: var(--sp-1) 0;
}

/* ── Post list §5.11 ─────────────────────────────────────── */

/* A tool says "nothing here" in one line and moves on; the 120px room the public
   empty state takes is a gallery gesture. */
.admin .empty-state {
  padding: 48px 0;
  text-align: left;
}

.admin-list { border-bottom: 1px solid var(--line); }

.admin-list .post-list-row { padding: 24px 0; }

/* keep-all is right for Korean prose but a long title overflows a 320px
   viewport, so titles may break mid-word. */
.admin-list .post-list-row .title { font-size: 19px; overflow-wrap: anywhere; }

.admin-list .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/* A post that is saved but not on the public site. */
.admin-list .state {
  font: var(--w-text) 15px/1 var(--sans);
  letter-spacing: 0.1em;
  color: var(--error);
  white-space: nowrap;
}

.admin-list .row-actions {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

/* Same shape as .text-link: the underline belongs to the words, the 44px box around them. */
.admin-list .edit,
.admin-list .linkish {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: var(--w-text) 15px/1 var(--sans);
  letter-spacing: 0.1em;
  color: var(--ink);
  white-space: nowrap;
}

.admin-list .linkish {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.admin-list .edit > span,
.admin-list .linkish > span {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
}

.admin-list .edit:hover,
.admin-list .linkish:hover { color: var(--link-hover); }

.admin-list .edit:hover > span,
.admin-list .linkish:hover > span { border-color: currentColor; }

/* ── Signed-in bar ───────────────────────────────────────── */

.admin-bar {
  border-bottom: 1px solid var(--line);
  font: var(--w-text) 15px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--faded);
}

.admin-bar .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 20px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.admin-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}

.admin-bar a:hover { color: var(--link-hover); }

/* A form control that has to read as a link: destructive rows and 나가기. */
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font: var(--w-text) 15px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

.link-button > span {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
}

.link-button:hover { color: var(--link-hover); }

.link-button:hover > span { border-color: currentColor; }

/* ── Field variants ──────────────────────────────────────── */

.admin-field.narrow input { max-width: 14em; }

.admin-field.checkbox label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: var(--w-text) 16.5px/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 0;
}

.admin-field.checkbox input {
  width: 24px;
  height: 24px;
  padding: 0;
  accent-color: var(--ink);
}

/* Rows of fields that belong to one action — filters, a timeline entry, a transfer. */
.admin-row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}

.admin-row-form .admin-field {
  flex: 1 1 200px;
  margin-bottom: 0;
}

.admin-row-form .admin-field.narrow { flex: 0 0 auto; }

.admin-row-form .admin-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-filter {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: var(--sp-4);
}

.admin-filter .admin-field { margin-bottom: 0; }

.admin-rows { border-top: 1px solid var(--line); }

.admin-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

/* ── Tables ──────────────────────────────────────────────── */

/* `contain: paint` keeps the sideways scroll inside the region; without it the
   document itself drifts right as the table is scrolled. */
.admin-table-wrap { overflow-x: auto; contain: paint; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--w-text) 15.5px/1.6 var(--sans);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  white-space: nowrap;
}

.admin-table th {
  font: var(--w-text) var(--fs-small)/1 var(--sans);
  letter-spacing: 0.16em;
  color: var(--label);
  border-bottom-color: var(--line-strong);
}

.admin-table td.numeric { font-variant-numeric: tabular-nums; }

.admin-table .right { text-align: right; padding-right: 40px; }

.admin-total {
  font: var(--w-text) 16.5px/1.8 var(--sans);
  color: var(--ink-soft);
  margin: var(--sp-4) 0 var(--sp-1);
}

.admin-total strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* The donation ledger is the one screen holding personal data (spec §6). */
.admin-caution {
  font: var(--w-text) 15.5px/1.8 var(--sans);
  color: var(--body);
  border-left: 1px solid var(--line-strong);
  padding-left: 20px;
  margin-bottom: var(--sp-4);
  max-width: var(--measure-body);
}

/* ── 글쓰기 편집기 §5.11 ──────────────────────────────────── */

/* TOAST UI Editor를 이 화면의 입력칸처럼 보이게 맞춘다. 라이브러리가 기본으로 두는
   둥근 모서리와 회색 계열은 §1이 금한 것이라 각지게 되돌리고 우리 색으로 바꾼다.
   토큰만 덮어쓰고 구조는 건드리지 않는다 — 라이브러리를 갈아 끼울 때 여기만 본다. */
.editor-surface .toastui-editor-defaultUI {
  border: 1px solid var(--line-control);
  border-radius: 0;
  font-family: var(--sans);
}

.editor-surface .toastui-editor-toolbar,
.editor-surface .toastui-editor-defaultUI-toolbar {
  background: var(--field-bg);
  border-bottom: 1px solid var(--line-control);
  border-radius: 0;
}

/* 그림 대신 글자. 이 화면의 다른 단추가 모두 글자이기도 하지만, 무엇보다 읽는 분들이
   어르신이다(§14.23) — 'B'와 '66'이 무엇인지 짐작하게 두지 않는다. 라이브러리가 붙이는
   class 이름으로 글을 대응시킨다. 목록에 없는 단추가 생기면 그림 그대로 남는다. */
.editor-surface .toastui-editor-toolbar-icons {
  width: auto;
  height: auto;
  margin: 0 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 0;
  background-image: none;
  font: var(--w-text) 15px/1 var(--sans);
  color: var(--ink);
}

.editor-surface .toastui-editor-toolbar-icons:hover {
  background: transparent;
  border-color: var(--line-control);
}

.editor-surface .toastui-editor-toolbar-icons.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.editor-surface .toastui-editor-toolbar-icons.heading::after { content: "제목"; }
.editor-surface .toastui-editor-toolbar-icons.bold::after { content: "굵게"; }
.editor-surface .toastui-editor-toolbar-icons.italic::after { content: "기울임"; }
.editor-surface .toastui-editor-toolbar-icons.bullet-list::after { content: "글머리표"; }
.editor-surface .toastui-editor-toolbar-icons.ordered-list::after { content: "번호 목록"; }
.editor-surface .toastui-editor-toolbar-icons.quote::after { content: "인용"; }
.editor-surface .toastui-editor-toolbar-icons.link::after { content: "링크"; }
.editor-surface .toastui-editor-toolbar-icons.table::after { content: "표"; }
.editor-surface .toastui-editor-toolbar-icons.more::after { content: "더 보기"; }

.editor-surface .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-divider {
  background: var(--line);
}

/* 본문 면 — 사이트의 조판이 아니라 글의 짜임이 보이면 된다. 편집기는 도구다. */
.editor-surface .toastui-editor-contents {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink);
}

.editor-surface .toastui-editor-contents p { margin: 0 0 1.2em; }
.editor-surface .toastui-editor-contents h1,
.editor-surface .toastui-editor-contents h2 { font: 700 22px/1.6 var(--sans); border: 0; }
.editor-surface .toastui-editor-contents h3,
.editor-surface .toastui-editor-contents h4 { font: 700 18px/1.6 var(--sans); }
.editor-surface .toastui-editor-contents blockquote {
  border-left: 2px solid var(--line-strong);
  color: var(--body);
}
.editor-surface .toastui-editor-contents a { color: var(--ink); }

/* 사진을 커서 자리에 넣는 단추. 자바스크립트가 켜져야 쓸 수 있어 기본은 숨어 있다. */
.admin-asset [data-insert-image] {
  display: block;
  margin-top: 16px;
  padding: 12px 20px;
  width: 100%;
}

/* ── Images on the post form ─────────────────────────────── */

.admin-asset {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.admin-asset img { align-self: start; }

.admin-asset .admin-danger { grid-column: 2; }

.admin-upload {
  border-top: 1px solid var(--line-strong);
  padding-top: 32px;
  margin-top: 32px;
}

/* ── Destructive actions ─────────────────────────────────── */

/* Folded away so a delete needs a deliberate second move — no JS confirm. */
/* 16px + the summary's own 8px of extra padding is the 24px gap this used to have. */
.admin-danger { margin-top: 16px; }

.admin-danger summary {
  font: var(--w-text) 15px/1 var(--sans);
  letter-spacing: 0.1em;
  color: var(--label);
  cursor: pointer;
  padding: 16px 0;
  width: fit-content;
}

.admin-danger summary:hover { color: var(--error); }

.admin-danger[open] summary { color: var(--error); }

.admin-danger .hint { margin: 12px 0 16px; }

@media (max-width: 719px) {
  .admin-head { display: block; }

  .admin-head .admin-button { margin-top: var(--sp-1); }

  .admin-actions { display: block; }

  .admin-actions .admin-button { display: block; width: 100%; margin-bottom: 12px; }

  .admin-login { padding: var(--sp-section) 0; }

  .admin-row-form { display: block; }

  .admin-row-form .admin-field { margin-bottom: 20px; }

  .admin-filter { display: block; }

  .admin-filter .admin-field { margin-bottom: 20px; }

  .admin-field.narrow input { max-width: none; }

  .admin-asset { display: block; }

  .admin-asset img { margin-bottom: 24px; }

  .admin-table th,
  .admin-table td { padding-right: 16px; }
}