.cc-screen--character {
  padding-bottom: calc(var(--cc-size-cta-height) + var(--cc-space-32) + var(--cc-space-4));
}

.cc-character__intro {
  display: flex;
  gap: var(--cc-space-16);
  align-items: center;
  padding: var(--cc-space-8) var(--cc-space-16) 0;
}

.cc-character__identity {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-6);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-character__identity h1 {
  margin: 0;
  color: var(--cc-fg);
  font-family: var(--cc-font-story);
  font-size: var(--cc-text-26);
  font-weight: var(--cc-weight-bold);
}

.cc-quote {
  margin: var(--cc-space-20) var(--cc-space-16) 0;
}

.cc-facts {
  padding: var(--cc-space-20) var(--cc-space-16) 0;
}

.cc-character__options {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-8);
  padding: var(--cc-space-16) var(--cc-space-16) 0;
}

.cc-character__options h2 {
  margin: 0 0 var(--cc-space-4);
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  font-weight: var(--cc-weight-normal);
}

.gb-auth {
  max-width: var(--cc-app-width);
  margin: 0 auto;
  padding: var(--cc-space-8) 0 var(--cc-space-24);
}

.gb-auth h1 {
  margin: 0 0 var(--cc-space-20);
  font-size: var(--cc-text-22);
  font-weight: var(--cc-weight-bold);
}

.gb-auth-form,
.gb-profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-16);
  max-width: none;
  margin: 0;
}

.gb-auth-form h2 {
  margin: 0;
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-semibold);
}

.gb-auth-form label,
.gb-profile-form label {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  color: var(--cc-fg);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-auth-form small,
.gb-profile-form small {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
  font-weight: var(--cc-weight-normal);
}

.gb-auth-form [type='text'],
.gb-auth-form [type='email'],
.gb-auth-form [type='password'],
.gb-profile-form [type='text'],
.gb-profile-form [type='email'],
.gb-profile-form [type='password'] {
  width: 100%;
  min-height: var(--cc-size-action);
  padding: 0 var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg);
}

.gb-auth-form button,
.gb-profile-form button {
  width: 100%;
  min-height: var(--cc-size-cta-height);
  border: 0;
  border-radius: var(--cc-pill);
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-bold);
}

.gb-auth-form .gb-auth-remember,
.gb-profile-form .gb-checkbox {
  flex-direction: row;
  align-items: center;
  font-weight: var(--cc-weight-normal);
}

.gb-auth-form > p {
  margin: 0;
  color: var(--cc-fg-muted);
}

.gb-auth .gb-auth-links,
.gb-account-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-8) var(--cc-space-16);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-empty {
  padding: var(--cc-space-32) 0;
  color: var(--cc-fg-muted);
  text-align: center;
}

.gb-content-list {
  margin: 0;
  padding: 0;
  border-top: var(--cc-border-width) solid var(--cc-border);
  list-style: none;
}

.gb-content-list > li {
  display: flex;
  min-height: var(--cc-size-action);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-12);
  padding: var(--cc-space-8) 0;
  border-bottom: var(--cc-border-width) solid var(--cc-border);
}

.gb-content-list .gb-title,
.gb-content-list .gb-row-title {
  min-width: 0;
  overflow: hidden;
  color: var(--cc-fg);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-content-list time,
.gb-content-list .gb-meta {
  flex: none;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
  white-space: nowrap;
}

.gb-content-list .gb-author {
  display: none;
}

.gb-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--cc-space-16);
}

.gb-actions .gb-write {
  display: inline-flex;
  min-height: var(--cc-size-action);
  align-items: center;
  padding: 0 var(--cc-space-16);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface);
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-content-form,
.gb-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-12);
}

.gb-content-form label {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-content-form [type='text'],
.gb-content-form [type='search'],
.gb-content-form [type='url'],
.gb-content-form [type='email'],
.gb-content-form [type='number'],
.gb-content-form select,
.gb-content-form textarea,
.gb-comment-form textarea {
  width: 100%;
  min-height: var(--cc-size-action);
  padding: var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg);
}

.gb-comment-form button,
.gb-submit button {
  width: 100%;
  min-height: var(--cc-size-cta-height);
  border: 0;
  border-radius: var(--cc-pill);
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-bold);
}

.gb-content-form .gb-submit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-8);
  margin: 0;
}

.gb-submit button {
  flex: 1 1 100%;
}

article .gb-body {
  color: var(--cc-fg-soft);
  line-height: var(--cc-leading-summary);
}

.gb-comments {
  margin-top: var(--cc-space-32);
}

