.cc-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--cc-space-8);
  height: var(--cc-height-banner);
  padding: var(--cc-space-20) calc(var(--cc-width-banner-poster) + var(--cc-space-32)) var(--cc-space-20) var(--cc-space-20);
  overflow: hidden;
  border-radius: var(--cc-radius-banner);
  color: var(--cc-fg);
}

.cc-banner::before {
  position: absolute;
  z-index: var(--cc-z-cover-background);
  inset: calc(var(--cc-blur-cover) * -1);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  content: '';
  filter: blur(var(--cc-blur-cover));
}

.cc-banner::after {
  position: absolute;
  z-index: var(--cc-z-cover-overlay);
  inset: 0;
  background: var(--cc-bg-cover-shade);
  content: '';
}

.cc-banner__poster {
  position: absolute;
  top: 50%;
  right: var(--cc-space-20);
  width: var(--cc-width-banner-poster);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover);
  transform: translateY(-50%);
}

.cc-banner__badge {
  position: relative;
  align-self: flex-start;
  padding: var(--cc-space-2) var(--cc-space-8);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-text-12);
  font-weight: var(--cc-weight-semibold);
}

.cc-banner__title {
  position: relative;
  font-family: var(--cc-font-story);
  font-size: var(--cc-text-26);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-leading-tight);
}

.cc-banner__sub,
.cc-banner__count {
  position: relative;
  color: var(--cc-fg-banner);
  font-size: var(--cc-text-14);
}

.cc-banner__count {
  color: var(--cc-fg-banner-soft);
  font-size: var(--cc-text-12);
}

.cc-btn {
  display: flex;
  height: var(--cc-size-cta-height);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--cc-pill);
  text-decoration: none;
}

.cc-btn--primary {
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-bold);
}

.cc-btn--block {
  width: 100%;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  height: var(--cc-height-chip);
  padding: 0 var(--cc-space-14);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-chip-large);
  background: transparent;
  color: var(--cc-fg-soft);
  font-family: var(--cc-font-ui);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-medium);
  white-space: nowrap;
}

.cc-chip.is-on {
  border-color: var(--cc-bg-chip-on);
  background: var(--cc-bg-chip-on);
  color: var(--cc-fg-chip-on);
}

.cc-continue {
  display: flex;
  align-items: center;
  gap: var(--cc-space-12);
  padding: var(--cc-space-12);
  border-radius: var(--cc-radius-card);
  background: var(--cc-surface-card);
}

.cc-continue__cover {
  flex: none;
  width: var(--cc-width-continue-cover);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover-small);
}

.cc-continue__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cc-size-action);
  padding: 0 var(--cc-space-16);
  border-radius: var(--cc-pill);
  background: var(--cc-accent-deep);
  color: var(--cc-on-accent);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.cc-cta-bar {
  position: fixed;
  z-index: var(--cc-z-tabbar);
  inset-inline: max(0px, calc((100vw - var(--cc-app-width)) / 2));
  bottom: 0;
  display: flex;
  gap: var(--cc-space-10);
  padding: var(--cc-space-12) var(--cc-space-16) var(--cc-space-20);
  border-top: 1px solid var(--cc-border);
  background: var(--cc-bg);
}

.cc-cta-bar__btn {
  display: flex;
  min-width: 0;
  height: var(--cc-size-cta-height);
  align-items: center;
  justify-content: center;
  padding: 0 var(--cc-space-16);
  border: 1px solid var(--cc-border-muted);
  border-radius: var(--cc-pill);
  color: var(--cc-fg);
  font-size: var(--cc-text-15);
  font-weight: var(--cc-weight-semibold);
  text-decoration: none;
}

.cc-cta-bar__btn--primary {
  flex: 1;
  border-color: transparent;
  background: var(--cc-accent-deep);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-16);
  font-weight: var(--cc-weight-bold);
}

.cc-fact {
  display: flex;
  gap: var(--cc-space-12);
  padding: var(--cc-space-8) 0;
  border-bottom: 1px solid var(--cc-border);
  font-size: var(--cc-text-14);
}

.cc-fact--last {
  border: 0;
}

.cc-fact__k {
  width: 64px;
  flex: none;
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
}

.cc-fact__value {
  line-height: var(--cc-leading-fact);
}

.cc-grid-card {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-6);
  min-width: 0;
}

.cc-grid-card__cover {
  position: relative;
  display: block;
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover);
}

