/* Default skin — the reference implementation every other skin is copied from. * * TOKENS LIVE IN THE CORE, NOT HERE. * static/core/tokens.css defines every --mg-* default and the shell loads it * before this file (docs/DECISIONS.md D9-1). This stylesheet only consumes * them. Redefine a token in a :root block here to override a core default — * do not restate the whole set, or the fallback layer stops being observable. * * NO HARDCODED COLORS OR SIZES (CLAUDE.md 코드 스타일). Everything below reads * --mg-*. A literal value here would be invisible to the theme editor and to * every skin that inherits this file's structure. * * SECTIONS * 1. base elements * 2. shell — layout shared by all four header placements * 3. shell — per-placement rules (top / bottom / left / right) * 4. content typography * 5. components * 6. forms * 7. block engine * 8. boards * 9. characters * 10. manage * 11. narrow viewports */ /* ------------------------------------------------------------------ * * 1. base elements * ------------------------------------------------------------------ */ * { box-sizing: border-box; } body { margin: 0; background-color: var(--mg-bg); background-image: var(--mg-bg-image); background-repeat: var(--mg-bg-repeat); background-position: var(--mg-bg-position); background-size: var(--mg-bg-size); background-attachment: var(--mg-bg-attachment); color: var(--mg-text); font-family: var(--mg-font-body); font-size: var(--mg-font-size-base); line-height: var(--mg-line-height); } h1, h2, h3, h4, h5, h6 { font-family: var(--mg-font-heading); font-weight: 400; line-height: 1.3; margin: 0 0 var(--mg-space-3); } h1 { font-size: var(--mg-font-size-xl); } h2 { font-size: var(--mg-font-size-lg); } h3 { font-size: var(--mg-font-size-md); } a { color: var(--mg-link); text-decoration: none; } a:hover { color: var(--mg-link-hover); text-decoration: underline; } img { max-width: 100%; } hr { border: 0; border-top: var(--mg-border-width) solid var(--mg-border); margin: var(--mg-space-5) 0; } /* ------------------------------------------------------------------ * * 2. shell — shared by all four header placements * * The shell DOM is core-owned and never re-rendered by hx-boost * (CLAUDE.md 금지 8·9). Placement is switched with a class alone, so * the markup is identical in all four modes. * ------------------------------------------------------------------ */ .mg-shell { display: grid; min-height: 100vh; } .mg-shell-header { grid-area: header; background: var(--mg-surface); display: flex; align-items: center; gap: var(--mg-space-5); padding: var(--mg-space-3) var(--mg-space-5); } .mg-shell-brand { font-family: var(--mg-font-heading); font-size: var(--mg-font-size-lg); color: var(--mg-accent); text-decoration: none; white-space: nowrap; } .mg-shell-brand:hover { color: var(--mg-accent-hover); text-decoration: none; } .mg-shell-nav-toggle { display: none; background: transparent; border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius-pill); color: var(--mg-text); font: inherit; padding: var(--mg-space-1) var(--mg-space-3); cursor: pointer; } .mg-shell-nav { display: flex; align-items: center; gap: var(--mg-space-2); flex: 1; justify-content: flex-end; } .mg-shell-nav-item { position: relative; } .mg-shell-nav a, .mg-shell-nav span, .mg-shell-account a { display: block; color: var(--mg-text); font-size: var(--mg-font-size-sm); font-weight: 500; text-decoration: none; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-pill); white-space: nowrap; transition: background var(--mg-transition-fast), color var(--mg-transition-fast); } .mg-shell-nav a:hover, .mg-shell-account a:hover { color: var(--mg-accent); background: var(--mg-accent-soft); text-decoration: none; } /* Active menu item. Hover darkens, so the current page is marked with the soft tint instead — otherwise "active" and "hovered" look identical. */ .mg-shell-nav [aria-current="page"] { color: var(--mg-accent); background: var(--mg-accent-soft); text-decoration: none; } .mg-shell-subnav { display: none; background: var(--mg-surface); border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius-sm); box-shadow: var(--mg-shadow-lift); padding: var(--mg-space-1); min-width: 100%; } .mg-shell-nav-item:hover > .mg-shell-subnav, .mg-shell-nav-item:focus-within > .mg-shell-subnav { display: block; position: absolute; inset-inline-start: 0; z-index: 1; } .mg-shell-account { display: flex; gap: var(--mg-space-1); } #mango-player-root:empty { display: none; } .mg-shell-scrim { display: none; } /* Back-to-top. Present in the DOM in all four placements, revealed by the runtime body.mg-scrolled class. */ .mg-shell-totop { display: none; position: fixed; inset-inline-end: var(--mg-space-5); bottom: var(--mg-space-5); z-index: 2; border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius-pill); background: var(--mg-surface); color: var(--mg-text); box-shadow: var(--mg-shadow-lift); padding: var(--mg-space-2) var(--mg-space-4); cursor: pointer; font-size: inherit; transition: transform var(--mg-transition-fast); } .mg-shell-totop:active { transform: scale(0.96); } body.mg-scrolled .mg-shell-totop { display: block; } .mg-shell-error { position: fixed; inset-inline: var(--mg-space-5); bottom: var(--mg-space-5); z-index: 5; border: var(--mg-border-width) solid var(--mg-danger); border-radius: var(--mg-radius-sm); background: var(--mg-danger-soft); color: var(--mg-text); box-shadow: var(--mg-shadow-lift); padding: var(--mg-space-3) var(--mg-space-4); text-align: center; } .mg-shell-error[hidden] { display: none; } /* The sidebar is a shell node, so it cannot live inside #content: hx-boost replaces that element on every navigation. This wrapper owns the box #content used to own, keeping the header gutter aligned without sidebar- aware variants. With the sidebar off, #content gets the old box back. */ .mg-shell-main { grid-area: content; display: flex; gap: var(--mg-space-5); width: 100%; max-width: var(--mg-content-width); margin: 0 auto; padding: var(--mg-space-6) var(--mg-space-5); } #content { flex: 1 1 auto; min-width: 0; } /* Hidden is the base state so an unknown or missing sidebar mode fails closed. */ .mg-shell-sidebar { display: none; flex: 0 0 var(--mg-shell-sidebar-width); min-width: 0; flex-direction: column; gap: var(--mg-space-5); } body.mg-sidebar-left .mg-shell-sidebar, body.mg-sidebar-right .mg-shell-sidebar { display: flex; } /* DOM order remains content first. The left placement reverses only the visual row, so tab order still follows the reading order and needs no narrow-screen reorder. */ body.mg-sidebar-left .mg-shell-main { flex-direction: row-reverse; } /* The render tag must be flush with the aside tags or whitespace prevents :empty from releasing this otherwise empty column. */ body.mg-sidebar-left .mg-shell-sidebar:empty, body.mg-sidebar-right .mg-shell-sidebar:empty { display: none; } /* Management screens keep the node but opt out with CSS so shell markup never branches. The switch has to live inside #content: hx-boost swaps that element and nothing else, so a class set by the server goes stale the moment a boosted link crosses into or out of /manage/ - the sidebar stayed visible on manage screens and then stayed hidden after leaving them. Keying off the manage wrapper follows the swap for free, and the #content in :has() outranks the placement rules, so this no longer depends on file order either. */ .mg-shell-main:has(#content .mg-manage) .mg-shell-sidebar { display: none; } /* The sidebar remains narrow at every viewport, so its columns bridge to one track without a media query. */ .mg-shell-sidebar .mg-block-columns { grid-template-columns: 1fr; } /* Measured article-column widths at each boundary (960px content width, 18rem sidebar, 24px gap, 24px gutters): header top/bottom @64rem -> 600px header left/right @64rem -> 408px the 16rem vertical nav is a column header left/right @75rem -> 584px outside .mg-shell-main A container query would express this once, but container-type implies contain: layout and would make .mg-shell-main a containing block for fixed descendants. The gallery lightbox inside #content must cover the viewport, so the two media queries stay separate. */ @media (max-width: 75rem) { body.mg-header-left .mg-shell-main, body.mg-header-right .mg-shell-main { flex-direction: column; } body.mg-header-left .mg-shell-sidebar, body.mg-header-right .mg-shell-sidebar { flex: 0 0 auto; } } @media (max-width: 64rem) { body.mg-sidebar-left .mg-shell-main, body.mg-sidebar-right .mg-shell-main { flex-direction: column; } body.mg-sidebar-left .mg-shell-sidebar, body.mg-sidebar-right .mg-shell-sidebar { flex: 0 0 auto; } } /* ------------------------------------------------------------------ * * 3. shell — per-placement rules * * Each placement is self-contained below. A distributed skin that supports * only some placements can drop the blocks it does not want and keep the * rest; nothing outside this section reads the placement class except the * two dock offsets noted inline. * ------------------------------------------------------------------ */ /* --- top ---------------------------------------------------------- */ body.mg-header-top .mg-shell { grid-template-areas: "header" "content"; grid-template-rows: auto 1fr; } /* The header is full-bleed but its contents line up with .mg-shell-main. There is no inner wrapper element in the shell markup, so the gutter is computed instead of nested. */ body.mg-header-top .mg-shell-header, body.mg-header-bottom .mg-shell-header { border-bottom: var(--mg-border-width) solid var(--mg-border); padding-inline: max( var(--mg-space-5), calc((100% - var(--mg-content-width)) / 2) ); } /* Only meaningful for the top placement: left/right are already sticky and bottom is a fixed dock. */ body.mg-headerfix-on.mg-header-top .mg-shell-header { position: sticky; top: 0; z-index: 2; } /* --- bottom ------------------------------------------------------- */ body.mg-header-bottom .mg-shell { grid-template-areas: "content" "header"; grid-template-rows: 1fr auto; padding-block-end: var(--mg-shell-dock-height); } body.mg-header-bottom .mg-shell-header { position: fixed; inset-inline: 0; bottom: 0; height: var(--mg-shell-dock-height); z-index: 2; border-bottom: 0; border-top: var(--mg-border-width) solid var(--mg-border); } body.mg-header-bottom .mg-shell-subnav { bottom: 100%; } /* Floating elements clear the dock. */ body.mg-header-bottom .mg-shell-totop, body.mg-header-bottom .mg-shell-error { bottom: calc(var(--mg-shell-dock-height) + var(--mg-space-5)); } /* --- left / right ------------------------------------------------- */ body.mg-header-left .mg-shell { grid-template-areas: "header content"; grid-template-columns: var(--mg-shell-nav-width) 1fr; } body.mg-header-right .mg-shell { grid-template-areas: "content header"; grid-template-columns: 1fr var(--mg-shell-nav-width); } /* Pin the vertical sidebar to the viewport. As a grid item its default align-self: stretch makes the column as tall as the content, so on a long page the bottom of the menu can only be reached by scrolling. align-self must drop to start for sticky to have room to move. */ body.mg-header-left .mg-shell-header, body.mg-header-right .mg-shell-header { flex-direction: column; align-items: stretch; gap: var(--mg-space-2); position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--mg-space-5) var(--mg-space-4); } body.mg-header-left .mg-shell-header { border-inline-end: var(--mg-border-width) solid var(--mg-border); } body.mg-header-right .mg-shell-header { border-inline-start: var(--mg-border-width) solid var(--mg-border); } body.mg-header-left .mg-shell-nav, body.mg-header-right .mg-shell-nav { align-items: stretch; flex-direction: column; justify-content: flex-start; } body.mg-header-left .mg-shell-account, body.mg-header-right .mg-shell-account { flex-direction: column; } body.mg-header-left .mg-shell-subnav, body.mg-header-right .mg-shell-subnav { border: 0; box-shadow: none; background: transparent; margin-inline-start: var(--mg-space-3); padding: 0; } /* Vertical placements expand submenus in place instead of flying out. The base hover rule sets position: absolute; it has to be undone here or the open list floats and covers the next menu item. A flyout is not an option: the sidebar is viewport-height with overflow-y: auto, so anything escaping its box gets clipped. */ body.mg-header-left .mg-shell-nav-item:hover > .mg-shell-subnav, body.mg-header-left .mg-shell-nav-item:focus-within > .mg-shell-subnav, body.mg-header-right .mg-shell-nav-item:hover > .mg-shell-subnav, body.mg-header-right .mg-shell-nav-item:focus-within > .mg-shell-subnav { position: static; } /* ------------------------------------------------------------------ * * 4. content typography * ------------------------------------------------------------------ */ #content > h1:first-child { margin-bottom: var(--mg-space-5); } #content p { margin: 0 0 var(--mg-space-4); } #content ul, #content ol { padding-inline-start: var(--mg-space-5); } #content dl { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: var(--mg-space-2) var(--mg-space-5); margin: 0 0 var(--mg-space-5); padding: var(--mg-space-4) var(--mg-space-5); background: var(--mg-surface-tint); border-radius: var(--mg-radius); } #content dt { font-weight: 700; font-size: var(--mg-font-size-sm); color: var(--mg-text-muted); } #content dd { margin: 0; } .mg-muted { color: var(--mg-text-muted); font-size: var(--mg-font-size-sm); } /* ------------------------------------------------------------------ * * 5. components * ------------------------------------------------------------------ */ .mg-card { background: var(--mg-surface); border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius); box-shadow: var(--mg-shadow); padding: var(--mg-space-5); margin-bottom: var(--mg-space-4); } .mg-btn { display: inline-flex; align-items: center; gap: var(--mg-space-1); padding: var(--mg-space-2) var(--mg-space-5); border-radius: var(--mg-radius-pill); border: var(--mg-border-width) solid var(--mg-accent); cursor: pointer; text-decoration: none; font-family: var(--mg-font-body); font-weight: 700; font-size: var(--mg-font-size-sm); line-height: 1.6; transition: transform var(--mg-transition-fast), background var(--mg-transition-fast), color var(--mg-transition-fast), border-color var(--mg-transition-fast); } .mg-btn:hover { text-decoration: none; } /* Press feedback only — the brief specifies no hover motion. */ .mg-btn:active { transform: scale(0.96); } .mg-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Button mode is a class, not a token (D9-1: modes are class toggles because they bundle several rules). Outline is the default when no mode class is present. */ body.mg-button-outline .mg-btn, body:not([class*="mg-button-"]) .mg-btn { background: transparent; color: var(--mg-accent); } body.mg-button-outline .mg-btn:hover, body:not([class*="mg-button-"]) .mg-btn:hover { background: var(--mg-accent-soft); } body.mg-button-solid .mg-btn { background: var(--mg-accent); color: var(--mg-accent-text); } body.mg-button-solid .mg-btn:hover { background: var(--mg-accent-hover); border-color: var(--mg-accent-hover); } body.mg-button-ghost .mg-btn { background: transparent; color: var(--mg-accent); border-color: transparent; } body.mg-button-ghost .mg-btn:hover { background: var(--mg-accent-soft); } .mg-table { width: 100%; border-collapse: collapse; font-size: var(--mg-font-size-sm); } .mg-table th, .mg-table td { border-bottom: var(--mg-border-width) solid var(--mg-border); padding: var(--mg-space-3); text-align: left; } .mg-table th { color: var(--mg-text-muted); font-weight: 700; font-size: var(--mg-font-size-xs); letter-spacing: 0.03em; } .mg-table tbody tr:hover td { background: var(--mg-surface-tint); } .mg-comment { border-top: var(--mg-border-width) solid var(--mg-border); padding: var(--mg-space-4) 0; } .mg-comment--reply { margin-left: var(--mg-space-6); border-top: 0; background: var(--mg-surface-tint); border-radius: var(--mg-radius-sm); padding: var(--mg-space-3) var(--mg-space-4); margin-top: var(--mg-space-2); } .emoticon { display: inline-block; width: var(--mg-emoticon-size); height: var(--mg-emoticon-size); object-fit: contain; vertical-align: middle; } .mg-emoticon-picker { margin: var(--mg-space-2) 0; padding: var(--mg-space-3); border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius); background: var(--mg-surface); } .mg-emoticon-picker h2 { font-size: var(--mg-font-size-sm); margin: var(--mg-space-2) 0; } .mg-emoticon-picker__items { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); } .mg-emoticon-picker__item { border: 0; padding: 0; background: transparent; } .mg-emoticon-picker__item img { width: calc(var(--mg-emoticon-size) * 2); height: calc(var(--mg-emoticon-size) * 2); } .toastui-editor-defaultUI-toolbar button.mg-emoticon-picker__toolbar-btn { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; } /* Spoiler curtain. UI only — never a permission boundary (D22). The title is still in the HTML source; the

