/* ---- 목록 공통 ---- */
.gb-breadcrumb { margin: 0 0 0.5rem; color: var(--gb-text-dim); font-size: 13px; }
.gb-page-title { padding-bottom: 0.5rem; }
main > h1 { margin: 0 0 0.6rem; font-size: 22px; font-weight: 700; }
main > .gb-actions { justify-content: flex-end; margin: -0.2rem 0 1rem; }
main:not(:has(> .gb-sidebar:not(:empty))):has(> h1):has(> .gb-actions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; align-content: start; }
main:not(:has(> .gb-sidebar:not(:empty))):has(> h1):has(> .gb-actions) > :not(h1) { grid-column: 1 / -1; }
main:not(:has(> .gb-sidebar:not(:empty))):has(> h1):has(> .gb-actions) > .gb-actions { grid-column: 2; grid-row: 1; margin: 0 0 1rem; }
main > p.gb-empty, main > p:not([class]) { color: var(--gb-text-dim); }
main > form { max-width: 45rem; }
/* 읽기 폭 45rem 은 머리 바와 같은 본문 틀(70rem) 가운데에 둔다. 작품을 훑는 VOD 화면(작품 상세·찾기·보관함)은
   틀 폭을 다 쓴다 (vod-skin.md §4 「넓은 화면 폭」). */
main:has(> article):not(:has(> .gb-sidebar:not(:empty))) > :is(article, section, nav, aside) { max-width: 45rem; margin-inline: auto; }
main > article.gb-plugin-page.gb-plugin-page:has(:is(.vod-detail-media, .vod-search, .vod-library)) { max-width: none; }
main > .gb-content-list > li:first-child { border-top: 1px solid var(--gb-border); }
main > nav.gb-content-nav { margin-top: 2rem; border-top: 1px solid var(--gb-border); }

.gb-widget-menu.gb-display-inline ul, .gb-engagement, .gb-reactions, .gb-actions, form.gb-inline, .gb-tags, .gb-tag-list, nav.gb-content-nav, ul.gb-attachments, p.gb-submit, .gb-search-form, .gb-pagination, .gb-profile ul.gb-meta, :is(.gb-tabs, .gb-profile-tabs) { display: flex; flex-wrap: wrap; }
.gb-engagement, .gb-reactions, .gb-actions, form.gb-inline, p.gb-submit, :is(.gb-tabs, .gb-profile-tabs) { align-items: center; }
.gb-actions { gap: 0.5rem; margin: 0.5rem 0; }
.gb-actions .gb-write { font-weight: 700; }
.gb-engagement { gap: 1rem; margin: 1rem 0; }
.gb-reactions { gap: 0.5rem; }
.gb-reaction { display: inline-flex; align-items: center; gap: 0.25rem; }
.gb-reaction[aria-pressed="true"] { color: var(--gb-accent); }
.gb-bookmark-active { font-weight: 700; }
.gb-moderation, .gb-report-form { font-size: 13px; }

/* 글 목록: 최소 높이 56px 줄, 구분선 --gb-border. */
.gb-content-list { list-style: none; margin: 0; padding: 0; }
.gb-content-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 56px; padding: 0.625rem 0; border-bottom: 1px solid var(--gb-border); }
.gb-content-list .gb-title, .gb-content-list .gb-row-title { min-width: 0; font-weight: 600; }
.gb-content-list a { color: var(--gb-text); }
.gb-content-list a:hover { text-decoration: underline; }
.gb-content-list .gb-meta, .gb-content-list small, .gb-content-list time { color: var(--gb-text-dim); font-size: 13px; }
.gb-content-list .gb-author { color: var(--gb-text-dim); font-size: 13px; }
.gb-row-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--gb-radius-sm); object-fit: cover; background: var(--gb-surface-hover); }
.gb-badge { display: inline-block; margin-right: 0.25rem; padding: 0 0.5rem; border: 0; border-radius: var(--gb-pill); background: var(--gb-surface-2); color: var(--gb-text-dim); font-size: 12px; line-height: 1.5; vertical-align: 1px; }
.gb-badge.tone-warning, .gb-badge.tone-danger { background: var(--gb-surface-2); color: var(--gb-danger); }
.gb-badge.gb-badge-notice { padding: 0; background: none; color: var(--gb-accent); font-weight: 700; }

