@font-face {
  font-family: "SM3 Gyeonchul Myeongjo";
  src: url("./fonts/SM3GyeonchulMyeongjo-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SM3 Sinsin Myeongjo";
  src: url("./fonts/SM3SinsinMyeongjo-02.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times LT Std";
  src: url("./fonts/TimesLTStd-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jibaek";
  src: url("./fonts/Jibaek-120g-beta.otf") format("opentype");
  font-weight: 120;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jibaek";
  src: url("./fonts/Jibaek-260g-beta.otf") format("opentype");
  font-weight: 260;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jibaek";
  src: url("./fonts/Jibaek-400g-beta.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fff;
  --fg: #000;
  --line: #000;
  --muted: #555;
  --accent: #0645ff;
  --note-color: #d11c24;
  --font-ag-choijeongho-screen: "AG Choijeongho Screen", "ag-choijeongho-screen", "Noto Serif KR", "Gowun Batang", "Source Han Serif KR", serif;
  --font-sm3-gyeonchul-myeongjo: "SM3 Gyeonchul Myeongjo", "Gowun Batang", "Source Han Serif KR", serif;
  --font-sm3-sinsin-myeongjo: "SM3 Sinsin Myeongjo", "Gowun Batang", "Source Han Serif KR", serif;
  --font-times-lt-std: "Times LT Std", "Times New Roman", serif;
  --font-jibaek: "Jibaek", "Gowun Batang", "Source Han Serif KR", serif;
  --font-gowun-batang: "Gowun Batang", "Source Han Serif KR", "Noto Serif KR", serif;
  --font-apple-sd-gothic-neo: "Apple SD Gothic Neo", "Source Han Sans KR", "Noto Sans KR", sans-serif;
  --font-latin-mix: "Times New Roman", "Gowun Batang", "Noto Serif KR", serif;
  font-family:
    "Gowun Batang",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Times New Roman",
    serif;
  font-size: 17px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #070707;
  --fg: #f3f3f3;
  --line: #f3f3f3;
  --muted: #b8b8b8;
  --accent: #7aa7ff;
  --note-color: #7aa7ff;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #070707;
    --fg: #f3f3f3;
    --line: #f3f3f3;
    --muted: #b8b8b8;
    --accent: #7aa7ff;
    --note-color: #7aa7ff;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--fg);
}

.index-heading {
  text-decoration: none;
}

button {
  background: var(--bg);
  border: 1px solid var(--line);
  min-height: 22px;
  padding: 1px 6px;
  line-height: 1.12;
  cursor: pointer;
}

input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  background: var(--bg);
}

.site-shell {
  min-height: 100vh;
  padding: 42px 18px;
}

.article {
  width: min(100%, 980px);
  margin: 0 auto;
}

.reader-layout {
  display: block;
  width: 100%;
}

.reader-article {
  width: min(100%, 720px);
  margin: 0 auto;
}

.reader-index,
.admin-index,
.editor__settings {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.reader-index {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 3;
  width: min(190px, calc(100vw - 44px));
  font-size: 0.78rem;
}

.reader-index nav,
.admin-index nav {
  display: block;
}

.reader-index a,
.index-link {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.reader-index a:hover,
.reader-index a.is-selected,
.index-link:hover,
.index-link.is-selected {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.index-link[draggable="true"] {
  cursor: grab;
}

.index-link.is-dragging {
  opacity: 0.35;
}

.index-link.is-pinned::before,
.reader-index a.is-pinned::before,
.index-page__row.is-pinned span::before {
  content: "pin ";
  color: var(--muted);
}

.index-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.editor__note,
.editor__status,
.editor__bar {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 0.5rem;
}

.article__title {
  margin: 0 0 28px;
  font-family:
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    Arial,
    sans-serif;
  font-size: var(--title-size, 44pt);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
}

.article__date {
  display: block;
  margin: -16px 0 28px;
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.article__body {
  display: block;
  --image-gap: 0.55em;
  font-family: var(--font-gowun-batang);
  font-size: var(--body-size, 20pt);
  line-height: var(--body-line-height, 1.85);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  hyphens: auto;
  counter-reset: note-number;
}

.article__body p {
  margin: 0;
  text-indent: var(--paragraph-indent, 0pt);
}

.article__body p[data-first-text-block="true"] {
  text-indent: 0;
}

.article__body p[data-indent="none"] {
  text-indent: 0;
}

.article__body p[data-indent-pt] {
  text-indent: inherit;
}

.article__body p[data-letter-spacing] {
  letter-spacing: inherit;
}

.article__body p[data-font="ag-choijeongho-screen"] {
  font-family: var(--font-ag-choijeongho-screen);
}

.article__body p[data-font="sm3-gyeonchul-myeongjo"] {
  font-family: var(--font-sm3-gyeonchul-myeongjo);
}

.article__body p[data-font="sm3-sinsin-myeongjo"] {
  font-family: var(--font-sm3-sinsin-myeongjo);
}

.article__body p[data-font="times-lt-std"] {
  font-family: var(--font-times-lt-std);
}

.article__body p[data-font="jibaek"] {
  font-family: var(--font-jibaek);
}

.article__body p[data-font="gowun-batang"] {
  font-family: var(--font-gowun-batang);
}

.article__body p[data-font="apple-sd-gothic-neo"] {
  font-family: var(--font-apple-sd-gothic-neo);
}

.article__body p[data-font="times-new-roman"] {
  font-family: var(--font-latin-mix);
}

.article__body p[data-size-pt] {
  font-size: inherit;
}

.article__body p[data-font-weight="120"] {
  font-weight: 120;
}

.article__body p[data-font-weight="260"] {
  font-weight: 260;
}

.article__body p[data-font-weight="400"] {
  font-weight: 400;
}

.article__body p[data-font-weight="700"] {
  font-weight: 700;
}

.article__body p[data-align="left"] {
  text-align: left;
}

.article__body p[data-align="center"] {
  text-align: center;
}

.article__body p[data-align="right"] {
  text-align: right;
}

.article__body p + p {
  margin-top: 0;
}

.article__body p + .article-image {
  margin-top: var(--image-margin-top);
}

.article__body p + .article-image--wrap {
  margin-top: var(--image-margin-top);
}

.article-image + p {
  margin-top: 0;
}

.article__body u {
  text-decoration-thickness: 1px;
  text-decoration-style: solid;
  text-underline-offset: 0.14em;
}

.article__body strong {
  font-weight: 700;
}

.article__body em {
  font-style: italic;
}

.article-image {
  position: relative;
  margin-top: var(--image-margin-top);
  margin-bottom: var(--image-margin-bottom);
  width: var(--image-width, 100%);
  max-width: 100%;
  text-align: var(--image-align, center);
}

.article-image[data-align="left"] {
  margin-right: auto;
  margin-left: var(--image-margin-left);
}

.article-image[data-align="center"] {
  margin-right: auto;
  margin-left: auto;
}

.article-image[data-align="right"] {
  margin-right: var(--image-margin-right);
  margin-left: auto;
}

.article-image img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: var(--image-height, auto);
  object-fit: contain;
  cursor: grab;
}

.article-image figcaption {
  margin-top: 0.08em;
  font-size: 0.72em;
  line-height: 1.3;
  text-align: left;
  color: var(--muted);
  white-space: pre-wrap;
}

.article-image figcaption[data-letter-spacing] {
  letter-spacing: inherit;
}

.article-image figcaption[data-font="ag-choijeongho-screen"] {
  font-family: var(--font-ag-choijeongho-screen);
}

.article-image figcaption[data-font="sm3-gyeonchul-myeongjo"] {
  font-family: var(--font-sm3-gyeonchul-myeongjo);
}

.article-image figcaption[data-font="sm3-sinsin-myeongjo"] {
  font-family: var(--font-sm3-sinsin-myeongjo);
}

.article-image figcaption[data-font="times-lt-std"] {
  font-family: var(--font-times-lt-std);
}

.article-image figcaption[data-font="jibaek"] {
  font-family: var(--font-jibaek);
}

.article-image figcaption[data-font="gowun-batang"] {
  font-family: var(--font-gowun-batang);
}

.article-image figcaption[data-font="apple-sd-gothic-neo"] {
  font-family: var(--font-apple-sd-gothic-neo);
}

.article-image figcaption[data-font="times-new-roman"] {
  font-family: var(--font-latin-mix);
}

.article-image figcaption[data-font-weight="120"] {
  font-weight: 120;
}

.article-image figcaption[data-font-weight="260"] {
  font-weight: 260;
}

.article-image figcaption[data-font-weight="400"] {
  font-weight: 400;
}

.article-image figcaption[data-font-weight="700"] {
  font-weight: 700;
}

.article-image:active img {
  cursor: grabbing;
}

.article-image.is-dragging img {
  opacity: 0.45;
}

.article-image--wrap {
  width: var(--image-width, 42%);
  max-width: 64%;
  shape-outside: margin-box;
}

.article-image--wrap[data-align="left"] {
  float: left;
  clear: left;
  margin: var(--image-margin-top) var(--image-margin-right) var(--image-margin-bottom) var(--image-margin-left);
}

.article-image--wrap[data-align="right"] {
  float: right;
  clear: right;
  margin: var(--image-margin-top) var(--image-margin-right) var(--image-margin-bottom) var(--image-margin-left);
}

.article-image--wrap[data-align="center"] {
  float: none;
  margin: var(--image-margin-top) auto var(--image-margin-bottom);
}

.article-image.is-selected {
  outline: 1px solid var(--accent);
  outline-offset: 6px;
}

.image-resize-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: none;
  width: 14px;
  min-width: 0;
  height: 14px;
  min-height: 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--accent);
  cursor: ew-resize;
}

.article-image.is-selected .image-resize-handle {
  display: block;
}

.image-tools {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 0.5rem;
}

.note-dot {
  position: relative;
  display: inline-flex;
  width: auto;
  min-width: 0.42em;
  height: 0.8em;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 -0.12em 0 0.02em;
  vertical-align: text-top;
  color: var(--note-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.92;
  transform: translate(-0.08em, -0.34em);
}

.note-dot::before {
  counter-increment: note-number;
  font-family: inherit;
  font-size: 0.58em;
  font-weight: 700;
  line-height: 1;
  content: counter(note-number);
}

.note-dot:hover,
.note-dot:focus {
  color: var(--accent);
  background: transparent;
  outline: 0;
}

.note-dot.is-open::after {
  position: absolute;
  left: 50%;
  bottom: 140%;
  z-index: 4;
  width: max-content;
  max-width: min(260px, 70vw);
  padding: 4px 6px;
  color: var(--bg);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: normal;
  white-space: normal;
  text-indent: 0;
  content: attr(data-note);
  background: var(--fg);
  border: 1px solid var(--fg);
  transform: translateX(-50%);
}

.note-dot[data-image].is-open::after {
  display: none;
}

.note-popover {
  position: absolute;
  z-index: 20;
  max-width: min(280px, 72vw);
  padding: 6px;
  color: var(--bg);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: normal;
  background: var(--fg);
  border: 1px solid var(--fg);
}

.note-popover p {
  margin: 6px 0 0;
}

.note-popover img {
  display: block;
  width: var(--note-image-width, 180px);
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.index-page {
  display: flex;
  width: min(100%, 720px);
  min-height: calc(100vh - 84px);
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.index-page__inner {
  width: min(100%, 520px);
}

.index-page h1 {
  margin: 0 0 28px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 1rem;
  font-weight: 400;
}

.index-page nav {
  display: block;
}

.index-page__row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 14px;
  text-decoration: none;
}

.index-page__row:hover,
.index-page__row:focus {
  color: var(--accent);
}

.index-page__row time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
}

.to-top-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  display: inline;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0.58rem;
  color: var(--fg);
  text-decoration: none;
  background: transparent;
  border: 0;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

.to-top-button.is-visible {
  opacity: 0.34;
  pointer-events: auto;
}

.to-top-button:hover,
.to-top-button:focus {
  opacity: 0.8;
}

.top-controls {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  gap: 6px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 0.7rem;
}

.top-controls button {
  min-width: 28px;
  min-height: 24px;
  padding: 1px 5px;
}

.top-controls button.is-active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reader-chrome {
  transition: opacity 140ms ease;
}

.reader-chrome.is-dissolved {
  opacity: 0;
  pointer-events: none;
}

.button-link {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 1px 6px;
  color: var(--fg);
  line-height: 1.12;
  text-decoration: none;
  border: 1px solid var(--line);
}

.editor {
  width: 100%;
}

.admin-shell {
  min-height: 100vh;
  padding: 24px 28px 52px;
}

.admin-root {
  width: 100%;
  margin: 0 auto;
}

.admin-layout {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
}

.admin-index {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 2;
  width: 210px;
  font-size: 0.82rem;
}

.editor {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.editor-side-panel {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 3;
  display: block;
  width: 250px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  font-size: 0.7rem;
  text-align: left;
}

.image-panel {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  text-align: left;
}

.image-panel[hidden] {
  display: none;
}

.image-panel p {
  margin: 0 0 10px;
}

.image-panel label {
  display: block;
  margin-bottom: 10px;
}

.image-panel input,
.image-panel textarea {
  width: 100%;
  padding: 0;
  border: 0;
}

.image-panel textarea {
  min-height: 4.4em;
  resize: vertical;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
}

.image-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.image-panel button {
  min-height: 0;
  padding: 1px 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.image-panel button:hover,
.image-panel button:focus-visible,
.image-panel button.is-active {
  color: var(--accent);
}

.admin-index__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-index__bar button {
  padding: 2px 6px;
}

.empty-state {
  margin: 0;
  font-size: 0.82rem;
}

.admin-index__group {
  margin-bottom: 22px;
}

.admin-index__group p {
  margin: 0 0 8px;
  color: var(--muted);
}

.editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.editor__progress {
  margin-left: auto;
  min-width: 72px;
  text-align: right;
  color: var(--muted);
}

.editor__progress.is-error {
  color: var(--note-color);
}

.editor__settings {
  --editor-label-width: 92px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;
  padding-top: 0;
  border-top: 0;
}

.editor__settings label {
  display: grid;
  grid-template-columns: var(--editor-label-width) minmax(0, 1fr);
  align-items: end;
  column-gap: 8px;
  min-width: 0;
  text-align: left;
}

.editor__settings span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.editor__settings input {
  width: 100%;
  border: 1px solid var(--line);
  padding: 2px 4px;
}

.editor__settings input[name="displayDate"] {
  width: 100%;
}

.editor__settings select {
  width: 100%;
}

.editor__style-actions {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  padding-left: calc(var(--editor-label-width) + 8px);
}

.editor__inline-tools {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 10px;
  padding-top: 0;
  padding-bottom: 2px;
}

.editor-align-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
}

.text-tool {
  min-width: 0;
  min-height: 0;
  padding: 1px 0;
  font-size: inherit;
  line-height: 1.12;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-tool {
  display: inline-flex;
  width: 26px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
}

.tool-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 16px;
  color: currentColor;
}

.tool-icon::before,
.tool-icon::after {
  position: absolute;
  display: block;
  content: "";
}

.tool-icon--underline::before {
  top: 2px;
  left: 5px;
  width: 8px;
  height: 9px;
  border-bottom: 1px solid currentColor;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  content: "U";
}

.tool-icon--bold::before {
  top: 2px;
  left: 5px;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  content: "B";
}

.tool-icon--italic::before {
  top: 2px;
  left: 6px;
  font: italic 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  content: "I";
}

.tool-icon--link::before,
.tool-icon--link::after {
  width: 8px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 5px;
}

.tool-icon--link::before {
  top: 4px;
  left: 2px;
  transform: rotate(-32deg);
}

.tool-icon--link::after {
  right: 2px;
  bottom: 4px;
  transform: rotate(-32deg);
}

.tool-icon--image-note::before {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 12px;
  border: 1px solid currentColor;
}

.tool-icon--image-note::after {
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
}

.tool-icon--note-delete::before {
  top: 1px;
  left: 4px;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  content: "×";
}

.tool-icon--indent-none::before {
  top: 3px;
  right: 1px;
  width: 12px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.tool-icon--indent-none::after {
  top: 6px;
  left: 1px;
  border-top: 3px solid transparent;
  border-right: 5px solid currentColor;
  border-bottom: 3px solid transparent;
}

.tool-icon--align-left::before,
.tool-icon--align-center::before,
.tool-icon--align-right::before {
  top: 2px;
  height: 1px;
  background: currentColor;
}

.tool-icon--align-left::after,
.tool-icon--align-center::after,
.tool-icon--align-right::after {
  top: 7px;
  width: 9px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
}

.tool-icon--align-left::before {
  left: 2px;
  width: 14px;
}

.tool-icon--align-left::after {
  left: 2px;
}

.tool-icon--align-center::before {
  left: 2px;
  width: 14px;
}

.tool-icon--align-center::after {
  left: 5px;
}

.tool-icon--align-right::before {
  right: 2px;
  width: 14px;
}

.tool-icon--align-right::after {
  right: 2px;
}

.text-tool:hover,
.text-tool:focus-visible {
  color: var(--accent);
}

.editor__title,
.editor__content {
  outline: 0;
}

.editor__title:focus,
.editor__content:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.editor__content {
  position: relative;
  min-height: 260px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.image-drop-indicator {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 5;
  display: block;
  height: 0;
  border-top: 1px solid var(--accent);
  pointer-events: none;
}

.editor__content.is-dragging {
  outline: 1px solid var(--accent);
  outline-offset: 8px;
}

.editor__status {
  min-height: 1.2em;
  margin: 0 0 14px;
  color: var(--muted);
}

.editor__llm-log-toggle {
  margin: 0 0 8px;
}

.editor__llm-log[hidden] {
  display: none;
}

.editor__llm-log {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.editor__llm-log-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.editor__llm-log-empty,
.editor__llm-log-item {
  margin: 0 0 6px;
}

.editor__llm-log-item span,
.editor__llm-log-item small {
  display: block;
}

.editor__llm-log-item small {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.editor__llm-log-item.is-error {
  color: var(--note-color);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .site-shell {
    padding-top: 18px;
  }

  .admin-layout {
    width: 100%;
  }

  .top-controls {
    position: static;
    align-self: start;
    justify-content: flex-end;
    margin: 0 0 22px;
  }

  .reader-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
  }

  .reader-index {
    position: static;
    width: 100%;
    margin-bottom: 34px;
  }

  .reader-article {
    grid-column: 1 / -1;
  }

  .admin-index,
  .editor-side-panel {
    position: static;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 28px;
  }

  .admin-index,
  .editor {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1180px) and (min-width: 721px) {
  .admin-layout {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .admin-index {
    left: 18px;
    width: 150px;
  }

  .editor-side-panel {
    right: 18px;
    width: 190px;
  }
}