.gb-breadcrumb { margin: 0 0 var(--board-space-2); font-size: var(--board-size-meta); color: var(--board-dim); }
.gb-page-title { border-bottom: 1px solid var(--board-ink); padding-bottom: var(--board-space-2); }
.gb-notice, .gb-error, .gb-hint { font-size: var(--board-size-meta); }
.gb-notice { padding: var(--board-space-3) var(--board-space-4); border: 1px solid var(--board-line); border-radius: var(--board-radius); background: none; color: var(--board-mid); }
.gb-error, .gb-field-error { color: var(--board-danger); }
.gb-field-error { display: block; }
input[aria-invalid="true"] { border-color: var(--board-danger); }
.gb-hint { color: var(--board-dim); }
.gb-empty { color: var(--board-dim); }
.gb-tags { display: flex; flex-wrap: wrap; gap: var(--board-space-1); margin: var(--board-space-2) 0; }
/* A tag is a word with its hash, not a chip or a pill (C): the secondary grey at the meta size, underlined on the pointer. */
.gb-tag { display: inline-flex; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--board-size-meta); color: var(--board-mid); }
.gb-tag:hover { background: none; color: var(--board-text); text-decoration: underline; }
/* A list of tags with their counts: one word per line over the faintest divider, the count at the right. */
.gb-space-tiles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--board-rule); }
.gb-space-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--board-space-1) var(--board-space-4); padding: 0.875rem 0; border-bottom: 1px solid var(--board-hair); color: var(--board-ink); }
.gb-space-tile-top { flex: 1; display: grid; }
.gb-space-tile-note, .gb-space-tile-latest, .gb-space-tile-go { color: var(--board-dim); font-size: var(--board-size-meta); }
.gb-space-tile-latest { order: 1; flex-basis: 100%; }
.gb-tag-list { list-style: none; margin: 0; padding: 0; }
.gb-tag-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--board-space-2); padding: 0.5625rem 0; border-bottom: 1px solid var(--board-hair); font-size: var(--board-size-meta); }
.gb-tag-list > li small { color: var(--board-dim); font-size: var(--board-size-caption); font-variant-numeric: tabular-nums; }

/*
 * Core's two-line list, where Core still draws one: a member's posts, the profile's bookmarks.
 * The meta is one dot-separated run — flex collapses the leading space Core writes before the
 * author, so the parts read as "board · author · date" rather than run together (board-skin.md §9).
 */
ol.gb-content-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--board-line); }
ol.gb-content-list > li { padding: var(--board-space-3) 0; border-bottom: 1px solid var(--board-line); }
ol.gb-content-list > li > a { font-weight: var(--board-weight-bold); font-size: var(--board-size-ui); }
ol.gb-content-list small { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--board-space-2); color: var(--board-dim); font-size: var(--board-size-meta); }
ol.gb-content-list small > * + *::before { content: "·"; color: var(--board-dim); margin-right: var(--board-space-2); }
ol.gb-content-list .gb-row-metrics { float: right; color: var(--board-dim); font-size: var(--board-size-meta); margin-left: var(--board-space-2); }
ol.gb-content-list .gb-summary { margin: var(--board-space-1) 0 0; color: var(--board-dim); font-size: var(--board-size-meta); }
ol.gb-content-list .gb-space { color: var(--board-mid); }

.gb-widget .gb-content-list { border-top: 0; }
.gb-widget h2 { font-size: var(--board-size-head); font-weight: var(--board-weight-title); margin: 0 0 var(--board-space-3); }
.gb-widget .gb-more { text-align: right; font-size: var(--board-size-meta); margin: var(--board-space-1) 0 0; }

/*
 * The home's Core widgets in C-home's sidebar look (site-composition.md §2). The first rule is the
 * `me` box's behaviour, not its look: `<html data-viewer="member">` is the server's word on a member's
 * page, and without it only the visitor's half shows.
 */