nav.gb-content-nav { gap: 0.5rem 1rem; padding-top: 0.75rem; font-size: 13px; }
nav.gb-content-nav a { color: var(--gb-text-dim); }
nav.gb-content-nav a:hover { color: var(--gb-text); }

/* ---- 글 보기 ---- */
article .gb-body { line-height: 1.65; }
.gb-attachments { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gb-attachment-file a { display: inline-block; padding: 0.25rem 0.75rem; border: 0; border-radius: var(--gb-pill); background: var(--gb-surface-2); font-size: 13px; }
.gb-attachment-image img, .gb-attachment-video video { display: block; max-width: 100%; height: auto; border-radius: var(--gb-radius-sm); }
.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(--gb-radius-sm) var(--gb-radius-sm) 0 0; }
.gb-body .gb-image-strip img:last-child { border-radius: 0 0 var(--gb-radius-sm) var(--gb-radius-sm); }
.gb-embed-frame { margin: 0.75rem 0; }
.gb-embed-source { margin: 0.25rem 0 0; font-size: 13px; }
.gb-embed-frame[data-embed-sized] .gb-embed-source { display: none; }
.gb-image-source { text-align: center; }
.gb-source-ref { font-size: 0.75em; line-height: 0; vertical-align: super; }
.gb-body .gb-source-ref a { text-decoration: none; }
.gb-source-notes { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--gb-border); font-size: 13px; }
.gb-source-notes ol { margin-bottom: 0; padding-left: 1.4rem; }
.gb-source-notes-title { margin: 0 0 0.25rem; font-size: 13px; font-weight: 700; }
.gb-source-notes li:target { background: var(--gb-surface-2); }

.gb-more-menu summary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.15rem 0.75rem; border-radius: var(--gb-pill); color: var(--gb-text-dim); cursor: pointer; }
.gb-more-menu summary::after { content: none; }
.gb-more-menu .gb-menu-list form { display: block; padding: 0.5rem 1rem; }
.gb-more-menu .gb-menu-list form button { padding: 0; width: auto; }
@media (max-width: 35rem) { .gb-comment .gb-more-menu .gb-menu-list { left: auto; right: 0; } }

.gb-actions { position: relative; }
.gb-actions .gb-report > summary { list-style: none; cursor: pointer; color: var(--gb-text-dim); }
.gb-actions .gb-report > summary::-webkit-details-marker { display: none; }
.gb-actions .gb-report > summary:hover { color: var(--gb-text); text-decoration: underline; }
.gb-actions .gb-report-form { position: absolute; top: 100%; left: 0; z-index: 5; box-sizing: border-box; width: min(20rem, calc(100vw - 2rem)); margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--gb-border); border-radius: var(--gb-radius); background: var(--gb-surface); }
.gb-actions .gb-report-form label { display: grid; gap: 0.25rem; margin-bottom: 0.5rem; }