.cc-grid-card__badge {
  position: absolute;
  top: var(--cc-space-8);
  left: var(--cc-space-8);
  padding: var(--cc-space-2) var(--cc-space-6);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-bg-new);
  color: var(--cc-fg-new);
  font-size: var(--cc-text-11);
  font-weight: var(--cc-weight-semibold);
}

.cc-grid-card__title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

/* 제목·소개 줄 수가 달라도 같은 줄의 태그는 같은 높이에 */
.cc-grid-card__tags {
  margin-top: auto;
}

.cc-grid-card__sub,
.cc-grid-card__tags {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
  line-height: var(--cc-leading-copy);
}

.cc-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: var(--cc-bg-banner);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  color: var(--cc-fg-story-title);
  font-family: var(--cc-font-story);
  font-size: var(--cc-text-14);
}

.cc-hero::before {
  position: absolute;
  z-index: var(--cc-z-cover-overlay);
  inset: 0 0 auto;
  height: var(--cc-size-action);
  background: linear-gradient(to bottom, var(--cc-bg-cover-shade), transparent);
  content: '';
}

.cc-hero::after {
  position: absolute;
  z-index: var(--cc-z-cover-overlay);
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--cc-bg));
  content: '';
}

.cc-hero__overlay {
  position: absolute;
  z-index: var(--cc-z-cover-content);
  right: var(--gb-gutter);
  bottom: var(--cc-space-20);
  left: var(--gb-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-10);
}

.cc-hero__back,
.cc-hero__action {
  position: absolute;
  z-index: var(--cc-z-cover-control);
  top: var(--cc-space-4);
  display: flex;
  width: var(--cc-size-action);
  height: var(--cc-size-action);
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--cc-fg);
}

.cc-hero__back {
  left: var(--cc-space-4);
}

.cc-hero__action {
  right: var(--cc-space-4);
  background: transparent;
}

.cc-hero__action[data-charchat-share] {
  right: calc(var(--cc-size-action) + var(--cc-space-4));
}

.cc-hero__action[aria-pressed='true'] {
  color: var(--cc-pink);
}

.cc-hero__cover-label {
  position: absolute;
  z-index: var(--cc-z-cover-content);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cc-hint {
  padding: var(--cc-space-12) var(--cc-space-14);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
  line-height: var(--cc-leading-hint);
}

.cc-input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 var(--cc-space-14);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg);
  font: var(--cc-weight-normal) var(--cc-text-15) var(--cc-font-ui);
}

.cc-input::placeholder {
  color: var(--cc-fg-faint);
}

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

.cc-menu__group {
  padding-top: var(--cc-space-24);
  padding-bottom: var(--cc-space-4);
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  font-weight: var(--cc-weight-semibold);
}

.cc-menu__group:first-child {
  padding-top: var(--cc-space-24);
}

.cc-menu__item {
  display: flex;
  min-height: var(--cc-height-menu-item);
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-12);
  border-bottom: 1px solid var(--cc-border);
  color: var(--cc-fg);
  font-size: var(--cc-text-15);
  text-decoration: none;
}

.cc-menu__value {
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-13);
  text-align: right;
}

.cc-mode-card {
  display: flex;
  gap: var(--cc-space-12);
  align-items: flex-start;
  padding: var(--cc-space-14);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  background: var(--cc-surface-card);
}

.cc-mode-card--story {
  border-color: var(--cc-mode-story-outline);
  background: var(--cc-surface-selected);
}

.cc-mode-card__dot {
  width: 10px;
  height: 10px;
  flex: none;
  margin-top: var(--cc-space-6);
  border-radius: var(--cc-radius-round);
}

.cc-mode-card__dot--chat {
  background: var(--cc-mode-dot-chat);
}

.cc-mode-card__dot--free {
  background: var(--cc-mode-dot-free);
}

.cc-mode-card__dot--story {
  background: var(--cc-mode-dot-story);
}

.cc-mode-card__body,
.cc-mode-card__title {
  display: flex;
}

.cc-mode-card__body {
  flex: 1;
  flex-direction: column;
  gap: var(--cc-space-4);
}

.cc-mode-card__title {
  gap: var(--cc-space-8);
  align-items: center;
  font-size: var(--cc-text-15);
  font-weight: var(--cc-weight-semibold);
}

.cc-mode-card__description {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
  line-height: var(--cc-leading-note);
}

.cc-mode-card__only {
  padding: var(--cc-space-2) var(--cc-space-6);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-accent);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-11);
}

