/* 색맹 테스트 전용 CSS (2026-10-20). 검사 부스(고정 회색 무대·진행 고리·숫자판)·결과(판정·축별 행)·시뮬레이션·판 사다리·판별 표 cbt-*. 공용 부품은 assets/v2.css
   무대와 판 색은 두 테마에서 같다(--cbt-gap = 판 사이 회색, tool.js가 판과 같은 값으로 넣는다). 축 표식 점(빨강·초록·파랑)은 원뿔 이름표일 뿐 accent가 아니다. */
.cbt{container:cbtw / inline-size;--cbt-gap:#525252}
.cbt-booth{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.cbt-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;padding:24px 18px 16px;background:var(--cbt-gap);border-radius:var(--radius) 0 0 0;outline:0}
.cbt-disc{position:relative;width:min(100%,430px);aspect-ratio:1}
.cbt-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.5;stroke-linecap:round}
.cbt-ring path,.cbt-ring circle{stroke:rgba(255,255,255,.17);transition:stroke .2s ease-out}
.cbt-ring .is-done{stroke:rgba(255,255,255,.62)}
.cbt-ring .is-now{stroke:#fff}
.cbt-ring .is-idle{stroke:rgba(255,255,255,.34)}
.cbt-plate{position:absolute;inset:5%;width:90%;height:90%;border-radius:50%}
.cbt-plate.is-in{animation:cbt-in .16s ease-out}
@keyframes cbt-in{from{opacity:.3}to{opacity:1}}
.cbt[data-ph="done"] .cbt-plate{opacity:.25}
.cbt-cap{margin:0;min-height:1.5em;font-family:var(--sans);font-size:13px;line-height:1.5;color:#efefef;text-align:center}
.cbt-full{position:absolute;top:10px;right:10px;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);background:rgba(0,0,0,.16);font-family:var(--sans);font-size:12px;font-weight:600;color:#f3f3f3;cursor:pointer}
.cbt-full:hover{background:rgba(0,0,0,.3)}
.cbt-full:focus-visible,.cbt-stage:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cbt-side{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px 18px 18px}
.cbt-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin:0;font-family:var(--sans)}
.cbt-head b{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
.cbt-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cbt-pad button{height:54px;padding:0 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.cbt-pad button:hover:not(:disabled){background:var(--btn)}
.cbt-pad button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.cbt-pad button:disabled{opacity:.4;cursor:not-allowed}
.cbt-pad .cbt-back,.cbt-pad .cbt-none{font-size:13.5px;font-weight:650;line-height:1.2}
.cbt-entry{display:inline-flex;gap:4px}
.cbt-entry[hidden]{display:none}
.cbt-entry i{display:grid;place-items:center;width:26px;height:30px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-style:normal;font-family:var(--sans);font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}
.cbt-entry.is-on i:first-child{border-color:var(--ink)}
.cbt-entry.is-on i:last-child{border-color:var(--ink);border-style:dashed}
.cbt-keys{margin:-6px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cbt-pad button.is-hit{animation:cbt-hit .16s ease-out}
@keyframes cbt-hit{from{transform:scale(.94)}to{transform:none}}

.cbt-setup{display:flex;flex-direction:column;gap:10px}
.cbt-setup[hidden],.cbt-ctrl[hidden],.cbt-ctrl [hidden]{display:none}
.cbt-setup .v2-label{display:block;margin:0 0 6px}
.cbt-len{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cbt-len button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;height:auto;min-height:44px;padding:5px 10px;text-align:left;line-height:1.25}
.cbt-len b{font-weight:700}
.cbt-len small{font-size:11.5px;font-weight:500;opacity:.8;font-variant-numeric:tabular-nums}
.cbt-lenhelp{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.cbt-start{justify-content:center;width:100%}
.cbt-check{list-style:none;margin:2px 0 0;padding:10px 0 0;border-top:1px solid var(--soft);display:grid;gap:5px}
.cbt-check li{position:relative;padding-left:18px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.cbt-check li::before{content:"";position:absolute;left:3px;top:.45em;width:7px;height:4px;border-left:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg)}
.cbt-ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:6px}
.cbt-ctrl .v2-btn{justify-content:center;white-space:nowrap}
.cbt-live{margin:auto 0 0;min-height:1.5em;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}

/* 결과 */
.cbt-res{display:grid;gap:14px;padding:16px 18px 18px;background:color-mix(in srgb,var(--wash) 45%,var(--card));border-radius:0 0 var(--radius) var(--radius)}
.cbt-wait{display:none;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.cbt-res.is-wait .cbt-wait{display:block}
.cbt-res.is-wait .cbt-top,.cbt-res.is-wait .cbt-ladbox,.cbt-res.is-wait .cbt-list{opacity:.42;filter:saturate(.5)}
.cbt-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:14px}
.cbt-box{min-width:0;padding:14px 16px;background:var(--card);border:1px solid var(--soft);border-radius:var(--radius)}
.cbt-hero{display:flex;flex-direction:column}
.cbt-tag{align-self:flex-start;margin:0;padding:2px 8px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink)}
.cbt-tag.is-ex{border-style:dashed;color:var(--muted)}
.cbt-big{margin:10px 0 0;font-family:var(--serif);font-size:22px;font-weight:900;line-height:1.32;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.cbt-big:focus{outline:0}
.cbt-big:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cbt-hero .v2-sub{margin-top:8px}
.cbt-big:lang(ko),.cbt-hero .v2-sub:lang(ko),.cbt-vcap:lang(ko){word-break:keep-all}
.cbt-big:lang(ja){word-break:auto-phrase}
.cbt-rows{margin-top:12px}
.cbt-rows li span{display:inline-flex;align-items:center}
.cbt-dot{display:inline-block;flex:none;width:8px;height:8px;margin-right:7px;border-radius:50%}
.cbt-dot.p{background:#d24a3c}
.cbt-dot.d{background:#3c9a4e}
.cbt-dot.t{background:#4170d4}
.cbt-dot.c{background:var(--muted)}
.cbt-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:auto;padding-top:12px}

.cbt-bhead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.cbt-vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,100px);grid-template-areas:"cv seg" "sev sev" "cap cap" "note note";gap:12px;align-items:start}
.cbt-sim{grid-area:cv;display:block;width:100%;aspect-ratio:1;border-radius:var(--radius);background:var(--cbt-gap)}
.cbt-simseg{grid-area:seg;display:flex;flex-direction:column;gap:4px}
.cbt-simseg button{width:100%;height:34px;padding:0 6px;white-space:nowrap}
.cbt-vsev{grid-area:sev;display:flex;flex-direction:column;gap:6px;min-width:0}
.cbt-sev{display:flex;justify-content:space-between;align-items:baseline}
.cbt-sev output{font-family:var(--sans);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cbt-vsev input[type="range"]{width:100%;margin:0;accent-color:var(--ink)}
.cbt-vsev input[type="range"]:disabled{opacity:.4}
.cbt-vcap{grid-area:cap;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.cbt-vnote{grid-area:note;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.55;color:var(--muted)}

.cbt-legend{display:inline-flex;align-items:center;gap:4px 10px;flex-wrap:wrap;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cbt-legend i{display:inline-grid;place-items:center;width:14px;height:14px;margin-right:-6px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700}
.cbt-legend i.ok::before{content:"✓";color:var(--ink)}
.cbt-legend i.bad::before{content:"✕";color:var(--accent)}
.cbt-legend i.none::before{content:"–";color:var(--muted)}
.cbt-legend i.part::before{content:"½";color:var(--ink)}
.cbt-lad{display:grid;gap:8px}
.cbt-lhead,.cbt-lrow{display:grid;grid-template-columns:5.2rem minmax(0,1fr) 3.6rem;align-items:center;gap:10px}
.cbt-lscale{display:flex;justify-content:space-between;font-family:var(--sans);font-size:11px;color:var(--muted)}
.cbt-lscale b{font-weight:600}
.cbt-lhead > span:last-child{font-family:var(--sans);font-size:11px;color:var(--muted);text-align:right}
.cbt-lname{display:flex;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.2}
.cbt-lname small{width:100%;padding-left:15px;font-size:11px;font-weight:500;color:var(--muted)}
.cbt-cells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}
.cbt-cell{position:relative;display:grid;place-items:center;height:42px;min-width:0;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);cursor:pointer;transition:border-color var(--ease)}
.cbt-cell i{width:min(24px,72%);aspect-ratio:1;border-radius:50%;background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
.cbt-cell::after{position:absolute;right:2px;bottom:0;font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1.3}
.cbt-cell.is-ok::after{content:"✓";color:var(--ink)}
.cbt-cell.is-bad::after{content:"✕";color:var(--accent)}
.cbt-cell.is-none::after{content:"–";color:var(--muted)}
.cbt-cell.is-part::after{content:"½";color:var(--ink)}
.cbt-cell.is-none i,.cbt-cell.is-bad i,.cbt-cell.is-part i{opacity:.75}
.cbt-cell.is-cut::before{content:"";position:absolute;left:-4px;top:-5px;bottom:-5px;width:2px;background:var(--accent);border-radius:1px}
.cbt-cell:hover{border-color:var(--line)}
.cbt-cell.is-sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cbt-lad.is-in .cbt-cell{animation:cbt-pop .32s ease-out both;animation-delay:var(--d)}
@keyframes cbt-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cbt-lval{font-family:var(--sans);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cbt-ladnote{margin:12px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}

.cbt-list{padding:0}
.cbt-list summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.cbt-list summary::-webkit-details-marker{display:none}
.cbt-list summary::after{content:"+";font-family:var(--mono);font-size:14px;font-weight:700;color:var(--muted)}
.cbt-list[open] summary::after{content:"−"}
.cbt-listn{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cbt-tbl{overflow-x:auto;padding:0 16px 14px}
.cbt-tbl table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px}
.cbt-tbl th{padding:6px 8px;border-bottom:1px solid var(--line);background:var(--wash);font-size:11px;font-weight:600;color:var(--muted);text-align:left;white-space:nowrap}
.cbt-tbl td{padding:5px 8px;border-bottom:1px solid var(--soft);white-space:nowrap}
.cbt-tbl .n{text-align:right;font-variant-numeric:tabular-nums}
.cbt-tbl td button{min-width:30px;height:24px;padding:0 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font:inherit;font-weight:650;color:var(--ink);cursor:pointer}
.cbt-tbl tr.is-sel td{background:var(--wash)}
.cbt-tbl tr.is-bad td:last-child{color:var(--accent)}
.cbt-tbl tr.is-none td:last-child,.cbt-tbl tr.is-part td:last-child{color:var(--muted)}
.cbt-noscript{margin:0;padding:16px 18px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* 전체 화면(R46): 무대 + 숫자판 */
.cbt-booth:fullscreen{grid-template-columns:minmax(0,1fr) minmax(280px,340px);background:var(--cbt-gap);border:0}
.cbt-booth:fullscreen .cbt-stage{height:100%;border-radius:0}
.cbt-booth:fullscreen .cbt-disc{width:min(84vh,100%)}
.cbt-booth:fullscreen .cbt-side{justify-content:center;background:var(--card)}
.cbt-booth:-webkit-full-screen{grid-template-columns:minmax(0,1fr) minmax(280px,340px);width:100%;height:100%;background:var(--cbt-gap)}
.cbt-booth:-webkit-full-screen .cbt-stage{height:100%;border-radius:0}
.cbt-booth:-webkit-full-screen .cbt-disc{width:min(84vh,100%)}
.cbt-booth:-webkit-full-screen .cbt-side{justify-content:center;background:var(--card)}
.cbt-booth.is-full{position:fixed;inset:0;z-index:1000;grid-template-columns:minmax(0,1fr) minmax(280px,340px);background:var(--cbt-gap);border:0}
.cbt-booth.is-full .cbt-stage{height:100%;border-radius:0}
.cbt-booth.is-full .cbt-disc{width:min(84vh,100%)}
.cbt-booth.is-full .cbt-side{justify-content:center;background:var(--card)}

@media (max-width: 700px), (orientation: portrait){ /* 좁은·세로 화면의 전체 화면: 컨테이너 쿼리는 .cbt 폭을 재므로 화면 폭으로 1열을 따로 건다 */
  .cbt-booth:fullscreen{grid-template-columns:minmax(0,1fr);align-content:start;overflow-y:auto}
  .cbt-booth:fullscreen .cbt-stage{height:auto}
  .cbt-booth:fullscreen .cbt-disc{width:min(100%,56vh)}
  .cbt-booth:fullscreen .cbt-side{justify-content:flex-start}
  .cbt-booth:-webkit-full-screen{grid-template-columns:minmax(0,1fr);align-content:start;overflow-y:auto}
  .cbt-booth:-webkit-full-screen .cbt-stage{height:auto}
  .cbt-booth:-webkit-full-screen .cbt-disc{width:min(100%,56vh)}
  .cbt-booth:-webkit-full-screen .cbt-side{justify-content:flex-start}
  .cbt-booth.is-full{grid-template-columns:minmax(0,1fr);align-content:start;overflow-y:auto}
  .cbt-booth.is-full .cbt-stage{height:auto}
  .cbt-booth.is-full .cbt-disc{width:min(100%,56vh)}
  .cbt-booth.is-full .cbt-side{justify-content:flex-start}
}
@container cbtw (max-width: 760px){
  .cbt-top{grid-template-columns:minmax(0,1fr)}
  .cbt-vgrid{grid-template-columns:minmax(0,230px) minmax(0,1fr);grid-template-areas:"cv seg" "cv sev" "cv cap" "cv note";grid-template-rows:auto auto auto 1fr}
  .cbt-simseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container cbtw (max-width: 600px){
  .cbt-booth{grid-template-columns:minmax(0,1fr)}
  .cbt-stage{padding:18px 12px 12px;border-radius:var(--radius) var(--radius) 0 0}
  .cbt-disc{width:min(100%,360px)}
  .cbt-side{padding:14px 14px 16px;gap:12px}
  .cbt-pad button{height:50px}
  .cbt-res{padding:14px 12px 16px}
  .cbt-box{padding:12px 13px}
  .cbt-lhead{display:none}
  .cbt-lrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .cbt-lname{flex-wrap:nowrap}
  .cbt-lname small{width:auto;padding-left:6px}
  .cbt-cells{grid-column:1 / -1;grid-row:2}
  .cbt-cell{height:38px}
}
@container cbtw (max-width: 440px){
  .cbt-keys{display:none}
  .cbt-vgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"cv" "seg" "sev" "cap" "note";grid-template-rows:none}
  .cbt-sim{max-width:240px;margin:0 auto}
  .cbt-simseg button{padding:0 4px}
  .cbt-cells{gap:3px}
}
@media (prefers-reduced-motion: reduce){
  .cbt-plate.is-in,.cbt-lad.is-in .cbt-cell,.cbt-pad button.is-hit{animation:none}
}