/* ---- 댓글 ---- */
.gb-comments { margin: 1.75rem 0 0; padding: 0; }
#comments, [id^='comment-'] { scroll-margin-top: calc(var(--gb-header-height, 60px) + 0.75rem); }
.gb-comments h2 { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0 0 0.5rem; border-bottom: 0; font-size: 17px; font-weight: 700; }
.gb-comment-sorts { display: flex; gap: 0 0.625rem; padding: 0.5rem 0 0; font-size: 13px; }
.gb-comment-sorts a { color: var(--gb-text-dim); }
.gb-comment-sorts a:hover { color: var(--gb-text); text-decoration: none; }
.gb-comment-sorts a[aria-current] { color: var(--gb-text); font-weight: 700; }
.gb-comment-section { margin-bottom: 1.5rem; }
.gb-comment-section-title { border-bottom: 0; }
.gb-comment-section-count { color: var(--gb-accent); font-weight: 700; }
.gb-comment-section-caption { margin-left: auto; color: var(--gb-text-dim); font-size: 12px; font-weight: 400; }
.gb-comment-section-list > li { padding: 0.75rem 0; }
.gb-comment-section-more > summary { padding: 0.5rem 0; color: var(--gb-text-dim); font-size: 13px; cursor: pointer; }
.gb-comment-section-more > summary:hover { color: var(--gb-text); }
.gb-comment-list { list-style: none; margin: 0; padding: 0; }
.gb-comment-list > li { padding: 1rem 0; border-bottom: 1px solid var(--gb-border); }
.gb-comment-list .gb-comment-list { margin: 0.75rem 0 -1rem; padding: 0; border: 0; }
.gb-comment-list .gb-comment-list > li { padding: 0.75rem 0 0.75rem 2.875rem; border: 0; }
.gb-comment-list .gb-comment-list > li:last-child { border-bottom: 0; }
.gb-comment { position: relative; }
.gb-comment .gb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 0.25rem; color: var(--gb-text-dim); font-size: 13px; }
.gb-comment .gb-meta .gb-author { color: var(--gb-text); font-size: 15px; font-weight: 600; }
.gb-comment .gb-avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.gb-comment .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--gb-surface-2); color: var(--gb-text-dim); font-size: 13px; font-weight: 700; }
.gb-comment .gb-parent { color: var(--gb-text-dim); }
.gb-comment-list .gb-comment-list > li.gb-comment > .gb-meta > .gb-parent { display: none; }
.gb-comment .gb-body { line-height: 1.65; font-size: 15px; }
.gb-comment .gb-body p:last-child { margin-bottom: 0; }
.gb-comment .gb-reactions, .gb-comment .gb-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; margin: 0.25rem 0 0; font-size: 13px; line-height: 1.6; }
.gb-comment .gb-actions { position: static; }
.gb-comment .gb-actions a, .gb-comment .gb-actions button { color: var(--gb-text-dim); }
.gb-comment .gb-actions button { min-height: 0; padding: 0; border: 0; background: none; font-weight: 400; }
.gb-comment .gb-actions button:hover { background: none; text-decoration: underline; }
.gb-comment .gb-actions .gb-report-form { top: auto; left: 0; width: min(20rem, 100%); }
.gb-comment .gb-actions .gb-report-form button { padding: 0.25rem 0.75rem; border-radius: var(--gb-radius-sm); color: var(--gb-text); }
.gb-comment .gb-more-menu summary { min-width: 0; min-height: 0; padding: 0.15rem; border: 0; background: none; color: var(--gb-text-dim); }
.gb-comment .gb-more-menu summary svg { display: block; }
.gb-comment .gb-reaction, .gb-comment .gb-actions > a, .gb-comment .gb-actions > [data-viewer-branch="member"] > a, .gb-comment .gb-actions > .gb-inline > button, .gb-comment .gb-actions .gb-report > summary { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 0; padding: 0.15rem; border: 0; background: none; color: var(--gb-text-dim); font-size: 13px; font-weight: 400; line-height: 1.6; }
.gb-comment .gb-actions > a:hover, .gb-comment .gb-actions > [data-viewer-branch="member"] > a:hover { color: var(--gb-text); text-decoration: none; }
.gb-comment .gb-reaction[aria-pressed="true"] { color: var(--gb-text); }
.gb-comment .gb-reaction .gb-count { font-size: 13px; font-variant-numeric: tabular-nums; }
.gb-tombstone, .gb-comment-deleted { color: var(--gb-text-dim); font-style: italic; }
.gb-comments .gb-empty, .gb-profile-comments .gb-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 3rem 0; text-align: center; }
.gb-comments .gb-empty strong { font-size: 15px; font-weight: 700; color: var(--gb-text); }
.gb-comments .gb-empty span { color: var(--gb-text-dim); }
.gb-comment-write { margin: 0.75rem 0; padding: 0; }
.gb-comment-write h2 { margin: 0 0 0.75rem; font-size: 17px; }
.gb-comment-write .gb-notice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0; padding: 1rem; border: 0; border-radius: var(--gb-radius); background: var(--gb-surface); font-size: 15px; color: var(--gb-text-dim); }
.gb-comment-form { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 0.75rem; margin: 0.75rem 0 0; padding: 0.75rem 1rem; border-radius: var(--gb-radius); background: var(--gb-surface); }
.gb-comment-form > * { flex: 1 0 100%; }
.gb-comment-form > a, .gb-comment-form > button[type='submit'] { flex: 0 0 auto; }
.gb-comment-form > a { order: 1; align-self: center; }
.gb-comment-form > button[type='submit'] { order: 2; }
.gb-comment-form h3 { margin: 0 0 0.5rem; font-size: 15px; }
.gb-comment-form textarea { min-height: 4.5rem; border: 0; background: none; }
.gb-comment-form textarea:focus { background: none; }
.gb-comment-form label { display: inline-block; margin: 0.5rem 1rem 0.5rem 0; color: var(--gb-text-dim); font-size: 13px; }
.gb-comment-form > label { margin-right: 0; }
.gb-comments .gb-pagination { margin: 0.75rem 0; }