:root:not([data-viewer="member"]) [data-viewer-me] [data-viewer-branch="member"],
:root:not([data-viewer="member"]) [data-viewer-branch="member"]:has(> [data-viewer-me]),
:root[data-viewer="member"] [data-viewer-me] [data-viewer-branch="anonymous"] { display: none; }
.gb-counters-inline { margin: 0; color: var(--board-dim); font-size: var(--board-size-meta); }
.gb-counters-inline dt, .gb-counters-inline dd { display: inline; margin: 0; }
.gb-counters-inline dd { margin-inline: var(--board-space-1) var(--board-space-4); color: var(--board-text); font-variant-numeric: tabular-nums; font-weight: var(--board-weight-bold); }
.gb-widget-active-members h2 { padding: 0 0 var(--board-space-2); margin: 0; border-bottom: 1px solid var(--board-line); font-size: var(--board-size-ui); font-weight: var(--board-weight-bold); }
.gb-members { margin: 0; padding: 0; list-style: none; }
.gb-members li { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--board-hair); font-size: var(--board-size-ui); }
.gb-members .gb-avatar { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.gb-members .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--board-line); background: var(--board-tint); color: var(--board-mid); font-size: var(--board-size-caption); }
.gb-members .gb-badge { margin-left: 0; }
.gb-member-name { min-width: 0; overflow: hidden; color: var(--board-text); text-overflow: ellipsis; white-space: nowrap; }
.gb-member-posts { margin-left: auto; color: var(--board-dim); font-size: var(--board-size-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
section.gb-widget.gb-widget-me { padding: 0.875rem; border: 1px solid var(--board-line); border-radius: 6px; }
.gb-me-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; column-gap: 0.625rem; margin: 0; }
.gb-me-head > .gb-avatar { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.gb-me-head > .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--board-line); background: var(--board-tint); color: var(--board-mid); font-size: var(--board-size-head); }
.gb-me-name { overflow: hidden; color: var(--board-text); font-size: var(--board-size-head); font-weight: var(--board-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.gb-me-joined { margin-top: 2px; color: var(--board-dim); font-size: var(--board-size-caption); white-space: nowrap; }
.gb-me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--board-space-3) 0 0; padding: 0.625rem 0 0; border-top: 1px solid var(--board-hair); text-align: center; }
.gb-me-stats div { display: flex; flex-direction: column-reverse; }
.gb-me-stats dt { font-size: var(--board-size-caption); }
.gb-me-stats dt a { color: var(--board-dim); }
.gb-me-stats dd { min-height: 1.4em; margin: 0; color: var(--board-text); font-size: var(--board-size-head); font-variant-numeric: tabular-nums; font-weight: var(--board-weight-bold); }
.gb-me-notices { margin: var(--board-space-3) 0 0; font-size: var(--board-size-caption); }
.gb-me-notices a { color: var(--board-mid); }
.gb-me-notices small { display: block; color: var(--board-dim); font-size: inherit; }
.gb-me-links { display: flex; justify-content: flex-end; gap: var(--board-space-3); margin: var(--board-space-2) 0 0; font-size: var(--board-size-caption); }
.gb-me-links a, .gb-me-links button[type="submit"]:not(.gb-link):not(.gb-reaction):not(.gb-danger) { min-height: 0; padding: 0; border: 0; background: none; color: var(--board-dim); font: inherit; font-weight: var(--board-weight-normal); cursor: pointer; }
.gb-me-links button[type="submit"]:not(.gb-link):not(.gb-reaction):not(.gb-danger):hover { background: none; color: var(--board-text); }
.gb-me-signed-out { margin: 0 0 var(--board-space-3); color: var(--board-mid); font-size: var(--board-size-meta); }
.gb-me-doors { display: flex; align-items: center; gap: var(--board-space-4); margin: 0; font-size: var(--board-size-meta); }
.gb-me-sign-in { padding: 0.375rem 0.875rem; border: 1px solid var(--board-line); border-radius: var(--board-control-radius); color: var(--board-text); font-weight: var(--board-weight-bold); }
.gb-photo-count { border-color: var(--board-line); color: var(--board-dim); font-weight: var(--board-weight-normal); white-space: nowrap; }

.gb-actions { display: flex; flex-wrap: wrap; gap: var(--board-space-2); align-items: center; margin: var(--board-space-2) 0; }
.gb-actions .gb-write { font-weight: var(--board-weight-bold); }
.gb-engagement { display: flex; flex-wrap: wrap; gap: var(--board-space-4); align-items: center; margin: var(--board-space-4) 0; }
.gb-reactions { display: inline-flex; gap: var(--board-space-2); align-items: center; }
.gb-reaction { display: inline-flex; align-items: center; gap: var(--board-space-1); }
.gb-reaction[aria-pressed="true"] { border-color: var(--board-ink); }
.gb-bookmark-active { font-weight: var(--board-weight-bold); }
.gb-more-menu summary { display: inline-block; padding: var(--board-space-1) var(--board-space-2); border: 1px solid var(--board-rule); border-radius: var(--board-radius); font-weight: var(--board-weight-bold); color: var(--board-mid); }
.gb-more-menu summary::after { content: none; }
.gb-more-menu .gb-menu-list { left: 0; right: auto; }
/* The tools row sits flush right, so its list must anchor to the summary right edge and open leftward. */
.post-tools .gb-more-menu .gb-menu-list { left: auto; right: 0; }
/* On phones a nested comment summary is pushed right by the indent, so a list opening rightward falls off the window; anchor it to the summary right edge and open leftward. */
@media (max-width: 35rem) { .gb-comment .gb-more-menu .gb-menu-list { left: auto; right: 0; } }
/*
 * The ellipsis is a standalone icon control, not an inline text-link exception. Keep production's
 * compact visual glyph, but on touch hardware give the summary the 44px hit area a thumb needs.
 */
@media (pointer: coarse) {
  .gb-more-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}
