/* The rich editor (ADR-0016 decision 6; core/_rich_editor.html, core/rich-editor.js), loaded with richtext.css by {% rich_editor_css %}. Nothing moves when the editor starts (CLS 0): under html.js the toolbar takes its room from the first paint (hidden until ready), and the editing box and the textarea it replaces are the same height (--rich-box, from the textarea's rows: .rich--rows-N). The box scrolls inside and can be made taller by its corner, like the textarea. Without JavaScript only the textarea shows; when the editor fails to load, the textarea stays and the toolbar's room goes. */ .rich{--rich-rows:8;--rich-box:max(180px,calc(var(--rich-rows) * 1.8em + 29px));display:grid;gap:6px;min-width:0} .rich--rows-2{--rich-rows:2} .rich--rows-3{--rich-rows:3} .rich--rows-4{--rich-rows:4} .rich--rows-5{--rich-rows:5} .rich--rows-6{--rich-rows:6} .rich--rows-10{--rich-rows:10} .rich--rows-12{--rich-rows:12} .rich--rows-14{--rich-rows:14} .rich--rows-16{--rich-rows:16} .rich--rows-20{--rich-rows:20} /* The body's textarea only (a dialog's description field keeps its own rows). */ .rich>textarea{block-size:var(--rich-box);line-height:1.8} .rich__toolbar,.rich__surface{display:none} .js .rich__toolbar{display:flex;visibility:hidden} .js .rich[data-rich-state="ready"] .rich__toolbar{visibility:visible} .js .rich[data-rich-state="ready"] .rich__surface{display:block} .js .rich[data-rich-state="failed"] .rich__toolbar{display:none} /* The no-JS "서식 없이 저장" box: only where the textarea is what is posted. */ .js .rich:not([data-rich-state="failed"]) .rich__fallback{display:none} html:not(.js) .rich__keys,.rich[data-rich-state="failed"] .rich__keys{display:none} /* Toolbar (APG toolbar; v0.7.1 icons, the user's sample of 2026-10-14): commands are icons (Lucide, the vendored sprite) named by aria-label and a tooltip; 문단 모양, 글꼴 and 글자 크기 show their current value in words, like a select; the colour menus show a bar in the current colour. A pressed toggle is filled and framed (not colour alone), as is an open menu's button. */ .rich__toolbar{position:relative;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .rich__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:2px;min-height:var(--target-min);min-width:var(--target-min);padding:4px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font-family:var(--sans);font-size:.9rem;line-height:1.3;cursor:pointer} .rich__btn--icon{padding-inline:6px} .rich__btn:hover{background:var(--sunk)} .rich__btn:focus-visible,.rich__toolbar--keys .rich__btn:focus{outline:3px solid var(--focus);outline-offset:1px} .rich__btn[aria-pressed="true"]{border-color:var(--ink);background:var(--yellow-soft)} .rich__btn[aria-pressed="true"] .rich__icon{stroke-width:2.5} .rich__btn[aria-expanded="true"]{border-color:var(--line-strong);background:var(--sunk)} .rich__btn[aria-disabled="true"]{color:var(--muted);cursor:default} .rich__btn[aria-disabled="true"]:hover{background:transparent} .rich__sep{align-self:stretch;width:1px;margin:6px 3px;background:var(--line)} .rich__sep--wrapped{visibility:hidden} /* at a wrapped row's end or start (rich-editor.js) */ /* An icon: the sprite's symbol draws its own strokes in the text colour (currentColor). */ .rich__icon{flex:none;width:20px;height:20px;pointer-events:none} .rich__caret{flex:none;width:14px;height:14px;margin-inline-start:1px;color:var(--ink-2);pointer-events:none} /* A colour menu's face: its icon over a bar in the current colour (rich-editor.js copies the chosen sample's palette class onto the bar). The text colour's bar is that colour; the background colour's bar is that background, framed while there is none. */ .rich__glyph{display:inline-grid;justify-items:center;gap:1px} .rich__bar{display:block;width:18px;height:4px;border-radius:1px} .rich__bar--color{background-color:currentColor} .rich__bar--highlight{box-shadow:inset 0 0 0 1px var(--line-strong)} .rich__glyph .rich__icon{width:18px;height:18px} /* A select-like menu's face: the current item's name, as wide as the longest one (the names stacked unseen in the same cell keep the width: nothing moves as it changes). */ .rich__btn--value{justify-content:space-between;gap:4px;padding-inline:10px 6px} .rich__value{display:grid;text-align:start} .rich__value>*,.rich__ghost>*{grid-area:1/1} .rich__ghost{display:grid;visibility:hidden} .rich__now{white-space:nowrap} .rich__ghost>*{white-space:nowrap} /* Tooltips (role="tooltip"; never a title, which the keyboard cannot show): a control's name and shortcut, below it (above it on a wrapped toolbar's first rows: rich-editor.js .rich__tip--above, so it never covers another control). Hover shows one after a short wait (pointers that hover), keyboard focus at once, a long touch from rich-editor.js (.rich__btn--tip); Esc or a click on it hides it (.rich__toolbar--quiet); an open menu's button shows none. It stays while the pointer is over it (it is part of its control). */ .rich__tip{position:absolute;z-index:25;top:calc(100% + 6px);left:50%;transform:translateX(-50%);visibility:hidden;width:max-content;max-width:16em;padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--surface);font-family:var(--sans);font-size:.8125rem;font-weight:400;line-height:1.4;white-space:nowrap;text-align:center;pointer-events:auto;transition:visibility 0s} .rich__tip kbd{margin-inline-start:6px;font:inherit;color:var(--on-deep-2)} .rich__tip--start{left:0;transform:none} .rich__tip--end{left:auto;right:0;transform:none} .rich__tip--above{top:auto;bottom:calc(100% + 6px)} /* not the last row: never over a control */ @media (hover:hover){ .rich__btn:hover>.rich__tip{visibility:visible;transition-delay:.45s} } .rich__btn:focus-visible>.rich__tip,.rich__toolbar--keys .rich__btn:focus>.rich__tip,.rich__btn--tip>.rich__tip{visibility:visible;transition-delay:0s} .rich__btn[aria-expanded="true"]>.rich__tip,.rich__toolbar--quiet .rich__btn>.rich__tip{visibility:hidden;transition-delay:0s} /* Menus (APG menu button): under their button; on a phone, across the toolbar. */ .rich__menu{position:relative;display:inline-flex} .rich__list{position:absolute;z-index:30;top:calc(100% + 4px);inset-inline-start:0;width:max-content;min-width:11em;max-width:min(22em,calc(100vw - 32px));margin:0;padding:6px;list-style:none;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)} .rich__list[hidden]{display:none} .rich__list--end{inset-inline:auto 0} /* would pass the window's right edge (rich-editor.js) */ .rich__item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--target-min);padding:4px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-family:var(--sans);font-size:.92rem;text-align:start;cursor:pointer} .rich__item:hover{background:var(--sunk)} .rich__item:focus-visible,.rich__toolbar--keys .rich__item:focus{outline:3px solid var(--focus);outline-offset:-3px;background:var(--sunk)} .rich__item[aria-disabled="true"]{color:var(--muted);cursor:default} /* The chosen item: a filled dot (shape, not colour alone). */ .rich__item[role="menuitemradio"]::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor;border-radius:50%} .rich__item[aria-checked="true"]::before{background:currentColor} .rich__item[aria-checked="true"]{font-weight:700} /* Each item shows itself: a typeface or size in that face or size, a heading as a heading. */ .rich__preview--read{font-family:var(--read)} .rich__preview--h2,.rich__preview--h3{font-family:var(--serif);font-weight:700;line-height:1.3} .rich__preview--h2{font-size:1.25rem} .rich__preview--h3{font-size:1.08rem} /* A colour's sample: "가" in that colour, or on that background (:where: the palette class gives the background); 없음 is crossed out. */ .rich__swatch{display:inline-grid;place-items:center;flex:none;width:1.9em;height:1.9em;border:1px solid var(--line-strong);border-radius:6px;font-family:var(--read);font-weight:700;line-height:1} :where(.rich__swatch){background-color:var(--surface)} .rich__swatch--highlight:not([class*=" rt-h-"]){background-image:linear-gradient(to top right,transparent calc(50% - 1px),var(--danger) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))} /* The colour menus: a grid of named samples. The chosen one is framed and its name bold. */ .rich__list--grid{display:grid;grid-template-columns:repeat(3,minmax(5em,1fr));gap:2px;min-width:0} .rich__list--grid>li{display:flex} .rich__list--grid .rich__item{flex-direction:column;justify-content:center;gap:4px;padding:6px 4px;font-size:.85rem;text-align:center} .rich__list--grid .rich__item::before{content:none} .rich__list--grid .rich__item[aria-checked="true"] .rich__swatch{outline:2px solid var(--ink);outline-offset:2px} @media (max-width:600px){ .rich__menu{position:static} .rich__list{inset-inline:6px;width:auto;max-width:none} .rich__list--grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* Tooltips hang from the editor too, under the toolbar's one row, in its middle. */ .rich__btn{position:static} .rich__tip,.rich__tip--start,.rich__tip--end,.rich__tip--above{top:62px;bottom:auto;left:0;right:0;margin-inline:auto;transform:none;font-size:.875rem} /* Phones (ADR-0017 decision 13): the tools on one row that scrolls sideways, as phone editors do, instead of five or six wrapped rows pushing the text box off the screen (and out of sight once the keyboard is up). A shadow at an edge says more tools lie that way (background-attachment: the covers move with the content, the shadows stay). The menus hang from the editor (position:relative below), not from the scrolling row, so the row never clips them; 62px is the one row's height (44px tools, 6px padding, 1px border, and a 4px gap). */ .rich{position:relative} .rich__toolbar{position:static;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin; background:linear-gradient(to right,var(--surface) 30%,transparent) left/24px 100% no-repeat local, linear-gradient(to left,var(--surface) 30%,transparent) right/24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) left/10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) right/10px 100% no-repeat scroll, var(--surface)} .rich__toolbar>*{flex:none} .rich__list{top:62px} } /* The editing box: the textarea's box, scrolling inside. */ .rich__doc{display:block;block-size:var(--rich-box);overflow-y:auto;resize:vertical;padding:13px 16px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);line-height:1.8} .rich__doc:focus-visible{border-color:var(--ink);outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--bg)} .rich__doc[aria-invalid="true"]{border-color:var(--ink);border-width:2px} .rich__doc img{max-width:100%;height:auto;border-radius:8px} .rich__doc .ProseMirror-selectednode{outline:3px solid var(--focus);outline-offset:2px} .rich__doc table{white-space:normal} .rich__doc .selectedCell{background:var(--yellow-soft)} .rich__video{padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:12px;font-family:var(--sans);white-space:normal} /* What @tiptap/core 3.31.4 would write into a