/* ---- 글쓰기 ---- */
.gb-content-form { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; padding: 1rem 0 0; }
.gb-content-form label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--gb-text-dim); font-size: 13px; font-weight: 600; }
.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: 0.5rem; font-weight: 400; }
.gb-content-form input[type="text"], .gb-content-form select { width: 100%; }
.gb-content-form input[name="title"] { min-height: 3.25rem; padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--gb-border); border-radius: 0; background: none; font-size: 22px; font-weight: 700; }
.gb-content-form input[name="title"]:focus { border-bottom-color: var(--gb-accent); background: none; }
.gb-content-form > .gb-slot-compose-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.gb-content-form textarea, .gb-editor textarea { min-height: 18rem; line-height: 1.65; }
.gb-editor-tool { min-height: 2.25rem; }
.gb-editor .gb-editor-toolbar { margin-bottom: 0.5rem; border: 0; border-radius: var(--gb-radius); background: var(--gb-surface); }
.gb-editor .gb-editor-host { border: 0; border-bottom: 1px solid var(--gb-border); border-radius: 0; background: var(--gb-bg); }
.gb-content-form .gb-submit { display: flex; justify-content: flex-end; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--gb-border); }
.gb-content-form .gb-submit button { min-width: 6rem; }
.gb-content-form .gb-delete { margin-left: auto; }
.gb-content-form .gb-error { margin: 0; }
.gb-compose-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; font-size: 14px; }
.gb-content-form .gb-compose-options label { flex-direction: row; align-items: center; gap: 0.5rem; min-height: 2.25rem; color: var(--gb-text); font-size: inherit; font-weight: 400; }
.gb-compose-options input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0; }
.gb-compose-options select { width: auto; }
.gb-drafts-list { margin: 0; padding: 0; list-style: none; }
.gb-drafts-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; min-height: 56px; padding: 0.875rem 0; border-bottom: 1px solid var(--gb-border); }
.gb-drafts-title { flex: 1 1 16rem; min-width: 0; color: var(--gb-text); font-weight: 600; }
.gb-drafts-meta { display: inline-flex; flex-wrap: wrap; gap: 0 0.5rem; color: var(--gb-text-dim); font-size: 13px; }
.gb-drafts-delete { margin: 0; }
.gb-drafts > .gb-empty { padding: 3rem 0; text-align: center; }

/* ---- 검색 ---- */
.gb-search .gb-search-form { display: flex; gap: 0.5rem; margin: 0 0 0.5rem; }
.gb-search .gb-search-form input[type="search"] { flex: 1; min-width: 0; max-width: 26rem; }
.gb-search .gb-sort { margin: 0 0 0.75rem; color: var(--gb-text-dim); font-size: 13px; }
.gb-search .gb-sort a { color: var(--gb-text); text-decoration: underline; text-underline-offset: 0.15em; }
.gb-search .gb-empty { padding: 3rem 0; color: var(--gb-text-dim); text-align: center; }
.gb-search-scope { margin: -0.5rem 0 1rem; color: var(--gb-text-dim); font-size: 13px; }
.gb-search-scope a { color: var(--gb-accent); font-weight: 700; }
.gb-search-empty-action { margin: 1rem 0 0; text-align: center; }
.gb-search-results { list-style: none; margin: 0; padding: 0; }
.gb-search-results > li { min-height: 56px; padding: 0.625rem 0; border-bottom: 1px solid var(--gb-border); }
.gb-search-results .gb-snippet { color: var(--gb-text-dim); font-size: 13px; }

