:root {
  color-scheme: light;
  --ccr-bg: #f7f8fa;
  --ccr-surface: #ffffff;
  --ccr-surface-soft: #f2f5f7;
  --ccr-border: #d9e0e7;
  --ccr-border-strong: #bac7d4;
  --ccr-text: #1b2430;
  --ccr-muted: #667485;
  --ccr-faint: #8794a3;
  --ccr-accent: #087f8c;
  --ccr-accent-soft: #e4f6f7;
  --ccr-accent-strong: #05636d;
  --ccr-code: #12313d;
  --ccr-shadow: 0 12px 28px rgba(21, 35, 49, 0.08);
  --ccr-topbar-bg: rgba(255, 255, 255, 0.94);
  --ccr-overlay-card-bg: rgba(255, 255, 255, 0.82);
  --ccr-overlay-card-border: rgba(188, 219, 226, 0.72);
  --ccr-overlay-summary-bg: rgba(255, 255, 255, 0.86);
  --ccr-origin-bg: rgba(255, 255, 255, 0.58);
  --ccr-origin-border: rgba(16, 33, 43, 0.18);
  font-family: Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ─── Dark mode ─── */
[data-theme="dark"] {
  color-scheme: dark;
  --ccr-bg: #0f1117;
  --ccr-surface: #191c24;
  --ccr-surface-soft: #1e2230;
  --ccr-border: #2a3040;
  --ccr-border-strong: #3d4f6a;
  --ccr-text: #e0e8f0;
  --ccr-muted: #7f96ae;
  --ccr-faint: #576880;
  --ccr-accent: #12b8cc;
  --ccr-accent-soft: #0c2535;
  --ccr-accent-strong: #5fd4e4;
  --ccr-code: #7ecfe0;
  --ccr-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  --ccr-topbar-bg: rgba(25, 28, 36, 0.94);
  --ccr-overlay-card-bg: rgba(30, 36, 52, 0.9);
  --ccr-overlay-card-border: rgba(60, 90, 120, 0.5);
  --ccr-overlay-summary-bg: rgba(28, 34, 50, 0.92);
  --ccr-origin-bg: rgba(30, 36, 52, 0.7);
  --ccr-origin-border: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ccr-bg: #0f1117;
    --ccr-surface: #191c24;
    --ccr-surface-soft: #1e2230;
    --ccr-border: #2a3040;
    --ccr-border-strong: #3d4f6a;
    --ccr-text: #e0e8f0;
    --ccr-muted: #7f96ae;
    --ccr-faint: #576880;
    --ccr-accent: #12b8cc;
    --ccr-accent-soft: #0c2535;
    --ccr-accent-strong: #5fd4e4;
    --ccr-code: #7ecfe0;
    --ccr-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    --ccr-topbar-bg: rgba(25, 28, 36, 0.94);
    --ccr-overlay-card-bg: rgba(30, 36, 52, 0.9);
    --ccr-overlay-card-border: rgba(60, 90, 120, 0.5);
    --ccr-overlay-summary-bg: rgba(28, 34, 50, 0.92);
    --ccr-origin-bg: rgba(30, 36, 52, 0.7);
    --ccr-origin-border: rgba(255, 255, 255, 0.1);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ccr-bg);
  color: var(--ccr-text);
}

button,
input {
  font: inherit;
}

.ccr-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.ccr-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(210px, 320px) minmax(280px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ccr-border);
  background: var(--ccr-topbar-bg);
  backdrop-filter: blur(12px);
}

.ccr-title-block h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.ccr-title-block p {
  margin: 4px 0 0;
  color: var(--ccr-muted);
  font-size: 12px;
  line-height: 1.35;
}

.ccr-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
}

.ccr-search:focus-within {
  border-color: var(--ccr-accent);
  box-shadow: 0 0 0 3px var(--ccr-accent-soft);
}

.ccr-search svg,
.ccr-icon-button svg,
.ccr-copy svg,
.ccr-section-copy svg,
.ccr-family-list span svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ccr-search svg {
  flex: 0 0 auto;
  color: var(--ccr-faint);
}

.ccr-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ccr-text);
  background: transparent;
  font-size: 14px;
}

