:root {
  --font-family: sans-serif;
  --font-base: 18px;
  --font-title: 1.4em;
  --font-menu: 1em;
  --font-text: 1em;
  --font-form: 1em;
  --font-button: 1em;
  --font-image: 1em;
  --font-map: 1em;
  --font-video: 1em;
  --font-footer: 0.8em;
  --font-weight-base: 400;
  --font-weight-title: 700;
  --font-weight-menu: 400;
  --font-weight-text: 400;
  --font-weight-form: 400;
  --font-weight-button: 400;
  --font-weight-image: 400;
  --font-weight-map: 400;
  --font-weight-video: 400;
  --font-weight-footer: 400;
  --font-color-base: #1a1a1a;
  --font-color-title: #1a1a1a;
  --font-color-menu: #1a1a1a;
  --font-color-text: #1a1a1a;
  --font-color-form: #1a1a1a;
  --font-color-button: #1a1a1a;
  --font-color-image: #1a1a1a;
  --font-color-map: #1a1a1a;
  --font-color-video: #1a1a1a;
  --font-color-footer: #1a1a1a;
  --font-link-color-base: #1d4f91;
  --font-link-color-title: #1d4f91;
  --font-link-color-menu: #1a1a1a;
  --font-link-color-text: #1d4f91;
  --font-link-color-form: #1d4f91;
  --font-link-color-button: #1d4f91;
  --font-link-color-image: #1d4f91;
  --font-link-color-map: #1d4f91;
  --font-link-color-video: #1d4f91;
  --font-link-color-footer: #1d4f91;
  --font-link-underline-base: underline;
  --font-link-underline-title: underline;
  --font-link-underline-menu: underline;
  --font-link-underline-text: underline;
  --font-link-underline-form: underline;
  --font-link-underline-button: underline;
  --font-link-underline-image: underline;
  --font-link-underline-map: underline;
  --font-link-underline-video: underline;
  --font-link-underline-footer: underline;
  --font-line-height: 1.6;
}

html { font-size: var(--font-base); }
body { margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-base); line-height: var(--font-line-height); background: #fff; color: var(--font-color-base); }
header, main, .site-footer { padding: 16px; }
.site-header { display: flex; align-items: center; justify-content: var(--header-justify, flex-start); gap: var(--header-gap, 16px); flex-wrap: wrap; }
.site-header .header-content { flex: 0 0 auto; min-width: 0; }
.site-header .header-content .doc-public { margin: 0; padding: 0; }
.site-header .header-content .doc-public p { margin: 0; font-weight: 700; }
.site-header .header-content img { display: block; max-width: none; max-height: none; }
.site-header .menu { flex: 0 0 auto; margin-left: 0; }
.site-header.header-above { flex-direction: column; align-items: var(--header-justify, flex-start); justify-content: flex-start; }
.site-header.header-above .menu { width: auto; align-self: auto; }
.site-footer:empty { display: none; }