/* ---- 로그인·가입·계정 ---- */
.gb-auth { max-width: 30rem; margin: 2.5rem auto; padding: 1.2rem 0 0; }
.gb-auth h1 { margin: 0 0 1rem; font-size: 20px; font-weight: 700; line-height: 1.35; }
.gb-auth-form, .gb-profile-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 30rem; }
.gb-profile-form label, .gb-auth-form label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--gb-text-dim); font-size: 13px; font-weight: 600; }
.gb-profile-form input:not([type="checkbox"]), .gb-auth-form input:not([type="checkbox"]) { width: 100%; }
.gb-auth .gb-auth-form { max-width: none; gap: 1rem; }
.gb-auth .gb-auth-form label { gap: 0.3rem; color: var(--gb-text); font-size: 15px; }
.gb-auth .gb-auth-form label small { color: var(--gb-text-dim); font-size: 12px; font-weight: 400; }
.gb-auth .gb-auth-form label.gb-auth-remember { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
.gb-auth .gb-auth-links { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.gb-auth .gb-auth-form > p:last-child { margin: 0; text-align: right; font-size: 13px; }
.gb-auth .gb-account-login-id { margin: 0 0 1.25rem; }
.gb-auth :is(.gb-auth-form, section) + :is(.gb-auth-form, section) { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gb-border); }
.gb-auth > p:last-child { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--gb-border); text-align: center; color: var(--gb-text-dim); }
.gb-auth p a { color: var(--gb-text); text-decoration: underline; text-underline-offset: 0.15em; }
.gb-auth .gb-auth-consent-client { display: block; margin-top: 0.25rem; color: var(--gb-text-dim); font-size: 12px; overflow-wrap: anywhere; }
.gb-auth .gb-auth-consent-scopes { margin: 1rem 0 1.25rem; font-size: 13px; }
.gb-auth .gb-auth-consent-scopes p { margin: 0 0 0.25rem; color: var(--gb-text-dim); }
.gb-auth .gb-auth-consent-scopes ul { margin: 0; padding-left: 1.1rem; }
.gb-auth .gb-auth-form button.gb-danger[type="submit"] { background: var(--gb-danger); color: var(--gb-on-accent); }
/* 「게스트로 계속」 보조 단추: 바탕 없음·테두리 --gb-border-strong·글자 --gb-text (vod-skin.md §1 명세 21). */
.gb-auth .gb-auth-guest button[type="submit"]:not(.gb-link):not(.gb-reaction):not(.gb-danger) { border: 1px solid var(--gb-border-strong); background: none; color: var(--gb-text); font-weight: 600; }
.gb-auth .gb-auth-guest button[type="submit"]:not(.gb-link):not(.gb-reaction):not(.gb-danger):hover { border-color: var(--gb-text-dim); background: var(--gb-surface-hover); color: var(--gb-text); }
.gb-auth .gb-profile-form { max-width: none; gap: 1rem; }
.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; color: var(--gb-text); }
.gb-auth .gb-profile-form label.gb-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
.gb-auth .gb-profile-form label.gb-checkbox + label.gb-checkbox { margin-top: 0.2rem; }
.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(--gb-danger); }
.gb-providers { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.gb-providers a, .gb-provider { display: block; min-height: 44px; padding: 0.75rem; border: 0; border-radius: var(--gb-pill); background: var(--gb-surface-2); text-align: center; font-weight: 700; }
.gb-providers a:hover { background: var(--gb-surface-hover); text-decoration: none; }
.gb-account-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; font-size: 13px; }
.gb-account-providers ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gb-account-providers li { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gb-border); }
.gb-account-providers form.gb-inline { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.gb-account-providers .gb-provider-password { display: grid; gap: 0.25rem; margin: 0; color: var(--gb-text-dim); font-size: 12px; font-weight: 400; }
.gb-account-providers .gb-provider-password input { width: min(14rem, 100%); }
@media (max-width: 720px) {
  .gb-account-providers li { align-items: stretch; flex-direction: column; }
  .gb-account-providers form.gb-inline { justify-content: flex-start; }
  .gb-account-providers .gb-provider-password { flex: 1 1 100%; }
  .gb-account-providers .gb-provider-password input { width: 100%; }
  /* 본문 위 여백이 0 이라(명세 21 §14) 엔진 화면의 첫 제목은 여기서 띄운다. */
  main > h1:first-child { margin-top: 12px; }
}
.gb-profile-danger { margin-top: 1.5rem; color: var(--gb-text-dim); font-size: 13px; }

/* ---- 프로필 ---- */
.gb-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 1.25rem 0; }
.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; margin-right: 1rem; border-radius: 50%; object-fit: cover; }
.gb-profile .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--gb-surface-2); color: var(--gb-text-dim); font-size: 22px; font-weight: 700; }
.gb-profile .gb-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 2px 0 0; font-size: 13px; }
.gb-profile .handle { color: var(--gb-text-dim); }
.gb-profile .gb-bio { margin: 0.5rem 0 0; color: var(--gb-text-dim); white-space: pre-line; }
.gb-profile .gb-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.25rem; overflow: hidden; margin: 0.75rem 0 0; padding: 0; list-style: none; color: var(--gb-text-dim); font-size: 13px; }
.gb-profile .gb-meta > li::before { content: "·"; display: inline-block; width: 1.25rem; margin-left: -1.25rem; text-align: center; color: var(--gb-text-dim); }
.gb-profile-posts, .gb-profile-comments { padding: 0; }
.gb-profile-posts > p, .gb-profile-comments > p { margin-top: 1.25rem; }
.gb-profile-posts .gb-content-list { border-top: 0; }
.gb-profile-posts .gb-content-list .gb-author { display: none; }
.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; }
:is(.gb-tabs, .gb-profile-tabs) { display: flex; flex-wrap: wrap; gap: 0 1.375rem; margin: 1rem 0; border-bottom: 1px solid var(--gb-border); }
:is(.gb-tabs, .gb-profile-tabs) :is(a, button, strong) { min-height: 0; padding: 0.5rem 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--gb-text-dim); font-size: 15px; font-weight: 400; }
:is(.gb-tabs, .gb-profile-tabs) :is(a, button):hover { background: none; color: var(--gb-text); text-decoration: none; }
:is(.gb-tabs, .gb-profile-tabs) :is(a[aria-current], button[aria-selected="true"], strong) { color: var(--gb-text); font-weight: 700; border-bottom-color: var(--gb-text); }

