/* HEX to RGB 변환기 전용 CSS (2026-10-12). 2패널(입력 | 색 견본·코드) + HEX 풀이 · 대비 · 기본 16색. 공용 부품은 assets/v2.css */
.hx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hx-in{padding:16px 18px 18px;min-width:0}
.hx-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.hx-inrow{display:flex;gap:8px;align-items:stretch}
.hx-pick{flex:0 0 auto;width:var(--v2-ctl,42px);height:var(--v2-ctl,42px);padding:3px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer}
.hx-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hx-text{flex:1 1 auto;min-width:0}
.hx-text input{text-align:left;font-family:var(--mono, ui-monospace, monospace);letter-spacing:.02em}
.hx-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.hx-rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.hx-alpha{margin-top:14px}
.hx-range{display:block;width:100%;margin:8px 0 0;accent-color:var(--ink)}
.hx-ch--r .hx-range{accent-color:#d93a3a}
.hx-ch--g .hx-range{accent-color:#2f9a4a}
.hx-ch--b .hx-range{accent-color:#2f6fd9}
.hx-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:16px}
.hx-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:hxout / inline-size}
.hx-swatch{position:relative;height:96px;margin-bottom:14px;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;background:repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 16px 16px}
.hx-swatch i{position:absolute;inset:0;transition:background-color .35s var(--ease,ease)}
.hx-swatch span{position:absolute;left:14px;bottom:10px;font-family:var(--mono, ui-monospace, monospace);font-size:15px;font-weight:700;letter-spacing:.04em}
.hx-out .v2-label{display:block;margin-bottom:6px;overflow-wrap:anywhere}
.hx-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(18px, calc(100cqi / (var(--hx-len, 8) * .6)), 1em)}
.hx-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.hx-codes{list-style:none;margin:14px 0 0;padding:0}
.hx-codes li{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--soft)}
.hx-codes li[hidden]{display:none}
.hx-cl{font-family:var(--sans);font-size:12px;color:var(--muted)}
.hx-codes code{font-family:var(--mono, ui-monospace, monospace);font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.hx-cb{height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer}
.hx-cb:hover{background:var(--btn)}
.hx-cb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hx-cb:disabled{opacity:.45;cursor:default}
.hx-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.hx-codes + .hx-foot{margin-top:14px}
.hx-foot .v2-status{margin-left:auto}
.hx-box{padding:14px 18px 18px;border-top:1px solid var(--soft);min-width:0}
.hx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.hx-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
/* HEX 풀이: 두 자리 → 식 → 값 → 채널 막대 */
.hx-explain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hx-ex{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans)}
.hx-ex[hidden]{display:none}
.hx-exch{grid-column:1 / -1;font-size:12px;font-weight:700;color:var(--muted)}
.hx-exdg{font-family:var(--mono, ui-monospace, monospace);font-size:26px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.hx-exf{font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.hx-exv{grid-column:1 / -1;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hx-exbar{grid-column:1 / -1;display:block;height:8px;margin-top:4px;border-radius:4px;background:var(--soft);overflow:hidden}
.hx-exbar i{display:block;height:100%;width:0;border-radius:4px;background:var(--ink);transition:width .45s var(--ease,ease)}
.hx-ex--r .hx-exbar i{background:#d93a3a}
.hx-ex--g .hx-exbar i{background:#2f9a4a}
.hx-ex--b .hx-exbar i{background:#2f6fd9}
.hx-expc{grid-column:1 / -1;font-size:11.5px;color:var(--muted)}
/* 흰·검은 글자 대비 */
.hx-contrast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hx-tile{padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash);transition:background-color .35s var(--ease,ease)}
.hx-tile--white{color:#fff}
.hx-tile--black{color:#000}
.hx-tsample{margin:0;font-family:var(--sans);font-size:22px;font-weight:700;line-height:1.25}
.hx-tline{margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-family:var(--sans)}
.hx-tratio{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.hx-tverdict{font-size:13px;font-weight:600}
.hx-tile.is-empty{color:var(--muted)}
.hx-tile small{display:block;font-family:var(--sans);font-size:11.5px;opacity:.85}
/* 기본 16색 */
.hx-basic{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.hx-basic button{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;gap:0 8px;align-items:center;width:100%;min-height:44px;padding:6px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer}
.hx-basic button i{grid-row:1 / 3;width:22px;height:22px;border-radius:50%;border:1px solid var(--line)}
.hx-basic button span{font-size:12.5px;font-weight:700}
.hx-basic button code{font-family:var(--mono, ui-monospace, monospace);font-size:11.5px;color:var(--muted)}
.hx-basic button:hover{background:var(--wash)}
.hx-basic button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hx-basic button[aria-pressed="true"]{border-color:var(--ink);background:var(--wash)}
@media (max-width:720px){
  .hx-grid{grid-template-columns:minmax(0,1fr)}
  .hx-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .hx-in,.hx-out,.hx-box{padding-left:12px;padding-right:12px}
  .hx-contrast{grid-template-columns:minmax(0,1fr)}
}
@container hxout (max-width:360px){ .hx-codes li{grid-template-columns:minmax(0,1fr) auto} .hx-cl{grid-column:1 / -1} }
@media (prefers-reduced-motion:reduce){ .hx-swatch i,.hx-exbar i,.hx-tile{transition:none} }