/* 컬러 팔레트 면. 색·간격은 tools-base.css 의 기존 토큰만 쓴다 — 이 면만의 토큰을 만들지 않는다.
   본문 폭은 layout.css 의 전 페이지 단일 규격(760px)을 따른다. 색 띠의 색은 브랜드 토큰이 아니라
   도구의 산출 데이터이고, SVG fill 속성으로 칠해진다(인라인 style 없음 — CSP). */

.pal-starters>h2,.pal-maker>h2,.pal-rules>h2,.pal-contrast>h2{margin-top:22px}
.pal-jump{margin:4px 0 2px;font-size:14px}
.pal-card{display:flex;flex-direction:column;gap:10px}
.pal-head{font-size:15px;font-weight:700;display:flex;gap:8px;align-items:baseline}
.pal-angle{font-size:13px;font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
.pal-strip{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:12px;overflow:hidden}

/* 개별 복사 — 색 띠와 같은 순서·같은 열. 4색은 좁은 화면에서 2×2 로 접고 넓은 화면에서 네 열로 편다. */
.pal-colors{display:grid;gap:6px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.pal-colors[data-n="2"]{--n:2}.pal-colors[data-n="3"]{--n:3}.pal-colors[data-n="4"]{--n:2}
@media(min-width:800px){.pal-colors[data-n="4"]{--n:4}}
.pal-color{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:6px 4px;font-weight:500}
.pal-color code{font-size:14px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pal-color .copy-label{font-size:12px;color:var(--mut)}
/* 견본+HEX 한 줄 — 좁은 칸에서는 버튼 안에서 위아래로 감긴다(잘라내지 않는다). 테두리는 흰색 견본도 보이게. */
.pal-code{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.pal-swatch{flex:none}.pal-swatch rect{stroke:var(--line);stroke-width:1}

/* 명암비 요약 — 팔레트 안 최고 대비 쌍 하나. ✓ 는 이 두 색의 기준별 판정에만 붙는다(팔레트 전체 합격 아님). */
.pal-best{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.pal-best:hover .pal-pair{text-decoration:underline;text-underline-offset:3px}
.pal-pair{font-size:14px}.pal-pair code{font-size:13px}
.verdict{font-size:13px;color:#b42318}.verdict[data-pass="true"]{color:#067647}
.pal-all{width:100%;min-height:48px}
/* 복사 상태 줄 — 비어 있어도 한 줄 자리는 둔다(「복사했어요」가 뜰 때 카드가 들썩이지 않게). 공통 .status 의
   위아래 여백을 카드 안에서는 걷는다 — 첫 목업에서 빈 상태 줄이 버튼 아래 큰 빈칸으로 보였다. */
.pal-card .status{margin:-4px 0 0;min-height:20px;font-size:13px}

.pal-input{display:flex;gap:8px;align-items:stretch}
.pal-input input[type=color]{flex:0 0 48px;width:48px;height:48px;padding:3px;cursor:pointer}
.pal-input input[type=text]{flex:1 1 auto;min-height:48px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pal-maker .chips{margin-top:4px}.pal-maker .chip{min-height:44px}
#maker-result{margin-top:4px}

.pal-rules dl{display:grid;gap:10px;margin-top:10px}.pal-rules dt{font-weight:700;font-size:14px}.pal-rules dd{margin:0;font-size:13px;color:var(--mut)}

.pal-pairs{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.pal-pairs h3{font-size:14px;font-weight:700;overflow-wrap:anywhere}.pal-pairs h3 code{font-size:12px;font-weight:500;color:var(--mut)}
.pal-pairrow{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line)}
.pal-pairrow:last-child{border-bottom:0}