/* ---- 알림 ---- */
.gb-notifications-read { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.gb-notification-list { list-style: none; margin: 0; padding: 0; }
.gb-notification-list > li { display: flex; align-items: baseline; gap: 0.5rem; min-height: 56px; padding: 0.625rem 0; border-bottom: 1px solid var(--gb-border); font-size: 15px; }
.gb-notification-list > li > a, .gb-notification-list > li > span { flex: 1; min-width: 0; color: var(--gb-text); }
.gb-notification-list > li.gb-unread { font-weight: 700; }
.gb-notification-list > li.gb-unread::before { content: ""; flex: none; align-self: center; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gb-accent); }
.gb-notification-list time { flex: none; color: var(--gb-text-dim); font-size: 13px; font-weight: 400; 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(--gb-text-dim); font-size: 13px; font-weight: 400; }
.gb-notifications .gb-notification-list .gb-notification-delete > button[type="submit"]:hover { background: none; color: var(--gb-text); opacity: 1; }
.gb-notifications > .gb-empty { margin: 0; padding: 3rem 0; text-align: center; }

/* ---- 오류 ---- */
.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(--gb-accent); }
.gb-error-page h1 { margin: 0 0 0.75rem; font-size: 2rem; font-weight: 700; line-height: 1.25; }
.gb-error-page .gb-text { margin: 0 0 1.5rem; color: var(--gb-text-dim); font-size: 15px; }
.gb-error-page .gb-go, .gb-error-page .gb-go-home { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
@media (max-width: 720px) {
  .gb-error-page .gb-status { font-size: 4rem; }
  .gb-error-page h1 { font-size: 1.75rem; }
}

/* ---- 플러그인 화면 틀·지갑·기타 ---- */
.gb-plugin-page > .gb-body { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--gb-border); }
table.gb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.gb-table th, table.gb-table td { padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--gb-border); text-align: left; }
table.gb-table thead th { color: var(--gb-text-dim); font-size: 12px; font-weight: 500; }
dialog.gb-dialog { max-width: min(32rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--gb-border); border-radius: var(--vod-radius-lg); background: var(--gb-surface); color: var(--gb-text); }
dialog.gb-dialog::backdrop { background: var(--gb-bg); opacity: 0.8; }
.gb-series-parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gb-border); counter-reset: part; }
.gb-series-parts > li { padding: 0.75rem 0; border-bottom: 1px solid var(--gb-border); counter-increment: part; }
.gb-series-parts > li::before { content: counter(part) ". "; color: var(--gb-text-dim); }