.cc-mode {
  display: inline-flex;
  align-items: center;
  min-height: var(--cc-height-chip-small);
  padding: 0 var(--cc-space-6);
  border-radius: var(--cc-radius-badge);
  font-size: var(--cc-text-11);
  font-weight: var(--cc-weight-semibold);
  white-space: nowrap;
}

.cc-mode--chat {
  background: var(--cc-bg-mode-chat);
  color: var(--cc-fg-mode-chat);
}

.cc-mode--free {
  background: var(--cc-bg-mode-free);
  color: var(--cc-fg-mode-free);
}

.cc-mode--story {
  background: var(--cc-bg-mode-story);
  color: var(--cc-fg-mode-story);
}

.cc-option {
  display: flex;
  height: 48px;
  gap: var(--cc-space-10);
  align-items: center;
  padding: 0 var(--cc-space-14);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  font-size: var(--cc-text-14);
}

.cc-option__radio {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--cc-accent-deep);
}

.cc-option__title {
  flex: 1;
}

.cc-option__meta {
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
}

.cc-option.is-on {
  border-color: var(--cc-border-accent);
}

.cc-page-head {
  padding: var(--cc-space-8) var(--cc-space-16) 0;
}

.cc-page-head__title {
  display: flex;
  align-items: center;
  height: var(--cc-height-page-title);
  margin: 0;
  font-size: var(--cc-text-20);
  font-weight: var(--cc-weight-bold);
}

.cc-person {
  display: flex;
  width: 96px;
  flex: none;
  flex-direction: column;
  gap: var(--cc-space-6);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.cc-person__avatar {
  display: grid;
  width: var(--cc-size-avatar);
  height: var(--cc-size-avatar);
  place-items: center;
  border-radius: var(--cc-radius-round);
  color: var(--cc-fg);
  font-size: var(--cc-text-22);
  font-weight: var(--cc-weight-semibold);
}

.cc-person__name {
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
}

.cc-person__role {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.cc-play-option {
  display: flex;
  gap: var(--cc-space-8);
  align-items: center;
  justify-content: space-between;
  padding: var(--cc-space-12) var(--cc-space-14);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  font-size: var(--cc-text-14);
}

.cc-play-option__mode {
  font-weight: var(--cc-weight-semibold);
}

.cc-play-option__mode--chat {
  color: var(--cc-pink);
}

.cc-play-option__mode--story {
  color: var(--cc-accent);
}

.cc-play-option__terms {
  flex: none;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-portrait {
  display: block;
  width: var(--cc-size-portrait-width);
  height: var(--cc-size-portrait-height);
  flex: none;
  border-radius: var(--cc-radius-card);
}

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

.cc-profile__avatar {
  flex: none;
  width: var(--cc-size-avatar-small);
  height: var(--cc-size-avatar-small);
  border-radius: var(--cc-radius-round);
  background: var(--cc-border-strong);
}

.cc-profile__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--cc-space-4);
}

.cc-profile__identity strong {
  overflow: hidden;
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-profile__identity span {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-progress {
  overflow: hidden;
  height: var(--cc-height-progress);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-border-strong);
}

.cc-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  appearance: none;
  background: transparent;
}

.cc-progress__bar::-webkit-progress-bar {
  background: transparent;
}

.cc-progress__bar::-webkit-progress-value {
  border-radius: var(--cc-radius-badge);
  background: var(--cc-accent-deep);
}

.cc-progress__bar::-moz-progress-bar {
  border-radius: var(--cc-radius-badge);
  background: var(--cc-accent-deep);
}

.cc-quote {
  margin: 0;
  padding: var(--cc-space-4) 0 var(--cc-space-4) var(--cc-space-14);
  border-left: 3px solid var(--cc-pink);
  color: var(--cc-fg-quote);
  font-family: var(--cc-font-story);
  font-size: var(--cc-text-16);
  line-height: var(--cc-leading-quote);
}

.cc-rail-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--cc-space-6);
  width: var(--cc-width-rail-card);
}

.cc-rail-card__cover {
  position: relative;
  display: block;
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover);
}

.cc-rail-card__rank {
  position: absolute;
  top: var(--cc-space-8);
  left: var(--cc-space-8);
  color: var(--cc-fg);
  font-size: var(--cc-text-20);
  font-weight: var(--cc-weight-bold);
}