.gb-more-menu .gb-menu-list form { display: block; padding: var(--board-space-2) var(--board-space-4); }
.gb-more-menu .gb-menu-list form button { padding: 0; width: auto; }
.gb-moderation, .gb-report-form { font-size: var(--board-size-meta); }
/* 신고 sits in the row as its own fold (noriter-156), a text control like 수정 beside it; open, its form drops under the row over what follows, so 신고 keeps its place. */
.gb-actions .gb-report > summary { list-style: none; cursor: pointer; color: var(--board-dim); }
.gb-actions .gb-report > summary::-webkit-details-marker { display: none; }
.gb-actions .gb-report > summary:hover { color: var(--board-text); text-decoration: underline; }
.gb-actions { position: relative; }
.gb-actions .gb-report-form { position: absolute; top: 100%; left: 0; z-index: 5; box-sizing: border-box; width: min(20rem, calc(100vw - 2rem)); box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); margin-top: var(--board-space-2); padding: var(--board-space-3); border: 1px solid var(--board-line); border-radius: var(--board-radius); background: var(--board-surface); }
.gb-actions .gb-report-form label { display: grid; gap: var(--board-space-1); margin-bottom: var(--board-space-2); }
.gb-attachments { list-style: none; margin: var(--board-space-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--board-space-2); }
/* A block, not the inline default: an inline picture sits on the text baseline and the row's gap grows by the line's descender (15px drawn for an 8px gap). */
.gb-attachment-image img { display: block; max-width: 100%; height: auto; border-radius: var(--board-radius-s); }
.gb-body .gb-image-strip img { display: block; max-width: 100%; height: auto; margin: 0; border-radius: 0; }
.gb-body .gb-image-strip img:first-child { border-radius: var(--board-radius-s) var(--board-radius-s) 0 0; }
.gb-body .gb-image-strip img:last-child { border-radius: 0 0 var(--board-radius-s) var(--board-radius-s); }
.gb-attachment-strip { flex-basis: 100%; }
.gb-attachment-strip img { display: block; max-width: 100%; height: auto; border-radius: 0; }
.gb-attachment-strip img:first-child { border-radius: var(--board-radius-s) var(--board-radius-s) 0 0; }
.gb-attachment-strip img:last-child { border-radius: 0 0 var(--board-radius-s) var(--board-radius-s); }
.gb-attachment-video video { display: block; max-width: 100%; height: auto; border-radius: var(--board-radius-s); }
/* A provider frame (content-blocks.md §3b): the body's iframe rule caps its width (styles-pages.ts); its height is the runtime's, from the frame's own message. */
.gb-embed-frame { margin: var(--board-space-3) 0; }
.gb-embed-source { margin: var(--board-space-1) 0 0; font-size: var(--board-size-meta); }
.gb-embed-frame[data-embed-sized] .gb-embed-source { display: none; }
.gb-image-source { text-align: center; }
.gb-source-ref { font-size: .75em; line-height: 0; vertical-align: super; }
.gb-body .gb-source-ref a { text-decoration: none; }
.gb-source-notes { margin-top: var(--board-space-4); padding-top: var(--board-space-2); border-top: 1px solid var(--board-line); font-size: var(--board-size-meta); }
.gb-source-notes ol { margin-bottom: 0; padding-left: 1.4rem; }
.gb-source-notes-title { margin: 0 0 var(--board-space-1); font-size: var(--board-size-meta); font-weight: var(--board-weight-bold); }
.gb-source-notes li:target { background: var(--board-tint); }
.gb-attachment-file a { display: inline-block; padding: var(--board-space-1) var(--board-space-3); border: 1px solid var(--board-rule); border-radius: var(--board-radius); font-size: var(--board-size-meta); }
/* A post's pictures over the text (`settings.postImages: above`, board-skin.md §9): production's own 8px gap wrapping 24px over the body, off the skin's scale, so literals, and its softer 12px corner on the images in that row. */
.post-images .gb-attachments { margin: 0 0 1.5rem; gap: 0.5rem; }
.post-images .gb-attachment-image img { border-radius: 0.75rem; }

/*
 * Compose: the fields sit inside the skin's surface card — production's PostForm draws them in an
 * AppSurface (a 1.1rem pad, the hairline, the card radius and the small shadow) with the h1 on the
 * ground above it — so the pad here is the card pad the listing's cards already take, and on a
 * phone it steps in so the card's edges never push the fields past the window.
 */
