/* 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;
}
/* Two background layers. --mg-bg-image is the admin's own choice and sits on
TOP; ROOT's paper texture is baked underneath as part of the skin's identity
(the design system puts it on body itself). With no admin image the token is
`none`, which draws an empty layer and lets the texture through — so baking
it in never blocks a background the admin sets later.
⚠ repeat/position/size/attachment are single values and apply to BOTH
layers; that is why the texture is authored full-bleed at 1920x1080. */
body {
margin: 0;
background-color: var(--mg-bg);
/* 층 순서: 관리자 배경 → 밝히는 베일 → 종이 질감. 베일이 가운데라 질감만
밝아지고 관리자가 올린 이미지는 손대지 않는다. 세기는 토큰이다. */
background-image:
var(--mg-bg-image),
linear-gradient(rgb(var(--mg-bg-texture-veil) / var(--mg-bg-texture-lighten)) 0 100%),
url("bg-paper-texture.0fd4ffd7c6d7.webp");
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);
word-break: keep-all;
}
/* ROOT's display voice is heavy squared geometric: flat terminals, wide
counters, set tight. It never reads delicate, so headings start at 800 and
only step down at h3. Weight 400 would fall back to the body voice. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--mg-font-heading);
font-weight: 800;
line-height: 1.24;
letter-spacing: var(--mg-track-tight);
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); font-weight: 500; line-height: 1.38; }
/* h4 hands off to the body voice: below h3 a squared display face stops
reading as structure and starts reading as noise. */
h4 {
font-family: var(--mg-font-body);
font-size: var(--mg-font-size-base);
font-weight: 600;
letter-spacing: var(--mg-track-wide);
}
/* h5 and h6 are system labels, not titles: mono, uppercase, tracked out. */
h5, h6 {
font-family: var(--mg-font-mono);
font-size: var(--mg-font-size-xs);
font-weight: 700;
letter-spacing: var(--mg-track-wider);
text-transform: uppercase;
color: var(--mg-text-muted);
}
a {
color: var(--mg-link);
text-decoration: none;
}
a:hover {
color: var(--mg-link-hover);
text-decoration: underline;
}
img {
max-width: 100%;
}
/* A ROOT rule is a bar, not a line: a solid ink block with a gold tail. The
tail is what keeps a divider from reading as a border. */
hr {
border: 0;
height: var(--mg-bar-h);
background: var(--mg-bar-ink);
margin: var(--mg-space-6) 0;
position: relative;
}
hr::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: 0;
width: 22%;
background: var(--mg-bar-gold);
}
/* Gold is rationed to one element per view, so selection is where it can be
spent freely: it exists only while the reader is holding it. */
::selection {
background: var(--mg-accent);
color: var(--mg-accent-text);
}
/* 2px ink edge plus a soft gold halo. The halo is what makes the focus ring
visible against both the paper ground and a white card. */
:focus-visible {
outline: var(--mg-stroke-1) solid var(--mg-border-strong);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--mg-accent-soft);
}
/* ROOT motion primitives. Enter slow and eased out, exit fast; nothing
bounces and nothing loops. Names carry the mg- prefix for the same reason
tokens do — admin-pasted CSS shares this namespace. */
@keyframes mg-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes mg-wipe {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes mg-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* A sweep is a READ, not a shine: one pass, left to right, never looped
(design system guidelines/frame-variants). mg-flash is the press
acknowledgement -- it starts at the tone and leaves. */
@keyframes mg-sweep {
from { background-position: -70% 0; }
to { background-position: 170% 0; }
}
@keyframes mg-flash {
from { opacity: 0.4; }
to { opacity: 0; }
}
@keyframes mg-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes mg-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ------------------------------------------------------------------ *
* 1-b. navigation — one rule for the whole site
*
* Two effects with separate jobs. The View Transitions API crosses the
* old screen out over --mg-transition-fast; the elements of the new one
* arrive over --mg-transition with the ladder below. The crossing is the
* shorter of the two on purpose, so it reads as "the old screen left"
* rather than as a second entrance competing with the ladder.
*
* Nothing here is scoped to a screen: #content is the only node hx-boost
* ever replaces, so one rule set reaches every page, board, character and
* manage screen. The shell is excluded by the same fact.
*
* Contract: docs/SKIN_API.md "화면 전환·등장 계약".
* ------------------------------------------------------------------ */
/* ⛔ Both halves are retimed together, with the same duration token and the
same easing. The browser isolates the pair and blends it with plus-lighter,
so the two opacities are added: matching curves keep the sum at exactly 1
for the whole crossing, while retiming one side alone makes the middle of
the transition visibly brighter -- a flash with nothing in the console.
*
* ⚠ The incoming half is mostly bare while this runs -- every #content child
* past the first is still held at opacity 0 by its stagger delay -- so the
* crossing reads as the old screen leaving rather than as a second fade
* layered over the ladder. Lengthening it past --mg-transition would undo
* that. */
::view-transition-old(root) {
animation: mg-fade-out var(--mg-duration-fast) var(--mg-ease-out) both;
}
::view-transition-new(root) {
animation: mg-fade-in var(--mg-duration-fast) var(--mg-ease-out) both;
}
/* Everything hx-boost swaps in, plus everything a full page load parses, is a
direct child of #content -- so a single rule covers every screen. No script:
a CSS animation restarts by itself whenever the nodes are freshly parsed.
*
* ⛔ The hidden starting state lives in the keyframes with fill-mode backwards,
* never in this declaration. An `opacity: 0` here would leave a blank screen
* anywhere animations do not run (print, blockers, older browsers) with no
* error to show for it.
*
* ⛔ No will-change / translateZ hint. The lightbox overlay is a position:fixed
* element inside #content, and a transform that outlives the animation would
* become its containing block and stop it covering the viewport. mg-rise ends
* on `transform: none`, so nothing survives the 240ms.
*
* ⚠ A board with custom CSS carries a as the first child of #content.
* It is display:none but nth-child still counts it, so that one board's
* stagger starts a step late. Left alone: the link has to stay inside #content
* or a boosted navigation would drop the board's stylesheet. */
#content > * {
animation: mg-rise var(--mg-duration) var(--mg-ease-out) backwards;
}
#content > :nth-child(2) { animation-delay: var(--mg-enter-stagger); }
#content > :nth-child(3) { animation-delay: calc(2 * var(--mg-enter-stagger)); }
#content > :nth-child(4) { animation-delay: calc(3 * var(--mg-enter-stagger)); }
#content > :nth-child(5) { animation-delay: calc(4 * var(--mg-enter-stagger)); }
#content > :nth-child(6) { animation-delay: calc(5 * var(--mg-enter-stagger)); }
/* Cap. The home screen puts every block straight into #content, so an
uncapped ladder would make the last block of a long page arrive seconds
after the first. */
#content > :nth-child(n+7) { animation-delay: calc(6 * var(--mg-enter-stagger)); }
/* ------------------------------------------------------------------ *
* 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-link);
text-decoration: none;
white-space: nowrap;
}
.mg-shell-brand:hover {
color: var(--mg-link-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 span` 처럼 후손 전체를 잡지 않는다. 그 선택자는 명시도가
(0,1,1)이라 `.mg-icon`(0,1,0)의 font-size를 이기고, 메뉴 아이콘만 라벨 크기로
눌린다 — 오류는 없고 계정 링크의 아이콘과 크기만 달라진다. 링크가 없는 항목의
껍데기(그룹 헤더와 하위 항목)만 직접 자식으로 집는다. */
.mg-shell-nav a,
.mg-shell-nav > .mg-shell-nav-item > span,
.mg-shell-subnav > span,
.mg-shell-account a {
display: block;
color: var(--mg-text-muted);
font-family: var(--mg-font-heading);
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-link);
background: var(--mg-accent-soft);
text-decoration: none;
}
.mg-shell-nav a:not([aria-current="page"]) {
position: relative;
}
.mg-shell-nav a:not([aria-current="page"])::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 28px;
height: var(--mg-bar-h);
background: var(--mg-bar-gold);
opacity: 0;
transition: width var(--mg-transition), opacity var(--mg-transition-fast);
}
.mg-shell-nav a:not([aria-current="page"]):hover::after {
width: 100%;
opacity: 1;
}
/* Active menu item. ROOT marks the current page with a 4px gold bar on the
edge facing the stage, so the active item points at the content it opened.
The bar is gold; the label is not — gold type fails contrast on this ground
(docs/SKIN_API.md 토큰 목록). */
.mg-shell-nav [aria-current="page"] {
color: var(--mg-link);
background: var(--mg-accent-soft);
text-decoration: none;
position: relative;
}
.mg-shell-nav [aria-current="page"]::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: var(--mg-bar-h);
background: var(--mg-bar-gold);
}
.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;
}
/* Dark mode switch (docs/SKIN_API.md "다크모드 계약"). Same round dock target as
the BGM button, and deliberately its neighbour: that spot has already been
proven in all four header placements. */
.mg-theme-toggle {
flex: none;
display: grid;
place-items: center;
inline-size: var(--mg-bgm-button-size);
block-size: var(--mg-bgm-button-size);
padding: 0;
border: var(--mg-stroke-1) solid transparent;
border-radius: var(--mg-radius-pill);
background: transparent;
color: var(--mg-text);
cursor: pointer;
transition: color var(--mg-transition-fast), border-color var(--mg-transition-fast);
}
/* ⛔ Hover moves the ICON, not the box (2026-09-02 사람 지시). Growing a ring
and a plate under a bare dock icon made the widget jump around as the pointer
crossed it. ⚠ The transparent border stays so nothing shifts when a state
rule paints it, and :focus-visible is deliberately NOT here -- the global
focus ring near the top of this file already draws one, and a colour-only
change is too weak an indicator for keyboard users on its own.
⛔ Gold as a FOREGROUND steps to --mg-link, never --mg-accent: that is the
ROOT rule that keeps gold type legible in both themes (tokens.css). */
.mg-theme-toggle:hover {
color: var(--mg-link);
}
/* ⛔ The glyph is chosen here, not by JS swapping text. Material Symbols render
by ligature, so a script that rewrites the word would put "dark_mode" on
screen as letters whenever the icon CDN is blocked -- one more place with
that failure (docs/OPEN-ISSUES.md). Both glyphs ship; CSS picks one.
The icon shows the DESTINATION, not the current state. */
.mg-theme-toggle__light,
:root[data-mg-theme="dark"] .mg-theme-toggle__dark {
display: none;
}
:root[data-mg-theme="dark"] .mg-theme-toggle__light {
display: block;
}
/* BGM widget (docs/plans/v0.3-c-1-bgm-widget.md §4-5, docs/DECISIONS.md D2-1).
One round icon the size of a dock target: click toggles play, hover opens the
volume panel beside it. The YouTube frame fills the same box behind the
button and is hidden with opacity — it keeps its size and stays rendered and
composited, so playback is unaffected, and unlike an opaque plate it assumes
nothing about the colour behind the widget.
⛔ Never display:none, visibility:hidden or a zero size on the mount — the
browser may stop rendering the frame and playback stops with no error. */
.mg-bgm {
position: relative;
flex: none;
inline-size: var(--mg-bgm-button-size);
block-size: var(--mg-bgm-button-size);
isolation: isolate;
}
.mg-bgm__mount {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
}
.mg-bgm__mount iframe {
inline-size: 100%;
block-size: 100%;
border: 0;
font-family: var(--mg-font-body);
}
.mg-bgm__toggle {
position: relative;
z-index: 2;
display: grid;
place-items: center;
inline-size: 100%;
block-size: 100%;
padding: 0;
border: var(--mg-stroke-1) solid transparent;
border-radius: var(--mg-radius-pill);
background: transparent;
color: var(--mg-text);
cursor: pointer;
transition: color var(--mg-transition-fast), border-color var(--mg-transition-fast);
}
/* Same rule as the theme toggle beside it -- see the note there for why hover
moves the icon and not the box. */
.mg-bgm__toggle:hover {
color: var(--mg-link);
}
/* ⚠ This one is STATE, not pointer feedback: the gold ring says music is
playing, which hover has no way to express. It stays. */
.mg-bgm[data-bgm-state="playing"] .mg-bgm__toggle {
}
.mg-bgm[data-bgm-state="error"] .mg-bgm__toggle {
color: var(--mg-text-muted);
cursor: default;
}
/* Volume flyout. It touches the button with no gap so the pointer can travel
into it without crossing dead space and closing it. */
.mg-bgm__panel {
position: absolute;
z-index: 3;
top: 100%;
inset-inline-end: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mg-space-2);
inline-size: var(--mg-bgm-panel-width);
padding: var(--mg-space-2) var(--mg-space-3);
border-radius: var(--mg-radius-sm);
background: var(--mg-text);
color: var(--mg-bg);
box-shadow: var(--mg-shadow-float);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--mg-transition-fast), transform var(--mg-transition);
}
:where(.mg-bgm:hover, .mg-bgm:focus-within) .mg-bgm__panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.mg-bgm__title {
flex: 1 0 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--mg-font-mono);
font-size: var(--mg-font-size-xs);
letter-spacing: var(--mg-track-wide);
}
/* No track title yet (or the API never answered): the row would otherwise be
an empty line pushing the slider down. */
.mg-bgm__title:empty {
display: none;
}
.mg-bgm__volume-icon {
flex: none;
}
.mg-bgm__volume {
flex: 1;
min-inline-size: 0;
accent-color: var(--mg-accent);
}
/* Bottom dock opens upward, vertical rails open sideways — the same flyout
geometry the rail already uses for its labels. */
body.mg-header-bottom .mg-bgm__panel {
top: auto;
bottom: 100%;
transform: translateY(6px);
}
body.mg-header-bottom :where(.mg-bgm:hover, .mg-bgm:focus-within) .mg-bgm__panel {
transform: translateY(0);
}
body.mg-header-left .mg-bgm__panel,
body.mg-header-right .mg-bgm__panel {
top: 50%;
bottom: auto;
}
body.mg-header-left .mg-bgm__panel {
inset-inline: 100% auto;
transform: translateY(-50%) translateX(-10px);
}
body.mg-header-right .mg-bgm__panel {
inset-inline: auto 100%;
transform: translateY(-50%) translateX(10px);
}
body.mg-header-left :where(.mg-bgm:hover, .mg-bgm:focus-within) .mg-bgm__panel,
body.mg-header-right :where(.mg-bgm:hover, .mg-bgm:focus-within) .mg-bgm__panel {
transform: translateY(-50%) translateX(0);
}
/* The rail draws every target at one size; the player is one of them. */
body.mg-header-left .mg-bgm,
body.mg-header-right .mg-bgm {
inline-size: var(--mg-shell-icon);
block-size: var(--mg-shell-icon);
}
.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;
}
/* Screens a visitor reads straight through get the narrower box (a page body,
a novel chapter); lists, the home screen and profiles are scanned rather than
read and keep the full width.
⛔ Keyed off a marker INSIDE #content, never a class the server wrote:
hx-boost swaps #content and nothing else, so a server-set class goes stale the
moment a boosted link crosses between a page and a board list. Same reason the
manage sidebar switch is written this way.
Fails open — a browser without :has() keeps the wider box, which is the state
the site had before. */
.mg-shell-main:has(#content .mg-page-body),
.mg-shell-main:has(#content .mg-reader) {
max-width: var(--mg-reading-width);
}
/* ⭐ 캐릭터 프로필은 세 칸을 나란히 두므로 훑는 폭보다도 넓다 (2026-09-06 사람 지시).
⛔ 판정은 위와 **같은 방식** — #content 안의 표식이다. 두 표면 모두 잡으려고
선택자가 둘이다(블록 배열은 .mg-profile-layout, 폴백은 .mg-profile).
⚠ :has() 를 모르는 브라우저는 --mg-content-width 로 남는다. 좁아질 뿐 안 깨진다. */
.mg-shell-main:has(#content .mg-profile-layout),
.mg-shell-main:has(#content .mg-profile) {
max-width: var(--mg-profile-width);
}
/* 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-rail-width) 1fr;
}
body.mg-header-right .mg-shell {
grid-template-areas: "content header";
grid-template-columns: 1fr var(--mg-shell-rail-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. */
/* Only the axis survives here. The capsule block below owns position, size,
padding and overflow for these two placements — leaving the old sticky
100vh geometry in place meant `overflow-y: auto` was still declared and only
source order kept it from clipping the rail's tooltips. */
body.mg-header-left .mg-shell-header,
body.mg-header-right .mg-shell-header {
flex-direction: column;
}
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;
}
/* ROOT dock — the floating capsule. The vertical placements detach from the
edge and leave the gutters open, which only reads as a dock when it is a
SHORT column centred in the viewport — not a full-height panel. The earlier
pass painted the capsule onto the existing 100vh × 236px sticky column and
produced a blob the height of the screen.
`fixed` rather than `sticky`: the capsule has to centre on the viewport, and
sticky can only pin an element once scrolling reaches it. The grid column
above still reserves the space, so content never slides underneath.
⚠ The header already created a stacking context as a sticky element, so this
does not introduce one (docs/PITFALLS.md — drawer vs scrim z-index).
Styling only: every shell node still renders in every placement
(CLAUDE.md 금지 8·9) and the switch is a class, never markup. */
body.mg-header-left .mg-shell-header,
body.mg-header-right .mg-shell-header {
position: fixed;
top: 50%;
transform: translateY(-50%);
height: auto;
inline-size: calc(var(--mg-shell-rail-width) - 2 * var(--mg-shell-rail-inset));
overflow: visible;
align-items: center;
align-self: center;
gap: var(--mg-space-1);
padding: var(--mg-space-2);
background: var(--mg-surface-plate-strong);
backdrop-filter: var(--mg-frame-blur);
border: 0;
border-radius: var(--mg-radius-pill);
box-shadow: var(--mg-shadow-float);
z-index: 20;
}
body.mg-header-left .mg-shell-header { inset-inline-start: var(--mg-shell-rail-inset); }
body.mg-header-right .mg-shell-header { inset-inline-end: var(--mg-shell-rail-inset); }
/* The brand becomes a mark. A wordmark cannot ride a 44px rail, so it clips to
its first glyphs rather than widening the capsule. */
body.mg-header-left .mg-shell-brand,
body.mg-header-right .mg-shell-brand {
inline-size: var(--mg-shell-icon);
block-size: var(--mg-shell-icon);
display: grid;
place-items: center;
overflow: hidden;
padding: 0;
font-size: var(--mg-font-size-xs);
letter-spacing: var(--mg-track-wide);
}
body.mg-header-left .mg-shell-nav,
body.mg-header-right .mg-shell-nav {
align-items: center;
inline-size: auto;
}
body.mg-header-left .mg-shell-nav-item,
body.mg-header-right .mg-shell-nav-item { position: relative; }
body.mg-header-left .mg-shell-account a:hover,
body.mg-header-right .mg-shell-account a:hover { z-index: 3; }
/* Each item is a 44px round target. The label is not shown on the rail — it
arrives as a tooltip on hover and focus, so the icon is never a riddle and
the item stays reachable by keyboard. */
body.mg-header-left .mg-shell-nav a,
body.mg-header-left .mg-shell-nav > .mg-shell-nav-item > span,
body.mg-header-right .mg-shell-nav a,
body.mg-header-right .mg-shell-nav > .mg-shell-nav-item > span {
display: grid;
place-items: center;
inline-size: var(--mg-shell-icon);
block-size: var(--mg-shell-icon);
padding: 0;
border: var(--mg-stroke-1) solid transparent;
border-radius: var(--mg-radius-pill);
}
body.mg-header-left .mg-shell-nav a:hover,
body.mg-header-left .mg-shell-nav a:focus-visible,
body.mg-header-right .mg-shell-nav a:hover,
body.mg-header-right .mg-shell-nav a:focus-visible {
border-color: var(--mg-border-strong);
background: var(--mg-surface);
color: var(--mg-text);
}
/* ⭐ 2026-08-30 사람 결정 — 세로 독의 hover는 밑줄이 아니라 금색 아이콘이다.
The gold bar is ROOT's marker for a horizontal row of labels; on a round
icon target it draws a line across the button instead of under a word. */
body.mg-header-left .mg-shell-nav a::after,
body.mg-header-right .mg-shell-nav a::after {
content: none;
}
body.mg-header-left .mg-shell-nav a:hover .mg-icon,
body.mg-header-left .mg-shell-nav a:focus-visible .mg-icon,
body.mg-header-left .mg-shell-account a:hover .mg-icon,
body.mg-header-left .mg-shell-account a:focus-visible .mg-icon,
body.mg-header-right .mg-shell-nav a:hover .mg-icon,
body.mg-header-right .mg-shell-nav a:focus-visible .mg-icon,
body.mg-header-right .mg-shell-account a:hover .mg-icon,
body.mg-header-right .mg-shell-account a:focus-visible .mg-icon {
color: var(--mg-accent);
}
/* A hovered item paints over its neighbours so the tooltip is never covered
by the next button in the rail. */
body.mg-header-left .mg-shell-nav-item:hover,
body.mg-header-left .mg-shell-nav-item:focus-within,
body.mg-header-right .mg-shell-nav-item:hover,
body.mg-header-right .mg-shell-nav-item:focus-within { z-index: 3; }
body.mg-header-left .mg-shell-account a:hover,
body.mg-header-left .mg-shell-account a:focus-visible,
body.mg-header-right .mg-shell-account a:hover,
body.mg-header-right .mg-shell-account a:focus-visible {
border-color: var(--mg-border-strong);
background: var(--mg-surface);
}
/* An item with no icon keeps its text, clipped to the target — better a
cramped word than an invisible button. */
body.mg-header-left :where(.mg-shell-nav, .mg-shell-account) .mg-shell-nav__label,
body.mg-header-right :where(.mg-shell-nav, .mg-shell-account) .mg-shell-nav__label {
position: absolute;
z-index: 2;
top: 50%;
inline-size: max-content;
max-inline-size: 12rem;
padding: 0 var(--mg-space-3);
block-size: 1.875rem;
display: flex;
align-items: center;
border-radius: var(--mg-radius-sm);
background: var(--mg-text);
color: var(--mg-bg);
font-size: var(--mg-font-size-sm);
font-weight: 500;
box-shadow: var(--mg-shadow-float);
pointer-events: none;
opacity: 0;
transition: opacity var(--mg-transition-fast), transform var(--mg-transition);
}
body.mg-header-left :where(.mg-shell-nav, .mg-shell-account) .mg-shell-nav__label {
inset-inline-start: 100%;
transform: translateY(-50%) translateX(-10px);
}
body.mg-header-right :where(.mg-shell-nav, .mg-shell-account) .mg-shell-nav__label {
inset-inline-end: 100%;
transform: translateY(-50%) translateX(10px);
}
body.mg-header-left :where(.mg-shell-nav, .mg-shell-account) a:hover .mg-shell-nav__label,
body.mg-header-left :where(.mg-shell-nav, .mg-shell-account) a:focus-visible .mg-shell-nav__label,
body.mg-header-right :where(.mg-shell-nav, .mg-shell-account) a:hover .mg-shell-nav__label,
body.mg-header-right :where(.mg-shell-nav, .mg-shell-account) a:focus-visible .mg-shell-nav__label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* No icon means the label is all there is: keep it visible and small. */
body.mg-header-left .mg-shell-nav a:not(:has(.mg-icon)) .mg-shell-nav__label,
body.mg-header-right .mg-shell-nav a:not(:has(.mg-icon)) .mg-shell-nav__label,
body.mg-header-left .mg-shell-nav > .mg-shell-nav-item > span .mg-shell-nav__label,
body.mg-header-right .mg-shell-nav > .mg-shell-nav-item > span .mg-shell-nav__label {
position: static;
transform: none;
opacity: 1;
background: none;
color: inherit;
box-shadow: none;
padding: 0;
block-size: auto;
font-size: 0.625rem;
line-height: 1.1;
text-align: center;
overflow: hidden;
}
body.mg-header-left .mg-shell-account,
body.mg-header-right .mg-shell-account { flex-direction: column; align-items: center; }
body.mg-header-left .mg-shell-account a,
body.mg-header-right .mg-shell-account a {
position: relative;
inline-size: var(--mg-shell-icon);
block-size: var(--mg-shell-icon);
display: grid;
place-items: center;
padding: 0;
border: var(--mg-stroke-1) solid transparent;
border-radius: var(--mg-radius-pill);
}
body.mg-header-left .mg-shell-account,
body.mg-header-right .mg-shell-account { overflow: visible; }
/* ⭐ Folded dock on desktop (2026-10-11 사람 지시):
① a group header with an icon shows the icon only — its name stays for screen readers;
② its submenu FLIES OUT beside the dock over the page, instead of opening in place and
pushing the items below. (The old note "a flyout gets clipped" is about the drawer;
the desktop header is `overflow: visible`, the label tooltips already escape it.) */
@media (min-width: 48rem) {
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-nav > .mg-shell-nav-item > span:has(.mg-icon) .mg-shell-nav__label,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-nav > .mg-shell-nav-item > span:has(.mg-icon) .mg-shell-nav__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-nav-item:hover > .mg-shell-subnav,
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-nav-item:focus-within > .mg-shell-subnav,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-nav-item:hover > .mg-shell-subnav,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-nav-item:focus-within > .mg-shell-subnav {
position: absolute;
z-index: 30;
inset-block-start: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: var(--mg-space-1);
min-inline-size: max-content;
margin: 0;
padding: var(--mg-space-1);
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);
}
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-nav-item > .mg-shell-subnav {
inset-inline-start: calc(100% + var(--mg-space-2));
}
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-nav-item > .mg-shell-subnav {
inset-inline-end: calc(100% + var(--mg-space-2));
}
/* A bridge over the gap, so moving the pointer from the icon to the list keeps it open. */
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav::before,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav::before {
content: "";
position: absolute;
inset-block: 0;
inline-size: calc(var(--mg-space-2) + var(--mg-border-width));
}
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav::before { inset-inline-end: 100%; }
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav::before { inset-inline-start: 100%; }
/* Its links are plain rows, not the dock's round icon buttons. */
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav a,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav a {
display: block;
inline-size: auto;
block-size: auto;
min-block-size: 0;
padding: var(--mg-space-2) var(--mg-space-3);
border: 0;
border-radius: var(--mg-radius-sm);
background: transparent;
color: var(--mg-text);
font-size: var(--mg-font-size-sm);
line-height: 1.3;
text-align: start;
white-space: nowrap;
}
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav a:hover,
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav a:focus-visible,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav a:hover,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav a:focus-visible {
background: var(--mg-surface-tint);
color: var(--mg-text-strong);
text-decoration: none;
}
body.mg-header-left:has(#mg-shell-collapse:checked) .mg-shell-subnav a::after,
body.mg-header-right:has(#mg-shell-collapse:checked) .mg-shell-subnav a::after { content: none; }
}
.mg-shell-nav__label {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ------------------------------------------------------------------ *
* 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;
}
/* ROOT's heading signature: a gold mono kicker, the heavy display title with a
Latin echo set in mono beside it, then a 4px gold bar. The echo is rhythm,
not translation — it is never something the reader is meant to read, so it
stays one or two words and never carries meaning the Korean does not.
The bar is drawn, not marked up, so a skin gets it without new nodes. */
.mg-heading {
margin: 0 0 var(--mg-space-5);
}
.mg-heading::after {
content: "";
display: block;
width: 56px;
height: var(--mg-bar-h);
background: var(--mg-bar-gold);
margin-top: var(--mg-space-3);
}
/* Gold type fails contrast on white, so the kicker steps down to the --mg-link
ramp rather than using --mg-accent directly. */
.mg-heading__kicker {
display: block;
font-family: var(--mg-font-mono);
font-size: var(--mg-font-size-xs);
font-weight: 700;
letter-spacing: var(--mg-track-widest);
text-transform: uppercase;
color: var(--mg-link);
margin-bottom: var(--mg-space-2);
}
.mg-heading__echo {
font-family: var(--mg-font-mono);
font-size: var(--mg-font-size-xs);
font-weight: 500;
letter-spacing: var(--mg-track-wider);
text-transform: uppercase;
color: var(--mg-text-muted);
margin-inline-start: var(--mg-space-3);
white-space: nowrap;
}
/* Icons — Material Symbols Outlined, self-hosted, addressed by NAME.
The glyph is chosen by the ligature text inside the element, so a menu can
use any of the ~3,700 icons without anyone vendoring a file for it first.
A name with no glyph renders as its own text, which is a louder failure
than a mask icon's empty box (static/vendor/material-symbols/README.md).
ROOT's rules: 18-24px, currentColor, stroke 2-2.5 and never thinner — the
500-weight instance is what holds its own beside a 2px border. An icon never
carries brand gold on its own; gold reaches it only inside a gold container. */
.mg-icon {
font-family: var(--mg-font-icon);
font-weight: 500;
font-style: normal;
font-size: var(--mg-icon-size);
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
flex: none;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
user-select: none;
}
/* Mono metadata. ROOT sets every date, count and id in mono — a number in the
body sans reads as a bug — and every Latin system label uppercase and
tracked out, because Korean has no case to carry that signal. */
.mg-meta {
font-family: var(--mg-font-mono);
font-size: var(--mg-font-size-xs);
font-weight: 500;
letter-spacing: var(--mg-track-wide);
color: var(--mg-text-muted);
font-variant-numeric: tabular-nums;
}
.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);
}
/* ROOT's hover contract: a surface acknowledges the cursor by rising 3px into
a harder shadow. Nothing bounces and nothing changes hue. */
.mg-card {
transition: transform var(--mg-transition-fast), box-shadow var(--mg-transition-fast);
}
.mg-card:hover {
transform: translateY(-3px);
box-shadow: var(--mg-shadow-lift);
}
.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);
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;
}
/* ROOT presses do not change colour: the element settles and drops its
shadow. .985 is the system's press scale — 0.96 reads as a bounce. */
.mg-btn:active {
transform: scale(0.985);
box-shadow: none;
}
.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-link);
}
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-link);
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);
}
/* Colour sample for admin-picked colours (raid terrain templates). The colour
itself comes from the page as an inline background, validated as #RRGGBB. */
.mg-swatch {
display: inline-block;
inline-size: var(--mg-space-4);
block-size: var(--mg-space-4);
border: var(--mg-border-width) solid var(--mg-border);
border-radius: var(--mg-radius-sm);
vertical-align: middle;
}
/* Raid authoring grid (manage). Terrain colour arrives as --mg-raid-terrain from
a validated #RRGGBB value. Cell size is a token step, not a literal. */
.mg-raid-grid-wrap {
overflow-x: auto;
}
.mg-raid-grid {
border-collapse: collapse;
font-size: var(--mg-font-size-sm);
}
.mg-raid-grid th {
color: var(--mg-text-muted);
padding: var(--mg-space-1);
}
.mg-raid-grid__cell {
border: var(--mg-border-width) solid var(--mg-border);
padding: 0;
}
.mg-raid-grid__cell button {
inline-size: calc(var(--mg-space-4) * 2);
block-size: calc(var(--mg-space-4) * 2);
border: 0;
background: transparent;
color: var(--mg-text);
cursor: pointer;
font-size: var(--mg-font-size-sm);
}
.mg-raid-grid__cell--damage,
.mg-raid-grid__cell--heal,
.mg-raid-grid__cell--obstacle {
background: var(--mg-raid-terrain);
}
.mg-raid-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--mg-space-3);
margin-block: var(--mg-space-3);
}
.mg-raid-tabs a[aria-current="page"] {
font-weight: 700;
text-decoration: underline;
}
.mg-raid-candidate {
display: inline-flex;
gap: var(--mg-space-1);
margin-inline-end: var(--mg-space-3);
}
/* Raid control screen (u-8a). One screen: the action table and the side panel scroll
inside themselves. ⛔ The two-column rule and sticky live inside the media query —
stacked on narrow screens, a sticky side panel would hold the table under it. */
.mg-raid-control {
display: grid;
gap: var(--mg-space-4);
}
.mg-raid-rows {
max-block-size: var(--mg-raid-panel-height);
overflow: auto;
border: var(--mg-border-width) solid var(--mg-border);
}
.mg-raid-row {
display: grid;
grid-template-columns: minmax(8rem, 1.2fr) minmax(8rem, 1fr) minmax(10rem, 2fr) minmax(6rem, 0.8fr);
gap: var(--mg-space-2);
align-items: start;
padding: var(--mg-space-2);
border-block-end: 1px solid var(--mg-border);
}
.mg-raid-row--head {
position: sticky;
top: 0;
z-index: 1;
background: var(--mg-surface);
font-weight: 700;
}
.mg-raid-row--monster {
background: var(--mg-danger-soft);
}
.mg-raid-row__targets {
border: 0;
margin: 0;
padding: 0;
}
.mg-raid-row__targets legend {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* ⛔ [hidden] must win over the label's inline-flex (CLAUDE.md: display beats hidden). */
.mg-raid-row [hidden] {
display: none;
}
.mg-raid-row__result--error,
.mg-raid-notice--error {
color: var(--mg-danger);
}
.mg-raid-scroll {
max-block-size: calc(var(--mg-raid-panel-height) / 2);
overflow: auto;
}
@media (min-width: 75rem) {
.mg-raid-control {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: start;
}
.mg-raid-control__side {
position: sticky;
top: var(--mg-space-5);
max-block-size: calc(100vh - var(--mg-space-6));
overflow: auto;
}
}
/* A fixed top header and a sticky panel fight over the same offset (same as the profile rail). */
body.mg-headerfix-on.mg-header-top .mg-raid-control__side { position: static; max-block-size: none; }
.mg-raid-slot--mismatch {
color: var(--mg-danger);
background: var(--mg-danger-soft);
}
.mg-table th,
.mg-table td {
border-bottom: var(--mg-border-width) solid var(--mg-border);
padding: var(--mg-space-3);
text-align: center;
}
.mg-table th {
color: var(--mg-text-muted);
font-weight: 700;
font-size: var(--mg-font-size-md);
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,
.toastui-editor-defaultUI-toolbar button.mg-editor-align-btn {
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
}
/* 정렬 버튼. ⛔ 아이콘 폰트가 아니라 인라인 SVG 다 — 아이콘 CDN 이 막힌 망에서
리거처 폰트는 "format_align_left" 라는 **영문 단어**로 보인다
(CLAUDE.md "절대 하지 말 것" 15). 색은 툴바 아이콘과 같은 축으로 둔다. */
.toastui-editor-defaultUI-toolbar button.mg-editor-align-btn {
border: 0;
padding: 0;
background: transparent;
color: var(--mg-text-muted);
}
.toastui-editor-defaultUI-toolbar button.mg-editor-align-btn:hover,
.toastui-editor-defaultUI-toolbar button.mg-editor-align-btn:focus-visible {
color: var(--mg-text);
}
/* 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-link-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.
*
* ⛔⛔ 편집기 안은 반드시 뺀다. Toast UI 의 본문 문단도 `