.gb-comments h2,
.gb-comment-write h2 {
  margin: 0;
  padding-bottom: var(--cc-space-12);
  border-bottom: var(--cc-border-width) solid var(--cc-border);
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-bold);
}

.gb-comment-sorts {
  display: flex;
  gap: var(--cc-space-16);
  padding-top: var(--cc-space-8);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-comment-sorts [aria-current] {
  color: var(--cc-fg);
  font-weight: var(--cc-weight-semibold);
}

.gb-comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-comment-list > li {
  padding: var(--cc-space-16) 0;
  border-bottom: var(--cc-border-width) solid var(--cc-border);
}

.gb-comment .gb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-4) var(--cc-space-8);
  margin-bottom: var(--cc-space-4);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.gb-comment .gb-author {
  color: var(--cc-fg);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-comment .gb-body {
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-14);
  line-height: var(--cc-leading-body);
}

.gb-body > :last-child {
  margin-bottom: 0;
}

.gb-comments .gb-empty {
  display: grid;
  justify-items: center;
  gap: var(--cc-space-8);
  padding: var(--cc-space-32) 0;
  color: var(--cc-fg-muted);
  text-align: center;
}

.gb-comment-write {
  margin-top: var(--cc-space-24);
}

.gb-comment-form {
  margin-top: var(--cc-space-16);
}

.gb-comment-form label {
  display: flex;
  align-items: center;
  gap: var(--cc-space-8);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

/* 글쓰기·수정 폼 — 단추를 주·보조·글자 링크로 나누고 편집기·첨부 칸을 잡는다 */

.gb-compose-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-8);
}

.gb-compose-bar .gb-btn,
.gb-compose-space .gb-btn,
.gb-attach-pick {
  display: inline-flex;
  min-height: var(--cc-size-action);
  align-items: center;
  padding: 0 var(--cc-space-20);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-pill);
  background: transparent;
  color: var(--cc-fg);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-compose-bar .gb-compose-cancel {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-fg-muted);
  font-weight: var(--cc-weight-normal);
}

.gb-compose-publish {
  min-height: var(--cc-size-action);
  margin-left: auto;
  padding: 0 var(--cc-space-20);
  border: 0;
  border-radius: var(--cc-pill);
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-bold);
}

.gb-compose-drafts {
  display: inline-flex;
  min-height: var(--cc-size-action);
  align-items: center;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-draft-status {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-compose-notice,
.gb-compose-preview-pane {
  flex-basis: 100%;
  margin: 0;
}

.gb-compose-notice {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-compose-preview-pane {
  padding: var(--cc-space-12) var(--cc-space-16);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
}

.gb-compose-space {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-8);
  margin: 0;
}

.gb-compose-space label {
  flex: 1 1 12rem;
  flex-direction: row;
  align-items: center;
  gap: var(--cc-space-8);
}

.gb-compose-space select {
  flex: 1;
  min-width: 0;
}

.gb-compose-options {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
}

.gb-content-form label:has([type='checkbox']),
.gb-content-form label:has([type='radio']) {
  min-height: var(--cc-size-action);
  flex-direction: row;
  align-items: center;
  gap: var(--cc-space-8);
}

.gb-content-form [type='checkbox'],
.gb-content-form [type='radio'] {
  width: var(--cc-space-20);
  height: var(--cc-space-20);
  flex: none;
  margin: 0;
  accent-color: var(--cc-accent-deep);
}

.gb-tags-field {
  display: flex;
  width: 100%;
  min-height: var(--cc-size-action);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-4) var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
}

.gb-tags-field [type='text'] {
  flex: 1;
  min-width: 8rem;
  min-height: var(--cc-height-chip);
  padding: 0 var(--cc-space-4);
  border: 0;
  background: transparent;
}

.gb-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-4);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-bottom: 0;
  border-radius: var(--cc-radius-panel) var(--cc-radius-panel) 0 0;
  background: var(--cc-surface-card);
}

.gb-editor-tool {
  display: inline-flex;
  width: var(--cc-size-action);
  height: var(--cc-size-action);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--gb-radius-sm);
  background: transparent;
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-editor-tool:hover {
  background: var(--gb-surface-hover);
  color: var(--cc-fg);
}

.gb-editor-tool[aria-pressed='true'] {
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.gb-editor-sep {
  align-self: stretch;
  width: 1px;
  margin: var(--cc-space-4);
  background: var(--cc-border-strong);
}

.gb-editor-host {
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-top: 0;
  border-radius: 0 0 var(--cc-radius-panel) var(--cc-radius-panel);
  background: var(--cc-surface-card);
}

.gb-editor-body {
  min-height: 240px;
  padding: var(--cc-space-12);
  outline: none;
}

.gb-editor-body .gb-fence {
  display: flex;
  align-items: baseline;
  gap: var(--cc-space-8);
  padding: var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--gb-radius-sm);
  background: var(--cc-surface);
  cursor: pointer;
}

