/* 色碼表頁專用樣式；欄位、按鈕沿用 site.css */
.cc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin: 8px 0; }
.cc-swatch { border: 1px solid var(--line); border-radius: 12px; min-height: 140px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 10px 12px; }
.cc-swatch span { font-weight: 700; font-size: 1.2rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.cc-pick input[type=color], .cc-pair input[type=color] { display: block; width: 100%; height: 48px; margin-top: 4px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cc-pick input[type=text], .cc-pair input[type=text] { width: 100%; min-height: 44px; margin-top: 4px; padding: 6px 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.cc-wide { grid-column: 1 / -1; }
.cc-fs { border: 1px solid var(--line); border-radius: 10px; margin: 0; padding: 4px 12px 10px; min-width: 0; }
.cc-fs legend { font-weight: 700; padding: 0 6px; font-size: 1rem; }
.cc-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-row3 > *, .cc-row4 > *, .cc-grid > * { min-width: 0; }
.cc-fs .qr-field input { width: 100%; box-sizing: border-box; }
.cc-h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.cc-copy { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cc-copy li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.cc-copy code { font-size: 1rem; overflow-wrap: anywhere; }
.cc-img-wrap { text-align: center; }
.cc-img-wrap canvas { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; cursor: crosshair; }
.cc-filter { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.cc-filter > * { min-width: 0; }
.cc-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 480px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.cc-chip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--fg); min-width: 0; }
.cc-chip:hover { border-color: var(--brand); }
.cc-chip-sw { width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgba(0,0,0,.2); flex: none; }
.cc-chip-t { display: block; min-width: 0; }
.cc-chip-t strong { display: block; font-size: .95rem; overflow-wrap: anywhere; }
.cc-chip-t small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.cc-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-contrast > * { min-width: 0; }
.cc-pair { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; }
.cc-sample { margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; color: #000; background: #fff; }
.cc-sample strong { display: block; font-size: 1.6rem; margin-bottom: 4px; }
.cc-ratio-line { font-size: 1.2rem; margin: .5rem 0 0; }
.cc-ratio-line strong { font-size: 1.8rem; color: var(--brand-dark); }
.cc-wcag { border-collapse: collapse; width: 100%; font-size: 1rem; }
.cc-wcag th, .cc-wcag td { border: 1px solid var(--line); padding: 8px; text-align: left; }
.cc-wcag th { background: var(--soft); }
.cc-pass { color: var(--ok); font-weight: 700; }
.cc-fail { color: var(--bad); font-weight: 700; }
@media (max-width: 560px) {
  .cc-top, .cc-grid, .cc-filter, .cc-contrast { grid-template-columns: 1fr; }
  .cc-table { grid-template-columns: 1fr; }
}