/* C4 R2 — docs/실측/디시_편집기_C4_260913.md. 서식값은 PC·폰 실측, 브랜드색은 기존 토큰. */
[data-write-editor-shell] { position: relative; }
[data-write-editor-shell] button { transition: none; }
[data-write-editor-shell] .note-editable {
  box-sizing: border-box; height: 420px; min-height: 420px; padding: 10px;
  overflow-y: auto; border: 0; outline: 0; background: var(--bg); color: var(--fg);
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 12px; line-height: normal;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
[data-write-editor-shell] .note-editable p, [data-write-editor-shell] .note-editable div { margin: 0; }
[data-write-editor-shell] .note-editable:empty::before { content: attr(data-placeholder); color: var(--dim); pointer-events: none; }
[data-write-editor-shell] .note-toolbar { overflow: visible; }
[data-write-editor-shell] .format-tools { gap: 0; }
[data-write-editor-shell] .note-btn {
  height: 33px; min-height: 33px; min-width: 28px; padding: 0 8px; border: 0;
  border-radius: 3px; background: transparent; box-shadow: none; color: var(--fg); font-size: 12px;
}
[data-write-editor-shell] button[aria-pressed="true"],
[data-write-editor-shell] button[aria-expanded="true"] { background: var(--sub); border-color: var(--line); }
[data-write-editor-shell] button:hover { background-color: var(--sub); }
[data-write-editor-shell] .format-tools .note-btn:hover { background: transparent; }
[data-write-editor-shell] .format-tools .note-btn[aria-pressed="true"] { background: transparent; box-shadow: inset 0 3px 5px rgb(0 0 0 / 12.5%); }
[data-write-editor-shell] .media-tools .note-btn { border: 1px solid #e3e3e3; background: var(--bg); font-size: 13px; }
[data-write-editor-shell] button:focus, [data-write-editor-shell] button:focus-visible { outline: 0; transition: none; }
.editor-caret { width: 0; height: 0; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
[data-write-editor-shell] .editor-size-toggle { min-width: 36.4375px; }
.editor-align-icon { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 14px; height: 15px; gap: 2px; }
.editor-align-icon i { width: 14px; height: 1px; background: currentColor; }
.editor-align-icon i:nth-child(even) { width: 9px; }
.editor-align-icon.center { align-items: center; }
.editor-align-icon.right { align-items: flex-end; }
.editor-align-icon.justify i { width: 14px; }
[data-write-editor-shell] .editor-menu {
  position: absolute; z-index: 30; box-sizing: border-box; width: 172px; max-height: 420px;
  margin: 0; padding: 5px; border: 1px solid var(--line, #e2e2e2); border-radius: 0;
  background: var(--bg); color: var(--fg); box-shadow: 0 1px 1px rgb(0 0 0 / 6%); overflow: auto;
}
[data-write-editor-shell] .editor-menu[hidden] { display: none; }
.editor-size-menu button { display: block; width: 100%; height: 23.2px; padding: 3px 20px; border: 0; background: transparent; text-align: left; color: inherit; font: 12px/17.2px Arial, sans-serif; }
.editor-font-menu button, .editor-line-menu button { display: block; width: 100%; height: 23.2px; padding: 3px 20px; border: 0; background: transparent; text-align: left; color: inherit; font-size: 12px; line-height: 17.2px; white-space: nowrap; }
[data-write-editor-shell] .editor-font-menu { max-height: 429.6px; }
[data-write-editor-shell] .editor-line-menu { height: 200.375px; display: grid; grid-template-rows: repeat(8, 1fr); }
.editor-line-menu button { height: auto; }
.editor-ico { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; vertical-align: middle; }
[data-write-editor-shell] .editor-font-toggle { width: 75.4375px; padding: 0 8px; }
.editor-font-toggle [data-editor-font-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-write-editor-shell] .note-btn:disabled { cursor: default; opacity: .4; }
[data-write-editor-shell] .editor-table-menu { width: max-content; padding: 0; }
.editor-table-grid { display: grid; grid-template-columns: repeat(5, 20px); grid-auto-rows: 20px; }
.editor-table-grid button { width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); background: var(--bg); }
.editor-table-grid button[hidden] { display: none; }
.editor-table-grid button.picked { border-color: var(--fill-brand); background: var(--sub); }
.editor-table-label { height: 16px; text-align: center; font-size: 12px; line-height: 16px; }
.editor-table-controls { position: absolute; z-index: 35; display: flex; padding: 10px 5px; border: 1px solid var(--line); background: var(--bg); }
.editor-table-controls[hidden] { display: none; }
.editor-table-controls::before { position: absolute; top: -6px; left: 15px; width: 10px; height: 10px; content: ''; transform: rotate(45deg); border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--bg); }
.editor-table-controls button { display: flex; align-items: center; justify-content: center; width: 31px; height: 33px; padding: 0 8px; margin-left: -1px; border: 1px solid #e3e3e3; background: var(--bg); color: var(--fg); }
.editor-table-controls button:first-child { margin-left: 0; border-radius: 3px 0 0 3px; }
.editor-table-controls button:last-child { border-radius: 0 3px 3px 0; }
.editor-table-controls button:disabled { opacity: .4; }
.editor-table { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; }
.editor-table td { padding: 5px 3px; border: 1px solid #eee; min-width: 20px; vertical-align: top; overflow-wrap: anywhere; }
body.dark .editor-table td { border-color: var(--line); }
ul.editor-list { list-style: disc; }
ol.editor-list { list-style: decimal; }
.editor-list { margin: 0; padding-left: 40px; }
.editor-list li { display: list-item; list-style: inherit; margin: 0; }
.editor-list li > .editor-list { list-style-type: inherit; }
.editor-custom-color { display: flex; align-items: center; justify-content: space-between; width: 144px; margin-top: 7px; font-size: 12px; line-height: 23px; }
.editor-custom-color input { width: 25px; height: 23px; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.editor-con { width: 100px; height: 100px; object-fit: contain; vertical-align: middle; }
.editor-indent { margin-left: max(0px, min(var(--editor-indent), calc(100% - 2em))) !important; overflow-wrap: anywhere; }
[data-write-editor-shell] .editor-con-layer { position: absolute; left: 0; top: 42px; z-index: 40; max-width: 100%; }
.wrt-form-box [data-write-editor-shell] .editor-con-layer { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; }
[data-write-editor-shell] .editor-align-menu { display: flex; width: max-content; gap: 0; }
.editor-align-menu button { display: flex; align-items: center; justify-content: center; width: 35px; height: 33px; padding: 0; border: 0; background: transparent; color: inherit; }
[data-write-editor-shell] .note-palette { display: flex; width: 349px; max-width: 100%; gap: 0; padding: 5px; }
.editor-color-column { flex: 1 1 0; min-width: 0; padding: 0 7px 8px; }
.editor-color-column p { margin: 0 0 5px; font-size: 12px; line-height: 18px; }
.editor-color-grid { display: grid; grid-template-columns: repeat(8, 18px); grid-auto-rows: 18px; gap: 0; margin-top: 7px; }
[data-write-editor-shell] .note-swatch { width: 18px; height: 18px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 0; }
[data-write-editor-shell] .note-swatch:hover { border-color: var(--fg); }
[data-write-editor-shell] .note-swatch-off { width: 144px; height: 25px; min-height: 0; margin: 0; padding: 0 5px; border: 1px solid var(--line); border-radius: 0; font-size: 12px; color: inherit; background: var(--sub); }
[data-write-editor-shell] .note-url input[aria-invalid="true"] { border-color: var(--red, #c33); }
.wrt-form-box [data-write-editor-shell] .note-editable {
  height: auto; min-height: 318px; padding: 6px 12px 12px; overflow: visible;
  font-family: AppleSDGothicNeo-Regular, HelveticaNeue, "나눔고딕", NanumGothic, "돋움", Dotum, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.wrt-form-box .btm-wrt-btns.top { box-sizing: border-box; height: 43px; padding: 0 6px 5px; background: var(--sub); }
.wrt-form-box .btm-wrt-btns.top .btns-box { flex-wrap: nowrap; gap: 0; height: 37px; align-items: center; }
.wrt-form-box .wrt-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; min-width: 33px; padding: 0 8px; border: 1px solid #dfe1ee; border-radius: 0; background: var(--bg); color: var(--fg); font-size: 15px; }
.wrt-form-box [data-write-editor-shell] .editor-size-toggle { min-width: 54px; margin-right: 4px; border-radius: 3px; }
.wrt-form-box [data-editor-tool="bold"] { border-radius: 3px 0 0 3px; }
.wrt-form-box [data-editor-tool="strike"] { border-radius: 0 3px 3px 0; }
.wrt-form-box [data-editor-tool="color"], .wrt-form-box [data-editor-menu="align"], .wrt-form-box [data-editor-tool="link"] { margin-left: 4px; border-radius: 3px; }
.wrt-form-box [data-editor-menu="align"] { min-width: 51px; }
.wrt-form-box [data-write-editor-shell] .wrt-btn:hover, .wrt-form-box [data-write-editor-shell] .wrt-btn[aria-pressed="true"] { background: #eee; }
body.dark .wrt-form-box [data-write-editor-shell] .wrt-btn:hover,
body.dark .wrt-form-box [data-write-editor-shell] .wrt-btn[aria-pressed="true"] { background: var(--sub); }
.wrt-form-box .editor-size-menu button { height: 27.5px; font-size: 14px; line-height: 21px; }
.wrt-form-box .wrt-fixbar { position: relative; inset: auto; z-index: auto; box-sizing: border-box; height: 42px; padding: 6px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wrt-form-box .wrt-fixbar .btns-box { height: 29px; gap: 7px; }
.wrt-form-box .wrt-fixbar .fix-btn { flex: 0 0 30px; min-width: 30px; height: 29px; padding: 0; }
.wrt-form-box .wrt-fixbar .fix-lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-write-editor-shell] .note-url {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / 50%); gap: 0;
}
[data-write-editor-shell] .note-url[hidden] { display: none; }
.editor-url-content { box-sizing: border-box; width: 602px; max-width: 95vw; height: 290px; border: 1px solid rgb(0 0 0 / 20%); border-radius: 5px; background: var(--bg); color: var(--fg); box-shadow: 0 3px 9px rgb(0 0 0 / 50%); }
.editor-url-header { position: relative; box-sizing: border-box; height: 50px; padding: 10px 14px; border: 1px solid #ededef; }
.editor-url-header h4 { margin: 0; font: 700 20px/28px "맑은 고딕", sans-serif; }
[data-write-editor-shell] .note-url-cancel { position: absolute; top: 10px; right: 14px; min-width: 0; width: 17px; height: 22px; padding: 0; border: 0; background: transparent; color: #ccc; font: 21px/21px Arial, sans-serif; }
.editor-url-body { position: relative; box-sizing: border-box; height: 186px; padding: 14px 14px 0; }
.editor-url-group { box-sizing: border-box; height: 78px; padding-bottom: 20px; }
[data-write-editor-shell] .note-url label { display: block; height: 20px; margin-bottom: 6px; font: 700 15px/20px "맑은 고딕", sans-serif; color: inherit; }
[data-write-editor-shell] .note-url-input, [data-write-editor-shell] .note-url-text { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 6px 4px; border: 1px solid #ededef; border-radius: 0; font-size: 14px; line-height: 18px; background: var(--bg); color: var(--fg); }
.editor-url-footer { box-sizing: border-box; height: 52px; padding: 0 14px 12px; text-align: center; }
[data-write-editor-shell] .note-url-ok { box-sizing: border-box; min-width: 0; width: auto; height: 31.6px; padding: 5px 10px; border: 1px solid var(--fill-brand); border-radius: 2px; background: var(--fill-brand); color: var(--on-fill); font-size: 14px; line-height: 19.6px; }
[data-write-editor-shell] .note-url-ok:disabled { cursor: default; opacity: .65; }
[data-write-editor-shell] .note-url-msg { position: absolute; bottom: 9px; left: 14px; right: 14px; margin: 0; font-size: 12px; line-height: 16px; }
.wrt-form-box [data-write-editor-shell] .note-url { background: rgb(0 0 0 / 30%); }
.wrt-form-box .editor-url-content { width: 90vw; max-width: none; height: 261px; border: 0; border-radius: 0; box-shadow: none; }
.wrt-form-box .editor-url-header { height: 45px; padding: 10px 12px; border-width: 0 0 1px; }
.wrt-form-box .editor-url-header h4 { font: 700 16px/24px AppleSDGothicNeo-Regular, HelveticaNeue, sans-serif; }
.wrt-form-box .editor-url-body { height: 158px; padding: 14px 12px; }
.wrt-form-box .editor-url-group { height: 72px; padding-bottom: 14px; }
.wrt-form-box [data-write-editor-shell] .note-url label { height: 19px; margin-bottom: 6px; font: 700 14px/19px AppleSDGothicNeo-Regular, HelveticaNeue, sans-serif; }
.wrt-form-box [data-write-editor-shell] .note-url-input, .wrt-form-box [data-write-editor-shell] .note-url-text { height: 33px; padding: 6px 28px 4px 11px; border-color: #dfe1ee; line-height: 21px; }
.wrt-form-box .editor-url-footer { height: 58px; padding: 4px 12px 14px; }
.wrt-form-box [data-write-editor-shell] .note-url-ok { height: 35.6px; padding: 8px 12px 6px; border-radius: 0; font-weight: 700; }
.wrt-form-box [data-write-editor-shell] .note-url-msg { bottom: 0; left: 12px; right: 12px; }
body.dark .editor-url-header, body.dark [data-write-editor-shell] .note-url-input, body.dark [data-write-editor-shell] .note-url-text { border-color: var(--line); }
@media (max-width: 767px) {
  [data-write-editor-shell] .format-tools { position: relative; box-sizing: border-box; min-width: 0; max-width: 100%; overflow-x: auto; }
  [data-write-editor-shell] .format-tools .note-btn { flex-shrink: 0; }
}
.has-js .wrt-form-box .write-body-source { position: absolute; left: -9999px; width: 1px; height: 1px; min-height: 0; overflow: hidden; }
.wrt-form-box .wrt-notice-lst { margin: 0; padding: 10px 12px; list-style: none; background: var(--sub); color: var(--fg-3); font-size: 12px; line-height: 18px; }
.wrt-notice-lst li { position: relative; padding-left: 8px; }
.wrt-notice-lst li::before { content: '*'; position: absolute; left: 0; }
.wrt-form-box .btm-btns-box { justify-content: center; }
.wrt-form-box .btm-btns-box .btn-form { width: 75px; height: 32px; min-height: 32px; padding: 5px 0 4px; border-radius: 0; font-size: 14px; line-height: 21px; }
body:has(.wrt-form-box .wrt-fixbar) .footer { padding-bottom: 20px; }