/* 지갑 내역 필터 탭(vod-skin.md): 가로 한 줄 분할 단추, 보이는 탭만 밝은 바탕. */
nav.wallet-tabs { display: flex; gap: 4px; padding: 4px; background: var(--gb-surface); border-radius: var(--gb-radius); }
nav.wallet-tabs a { flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--vod-radius-md); color: var(--gb-text-dim); font-weight: 600; font-size: 13px; text-decoration: none; }
nav.wallet-tabs a[aria-current] { background: var(--gb-surface-hover); color: var(--gb-text); }

/* 지갑 내역 화면(vod-skin.md §5): 엔진이 부품 클래스로 나눈 마크업(잔액 li.wallet-balance[data-asset],
   내역 li.wallet-move[data-kind][data-asset][data-sign])을 스킨 CSS 로만 배치한다.
   본문을 좌우 여백 밖으로 밀어(음의 margin) 내역 줄과 구분선이 폭 전체를 쓰게 한다. */
article.gb-plugin-page > .gb-body:has(> main.wallet-me) { margin: 0 calc(-1 * var(--gb-gutter)); padding-top: 4px; border-top: 0; }
/* 위 줄(시안): 뒤로 44×44 + 제목 17px/700. 엔진이 글자 「←」만 넣으니 꺾쇠는 ::before 로 그린다. */
header.wallet-head { display: flex; align-items: center; padding: 8px 4px; }
a.wallet-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--gb-text); font-size: 0; text-decoration: none; }
a.wallet-back::before { content: ""; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
header.wallet-head h1 { margin: 0; font-size: 17px; font-weight: 700; }
/* 충전하기 단추(시안): 폭 꽉 참, 높이 44. */
main.wallet-me p.wallet-actions { margin: 0; padding: 10px 16px 0; }
a.wallet-action { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--vod-radius-md); background: var(--gb-accent); color: var(--gb-on-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
main.wallet-me ul { margin: 0; padding: 0; list-style: none; }
main.wallet-me h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
main.wallet-me p { padding: 0 16px; color: var(--gb-text-dim); }
/* 잔액 카드 두 장 가로(간격 8px, 좌우 16px): 라벨 12px dim 위, 금액 24px/700, 단위는 금액 뒤,
   만료 줄 11px. 자산 키는 [data-asset] 로 집고 order 로 유료를 먼저 둔다. */
main.wallet-me ul:has(> li.wallet-balance) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 16px; }
li.wallet-balance { padding: 14px; border-radius: 14px; background: var(--gb-surface); }
li.wallet-balance:only-child { grid-column: 1 / -1; }
li.wallet-balance[data-asset="paid"] { order: -1; }
li.wallet-balance .wallet-sep { display: none; }
.wallet-balance-name { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 400; line-height: 1.42; color: var(--gb-text-dim); }
.wallet-balance-amount { font-size: 24px; font-weight: 700; line-height: 1.17; }
li.wallet-balance[data-asset="paid"] .wallet-balance-amount { color: var(--vod-coin); }
.wallet-balance-unit { margin-left: 2px; font-size: 12px; color: var(--gb-text-dim); }
.wallet-balance-expiring { display: block; margin-top: 2px; font-size: 11px; line-height: 1.36; color: var(--vod-accent-text); }
.wallet-balance-expiring:empty { display: none; }
/* 내역 줄: 왼쪽 36px 원(출처 첫 글자, 엔진이 data-mark 에 줌), 가운데 위=출처 14px/500·아래=시각·자산·종류 12px dim,
   오른쪽 증감 15px/700. 마크업 순서(at·sep·asset·sep·kind·sep·delta·sep·source)를 grid 칸에 다시 놓는다. */
li.wallet-move { display: grid; grid-template-columns: 48px auto auto auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; align-content: center; min-height: 62px; padding: 0.75rem 16px; border-bottom: 1px solid var(--gb-border); }
li.wallet-move::before { grid-area: 1 / 1 / 3 / 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gb-surface-2); color: var(--gb-text-soft); content: attr(data-mark); }
.wallet-move-source { grid-column: 2 / 8; grid-row: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--gb-text); text-overflow: ellipsis; white-space: nowrap; }
/* note 가 붙은 줄(코인 해금 등): 1행에 출처 대신 note 를 같은 모양으로 보이고 출처 글과 그 앞뒤 구분점을 숨긴다(vod-skin.md). */
.wallet-move-note { grid-column: 2 / 8; grid-row: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--gb-text); text-overflow: ellipsis; white-space: nowrap; }
li.wallet-move:has(.wallet-move-note) .wallet-move-source,
li.wallet-move:has(.wallet-move-note) .wallet-move-delta + .wallet-sep,
li.wallet-move:has(.wallet-move-note) .wallet-move-source + .wallet-sep { display: none; }
.wallet-move-delta { grid-column: 8; grid-row: 1 / 3; align-self: center; justify-self: end; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--gb-text); }
li.wallet-move[data-sign="plus"] .wallet-move-delta { color: var(--gb-success); }
li.wallet-move[data-sign="zero"] .wallet-move-delta { color: var(--gb-text-dim); }
.wallet-move-at { grid-column: 2; grid-row: 2; }
.wallet-move-at + .wallet-sep, .wallet-move-asset + .wallet-sep { margin: 0 4px; }
.wallet-move-at + .wallet-sep { grid-column: 3; grid-row: 2; }
.wallet-move-asset { grid-column: 4; grid-row: 2; }
.wallet-move-asset + .wallet-sep { grid-column: 5; grid-row: 2; }
.wallet-move-kind { grid-column: 6; grid-row: 2; }
.wallet-move-kind + .wallet-sep, .wallet-move-delta + .wallet-sep { display: none; }
.wallet-move-at, .wallet-move-asset, .wallet-move-kind, li.wallet-move > .wallet-sep { font-size: 12px; font-weight: 400; line-height: 1.17; color: var(--gb-text-dim); }
main.wallet-me nav.wallet-tabs { margin: 16px 16px 4px; }