element does the hiding with no JavaScript so it cannot fail open. */ .mg-spoiler { display: block; border: var(--mg-border-width) solid var(--mg-border); border-radius: var(--mg-radius); background: var(--mg-surface-tint); padding: var(--mg-space-4); } /* Lists keep the curtain in the text flow so the badge and meta stay on one line —

defaults to block and would push them onto the next row. */ .mg-spoiler--inline { display: inline-block; vertical-align: baseline; border-radius: var(--mg-radius-pill); padding: 0 var(--mg-space-3); } .mg-spoiler__label { color: var(--mg-text-muted); font-size: var(--mg-font-size-sm); cursor: pointer; } /* Rating badge. Part of the title, so it sits inside

(D22-3). / .mg-rating { display: inline-flex; align-items: center; vertical-align: middle; border-radius: var(--mg-radius-pill); background: var(--mg-surface-tint); color: var(--mg-text-muted); font-family: var(--mg-font-body); font-size: var(--mg-font-size-xs); font-weight: 700; line-height: 1.6; padding: 0 var(--mg-space-3); margin-inline-start: var(--mg-space-2); } .mg-rating--teen { background: var(--mg-green-soft); color: var(--mg-green-hover); } .mg-rating--adult { background: var(--mg-accent-soft); color: var(--mg-accent-hover); } / ------------------------------------------------------------------ * * 6. forms * * Core screens render Django's form.as_p (D8-2), so these have to reach bare * elements. :where() drops the specificity to zero on purpose: vendor editor * stylesheets (Toast UI, Editor.js) use class selectors and must keep winning * over anything here. * ------------------------------------------------------------------ / / Control metrics (10px 14px, 19px box, 6px box radius) are literal because the design system specifies them outside the --mg-space-* rhythm. Colors stay on tokens. / :where(#content) :where(input, select, textarea) { font-family: var(--mg-font-body); font-size: var(--mg-font-size-base); padding: 10px 14px; border-radius: var(--mg-radius-sm); border: var(--mg-border-width) solid var(--mg-border); background: var(--mg-surface); color: var(--mg-text); outline: none; transition: border-color var(--mg-transition-fast); width: 100%; max-width: 100%; } :where(#content) :where(input, select, textarea):focus { border-color: var(--mg-accent); } :where(#content) :where(select):hover { border-color: var(--mg-border-strong); } :where(#content) :where(textarea) { resize: vertical; min-height: 90px; } / form.as_p wraps each field in a
; that is our .ds-field. / :where(#content) :where(form p) { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--mg-space-4); } :where(#content) :where(label) { font-weight: 700; font-size: var(--mg-font-size-sm); } / Django renders help_text as . / :where(#content) :where(.helptext) { color: var(--mg-text-muted); font-size: var(--mg-font-size-xs); } :where(#content) :where(button, input[type="submit"]) { cursor: pointer; } / Checkbox and radio. Django emits a bare , with no sibling box element to paint, so the control is drawn on the input itself via appearance:none. The editors ship their own controls and must keep them. / :where(#content) :where(input[type="checkbox"], input[type="radio"]):not( :where(.codex-editor , .toastui-editor-defaultUI ) ) { appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px; padding: 0; border-radius: 6px; border: var(--mg-border-width) solid var(--mg-border-strong); background: var(--mg-surface); display: inline-grid; place-content: center; vertical-align: text-bottom; transition: background var(--mg-transition-fast), border-color var(--mg-transition-fast); } :where(#content) :where(input[type="radio"]):not( :where(.codex-editor , .toastui-editor-defaultUI ) ) { border-radius: var(--mg-radius-pill); } :where(#content) :where(input[type="checkbox"], input[type="radio"]):hover:not( :where(.codex-editor , .toastui-editor-defaultUI ) ) { border-color: var(--mg-accent); } :where(#content) :where(input[type="checkbox"], input[type="radio"]):checked:not( :where(.codex-editor , .toastui-editor-defaultUI ) ) { background: var(--mg-accent); border-color: var(--mg-accent); } :where(#content) :where(input[type="checkbox"])::after { content: ""; width: 5px; height: 9px; border-right: 2px solid var(--mg-accent-text); border-bottom: 2px solid var(--mg-accent-text); transform: rotate(45deg) translate(-1px, -1px); opacity: 0; transition: opacity 0.12s ease; } :where(#content) :where(input[type="radio"])::after { content: ""; width: 7px; height: 7px; border-radius: var(--mg-radius-pill); background: var(--mg-accent-text); opacity: 0; transition: opacity 0.12s ease; } :where(#content) :where(input[type="checkbox"], input[type="radio"]):checked::after { opacity: 1; } :where(#content) :where(input[type="checkbox"], input[type="radio"]):focus-visible { box-shadow: 0 0 0 3px var(--mg-accent-soft); } :where(#content) :where(input, select, textarea):disabled { opacity: 0.45; cursor: not-allowed; } / A checkbox/radio field is a row, not a stacked label-over-control group. / :where(#content) :where(form p):has(> input[type="checkbox"], > input[type="radio"]) { flex-direction: row; align-items: center; gap: 9px; } / Dropdown — built over a native