.gb-editor-status {
  margin: var(--cc-space-4) 0 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.gb-editor-status:empty {
  display: none;
}

.gb-editor-uploads {
  display: grid;
  gap: var(--cc-space-8);
  margin: var(--cc-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.gb-editor-uploads li {
  display: flex;
  align-items: center;
  gap: var(--cc-space-8);
  padding: var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--gb-radius-sm);
  background: var(--cc-surface-card);
  font-size: var(--cc-text-13);
}

.gb-editor-upload-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-editor-upload-state {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.gb-editor-upload-retry,
.gb-editor-upload-remove {
  flex: none;
  min-height: var(--cc-height-chip);
  padding: 0 var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-chip);
  background: transparent;
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-12);
}

.gb-editor-dialog {
  max-width: 100%;
  padding: var(--cc-space-16);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-card);
  background: var(--cc-surface);
  color: var(--cc-fg);
}

.gb-editor-dialog h2 {
  margin: 0 0 var(--cc-space-8);
  font-size: var(--cc-text-16);
}

.gb-editor-dialog button {
  min-height: var(--cc-height-chip);
  margin: var(--cc-space-8) var(--cc-space-8) 0 0;
  padding: 0 var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-chip);
  background: transparent;
  color: var(--cc-fg);
  font-size: var(--cc-text-14);
}

.gb-editor-dialog-hint {
  margin: var(--cc-space-8) 0 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-attach-drop {
  display: flex;
  align-items: center;
  gap: var(--cc-space-12);
  padding: var(--cc-space-16);
  border: var(--cc-border-width) dashed var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
}

.gb-attach-drop[data-over] {
  border-style: solid;
}

.gb-attach-drop-label {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-attach-hint {
  display: block;
  margin: var(--cc-space-4) 0 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.gb-attach-status {
  margin: var(--cc-space-4) 0 0;
  color: var(--gb-danger);
  font-size: var(--cc-text-12);
  white-space: pre-line;
}

.gb-attach-status:empty {
  display: none;
}

.gb-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--cc-space-8);
  margin: var(--cc-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.gb-attach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  min-width: 0;
  padding: var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--gb-radius-sm);
  background: var(--cc-surface-card);
}

.gb-attach-card > img,
.gb-attach-file {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--cc-radius-badge);
  object-fit: cover;
}

.gb-attach-file {
  display: grid;
  place-items: center;
  border: var(--cc-border-width) solid var(--cc-border);
  color: var(--cc-fg-muted);
}

.gb-attach-name,
.gb-attach-card-status {
  overflow: hidden;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-attach-buttons {
  display: flex;
  gap: var(--cc-space-4);
}

.gb-attach-buttons button,
.gb-attach-retry {
  flex: none;
  min-height: var(--cc-height-chip);
  padding: 0 var(--cc-space-8);
  border: var(--cc-border-width) solid var(--cc-border-strong);
  border-radius: var(--cc-radius-chip);
  background: transparent;
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-12);
}

.gb-attach-buttons .gb-attach-remove {
  position: absolute;
  top: var(--cc-space-8);
  right: var(--cc-space-8);
  background: var(--cc-surface-card);
}

.gb-attach-cover-badge {
  align-self: flex-start;
  padding: var(--cc-space-2) var(--cc-space-8);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-11);
  font-weight: var(--cc-weight-semibold);
}

.gb-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-8);
  margin: 0;
  padding: var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
}

.gb-attachments legend {
  padding: 0 var(--cc-space-4);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-content-cover-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-8);
}

.gb-content-cover-detach,
.gb-content-attachment-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-4);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.gb-content-attached {
  padding: var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
}

.gb-content-attached h2 {
  margin: 0 0 var(--cc-space-8);
  font-size: var(--cc-text-14);
}

.gb-content-attached ul {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-content-attached li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-8);
}

.gb-content-draft-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-8);
  margin: 0;
  padding: var(--cc-space-12);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  font-size: var(--cc-text-14);
}

.gb-content-draft-recovery p {
  flex: 1;
  margin: 0;
}