/* 홈 위젯의 me 상자 등: 서버가 아는 회원 페이지와 공유 문서의 가지(site-composition.md §2). */
: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(--gb-text-dim); font-size: 13px; }
.gb-counters-inline dt, .gb-counters-inline dd { display: inline; margin: 0; }
.gb-counters-inline dd { margin-inline: 0.25rem 1rem; color: var(--gb-text); font-variant-numeric: tabular-nums; font-weight: 700; }
.gb-members { margin: 0; padding: 0; list-style: none; }
.gb-members li { display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; }
.gb-members .gb-avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.gb-members .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--gb-accent); color: var(--gb-on-accent); font-size: 13px; font-weight: 700; }
.gb-members .gb-badge { margin-left: 0; }
.gb-member-name { min-width: 0; overflow: hidden; color: var(--gb-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gb-member-posts { margin-left: auto; color: var(--gb-text-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-me-head { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; column-gap: 0.75rem; margin: 0; }
.gb-me-head > .gb-avatar { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.gb-me-head > .gb-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--gb-accent); color: var(--gb-on-accent); font-size: 17px; font-weight: 700; }
.gb-me-name { overflow: hidden; color: var(--gb-text); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gb-me-joined { margin-top: 2px; color: var(--gb-text-dim); font-size: 13px; white-space: nowrap; }
.gb-me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0 0; padding: 0.625rem 0; border-radius: var(--gb-radius); background: var(--gb-bg); text-align: center; }
.gb-me-stats div { display: flex; flex-direction: column-reverse; }
.gb-me-stats dt { margin-top: 2px; font-size: 12px; }
.gb-me-stats dt a { color: var(--gb-text-dim); }
.gb-me-stats dd { min-height: 1.4em; margin: 0; color: var(--gb-text); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 700; }
.gb-me-notices { margin: 0.75rem 0 0; }
.gb-me-notices a:not(:empty)::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: var(--gb-accent); vertical-align: 0.1em; }
.gb-me-notices a { color: var(--gb-text); }
.gb-me-notices small { display: block; color: var(--gb-text-dim); font-size: 13px; }
.gb-me-links { display: flex; justify-content: flex-end; gap: 0.75rem; margin: 0.5rem 0 0; font-size: 13px; }
.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(--gb-text-dim); font: inherit; font-weight: 400; cursor: pointer; }
.gb-me-links button[type="submit"]:not(.gb-link):not(.gb-reaction):not(.gb-danger):hover { background: none; color: var(--gb-text); }
.gb-me-signed-out { margin: 0 0 0.75rem; color: var(--gb-text-dim); }
.gb-me-doors { display: flex; align-items: center; gap: 1rem; margin: 0; }
.gb-me-sign-in { padding: 0.5rem 1rem; border-radius: var(--vod-radius-md); background: var(--gb-surface-2); color: var(--gb-text); font-weight: 600; }