.cc-rail-card__title {
  overflow: hidden;
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-rail-card__meta {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.cc-role {
  display: flex;
  width: 72px;
  flex: none;
  flex-direction: column;
  gap: var(--cc-space-6);
  align-items: center;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-role__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cc-role__avatar {
  display: flex;
  width: var(--cc-size-avatar-small);
  height: var(--cc-size-avatar-small);
  align-items: center;
  justify-content: center;
  border-radius: var(--cc-radius-round);
  color: var(--cc-fg);
  font-weight: var(--cc-weight-bold);
}

.cc-role__avatar--empty {
  border: 1px dashed var(--cc-fg-faint);
  color: var(--cc-fg-faint);
}

.cc-role.is-on {
  color: var(--cc-fg);
  font-weight: var(--cc-weight-semibold);
}

.cc-role__input:where(:checked) ~ .cc-role__avatar {
  outline: 2px solid var(--cc-accent-deep);
  outline-offset: 2px;
}

.cc-run-row {
  display: flex;
  align-items: center;
  gap: var(--cc-space-12);
  padding: var(--cc-space-14) 0;
  border-bottom: 1px solid var(--cc-border);
  color: inherit;
  text-decoration: none;
}

.cc-run-row__cover {
  flex: none;
  width: var(--cc-width-run-cover);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover-small);
}

.cc-run-row__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--cc-space-4);
}

.cc-run-row__heading {
  display: flex;
  align-items: center;
  gap: var(--cc-space-6);
  min-width: 0;
}

.cc-run-row__title {
  overflow: hidden;
  font-size: var(--cc-text-15);
  font-weight: var(--cc-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-run-row__summary {
  overflow: hidden;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-run-row__when {
  flex: none;
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  white-space: nowrap;
}

.cc-search {
  display: flex;
  align-items: center;
  gap: var(--cc-space-8);
  height: var(--cc-height-search);
  padding: 0 var(--cc-space-14);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg-faint);
}

.cc-search__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cc-fg);
  font-size: var(--cc-text-15);
}

.cc-search__input::placeholder {
  color: var(--cc-fg-faint);
}

.cc-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cc-space-8);
}

.cc-seg__item {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-panel);
  background: var(--cc-surface-card);
  color: var(--cc-fg-soft);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-medium);
}

.cc-seg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cc-seg__item.is-on {
  border-color: var(--cc-mode-segment-selected-border);
  background: var(--cc-mode-segment-selected);
  color: var(--cc-fg);
  font-weight: var(--cc-weight-semibold);
}

.cc-sheet__dim {
  position: fixed;
  z-index: var(--cc-z-sheet);
  inset: 0;
  background: var(--cc-bg-sheet-dim);
  opacity: var(--cc-opacity-dim);
}

.cc-sheet__dim :where(*) {
  display: block;
  width: 100%;
  height: 100%;
}

.cc-sheet {
  position: fixed;
  z-index: calc(var(--cc-z-sheet) + 1);
  inset-inline: max(0px, calc((100vw - var(--cc-app-width)) / 2));
  bottom: 0;
  height: var(--cc-size-dialog);
  overflow-y: auto;
  padding: var(--cc-space-12) var(--cc-space-16) var(--cc-space-16);
  border-radius: var(--cc-radius-sheet) var(--cc-radius-sheet) 0 0;
  background: var(--cc-surface);
}

.cc-sheet__close {
  display: block;
  width: var(--cc-size-dialog-handle);
  height: var(--cc-space-4);
  margin: 0 auto var(--cc-space-16);
  border-radius: var(--cc-radius-badge);
  background: var(--cc-border-muted);
}

.cc-sheet__title {
  margin: 0 0 var(--cc-space-4);
  font-size: var(--cc-text-20);
  font-weight: var(--cc-weight-bold);
}

.cc-sheet__work-title {
  margin: 0 0 var(--cc-space-20);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-sheet__label {
  display: block;
  margin: 0 0 var(--cc-space-8);
  padding: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
  font-weight: var(--cc-weight-semibold);
}

.cc-start-row {
  display: flex;
  gap: var(--cc-space-12);
  align-items: center;
  padding: var(--cc-space-12) 0;
  border-bottom: 1px solid var(--cc-border);
}

.cc-start-row__num {
  width: 28px;
  flex: none;
  color: var(--cc-fg-muted);
  font-weight: var(--cc-weight-bold);
}

.cc-start-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--cc-space-2);
}

.cc-start-row__body strong {
  font-size: var(--cc-text-15);
  font-weight: var(--cc-weight-semibold);
}

.cc-start-row__body span {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-subhead {
  display: flex;
  height: 56px;
  gap: var(--cc-space-4);
  align-items: center;
  padding: 0 var(--cc-space-4);
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-15);
}

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