.gb-content-draft-restore {
  flex: none;
  min-height: var(--cc-size-action);
  padding: 0 var(--cc-space-16);
  border: 0;
  border-radius: var(--cc-pill);
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-content-draft-discard {
  flex: none;
  min-height: var(--cc-size-action);
  padding: 0 var(--cc-space-12);
  border: 0;
  background: transparent;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-content-draft-saved {
  margin: var(--cc-space-4) 0 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.gb-delete {
  align-self: flex-start;
  min-height: var(--cc-size-action);
  padding: 0 var(--cc-space-20);
  border: var(--cc-border-width) solid var(--gb-danger);
  border-radius: var(--cc-pill);
  background: transparent;
  color: var(--gb-danger);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.gb-error-page {
  padding: var(--cc-space-48) 0;
  text-align: center;
}

.gb-error-page .gb-status {
  margin: 0 0 var(--cc-space-12);
  color: var(--cc-accent);
  font-size: var(--cc-text-28);
  font-weight: var(--cc-weight-bold);
}

.gb-error-page h1 {
  margin: 0 0 var(--cc-space-12);
  font-size: var(--cc-text-22);
  font-weight: var(--cc-weight-bold);
}

.gb-error-page .gb-text {
  margin: 0 0 var(--cc-space-24);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-error-page .gb-go,
.gb-error-page .gb-go-home {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-8);
}

.cc-screen--explore {
  padding-bottom: var(--cc-size-tabbar);
}

.cc-explore-filters {
  display: flex;
  gap: var(--cc-space-8);
  padding: var(--cc-space-12) var(--cc-space-16) var(--cc-space-4);
  overflow-x: auto;
}

.cc-explore-separator {
  width: 1px;
  margin: var(--cc-space-6) var(--cc-space-2);
  background: var(--cc-border-strong);
}

.cc-explore-list {
  padding: 0 var(--cc-space-16);
}

.cc-explore-note {
  margin: var(--cc-space-16) 0 0;
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  line-height: var(--cc-leading-note);
}

.cc-explore-empty {
  padding: var(--cc-space-16) 0;
  color: var(--cc-fg-muted);
}

.cc-explore-dropdown {
  position: relative;
}

.cc-explore-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--cc-z-dropdown);
  display: grid;
  gap: var(--cc-space-8);
  min-width: 140px;
  padding: var(--cc-space-12);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
}

.cc-home-banner-wrap {
  position: relative;
}

.cc-home-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cc-home-banner-track.is-dragging {
  scroll-snap-type: none;
}

.cc-home-banner-track::-webkit-scrollbar {
  display: none;
}

.cc-home-banner-track .cc-banner {
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: 0;
}

.cc-home-banner-wrap > .cc-banner__count {
  position: absolute;
  bottom: var(--cc-space-20);
  right: var(--cc-space-20);
}

.cc-home-genres {
  padding: var(--cc-space-16) var(--cc-space-16) var(--cc-space-4);
  overflow: auto hidden;
}

.cc-home-continue {
  padding: var(--cc-space-20) var(--cc-space-16) 0;
}

.cc-home-continue h2,
.cc-home-grid h2 {
  margin: 0 0 var(--cc-space-12);
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-bold);
}

.cc-home-rail {
  padding: var(--cc-space-28) 0 0 var(--cc-space-16);
}

.cc-home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 var(--cc-space-16) var(--cc-space-12) 0;
}

.cc-home-section-head h2 {
  margin: 0;
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-bold);
}

.cc-home-section-head a {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-home-rail__items {
  padding-right: var(--cc-space-16);
}

.cc-home-grid {
  padding: var(--cc-space-28) var(--cc-space-16) 0;
}

.cc-home-grid__items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cc-space-16) var(--cc-space-12);
}

.cc-home-grid__items,
.cc-home-grid__items > * {
  min-width: 0;
}

.cc-home-grid__items :is(a, p, span, div) {
  overflow-wrap: anywhere;
}

.cc-home-empty {
  padding: var(--cc-space-16);
}

.cc-screen--library {
  padding-bottom: var(--cc-size-tabbar);
}

.cc-library__list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--cc-space-16);
}

.cc-library__empty {
  padding: var(--cc-space-32) 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
  text-align: center;
}

.cc-screen--my {
  padding-bottom: var(--cc-size-tabbar);
}

.cc-my__login {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-16);
  padding: 0 var(--cc-space-16);
}

.cc-my__login h2 {
  margin: 0;
  font-size: var(--cc-text-18);
}

.cc-screen--new-run {
  min-height: 100vh;
  background: var(--cc-bg-sheet);
}

.cc-new-run__panel {
  min-height: 100vh;
  padding-bottom: calc(var(--cc-size-cta-height) + var(--cc-space-32));
  background: var(--cc-bg-sheet);
}

