/* 색상 코드 일괄 변환기 전용 CSS (2026-10-20). '색 목록 작업대': 위 띠(바꿀 형식 · 결과 · 정렬 · 같은 색 합치기) → 팔레트 띠 → [입력 칸 | 결과 칸](줄 번호·견본 홈 + 글 칸,
   높이 = 줄 수, 6~18줄, 나란하면 긴 쪽에 맞춤) → 상태 줄 → 색 카드(견본 | 이름·줄 + 네 형식 값, 상자 높이 = 카드 세 줄).
   움직임: 정렬·합치기를 바꾸면 팔레트 견본이 새 자리로 미끄러진다(tool.js FLIP) — 동작 줄이기면 정지. 작업면 700px 미만은 두 칸을 위아래로, 560px 미만은 띠·칸 머리 버튼을 한 줄씩. 공용 부품은 assets/v2.css */
.bcc-work{container:bcc / inline-size;--bcc-lh:22px;--bcc-card:114px;--bcc-chk:repeating-conic-gradient(#cfc8ba 0 25%,#f6f2ea 0 50%) 0 0/10px 10px}

/* ---------- 위 띠: 바꿀 형식 | 결과, 두 묶음이 폭을 나눠 채움(560px 미만은 한 줄씩) ---------- */
.bcc-bar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px 14px;padding:12px 16px 13px;border-bottom:1px solid var(--soft)}
.bcc-bar .v2-f{min-width:0}
.bcc-bar span.v2-label{display:block}
.bcc-bar .v2-seg{display:flex;flex-wrap:nowrap}
.bcc-bar .v2-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;font-size:13.5px;font-weight:700;white-space:nowrap}
#bccTo button{font-family:var(--sans);letter-spacing:.02em}