/* The write form is no card: it opens on the region's 2px rule and its fields run on the page (C). */
.gb-content-form { display: flex; flex-direction: column; gap: var(--board-space-4); max-width: 52rem; padding: var(--board-space-4) 0 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; }
.gb-content-form label { display: flex; flex-direction: column; gap: var(--board-space-1); font-size: var(--board-size-meta); color: var(--board-mid); font-weight: var(--board-weight-bold); }
/* Core's pin control is a label whose first child is the box, not a label.gb-checkbox: it sits in a line the same way (theme.css matches it the same). */
.gb-content-form label.gb-checkbox, .gb-content-form label:has(> input[type="checkbox"]:is(:first-child, [type="hidden"]:first-child + *)), .gb-checkbox { flex-direction: row; align-items: center; gap: var(--board-space-2); font-weight: var(--board-weight-normal); }
.gb-content-form input[type="text"], .gb-content-form select { width: 100%; }
/* A plugin's compose.fields arrive inside one slot wrapper, which is one child of the form's gap column; the wrapper parts its own fields by the same gap. */
.gb-content-form > .gb-slot-compose-fields { display: flex; flex-direction: column; gap: var(--board-space-3); }
.gb-tags-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--board-space-1); width: 100%; margin-top: var(--board-space-1); padding: 0.45rem 0.875rem; border: 1px solid var(--board-line); border-radius: var(--board-control-radius); background: var(--board-bg); }
.gb-tag-chip { display: inline-flex; align-items: center; gap: var(--board-space-1); }
.gb-tag-chip button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; }
.gb-tags-entry { flex: 1 1 120px; min-width: 0; padding: 0.25rem; border: 0; background: transparent; }
.gb-content-form textarea, .gb-editor textarea { min-height: 18rem; font-family: var(--board-font); line-height: var(--board-leading-read); }
/* A toolbar tool is not a form control: it keeps the editor's own 36px height rather than the control height. */
.gb-editor-tool { min-height: 2.25rem; }
/* editor.css loads after this sheet with the same selectors, so each carries one class more to win. */
.gb-editor .gb-editor-toolbar, .gb-editor .gb-editor-host { border-color: var(--board-line); }
.gb-editor:focus-within .gb-editor-toolbar.gb-editor-toolbar, .gb-editor:focus-within .gb-editor-host.gb-editor-host { border-color: var(--board-focus-line, var(--board-accent)); }
/* 등록 at the row's right end with the quiet 취소 at its left, both the same height (production's .gb-actions); 삭제 stays off that row, a danger not to be sat beside the primary. */
.gb-content-form .gb-submit { display: flex; justify-content: flex-end; gap: var(--board-space-2); align-items: center; margin: var(--board-space-2) 0 0; padding-top: var(--board-space-4); border-top: 1px solid var(--board-line); }
.gb-content-form .gb-submit button { --board-control-h: 2.625rem; min-width: 6rem; font-size: var(--board-size-ui); }
.gb-content-form .gb-delete { margin-left: auto; }
.gb-content-form .gb-error { margin: 0; }
/*
 * Core's write bar (skin-api.md §3zb) as C-write's last row: 미리보기 and 임시저장 at the left, 취소 and
 * the one filled 등록 at the right, 42px each. The markup puts it at the top of the form, so 등록 is
 * the first submit; `order` draws it under the fields, and its save time stands above the form's rule,
 * on the heading's line. 삭제 stays under the row, apart from 등록.
 */
.gb-content-form { position: relative; }
.gb-compose-bar { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--board-space-2); padding-top: var(--board-space-5); }
.gb-content-form > .gb-delete { order: 2; align-self: flex-end; }
.gb-compose-bar > .gb-draft-status { position: absolute; right: 0; bottom: calc(100% + 0.875rem); color: var(--board-dim); font-size: var(--board-size-meta); }
.gb-compose-bar > :is(.gb-compose-preview, .gb-compose-draft, .gb-compose-cancel, .gb-compose-publish) { --board-control-h: 2.625rem; padding: 0 1rem; font-size: var(--board-size-ui); }
.gb-compose-bar > .gb-compose-preview { order: 1; }
.gb-compose-bar > .gb-compose-draft { order: 2; }
.gb-compose-bar > .gb-compose-drafts { order: 3; color: var(--board-dim); font-size: var(--board-size-meta); }
.gb-compose-bar > .gb-compose-cancel { order: 4; margin-left: auto; padding: 0 1.25rem; background: var(--board-bg); }
.gb-compose-bar > .gb-compose-publish { order: 5; padding: 0 1.75rem; font-weight: 600; }
.gb-compose-bar > .gb-compose-notice { order: 6; flex-basis: 100%; margin: 0; color: var(--board-mid); font-size: var(--board-size-meta); }
.gb-compose-bar > .gb-compose-preview-pane { order: 0; flex-basis: 100%; margin: 0 0 var(--board-space-3); padding: var(--board-space-4) 0; border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); }
/* The options (C-write's 설정 row): the group's own name in the 112px column, the boxes beside it, the row closed by the line. */
.gb-compose-options { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; padding: 0.625rem 0; border-bottom: 1px solid var(--board-line); font-size: var(--board-size-ui); }
.gb-compose-options::before { content: attr(aria-label); flex: 0 0 112px; margin-right: -0.5rem; color: var(--board-ink); font-weight: 600; }
.gb-content-form .gb-compose-options label { flex-direction: row; align-items: center; gap: 0.375rem; min-height: 2rem; color: var(--board-text); font-size: inherit; font-weight: var(--board-weight-normal); }
.gb-compose-options input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--board-ink); }
.gb-compose-options select { width: auto; }
/* `/profile/me/drafts`: the list's hairline rows, the title the way back into its form. */
.gb-drafts-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--board-ink); }
.gb-drafts-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--board-space-1) var(--board-space-4); padding: 0.625rem 0; border-bottom: 1px solid var(--board-hair); }
.gb-drafts-title { flex: 1 1 16rem; min-width: 0; color: var(--board-text); font-size: var(--board-size-ui); }
.gb-drafts-meta { display: inline-flex; flex-wrap: wrap; gap: 0 var(--board-space-2); color: var(--board-dim); font-size: var(--board-size-meta); }
.gb-drafts-delete { margin: 0; }
.gb-drafts > .gb-empty { padding: var(--board-space-8) 0; text-align: center; }
@media (max-width: 47.99rem) {
  .gb-content-form { padding: var(--board-space-3) 0 0; }
  .gb-compose-options::before { flex-basis: 100%; margin: 0 0 0.375rem; }
}

/* Profile, auth, settings, series, errors. */
/*
 * The profile head is one surface card: the picture (or its initial, when the member has none) beside
 * the name, the dim handle and the bio (board-skin.md §9). The grid puts the avatar in the first
 * column and the words in the second; the stats span the whole width under them.
 */
