/* 색상 대비 검사기 전용 CSS (2026-10-20). 대비 작업대: 입력 띠 → 견본 무대 | 대비율(로그 자 + 기준 5줄) → 명도로 맞추기(곡선 + 색 띠 슬라이더) → 색각 이상 4칸.
   폭 판단은 작업면 컨테이너 cac(작업면 640 미만이면 한 열, DOM 순서대로 대비율이 먼저). 견본 무대는 사용자가 고른 두 색(--cac-fg·--cac-bg)만 쓴다. 공용 부품 assets/v2.css */
.cac-work{container:cac / inline-size}
.cac-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"bar bar" "stage res" "tune tune" "cvd cvd" "acts acts"} /* 컨테이너 자신은 쿼리로 못 바꾸므로 안쪽 격자 */
.cac-work .v2-status:empty{display:none}
.cac-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* 입력 띠 */
.cac-bar{grid-area:bar;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.cac-form{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,118px) auto;grid-template-areas:"fg swap bg fs bold";align-items:end;gap:10px}
.cac-fgf{grid-area:fg}.cac-bgf{grid-area:bg}.cac-fsf{grid-area:fs}.cac-boldf{grid-area:bold}.cac-swapf{grid-area:swap}
.cac-crow{display:grid;grid-template-columns:var(--v2-ctl,42px) minmax(0,1fr);gap:6px}
.cac-pick{display:block;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}
.cac-pick::-webkit-color-swatch-wrapper{padding:0}
.cac-pick::-webkit-color-swatch{border:0;border-radius:calc(var(--radius) - 2px)}
.cac-pick::-moz-color-swatch{border:0;border-radius:calc(var(--radius) - 2px)}
.cac-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cac-text input{text-align:left;letter-spacing:.01em}
.cac-fsf .v2-label em{font-variant-numeric:tabular-nums;white-space:nowrap}
.cac-boldf .v2-switch{height:var(--v2-ctl,42px)}
.cac-swapf{display:flex;align-items:flex-end}
.cac-swap{display:grid;place-items:center;width:34px;height:34px;margin:0 0 4px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:background var(--ease)}
.cac-swap:hover{background:var(--btn)}
.cac-swap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cac-work.is-swapped .cac-swap svg{animation:cacSpin .36s cubic-bezier(.2,.75,.25,1)}
@keyframes cacSpin{from{transform:rotate(0)}to{transform:rotate(180deg)}}
.cac-pre{margin-top:12px}
.cac-pre .v2-label{display:block;margin:0 0 5px}
.cac-chips{display:flex;flex-wrap:wrap;gap:4px}
.cac-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 5px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer;transition:background var(--ease),color var(--ease)}
.cac-chip:hover{background:var(--btn);color:var(--ink)}
.cac-chip i{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--sans);font-size:12px;font-style:normal;font-weight:800}

