/* Caveduck replica, measured at 1440px: 56px sticky header, 92px left rail, 1308px content,
   peeking banner carousel, underline tabs + pill filters, 211px 4:5 cards with #Original tag and
   stat pills, 6-up grid; detail page 1/3 portrait column + 2/3 info column. */
.skin-caveduck { --bg: #1a1b1b; --surface: #262727; --text: #f4f7fb; --muted: #cdd5e2; --accent: #df205d; --card-ratio: 4 / 5;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", sans-serif; }

.skin-caveduck .site-header { position: sticky; top: 0; z-index: 30; max-width: none; height: 56px; padding: 0 20px 0 80px;
  background: #1a1b1b; box-shadow: none; backdrop-filter: none; }
.skin-caveduck .brand { font-size: 15px; }
.skin-caveduck .switch-app { border: 0; padding: 0; font-size: 14px; color: #f4f7fb; }
.skin-caveduck .app-rail { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 56px; left: 0; bottom: 0;
  width: 92px; padding: 0 20px; background: #1a1b1b; z-index: 20; }
.skin-caveduck .rail-item { width: 52px; height: 56px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; border-radius: 6px; color: #8892a8; text-decoration: none; font-size: 12px; font-weight: 500; }
.skin-caveduck .rail-item span { max-width: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-caveduck .rail-item.is-active { background: #262727; color: #fff; }
.skin-caveduck .rail-item .icon { width: 22px; height: 22px; }
.skin-caveduck main, .skin-caveduck .site-footer { max-width: none; margin: 0 0 0 92px; padding: 0 20px; }
.skin-caveduck .site-footer { border: 0; color: #595b63; font-size: 12px; padding-bottom: 80px; }
.skin-caveduck .site-footer a { color: #595b63; }

/* Banner: 1014x279 slides, centered with neighbours peeking. */
.skin-caveduck .banner { display: flex; gap: 20px; height: 279px; margin: 20px 0 0; overflow: hidden; justify-content: center; }
.skin-caveduck .banner-slide { position: relative; flex: 0 0 min(1014px, 78%); border-radius: 12px; overflow: hidden; background: #262727; }
.skin-caveduck .banner-slide:first-child { order: 2; }
.skin-caveduck .banner-slide:nth-child(2) { order: 3; }
.skin-caveduck .banner-slide:nth-child(3) { order: 1; }
.skin-caveduck .banner-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: brightness(0.75); }
.skin-caveduck .banner-title { position: absolute; left: 40px; bottom: 40px; max-width: 60%; font-size: 32px; font-weight: 700;
  line-height: 1.25; color: #fff; }
/* Intro styled as the Characters / World Scenario underline tab row. */
.skin-caveduck .intro { padding: 32px 0 0; }
.skin-caveduck .intro h1 { display: inline-block; margin: 0; padding: 0 8px 10px; font-size: 16px; font-weight: 600;
  line-height: 24px; border-bottom: 2px solid var(--accent); }
.skin-caveduck .intro p { display: none; }
.skin-caveduck .chips { gap: 6px; margin: 24px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.skin-caveduck .chips li { padding: 8px 16px; border-radius: 999px; border: 1px solid #737883; background: transparent;
  color: #cdd5e2; font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.skin-caveduck .chips li:first-child { background: var(--accent); border-color: transparent; color: #fff; }

/* Rows: 20/600 titles, 211px cards on an ~8px pitch; the full list is a 6-up grid (12 row / 8 column gap). */
.skin-caveduck .shelf h2, .skin-caveduck .all h2 { margin: 32px 0 16px; font-size: 20px; font-weight: 600; line-height: 28px; }
.skin-caveduck .row { grid-auto-columns: 211px; gap: 8px; }
.skin-caveduck .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 8px; }

/* Card: 4:5 media (12px corners), #Original tag top-left, stat pills bottom-right; name / hook / @creator below. */
.skin-caveduck .card { background: transparent; border-radius: 0; position: static; }
.skin-caveduck .card-media { position: relative; border-radius: 12px; overflow: hidden; }
.skin-caveduck .card img { aspect-ratio: 4 / 5; }
.skin-caveduck .card-badges { display: flex; justify-content: flex-end; align-items: flex-end; gap: 4px; position: absolute;
  inset: 0; padding: 4px; pointer-events: none; }
.skin-caveduck .badge-original { position: absolute; top: 0; left: 0; padding: 2px 16px 2px 8px; border-top-left-radius: 11px;
  font: italic 700 12px/16px "Arial Narrow", system-ui, sans-serif; color: #fff;
  background: linear-gradient(90deg, #000 64%, transparent 94%); }
.skin-caveduck .badge-chats, .skin-caveduck .badge-likes { display: inline-flex; align-items: center;
  gap: 2px; height: 24px; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }
.skin-caveduck .card-badges .icon { width: 16px; height: 16px; }
.skin-caveduck .card-text { position: static; display: flex; flex-direction: column; gap: 4px; padding: 8px 0 0; background: none; }
.skin-caveduck .card h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 20px; color: #f4f7fb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-caveduck .card p { margin: 0; font-size: 12px; line-height: 16px; color: #cdd5e2; -webkit-line-clamp: 1; }
.skin-caveduck .card-tags { display: none; }
.skin-caveduck .card-creator { display: block; font-size: 12px; line-height: 16px; color: #70c8ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail: 1280px container; left third holds the 3:4 portrait with the #Original tag and creator row,
   right two thirds hold title, stats, tag pills and the full-width pink CTA, then the intro. */
.skin-caveduck .character { max-width: 1280px; margin: 8px auto 0; display: grid; gap: 32px;
  grid-template-columns: 427px minmax(0, 1fr); align-items: start; }
.skin-caveduck .character-media { position: relative; padding: 0 16px; }
.skin-caveduck .character .avatar { position: static; width: 100%; aspect-ratio: 395 / 614; border-radius: 8px; background: #000; }
.skin-caveduck .character-media::before { content: '#Original'; position: absolute; top: 0; left: 16px; z-index: 1;
  padding: 4px 20px 4px 10px; border-top-left-radius: 8px; font: italic 700 14px/20px "Arial Narrow", system-ui, sans-serif;
  color: #fff; background: linear-gradient(90deg, #000 64%, transparent 94%); }
.skin-caveduck .character-body { max-width: none; display: flex; flex-direction: column; }
.skin-caveduck .character h1 { order: 1; font-size: 24px; font-weight: 700; line-height: 32px; margin: 0 0 4px; }
.skin-caveduck .character-subtitle { display: block; order: 2; margin: 0 0 8px; font-size: 14px; color: #f4f7fb; }
/* Inline stats row (chats, likes) like the original; creator and rating rows are hidden. */
.skin-caveduck .facts { display: flex; order: 3; gap: 16px; margin: 0 0 8px; }
.skin-caveduck .facts div { display: flex; align-items: center; gap: 4px; }
.skin-caveduck .facts div:nth-child(n+3) { display: none; }
.skin-caveduck .facts dt { display: flex; font-size: 0; color: #d1d5db; }
.skin-caveduck .facts dt .icon { width: 16px; height: 16px; }
.skin-caveduck .facts dd { font-size: 14px; color: #d1d5db; }
.skin-caveduck .tags { order: 4; gap: 4px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid #333; }
.skin-caveduck .tags li { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 16px;
  background: #595b63; color: #f4f7fb; font-size: 14px; font-weight: 500; }
.skin-caveduck .actions { order: 5; margin-top: 16px; }
.skin-caveduck .chat-button.primary { width: 100%; min-width: 0; margin: 0; height: 40px; padding: 0; display: grid;
  place-items: center; border-radius: 6px; background: var(--accent); font-size: 14px; font-weight: 600; }
.skin-caveduck .summary { order: 6; margin: 24px 0 0; font-size: 14px; line-height: 1.7; color: #f4f7fb; }
.skin-caveduck .opening, .skin-caveduck .related { max-width: 1280px; margin: 40px auto 0; }
.skin-caveduck .opening h2, .skin-caveduck .related h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.skin-caveduck .opening blockquote { border: 0; background: #262727; border-radius: 8px; padding: 16px; font-size: 14px; }
.skin-caveduck .related .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 899px) {
  .skin-caveduck .app-rail { display: none; }
  .skin-caveduck .site-header { padding: 0 16px; }
  .skin-caveduck main, .skin-caveduck .site-footer { margin-left: 0; padding: 0 12px; }
  .skin-caveduck .banner { height: 180px; }
  .skin-caveduck .banner-slide { flex-basis: 88%; }
  .skin-caveduck .banner-title { left: 16px; bottom: 16px; font-size: 20px; }
  .skin-caveduck .row { grid-auto-columns: 150px; }
  .skin-caveduck .grid, .skin-caveduck .related .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skin-caveduck .character { grid-template-columns: 1fr; gap: 16px; }
  .skin-caveduck .character-media { padding: 0; max-width: 420px; margin: 0 auto; width: 100%; }
  .skin-caveduck .character-media::before { left: 0; }
}