.ccr-status {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 106px;
  justify-content: flex-end;
  color: var(--ccr-muted);
  font-size: 12px;
}

.ccr-status strong {
  color: var(--ccr-text);
  font-size: 20px;
  font-weight: 700;
}

.ccr-bg-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
  white-space: nowrap;
}

.ccr-bg-control button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ccr-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.ccr-bg-control button:hover,
.ccr-bg-control button.is-active {
  background: var(--ccr-accent-soft);
  color: var(--ccr-accent-strong);
}

.ccr-bg-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ccr-border-strong);
  border-radius: 4px;
}

.ccr-bg-swatch.is-checker {
  background:
    linear-gradient(45deg, #dce5ec 25%, transparent 25%),
    linear-gradient(-45deg, #dce5ec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dce5ec 75%),
    linear-gradient(-45deg, transparent 75%, #dce5ec 75%);
  background-color: #fff;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

.ccr-bg-swatch.is-white {
  background: #fff;
}

.ccr-bg-swatch.is-background {
  background: var(--color-background, #1a1b1b);
}

.ccr-workspace {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) 360px;
  min-height: 0;
}

.ccr-sidebar,
.ccr-detail {
  border-right: 1px solid var(--ccr-border);
  background: var(--ccr-surface);
}

/* 側邊欄固定，隨主區域捲動仍留在畫面 */
.ccr-sidebar {
  position: sticky;
  top: 71px;
  max-height: calc(100vh - 71px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ccr-detail {
  min-height: calc(100vh - 71px);
}

.ccr-filter-block {
  border-bottom: 1px solid var(--ccr-border);
  padding: 10px 0;
}

.ccr-filter-block h2 {
  margin: 0;
  padding: 0 22px 7px;
  color: var(--ccr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ccr-tabs {
  display: grid;
  gap: 3px;
  padding: 0 12px;
}

.ccr-tabs-compact .ccr-tab {
  min-height: 32px;
  font-size: 12px;
}

.ccr-tab {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ccr-muted);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}

.ccr-tab strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-weight: 650;
}

.ccr-tab span {
  color: var(--ccr-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ccr-tab:hover {
  background: var(--ccr-surface-soft);
  color: var(--ccr-text);
}

.ccr-tab.is-active {
  background: var(--ccr-accent-soft);
  color: var(--ccr-accent-strong);
}

.ccr-results {
  min-width: 0;
  padding: 14px;
}

.ccr-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
}

.ccr-view-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
}

.ccr-view-switch button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ccr-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.ccr-view-switch button.is-active {
  background: var(--ccr-accent-soft);
  color: var(--ccr-accent-strong);
}

.ccr-view-label {
  overflow: hidden;
  color: var(--ccr-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccr-list-head,
.ccr-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(210px, 1fr) 168px;
  gap: 12px;
  align-items: center;
}

.ccr-list-head {
  position: sticky;
  top: 71px;
  z-index: 4;
  padding: 0 12px 8px;
  color: var(--ccr-muted);
  background: var(--ccr-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ccr-list-head[hidden] {
  display: none;
}

.ccr-list {
  display: grid;
  gap: 8px;
}

.ccr-row {
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
  box-shadow: 0 1px 0 rgba(21, 35, 49, 0.02);
  text-align: left;
  cursor: pointer;
}

.ccr-row:hover,
.ccr-row.is-selected {
  border-color: var(--ccr-border-strong);
  box-shadow: var(--ccr-shadow);
}

.ccr-row.is-selected {
  outline: 2px solid var(--ccr-accent-soft);
}

.ccr-class-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ccr-class-name {
  overflow: hidden;
  color: var(--ccr-code);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccr-copy {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ccr-border);
  border-radius: 7px;
  background: var(--ccr-surface);
  color: var(--ccr-muted);
  cursor: pointer;
}

.ccr-copy:hover,
.ccr-icon-button:hover {
  border-color: var(--ccr-accent);
  color: var(--ccr-accent-strong);
  background: var(--ccr-accent-soft);
}

.ccr-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: var(--ccr-muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.ccr-summary > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccr-calc-summary {
  color: var(--ccr-accent-strong);
  font-weight: 750;
}

.ccr-row-tags,
.ccr-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ccr-tag {
  display: inline-flex;
  align-items: center;
  border: 0;
  min-height: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ccr-surface-soft);
  color: var(--ccr-muted);
  font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
}

button.ccr-tag {
  cursor: pointer;
}

button.ccr-tag:hover {
  color: var(--ccr-accent-strong);
  background: var(--ccr-accent-soft);
}

.ccr-mini-preview,
.ccr-preview-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ccr-border);
  border-radius: 7px;
  background:
    linear-gradient(45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f5 75%);
  background-color: #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

body[data-preview-bg="white"] .ccr-mini-preview,
body[data-preview-bg="white"] .ccr-preview-stage {
  background: #fff;
}

body[data-preview-bg="background"] .ccr-mini-preview,
body[data-preview-bg="background"] .ccr-preview-stage {
  background: var(--color-background, #1a1b1b);
}

.ccr-mini-preview {
  display: grid;
  place-items: center;
  width: 156px;
  min-height: 48px;
  padding: 8px;
}

.ccr-preview-canvas {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 32px;
  isolation: isolate;
}

.ccr-preview-canvas.is-large {
  min-height: 132px;
}

.ccr-preview-frame,
.ccr-spacing-frame,
.ccr-effect-frame,
.ccr-box-frame,
.ccr-cursor-frame,
.ccr-object-frame {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  width: 100%;
  min-height: 34px;
}

.ccr-preview-canvas.is-large .ccr-preview-frame,
.ccr-preview-canvas.is-large .ccr-spacing-frame,
.ccr-preview-canvas.is-large .ccr-effect-frame,
.ccr-preview-canvas.is-large .ccr-box-frame,
.ccr-preview-canvas.is-large .ccr-cursor-frame,
.ccr-preview-canvas.is-large .ccr-object-frame {
  min-height: 128px;
}

.ccr-object-preview {
  display: grid;
  justify-items: stretch;
  align-content: start;
  width: min(100%, 140px);
  gap: 6px;
}

.ccr-object-frame {
  width: 100%;
  height: 64px;
  overflow: hidden;
  border: 1px solid rgba(16, 33, 43, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}

.ccr-preview-canvas.is-large .ccr-object-preview {
  width: min(100%, 260px);
}

.ccr-preview-canvas.is-large .ccr-object-frame {
  width: 100%;
  height: 118px;
}

.ccr-object-image {
  width: 100%;
  height: 100%;
}

.ccr-object-label {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #0f4f5c;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  justify-self: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccr-preview-canvas.is-large .ccr-object-label {
  font-size: 10px;
}

.ccr-spacing-origin {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  inset: auto;
  width: 128px;
  height: 74px;
  transform: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.ccr-margin-fill,
.ccr-margin-ghost,
.ccr-margin-subject {
  grid-area: stack;
  width: 46px;
  height: 28px;
}

.ccr-margin-fill {
  z-index: 2;
  box-sizing: border-box;
  border-radius: 4px;
  background: rgba(246, 178, 96, 0.2);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.ccr-margin-ghost {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 46px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px dashed rgba(209, 136, 46, 0.72) !important;
  border-radius: 4px;
  background: transparent !important;
  color: transparent !important;
  font-size: 10px;
  font-weight: 400;
}

.ccr-margin-subject {
  z-index: 3;
}

.ccr-spacing-origin.is-positive .ccr-margin-fill {
  z-index: 2;
}

.ccr-spacing-origin.is-negative .ccr-margin-fill {
  z-index: 4;
}

.ccr-spacing-origin.is-negative .ccr-margin-ghost {
  z-index: 5;
}

.ccr-spacing-origin.is-positive .ccr-margin-ghost {
  z-index: 1;
}

.ccr-spacing-origin.side-inline.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-inline.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-left.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-left.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-right.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-right.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-inline.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-inline.is-negative .ccr-margin-fill,
.ccr-spacing-origin.side-left.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-left.is-negative .ccr-margin-fill,
.ccr-spacing-origin.side-right.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-right.is-negative .ccr-margin-fill {
  width: calc(46px + var(--ccr-margin-size, 10px)) !important;
  min-width: calc(46px + var(--ccr-margin-size, 10px)) !important;
}

.ccr-spacing-origin.side-block.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-block.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-top.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-top.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-bottom.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-bottom.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-block.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-block.is-negative .ccr-margin-fill,
.ccr-spacing-origin.side-top.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-top.is-negative .ccr-margin-fill,
.ccr-spacing-origin.side-bottom.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-bottom.is-negative .ccr-margin-fill {
  height: calc(28px + var(--ccr-margin-size, 10px)) !important;
  min-height: calc(28px + var(--ccr-margin-size, 10px)) !important;
}

.ccr-spacing-origin.side-all.is-positive .ccr-margin-ghost,
.ccr-spacing-origin.side-all.is-positive .ccr-margin-fill,
.ccr-spacing-origin.side-all.is-negative .ccr-margin-subject,
.ccr-spacing-origin.side-all.is-negative .ccr-margin-fill {
  width: calc(46px + var(--ccr-margin-size, 10px)) !important;
  min-width: calc(46px + var(--ccr-margin-size, 10px)) !important;
  height: calc(28px + var(--ccr-margin-size, 10px)) !important;
  min-height: calc(28px + var(--ccr-margin-size, 10px)) !important;
}

.ccr-spacing-origin.side-inline .ccr-margin-fill {
  padding-inline: calc(var(--ccr-margin-size, 10px) / 2);
}

.ccr-spacing-origin.side-block .ccr-margin-fill {
  padding-block: calc(var(--ccr-margin-size, 10px) / 2);
}

.ccr-spacing-origin.side-all .ccr-margin-fill {
  padding: calc(var(--ccr-margin-size, 10px) / 2);
}

.ccr-spacing-origin.side-top .ccr-margin-fill {
  padding-top: var(--ccr-margin-size, 10px);
}

.ccr-spacing-origin.side-right .ccr-margin-fill {
  padding-right: var(--ccr-margin-size, 10px);
}

.ccr-spacing-origin.side-bottom .ccr-margin-fill {
  padding-bottom: var(--ccr-margin-size, 10px);
}

.ccr-spacing-origin.side-left .ccr-margin-fill {
  padding-left: var(--ccr-margin-size, 10px);
}

.ccr-spacing-origin.side-top .ccr-margin-fill,
.ccr-spacing-origin.side-top .ccr-margin-ghost,
.ccr-spacing-origin.side-top .ccr-margin-subject {
  align-self: end;
}

.ccr-spacing-origin.side-bottom .ccr-margin-fill,
.ccr-spacing-origin.side-bottom .ccr-margin-ghost,
.ccr-spacing-origin.side-bottom .ccr-margin-subject {
  align-self: start;
}

.ccr-spacing-origin.side-left .ccr-margin-fill,
.ccr-spacing-origin.side-left .ccr-margin-ghost,
.ccr-spacing-origin.side-left .ccr-margin-subject {
  justify-self: end;
}

.ccr-spacing-origin.side-right .ccr-margin-fill,
.ccr-spacing-origin.side-right .ccr-margin-ghost,
.ccr-spacing-origin.side-right .ccr-margin-subject {
  justify-self: start;
}

.ccr-box-value {
  position: absolute;
  right: 7px;
  top: 5px;
  z-index: 5;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(155, 90, 18, 0.98);
}

.ccr-preview-subject {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.ccr-preview-canvas.is-layout .ccr-preview-subject {
  min-width: 88px;
}

.ccr-layout-sample {
  flex-wrap: wrap;
}

.ccr-layout-sample span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  border-radius: 4px;
  background: rgba(8, 127, 140, 0.12);
}

.ccr-text-sample {
  margin: 0;
}

.ccr-box-sample {
  overflow: visible;
}

.ccr-cursor-frame {
  gap: 5px;
}

.ccr-cursor-frame span {
  color: var(--ccr-muted);
  font-size: 10px;
  line-height: 1;
}

.ccr-cursor-sample {
  user-select: none;
}

.ccr-preview-origin {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 52px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ccr-origin-border);
  border-radius: 4px;
  background: var(--ccr-origin-bg);
}

.ccr-preview-origin.ccr-position-origin,
.ccr-position-subject {
  grid-area: stack;
}

.ccr-preview-origin.ccr-position-origin {
  position: relative;
  z-index: 2;
  inset: auto;
  width: auto;
  height: auto;
  transform: none;
  border-color: var(--ccr-origin-border) !important;
  border-style: solid !important;
  background: var(--ccr-origin-bg) !important;
  color: transparent !important;
}

.ccr-position-subject {
  z-index: 3;
}

.ccr-preview-note {
  max-width: 130px;
  color: var(--ccr-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.ccr-detail {
  border-right: 0;
  border-left: 1px solid var(--ccr-border);
}

.ccr-detail-card {
  position: sticky;
  top: 85px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  margin: 14px;
  padding: 14px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
  box-shadow: var(--ccr-shadow);
  scrollbar-width: thin;
}

.ccr-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ccr-muted {
  color: var(--ccr-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ccr-detail h2 {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--ccr-code);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.35;
}

.ccr-icon-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ccr-border);
  border-radius: 7px;
  background: var(--ccr-surface);
  color: var(--ccr-muted);
  cursor: pointer;
}

.ccr-preview-stage {
  display: grid;
  place-items: center;
  min-height: 176px;
  padding: 22px;
}

.ccr-preview-stage .ccr-preview-subject {
  min-width: 92px;
  min-height: 54px;
  font-size: 14px;
}

.ccr-preview-stage .ccr-preview-canvas.has-explicit-size .ccr-preview-subject {
  min-width: 0;
  min-height: 0;
}

.ccr-preview-stage .ccr-preview-canvas.is-size-preview {
  min-height: 0;
}

.ccr-detail-section {
  display: grid;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--ccr-border);
}

.ccr-detail-section h3 {
  margin: 0;
  color: var(--ccr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ccr-detail-section p {
  margin: 0;
  color: var(--ccr-text);
  font-size: 13px;
  line-height: 1.5;
}

.ccr-code-block,
.ccr-detail-section code {
  overflow-wrap: anywhere;
  color: var(--ccr-code);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.ccr-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ccr-section-copy {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ccr-border);
  border-radius: 6px;
  background: var(--ccr-surface);
  color: var(--ccr-muted);
  cursor: pointer;
}

.ccr-code-block {
  display: block;
  max-height: 90px;
  overflow: auto;
  padding: 8px;
  border-radius: 7px;
  background: var(--ccr-surface-soft);
  font-size: 12px;
  line-height: 1.45;
}

.ccr-calc-list {
  display: grid;
  gap: 5px;
}

.ccr-calc-list code {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(8, 127, 140, 0.08);
  color: var(--ccr-accent-strong);
  font-size: 12px;
  line-height: 1.4;
}

.ccr-calc-list span {
  color: var(--ccr-text);
  font-weight: 750;
}

.ccr-calc-list em {
  color: var(--ccr-accent-strong);
  font-style: normal;
}

.ccr-note-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--ccr-text);
  font-size: 13px;
  line-height: 1.45;
}

.ccr-var-list {
  display: grid;
  gap: 5px;
}

.ccr-var-value {
  display: grid;
  gap: 2px;
  padding: 4px 0;
}

.ccr-var-value span {
  font-weight: 700;
}

.ccr-var-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ccr-color-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ccr-border-strong);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.ccr-var-value em {
  color: var(--ccr-faint);
  font-family: Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-style: normal;
}

.ccr-muted-value {
  color: var(--ccr-faint);
}

.ccr-family-list {
  display: grid;
  gap: 6px;
}

.ccr-family-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--ccr-border);
  border-radius: 7px;
  background: var(--ccr-surface);
  color: var(--ccr-code);
  cursor: pointer;
  text-align: left;
}

.ccr-family-list button.is-active {
  border-color: var(--ccr-accent);
  background: var(--ccr-accent-soft);
}

.ccr-family-list code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccr-family-list span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ccr-muted);
}

.ccr-family-list p {
  margin: 2px 0 0;
  color: var(--ccr-muted);
  font-size: 12px;
}

.ccr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--ccr-border);
  color: var(--ccr-muted);
  font-size: 12px;
}

.ccr-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccr-pagination button {
  min-width: 56px;
  height: 30px;
  border: 1px solid var(--ccr-border);
  border-radius: 6px;
  background: var(--ccr-surface);
  color: var(--ccr-text);
  cursor: pointer;
}

.ccr-pagination button:disabled {
  color: var(--ccr-faint);
  cursor: not-allowed;
}

.ccr-pagination strong {
  color: var(--ccr-text);
  font-size: 12px;
}

.ccr-compare-board {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
}

.ccr-compare-board.is-scrollable {
  justify-content: flex-start;
}

.ccr-compare-board.is-horizontal-overlay,
.ccr-compare-board.is-vertical-overlay {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ccr-compare-board.is-horizontal-overlay {
  align-items: stretch;
}

.ccr-compare-board.is-vertical-overlay {
  align-items: flex-start;
}

.ccr-compare-board.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.ccr-compare-board.is-horizontal-overlay {
  display: grid;
  grid-template-columns: 1fr;
  overflow-x: hidden;
}

.ccr-compare-card {
  display: grid;
  grid-template-rows: auto auto minmax(42px, auto);
  gap: 9px;
  flex: 0 0 260px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
  cursor: pointer;
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card {
  flex-basis: 148px;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(128px, auto);
  align-items: stretch;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card {
  width: 100%;
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card {
  flex: 0 0 156px;
  grid-template-rows: var(--ccr-compare-head-height, 52px) minmax(var(--ccr-compare-preview-height, 280px), auto) auto;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-head,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-head {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  align-self: start;
  justify-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: min(140px, calc(100% - 24px));
  padding: 6px;
  border: 1px solid var(--ccr-overlay-card-border);
  border-radius: 7px;
  background: var(--ccr-overlay-card-bg);
  backdrop-filter: blur(4px);
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card-head {
  grid-row: 1;
  z-index: auto;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: var(--ccr-compare-head-height, 52px);
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-summary,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  align-self: end;
  justify-self: end;
  width: min(260px, calc(100% - 24px));
  padding: 6px 8px;
  border: 1px solid var(--ccr-overlay-card-border);
  border-radius: 7px;
  background: var(--ccr-overlay-summary-bg);
  backdrop-filter: blur(4px);
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary {
  grid-row: 3;
  z-index: auto;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-preview,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-preview {
  grid-column: 1;
  grid-row: 1;
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card-preview {
  grid-row: 2;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-head .ccr-copy,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-head .ccr-copy {
  margin-left: 0;
}

.ccr-compare-board.is-horizontal-overlay .ccr-class-name,
.ccr-compare-board.is-vertical-overlay .ccr-class-name {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-summary,
.ccr-compare-board.is-horizontal-overlay .ccr-compare-card-summary span,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary,
.ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary span {
  overflow-wrap: anywhere;
}

.ccr-compare-board.is-grid .ccr-compare-card {
  grid-template-rows: auto minmax(120px, auto) minmax(42px, auto);
  align-content: start;
  width: auto;
  min-height: 0;
}

.ccr-compare-board.is-grid .ccr-compare-card-preview {
  min-height: 120px;
}

.ccr-compare-card:hover,
.ccr-compare-card.is-selected {
  border-color: var(--ccr-border-strong);
  box-shadow: var(--ccr-shadow);
}

.ccr-compare-card.is-selected {
  outline: 2px solid var(--ccr-accent-soft);
}

.ccr-compare-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ccr-compare-card-head .ccr-copy {
  margin-left: auto;
}

.ccr-compare-card.is-vertical .ccr-compare-card-head,
.ccr-compare-card.is-grid .ccr-compare-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ccr-compare-card.is-vertical .ccr-compare-card-head .ccr-copy,
.ccr-compare-card.is-grid .ccr-compare-card-head .ccr-copy {
  margin-left: 0;
}

.ccr-compare-card.is-vertical .ccr-class-name,
.ccr-compare-card.is-grid .ccr-class-name {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ccr-compare-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--ccr-border);
  border-radius: 7px;
  background:
    linear-gradient(45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f5 75%);
  background-color: #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

body[data-preview-bg="white"] .ccr-compare-card-preview {
  background: #fff;
}

body[data-preview-bg="background"] .ccr-compare-card-preview {
  background: var(--color-background, #1a1b1b);
}

.ccr-compare-card-preview.is-vertical {
  width: 126px;
  min-height: min(var(--ccr-compare-preview-height, 280px), calc(100vh - 430px));
  height: min(var(--ccr-compare-preview-height, 280px), calc(100vh - 430px));
}

.ccr-compare-card-preview.is-horizontal {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  height: 128px;
}

.ccr-compare-card-preview.is-grid {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 120px;
}

.ccr-compare-position-frame,
.ccr-compare-size-frame {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.ccr-compare-card-preview.is-vertical .ccr-compare-position-frame,
.ccr-compare-card-preview.is-vertical .ccr-compare-size-frame {
  width: min(72px, calc(100% - 24px));
  min-height: min(var(--ccr-compare-frame-height, 250px), calc(100vh - 460px));
  height: min(var(--ccr-compare-frame-height, 250px), calc(100vh - 460px));
  justify-self: center;
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card.has-actual-size .ccr-compare-card-preview.is-vertical {
  min-height: var(--ccr-compare-preview-height, 280px);
  height: var(--ccr-compare-preview-height, 280px);
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card.has-actual-size .ccr-compare-card-preview.is-vertical .ccr-compare-size-frame {
  min-height: var(--ccr-item-frame-height, 250px);
  height: var(--ccr-item-frame-height, 250px);
}

.ccr-compare-board.is-vertical-overlay .ccr-compare-card-preview.is-vertical {
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: min(var(--ccr-item-preview-height, 280px), calc(100vh - 430px));
}

.ccr-compare-card-preview.is-horizontal .ccr-compare-position-frame,
.ccr-compare-card-preview.is-horizontal .ccr-compare-size-frame {
  min-height: 84px;
  height: 84px;
}

.ccr-compare-size-subject {
  max-width: 100%;
  max-height: 100%;
}

.ccr-compare-size-subject.is-measure-block {
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.ccr-compare-card-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ccr-muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
}

.ccr-compare-card-summary span {
  overflow-wrap: anywhere;
}

.ccr-compare-card-summary > span:first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ccr-compare-card.is-vertical .ccr-compare-card-summary {
  align-content: start;
}

.ccr-empty {
  padding: 28px;
  border: 1px dashed var(--ccr-border-strong);
  border-radius: 8px;
  background: var(--ccr-surface);
  color: var(--ccr-muted);
  text-align: center;
  font-size: 14px;
}

/* ─── Variant info (details/summary) ─── */
.ccr-variant-info {
  margin: 0 12px 6px;
}

.ccr-variant-info summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  list-style: none;
  cursor: pointer;
  color: var(--ccr-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  user-select: none;
  transition: color 100ms;
}

.ccr-variant-info summary::-webkit-details-marker { display: none; }

.ccr-variant-info[open] summary {
  color: var(--ccr-accent-strong);
}

.ccr-variant-desc {
  display: grid;
  gap: 7px;
  padding: 8px 2px 10px;
}

.ccr-variant-desc p {
  margin: 0;
  color: var(--ccr-text);
  font-size: 12px;
  line-height: 1.45;
}

.ccr-variant-desc strong {
  color: var(--ccr-accent-strong);
}

.ccr-variant-desc code {
  display: inline;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--ccr-surface-soft);
  color: var(--ccr-code);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
}

/* ─── Dark mode toggle button ─── */
.ccr-theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ccr-border);
  border-radius: 8px;
  background: var(--ccr-surface);
  color: var(--ccr-muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.ccr-theme-toggle:hover {
  border-color: var(--ccr-accent);
  color: var(--ccr-accent-strong);
  background: var(--ccr-accent-soft);
}

.ccr-theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show moon in light, sun in dark */
.ccr-icon-moon { display: block; }
.ccr-icon-sun  { display: none; }
[data-theme="dark"] .ccr-icon-moon { display: none; }
[data-theme="dark"] .ccr-icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ccr-icon-moon { display: none; }
  :root:not([data-theme="light"]) .ccr-icon-sun  { display: block; }
}

/* ─── Object frame dark adaptation ─── */
[data-theme="dark"] .ccr-object-frame {
  background: rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ccr-object-frame { background: rgba(0, 0, 0, 0.3); }
}

[data-theme="dark"] .ccr-object-label {
  background: rgba(0, 0, 0, 0.55);
  color: #a0d8e8;
}

/* ─── Box value dark adaptation ─── */
[data-theme="dark"] .ccr-box-value {
  background: rgba(0, 0, 0, 0.55);
  color: rgba(200, 160, 80, 0.98);
}

.ccr-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  transform: translateY(12px);
  opacity: 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: #10212b;
  color: #fff;
  font-size: 13px;
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.ccr-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1120px) {
  .ccr-topbar {
    grid-template-columns: minmax(190px, 260px) minmax(240px, 1fr) auto;
  }

  .ccr-bg-control {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .ccr-tabs,
  .ccr-list-head {
    top: 119px;
  }

  .ccr-sidebar {
    top: 119px;
    max-height: calc(100vh - 119px);
  }

  .ccr-workspace {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .ccr-detail {
    display: none;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .ccr-shell,
  .ccr-topbar,
  .ccr-workspace,
  .ccr-sidebar,
  .ccr-results,
  .ccr-list,
  .ccr-row {
    width: 100%;
    max-width: 100vw;
  }

  .ccr-topbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
  }

  .ccr-title-block {
    min-width: 0;
  }

  .ccr-title-block h1 {
    font-size: 16px;
  }

  .ccr-title-block p {
    display: none;
  }

  .ccr-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ccr-bg-control {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: stretch;
  }

  .ccr-bg-control button {
    flex: 1 1 0;
    justify-content: center;
  }

  .ccr-status {
    min-width: 78px;
  }

  .ccr-workspace {
    display: block;
    overflow-x: hidden;
  }

  .ccr-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid var(--ccr-border);
  }

  .ccr-tabs {
    position: sticky;
    top: 109px;
    z-index: 5;
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    padding: 8px 12px;
    background: var(--ccr-surface);
  }

  .ccr-tab {
    flex: 0 0 auto;
    width: max-content;
    max-width: 180px;
    min-height: 34px;
    grid-template-columns: auto auto;
    white-space: nowrap;
  }

  .ccr-tab strong {
    max-width: 118px;
  }

  .ccr-results {
    padding: 12px;
  }

  .ccr-detail {
    display: block;
    padding: 0 12px 16px;
  }

  .ccr-detail-card {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .ccr-list-head {
    display: none;
  }

  .ccr-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
  }

  .ccr-results-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ccr-view-switch {
    width: 100%;
  }

  .ccr-view-switch button {
    flex: 1 1 0;
  }

  .ccr-compare-board {
    margin-inline: -4px;
    padding-inline: 4px;
  }

  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card-head,
  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card-preview,
  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card-summary,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-head,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-preview,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    justify-self: stretch;
  }

  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card-head,
  .ccr-compare-board.is-horizontal-overlay .ccr-compare-card-summary,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-head,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-summary {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .ccr-compare-card-preview.is-horizontal,
  .ccr-compare-card-preview.is-grid,
  .ccr-compare-board.is-vertical-overlay .ccr-compare-card-preview.is-vertical {
    width: 100%;
  }

  .ccr-summary {
    white-space: normal;
  }

  .ccr-mini-preview {
    width: 100%;
    min-height: 56px;
  }

  /* ==========================================================================
     手機版滿版彈出視窗 (方案 B)
     ========================================================================== */
  .ccr-detail {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 85vh;
    background: var(--ccr-surface);
    /* 確保 z-index 夠高，高於原本可能固定在手機上方的 tabs */
    z-index: 10000 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    padding: 20px 16px 40px !important;

    transform: translateY(100%);
    /* ✨ 補上 opacity 的過渡，讓動效更平滑 */
    transition: transform 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94), opacity 0.3s ease;
    display: block !important;
    pointer-events: none;
    opacity: 0;
  }

  .ccr-detail.is-active {
    transform: translateY(0);
    /* ✨ 確保激活時，滑鼠和手指點擊事件能夠 100% 被接收 */
    pointer-events: all !important;
    opacity: 1;
  }

  /* 手機版關閉按鈕樣式 */
  .ccr-mobile-close-btn {
    display: block !important;
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--ccr-border);
    color: var(--ccr-text);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
}