/* Caveduck: values copied from the live app's computed styles at 1440x900 (dark theme). */
@import url("/skins/fonts.css");

.skin-caveduck { background: #1a1b1b; color: #f4f7fb; font: 400 14px/20px "Pretendard Variable", Pretendard, -apple-system,
  system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.skin-caveduck svg { width: 100%; height: 100%; }

/* Header: 56px sticky, menu 40px button at x26, logo slot at x80, search 360x36 at the right. */
.cd-header { position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: #1a1b1b; }
.cd-header-left { display: flex; align-items: center; gap: 8px; height: 56px; }
.cd-menu { width: 40px; height: 40px; margin: 0 6px; display: flex; align-items: center; justify-content: center; color: #f4f7fb; }
.cd-menu svg { width: 26px; height: 26px; }
.cd-logo { display: flex; align-items: center; height: 24px; font: 800 18px/24px "Pretendard Variable", sans-serif; letter-spacing: -0.2px; color: #fff; }
.cd-header-right { display: flex; align-items: center; gap: 8px; }
.cd-search { width: 360px; height: 36px; margin-right: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px;
  border: 1px solid #737883; border-radius: 8px; background: #262727; color: #8892a8; }
.cd-search svg { width: 18px; height: 18px; color: #cdd5e2; }
.cd-signin { height: 20px; color: #f4f7fb; white-space: nowrap; }
.cd-icon-button { width: 32px; height: 32px; padding: 4px; color: #cdd5e2; }

/* Rail: 92px wide, items 52x56 with a 26px icon over a 12/500 label, 4px apart. */
.cd-rail { position: fixed; top: 56px; left: 0; bottom: 0; z-index: 9; width: 92px; padding: 0 20px; background: #1a1b1b; }
.cd-rail-item { width: 52px; height: 56px; margin-bottom: 4px; padding: 6px 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; border-radius: 6px; color: #8892a8; font-size: 12px; font-weight: 500; line-height: 16px; }
.cd-rail-item svg { width: 26px; height: 26px; }
.cd-rail-item span { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-rail-item.is-active { background: #262727; color: #fff; }

.cd-main { margin-left: 92px; padding: 0 20px; }

/* Banner: 1308x279 viewport; 1014px slides (67:32 art, 12px corners) centered with 20px gaps, neighbours peeking. */
.cd-banner { position: relative; height: 279px; overflow: hidden; }
.cd-banner-track { display: flex; gap: 20px; height: 279px; transform: translateX(calc(50% - 507px - 1034px)); }
.cd-banner-slide { position: relative; flex: 0 0 1014px; height: 279px; border-radius: 12px; overflow: hidden; background: #262727; }
.cd-banner-slide:nth-child(1) { order: 2; }
.cd-banner-slide:nth-child(2) { order: 3; }
.cd-banner-slide:nth-child(3) { order: 1; }
.cd-banner-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.cd-banner-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%); }
.cd-banner-copy { position: absolute; inset: 0 auto 0 63px; z-index: 1; width: 41%; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.cd-banner-pill { width: fit-content; height: 27px; margin-bottom: 4px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid #858d9b; border-radius: 999px; background: rgba(0, 0, 0, 0.2); font-size: 12px; line-height: 16px; letter-spacing: -0.1px; }
.cd-banner-title { font-size: 32px; font-weight: 700; line-height: 44.8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cd-banner-prev, .cd-banner-next { position: absolute; top: 119px; z-index: 2; width: 40px; height: 40px; padding: 8px; border-radius: 999px;
  background: #3e3e41; color: #cdd5e2; }
.cd-banner-prev { left: 99px; }
.cd-banner-next { right: 99px; }
.cd-banner-count { position: absolute; left: 210px; bottom: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6);
  color: #fff; font-size: 10px; line-height: 15px; }

/* Tabs (44px, 2px pink underline) and filter pills (36px, 6px apart). */
.cd-tabs { display: flex; height: 44px; margin: 20px 0 24px; }
.cd-tab { height: 44px; padding: 0 8px; display: inline-flex; align-items: center; border-bottom: 2px solid #df205d; color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; }
.cd-filters { display: flex; gap: 6px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.cd-filter { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid #737883; border-radius: 999px;
  color: #cdd5e2; font-weight: 600; }
.cd-filter.is-active { border-color: transparent; background: #df205d; color: #fff; }

/* Rows: 20/600 title, 24px gap, 211px cards with 8px gutters, a 40px next arrow centered on the art. */
.cd-shelf { margin-bottom: 32px; }
.cd-shelf-head { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 24px; }
.cd-shelf-head h2 { font-size: 20px; font-weight: 600; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-row-wrap { position: relative; }
.cd-row { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
/* min-width: 0 so a long one-line hook cannot widen the card past its basis (flex items default to min-content). */
.cd-row > .cd-card { flex: 0 0 211px; min-width: 0; margin-right: 8px; }
.cd-row-next { position: absolute; top: 40%; right: 20px; z-index: 1; width: 40px; height: 40px; padding: 8px; border-radius: 999px;
  transform: translate(50%, -50%); background: #3e3e41; color: #cdd5e2; }
.cd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; }

/* Card: 4:5 media (12px corners, art anchored top), #Original corner tag, stat pills bottom-right; name/hook/@creator. */
.cd-card a { display: block; }
.cd-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #262727; }
.cd-card-media img { position: absolute; inset: 0; width: 100%; height: auto; aspect-ratio: 240 / 372; object-fit: cover; object-position: 50% 0%; }
.cd-original { position: absolute; top: 0; left: 0; z-index: 2; padding: 2px 8px; border-top-left-radius: 11px; color: #fff;
  background-image: linear-gradient(90deg, #000 63.94%, transparent 93.72%); font: 400 12px/16px "Racing Sans One", sans-serif; }
.cd-stats { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 4px; color: #fff; }
.cd-stats span { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 16px; }
.cd-stats svg { width: 16px; height: 16px; }
.cd-card-text { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.cd-card-name { font-size: 16px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-card-hook, .cd-card-creator { font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-card-hook { color: #cdd5e2; }
.cd-card-creator { color: #70c8ff; }

/* Detail: max-w 1280 container; left 427px column (16px padding) with 3:4 poster, right column 821px. */
.cd-detail-main { padding: 0; }
.cd-detail-top { max-width: 1280px; margin: 0 auto; padding: 8px 16px 0; height: 48px; }
.cd-back { display: flex; width: 40px; height: 40px; padding: 6px; border-radius: 999px; color: #f4f7fb; }
.cd-detail { max-width: 1280px; margin: 8px auto 0; display: flex; gap: 32px; padding: 0 16px; }
.cd-detail-left { flex: 0 0 395px; }
.cd-poster { position: relative; overflow: hidden; border-radius: 8px; background: #000; }
.cd-poster img { width: 100%; height: auto; aspect-ratio: 395 / 614; object-fit: cover; }
.cd-poster-original { position: absolute; top: 0; left: 0; padding: 4px 12px; border-top-left-radius: 8px; color: #fff;
  background-image: linear-gradient(90deg, #000 63.94%, transparent 93.72%); font: 400 14px/20px "Racing Sans One", sans-serif; }
.cd-creator-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; }
.cd-creator { font-size: 16px; font-weight: 600; line-height: 24px; color: #b88e9e; }
.cd-follow { padding: 4px 8px; border-radius: 4px; background: #fff; color: #000; font-size: 14px; font-weight: 600; line-height: 20px; }
.cd-creator-note { margin-top: 8px; color: #9ca3af; font-size: 12px; line-height: 16px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }
.cd-detail-right { flex: 1; min-width: 0; }
.cd-detail-head { display: flex; flex-direction: column; padding-bottom: 16px; border-bottom: 1px solid #3e3e41; }
.cd-detail-head h1 { font-size: 24px; font-weight: 700; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-subtitle { margin-bottom: 4px; font-size: 14px; line-height: 20px; }
.cd-detail-stats { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; color: #d1d5db; }
.cd-detail-stats span { display: flex; align-items: center; gap: 4px; padding: 3px 0; font-size: 14px; line-height: 20px; }
.cd-detail-stats svg { width: 16px; height: 16px; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; }
.cd-tag { padding: 6px 12px; border-radius: 16px; background: #595b63; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.35px; white-space: nowrap; }
.cd-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.cd-start { height: 36px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #595b63;
  border-radius: 8px; background: #262727; }
.cd-start svg { width: 16px; height: 16px; color: #8892a8; opacity: 0.5; }
.cd-cta { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #df205d; color: #fff;
  font-size: 14px; font-weight: 600; }
.cd-intro { margin-top: 24px; padding: 0 4px; font-size: 14px; line-height: 20px; white-space: pre-line; }
.cd-intro h2 { margin: 16px 0 8px; font-weight: 700; font-size: 16px; line-height: 24px; }
.cd-related { max-width: 1280px; margin: 48px auto 0; padding: 0 16px; }

.cd-footer { margin-top: 64px; padding: 24px 16px 80px; color: #595b63; font-size: 12px; line-height: 16px; letter-spacing: -0.3px; }
.cd-footer p + p { margin-top: 4px; }

@media (max-width: 899px) {
  .cd-rail, .cd-search, .cd-signin { display: none; }
  .cd-main { margin-left: 0; padding: 0 16px; }
  .cd-banner { height: 180px; }
  .cd-banner-track { height: 180px; transform: none; }
  .cd-banner-slide { flex-basis: 100%; height: 180px; }
  .cd-banner-slide:not(.is-active), .cd-banner-prev, .cd-banner-next { display: none; }
  .cd-banner-copy { left: 16px; width: 70%; }
  .cd-banner-title { font-size: 20px; line-height: 28px; }
  .cd-banner-count { left: 16px; }
  .cd-row > .cd-card { flex-basis: 150px; }
  .cd-row-next { display: none; }
  .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-detail { flex-direction: column; }
  .cd-detail-left { flex-basis: auto; }
}