.gb-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--board-space-5) 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; }
.gb-profile h1 { grid-column: 2; margin: 0; }
.gb-profile .gb-identity, .gb-profile .gb-bio { grid-column: 2; }
.gb-profile .gb-avatar { grid-column: 1; grid-row: 1 / span 3; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; margin-right: var(--board-space-4); }
.gb-profile .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--board-tint); color: var(--board-mid); font-size: var(--board-size-page); font-weight: var(--board-weight-bold); }
.gb-profile .gb-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--board-space-2); margin: 2px 0 0; font-size: var(--board-size-meta); }
.gb-profile .handle { color: var(--board-dim); }
/* A bio is typed with its own line breaks; collapsing them runs the lines into one paragraph the writer did not write. */
.gb-profile .gb-bio { margin: var(--board-space-2) 0 0; color: var(--board-mid); white-space: pre-line; }
/* The stats read as one dot-separated line, not a bulleted list (board-skin.md §9). */
.gb-profile .gb-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--board-space-5); overflow: hidden; list-style: none; margin: var(--board-space-3) 0 0; padding: 0; color: var(--board-dim); font-size: var(--board-size-meta); }
/* The dot is pulled left into the gap; a line's first item has its dot outside the list's overflow, so a wrapped phone line never opens with one (the .post-meta idiom, §2). */
.gb-profile .gb-meta > li::before { content: "·"; display: inline-block; width: var(--board-space-5); margin-left: calc(-1 * var(--board-space-5)); text-align: center; color: var(--board-dim); }
/* The posts list and the comments list sit on the same surface card the board list does; the last row drops its own hairline. */
.gb-profile-posts, .gb-profile-comments { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* An empty list is a bare paragraph: with no row to bring its own padding, it gets the gap the card's foot already has (noriter-104). */
.gb-profile-posts > p, .gb-profile-comments > p { margin-top: calc(var(--board-space-2) + var(--board-space-3)); }
.gb-profile-posts .gb-content-list { border-top: 0; }
.gb-profile-posts .gb-content-list > li:last-child, .gb-profile-comments .gb-comment-list > li:last-child { border-bottom-color: var(--board-line); }
/* The author is the member whose page this is: the row already names them, so the meta drops it (board-skin.md §9). */
.gb-profile-posts .gb-content-list .gb-author { display: none; }
/* The heading repeats the active tab's label just above it: kept for a screen reader, out of sight (board-skin.md §9). */
.gb-profile-posts > h2, .gb-profile-comments > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Tabs (default-skins.md §4): words over a hairline, the current one in the ink with a 2px underline; links or buttons, current by aria-current or aria-selected. */
:is(.gb-tabs, .gb-profile-tabs) { display: flex; flex-wrap: wrap; gap: 0 1.375rem; margin: var(--board-space-4) 0; border-bottom: 1px solid var(--board-line); }
:is(.gb-tabs, .gb-profile-tabs) :is(a, button, strong) { min-height: 0; padding: var(--board-space-2) 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: var(--board-size-ui); font-weight: var(--board-weight-normal); color: var(--board-dim); }
:is(.gb-tabs, .gb-profile-tabs) :is(a, button):hover { background: none; text-decoration: none; color: var(--board-text); }
:is(.gb-tabs, .gb-profile-tabs) :is(a[aria-current], button[aria-selected="true"], strong) { color: var(--board-text); font-weight: var(--board-weight-bold); border-bottom-color: var(--board-ink); }
.gb-profile-form, .gb-auth-form, .settings-form { display: flex; flex-direction: column; gap: var(--board-space-3); max-width: 30rem; }
.gb-profile-form label, .gb-auth-form label, .settings-form label { display: flex; flex-direction: column; gap: var(--board-space-1); font-size: var(--board-size-meta); color: var(--board-mid); font-weight: var(--board-weight-bold); }
.gb-profile-form input:not([type="checkbox"]), .gb-auth-form input:not([type="checkbox"]), .settings-form input:not([type="checkbox"]) { width: 100%; }
.gb-profile-danger { margin-top: var(--board-space-6); font-size: var(--board-size-meta); color: var(--board-dim); }
/* Sign in, sign up and the password forms are one centred surface card, so the fields are not a bare form on the ground (board-skin.md §2). */
/* The card's measures are production's sign-in dialog, off the skin's scale, so literals: 30rem wide on a 1.2rem pad, a 1.25rem title, 16px labels in the ink over 45px fields on the search controls' 0.4rem radius, and the way out — 비밀번호 찾기 under the button, 가입하기 or 로그인 under a hairline — in the accent. */
.gb-auth { max-width: 30rem; margin: var(--board-space-8) auto; padding: 1.2rem 0 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; }
.gb-auth h1 { margin: 0 0 var(--board-space-4); font-size: var(--board-size-display); font-weight: var(--board-weight-title); line-height: 1.35; }
.gb-auth .gb-auth-form { max-width: none; gap: var(--board-space-4); }
.gb-auth .gb-account-login-id { margin: 0 0 var(--board-space-5); }
.gb-auth .gb-auth-form label { gap: 0.3rem; font-size: var(--board-size-read); color: var(--board-text); }
.gb-auth .gb-auth-form label small { color: var(--board-dim); font-size: var(--board-size-caption); font-weight: 400; }
/* 로그인 유지 is a box and its sentence on one line, lighter than the field labels above it — the column rule above would stack the box over its words. */
.gb-auth .gb-auth-form label.gb-auth-remember { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: var(--board-weight-normal); }
/* The recovery link and the way to join are two sentences: one to a line, centred under the hairline, never run together. */
.gb-auth .gb-auth-links { display: flex; flex-direction: column; align-items: center; gap: var(--board-space-2); }
.gb-auth .gb-auth-form > p:last-child { margin: 0; text-align: right; font-size: var(--board-size-meta); }
/* The profile edit form shares this card's measures: each row is a <p> holding a for-label and its control, so the row is the label's own gap column, and the checkbox rows sit in a line, lighter than the labels (me.vue:89's .gb-profile-form/.check). */
.gb-auth .gb-profile-form { max-width: none; gap: var(--board-space-4); }
/* p.gb-actions inherits .gb-actions' centre from the inherited sheet; stretch puts the submit back on the card's full width. */
.gb-auth .gb-profile-form > p { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.gb-auth .gb-profile-form label { gap: 0.3rem; font-size: var(--board-size-read); color: var(--board-text); }
.gb-auth .gb-profile-form label.gb-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: var(--board-weight-normal); }
.gb-auth .gb-profile-form label.gb-checkbox + label.gb-checkbox { margin-top: calc(var(--board-space-2) - 0.3rem); }
.gb-auth .gb-profile-form input[type="file"]::file-selector-button { margin-right: 0.6rem; padding: 0.45rem 0.8rem; border: 1px solid var(--board-rule); border-radius: var(--board-radius); background: var(--board-surface); color: var(--board-ink); font: inherit; }
.gb-auth .gb-profile-form input[type="file"]::file-selector-button:hover { background: var(--board-tint); }
.gb-auth .gb-profile-form .gb-profile-danger { margin: 0; text-align: center; }
.gb-auth .gb-profile-form .gb-profile-danger a.gb-danger { color: var(--board-danger); }
/*
 * The parts of one card (account settings' email, password, then the sign-in providers) split like production's
 * section + section — a hairline with air on both sides (me.vue:89). Whatever the part is: a section that follows
 * a form is a part like the form before it, and used to sit on that form's button (noriter-96).
 */
.gb-auth :is(.gb-auth-form, section) + :is(.gb-auth-form, section) { margin-top: var(--board-space-5); padding-top: var(--board-space-5); border-top: 1px solid var(--board-line); }
.gb-auth > p:last-child { margin: var(--board-space-5) 0 0; padding-top: var(--board-space-4); border-top: 1px solid var(--board-line); text-align: center; color: var(--board-dim); }
/* Underlined: inside a sentence, colour alone did not set the link apart (1.34:1 against the text, WCAG 1.4.1). */
.gb-auth p a { color: var(--board-text); text-decoration: underline; text-underline-offset: 0.15em; }
/* The consent screen (auth.md §11): the client's address under its name, and what it asked for as a plain list. */
.gb-auth .gb-auth-consent-client { display: block; margin-top: var(--board-space-1); color: var(--board-dim); font-size: var(--board-size-caption); overflow-wrap: anywhere; }
.gb-auth .gb-auth-consent-scopes { margin: var(--board-space-4) 0 var(--board-space-5); font-size: var(--board-size-meta); }
.gb-auth .gb-auth-consent-scopes p { margin: 0 0 var(--board-space-1); color: var(--board-dim); }
.gb-auth .gb-auth-consent-scopes ul { margin: 0; padding-left: 1.1rem; }
.gb-providers { list-style: none; margin: var(--board-space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--board-space-2); }
.gb-providers a, .gb-provider { display: block; padding: var(--board-space-2); border: 1px solid var(--board-rule); border-radius: var(--board-radius); text-align: center; font-weight: var(--board-weight-bold); }
.gb-providers a:hover { text-decoration: none; background: var(--board-tint); }
.gb-account-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--board-space-1) var(--board-space-4); font-size: var(--board-size-meta); }
.gb-series-parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--board-line); counter-reset: part; }
.gb-series-parts > li { padding: var(--board-space-3) 0; border-bottom: 1px solid var(--board-line); counter-increment: part; }
.gb-series-parts > li::before { content: counter(part) ". "; color: var(--board-dim); }
/*
 * Notifications: one card of one-line rows — the same frame .gb-comments carries (surface, line,
 * radius, shadow) — the moment and a quiet 삭제 at the right. The shell's submit rule would
 * make every row's 삭제 the black button — a column of them over the list — so the row button's
 * selector is as strong as that one and comes after it, put back to dim text. 모두 읽음 is quiet
 * by name instead: the markup carries btn-quiet.
 */
