/* 画像 色 抽出 면. 색·간격은 tools-base.css 의 기존 토큰만 쓴다. 견본 색은 도구 산출이라 SVG fill 속성으로 칠한다(인라인 style 없음 — CSP). */
.ic-tool{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ic-tool h2{margin:6px 0 0;font-size:16px}
.ic-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ic-pick .note{margin:0}
.ic-pick-btn{min-height:48px;display:inline-flex;align-items:center;cursor:pointer}
.ic-pick:has(input:focus-visible) .ic-pick-btn{outline:3px solid var(--focus-ring,var(--b));outline-offset:2px}
.ic-pick:has(input:disabled) .ic-pick-btn{opacity:.5;cursor:default}
.ic-tool .error:empty{display:none}
.ic-stage{position:relative;margin:0;display:grid;gap:6px}
.ic-badge{position:absolute;top:8px;left:8px}
.ic-sample,.ic-canvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
/* 캔버스 상자 = 그림 그대로(object-fit 여백 없음) — 누른 자리 → 화소 환산이 상자 비율로 정확하다. 세로로 긴 그림은 높이로 맞춘다. */
.ic-canvas{cursor:crosshair}
.ic-canvas.ic-tall{width:auto;height:min(420px,70vh);max-width:100%;justify-self:start}
/* 작은 그림(예시 12×8 포함)은 늘려 보일 때 칸이 번지지 않게 */
.ic-canvas.ic-pixelated{image-rendering:pixelated}
.ic-result[hidden],.ic-stage[hidden],.ic-canvas[hidden],.ic-picked[hidden],.ic-colors li[hidden],.ic-all[hidden]{display:none}
.ic-picked{display:grid;gap:6px}
.ic-result{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* 탭한 색 카드는 한 장 — 내용 폭으로(좁은 화면에서는 줄어든다). 고정 열 폭이면 데스크톱에서 rgb() 값이 두 줄로 꺾였다(2026-10-12 열람 캡처). */
.ic-picked .ic-colors{grid-template-columns:minmax(0,max-content)}
.ic-colors{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ic-color{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px;text-align:left;font-weight:500}
.ic-swatch{flex:none}.ic-swatch rect{stroke:var(--line);stroke-width:1}
.ic-code{display:grid;flex:1 1 auto;min-width:0}
.ic-code code{font-size:15px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ic-rgb{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.ic-color .copy-label{font-size:12px;color:var(--mut);white-space:nowrap}
.ic-all{width:100%;min-height:48px}
.ic-all .copy-label{background:none;padding:0;margin:0;border-radius:0;color:inherit;font:inherit}
.ic-tool .status:empty{display:none}
.ic-how ul{margin:6px 0;padding-left:1.2em}