h1,
.page-title { font-size: var(--font-title); font-weight: var(--font-weight-title); line-height: var(--font-line-height); color: var(--font-color-title); margin: 0 0 12px; }
h2 { font-size: 1.15em; margin: 24px 0 12px; }
.menu { font-size: var(--font-menu); font-weight: var(--font-weight-menu); color: var(--font-color-menu); }
.content-text { font-size: var(--font-text); font-weight: var(--font-weight-text); line-height: var(--font-line-height); color: var(--font-color-text); }
.content-form { font-size: var(--font-form); font-weight: var(--font-weight-form); color: var(--font-color-form); }
.content-button { font-size: var(--font-button); font-weight: var(--font-weight-button); color: var(--font-color-button); }
.craft-button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
  padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 28px);
  border: none;
  border-radius: var(--btn-radius, 4px);
  justify-content: var(--btn-justify, center);
  background: var(--btn, #1578f9);
  color: var(--btn-ink, #fff);
  font-family: var(--btn-family, inherit);
  font-size: var(--btn-font, 15px);
  font-weight: var(--btn-weight, 400);
  font-style: var(--btn-style, normal);
  line-height: 1.2;
  text-align: var(--btn-align, center);
  text-decoration: var(--btn-line, none);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.craft-button.hover-shadow:hover,
.doc-page .content-button a.craft-button.hover-shadow:hover,
.doc-public .content-button a.craft-button.hover-shadow:hover,
.doc-page .doc-widget.craft-button.hover-shadow:hover {
  box-shadow: 0 calc(var(--btn-shadow, 16) * 0.35px) calc(var(--btn-shadow, 16) * 1px) color-mix(in srgb, var(--btn-shadow-color, #1a1a1a) 50%, transparent);
}
.craft-button.hover-invert:hover,
.doc-page .content-button a.craft-button.hover-invert:hover,
.doc-public .content-button a.craft-button.hover-invert:hover,
.doc-page .doc-widget.craft-button.hover-invert:hover {
  background: var(--btn-ink, #fff);
  color: var(--btn-invert, var(--btn, #1578f9));
}
.craft-button.hover-shift:hover,
.doc-page .content-button a.craft-button.hover-shift:hover,
.doc-public .content-button a.craft-button.hover-shift:hover,
.doc-page .doc-widget.craft-button.hover-shift:hover {
  transform: translateY(calc(var(--btn-shift, 2) * -1px));
}
.doc-page .content-button a.craft-button,
.doc-public .content-button a.craft-button,
.doc-page .doc-widget.craft-button {
  display: inline-flex;
  box-sizing: border-box;
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
  margin: 4px 0;
  padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 28px);
  border: none;
  border-radius: var(--btn-radius, 4px);
  justify-content: var(--btn-justify, center);
  background: var(--btn, #1578f9);
  color: var(--btn-ink, #fff);
  font-family: var(--btn-family, inherit);
  font-size: var(--btn-font, 15px);
  font-weight: var(--btn-weight, 400);
  font-style: var(--btn-style, normal);
  line-height: 1.2;
  text-align: var(--btn-align, center);
  text-decoration: var(--btn-line, none);
}
.content-image { font-size: var(--font-image); font-weight: var(--font-weight-image); color: var(--font-color-image); }
.content-map { font-size: var(--font-map); font-weight: var(--font-weight-map); color: var(--font-color-map); }
.content-video { font-size: var(--font-video); font-weight: var(--font-weight-video); color: var(--font-color-video); }
.site-footer { font-size: var(--font-footer); font-weight: var(--font-weight-footer); color: var(--font-color-footer); }
a { color: var(--font-link-color-base); text-decoration: var(--font-link-underline-base); }
h1 a,
.page-title a { color: var(--font-link-color-title); text-decoration: var(--font-link-underline-title); }
.menu a { color: var(--font-link-color-menu); text-decoration: var(--font-link-underline-menu); }
.content-text a { color: var(--font-link-color-text); text-decoration: var(--font-link-underline-text); }
.content-form a { color: var(--font-link-color-form); text-decoration: var(--font-link-underline-form); }
.content-button a { color: var(--font-link-color-button); text-decoration: var(--font-link-underline-button); display: inline-block; padding: 10px 16px; border: 1px solid currentColor; border-radius: 6px; }
.content-image a { color: var(--font-link-color-image); text-decoration: var(--font-link-underline-image); }
.content-map a { color: var(--font-link-color-map); text-decoration: var(--font-link-underline-map); }
.content-video a { color: var(--font-link-color-video); text-decoration: var(--font-link-underline-video); }
.site-footer a { color: var(--font-link-color-footer); text-decoration: var(--font-link-underline-footer); }
.visit-offer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 20;
  box-sizing: border-box;
  max-width: 36rem;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.5;
}
.visit-offer p { margin: 0 0 10px; }
.visit-actions { display: flex; gap: 8px; }
.visit-actions button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-size: 14px;
}
.visit-actions button:hover { background: #e5e5e5; }
.visit-offer #visit-status:empty { display: none; }
.site-footer .doc-public { max-width: none; margin: 0 0 12px; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.site-footer .doc-public a { color: var(--font-link-color-footer); text-decoration: var(--font-link-underline-footer); }
.editor-footer, .editor-header { min-height: 0; }
.editor-footer form#doc-save, .editor-header form#doc-save { flex: 0 0 auto; }
.editor-footer .doc-page { flex: 0 1 auto; min-height: 7.5rem; max-height: 16rem; font-size: var(--font-footer); font-weight: var(--font-weight-footer); color: var(--font-color-footer); }
.editor-header .doc-page { flex: 0 0 auto; width: auto; min-width: 0; min-height: 0; max-height: none; overflow: visible; }
.header-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; padding: 0; border: 0; }
.header-place legend { padding: 0; font-size: 13px; }
.header-place label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; }
.header-place input[type="number"] { width: 4.2rem; height: 26px; margin: 0; padding: 0 6px; }
.header-align { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; }
.header-canvas { display: flex; align-items: center; justify-content: var(--header-justify, flex-start); gap: var(--header-gap, 16px); flex-wrap: nowrap; box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 16px; border: 1px solid #bbb; border-radius: 6px; background: #fff; overflow-x: auto; }
.header-canvas.header-above { flex-direction: column; align-items: var(--header-justify, flex-start); justify-content: flex-start; overflow-x: visible; }
.editor-header .header-canvas .doc-page { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; min-height: 0; max-height: none; overflow: visible; border: 0; border-radius: 0; }
.header-canvas .doc-page img,
.site-header .header-content img { max-width: none; max-height: none; }
.header-canvas .header-menu { flex: 0 0 auto; margin-left: 0; }
.header-canvas.header-above .header-menu { width: auto; align-self: auto; }
.editor-top .doc-link { display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; padding: 0 12px; border: 1px solid #8d8d8d; border-radius: 3px; background: #f3f3f3; color: #1a1a1a; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-decoration: none; }
.editor-top .doc-link:hover { background: #e5e5e5; }
.doc-page .page-body,
.doc-public .page-body { font-size: var(--font-base); font-weight: var(--font-weight-base); color: var(--font-color-base); }
.doc-page .page-title,
.doc-public .page-title { margin: 0; }
.doc-page > h1.page-title {
  font-size: var(--font-title);
  font-weight: var(--font-weight-title);
  line-height: var(--font-line-height);
  color: var(--font-color-title);
  margin: 0 0 12px;
}
.doc-page .site-footer,
.doc-public .site-footer { padding: 0; }
.doc-page .page-body a,
.doc-public .page-body a { color: var(--font-link-color-base); text-decoration: var(--font-link-underline-base); }
.doc-page .page-title a,
.doc-public .page-title a { color: var(--font-link-color-title); text-decoration: var(--font-link-underline-title); }
.doc-page .menu a,
.doc-public .menu a { color: var(--font-link-color-menu); text-decoration: var(--font-link-underline-menu); }
.doc-page .content-text a,
.doc-public .content-text a { color: var(--font-link-color-text); text-decoration: var(--font-link-underline-text); }
.doc-page .content-form a,
.doc-public .content-form a { color: var(--font-link-color-form); text-decoration: var(--font-link-underline-form); }
.doc-page .content-button a,
.doc-public .content-button a { color: var(--font-link-color-button); text-decoration: var(--font-link-underline-button); }
.doc-page .content-image a,
.doc-public .content-image a { color: var(--font-link-color-image); text-decoration: var(--font-link-underline-image); }
.doc-page .content-map a,
.doc-public .content-map a { color: var(--font-link-color-map); text-decoration: var(--font-link-underline-map); }
.doc-page .content-video a,
.doc-public .content-video a { color: var(--font-link-color-video); text-decoration: var(--font-link-underline-video); }
.doc-page .site-footer a,
.doc-public .site-footer a { color: var(--font-link-color-footer); text-decoration: var(--font-link-underline-footer); }
.admin-home a, .back { color: #1d4f91; text-decoration: none; }

form { display: grid; gap: 12px; max-width: 32rem; }
label { display: grid; gap: 4px; }
input, select { font: inherit; padding: 10px; border: 1px solid #bbb; border-radius: 6px; }
.font-form { max-width: 64rem; gap: 10px; }
.font-family-field { max-width: 16rem; }
.font-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.font-card { display: grid; gap: 6px; min-width: 0; padding: 8px 10px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
.font-card h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.font-form label,
.class-form label { gap: 4px; font-size: 13px; color: #1a1a1a; }
.font-card label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.font-card .font-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; }
.font-card .font-line label { width: auto; flex: 0 0 auto; justify-content: flex-start; gap: 4px; white-space: nowrap; }
.font-form input,
.font-form select,
.class-form input,
.class-form select,
.class-list button,
.font-form button,
.class-form button {
  box-sizing: border-box;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
.font-form > button,
.class-form > button,
.class-list button { width: auto; padding: 0 12px; border-color: #8d8d8d; background: #f3f3f3; color: #1a1a1a; justify-self: start; }
.font-form .size-field,
.class-form .size-field { box-sizing: border-box; display: inline-flex; align-items: stretch; flex: 0 0 auto; height: 26px; border: 1px solid #8d8d8d; border-radius: 3px; background: #fff; overflow: hidden; }
.font-form .size-field input,
.class-form .size-field input { width: 3.2rem; height: auto; border: 0; border-radius: 0; background: transparent; padding: 0 4px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.font-card .size-field input { width: 2.2rem; }
.font-form .size-field input::-webkit-outer-spin-button,
.font-form .size-field input::-webkit-inner-spin-button,
.class-form .size-field input::-webkit-outer-spin-button,
.class-form .size-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.font-form .size-field .spin,
.class-form .size-field .spin { display: flex; flex-direction: column; width: 14px; border-left: 1px solid #e6e6e6; }
.font-form .size-field .step,
.class-form .size-field .step { flex: 1 1 0; width: 14px; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #f7f7f7; line-height: 0; }
.font-form .size-field .step-up,
.class-form .size-field .step-up { border-bottom: 1px solid #e6e6e6; }
.font-form .size-field .step::before,
.class-form .size-field .step::before { content: ""; display: block; width: 0; height: 0; margin: 0 auto; border-left: 3px solid transparent; border-right: 3px solid transparent; }
.font-form .size-field .step-up::before,
.class-form .size-field .step-up::before { border-bottom: 4px solid #555; }
.font-form .size-field .step-down::before,
.class-form .size-field .step-down::before { border-top: 4px solid #555; }
.font-form .size-field .step:hover,
.class-form .size-field .step:hover { background: #eef2f6; }
.weight-field,
.font-family-field select,
.class-form select { width: 7.5rem; }
.font-card .weight-field { width: auto; field-sizing: content; padding: 0 2px 0 6px; }
.font-card .color-field,
.class-form .color-field { width: 26px; height: 26px; flex: 0 0 26px; padding: 1px; }
.font-card .check-field { flex-direction: row-reverse; }
.font-card .check-field input { width: 16px; height: 16px; flex: 0 0 16px; padding: 0; }
.class-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; max-width: 64rem; }
.class-form label { min-width: 7.5rem; }
.class-form input[name="name"] { width: 8rem; }
main:has(.font-form) { font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; color: #1a1a1a; }
main:has(.font-form) h2 { margin: 16px 0 8px; font-size: 13px; font-weight: 600; }
main:has(.font-form) label,
main:has(.font-form) form p { font-size: 13px; color: #1a1a1a; }
main:has(.font-form) form p { margin: 0; }
main:has(.font-form) .font-preview { font-size: var(--font-base); }
main:has(.font-form) .class-list { gap: 8px; }
main:has(.font-form) .class-list li { font-size: var(--font-base); }
main:has(.font-form) .class-list strong,
main:has(.font-form) .class-list li > span:not([class]) { font-size: 13px; }
main:has(.font-form) > .back,
main:has(.font-form) button:not(.step) {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  min-width: 52px;
  height: 26px;
  margin: 0 0 8px;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  justify-self: start;
}
main:has(.font-form) > .back:hover,
main:has(.font-form) button:not(.step):hover { background: #e5e5e5; }
main:has(.font-form) input,
main:has(.font-form) select {
  box-sizing: border-box;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.text-editor { min-height: 16rem; border: 1px solid #bbb; border-radius: 6px; padding: 12px; background: #fff; }
.class-list { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 32rem; }
.class-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.class-list form { display: inline; }
button { font: inherit; padding: 12px; border: 0; border-radius: 6px; background: #1d4f91; color: #fff; }
.error { color: #9b1c1c; }
.check-field { display: flex; align-items: center; gap: 6px; }
.check-field input { width: 1.1rem; height: 1.1rem; padding: 0; }
.page-content { min-height: 40vh; display: grid; gap: 16px; align-content: start; }
.content-image { margin: 0; }
.content-image img { display: block; max-width: 100%; height: auto; }
.content-form { display: grid; gap: 12px; max-width: 32rem; }
.content-form input { box-sizing: border-box; width: 100%; }
.content-map summary.craft-button { list-style: none; cursor: pointer; }
.content-map summary.craft-button::-webkit-details-marker { display: none; }
.content-map summary.craft-button::marker { content: ""; }
.content-map.map-inline { display: inline; }
.content-map.map-inline .map-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.content-map.map-inline label.craft-button { vertical-align: middle; }
.content-map.map-inline .map-frame { display: none; }
.content-map.map-inline .map-toggle:checked ~ .map-frame { display: block; }
.content-map iframe { display: block; margin-top: 8px; }
.content-map iframe,
.content-video iframe,
.content-video video { max-width: 100%; border: 0; }
.block-list { display: grid; gap: 16px; max-width: 48rem; }
.block-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid #d7d7d7; border-radius: 8px; background: #f6f7f9; }
.block-card h2 { margin: 0; font-size: 1em; }
.block-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.block-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.block-tools form,
.class-list form { display: inline; }
.block-card .text-editor { min-height: 8rem; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.add-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.field-list { display: grid; gap: 8px; }
.form-field-row { display: grid; gap: 8px; padding: 8px; border-radius: 6px; background: #fff; }
.image-open { padding: 0; background: transparent; }
.image-open img { display: block; max-width: 100%; height: auto; }
.quiet { background: #fff; color: #1d4f91; border: 1px solid #1d4f91; }
.add-form[hidden],
.block-settings[hidden],
.insert-panel[hidden],
.insert-panel [hidden] { display: none !important; }
.doc-toolbar { position: sticky; top: 0; z-index: 4; display: grid; gap: 2px; width: 100%; max-width: none; padding: 4px 6px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.tool-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 2px 6px 2px 0; margin-right: 4px; border-right: 1px solid #ececec; }
.tool-row .tool-group:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.doc-toolbar button,
.doc-toolbar select,
.doc-toolbar input[type="number"] { box-sizing: border-box; height: 30px; margin: 0; padding: 0 8px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 28px; }
.doc-toolbar button:hover { background: #f5f7fa; border-color: #cfcfcf; }
.doc-toolbar button[form="doc-save"] { border-color: #1d4f91; background: #1d4f91; color: #fff; }
.doc-toolbar button[form="doc-save"]:hover { border-color: #163e73; background: #163e73; }
.doc-toolbar select,
.doc-toolbar input[type="number"] { width: 4.2rem; }
.doc-toolbar #font-class,
.doc-toolbar #font-family,
.doc-toolbar #font-size { width: auto; min-width: 4.2rem; field-sizing: content; }
.doc-toolbar .mark-button,
.doc-toolbar .align-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; }
.doc-toolbar .mark-button[aria-pressed="true"],
.doc-toolbar .align-button[aria-pressed="true"] { border-color: #03c75a; color: #03c75a; }
#apply-bold { font-weight: 800; }
#apply-italic { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
#apply-underline { text-decoration: underline; }
.doc-toolbar .mark-button.open,
.doc-toolbar .mark-button[aria-pressed="true"] { border-color: #03c75a; color: #03c75a; }
.tool-pop { position: relative; }
.drop-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; display: grid; min-width: 7.2rem; padding: 4px 0; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.drop-menu[hidden] { display: none !important; }
.doc-toolbar .drop-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 32px; text-align: left; }
.doc-toolbar .drop-menu button:hover { background: #f6f6f6; }
.doc-toolbar .drop-menu button[aria-pressed="true"] { color: #03c75a; }
.doc-toolbar .drop-menu button[aria-pressed="true"]::after { content: "✓"; margin-left: 16px; }
.doc-toolbar .list-menu { min-width: 0; padding: 4px; }
.doc-toolbar .list-menu button { justify-content: center; width: 36px; height: 32px; padding: 0; }
.doc-toolbar .list-menu button[aria-pressed="true"]::after { content: none; }
#line-gap-custom { width: 100%; margin: 0; border: 0; border-top: 1px solid #eee; border-radius: 0; }
.doc-toolbar #para-gap,
.doc-toolbar #page-margin { width: 3.4rem; }
.doc-toolbar label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: #555; }
.doc-toolbar input[type="color"] { box-sizing: border-box; width: 32px; height: 32px; padding: 2px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; }
.doc-page blockquote, .doc-public blockquote { margin: 0.6em 0; padding: 8px 14px; border-left: 3px solid #1d4f91; background: #f7f8fa; }
.quote-panel { display: grid; max-width: 48rem; margin: 8px 0; padding: 8px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
.quote-panel[hidden] { display: none !important; }
.symbol-panel { position: relative; max-width: 28rem; margin: 8px 0; padding: 8px 12px 12px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.symbol-panel[hidden] { display: none !important; }
.symbol-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.symbol-kind { position: relative; }
.symbol-panel .symbol-kind > button,
.symbol-panel #symbol-close { height: 32px; margin: 0; border: 0; background: #fff; color: #222; }
.symbol-panel .symbol-kind > button { padding: 0 4px; font-size: 15px; font-weight: 700; }
.symbol-panel .symbol-kind > button::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #222; vertical-align: middle; }
.symbol-panel #symbol-close { width: 32px; padding: 0; color: #888; font-size: 20px; line-height: 32px; }
.symbol-panel .drop-menu { min-width: 9rem; }
.symbol-panel .drop-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 32px; text-align: left; }
.symbol-panel .drop-menu button:hover { background: #f6f6f6; }
.symbol-panel .drop-menu button[aria-pressed="true"] { color: #03c75a; }
.symbol-panel .drop-menu button[aria-pressed="true"]::after { content: "✓"; margin-left: 16px; }
.symbol-grid { display: grid; grid-template-columns: repeat(10, 2.05rem); max-height: 18.5rem; overflow: auto; border-top: 1px solid #eee; align-content: start; }
.symbol-panel .symbol-char { box-sizing: border-box; width: 2.05rem; height: 2.05rem; margin: 0; padding: 0; border: 1px solid #f2f2f2; border-radius: 0; background: #fff; color: #222; font-size: 15px; line-height: 1; }
.symbol-panel .symbol-char:hover { background: #f7f7f7; }
.symbol-preview { position: absolute; z-index: 4; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid #e6e6e6; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); color: #222; font-size: 28px; pointer-events: none; }
.symbol-preview[hidden] { display: none !important; }
#symbol-toggle { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.quote-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.quote-choices button { box-sizing: border-box; width: 7.4rem; height: 5.2rem; margin: 0; padding: 8px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; color: #666; font-size: 12px; font-weight: 500; line-height: 1.3; }
.quote-choices button:hover { border-color: #bdbdbd; background: #fafafa; }
.quote-sample { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; }
.quote-sample.quote-mark { flex-direction: column; gap: 2px; }
.quote-sample.quote-mark::before,
.quote-sample.quote-mark::after,
.doc-page blockquote.quote-mark::before,
.doc-public blockquote.quote-mark::before,
.doc-page blockquote.quote-mark::after,
.doc-public blockquote.quote-mark::after { color: #b5b5b5; font-family: Georgia, "Times New Roman", serif; line-height: 1; }
.quote-sample.quote-mark::before,
.doc-page blockquote.quote-mark::before,
.doc-public blockquote.quote-mark::before { content: "“"; }
.quote-sample.quote-mark::after,
.doc-page blockquote.quote-mark::after,
.doc-public blockquote.quote-mark::after { content: "”"; }
.quote-sample.quote-mark::before,
.quote-sample.quote-mark::after { font-size: 16px; }
.doc-page blockquote.quote-mark,
.doc-public blockquote.quote-mark { margin: 0.8em 0; padding: 0.2em 0 0.4em; border: 0; background: transparent; text-align: center; }
.doc-page blockquote.quote-mark::before,
.doc-public blockquote.quote-mark::before,
.doc-page blockquote.quote-mark::after,
.doc-public blockquote.quote-mark::after { display: block; font-size: 1.8em; }
.quote-sample.quote-line,
.doc-page blockquote.quote-line,
.doc-public blockquote.quote-line { border-left: 3px solid #c8c8c8; }
.quote-sample.quote-line { justify-content: flex-start; padding-left: 8px; }
.doc-page blockquote.quote-line,
.doc-public blockquote.quote-line { margin: 0.8em 0; padding: 2px 0 2px 14px; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; }
.quote-sample.quote-bubble,
.doc-page blockquote.quote-bubble,
.doc-public blockquote.quote-bubble { position: relative; border: 1px solid #c8c8c8; background: #fff; }
.quote-sample.quote-bubble { border-radius: 4px; }
.doc-page blockquote.quote-bubble,
.doc-public blockquote.quote-bubble { margin: 0.8em 0 1.2em; padding: 12px 16px; border-radius: 6px; }
.quote-sample.quote-bubble::after,
.doc-page blockquote.quote-bubble::after,
.doc-public blockquote.quote-bubble::after { content: ""; position: absolute; background: #fff; border-right: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; transform: rotate(45deg); }
.quote-sample.quote-bubble::after { left: 14px; bottom: -5px; width: 8px; height: 8px; }
.doc-page blockquote.quote-bubble::after,
.doc-public blockquote.quote-bubble::after { left: 22px; bottom: -7px; width: 12px; height: 12px; }
.quote-sample.quote-underline,
.doc-page blockquote.quote-underline,
.doc-public blockquote.quote-underline { position: relative; border-bottom: 1px solid #c8c8c8; }
.quote-sample.quote-underline { justify-content: flex-start; padding-left: 16px; }
.doc-page blockquote.quote-underline,
.doc-public blockquote.quote-underline { margin: 0.8em 0; padding: 0 0 8px 28px; border-top: 0; border-right: 0; border-left: 0; background: transparent; }
.quote-sample.quote-underline::before,
.doc-page blockquote.quote-underline::before,
.doc-public blockquote.quote-underline::before { content: "“"; position: absolute; left: 0; top: 0; color: #b5b5b5; font-family: Georgia, "Times New Roman", serif; line-height: 1; }
.quote-sample.quote-underline::before { font-size: 16px; }
.doc-page blockquote.quote-underline::before,
.doc-public blockquote.quote-underline::before { font-size: 1.6em; }
.quote-sample.quote-note,
.doc-page blockquote.quote-note,
.doc-public blockquote.quote-note { position: relative; border: 1px solid #c8c8c8; background: #fff; }
.doc-page blockquote.quote-note,
.doc-public blockquote.quote-note { margin: 0.8em 0; padding: 14px 18px 18px; }
.quote-sample.quote-note::after,
.doc-page blockquote.quote-note::after,
.doc-public blockquote.quote-note::after { content: ""; position: absolute; right: -1px; bottom: -1px; background: linear-gradient(135deg, #fff 50%, #f2f2f2 50%); border-top: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; }
.quote-sample.quote-note::after { width: 12px; height: 12px; }
.doc-page blockquote.quote-note::after,
.doc-public blockquote.quote-note::after { width: 16px; height: 16px; }
.quote-sample.quote-frame,
.doc-page blockquote.quote-frame,
.doc-public blockquote.quote-frame { position: relative; border: 0; background: transparent; }
.doc-page blockquote.quote-frame,
.doc-public blockquote.quote-frame { margin: 0.8em 0; padding: 16px 18px; }
.quote-sample.quote-frame::before,
.quote-sample.quote-frame::after,
.doc-page blockquote.quote-frame::before,
.doc-public blockquote.quote-frame::before,
.doc-page blockquote.quote-frame::after,
.doc-public blockquote.quote-frame::after { content: ""; position: absolute; border-color: #b5b5b5; border-style: solid; }
.quote-sample.quote-frame::before,
.doc-page blockquote.quote-frame::before,
.doc-public blockquote.quote-frame::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.quote-sample.quote-frame::after,
.doc-page blockquote.quote-frame::after,
.doc-public blockquote.quote-frame::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.quote-sample.quote-frame::before,
.quote-sample.quote-frame::after { width: 10px; height: 10px; }
.doc-page blockquote.quote-frame::before,
.doc-public blockquote.quote-frame::before,
.doc-page blockquote.quote-frame::after,
.doc-public blockquote.quote-frame::after { width: 14px; height: 14px; }
.doc-page hr, .doc-public hr { border: 0; border-top: 1px solid #ccc; margin: 1em 0; }
.rule-panel { display: grid; width: 16rem; max-width: 100%; margin: 8px 0; padding: 4px 0; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
.rule-panel[hidden] { display: none !important; }
.rule-choices { display: grid; }
.rule-choices button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 36px; margin: 0; padding: 0 18px; border: 0; border-radius: 0; background: #fff; }
.rule-choices button:hover { background: #f7f7f7; }
.rule-sample { display: block; }
.rule-sample.rule-short,
.doc-page hr.rule-short,
.doc-public hr.rule-short { width: 4.5rem; border-top: 1px solid #9a9a9a; }
.doc-page hr.rule-short,
.doc-public hr.rule-short { margin: 1em 0; }
.rule-sample.rule-long,
.doc-page hr.rule-long,
.doc-public hr.rule-long { width: 100%; border-top: 1px solid #9a9a9a; }
.doc-page hr.rule-long,
.doc-public hr.rule-long { margin: 1em 0; }
.rule-sample.rule-thick,
.doc-page hr.rule-thick,
.doc-public hr.rule-thick { border-top: 4px solid #555; }
.rule-sample.rule-thick { width: 2.6rem; }
.doc-page hr.rule-thick,
.doc-public hr.rule-thick { width: 3.2rem; margin: 1em auto; }
.rule-sample.rule-chevron,
.rule-sample.rule-diamond,
.doc-page hr.rule-chevron,
.doc-public hr.rule-chevron,
.doc-page hr.rule-diamond,
.doc-public hr.rule-diamond { position: relative; width: 100%; border: 0; background: transparent; overflow: visible; }
.rule-sample.rule-chevron,
.rule-sample.rule-diamond { height: 14px; }
.doc-page hr.rule-chevron,
.doc-public hr.rule-chevron,
.doc-page hr.rule-diamond,
.doc-public hr.rule-diamond { height: 16px; margin: 1em 0; }
.rule-sample.rule-chevron::before,
.rule-sample.rule-diamond::before,
.doc-page hr.rule-chevron::before,
.doc-public hr.rule-chevron::before,
.doc-page hr.rule-diamond::before,
.doc-public hr.rule-diamond::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #9a9a9a; }
.rule-sample.rule-chevron::after,
.doc-page hr.rule-chevron::after,
.doc-public hr.rule-chevron::after { content: ""; position: absolute; left: 50%; background: #fff; border-right: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; transform: rotate(45deg); }
.rule-sample.rule-chevron::after { top: 2px; width: 8px; height: 8px; margin-left: -4px; }
.doc-page hr.rule-chevron::after,
.doc-public hr.rule-chevron::after { top: 2px; width: 10px; height: 10px; margin-left: -6px; }
.rule-choices button:hover .rule-chevron::after,
.rule-choices button:hover .rule-diamond::after { background: #f7f7f7; }
.rule-sample.rule-diamond::after,
.doc-page hr.rule-diamond::after,
.doc-public hr.rule-diamond::after { content: ""; position: absolute; left: 50%; background: #fff; border: 1px solid #9a9a9a; transform: rotate(45deg); }
.rule-sample.rule-diamond::after { top: 2px; width: 7px; height: 7px; margin-left: -4px; }
.doc-page hr.rule-diamond::after,
.doc-public hr.rule-diamond::after { top: 2px; width: 8px; height: 8px; margin-left: -5px; }
.rule-sample.rule-dots::before,
.doc-page hr.rule-dots::before,
.doc-public hr.rule-dots::before { content: "· · · · · ·"; color: #888; letter-spacing: 2px; }
.rule-sample.rule-dots { text-align: center; font-size: 16px; line-height: 1; }
.doc-page hr.rule-dots,
.doc-public hr.rule-dots { height: auto; margin: 0.6em 0; border: 0; text-align: center; font-size: 18px; line-height: 1; }
.rule-sample.rule-slash,
.doc-page hr.rule-slash,
.doc-public hr.rule-slash { width: 14px; height: 16px; margin-left: auto; margin-right: auto; border: 0; border-right: 1px solid #888; background: transparent; transform: rotate(25deg); }
.doc-page hr.rule-slash,
.doc-public hr.rule-slash { margin-top: 0.6em; margin-bottom: 0.6em; }
.rule-sample.rule-vertical,
.doc-page hr.rule-vertical,
.doc-public hr.rule-vertical { width: 1px; height: 16px; margin-left: auto; margin-right: auto; border: 0; background: #888; }
.doc-page hr.rule-vertical,
.doc-public hr.rule-vertical { margin-top: 0.6em; margin-bottom: 0.6em; }
.doc-page ul, .doc-public ul { list-style: disc; margin: 0.4em 0; padding-left: 1.4em; }
.doc-page ol, .doc-public ol { list-style: decimal; margin: 0.4em 0; padding-left: 1.4em; }
.doc-page u, .doc-public u { text-decoration: underline; }
a.doc-file { display: inline-block; margin: 4px 0; padding: 4px 8px; border: 1px solid #1d4f91; border-radius: 6px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.library-card { display: grid; gap: 6px; padding: 8px; border: 1px solid #e3e3e3; border-radius: 6px; background: #fff; }
.library-card img { width: 100%; height: 88px; object-fit: cover; }
.library-card button { box-sizing: border-box; height: 30px; margin: 0; padding: 0 8px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 28px; }
.menu-editor { display: grid; max-width: 48rem; }
.menu-item { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid #eee; }
.menu-item.child { margin-left: 1.5rem; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.menu-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; max-width: none; }
.menu-actions button:disabled { opacity: 0.4; }
.editor-screen { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-height: 100vh; }
html:has(body > main.editor-screen:not(.editor-header):not(.editor-footer)) { overflow-y: scroll; }
form#doc-save { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; max-width: none; min-height: 0; }
.doc-page { flex: 1 1 auto; width: 100%; height: auto; min-height: 12rem; max-width: none; box-sizing: border-box; border: 1px solid #bbb; border-radius: 6px; background: #fff; outline: none; overflow-y: auto; }
.editor-screen:not(.editor-header):not(.editor-footer) .doc-page { flex: 0 0 auto; height: 100vh; min-height: 20rem; overflow-x: hidden; overflow-y: scroll; }
.doc-page:focus { border-color: #1d4f91; }
.doc-page p, .doc-public p { margin: 0 0 0.4em; }
.doc-page img, .doc-public img { max-width: 100%; height: auto; }
.doc-page table, .doc-public table { border-collapse: collapse; width: 100%; max-width: 100%; table-layout: fixed; font-family: var(--font-family); font-size: var(--font-base); font-weight: var(--font-weight-base); color: var(--font-color-base); }
.doc-page td, .doc-page th, .doc-public td, .doc-public th { border: 1px solid #e5e5e5; padding: 0.45em; min-width: 0; vertical-align: top; overflow-wrap: anywhere; }
.doc-page td.cell-selected, .doc-page th.cell-selected { background: #ddf6e6; }
#table-ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#table-ui[hidden] { display: none !important; }
.table-edge { position: fixed; background: #ececec; pointer-events: none; }
.table-col-edge { height: 14px; }
.table-row-edge { width: 14px; }
.table-handle { position: fixed; box-sizing: border-box; width: 12px; height: 12px; margin: 0; padding: 0; border: 1px solid #b5b5b5; border-radius: 50%; background: #fff; pointer-events: auto; transform: translate(-50%, -50%); cursor: col-resize; touch-action: none; }
.table-handle.row { cursor: row-resize; z-index: 2; }
.table-row-line { position: fixed; z-index: 1; box-sizing: border-box; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; transform: translateY(-50%); cursor: row-resize; pointer-events: auto; touch-action: none; }
.table-row-line:hover { background: linear-gradient(to bottom, transparent 3px, #9a9a9a 3px, #9a9a9a 5px, transparent 5px); }
.table-handle.corner { width: 10px; height: 10px; border: 0; border-radius: 0; background: transparent; transform: none; cursor: pointer; }
.table-handle.corner::before { content: ""; display: block; width: 0; height: 0; border-top: 8px solid #c5c5c5; border-right: 8px solid transparent; }
.table-tools { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid #ececec; }
.table-tools[hidden] { display: none !important; }
.table-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.table-card-tools > button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; color: #222; cursor: pointer; }
.table-card-tools > button[aria-pressed="true"],
.table-card-tools > button.open { border-color: #03c75a; color: #03c75a; }
#table-border-toggle { flex: 0 0 auto; justify-content: space-between; gap: 8px; width: auto; padding: 0 8px; }
#table-border-toggle.open .border-chevron { border-top: 0; border-bottom: 5px solid currentColor; }
.border-chevron { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.border-sample { display: block; width: 56px; border-top: 1px solid currentColor; }
.border-sample.dashed { border-top-style: dashed; }
.border-sample.dotted { border-top-style: dotted; }
.border-sample.double { border-top-width: 3px; border-top-style: double; }
.table-pop { display: grid; gap: 6px; }
.table-pop[hidden],
.table-border-menu[hidden] { display: none !important; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.table-tools .swatch { width: 100%; height: 16px; margin: 0; padding: 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 2px; background: #fff; cursor: pointer; }
.table-tools .swatch.clear { background: linear-gradient(135deg, #fff 46%, #e53935 46%, #e53935 54%, #fff 54%); }
.table-tools .more { width: 16.5rem; max-width: 100%; height: 32px; margin: 0; padding: 0; border: 0; border-top: 1px solid #eee; border-radius: 0; background: #fff; color: #666; font-size: 13px; cursor: pointer; }
.table-tools input[type="color"] { width: 16.5rem; max-width: 100%; height: 32px; margin: 0; padding: 2px; border: 1px solid #e3e3e3; background: #fff; }
.table-tools .table-pop,
.table-tools .table-border-menu { width: 16.5rem; max-width: 100%; }
.style-grid { grid-template-columns: 1fr 1fr; }
.table-tools .style-grid > button { height: 52px; margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 4px; background: #fff; cursor: pointer; }
.table-tools .style-grid > button[aria-pressed="true"] { border-color: #03c75a; }
.mini { display: block; height: 36px; background: #fff; }
.mini.grid { border: 1px solid #d0d0d0; background: linear-gradient(#d0d0d0, #d0d0d0) 33% 0 / 1px 100% no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 66% 0 / 1px 100% no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 0 50% / 100% 1px no-repeat, #fff; }
.mini.head { border: 1px solid #d0d0d0; background: linear-gradient(#d0d0d0, #d0d0d0) 33% 0 / 1px 100% no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 66% 0 / 1px 100% no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 0 50% / 100% 1px no-repeat, linear-gradient(#eeeeee, #eeeeee) 0 0 / 100% 50% no-repeat, #fff; }
.mini.blank { border: 1px solid #f2f2f2; background: #fff; }
.mini.rows { background: linear-gradient(#d0d0d0, #d0d0d0) 0 0 / 100% 2px no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 0 50% / 100% 1px no-repeat, linear-gradient(#d0d0d0, #d0d0d0) 0 100% / 100% 1px no-repeat, #fff; }
.mini.top { background: linear-gradient(#9e9e9e, #9e9e9e) 0 0 / 100% 4px no-repeat, #fff; }
.mini.ends { background: linear-gradient(#9e9e9e, #9e9e9e) 0 0 / 100% 4px no-repeat, linear-gradient(#bdbdbd, #bdbdbd) 0 100% / 100% 2px no-repeat, #fff; }
.mini.band { background: linear-gradient(#9e9e9e, #9e9e9e) 0 0 / 100% 3px no-repeat, linear-gradient(#eeeeee, #eeeeee) 0 3px / 100% 16px no-repeat, linear-gradient(#bdbdbd, #bdbdbd) 0 100% / 100% 2px no-repeat, #fff; }
.mini.shade { background: #f3f3f3; }
.table-border-menu { display: grid; padding: 2px 0; border-top: 1px solid #eee; }
.table-border-menu button { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: #fff; color: #222; font-size: 13px; font-weight: 400; line-height: 32px; text-align: left; cursor: pointer; }
.table-border-menu button.border-line { justify-content: center; }
.table-border-menu button:hover,
.table-tools .style-grid > button:hover,
.table-tools .more:hover { background: #f6f6f6; }
.table-menu { position: fixed; z-index: 2; display: grid; width: 9.5rem; padding: 4px 0; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); pointer-events: auto; }
.table-menu[hidden] { display: none !important; }
.table-menu button { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 32px; text-align: left; cursor: pointer; }
.table-menu button svg { flex: 0 0 auto; }
.table-menu button:hover { background: #f6f6f6; }
.table-menu button:disabled { color: #b5b5b5; background: #fff; cursor: default; }
.doc-widget { display: inline-block; margin: 4px 0; padding: 2px 8px; border: 1px dashed #1d4f91; border-radius: 6px; background: #f4f7fb; cursor: pointer; }
.insert-panel .button-stage { flex: 1 0 100%; display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 16px; border-radius: 8px; background: #f3f4f6; }
.insert-panel input[type="range"] { width: 8rem; padding: 0; }
.insert-panel input[type="checkbox"] { width: 1.1rem; height: 1.1rem; padding: 0; }
.insert-panel #button-radius { min-width: 2.6rem; font-size: 12px; color: #555; }
.doc-page .control-picked { outline: 2px solid #03c75a; outline-offset: 1px; }
.control-menu { position: fixed; z-index: 40; display: grid; width: 11rem; padding: 4px 0; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.control-menu[hidden] { display: none !important; }
.control-menu button { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 32px; text-align: left; cursor: pointer; }
.control-menu button span { color: #888; font-size: 12px; font-weight: 400; }
.control-menu button:hover { background: #f6f6f6; }
.control-menu button:disabled { color: #b5b5b5; background: #fff; cursor: default; }
.control-menu button:disabled span { color: #c8c8c8; }
.insert-panel { display: grid; gap: 6px; max-width: 48rem; margin: 8px 0; padding: 6px 8px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
.insert-panel p { margin: 0; font-size: 12px; line-height: 1.4; color: #555; }
.insert-panel [data-section],
.insert-panel .form-field-row,
.insert-panel .block-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.insert-panel [data-section] > p,
.insert-panel .field-list { flex: 1 0 100%; }
.insert-panel .field-list { display: grid; gap: 4px; }
.insert-panel .form-field-row { padding: 0; border-radius: 0; background: transparent; }
.insert-panel label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: #555; }
.insert-panel input,
.insert-panel select,
.insert-panel button { box-sizing: border-box; height: 30px; margin: 0; padding: 0 8px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; color: #222; font-size: 13px; font-weight: 500; line-height: 28px; }
.insert-panel button:hover,
.library-card button:hover { background: #f5f7fa; border-color: #cfcfcf; }
.insert-panel input[type="number"] { width: 4.2rem; }
.insert-panel input[type="text"],
.insert-panel input[type="url"] { width: 14rem; }
.insert-panel input[type="file"] { width: 16rem; padding: 3px 6px; line-height: 22px; }
.insert-panel .image-choice { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; margin: 0; }
.insert-panel .image-choice img,
.insert-panel .image-library img,
.insert-panel .gallery-picks img { display: block; width: 100%; height: 88px; object-fit: contain; background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 4px; }
.insert-panel .image-choice img { width: 120px; height: 88px; }
.insert-panel .image-choice figcaption { max-width: 18rem; font-size: 12px; line-height: 1.4; color: #222; overflow-wrap: anywhere; }
.insert-panel .image-library { flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 320px; margin: 0; padding: 2px; overflow: auto; }
.insert-panel .image-library-card { display: grid; gap: 4px; min-width: 0; }
.insert-panel .image-library-card .pick { display: grid; gap: 4px; height: auto; padding: 6px; line-height: 1.3; text-align: left; white-space: normal; }
.insert-panel .image-library-card .pick.selected { border-color: #1d4f91; box-shadow: inset 0 0 0 1px #1d4f91; }
.insert-panel .image-library-card .quiet { height: 28px; padding: 0 8px; }
.insert-panel .image-library span { font-size: 11px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.insert-panel .gallery-picks { flex: 1 0 100%; max-width: none; max-height: 320px; margin: 0; overflow: auto; }
.insert-panel .gallery-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.insert-panel .gallery-picks label { display: grid; grid-template-columns: auto 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.insert-panel .gallery-picks img { width: 96px; }
.insert-panel .gallery-pick .quiet { height: 30px; }
.image-manage { max-width: 56rem; margin-top: 16px; }
.image-manage img { object-fit: contain; background: #f6f6f6; }
.image-manage form { display: block; max-width: none; margin: 0; }
.image-manage span { overflow-wrap: anywhere; }
.image-folder-create,
.image-folders form,
.image-manage form.folder-move { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: none; margin: 0; }
.image-folders { display: grid; gap: 10px; max-width: 56rem; margin: 0 0 16px; padding: 0; list-style: none; }
.image-folders li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.image-folders a { color: #1d4f91; }
.image-folders .current > a { font-weight: 700; }
main:has(.image-folders) form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: none; margin: 0 0 12px; }
main:has(.image-folders) form > p { flex: 1 0 100%; margin: 0; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; }
main:has(.image-folders) label { display: inline-flex; align-items: center; gap: 6px; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 400; }
main:has(.image-folders) input,
main:has(.image-folders) select,
main:has(.image-folders) button,
main:has(.image-folders) .library-card button {
  box-sizing: border-box;
  height: 26px;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
main:has(.image-folders) button,
main:has(.image-folders) .library-card button {
  min-width: 76px;
  padding: 0 12px;
  background: #f3f3f3;
  cursor: pointer;
}
main:has(.image-folders) button:hover,
main:has(.image-folders) .library-card button:hover { background: #e5e5e5; }
main:has(.image-folders) button:focus,
main:has(.image-folders) input:focus,
main:has(.image-folders) select:focus { outline: 1px solid #0078d4; outline-offset: 1px; }
main:has(.image-folders) input[name="name"],
main:has(.image-folders) select { width: 12rem; }
main:has(.image-folders) > .back {
  display: inline-block;
  width: auto;
  min-width: 76px;
  height: 26px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}
main:has(.image-folders) > .back:hover { background: #e5e5e5; }
main:has(.image-folders) .folder-move { width: 100%; margin: 0; }
main:has(.image-folders) .library-card label { display: grid; width: 100%; gap: 4px; }
main:has(.image-folders) .folder-move select { width: 100%; }
main:has(.image-folders) input[type="file"] { width: auto; height: 26px; padding: 1px 2px; line-height: 22px; }
main:has(.image-folders) input[type="file"]::file-selector-button {
  height: 22px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  line-height: 20px;
}
.insert-panel .library-folder { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.insert-panel input[type="color"] { width: 32px; height: 32px; padding: 2px; }
.insert-panel select { width: auto; min-width: 4.2rem; field-sizing: content; }
.insert-panel .form-field-row input[data-name="label"] { width: 8rem; }
.insert-panel .form-field-row input[data-name="min"],
.insert-panel .form-field-row input[data-name="max"] { width: 4.2rem; }
.doc-public { max-width: 48rem; }
.page-content > .doc-public { max-width: none; }
.page-row { display: grid; gap: 8px; margin: 0 0 16px; }
.page-row.child { margin-left: 16px; }
.page-row form { grid-template-columns: 1fr; }
.place-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place-actions a { display: block; padding: 12px; border-radius: 6px; background: #1d4f91; color: #fff; text-align: center; text-decoration: none; }
.font-preview { display: grid; gap: 8px; max-width: 32rem; }
.font-preview p { margin: 0; }
.menu input { position: absolute; left: -999px; }
.menu-button { display: none; }
.menu-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 0.22em; width: 1.2em; height: 0.95em; }
.menu-bars span { display: block; height: 0.12em; min-height: 1px; border-radius: 1px; background: currentColor; }
.menu ul { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.menu > .menu-list { justify-content: var(--menu-align, flex-start); gap: var(--menu-gap-bar, 25px); padding: var(--menu-pad-top, 10px) var(--menu-pad-right, 20px) 12px var(--menu-pad-left, 20px); }
.menu > .menu-list > li { position: relative; margin: 0; }
.menu li { margin: 0 var(--menu-gap, 12px) 0 0; }
.menu > .menu-list > li > ul { display: none; position: absolute; top: calc(100% - 4px); left: 0; z-index: 20; width: max-content; min-width: 10rem; max-width: calc(100vw - 24px); margin: 0; padding: 8px 8px 4px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.menu > .menu-list > li:hover > ul,
.menu > .menu-list > li:focus-within > ul { display: flex; flex-direction: column; align-items: stretch; }
.menu ul ul li { width: 100%; margin: 0 0 var(--menu-gap, 12px) 0; }
.menu > .menu-list > li > ul a.menu-link { width: auto; min-width: 100%; max-width: none; height: auto; min-height: var(--btn-height, auto); white-space: nowrap; }
.menu a.menu-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
  padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 28px);
  border: none;
  border-radius: var(--btn-radius, 4px);
  justify-content: var(--btn-justify, center);
  background: var(--btn, #1578f9);
  color: var(--btn-ink, #fff);
  font-family: var(--btn-family, inherit);
  font-size: var(--btn-font, 15px);
  font-weight: var(--btn-weight, 400);
  font-style: var(--btn-style, normal);
  line-height: 1.2;
  text-align: var(--btn-align, center);
  text-decoration: var(--btn-line, none);
}

@media (min-width: 700px) {
  .font-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .font-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .menu-button { display: inline-flex; align-items: center; justify-content: center; margin: 12px 16px; padding: 8px 12px; border: 1px solid #1d4f91; background: #fff; color: #1d4f91; border-radius: 6px; }
  .menu-button.craft-button { display: inline-flex; padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 28px); border: none; border-radius: var(--btn-radius, 4px); background: var(--btn, #1578f9); color: var(--btn-ink, #fff); }
  .menu ul { display: none; flex-direction: column; align-items: flex-start; }
  .menu li { margin: 0 0 var(--menu-gap, 12px) 0; }
  .menu > .menu-list > li > ul { display: block; position: static; top: auto; left: auto; z-index: auto; width: auto; min-width: 0; max-width: none; padding: 4px 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .menu > .menu-list > li > ul a.menu-link { width: 100%; min-width: 0; white-space: normal; }
  .menu input:checked ~ ul { display: flex; }
}
.menu-design { display: grid; gap: 18px; }
.menu-design h2 { margin: 0; font-size: 16px; }
.menu-design form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: none; margin: 0 0 8px; padding: 8px; border: 1px solid #e6e6e6; border-radius: 8px; }
.menu-design form strong { flex: 1 0 100%; font-size: 14px; }
.menu-design label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: #555; }
.menu-design input, .menu-design select { box-sizing: border-box; height: 26px; padding: 2px 6px; font-size: 13px; }
.menu-design input[type="color"] { width: 32px; padding: 2px; }
.menu-design input[type="number"] { width: 4.2rem; }
.menu-design input[type="range"] { width: 8rem; padding: 0; }
.menu-design input[type="checkbox"],
.menu-design input[type="radio"] { width: 1.1rem; height: 1.1rem; padding: 0; }
.menu-design .menu-align { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.menu-design .menu-align legend { padding: 0; font-size: 12px; color: #555; }
.menu-design button { height: 26px; padding: 0 10px; font-size: 13px; }
.menu-preview-wide, .menu-preview-narrow { border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.menu-preview-wide { overflow: visible; }
.menu-preview-narrow { width: 390px; max-width: 100%; }
.menu-preview-wide .menu-button { display: none !important; }
.menu-preview-wide .menu > .menu-list { display: flex !important; flex-direction: row; align-items: center; }
.menu-preview-narrow .menu-button { display: inline-flex !important; align-items: center; justify-content: center; margin: 12px 16px; }
.menu-design .menu-preview .menu-button { color: var(--btn-ink, #1d4f91); font-size: var(--btn-font, 15px); font-weight: var(--btn-weight, 400); font-style: var(--btn-style, normal); text-decoration: var(--btn-line, none); }
.menu-preview-narrow .menu ul { display: none; flex-direction: column; align-items: flex-start; }
.menu-preview-narrow .menu > .menu-list > li > ul { display: block; position: static; top: auto; left: auto; width: auto; min-width: 0; max-width: none; padding: 4px 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.menu-preview-narrow .menu > .menu-list > li > ul a.menu-link { width: 100%; min-width: 0; white-space: normal; }
.menu-preview-narrow .menu input:checked ~ .menu-list { display: flex; }
.menu-preview-narrow .menu li { margin: 0 0 var(--menu-gap, 12px) 0; }
.page-row .menu-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; max-width: none; }
.page-admin .back,
.page-admin .win-button,
.page-admin button {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  min-width: 52px;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.page-admin .back { margin: 0 8px 8px 0; }
.page-admin main > form button { justify-self: start; width: auto; }
.page-admin .back:hover,
.page-admin .win-button:hover,
.page-admin button:hover { background: #e5e5e5; }
.page-admin button:disabled { opacity: 0.45; }
.page-admin input,
.page-admin select {
  box-sizing: border-box;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
}
.page-admin .page-row {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 8px 10px;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
}
.page-admin .page-row .menu-actions,
.page-admin .page-pwa { grid-column: 1 / -1; }
.page-admin .page-pwa { display: flex; align-items: center; margin: 0; }
.page-admin .page-pwa .check-field { display: flex; align-items: center; gap: 6px; font-size: 13px; }
main:has(.font-form) .pwa-message-form { max-width: 42rem; }
main:has(.font-form) .pwa-message-form textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 7.5rem;
  margin-top: 4px;
  padding: 8px;
  line-height: 1.5;
  resize: vertical;
}
.page-admin .page-row.child { margin-left: 28px; background: #f7f7f7; }
.page-admin .page-name { display: flex; align-items: center; gap: 8px; max-width: none; margin: 0; }
.page-admin .page-name input { width: 12rem; }
.page-admin .menu-actions label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; }

main:has(.site-settings) { font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; color: #1a1a1a; }
main:has(.site-settings) > .back,
.site-settings button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 76px;
  height: 26px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.site-settings button { margin: 0; justify-self: start; }
main:has(.site-settings) > .back:hover,
.site-settings button:hover { background: #e5e5e5; }
.site-settings form { gap: 8px; margin: 0 0 12px; }
.site-settings .directory-row,
.site-settings .certificate-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; max-width: none; margin: 0 0 16px; }
.site-settings .certificate-actions form { margin: 0; }
.certificate-progress { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); }
.certificate-progress[hidden] { display: none; }
.certificate-progress p { margin: 0 0 12px; font-size: 16px; color: #1a1a1a; }
.certificate-progress .progress-track { width: 18rem; max-width: 80vw; height: 12px; overflow: hidden; border-radius: 6px; background: #e3e3e3; }
.certificate-progress .progress-bar { width: 40%; height: 100%; border-radius: 6px; background: #1578f9; animation: certificate-progress 1.1s ease-in-out infinite; }
@keyframes certificate-progress { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.site-settings label { gap: 4px; font-size: 13px; color: #1a1a1a; }
.site-settings select,
.site-settings textarea,
.site-settings input {
  box-sizing: border-box;
  width: 16rem;
  max-width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
}
.site-settings textarea { height: 68px; padding: 4px 8px; resize: vertical; }
.site-settings p,
.site-settings li { margin: 0; font-size: 13px; }
.site-settings ul { margin: 0 0 12px; padding-left: 1.2rem; }
.visitor-wrap { max-width: 56rem; overflow-x: auto; }
.visitor-log { width: 100%; border-collapse: collapse; font-size: 14px; }
.visitor-log th, .visitor-log td { padding: 8px 10px; border-bottom: 1px solid #d0d0d0; text-align: left; vertical-align: top; }
.visitor-log th { background: #f3f3f3; font-weight: 600; }
.visitor-log a { color: #1d4f91; word-break: break-all; }
.managed-domain { margin: 0 0 8px; font-size: 14px; }
.admin-home { display: grid; gap: 8px; max-width: 32rem; }
.admin-home a, .back { display: block; padding: 14px; border: 1px solid #1d4f91; border-radius: 6px; text-decoration: none; }
.back { margin-bottom: 16px; }
.seo-form, .gallery-picks { display: grid; gap: 8px; max-width: 40rem; margin: 12px 0; }
.seo-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 8px 0;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
}
.seo-form input {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
.seo-form input::placeholder { color: rgba(0, 0, 0, 0.45); opacity: 1; }
.seo-form button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 76px;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
.seo-form button:hover { background: #e5e5e5; }
.leave-dialog {
  width: max-content;
  max-width: 24rem;
  margin: auto;
  padding: 18px 16px 12px;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  background: #fff;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.leave-dialog::backdrop { background: rgba(0, 0, 0, 0.28); }
.leave-dialog p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 400;
}
.leave-dialog p::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f0b429' stroke='%23c48a12' d='M16 3 29.5 27H2.5z'/%3E%3Cpath fill='%231a1a1a' d='M15 12h2v8h-2zm0 10h2v2h-2z'/%3E%3C/svg%3E") center / 32px 32px no-repeat;
}
.leave-actions { display: flex; justify-content: flex-end; gap: 8px; }
.leave-dialog button {
  box-sizing: border-box;
  min-width: 76px;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #8d8d8d;
  border-radius: 3px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
.leave-dialog button:hover { background: #e5e5e5; }
.leave-dialog button:focus { outline: 1px solid #0078d4; outline-offset: 1px; }
.editor-top { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.editor-crumb { display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 26px; padding: 0 10px; border: 1px solid #2f6f9f; border-radius: 3px; background: #fff; color: #1a1a1a; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; }
.editor-crumb a { color: #1a1a1a; font-size: 13px; font-weight: 400; text-decoration: underline; }
.editor-top .preview-pc,
.editor-top .preview-mobile { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 26px; padding: 0 12px; border-radius: 3px; color: #fff; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-decoration: none; }
#doc-save > button { align-self: flex-start; box-sizing: border-box; height: 26px; min-width: 76px; margin: 0; padding: 0 12px; border-radius: 3px; font-family: "Segoe UI", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; }
.editor-top .preview-pc { background: #1a4f7a; }
.editor-top .preview-mobile { background: #f07816; }
.preview-return { margin: 12px 16px 0; }
.preview-return a { display: inline-block; padding: 12px; border-radius: 6px; background: #1d4f91; color: #fff; text-decoration: none; }
.mobile-preview-frame { display: block; width: 390px; height: calc(100vh - 88px); margin: 12px auto; border: 8px solid #1a1a1a; border-radius: 24px; background: #fff; }
.doc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doc-col { min-width: 0; }
.doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.doc-gallery img, .doc-gallery .gallery-zoom img { width: 100%; height: auto; }
.gallery-zoom { display: block; }
.editor-header .photo-use { display: none; }
@media (max-width: 720px) {
  .doc-columns { grid-template-columns: 1fr; }
  .page-content .doc-public :is(p, li, blockquote) > img,
  .page-content .content-image img {
    display: block;
    box-sizing: border-box;
    width: 90vw !important;
    max-width: 90vw !important;
    height: auto !important;
    margin-right: 0;
    margin-left: calc(50% - 50vw);
  }
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align:center"] > img,
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align: center"] > img,
  .page-content .content-image[style*="text-align:center"] img,
  .page-content .content-image[style*="text-align: center"] img {
    margin-left: calc(50% - 45vw);
  }
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align:right"] > img,
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align: right"] > img,
  .page-content .content-image[style*="text-align:right"] img,
  .page-content .content-image[style*="text-align: right"] img {
    margin-left: calc(50% - 40vw);
  }
  .page-content .doc-public :is(p, li, blockquote) > a:has(> img) {
    display: block;
    width: 90vw;
    max-width: 90vw;
    margin-right: 0;
    margin-left: calc(50% - 50vw);
  }
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align:center"] > a:has(> img),
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align: center"] > a:has(> img) {
    margin-left: calc(50% - 45vw);
  }
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align:right"] > a:has(> img),
  .page-content .doc-public :is(p, li, blockquote)[style*="text-align: right"] > a:has(> img) {
    margin-left: calc(50% - 40vw);
  }
  .page-content .doc-public :is(p, li, blockquote) > a:has(> img) > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0;
  }
}