/* 대비율 */
.cac-res{grid-area:res;min-width:0;padding:16px 18px 14px 16px}
.cac-res-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
.cac-std{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.cac-big{font-size:50px}
.cac-big small{font-family:var(--sans);font-size:24px;font-weight:700}
.cac-say{min-height:3.2em;margin-top:8px}
.cac-say.is-error{color:var(--accent)}
.cac-ruler{margin:12px 0 4px}
.cac-rbar{position:relative;height:10px}
.cac-rbar i{position:absolute;top:0;bottom:0}
.cac-rbar .z0{left:0;width:36.08%;border-radius:999px 0 0 999px;background:repeating-linear-gradient(135deg,var(--soft) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--soft)}
.cac-rbar .z1{left:36.08%;width:13.32%;background:color-mix(in srgb,var(--ink) 22%,var(--paper))}
.cac-rbar .z2{left:49.40%;width:14.51%;background:color-mix(in srgb,var(--ink) 48%,var(--paper))}
.cac-rbar .z3{left:63.91%;width:36.09%;border-radius:0 999px 999px 0;background:color-mix(in srgb,var(--ink) 76%,var(--paper))}
.cac-mark{position:absolute;top:-5px;bottom:-5px;left:0;width:4px;margin-left:-2px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 2px var(--card);transition:left .45s cubic-bezier(.2,.75,.25,1)}
.cac-rticks{position:relative;height:16px;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cac-rticks span{position:absolute;top:0;transform:translateX(-50%)}
.cac-rticks span:first-child{transform:none}
.cac-rticks span:last-child{transform:translateX(-100%)}
.cac-checks{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;margin:8px 0 0;padding:0}
.cac-checks li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:7px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px;color:var(--muted)}
.cac-checks li.is-ui{margin-top:2px;border-top-color:var(--line)}
.cac-cn{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.cac-cn > *{white-space:nowrap}
.cac-cn small{font-family:var(--mono);font-size:10px;opacity:.75}
.cac-now{display:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink)}
.cac-checks li.is-now{color:var(--ink);font-weight:700}
.cac-checks li.is-now .cac-now{display:inline}
.cac-need{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cac-v{text-align:right;font-weight:700;white-space:nowrap;color:var(--ink)}
.cac-v::before{content:"✓ "}
.cac-checks li.is-fail .cac-v{color:var(--accent)}
.cac-checks li.is-fail .cac-v::before{content:"✕ "}

/* 견본 무대: 고른 두 색만 */
.cac-stage{grid-area:stage;display:flex;flex-direction:column;min-width:0;margin:16px 0 16px 18px;padding:16px 20px 18px;border-radius:var(--radius);background:var(--cac-bg,#fff);color:var(--cac-fg,#000);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;overflow-wrap:anywhere;transition:background-color .3s,color .3s}
.cac-stage p{margin:0;color:inherit}
.cac-st-top{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.cac-st-big{font-family:var(--sans);font-size:60px;font-weight:800;line-height:.9;letter-spacing:-.03em}
.cac-st-k{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;text-align:right}
.cac-st-h{margin-top:10px !important;font-family:var(--sans);font-size:24px;font-weight:700;line-height:1.3}
.cac-st-p{margin-top:8px !important;font-family:var(--sans);line-height:1.55}
.cac-st-s{margin-top:8px !important;font-family:var(--sans);font-size:12px;line-height:1.5}
.cac-st-gfx{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-top:auto;padding-top:16px;font-family:var(--sans);font-size:14px}
.cac-st-chart{display:block;flex:0 0 auto;fill:currentColor}
.cac-st-chk{display:inline-flex;align-items:center;gap:7px}
.cac-st-chk i{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid currentColor;border-radius:3px}
.cac-st-prog{display:block;width:96px;height:10px;margin-bottom:4px;border:1.5px solid currentColor;border-radius:999px;overflow:hidden}
.cac-st-prog i{display:block;width:62%;height:100%;background:currentColor}
.cac-st-ui{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;font-family:var(--sans);font-size:14px}
.cac-st-btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;border:1.5px solid currentColor;border-radius:var(--radius);font-weight:700}
.cac-st-in{display:inline-flex;align-items:center;height:34px;min-width:96px;padding:0 10px;border:1px solid currentColor;border-radius:var(--radius)}
.cac-st-ic{display:block;flex:0 0 auto}
.cac-st-a{text-underline-offset:3px}

/* 명도로 맞추기 */
.cac-tune{grid-area:tune;padding:14px 18px 12px;border-top:1px solid var(--soft)}
.cac-tune-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cac-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cac-sug{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;color:var(--ink);white-space:nowrap}
button.cac-sug{cursor:pointer;transition:background var(--ease),border-color var(--ease)}
button.cac-sug:hover{background:var(--btn);border-color:var(--line)}
.cac-sug i{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.cac-sug b{font-weight:750}
.cac-sug code{font-family:var(--mono);font-size:12px}
.cac-sug em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
span.cac-sug{padding-left:10px;background:none;border-style:dashed}
.cac-chart{margin-top:10px;min-height:128px}
.cac-chart svg{display:block;overflow:visible}
.cac-band{fill:var(--fill);opacity:.05}
.cac-band.b1{opacity:.06}
.cac-th{stroke:var(--soft);stroke-width:1;stroke-dasharray:3 3}
.cac-th.on{stroke:var(--muted)}
.cac-tl{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.cac-tl.end{text-anchor:end}
.cac-tl,.cac-spl{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round} /* 곡선과 겹쳐도 읽히게 */
.cac-tl.on{fill:var(--ink);font-weight:700}
.cac-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.cac-sp{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.cac-spl{font-family:var(--sans);font-size:10px;font-weight:800;fill:var(--ink);text-anchor:middle}
.cac-ax{font-family:var(--sans);font-size:10.5px;fill:var(--muted)}
.cac-ax.end{text-anchor:end}
.cac-guide{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.cac-cur circle{stroke:var(--ink);stroke-width:2.5}
.cac-cur,.cac-guide{transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.cac-range{display:block;width:100%;height:26px;margin:4px 0 0;padding:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.cac-range::-webkit-slider-runnable-track{height:18px;border-radius:999px;background:var(--cac-track,var(--soft));box-shadow:inset 0 0 0 1px var(--line)}
.cac-range::-moz-range-track{height:18px;border-radius:999px;background:var(--cac-track,var(--soft));box-shadow:inset 0 0 0 1px var(--line)}
.cac-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-1px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1.5px #000,0 1px 4px rgba(0,0,0,.35)}
.cac-range::-moz-range-thumb{width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1.5px #000,0 1px 4px rgba(0,0,0,.35)}
.cac-range:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}

/* 색각 이상 미리 보기 */
.cac-cvdw{grid-area:cvd;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.cac-cvdw > .v2-label{display:block;margin:0 0 6px}
.cac-cvd{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0}
.cac-cvd li{min-width:0;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden}
.cac-cv-s{display:flex;align-items:baseline;gap:8px;height:58px;padding:12px 12px 0;overflow:hidden;transition:background-color .3s,color .3s}
.cac-cv-s b{font-family:var(--sans);font-size:26px;font-weight:800;line-height:1}
.cac-cv-s span{font-family:var(--sans);font-size:13px;white-space:nowrap}
.cac-cvd p{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:1px 8px;margin:0;padding:6px 10px 7px;font-family:var(--sans);font-size:12px}
.cac-cv-n{grid-column:1/-1;min-width:0;color:var(--muted)}
.cac-cv-v{text-align:right}
.cac-cv-r{font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.cac-cv-v{font-style:normal;font-weight:700;white-space:nowrap}
.cac-cv-v::before{content:"✓ "}
.cac-cvd li.is-fail .cac-cv-v{color:var(--accent)}
.cac-cvd li.is-fail .cac-cv-v::before{content:"✕ "}

.cac-acts{grid-area:acts;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 18px 14px;border-top:1px solid var(--soft)}
.cac-work.is-err .cac-stage,.cac-work.is-err .cac-ruler,.cac-work.is-err .cac-checks,.cac-work.is-err .cac-tune,.cac-work.is-err .cac-cvdw{opacity:.35}

/* 좁은 작업면: 한 열(대비율 → 입력 → 무대 → 맞추기 → 색각), 입력은 글자색·배경색 두 줄 + 옆 바꾸기 */
@container cac (max-width:639px){
  .cac-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "bar" "stage" "tune" "cvd" "acts"}
  .cac-res{padding:14px 14px 12px;border-bottom:1px solid var(--soft)}
  .cac-bar{padding:12px 14px}
  .cac-stage{margin:12px 14px}
  .cac-tune{padding:12px 14px 10px}
  .cac-cvdw{padding:12px 14px}
  .cac-acts{padding:10px 14px 12px}
  .cac-big{font-size:44px}
}
@container cac (max-width:599px){
  .cac-form{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"fg swap" "bg swap" "fs bold";align-items:end}
  .cac-swapf{align-self:center;padding-top:22px}
  .cac-swap{margin:0;transform:rotate(90deg)}
  .cac-work.is-swapped .cac-swap svg{animation:cacSpin .36s cubic-bezier(.2,.75,.25,1)}
  .cac-sugs{margin-left:0;width:100%}
}
@container cac (max-width:559px){
  .cac-cvd{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .cac-mark,.cac-cur,.cac-guide,.cac-stage,.cac-cv-s{transition:none}
  .cac-work.is-swapped .cac-swap svg{animation:none}
}