/* The notice bar above the header (noriter-146): a hairline band in the shell's width, one line per unread notification. */
.gb-notice-bar { border-bottom: 1px solid var(--board-line); background: var(--board-bg); font-size: var(--board-size-meta); }
.gb-notice-bar-line { display: flex; align-items: center; gap: var(--board-space-2); max-width: var(--board-max); margin: 0 auto; padding: var(--board-space-1) var(--board-gap); }
.gb-notice-bar-line + .gb-notice-bar-line { border-top: 1px solid var(--board-line); }
.gb-notice-bar-line > a { flex: 1; min-width: 0; overflow: hidden; color: var(--board-text); text-overflow: ellipsis; white-space: nowrap; }
.gb-notice-bar-close { flex: none; min-width: 2rem; min-height: 2rem; padding: 0; border: 0; background: none; color: var(--board-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.gb-notice-bar-close:hover { color: var(--board-text); }
.gb-notifications-read { display: flex; justify-content: flex-end; margin: 0 0 var(--board-space-2); }
.gb-notification-list { list-style: none; margin: 0; padding: 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; }
.gb-notifications > .gb-empty { margin: 0; padding: var(--board-space-8) 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; text-align: center; }
/* The messaging plugin draws its own body div, not a notifications card: the same card face, its empty state on the shared empty pad. */
.messages-body { padding: var(--board-space-4) 0 0; background: none; border: 0; border-top: 2px solid var(--board-ink); border-radius: 0; box-shadow: none; }
.messages-body > .gb-empty { margin: 0; padding: var(--board-empty-pad); color: var(--board-dim); text-align: center; }
.gb-notification-list > li { display: flex; align-items: baseline; gap: var(--board-space-2); padding: 0.625rem 0; border-bottom: 1px solid var(--board-hair); font-size: var(--board-size-ui); }
.gb-notification-list > li:last-child { border-bottom-color: var(--board-line); }
.gb-notification-list > li > a, .gb-notification-list > li > span { flex: 1; min-width: 0; color: var(--board-text); }
.gb-notification-list > li.gb-unread { font-weight: var(--board-weight-bold); }
.gb-notification-list > li.gb-unread::before { content: ""; flex: none; align-self: center; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--board-accent); }
.gb-notification-list time { flex: none; color: var(--board-dim); font-size: var(--board-size-meta); font-weight: var(--board-weight-normal); font-variant-numeric: tabular-nums; }
.gb-notification-delete { flex: none; margin: 0; }
.gb-notifications .gb-notification-list .gb-notification-delete > button[type="submit"] { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--board-dim); font-size: var(--board-size-meta); font-weight: var(--board-weight-normal); }
.gb-notifications .gb-notification-list .gb-notification-delete > button[type="submit"]:hover { background: none; color: var(--board-text); opacity: 1; }
/* A 403/404 sits on the page ground, not a card: the code in the brand at 8rem, what happened, and two ways onward — home as the filled btn-primary, the same address again quiet (board-skin.md §9). Production's measures, off the skin's scale, so literals. */
.gb-error-page { padding-block: clamp(3rem, 14vh, 8rem); text-align: center; }
.gb-error-page .gb-status { margin: 0 0 0.8rem; font-size: 8rem; font-weight: 900; line-height: 1; color: var(--board-accent); }
.gb-error-page h1 { margin: 0 0 0.75rem; font-size: 2.25rem; font-weight: var(--board-weight-title); line-height: 1.25; }
.gb-error-page .gb-text { margin: 0 0 1.5rem; font-size: var(--board-size-read); color: var(--board-dim); }
.gb-error-page .gb-go { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
@media (max-width: 47.99rem) {
  .gb-error-page .gb-status { font-size: 4rem; }
  .gb-error-page h1 { font-size: 1.75rem; }
}

table:not(.board-table) { border-collapse: collapse; }
table:not(.board-table) th, table:not(.board-table) td { padding: var(--board-space-2) var(--board-space-3); border-bottom: 1px solid var(--board-line); text-align: left; }

/*
 * The general parts a plugin draws with (default-skins.md §4), in C's shape: a panel leads with the
 * region's one 2px rule; a table is quiet labels over a rule, rows parted by the faintest divider;
 * a dialog is a hairline frame on the page ground. Buttons, fields, badges, tags, rows, the empty
 * state and the pager are drawn above and in the shell.
 */
section.gb-panel { margin: 0 0 1.75rem; }
.gb-panel-head { margin: 0 0 var(--board-space-3); padding-bottom: var(--board-space-2); border-bottom: 2px solid var(--board-ink); font-size: var(--board-size-head); font-weight: var(--board-weight-title); }
table.gb-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--board-ink); font-size: var(--board-size-meta); }
table.gb-table th, table.gb-table td { padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--board-hair); text-align: left; }
table.gb-table thead th { border-bottom: 1px solid var(--board-line); color: var(--board-dim); font-size: var(--board-size-caption); font-weight: 500; }
table.gb-table tbody tr:last-child > * { border-bottom-color: var(--board-line); }
dialog.gb-dialog { max-width: min(32rem, calc(100vw - 2rem)); padding: var(--board-space-5); border: 1px solid var(--board-line); border-radius: var(--board-radius-l); background: var(--board-bg); color: var(--board-text); box-shadow: 0 8px 28px rgb(0 0 0 / 0.12); }
dialog.gb-dialog::backdrop { background: color-mix(in srgb, var(--board-text) 40%, transparent); }
/* Code outside a post (the parts catalogue, a plugin's sample) scrolls in its own box instead of widening the page. */
/* The member in the header: the first letter in a 28px circle, then the name (C) — the circle takes the person mark's place. */
.gb-account-menu > summary > .gb-icon-user { display: none; }
.gb-account-menu > summary > .gb-avatar-initial { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; box-sizing: border-box; border: 1px solid var(--board-line); border-radius: 50%; background: var(--board-surface); color: var(--board-mid); font-size: var(--board-size-caption); font-weight: var(--board-weight-normal); }
/* The orders a board is read in (space.sorts): 13px words, the current one in the text colour at 700, the rest muted (C-desktop). */
nav.gb-listing-sorts { display: flex; flex-wrap: wrap; gap: 2px 0.75rem; font-size: var(--board-size-meta); }
nav.gb-listing-sorts a { color: var(--board-dim); white-space: nowrap; }
nav.gb-listing-sorts a:hover { color: var(--board-text); text-decoration: none; }
nav.gb-listing-sorts a[aria-current="true"] { color: var(--board-text); font-weight: var(--board-weight-bold); }
/* A feed's filter row and a listing's narrowing (?with=photos): words like the sorts, the page being read in bold; a narrowing is its clear link. */
nav.gb-feed-filters, nav.gb-listing-filters { display: flex; flex-wrap: wrap; gap: 2px 0.75rem; font-size: var(--board-size-meta); }
nav.gb-feed-filters { padding: var(--board-space-2) 0; border-bottom: 1px solid var(--board-hair); }
nav.gb-listing-filters { padding: 0 0 var(--board-space-3); }
nav.gb-feed-filters a { color: var(--board-dim); white-space: nowrap; }
nav.gb-feed-filters a:hover { color: var(--board-text); text-decoration: none; }
nav.gb-feed-filters a[aria-current="page"], nav.gb-listing-filters a { color: var(--board-text); font-weight: var(--board-weight-bold); white-space: nowrap; }
/* «댓글 8»: the number in the accent (C). */
.gb-comments h2 > span > .gb-count { color: var(--board-accent); }
/* A comment without a picture draws no mark (C): Core's first-letter circle is for skins that want one. */
.gb-comment .gb-avatar-initial { display: none; }
pre { max-width: 100%; overflow-x: auto; font-family: var(--board-mono); font-size: var(--board-size-caption); }
dl { margin: 0; }
dt { font-size: var(--board-size-meta); color: var(--board-dim); }
dd { margin: 0 0 var(--board-space-2); }
.gb-lang-offer { position: fixed; inset-inline: 0; bottom: 0; z-index: 101; display: flex; align-items: center; justify-content: center; gap: var(--board-space-3); padding: var(--board-space-3) var(--board-space-4) calc(var(--board-space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--board-line); background: var(--board-surface); color: var(--board-text); }
.gb-lang-offer a { color: var(--board-accent); font-weight: var(--board-weight-semibold); text-decoration: none; white-space: nowrap; }
.gb-lang-offer button { padding: 0; border: 0; background: none; color: var(--board-dim); font: inherit; cursor: pointer; }
.gb-lang-switch ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.gb-lang-switch a, .gb-lang-switch span { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; }
.gb-lang-switch a { text-decoration: underline; text-underline-offset: 0.15em; }
.gb-lang-switch [aria-current="true"] { font-weight: var(--board-weight-semibold); }
/* A form on its way (Core's data-pending, noriter-154): every form, the edit forms too, shows it and cannot be pressed twice. */
form[aria-busy="true"] { cursor: progress; }
form[aria-busy="true"] button[data-pending], form[aria-busy="true"] input[data-pending] { opacity: 0.6; cursor: progress; }
/*
 * A phone is a thumb: every link and button that stands on its own is 44px tall (b2c-design §7). The hit
 * area is real height, not a padded pseudo-element, because a thumb lands on the box. Links inside running
 * text (a post body, a paragraph) keep their line, and type size never changes.
 */
@media (max-width: 47.99rem), (pointer: coarse) {
  /* Widget box links (tiles, cards and rows) are layout; only its header's “more” link gets the thumb target (noriter-186). */
  :where(.gb-feed-filters, .gb-members, .gb-tag-list, .gb-me-doors, .board-here, .footer-menu, .gb-categories, .gb-listing-sorts, .box-more) :where(a:not(.gb-skip-link, .gb-brand, .chip)) { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .gb-tag-list a, .gb-sort a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .gb-brand, .gb-skip-link, .chip { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .board-search-pop > summary, .board-menu-pop > summary, .gb-theme-toggle { width: 2.75rem; height: 2.75rem; }
  .gb-share, .gb-copy-link, .gb-bookmark, .gb-bookmark button, .gb-btn, .gb-reaction,
  .post-vote .gb-share, .post-vote .gb-copy-link, .post-vote .gb-bookmark.gb-hint, .post-vote .gb-bookmark button[type="submit"]:not(.gb-link) { min-height: 2.75rem; min-width: 2.75rem; }
  .post-meta a, .gb-meta a, .gb-actions a, .gb-comment .gb-actions > a, .post .gb-tags .gb-tag, .gb-widget-hero a.gb-cta, .gb-widget-hero p > a:only-child { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .gb-reactions .gb-reaction, .post-vote .gb-reaction { min-height: 2.75rem; }
  .gb-comment .gb-actions > a { min-height: 2.75rem; }
  .post-chips { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; }
  button:not(.gb-link), input[type="submit"] { min-height: 2.75rem; }
  .gb-notice-bar-close { min-width: 2.75rem; min-height: 2.75rem; }
  .gb-notice-bar-line { padding-block: 0; }
  .gb-auth-remember { min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; }
}