/* 흰 화면 전용. blackscreen.css(승인 목업)와 분리해 둔다 — 색조 4 × 강도 4 라 규칙 수가 다르다.
   색은 인라인 style 이 아니라 속성 선택자로 준다(CSP style-src 'self' — 인라인 style 속성은 차단된다).
   아래 16행은 whitescreen-tones.js 의 mix() 산출값이며 tests/whitescreen.test.mjs 가 드리프트를 잡는다. */
.wrap>.card{background:transparent;border:0;padding:0}
#screen-status:empty{display:none}
/* 흰 미리보기는 배경과 대비가 없어 테두리로만 경계를 만든다. 체크무늬는 색조 차이를 가리므로 쓰지 않는다. */
.preview{height:180px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.swatch{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:-1px;margin-right:6px;border:1px solid #aaa}
.swatch-puro{background:#FFFFFF}.swatch-calido{background:#FFF2E0}.swatch-neutro{background:#F7F7F5}.swatch-frio{background:#EDF4FF}
.chip-group-label{margin:12px 0 4px}
#start{width:100%;margin-top:12px;min-height:48px}
#surface{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:#fff;z-index:100;cursor:none;outline:0}
#surface:fullscreen{width:100%;height:100%}
#surface[data-tone="puro"][data-level="100"],#preview[data-tone="puro"][data-level="100"]{background:#FFFFFF}
#surface[data-tone="puro"][data-level="75"],#preview[data-tone="puro"][data-level="75"]{background:#BFBFBF}
#surface[data-tone="puro"][data-level="50"],#preview[data-tone="puro"][data-level="50"]{background:#808080}
#surface[data-tone="puro"][data-level="25"],#preview[data-tone="puro"][data-level="25"]{background:#404040}
#surface[data-tone="calido"][data-level="100"],#preview[data-tone="calido"][data-level="100"]{background:#FFF2E0}
#surface[data-tone="calido"][data-level="75"],#preview[data-tone="calido"][data-level="75"]{background:#BFB6A8}
#surface[data-tone="calido"][data-level="50"],#preview[data-tone="calido"][data-level="50"]{background:#807970}
#surface[data-tone="calido"][data-level="25"],#preview[data-tone="calido"][data-level="25"]{background:#403D38}
#surface[data-tone="neutro"][data-level="100"],#preview[data-tone="neutro"][data-level="100"]{background:#F7F7F5}
#surface[data-tone="neutro"][data-level="75"],#preview[data-tone="neutro"][data-level="75"]{background:#B9B9B8}
#surface[data-tone="neutro"][data-level="50"],#preview[data-tone="neutro"][data-level="50"]{background:#7C7C7B}
#surface[data-tone="neutro"][data-level="25"],#preview[data-tone="neutro"][data-level="25"]{background:#3E3E3D}
#surface[data-tone="frio"][data-level="100"],#preview[data-tone="frio"][data-level="100"]{background:#EDF4FF}
#surface[data-tone="frio"][data-level="75"],#preview[data-tone="frio"][data-level="75"]{background:#B2B7BF}
#surface[data-tone="frio"][data-level="50"],#preview[data-tone="frio"][data-level="50"]{background:#777A80}
#surface[data-tone="frio"][data-level="25"],#preview[data-tone="frio"][data-level="25"]{background:#3B3D40}