.cc-subtabs {
  display: flex;
  gap: var(--cc-gap-24);
  padding: var(--cc-space-16) var(--cc-space-16) 0;
  border-bottom: 1px solid var(--cc-border);
}

.cc-subtabs__item {
  padding-bottom: var(--cc-space-8);
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-15);
  text-decoration: none;
  white-space: nowrap;
}

.cc-subtabs__item[aria-current='page'] {
  border-bottom: 2px solid var(--cc-fg);
  color: var(--cc-fg);
  font-weight: var(--cc-weight-semibold);
}

.cc-tabbar {
  position: fixed;
  inset-inline: max(0px, calc((100vw - var(--cc-app-width)) / 2));
  bottom: 0;
  z-index: var(--cc-z-tabbar);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--cc-size-tabbar);
  border-top: 1px solid var(--cc-border);
  background: var(--cc-surface);
}

.cc-tabbar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-4);
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  text-decoration: none;
}

.cc-tabbar__tab:hover,
.cc-tabbar__tab[aria-current='page'] {
  color: var(--cc-fg);
}

.cc-tabbar__tab[aria-current='page'] {
  font-weight: var(--cc-weight-semibold);
}

.cc-terms {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-8);
  padding: var(--cc-space-16);
  border-radius: var(--cc-radius-card);
  background: var(--cc-surface-card);
}

.cc-terms__row {
  display: flex;
  gap: var(--cc-space-8);
  justify-content: space-between;
  font-size: var(--cc-text-14);
}

.cc-terms__row strong {
  color: var(--cc-fg-gold);
  font-weight: var(--cc-weight-semibold);
  text-align: right;
}

.cc-terms__note {
  margin: var(--cc-space-4) 0 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
  line-height: var(--cc-leading-note);
}

.cc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cc-size-topbar);
  padding: 0 var(--cc-space-16);
}

.cc-topbar__wordmark {
  color: var(--cc-fg);
  font-size: var(--cc-text-wordmark);
  font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-letter-tight);
}

.cc-topbar__actions {
  display: flex;
  gap: var(--cc-space-4);
}

.cc-topbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-size-action);
  height: var(--cc-size-action);
  border: 0;
  background: transparent;
  color: var(--cc-fg);
}

.cc-topbar__action:hover {
  background: var(--cc-surface-card);
}


.cc-wallet {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-12);
  margin: var(--cc-space-20) var(--cc-space-16) 0;
  padding: var(--cc-space-16);
  border-radius: var(--cc-radius-card);
  background: var(--cc-surface-card);
}

.cc-wallet__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-wallet__label {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

.cc-wallet__amount {
  color: var(--cc-gold);
  font-size: var(--cc-text-22);
  font-weight: var(--cc-weight-bold);
}

.cc-wallet__charge {
  display: flex;
  min-height: var(--cc-height-wallet-button);
  align-items: center;
  padding: 0 var(--cc-space-16);
  border-radius: var(--cc-pill);
  background: var(--cc-gold);
  color: var(--cc-action-ink-2);
  font-size: var(--cc-text-14);
  font-weight: var(--cc-weight-bold);
  text-decoration: none;
}

.cc-wallet__meta,
.cc-wallet__note {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-work-row {
  display: flex;
  align-items: center;
  gap: var(--cc-space-12);
  padding: var(--cc-space-12) 0;
  border-bottom: 1px solid var(--cc-border);
  color: inherit;
  text-decoration: none;
}

.cc-work-row__rank {
  flex: none;
  width: var(--cc-width-rank);
  font-size: var(--cc-text-18);
  font-weight: var(--cc-weight-bold);
  text-align: center;
}

.cc-work-row__cover {
  flex: none;
  width: var(--cc-width-rank-cover);
  background-image: var(--cc-cover, none);
  background-position: center;
  background-size: cover;
  aspect-ratio: 2 / 3;
  border-radius: var(--cc-radius-cover-small);
}

.cc-work-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  flex: 1;
  min-width: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-work-row__title {
  overflow: hidden;
  color: var(--cc-fg);
  font-size: var(--cc-text-15);
  font-weight: var(--cc-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-work-row__description {
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-13);
}

.cc-work-row__modes {
  display: flex;
  gap: var(--cc-space-4);
}

.cc-work-row__count {
  color: var(--cc-fg-faint);
  font-size: var(--cc-text-12);
  text-align: right;
}