/* 색 코드표. 스와치 색 자체는 color-swatches.css(생성물)가 속성 선택자로 배달한다. */
.pair-preview{border:1px solid var(--line);border-radius:8px;padding:20px 16px;margin:0 0 16px;display:grid;gap:10px}
.pair-sample{margin:0;font-size:16px;line-height:1.6}
.pair-large{font-size:24px;font-weight:700;line-height:1.4}
.pair-fields{display:grid;gap:12px;margin-bottom:12px}
@media(min-width:600px){.pair-fields{grid-template-columns:1fr 1fr}}
.pair-field .row{gap:8px;align-items:center}
.pair-field input[type=color]{inline-size:44px;block-size:44px;padding:2px;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;flex:none}
.pair-field input[type=text]{flex:1;min-inline-size:0;block-size:44px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.pair-ratio{margin:12px 0 4px;font-size:16px}
.pair-ratio strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px}
.pair-verdict{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.pair-verdict li{font-size:14px;padding-inline-start:22px;position:relative}
/* 통과·미달은 색만으로 구분하지 않는다 — 색을 못 보는 사람에게 같은 줄이 된다. */
.pair-verdict li::before{position:absolute;inset-inline-start:0;font-weight:700}
.pair-verdict li[data-pass="yes"]::before{content:"✓";color:var(--ok,#1a7f37)}
.pair-verdict li[data-pass="no"]::before{content:"✕";color:var(--warn,#b42318)}
.pair-recent{margin:12px 0}

/* 검색 라벨이 윗 문단에 붙어 한 덩어리로 읽혔다 — 입력 묶음의 시작을 띄운다. */
#palette label[for="color-search"]{display:block;margin-top:16px}
#palette #basic-label{margin-top:12px}
/* 범위 칩은 처음부터 어느 쪽이 켜졌는지 보여야 한다. 첫 화면에서 둘 다 꺼진 모양이면
   139가지가 '전체'라서 나온 건지 그냥 목록인지 알 수 없다. */
.chips .chip[aria-pressed="true"]{background:var(--soft);border-color:var(--edge-strong);color:var(--brand-ink);font-weight:700}

.color-list{display:grid;gap:6px;margin-top:10px}
/* 139행을 훑어야 하므로 한 행이 낮아야 한다. 행마다 남는 세로 공백이 곧 스크롤 길이다. */
.color-row{border:1px solid var(--line);border-radius:8px;padding:2px 10px 4px}
.color-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-block-size:44px}
.swatch{inline-size:30px;block-size:30px;border:1px solid var(--line);border-radius:6px;flex:none}
/* 이름과 설명은 좁은 화면에서만 두 줄로 내려간다 — 넓은 화면에서 이름과 코드 사이가
   횅하게 벌어지던 것을 메운다. */
/* 줄바꿈에 맡기면 짧은 이름만 한 줄로 붙어(azure·bisque) 행마다 모양이 달라진다 —
   훑는 표에서는 같은 자리에 같은 것이 와야 하므로 열을 고정한다. */
.color-id{flex:1;min-inline-size:120px;display:grid;gap:2px}
@media(min-width:700px){.color-id{grid-template-columns:minmax(0,220px) 1fr;gap:0 16px;align-items:baseline}}
.color-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;word-break:break-word}
.color-ko{font-size:13px}
.color-hex{min-block-size:44px;flex:none;padding-inline:12px}
.color-hex code{font-size:14px}
.color-more>summary{font-size:13px;padding:6px 0;min-block-size:44px}
/* 펼침 안의 것들은 '눌러서 복사하는 것'이다. 밑줄 친 글자로 두면 본문처럼 읽히고
   44px 타깃이 문단 사이 빈 공간처럼 보인다 — 테두리를 줘 조작 대상임을 밝힌다. */
.color-formats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 0 8px}
/* 코드 버튼은 글자가 길어 반 칸에 들어가지 않는다. 좁은 화면에서는 한 줄을 다 쓴다. */
.color-formats .text-btn[data-copy-value]{grid-column:1/-1;justify-content:center}
@media(min-width:600px){.color-formats{grid-template-columns:repeat(4,auto);justify-content:start}
  .color-formats .text-btn[data-copy-value]{grid-column:auto}}
.color-formats .text-btn{min-block-size:44px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none}