.cc-new-run__header {
  display: flex;
  height: var(--cc-size-topbar);
  align-items: center;
  gap: var(--cc-space-8);
  padding: 0 var(--gb-gutter);
  border-bottom: var(--cc-border-width) solid var(--cc-border);
}

.cc-new-run__back {
  display: inline-flex;
  width: var(--cc-size-action);
  height: var(--cc-size-action);
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--cc-fg);
}

.cc-new-run__back svg {
  display: block;
  width: var(--cc-size-icon);
  height: var(--cc-size-icon);
}

.cc-new-run__header .cc-sheet__title {
  margin: 0;
}

.cc-new-run__content {
  padding: var(--cc-space-16) var(--gb-gutter) 0;
}

.cc-new-run__form {
  margin: 0;
  padding-bottom: calc(var(--cc-size-cta-height) + var(--cc-space-32));
}

.cc-new-run__actions {
  position: fixed;
  z-index: var(--cc-z-sheet);
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, var(--cc-app-width));
  margin-inline: auto;
  padding: var(--cc-space-8) var(--gb-gutter) var(--cc-space-16);
  background: var(--cc-surface);
}

.cc-new-run__work {
  display: flex;
  gap: var(--cc-space-12);
  align-items: center;
  margin: 0 0 var(--cc-space-20);
}

.cc-new-run__work .cc-sheet__work-title {
  margin: 0;
}

/* 시트 안 표지는 작은 썸네일 — 고르는 중인 작품만 알려 준다 */
.cc-new-run__cover {
  flex: none;
  width: var(--cc-size-sheet-cover);
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-badge);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
}

.cc-new-run__group {
  min-width: 0;
  margin: 0 0 var(--cc-space-20);
  padding: 0;
  border: 0;
}

.cc-new-run__options {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-8);
}

.cc-new-run__roles {
  display: flex;
  gap: var(--cc-space-10);
  overflow-x: auto;
  padding-block: var(--cc-space-4);
}

.cc-new-run__name-label {
  display: flex;
  gap: var(--cc-space-4);
  align-items: baseline;
  margin-bottom: var(--cc-space-6);
}

.cc-new-run__name-label span {
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  font-weight: var(--cc-weight-normal);
}

.cc-screen--new-run .cc-terms--sheet {
  flex-direction: row;
  justify-content: space-between;
  margin-top: var(--cc-space-20);
  margin-bottom: var(--cc-space-16);
  padding: var(--cc-space-12) var(--cc-space-14);
  background: var(--cc-surface-selected);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-new-run__guest-hint {
  margin: 0 0 var(--cc-space-12);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-screen--play {
  display: flex;
  min-height: 70vh;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-24);
  text-align: center;
}

.cc-play-pending {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  gap: var(--cc-space-16);
  align-items: center;
}

.cc-play-pending h1 {
  margin: 0;
  font-size: var(--cc-text-20);
}

.cc-play-pending p {
  margin: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
  line-height: var(--cc-leading-body);
}

.cc-play-pending .cc-btn {
  min-width: 180px;
  padding: 0 var(--cc-space-16);
}

body:has(.cc-screen--bare) .cc-tabbar {
  display: none;
}

.cc-screen--work {
  padding-bottom: calc(var(--cc-size-cta-height) + var(--cc-space-32) + var(--cc-space-4));
}

.cc-work__content {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-10);
  padding: var(--cc-space-20) var(--cc-space-16) 0;
}

.cc-work__eyebrow,
.cc-work__counts {
  margin: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-work__title {
  margin: 0;
  font-family: var(--cc-font-story);
  font-size: var(--cc-text-28);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-leading-hero);
}

.cc-work__counts {
  display: flex;
  gap: var(--cc-space-16);
}

.cc-work__summary {
  margin: var(--cc-space-4) 0 0;
  color: var(--cc-fg-summary);
  font-size: var(--cc-text-15);
  line-height: var(--cc-leading-summary);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.cc-work__language,
.cc-character__language,
.cc-new-run__language {
  margin: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-work__tags {
  display: flex;
  gap: var(--cc-space-6);
  flex-wrap: wrap;
}

.cc-work__section {
  padding-top: var(--cc-space-28);
}

.cc-work__section h2,
.cc-character__options h2 {
  margin: 0 0 var(--cc-space-12);
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-bold);
}

.cc-work__mode-list {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-10);
}

.cc-work__people {
  padding-right: 0;
}

.cc-work__people-list {
  gap: var(--cc-space-8);
  padding-right: var(--cc-space-16);
}

.cc-work__starts {
  display: flex;
  flex-direction: column;
}