/* ---------- 팔레트 띠 ---------- */
.bcc-pal{padding:12px 16px 0}
.bcc-palh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.bcc-palh .v2-label{margin:0}
.bcc-stats{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.bcc-view{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.bcc-view .v2-seg{flex-wrap:nowrap}
.bcc-view .v2-seg button{white-space:nowrap}
.bcc-strip{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.bcc-strip li{min-width:0}
.bcc-strip button{position:relative;display:block;width:100%;height:46px;padding:0;border:0;border-radius:2px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.14);cursor:copy;transition:transform 300ms cubic-bezier(.2,.75,.25,1)}
.bcc-strip button.is-a,.bcc-mk i.is-a,.bcc-sw.is-a{background:linear-gradient(var(--c),var(--c)),var(--bcc-chk)}
.bcc-strip button:hover{outline:2px solid var(--ink);outline-offset:1px}
.bcc-strip button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bcc-strip button span{position:absolute;right:3px;bottom:3px;padding:0 3px;border-radius:2px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:10.5px;font-weight:800;line-height:15px}
.bcc-strip[data-d="dense"]{grid-template-columns:repeat(auto-fill,minmax(18px,1fr));max-height:calc(4 * 18px + 3 * 3px);overflow:auto}
.bcc-strip[data-d="dense"] button{height:18px}
.bcc-strip[data-d="dense"] button span{display:none}
.bcc-none{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 12px;box-sizing:border-box;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- 두 칸 ---------- */
.bcc-panes{display:grid;gap:10px;padding:12px 16px 0}
.bcc-pane{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.bcc-ph{display:flex;align-items:baseline;gap:10px;min-width:0;padding:9px 12px;border-bottom:1px solid var(--soft)}
.bcc-ph > label,.bcc-ph > span{flex:0 0 auto;font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--ink)}
.bcc-meta{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.bcc-pb,.bcc-pf{display:flex;flex-wrap:wrap;gap:6px}
.bcc-pb{margin-left:auto}
.bcc-pf{padding:7px 8px;border-top:1px solid var(--soft)}
.bcc-pb .v2-btn,.bcc-pf .v2-btn{white-space:nowrap}
.bcc-pb svg,.bcc-pf svg{width:15px;height:15px}
.bcc-pb .v2-btn:disabled,.bcc-pf .v2-btn:disabled{opacity:.45;cursor:default}
.bcc-pane--in .bcc-ed{--r:var(--bcc-ri,8)}
.bcc-pane--out .bcc-ed{--r:var(--bcc-ro,8)}
.bcc-ed{position:relative;display:grid;grid-template-columns:var(--bcc-gw,55px) minmax(0,1fr);height:calc(var(--r) * var(--bcc-lh) + 20px);overflow:hidden}
.bcc-gut{position:relative;overflow:hidden;border-right:1px solid var(--soft);background:var(--wash)}
.bcc-gin{position:absolute;top:10px;left:0;right:0}
.bcc-ln{margin:0;padding:0 34px 0 0;font-family:var(--mono);font-size:11.5px;line-height:var(--bcc-lh);color:var(--muted);text-align:right;white-space:pre;font-variant-numeric:tabular-nums}
.bcc-mks{position:absolute;top:0;right:5px;width:28px}
.bcc-mk{position:absolute;right:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;max-width:28px;height:var(--bcc-lh);overflow:hidden}
.bcc-mk i{flex:none;width:11px;height:11px;border-radius:2px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.28)}
.bcc-mk em{flex:none;font-family:var(--sans);font-size:9.5px;font-style:normal;font-weight:700;color:var(--muted)}
.bcc-mk b{flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent);color:var(--paper);font-family:var(--sans);font-size:9px;font-weight:800;line-height:12px;text-align:center}
.bcc-ta{position:relative;min-width:0}
.bcc-text,.bcc-out{display:block;box-sizing:border-box;width:100%;height:100%;margin:0;padding:10px 12px;border:0;border-radius:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:var(--bcc-lh);white-space:pre;overflow:auto;tab-size:2}
.bcc-text{position:absolute;inset:0;resize:none}
.bcc-text::placeholder{color:var(--muted);opacity:.8}
.bcc-text:focus-visible,.bcc-out:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bcc-text[aria-invalid="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.bcc-out mark{background:none;color:inherit}
.bcc-out .bcc-m{box-shadow:inset 0 -3px 0 var(--c),inset 0 -4px 0 var(--line);font-weight:700}
.bcc-out .bcc-x{background:var(--accent-wash);color:var(--accent);text-decoration:underline wavy var(--accent);text-underline-offset:3px}
.bcc-drop{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 88%,transparent);font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);pointer-events:none}
.bcc-drop[hidden]{display:none}
.bcc-drop svg{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
@container bcc (min-width: 700px) { /* 나란한 두 칸은 머리·글 칸·버튼 줄 높이를 subgrid로 맞춰 1번 줄이 같은 높이에 온다 */
  .bcc-panes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto}
  .bcc-pane{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .bcc-ed,.bcc-pane--in .bcc-ed,.bcc-pane--out .bcc-ed{--r:max(var(--bcc-ri,8),var(--bcc-ro,8))}
}

/* ---------- 상태 줄 ---------- */
.bcc-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:0;padding:9px 16px 0}
.bcc-priv{font-family:var(--sans);font-size:12px;color:var(--muted)}

/* ---------- 색 카드 ---------- */
.bcc-sheet{margin-top:14px;padding:12px 16px 16px;border-top:1px solid var(--soft)}
.bcc-sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.bcc-sh .v2-label{margin:0}
.bcc-box{max-height:calc(3 * var(--bcc-card) + 2 * 8px);overflow:auto;overscroll-behavior:contain}
.bcc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.bcc-card{display:grid;grid-template-columns:40px minmax(0,1fr);height:var(--bcc-card);box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.bcc-sw{display:block;background:var(--c);box-shadow:inset -1px 0 0 rgba(26,18,8,.14)}
.bcc-sw.is-oog{background:var(--c);background:linear-gradient(var(--o) 50%,var(--c) 50%)}
.bcc-sw.is-err{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,var(--accent-wash) 0 6px,transparent 6px 12px);color:var(--accent);font-family:var(--sans);font-size:18px;font-weight:800}
.bcc-card.is-err{border-style:dashed;border-color:var(--accent)}
.bcc-cb{display:flex;flex-direction:column;min-width:0;padding:5px 6px 5px 8px}
.bcc-ch{display:flex;align-items:center;gap:4px;height:22px;margin:0 0 1px;min-width:0}
.bcc-nm{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink)}
.bcc-nm.is-none{font-family:var(--mono);font-weight:600;color:var(--muted)}
.bcc-chip{flex:none;padding:0 4px;border:1px solid var(--soft);border-radius:2px;font-family:var(--sans);font-size:10.5px;font-weight:700;line-height:16px;color:var(--muted);white-space:nowrap}
.bcc-chip.is-warn{border-color:var(--accent);color:var(--accent)}
.bcc-go{flex:none;height:20px;padding:0 6px;border:1px solid var(--soft);border-radius:2px;background:var(--btn);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer}
.bcc-go:hover{background:var(--btn-hover)}
.bcc-v{display:block;width:100%;height:20px;margin:0;padding:0 4px;border:0;border-radius:2px;background:none;font-family:var(--mono);font-size:11.5px;line-height:20px;color:var(--ink);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:copy}
.bcc-v:hover{background:var(--btn)}
.bcc-v.is-to{font-weight:700;box-shadow:inset 2px 0 0 var(--accent)}
.bcc-go:focus-visible,.bcc-v:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.bcc-em{margin:3px 0 0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--accent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcc-es{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcc-cards .bcc-none{min-height:60px}

/* ---------- 좁은 작업면: 560px 미만은 형식·결과를 한 줄씩, 팔레트 정렬 버튼은 머리 아래 줄을 채움 ---------- */
@container bcc (max-width: 560px) {
  .bcc-bar{grid-template-columns:minmax(0,1fr)}
  .bcc-view{width:100%;margin-left:0}
  .bcc-view > .v2-seg{flex:1 1 auto}
  .bcc-view .v2-seg button{flex:1 1 auto}
  .bcc-sh .bcc-pb{margin-left:auto}
}
@media (prefers-reduced-motion: reduce) { .bcc-strip button{transition:none} }